Merge pull request #19 from james-p-xu/login-form-password-toggle

src/UI/UIWindowLogin.js

@@ -26,6 +26,7 @@ async function UIWindowLogin(options){
     options.reload_on_success = options.reload_on_success ?? false;
     options.has_head = options.has_head ?? true;
     options.send_confirmation_code = options.send_confirmation_code ?? false;
+    options.show_password = options.show_password ?? false;
 
     return new Promise(async (resolve) => {
         const internal_id = window.uuidv4();
@@ -45,10 +46,14 @@ async function UIWindowLogin(options){
                         h += `<label for="email_or_username-${internal_id}">Email or Username</label>`;
                         h += `<input id="email_or_username-${internal_id}" class="email_or_username" type="text" name="email_or_username" spellcheck="false" autocorrect="off" autocapitalize="off" data-gramm_editor="false" autocomplete="username"/>`;
                     h += `</div>`;
-                    // password
+                    // password with conditional type based based on options.show_password
-                    h += `<div style="overflow: hidden; margin-top: 20px; margin-bottom: 20px;">`;
+                    h += `<div style="overflow: hidden; margin-top: 20px; margin-bottom: 20px; position: relative;">`;
                     h += `<label for="password-${internal_id}">Password</label>`;
-                        h += `<input id="password-${internal_id}" class="password" type="password" name="password" autocomplete="current-password" />`;
+                    h += `<input id="password-${internal_id}" class="password" type="${options.show_password ? "text" : "password"}" name="password" autocomplete="current-password"/>`;
+                    // show/hide icon
+                    h += `<span style="position: absolute; right: 5%; top: 50%; cursor: pointer;" id="toggle-show-password-${internal_id}">
+                                <img class="toggle-show-password-icon" src="${options.show_password ? window.icons["eye-closed.svg"] : window.icons["eye-open.svg"]}" width="20" height="20">
+                            </span>`;
                     h += `</div>`;
                     // login
                     h += `<button class="login-btn button button-primary button-block button-normal">Log in</button>`;
@@ -183,6 +188,14 @@ async function UIWindowLogin(options){
             if(signup)
                 resolve(true);
         })
+
+        $(el_window).find(`#toggle-show-password-${internal_id}`).on("click", function (e) {
+            options.show_password = !options.show_password;
+            // hide/show password and update icon
+            $(el_window).find(".password").attr("type", options.show_password ? "text" : "password");
+            $(el_window).find(".toggle-show-password-icon").attr("src", options.show_password ? window.icons["eye-closed.svg"] : window.icons["eye-open.svg"],
+          )
+      })
     }) 
 }
 

src/UI/UIWindowSignup.js

@@ -125,6 +125,7 @@ function UIWindowSignup(options){
                 window_options: options.window_options,
                 show_close_button: options.show_close_button,
                 send_confirmation_code: options.send_confirmation_code,
+                show_password: false,
             });
             if(login)
                 resolve(true);

src/icons/eye-closed.svg

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><svg width="24px" height="24px" viewBox="0 0 24 24" stroke-width="1.5" fill="none" xmlns="http://www.w3.org/2000/svg" color="#000000"><path d="M19.5 16L17.0248 12.6038" stroke="#000000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M12 17.5V14" stroke="#000000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M4.5 16L6.96895 12.6124" stroke="#000000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M3 8C6.6 16 17.4 16 21 8" stroke="#000000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg>

src/icons/eye-open.svg

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><svg width="24px" height="24px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="#000000" stroke-width="1.5"><path d="M3 13C6.6 5 17.4 5 21 13" stroke="#000000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M12 17C10.3431 17 9 15.6569 9 14C9 12.3431 10.3431 11 12 11C13.6569 11 15 12.3431 15 14C15 15.6569 13.6569 17 12 17Z" fill="#000000" stroke="#000000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg>