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}

- +
-
- +
+ +
+ + visibility +
- + \ 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;