teacher edits student password

ocadotechnology · Nov 2, 2023 · a5a3987 · a5a3987
1 parent 4a64fb0
commit a5a3987
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 5 deletions.
diff --git a/portal/static/portal/js/teacherEditStudent.js 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);
+    }
+  );
+});
diff --git 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 %}