Added show password toggle button

jellyfin · Nov 18, 2024 · baa717f · baa717f
1 parent a077acb
commit baa717f
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 7 deletions.
diff --git a/src/controllers/session/login/index.html b/src/controllers/session/login/index.html
@@ -5,11 +5,16 @@
                 <h1 class="sectionTitle">${HeaderPleaseSignIn}</h1>
             </div>
             <div class="inputContainer">
-                <input is="emby-input" type="text" id="txtManualName" required="required" label="${LabelUser}" autocomplete="username" autocapitalize="off" />
+                <input is="emby-input" type="text" id="txtManualName" required="required" label="${LabelUser}"
+                    autocomplete="username" autocapitalize="off" />
             </div>
 
-            <div class="inputContainer">
-                <input is="emby-input" id="txtManualPassword" type="password" label="${LabelPassword}" autocomplete="current-password" />
+            <div class="inputContainer passwordInput">
+                <label for="txtManualPassword">${LabelPassword}</label>
+                <div class="inputInner">
+                    <input is="emby-input" id="txtManualPassword" type="password" autocomplete="current-password" />
+                    <span class="togglePasswordVisibility material-icons">visibility</span>
+                </div>
             </div>
 
             <label class="checkboxContainer">
@@ -55,4 +60,4 @@ <h1 style="margin-top:1em;">${HeaderPleaseSignIn}</h1>
             </div>
         </div>
     </div>
-</div>
+</div>
diff --git a/src/controllers/session/login/index.js b/src/controllers/session/login/index.js
@@ -62,8 +62,8 @@ function authenticateQuickConnect(apiClient, targetUrl) {
 
         const connectUrl = apiClient.getUrl('/QuickConnect/Connect?Secret=' + json.Secret);
 
-        const interval = setInterval(function() {
-            apiClient.getJSON(connectUrl).then(async function(data) {
+        const interval = setInterval(function () {
+            apiClient.getJSON(connectUrl).then(async function (data) {
                 if (!data.Authenticated) {
                     return;
                 }
@@ -97,7 +97,7 @@ function authenticateQuickConnect(apiClient, targetUrl) {
         }, 5000, connectUrl);
 
         return true;
-    }, function(e) {
+    }, function (e) {
         Dashboard.alert({
             message: globalize.translate('QuickConnectNotActive'),
             title: globalize.translate('HeaderError')
@@ -132,6 +132,14 @@ function showManualForm(context, showCancel, focusPassword) {
     }
 }
 
+function togglePasswordVisibility(context) {
+    const passwordInput = context.querySelector('#txtManualPassword');
+    const icon = context.querySelector('.togglePasswordVisibility');
+
+    icon.innerHTML = passwordInput.type === 'password' ? 'visibility_off' : 'visibility';
+    passwordInput.type = passwordInput.type === 'password' ? 'text' : 'password';
+}
+
 function loadUserList(context, apiClient, users) {
     let html = '';
 
@@ -238,10 +246,20 @@ export default function (view, params) {
     });
     view.querySelector('.manualLoginForm').addEventListener('submit', function (e) {
         appSettings.enableAutoLogin(view.querySelector('.chkRememberLogin').checked);
+        const passwordInput = view.querySelector('#txtManualPassword');
+        const icon = view.querySelector('.togglePasswordVisibility');
+
+        icon.innerHTML = 'visibility';
+        passwordInput.type = 'password';
         authenticateUserByName(view, getApiClient(), getTargetUrl(), view.querySelector('#txtManualName').value, view.querySelector('#txtManualPassword').value);
         e.preventDefault();
         return false;
     });
+
+    view.querySelector('.togglePasswordVisibility').addEventListener('click', function () {
+        togglePasswordVisibility(view);
+    });
+
     view.querySelector('.btnForgotPassword').addEventListener('click', function () {
         Dashboard.navigate('forgotpassword.html');
     });

diff --git a/src/controllers/session/login/login.scss b/src/controllers/session/login/login.scss
@@ -3,6 +3,28 @@
     margin-top: 2em;
 }
 
+
+.inputInner {
+    position: relative;
+    height: fit-content;
+
+    label {
+        display: none;
+    }
+
+    .togglePasswordVisibility {
+        position: absolute;
+        right: 0.5rem;
+        top: 50%;
+        transform: translateY(-50%);
+        bottom: 0;
+        display: flex;
+        height: fit-content;
+        align-items: center;
+        cursor: pointer;
+    }   
+}
+
 .loginDisclaimer {
     margin: 0 auto;