Merge 897193ca3e into 7d84185d0e

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">
+            <div class="inputContainer passwordInput">
-                <input is="emby-input" id="txtManualPassword" type="password" label="${LabelPassword}" autocomplete="current-password" />
+                <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">

src/controllers/session/login/index.js

@@ -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'; // Reset password visibility
         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');
     });

src/controllers/session/login/login.scss

@@ -3,6 +3,27 @@
     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;