[FEATURE] Enable password view at the backend login

A user who's about to log in into the backend is now able to reveal the typed password. Once the password field is cleared, the visibility mode automatically switches back to its default to avoid revealing sensitive data by accident. Resolves: #86880 Releases: main Change-Id: I3c45730e2bed9a71371e472729edf12c29bf5860 Reviewed-on: https://review.typo3.org/c/Packages/TYPO3.CMS/+/75380 Tested-by: Andreas Fernandez <a.fernandez@scripting-base.de> Reviewed-by: Benni Mack <benni@typo3.org> Reviewed-by: Andreas Fernandez <a.fernandez@scripting-base.de> Tested-by: Benni Mack <benni@typo3.org> Reviewed-by: Simon Schaufelberger <simonschaufi+typo3@gmail.com> Tested-by: core-ci <typo3@b13.com>
TYPO3 · Mar 27, 2023 · afeaaf4 · afeaaf4
1 parent ba49e4e
commit afeaaf4
Show file tree

Hide file tree

Showing 7 changed files with 75 additions and 2 deletions.
diff --git a/Build/Sources/Sass/typo3/_main_form.scss b/Build/Sources/Sass/typo3/_main_form.scss
@@ -72,6 +72,11 @@ label {
     position: relative;
 }
 
+// disable MS Edge default password reveal button
+::-ms-reveal {
+    display: none;
+}
+
 .row {
     > .form-group {
         > .form-control-wrap {

diff --git a/Build/Sources/TypeScript/backend/user-pass-login.ts b/Build/Sources/TypeScript/backend/user-pass-login.ts
@@ -27,17 +27,21 @@ class UserPassLogin {
       passwordField: '.t3js-login-password-field',
       usernameField: '.t3js-login-username-field',
       copyrightLink: 't3js-login-copyright-link',
+      togglePassword: '.t3js-login-toggle-password',
     };
 
     // register submit handler
     Login.options.submitHandler = this.resetPassword;
 
     const $usernameField = $(this.options.usernameField);
     const $passwordField = $(this.options.passwordField);
+    const $togglePassword = $(this.options.togglePassword);
     const copyrightLink = document.getElementsByClassName(this.options.copyrightLink)[0];
 
     $usernameField.on('keypress', this.showCapsLockWarning);
     $passwordField.on('keypress', this.showCapsLockWarning);
+    $passwordField.on('input change', this.togglePasswordRevealer);
+    $togglePassword.on('click', (): void => { this.togglePasswordVisibility(); });
     copyrightLink.addEventListener('keydown', this.toggleCopyright);
 
     // if the login screen is shown in the login_frameset window for re-login,
@@ -117,6 +121,29 @@ class UserPassLogin {
       (<HTMLLinkElement>(event.target)).click();
     }
   };
+
+  private togglePasswordRevealer = (): void => {
+    const passwordField = document.querySelector(this.options.passwordField) as HTMLInputElement;
+    const togglePassword = document.querySelector(this.options.togglePassword);
+    togglePassword.classList.toggle('hidden', passwordField.value === '');
+
+    if (passwordField.value === '') {
+      this.togglePasswordVisibility(true);
+    }
+  }
+
+  private togglePasswordVisibility(forcePassword?: boolean): void {
+    const passwordField = document.querySelector(this.options.passwordField) as HTMLInputElement;
+    const togglePassword = document.querySelector(this.options.togglePassword);
+    if (forcePassword) {
+      passwordField.type = 'password';
+      togglePassword.classList.remove('active');
+    } else {
+      const isPasswordType = passwordField.type === 'password';
+      passwordField.type = isPasswordType ? 'text' : 'password';
+      togglePassword.classList.toggle('active', isPasswordType);
+    }
+  }
 }
 
 export default new UserPassLogin();
diff --git a/typo3/sysext/backend/Resources/Private/Language/locallang.xlf b/typo3/sysext/backend/Resources/Private/Language/locallang.xlf
@@ -73,6 +73,9 @@ Have a nice day.</source>
 			<trans-unit id="login.password" resname="login.password">
 				<source>Password</source>
 			</trans-unit>
+			<trans-unit id="login.togglePassword" resname="login.togglePassword">
+				<source>Toggle password visibility</source>
+			</trans-unit>
 			<trans-unit id="login.password_forget" resname="login.password_forget">
 				<source>Forgot your password?</source>
 			</trans-unit>

diff --git a/typo3/sysext/backend/Resources/Private/Templates/Login/UserPassLoginForm.html b/typo3/sysext/backend/Resources/Private/Templates/Login/UserPassLoginForm.html
@@ -1,4 +1,5 @@
 <html
+    xmlns:core="http://typo3.org/ns/TYPO3/CMS/Core/ViewHelpers"
     xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers"
     data-namespace-typo3-fluid="true"
 >
@@ -45,6 +46,7 @@
     <div class="form-group t3js-login-password-section" id="t3-login-password-section">
         <div class="form-control-wrap">
             <div class="form-control-holder">
+                <div class="input-group">
                 <input
                     type="password"
                     id="t3-password"
@@ -57,6 +59,12 @@
                     required="required"
                     spellcheck="false"
                 />
+                <button type="button"
+                    class="t3js-login-toggle-password btn btn-outline-secondary hidden"
+                    aria-label="{f:translate(key: 'LLL:EXT:backend/Resources/Private/Language/locallang.xlf:login.togglePassword')}"
+                >
+                    <core:icon identifier="actions-eye" size="small" />
+                </button>
                 <div role="status" class="form-notice-capslock hidden t3js-login-alert-capslock">
                     <img
                         aria-hidden="true"
@@ -68,6 +76,7 @@
                     />
                     <span class="visually-hidden"><f:translate key="LLL:EXT:backend/Resources/Private/Language/locallang.xlf:login.error.capslockStatus" /></span>
                 </div>
+                </div>
             </div>
         </div>
     </div>

diff --git a/typo3/sysext/backend/Resources/Public/Css/backend.css b/typo3/sysext/backend/Resources/Public/Css/backend.css
diff --git a/typo3/sysext/backend/Resources/Public/JavaScript/user-pass-login.js b/typo3/sysext/backend/Resources/Public/JavaScript/user-pass-login.js
diff --git a/...Documentation/Changelog/12.3/Feature-86880-EnablePasswordViewAtBackendLogin.rst b/...Documentation/Changelog/12.3/Feature-86880-EnablePasswordViewAtBackendLogin.rst
@@ -0,0 +1,29 @@
+.. include:: /Includes.rst.txt
+
+.. _feature-86880-1659742357:
+
+=======================================================
+Feature: #86880 - Enable password view at Backend login
+=======================================================
+
+See :issue:`86880`
+
+Description
+===========
+
+The TYPO3 backend login now displays an additional button to reveal the user's
+password on click, once anything was typed into the password field.
+
+Impact
+======
+
+A user who's about to log in into the backend is now able to reveal the typed
+password. Once the password field is cleared, the visibility mode automatically
+switches back to its default to avoid revealing sensitive data by accident.
+
+..  warning::
+    Revealing login credentials is always a security risk. Please use this
+    feature with caution when nobody can watch your input, either remotely or by
+    looking over your shoulders!
+
+.. index:: Backend, ext:backend