added show password icon for login & register (#508)

edly-io · Feb 16, 2024 · c356f02 · c356f02
1 parent 6ce326e
commit c356f02
Show file tree

Hide file tree

Showing 4 changed files with 53 additions and 18 deletions.
diff --git a/lms/static/js/student_account/views/LoginView.js b/lms/static/js/student_account/views/LoginView.js
@@ -22,6 +22,7 @@
             tpl: '#login-tpl',
             events: {
                 'click .js-login': 'submitForm',
+                'click .toggle-password': 'togglePassword',
                 'click .forgot-password': 'forgotPassword',
                 'click .login-provider': 'thirdPartyAuth',
                 'click .enterprise-login': 'enterpriseSlugLogin',
@@ -147,6 +148,14 @@
                 this.toggleHelp(event, $help);
             },
 
+            togglePassword: function(event) {
+                event.preventDefault();
+                var passwordField = document.querySelector("#login-password")
+                var newType = passwordField.getAttribute("type") === "password" ? "text" : "password"
+                passwordField.setAttribute("type", newType);
+                $(event.target).toggleClass("fa-eye fa-eye-slash");
+            },
+
             enterpriseSlugLogin: function(event) {
                 event.preventDefault();
                 if (this.enterpriseSlugLoginURL) {

diff --git a/lms/static/js/student_account/views/RegisterView.js b/lms/static/js/student_account/views/RegisterView.js
@@ -23,6 +23,7 @@
                 events: {
                     'click .js-register': 'submitForm',
                     'click .login-provider': 'thirdPartyAuth',
+                    'click .toggle-password': 'togglePassword',
                     'click input[required][type="checkbox"]': 'liveValidateHandler',
                     'blur input[required], textarea[required], select[required]': 'liveValidateHandler',
                     'focus input[required], textarea[required], select[required]': 'handleRequiredInputFocus'
@@ -438,6 +439,14 @@
                     }
                 },
 
+                togglePassword: function(event) {
+                    event.preventDefault();
+                    var passwordField = document.querySelector("#register-password")
+                    var newType = passwordField.getAttribute("type") === "password" ? "text" : "password"
+                    passwordField.setAttribute("type", newType);
+                    $(event.target).toggleClass("fa-eye fa-eye-slash");
+                },
+
                 saveSuccess: function() {
                     this.trigger('auth-complete');
                 },

diff --git a/lms/static/sass/views/_login-register.scss b/lms/static/sass/views/_login-register.scss
@@ -932,3 +932,15 @@ body.open-modal {
   overflow: hidden;
 }
 
+.wrapper-password {
+  position: relative;
+}
+
+.wrapper-password .toggle-password {
+  position: absolute;
+  top: 50%;
+  right: 10px;
+  transform: translateY(-50%);
+  z-index: 2;
+  margin-top: -3px;
+}
diff --git a/lms/templates/student_account/form_field.underscore b/lms/templates/student_account/form_field.underscore
@@ -90,25 +90,30 @@
                 </div>
             <% } %>
         <% } %>
-        <input id="<%- form %>-<%- name %>"
-           type="<%- type %>"
-           name="<%- name %>"
-           class="input-block <% if ( type === 'checkbox' ) { %>checkbox<% } %>"
-            <% if ( instructions ) { %>
-            aria-describedby="<%- form %>-<%- name %>-desc <%- form %>-<%- name %>-validation-error"
+        <div class="wrapper-<%- type %>">
+            <input id="<%- form %>-<%- name %>"
+                type="<%- type %>"
+                name="<%- name %>"
+                class="input-block <% if ( type === 'checkbox' ) { %>checkbox<% } %>"
+                <% if ( instructions ) { %>
+                aria-describedby="<%- form %>-<%- name %>-desc <%- form %>-<%- name %>-validation-error"
+                <% } %>
+                <% if ( restrictions.min_length ) { %> minlength="<%- restrictions.min_length %>"<% } %>
+                <% if ( restrictions.max_length ) { %> maxlength="<%- restrictions.max_length %>"<% } %>
+                <% if ( restrictions.readonly )   { %> readonly <% } %>
+                <% if ( required ) { %> required<% } %>
+                <% if ( typeof errorMessages !== 'undefined' ) {
+                    _.each(errorMessages, function( msg, type ) {%>
+                        data-errormsg-<%- type %>="<%- msg %>"
+                    <%  });
+                } %>
+                <% if ( placeholder ) { %> placeholder="<%- placeholder %>"<% } %>
+                    value="<%- defaultValue %>"
+            />
+            <% if ( type === 'password') { %>
+                <span toggle="#login-password" class="fa fa-fw fa-eye field-icon toggle-password"></span>
             <% } %>
-            <% if ( restrictions.min_length ) { %> minlength="<%- restrictions.min_length %>"<% } %>
-            <% if ( restrictions.max_length && type !== 'password' ) { %> maxlength="<%- restrictions.max_length %>"<% } %>
-            <% if ( restrictions.readonly )   { %> readonly <% } %>
-            <% if ( required ) { %> required<% } %>
-            <% if ( typeof errorMessages !== 'undefined' ) {
-                _.each(errorMessages, function( msg, type ) {%>
-                    data-errormsg-<%- type %>="<%- msg %>"
-            <%  });
-            } %>
-            <% if ( placeholder ) { %> placeholder="<%- placeholder %>"<% } %>
-            value="<%- defaultValue %>"
-        />
+        </div>
         <% if ( type === 'checkbox' ) { %>
             <label for="<%- form %>-<%- name %>">
                 <span class="label-text"><%= HtmlUtils.HTML(label) %></span>