Add pressable eye in password input to display wrong password

matrix-org · May 9, 2023 · 2487e30 · 2487e30
1 parent 739eec8
commit 2487e30
Show file tree

Hide file tree

Showing 4 changed files with 56 additions and 2 deletions.
diff --git a/res/css/_common.pcss b/res/css/_common.pcss
@@ -527,6 +527,14 @@ legend {
     }
 }
 
+.mx_textInput_postfixComponent {
+    align-items: center;
+    display: flex;
+    height: 100%;
+    justify-content: center;
+    padding: 0 3px;
+}
+
 @define-mixin mx_DialogButton {
     /* align images in buttons (eg spinners) */
     vertical-align: middle;

diff --git a/res/img/feather-customised/grey-eye.svg b/res/img/feather-customised/grey-eye.svg
diff --git a/src/components/views/auth/PasswordLogin.tsx b/src/components/views/auth/PasswordLogin.tsx
@@ -50,6 +50,7 @@ interface IProps {
 }
 
 interface IState {
+    displayPassword: boolean;
     fieldValid: Partial<Record<LoginField, boolean>>;
     loginType: LoginField.Email | LoginField.MatrixId | LoginField.Phone;
     password: string;
@@ -83,13 +84,18 @@ export default class PasswordLogin extends React.PureComponent<IProps, IState> {
     public constructor(props: IProps) {
         super(props);
         this.state = {
+            displayPassword: false,
             // Field error codes by field ID
             fieldValid: {},
             loginType: LoginField.MatrixId,
             password: "",
         };
     }
 
+    private setDisplayPassword = (value: boolean): void => {
+        this.setState({ displayPassword: value });
+    };
+
     private onForgotPasswordClick = (ev: ButtonEvent): void => {
         ev.preventDefault();
         ev.stopPropagation();
@@ -426,7 +432,7 @@ export default class PasswordLogin extends React.PureComponent<IProps, IState> {
                         id="mx_LoginForm_password"
                         className={pwFieldClass}
                         autoComplete="current-password"
-                        type="password"
+                        type={this.state.displayPassword ? "text": "password"}
                         name="password"
                         label={_t("Password")}
                         value={this.state.password}
@@ -435,6 +441,20 @@ export default class PasswordLogin extends React.PureComponent<IProps, IState> {
                         autoFocus={autoFocusPassword}
                         onValidate={this.onPasswordValidate}
                         ref={(field) => (this[LoginField.Password] = field)}
+                        postfixComponent={(
+                            <div
+                                className="mx_textInput_postfixComponent"
+                                onMouseDown={() => this.setDisplayPassword(true)}
+                                onMouseUp={() => this.setDisplayPassword(false)}
+                            >
+                                <img
+                                    src={require("../../../../res/img/feather-customised/grey-eye.svg").default}
+                                    width="24"
+                                    height="24"
+                                    alt={_t("Eye")}
+                                />
+                            </div>
+                        )}
                     />
                     {forgotPasswordJsx}
                     {!this.props.busy && (

diff --git a/src/components/views/dialogs/security/AccessSecretStorageDialog.tsx b/src/components/views/dialogs/security/AccessSecretStorageDialog.tsx
@@ -48,6 +48,7 @@ interface IProps {
 }
 
 interface IState {
+    displayPassword: boolean;
     recoveryKey: string;
     recoveryKeyValid: boolean | null;
     recoveryKeyCorrect: boolean | null;
@@ -69,6 +70,7 @@ export default class AccessSecretStorageDialog extends React.PureComponent<IProp
         super(props);
 
         this.state = {
+            displayPassword: false,
             recoveryKey: "",
             recoveryKeyValid: null,
             recoveryKeyCorrect: null,
@@ -80,6 +82,10 @@ export default class AccessSecretStorageDialog extends React.PureComponent<IProp
         };
     }
 
+    private setDisplayPassword = (value: boolean): void => {
+        this.setState({ displayPassword: value });
+    };
+
     private onCancel = (): void => {
         if (this.state.resetting) {
             this.setState({ resetting: false });
@@ -403,14 +409,28 @@ export default class AccessSecretStorageDialog extends React.PureComponent<IProp
                         <div className="mx_AccessSecretStorageDialog_recoveryKeyEntry">
                             <div className="mx_AccessSecretStorageDialog_recoveryKeyEntry_textInput">
                                 <Field
-                                    type="password"
+                                    type={this.state.displayPassword ? "text": "password"}
                                     id="mx_securityKey"
                                     label={_t("Security Key")}
                                     value={this.state.recoveryKey}
                                     onChange={this.onRecoveryKeyChange}
                                     autoFocus={true}
                                     forceValidity={this.state.recoveryKeyCorrect ?? undefined}
                                     autoComplete="off"
+                                    postfixComponent={(
+                                        <div
+                                            className="mx_textInput_postfixComponent"
+                                            onMouseDown={() => this.setDisplayPassword(true)}
+                                            onMouseUp={() => this.setDisplayPassword(false)}
+                                        >
+                                            <img
+                                                src={require("../../../../../res/img/feather-customised/grey-eye.svg").default}
+                                                width="24"
+                                                height="24"
+                                                alt={_t("Eye")}
+                                            />
+                                        </div>
+                                    )}
                                 />
                             </div>
                             <span className="mx_AccessSecretStorageDialog_recoveryKeyEntry_entryControlSeparatorText">