From 0310edb2dadfec71f8b6f0136b0f3c50c8542b22 Mon Sep 17 00:00:00 2001
From: Stefan Kairinos <118008817+SKairinos@users.noreply.github.com>
Date: Fri, 3 Nov 2023 15:27:24 +0000
Subject: [PATCH] feat: reveal password button (#2218)

* register forms

* register forms pt.2

* teacher password visibility

* student login

* independent login

* reset password

* teacher account

* student account

* fix teacher password

* teacher edits student password

* feedback

* Merge branch 'master' into reveal_password_button
---
 portal/static/portal/js/independentLogin.js   | 16 +++++
 .../static/portal/js/organisation_manage.js   | 62 +++++++++++++++++++
 portal/static/portal/js/passwordStrength.js   | 46 ++++++++++++++
 portal/static/portal/js/resetPassword.js      | 23 +++++++
 portal/static/portal/js/studentLogin.js       | 16 +++++
 portal/static/portal/js/teacherEditStudent.js | 23 +++++++
 portal/static/portal/js/teacherLogin.js       | 16 +++++
 .../portal/login/independent_student.html     |  7 ++-
 portal/templates/portal/login/student.html    |  7 ++-
 portal/templates/portal/login/teacher.html    |  8 ++-
 .../portal/play/student_edit_account.html     | 13 ++--
 portal/templates/portal/register.html         | 12 ++--
 .../portal/reset_password_confirm.html        | 11 +++-
 portal/templates/portal/teach/dashboard.html  |  7 ++-
 .../portal/teach/teacher_edit_student.html    | 17 +++--
 15 files changed, 256 insertions(+), 28 deletions(-)
 create mode 100644 portal/static/portal/js/independentLogin.js
 create mode 100644 portal/static/portal/js/resetPassword.js
 create mode 100644 portal/static/portal/js/studentLogin.js
 create mode 100644 portal/static/portal/js/teacherEditStudent.js
 create mode 100644 portal/static/portal/js/teacherLogin.js

diff --git a/portal/static/portal/js/independentLogin.js b/portal/static/portal/js/independentLogin.js
new file mode 100644
index 000000000..3f10bb6a3
--- /dev/null
+++ b/portal/static/portal/js/independentLogin.js
@@ -0,0 +1,16 @@
+$(document).ready(() => {
+  $('#independent_student_login_form').on('click', '#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_password').attr('type', inputType);
+    $('#password-field-icon').attr('data-icon', dataIcon);
+  });
+});
diff --git a/portal/static/portal/js/organisation_manage.js b/portal/static/portal/js/organisation_manage.js
index 255eaa285..f6977d944 100644
--- a/portal/static/portal/js/organisation_manage.js
+++ b/portal/static/portal/js/organisation_manage.js
@@ -89,3 +89,65 @@ function showDeleteAccountConfirmation(delete_password, unsubscribe_newsletter,
 function hideDeleteAccountPopup() {
   $("#popup-delete-review").removeClass("popup--fade");
 }
+
+$(document).ready(() => {
+  $('#edit_account_details_password, #student_account_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_password').attr('type', inputType);
+      $('#id_confirm_password').attr('type', inputType);
+
+      $('#password-field-icon').attr('data-icon', dataIcon);
+      $('#confirm-password-field-icon').attr('data-icon', dataIcon);
+    }
+  );
+
+  $('#edit_account_details_password, #student_account_form').on(
+    'click',
+    '#current-password-field-icon',
+    () => {
+      let inputType;
+      let dataIcon = $('#current-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_current_password').attr('type', inputType);
+      $('#current-password-field-icon').attr('data-icon', dataIcon);
+    }
+  );
+
+  $('#delete-account, #delete-indy-account').on(
+    'click',
+    '#delete-password-field-icon',
+    () => {
+      let inputType;
+      let dataIcon = $('#delete-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_delete_password').attr('type', inputType);
+      $('#delete-password-field-icon').attr('data-icon', dataIcon);
+    }
+  );
+});
diff --git a/portal/static/portal/js/passwordStrength.js b/portal/static/portal/js/passwordStrength.js
index de17330a6..3b3dc0209 100644
--- a/portal/static/portal/js/passwordStrength.js
+++ b/portal/static/portal/js/passwordStrength.js
@@ -117,10 +117,56 @@ async function handlePwnedPasswordApiAvailability() {
   }
 }
 
+function onClickPasswordVisibility(
+  formId,
+  passwordIconId,
+  confirmPasswordIconId,
+  passwordId,
+  confirmPasswordId
+) {
+  // Delegate event listeners.
+  $(formId).on('click', '[data-icon^="material-symbols:visibility"]', function () {
+    // Get icons and input types.
+    let inputType;
+    let dataIcon;
+    if ($(this).attr('data-icon') === 'material-symbols:visibility') {
+      inputType = 'password';
+      dataIcon = 'material-symbols:visibility-off';
+    } else {
+      inputType = 'text';
+      dataIcon = 'material-symbols:visibility';
+    }
+
+    // Set icons.
+    $(passwordIconId).attr('data-icon', dataIcon);
+    $(confirmPasswordIconId).attr('data-icon', dataIcon);
+
+    // Set input types.
+    $(passwordId).attr('type', inputType);
+    $(confirmPasswordId).attr('type', inputType);
+  })
+}
+
 $(document).ready(function () {
   handlePasswordStrength(); // the password strength text is updated dynamically hence this is the initial first call
   handlePwnedPasswordApiAvailability();
   $(
     `#${TEACHER_PASSWORD_FIELD_ID}, #${INDEP_STUDENT_PASSWORD_FIELD_ID}`
   ).on('input change focus blur', handlePasswordStrength);
+
+  onClickPasswordVisibility(
+    '#teacher-register-form',
+    '#teacher-password-field-icon',
+    '#teacher-confirm-password-field-icon',
+    '#id_teacher_signup-teacher_password',
+    '#id_teacher_signup-teacher_confirm_password'
+  );
+
+  onClickPasswordVisibility(
+    '#independent-student-register-form',
+    '#independent-student-password-field-icon',
+    '#independent-student-confirm-password-field-icon',
+    '#id_independent_student_signup-password',
+    '#id_independent_student_signup-confirm_password'
+  );
 });
diff --git a/portal/static/portal/js/resetPassword.js b/portal/static/portal/js/resetPassword.js
new file mode 100644
index 000000000..11aeb195b
--- /dev/null
+++ 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/static/portal/js/studentLogin.js b/portal/static/portal/js/studentLogin.js
new file mode 100644
index 000000000..694f4fe23
--- /dev/null
+++ b/portal/static/portal/js/studentLogin.js
@@ -0,0 +1,16 @@
+$(document).ready(() => {
+  $('#form-login-school').on('click', '#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_password').attr('type', inputType);
+    $('#password-field-icon').attr('data-icon', dataIcon);
+  });
+});
diff --git a/portal/static/portal/js/teacherEditStudent.js b/portal/static/portal/js/teacherEditStudent.js
new file mode 100644
index 000000000..b67deacc6
--- /dev/null
+++ b/portal/static/portal/js/teacherEditStudent.js
@@ -0,0 +1,23 @@
+$(document).ready(() => {
+  $('#edit-student-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_password').attr('type', inputType);
+      $('#id_confirm_password').attr('type', inputType);
+
+      $('#password-field-icon').attr('data-icon', dataIcon);
+      $('#confirm-password-field-icon').attr('data-icon', dataIcon);
+    }
+  );
+});
\ No newline at end of file
diff --git a/portal/static/portal/js/teacherLogin.js b/portal/static/portal/js/teacherLogin.js
new file mode 100644
index 000000000..59a4d687c
--- /dev/null
+++ b/portal/static/portal/js/teacherLogin.js
@@ -0,0 +1,16 @@
+$(document).ready(() => {
+  $('#form-login-teacher').on('click', '#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_auth-password').attr('type', inputType);
+    $('#password-field-icon').attr('data-icon', dataIcon);
+  });
+});
diff --git a/portal/templates/portal/login/independent_student.html b/portal/templates/portal/login/independent_student.html
index 7ab16e59b..d631d6c94 100644
--- a/portal/templates/portal/login/independent_student.html
+++ b/portal/templates/portal/login/independent_student.html
@@ -18,8 +18,10 @@ <h5>Please enter your login details.</h5>
             {{ form.username.errors }}
         </div>
 
-        <div class="form__input">
-            {{ form.password }}
+        <div class="form--row">
+            <div class="input--icon">
+                {{ form.password }} <span id="password-field-icon" class="iconify" data-icon="material-symbols:visibility-off"></span>
+            </div>
             <small>{{ form.password.help_text }}</small>
             {{ form.password.errors }}
         </div>
@@ -42,4 +44,5 @@ <h5>Please enter your login details.</h5>
                     class="button button--home button--login button-right-arrow">Log in</button>
         </div>
     </form>
+    <script type="text/javascript" src="{% static 'portal/js/independentLogin.js' %}"></script>
 {% endblock form_content %}
diff --git a/portal/templates/portal/login/student.html b/portal/templates/portal/login/student.html
index fce35e8b4..00d66fcff 100644
--- a/portal/templates/portal/login/student.html
+++ b/portal/templates/portal/login/student.html
@@ -18,8 +18,10 @@ <h5>Please enter your login details.</h5>
             {{ form.username.errors }}
         </div>
 
-        <div class="form__input">
-            {{ form.password }}
+        <div class="form--row">
+            <div class="input--icon">
+                {{ form.password }} <span id="password-field-icon" class="iconify" data-icon="material-symbols:visibility-off"></span>
+            </div>
             <small>{{ form.password.help_text }}</small>
             {{ form.password.errors }}
         </div>
@@ -29,4 +31,5 @@ <h5>Please enter your login details.</h5>
                 Log in</button>
         </div>
     </form>
+    <script type="text/javascript" src="{% static 'portal/js/studentLogin.js' %}"></script>
 {% endblock form_content %}
diff --git a/portal/templates/portal/login/teacher.html b/portal/templates/portal/login/teacher.html
index f567b2ab9..575f7267c 100644
--- a/portal/templates/portal/login/teacher.html
+++ b/portal/templates/portal/login/teacher.html
@@ -39,8 +39,10 @@ <h5>Please enter your login details.</h5>
                         {{ form.username.errors }}
                     </div>
 
-                    <div class="form__input">
-                        {{ form.password }}
+                    <div class="form--row">
+                        <div class="input--icon">
+                            {{ form.password }} <span id="password-field-icon" class="iconify" data-icon="material-symbols:visibility-off"></span>
+                        </div>
                         <small>{{ form.password.help_text }}</small>
                         {{ form.password.errors }}
                     </div>
@@ -66,4 +68,6 @@ <h5>Please enter your login details.</h5>
     {% include "two_factor/core/login.html" %}
 {% endif %}
 
+<script type="text/javascript" src="{% static 'portal/js/teacherLogin.js' %}"></script>
+
 {% endblock content %}
diff --git a/portal/templates/portal/play/student_edit_account.html b/portal/templates/portal/play/student_edit_account.html
index 706712d5f..841a87202 100644
--- a/portal/templates/portal/play/student_edit_account.html
+++ b/portal/templates/portal/play/student_edit_account.html
@@ -80,20 +80,23 @@ <h1 class="banner__text--primary">Welcome, {{ user|make_into_username }}</h1>
             <div class="form--row__input col-md-4">
                 <div class="input--icon">
                     {{ form.password }}
-                    <span class="iconify" data-icon="mdi:security"></span>
+                    <span id="password-field-icon" class="iconify" data-icon="material-symbols:visibility-off"></span>
                 </div>
                 <small>{{ form.password.help_text }}</small>
                 {{ form.password.errors }}
             </div>
             <div class="form--row__input col-md-4">
-                {{ form.confirm_password }}
+                <div class="input--icon">
+                    {{ form.confirm_password }}
+                    <span id="confirm-password-field-icon" class="iconify" data-icon="material-symbols:visibility-off"></span>
+                </div>
                 <small>{{ form.confirm_password.help_text }}</small>
                 {{ form.confirm_password.errors }}
             </div>
             <div class="form--row__input col-md-4">
                 <div class="input--icon">
                     {{ form.current_password }}
-                    <span class="iconify" data-icon="mdi:security"></span>
+                    <span id="current-password-field-icon" class="iconify" data-icon="material-symbols:visibility-off"></span>
                 </div>
                 <small>{{ form.current_password.help_text }}</small>
                 {{ form.current_password.errors }}
@@ -147,8 +150,8 @@ <h5>Delete account</h5>
         <div class="row form--row">
             <div class="form--row__input col-sm-6 col-md-4">
                 <div class="input--icon">
-                         {{ delete_account_form.delete_password }}
-                    <span class="iconify" data-icon="mdi:security"></span>
+                    {{ delete_account_form.delete_password }}
+                    <span id="delete-password-field-icon" class="iconify" data-icon="material-symbols:visibility-off"></span>
                 </div>
                 <small>{{ delete_account_form.delete_password.help_text }}</small>
                 {{ delete_account_form.delete_password.errors }}
diff --git a/portal/templates/portal/register.html b/portal/templates/portal/register.html
index 786dbcd37..f21529fe8 100644
--- a/portal/templates/portal/register.html
+++ b/portal/templates/portal/register.html
@@ -6,7 +6,7 @@
     <div id="signup_page"></div>
     <div id="register-forms" class="container registration">
         <div class="form--register--text form--register form--register--teacher is-flex-item col-sm-6">
-            <div class="form-div form">
+            <div id="teacher-register-form" class="form-div form">
                 <h4>Teacher/Tutor</h4>
                 <div class="row form--row">
                     <p class="semi-bold">Register below to create your school or club.</p>
@@ -53,7 +53,7 @@ <h4>Teacher/Tutor</h4>
                     <div class="row form--row">
                         <label for="id_teacher_signup-teacher_password"></label>
                         <div class="input--icon">
-                            {{ teacher_signup_form.teacher_password }}<span class="iconify" data-icon="mdi:security"></span>
+                            {{ teacher_signup_form.teacher_password }}<span id="teacher-password-field-icon" class="iconify" data-icon="material-symbols:visibility-off"></span>
                         </div>
                         <small>{{ teacher_signup_form.teacher_password.help_text }}</small>
                         {{ teacher_signup_form.teacher_password.errors }}
@@ -61,7 +61,7 @@ <h4>Teacher/Tutor</h4>
                     <div class="row form--row">
                         <label for="id_teacher_signup-teacher_confirm_password"></label>
                         <div class="input--icon">
-                            {{ teacher_signup_form.teacher_confirm_password }}<span class="iconify" data-icon="mdi:security"></span>
+                            {{ teacher_signup_form.teacher_confirm_password }}<span id="teacher-confirm-password-field-icon" class="iconify" data-icon="material-symbols:visibility-off"></span>
                         </div>
                         <small>{{ teacher_signup_form.teacher_confirm_password.help_text }}</small>
                         {{ teacher_signup_form.teacher_confirm_password.errors }}
@@ -84,7 +84,7 @@ <h4>Teacher/Tutor</h4>
             </div>
         </div>
         <div class="form--register--text form--register form--register--indep-student is-flex-item col-sm-6">
-            <div class="form-div">
+            <div id="independent-student-register-form" class="form-div">
                 <h4>Independent learner</h4>
                 <div class="row form--row">
                     <p class="semi-bold">
@@ -149,7 +149,7 @@ <h4>Independent learner</h4>
                             <label for="id_{{ independent_student_signup_form.password.html_name }}">
                             </label>
                             <div class="input--icon">
-                                {{ independent_student_signup_form.password }} <span class="iconify" data-icon="mdi:security"></span>
+                                {{ independent_student_signup_form.password }} <span id="independent-student-password-field-icon" class="iconify" data-icon="material-symbols:visibility-off"></span>
                             </div>
                             <small>{{ independent_student_signup_form.password.help_text }}</small>
                             {{ independent_student_signup_form.password.errors }}
@@ -158,7 +158,7 @@ <h4>Independent learner</h4>
                             <label for="id_{{ independent_student_signup_form.confirm_password.html_name }}">
                             </label>
                             <div class="input--icon">
-                                {{ independent_student_signup_form.confirm_password }}<span class="iconify" data-icon="mdi:security"></span>
+                                {{ independent_student_signup_form.confirm_password }}<span id="independent-student-confirm-password-field-icon" class="iconify" data-icon="material-symbols:visibility-off"></span>
                             </div>
                             <small>{{ independent_student_signup_form.confirm_password.help_text }}</small>
                             {{ independent_student_signup_form.confirm_password.errors }}
diff --git a/portal/templates/portal/reset_password_confirm.html b/portal/templates/portal/reset_password_confirm.html
index 1de6dd5d0..d175c1df2 100644
--- 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 %}
diff --git a/portal/templates/portal/teach/dashboard.html b/portal/templates/portal/teach/dashboard.html
index 360104664..4f91c5fcd 100644
--- a/portal/templates/portal/teach/dashboard.html
+++ b/portal/templates/portal/teach/dashboard.html
@@ -444,7 +444,7 @@ <h4>Your account</h4>
                     <div class="form--row__input col-sm-6 col-md-4">
                         <div class="input--icon">
                             {{ update_account_form.password }}
-                            <span class="iconify" data-icon="mdi:security"></span>
+                            <span id="password-field-icon" class="iconify" data-icon="material-symbols:visibility-off"></span>
                         </div>
                         <small>{{ update_account_form.password.help_text }}</small>
                         {{ update_account_form.password.errors }}
@@ -452,6 +452,7 @@ <h4>Your account</h4>
                     <div class="form--row__input col-sm-6 col-md-4">
                         <div class="input--icon">
                             {{ update_account_form.confirm_password }}
+                            <span id="confirm-password-field-icon" class="iconify" data-icon="material-symbols:visibility-off"></span>
                         </div>
                         <small>{{ update_account_form.confirm_password.help_text }}</small>
                         {{ update_account_form.confirm_password.errors }}
@@ -459,7 +460,7 @@ <h4>Your account</h4>
                     <div class="form--row__input col-sm-6 col-md-4">
                         <div class="input--icon">
                             {{ update_account_form.current_password }}
-                            <span class="iconify" data-icon="mdi:lock-outline"></span>
+                            <span id="current-password-field-icon" class="iconify" data-icon="material-symbols:visibility-off"></span>
                         </div>
                         <small>{{ update_account_form.current_password.help_text }}</small>
                         {{ update_account_form.current_password.errors }}
@@ -528,7 +529,7 @@ <h5>Delete account</h5>
                     <div class="form--row__input col-sm-6 col-md-4">
                         <div class="input--icon">
                             {{ delete_account_form.delete_password }}
-                            <span class="iconify" data-icon="mdi:security"></span>
+                            <span id="delete-password-field-icon" class="iconify" data-icon="material-symbols:visibility-off"></span>
                         </div>
                         <small>{{ delete_account_form.delete_password.help_text }}</small>
                         {{ delete_account_form.delete_password.errors }}
diff --git a/portal/templates/portal/teach/teacher_edit_student.html b/portal/templates/portal/teach/teacher_edit_student.html
index 17ee71702..76d6e43f6 100644
--- a/portal/templates/portal/teach/teacher_edit_student.html
+++ b/portal/templates/portal/teach/teacher_edit_student.html
@@ -1,4 +1,5 @@
 {% extends 'portal/base.html' %}
+{% load static %}
 
 {% block subNav %}
     {% include "portal/partials/teacher_non_dashboard_subnav.html" %}
@@ -39,7 +40,7 @@ <h5 id="set-password">Update password</h5>
 
         <p>You can set this student's password. Setting the password will also regenerate their direct access link.</p>
 
-        <form method="post">
+        <form id="edit-student-password-form" method="post">
 
             {% csrf_token %}
 
@@ -49,16 +50,20 @@ <h5 id="set-password">Update password</h5>
             {{ password_form.non_field_errors }}
 
             <div class="row form-row">
-                <div class="form--row__input col-sm-6 col-md-6">
-                    {{ password_form.password }}
+                <div class="form--row col-sm-6 col-md-6">
+                    <div class="input--icon">
+                        {{ password_form.password }} <span id="password-field-icon" class="iconify" data-icon="material-symbols:visibility-off"></span>
+                    </div>
                     {{ password_form.password.errors }}
                     <small>{{ password_form.password.help_text}}</small>
                 </div>
             </div>
 
             <div class="row form-row">
-                <div class="form--row__input col-sm-6 col-md-6">
-                    {{ password_form.confirm_password }}
+                <div class="form--row col-sm-6 col-md-6">
+                    <div class="input--icon">
+                        {{ password_form.confirm_password }} <span id="confirm-password-field-icon" class="iconify" data-icon="material-symbols:visibility-off"></span>
+                    </div>
                     {{ password_form.confirm_password.errors }}
                     <small>{{ password_form.confirm_password.help_text }}</small>
                 </div>
@@ -68,4 +73,6 @@ <h5 id="set-password">Update password</h5>
     </div>
 </div>
 
+<script type="text/javascript" src="{% static 'portal/js/teacherEditStudent.js' %}"></script>
+
 {% endblock %}