fix password visibility toggle issues, closes #18

account/templates/account/forms/widgets/c_password.html

@@ -2,9 +2,18 @@
 
 <div class="row">
     <div class="col-sm-10">
-        <input name="{{ widget.name }}" class="{{ widget.attrs.class }} js-toogle-password" type="password" id="{{ widget.attrs.id }}"/>
+        <input name="{{ widget.name }}" class="{{ widget.attrs.class }} js-toggle-password" type="password" id="{{ widget.attrs.id }}"/>
     </div>
     <div class="col-sm-2">
-        <img class="toogle-eye" src="{% static 'svg/eye.svg' %}" title="click to see password">
+        <img
+                data-state="0"
+                data-input-id="{{ widget.attrs.id }}"
+                data-eye="{% static 'svg/eye.svg' %}"
+                data-closed-eye="{% static 'svg/eye_closed.svg' %}"
+                alt="eye"
+                class="toggle-eye"
+                src="{% static 'svg/eye.svg' %}"
+                title="click to see password"
+        />
     </div>
 </div>

note/static/account/css/forms/widgets/c_password.css

@@ -1,3 +1,3 @@
-.toogle-eye {
+.toggle-eye {
     cursor: pointer;
 }

note/static/account/js/forms/widgets/cPassword.js

@@ -1,15 +1,20 @@
-const passwords = [...document.getElementsByClassName('js-toogle-password')];
-const eyes = [...document.getElementsByClassName('toogle-eye')];
-let state = false;
+const passwordEyes = [...document.getElementsByClassName('toggle-eye')];
 
+passwordEyes.forEach((eye) => {
+    eye.addEventListener('click', () => {
+        if ('inputId' in eye.dataset && 'state' in eye.dataset) {
+            const input = document.getElementById(eye.dataset.inputId);
+            const state = eye.dataset.state;
 
-function tooglePasswordView (ps = passwords) {
-    ps.forEach((p) => {
-        if (p.type) {
-            state? p.type = 'password': p.type = 'text';
-        };
-    });
-    state = !state;
-};
+            if (input && input.hasAttribute('type') && state) {
+                input.type = state === '1'? 'password': 'text';
+                eye.dataset.state = state === '1'? '0': '1';
 
-eyes.forEach((eye) => eye.addEventListener('click', () => tooglePasswordView(passwords)));
+                if ('eye' in eye.dataset && 'closedEye' in eye.dataset && eye.hasAttribute('src')) {
+                    eye.src = state === '1'? eye.dataset.eye: eye.dataset.closedEye;
+                    eye.title = state === '1'? 'click to see password': 'click to hide password'
+                }
+            }
+        }
+    })
+})