Add eye in Recovery Code input, which on press displays wrong password (

#588) * Add eye in Recovery Code input, which on press displays wrong password * Forgot the eye image * Fix patch * Removed use of same file in 2 patches * Merge code for the two password inputs with eye
tchapgouv · May 10, 2023 · 41910b9 · 41910b9
1 parent d4b3934
commit 41910b9
Show file tree

Hide file tree

Showing 5 changed files with 121 additions and 7 deletions.
diff --git a/patches/login/matrix-react-sdk+3.71.1.patch b/patches/login/matrix-react-sdk+3.71.1.patch
@@ -89,11 +89,22 @@ index 4314726..0a34f0e 100644
                      {footer}
                  </AuthBody>
 diff --git a/node_modules/matrix-react-sdk/src/components/views/auth/PasswordLogin.tsx b/node_modules/matrix-react-sdk/src/components/views/auth/PasswordLogin.tsx
-index 7275055..bb8f0ad 100644
+index 7275055..93c08bb 100644
 --- a/node_modules/matrix-react-sdk/src/components/views/auth/PasswordLogin.tsx
 +++ b/node_modules/matrix-react-sdk/src/components/views/auth/PasswordLogin.tsx
-@@ -85,7 +85,10 @@ export default class PasswordLogin extends React.PureComponent<IProps, IState> {
+@@ -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,21 @@ 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,
@@ -104,7 +115,15 @@ index 7275055..bb8f0ad 100644
              password: "",
          };
      }
-@@ -420,7 +423,11 @@ export default class PasswordLogin extends React.PureComponent<IProps, IState> {
+
++    private setDisplayPassword = (value: boolean): void => {
++        this.setState({ displayPassword: value });
++    };
++
+     private onForgotPasswordClick = (ev: ButtonEvent): void => {
+         ev.preventDefault();
+         ev.stopPropagation();
+@@ -420,13 +429,17 @@ export default class PasswordLogin extends React.PureComponent<IProps, IState> {
          return (
              <div>
                  <form onSubmit={this.onSubmitForm}>
@@ -117,3 +136,31 @@ index 7275055..bb8f0ad 100644
                      {loginField}
                      <Field
                          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 +448,20 @@ export default class PasswordLogin extends React.PureComponent<IProps, IState> {
+                         autoFocus={autoFocusPassword}
+                         onValidate={this.onPasswordValidate}
+                         ref={(field) => (this[LoginField.Password] = field)}
++                        postfixComponent={(
++                            <div
++                                className="tc_textInput_postfixComponent"
++                                onMouseDown={() => this.setDisplayPassword(true)}
++                                onMouseUp={() => this.setDisplayPassword(false)}
++                            >
++                                <img
++                                    src={require("../../../../../../res/img/grey-eye.svg").default}
++                                    width="24"
++                                    height="24"
++                                    alt={_t("Eye")}
++                                />
++                            </div>
++                        )}
+                     />
+                     {forgotPasswordJsx}
+                     {!this.props.busy && (
diff --git a/patches/patches.json b/patches/patches.json
@@ -212,4 +212,4 @@
             "src/stores/RoomViewStore.tsx"
         ]
     }
-}
+}
diff --git a/patches/ux-improvements-for-xsss/matrix-react-sdk+3.71.1.patch b/patches/ux-improvements-for-xsss/matrix-react-sdk+3.71.1.patch
@@ -1,9 +1,61 @@
 diff --git a/node_modules/matrix-react-sdk/src/components/views/dialogs/security/AccessSecretStorageDialog.tsx b/node_modules/matrix-react-sdk/src/components/views/dialogs/security/AccessSecretStorageDialog.tsx
-index a261e44..e6eec36 100644
+index a261e44..88c0b33 100644
 --- a/node_modules/matrix-react-sdk/src/components/views/dialogs/security/AccessSecretStorageDialog.tsx
 +++ b/node_modules/matrix-react-sdk/src/components/views/dialogs/security/AccessSecretStorageDialog.tsx
-@@ -413,13 +413,15 @@ export default class AccessSecretStorageDialog extends React.PureComponent<IProp
+@@ -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,7 +409,7 @@ 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}
+@@ -411,15 +417,31 @@ export default class AccessSecretStorageDialog extends React.PureComponent<IProp
+                                     autoFocus={true}
+                                     forceValidity={this.state.recoveryKeyCorrect ?? undefined}
                                      autoComplete="off"
++                                    postfixComponent={(
++                                        <div
++                                            className="tc_textInput_postfixComponent"
++                                            onMouseDown={() => this.setDisplayPassword(true)}
++                                            onMouseUp={() => this.setDisplayPassword(false)}
++                                        >
++                                            <img
++                                                src={require("../../../../../../../res/img/grey-eye.svg").default}
++                                                width="24"
++                                                height="24"
++                                                alt={_t("Eye")}
++                                            />
++                                        </div>
++                                    )}
                                  />
                              </div>
 +                            {/*
@@ -19,7 +71,7 @@ index a261e44..e6eec36 100644
                                  <input
                                      type="file"
                                      className="mx_AccessSecretStorageDialog_recoveryKeyEntry_fileInput"
-@@ -430,7 +432,8 @@ export default class AccessSecretStorageDialog extends React.PureComponent<IProp
+@@ -430,7 +452,8 @@ export default class AccessSecretStorageDialog extends React.PureComponent<IProp
                                  <AccessibleButton kind="primary" onClick={this.onRecoveryKeyFileUploadClick}>
                                      {_t("Upload")}
                                  </AccessibleButton>

diff --git a/res/img/grey-eye.svg b/res/img/grey-eye.svg
diff --git a/res/themes/tchap-common/css/_tchap_custom.pcss b/res/themes/tchap-common/css/_tchap_custom.pcss
@@ -19,3 +19,12 @@
     color: $alert important!;
     text-decoration: underline important!;
 }
+
+/* Wrapper for eye in password inputs to show wrong password on press */
+.tc_textInput_postfixComponent {
+    align-items: center;
+    display: flex;
+    height: 100%;
+    justify-content: center;
+    padding: 0 3px;
+}