reset password

ocadotechnology · Nov 2, 2023 · 0095434 · 0095434
1 parent 1109426
commit 0095434
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 3 deletions.
diff --git a/portal/static/portal/js/resetPassword.js b/portal/static/portal/js/resetPassword.js
@@ -0,0 +1,23 @@
+$(document).ready(() => {
+  $('#reset-password-form').on(
+    'click',
+    '#password-field-icon, #confirm-password-field-icon',
+    () => {
+      let inputType;
+      let dataIcon = $('#password-field-icon').attr('data-icon');
+      if (dataIcon === 'material-symbols:visibility') {
+        inputType = 'password';
+        dataIcon = 'material-symbols:visibility-off';
+      } else {
+        inputType = 'text';
+        dataIcon = 'material-symbols:visibility';
+      }
+
+      $('#id_new_password1').attr('type', inputType);
+      $('#id_new_password2').attr('type', inputType);
+
+      $('#password-field-icon').attr('data-icon', dataIcon);
+      $('#confirm-password-field-icon').attr('data-icon', dataIcon);
+    }
+  );
+});
diff --git a/portal/templates/portal/reset_password_confirm.html b/portal/templates/portal/reset_password_confirm.html
@@ -8,20 +8,24 @@ <h4>Password Reset</h4>
     {% if validlink %}
         <p class="text-left">Please enter a new password and confirm it in the boxes below to reset your account&rsquo;s password.</p>
 
-        <form method="post">
+        <form id="reset-password-form" method="post">
 
             {% csrf_token %}
 
             {{ form.non_field_errors }}
 
             <div class="form--row">
-                {{ form.new_password1 }}
+                <div class="input--icon">
+                    {{ form.new_password1 }} <span id="password-field-icon" class="iconify" data-icon="material-symbols:visibility-off"></span>
+                </div>
                 <small>{{ form.new_password1.help_text }}</small>
             </div>
             {{ form.new_password1.errors }}
 
             <div class="form--row">
-                {{ form.new_password2 }}
+                <div class="input--icon">
+                    {{ form.new_password2 }} <span id="confirm-password-field-icon" class="iconify" data-icon="material-symbols:visibility-off"></span>
+                </div>
                 <small>{{ form.new_password2.help_text }}</small>
             </div>
             {{ form.new_password2.errors }}
@@ -66,5 +70,6 @@ <h4>Password Reset</h4>
     var INDEP_STUDENT_PASSWORD_FIELD_ID = '{{ form.new_password1.auto_id }}';
 </script>
 <script type="text/javascript" src="{% static 'portal/js/passwordStrength.js' %}"></script>
+<script type="text/javascript" src="{% static 'portal/js/resetPassword.js' %}"></script>
 
 {% endblock form_content %}