https://zonaprivadaong.fundacionlealtad.org/js/login/show-password.js

1//- ****************************************************************************
2//-  Script Module ShowPassword
3//-
4//-  Table of Contents:
5//-    1. Init
6//-    2. onClickIcon
7//-    3. showPassword
8//-    4. hidePassword
9//-
10//- ****************************************************************************
11
12const mShowPassword = (() => {
13  let elements = {};
14
15
16  // ANCHOR 1. Init
17  // -----------------------------------------------------------------------------
18  function init(elemIcon) {
19    elements = {
20      input: elemIcon.closest('.input-container').querySelector('input'),
21      icon: elemIcon,
22    };  
23
24    _hidePassword();
25    elements.icon.addEventListener('click', () => _onClickIcon());     
26  } 
27
28
29  // ANCHOR 2. _onClickIcon
30  // -----------------------------------------------------------------------------
31  function _onClickIcon() {
32    ( elements.icon.classList.contains('ico-eye') ) 
33      ? _showPassword() 
34      : _hidePassword();
35  }
36
37
38  // ANCHOR 3. _showPassword
39  // -----------------------------------------------------------------------------
40  function _showPassword() {
41    elements.icon.classList.remove('ico-eye');
42    elements.icon.classList.add('ico-eye-slash');  
43    elements.input.setAttribute('type', 'text'); 
44  }
45
46
47  // ANCHOR 4. _hidePassword
48  // -----------------------------------------------------------------------------
49  function _hidePassword() {
50    elements.icon.classList.add('ico-eye'); 
51    elements.icon.classList.remove('ico-eye-slash');    
52    elements.input.setAttribute('type', 'password');
53  }
54
55
56  return {
57    init: init
58  };
59})();
60
61
62document.addEventListener('DOMContentLoaded', (event) => {
63  const elemShowPassword = document.querySelector('.js-show-password');
64  if ( elemShowPassword ) mShowPassword.init(elemShowPassword);  
65})