diff --git a/src/controllers/session/login/index.html b/src/controllers/session/login/index.html
index f24bc0d3eb9..2bf0083da65 100644
--- a/src/controllers/session/login/index.html
+++ b/src/controllers/session/login/index.html
@@ -5,11 +5,16 @@
${HeaderPleaseSignIn}
-
+
-
-
+
\ No newline at end of file
diff --git a/src/controllers/session/login/index.js b/src/controllers/session/login/index.js
index 93f8e03de02..f88ff5290c4 100644
--- 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'; // 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.html');
});
diff --git a/src/controllers/session/login/login.scss b/src/controllers/session/login/login.scss
index 70bb7754ef9..1d326b84850 100644
--- a/src/controllers/session/login/login.scss
+++ b/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;