Add password reset back options

weeman1337 · weeman1337 · commit 99659d24f60a · 2022-12-01T12:06:05.000+01:00
diff --git a/res/css/views/auth/_AuthBody.pcss b/res/css/views/auth/_AuthBody.pcss
@@ -137,15 +137,50 @@ limitations under the License.
 }
 
 /* specialisation for password reset views */
-.mx_AuthBody_forgot-password {
+.mx_AuthBody.mx_AuthBody_forgot-password {
     font-size: $font-14px;
     color: $primary-content;
     padding: 50px 32px;
     min-height: 600px;
 
     h1 {
-        margin-bottom: $spacing-20;
-        margin-top: $spacing-24;
+        margin: $spacing-24 0;
+    }
+
+    .mx_AuthBody_button-container {
+        display: flex;
+        justify-content: center;
+    }
+
+    .mx_Login_submit {
+        font-weight: $font-semi-bold;
+        margin: 0 0 $spacing-16;
+    }
+
+    .mx_AuthBody_text {
+        margin-bottom: $spacing-32;
+
+        p {
+            margin: 0 0 8px;
+        }
+    }
+
+    .mx_AuthBody_sign-in-instead-button {
+        font-weight: $font-semi-bold;
+        padding: $spacing-4;
+    }
+
+    .mx_AuthBody_fieldRow {
+        margin-bottom: $spacing-24;
+    }
+
+    .mx_AccessibleButton.mx_AccessibleButton_hasKind {
+        background: none;
+
+        &:disabled {
+            cursor: default;
+            opacity: .4;
+        }
     }
 }
 
@@ -154,12 +189,6 @@ limitations under the License.
     color: $secondary-content;
     display: flex;
     gap: $spacing-8;
-    margin-bottom: 10px;
-    margin-top: $spacing-24;
-}
-
-.mx_AuthBody_did-not-receive--centered {
-    justify-content: center;
 }
 
 .mx_AuthBody_resend-button {
diff --git a/res/css/views/dialogs/_VerifyEMailDialog.pcss b/res/css/views/dialogs/_VerifyEMailDialog.pcss
@@ -21,7 +21,7 @@ limitations under the License.
     .mx_Dialog {
         color: $primary-content;
         font-size: 14px;
-        padding: 16px;
+        padding: $spacing-24 $spacing-24 $spacing-16;
         text-align: center;
         width: 485px;
 
@@ -34,5 +34,14 @@ limitations under the License.
             color: $secondary-content;
             line-height: 20px;
         }
+
+        .mx_AuthBody_did-not-receive {
+            justify-content: center;
+            margin-bottom: 8px;
+        }
+
+        .mx_Dialog_cancelButton {
+            right: 10px;
+        }
     }
 }
diff --git a/src/PasswordReset.ts b/src/PasswordReset.ts
@@ -19,8 +19,6 @@ import { createClient, IRequestTokenResponse, MatrixClient } from 'matrix-js-sdk
 
 import { _t } from './languageHandler';
 
-const CHECK_EMAIL_VERIFIED_POLL_INTERVAL = 2000;
-
 /**
  * Allows a user to reset their password on a homeserver.
  *
@@ -108,24 +106,6 @@ export default class PasswordReset {
         await this.checkEmailLinkClicked();
     }
 
-    public async retrySetNewPassword(password: string): Promise<void> {
-        this.password = password;
-        return new Promise((resolve) => {
-            this.tryCheckEmailLinkClicked(resolve);
-        });
-    }
-
-    private tryCheckEmailLinkClicked(resolve: Function): void {
-        this.checkEmailLinkClicked()
-            .then(() => resolve())
-            .catch(() => {
-                window.setTimeout(
-                    () => this.tryCheckEmailLinkClicked(resolve),
-                    CHECK_EMAIL_VERIFIED_POLL_INTERVAL,
-                );
-            });
-    }
-
     /**
      * Checks if the email link has been clicked by attempting to change the password
      * for the mxid linked to the email.
diff --git a/src/components/structures/auth/ForgotPassword.tsx b/src/components/structures/auth/ForgotPassword.tsx
@@ -19,6 +19,7 @@ limitations under the License.
 import React, { ReactNode } from 'react';
 import { logger } from 'matrix-js-sdk/src/logger';
 import { createClient } from "matrix-js-sdk/src/matrix";
+import { sleep } from 'matrix-js-sdk/src/utils';
 
 import { _t, _td } from '../../../languageHandler';
 import Modal from "../../../Modal";
@@ -43,6 +44,8 @@ import Spinner from '../../views/elements/Spinner';
 import { formatSeconds } from '../../../DateUtils';
 import AutoDiscoveryUtils from '../../../utils/AutoDiscoveryUtils';
 
+const emailCheckInterval = 2000;
+
 enum Phase {
     // Show email input
     EnterEmail = 1,
@@ -277,22 +280,43 @@ export default class ForgotPassword extends React.Component<Props, State> {
             {
                 email: this.state.email,
                 errorText: this.state.errorText,
+                onCloseClick: () => {
+                    modal.close();
+                    this.setState({ phase: Phase.PasswordInput });
+                },
+                onReEnterEmailClick: () => {
+                    modal.close();
+                    this.setState({ phase: Phase.EnterEmail });
+                },
                 onResendClick: this.sendVerificationMail,
             },
             "mx_VerifyEMailDialog",
             false,
             false,
             {
-                // this modal cannot be dismissed except reset is done or forced
                 onBeforeClose: async (reason?: string) => {
-                    return this.state.phase === Phase.Done || reason === "force";
+                    if (reason === "backgroundClick") {
+                        // Modal dismissed by clicking the background.
+                        // Go one phase back.
+                        this.setState({ phase: Phase.PasswordInput });
+                    }
+
+                    return true;
                 },
             },
         );
 
-        await this.reset.retrySetNewPassword(this.state.password);
-        this.phase = Phase.Done;
-        modal.close();
+        // Don't retry if the phase changed. For example when going back to email input.
+        while (this.state.phase === Phase.ResettingPassword) {
+            try {
+                await this.reset.setNewPassword(this.state.password);
+                this.setState({ phase: Phase.Done });
+                modal.close();
+            } catch (e) {
+                // Email not confirmed, yet. Retry after a while.
+                await sleep(emailCheckInterval);
+            }
+        }
     }
 
     private onSubmitForm = async (ev: React.FormEvent): Promise<void> => {
@@ -339,6 +363,7 @@ export default class ForgotPassword extends React.Component<Props, State> {
             homeserver={this.props.serverConfig.hsName}
             loading={this.state.phase === Phase.SendingEmail}
             onInputChanged={this.onInputChanged}
+            onLoginClick={this.props.onLoginClick}
             onSubmitForm={this.onSubmitForm}
         />;
     }
@@ -374,6 +399,7 @@ export default class ForgotPassword extends React.Component<Props, State> {
         return <CheckEmail
             email={this.state.email}
             errorText={this.state.errorText}
+            onReEnterEmailClick={() => this.setState({ phase: Phase.EnterEmail })}
             onResendClick={this.sendVerificationMail}
             onSubmitForm={this.onSubmitForm}
         />;
diff --git a/src/components/structures/auth/forgot-password/CheckEmail.tsx b/src/components/structures/auth/forgot-password/CheckEmail.tsx
@@ -27,6 +27,7 @@ import { ErrorMessage } from "../../ErrorMessage";
 interface CheckEmailProps {
     email: string;
     errorText: string | ReactNode | null;
+    onReEnterEmailClick: () => void;
     onResendClick: () => Promise<boolean>;
     onSubmitForm: (ev: React.FormEvent) => void;
 }
@@ -37,6 +38,7 @@ interface CheckEmailProps {
 export const CheckEmail: React.FC<CheckEmailProps> = ({
     email,
     errorText,
+    onReEnterEmailClick,
     onSubmitForm,
     onResendClick,
 }) => {
@@ -50,13 +52,32 @@ export const CheckEmail: React.FC<CheckEmailProps> = ({
     return <>
         <EMailPromptIcon className="mx_AuthBody_emailPromptIcon--shifted" />
         <h1>{ _t("Check your email to continue") }</h1>
-        <p>
-            { _t(
-                "Follow the instructions sent to <b>%(email)s</b>",
-                { email: email },
-                { b: t => <b>{ t }</b> },
-            ) }
-        </p>
+        <div className="mx_AuthBody_text">
+            <p>
+                { _t(
+                    "Follow the instructions sent to <b>%(email)s</b>",
+                    { email: email },
+                    { b: t => <b>{ t }</b> },
+                ) }
+            </p>
+            <div className="mx_AuthBody_did-not-receive">
+                <span className="mx_VerifyEMailDialog_text-light">{ _t("Wrong email address?") }</span>
+                <AccessibleButton
+                    className="mx_AuthBody_resend-button"
+                    kind="link"
+                    onClick={onReEnterEmailClick}
+                >
+                    { _t("Re-enter email address") }
+                </AccessibleButton>
+            </div>
+        </div>
+        { errorText && <ErrorMessage message={errorText} /> }
+        <input
+            onClick={onSubmitForm}
+            type="button"
+            className="mx_Login_submit"
+            value={_t("Next")}
+        />
         <div className="mx_AuthBody_did-not-receive">
             <span className="mx_VerifyEMailDialog_text-light">{ _t("Did not receive it?") }</span>
             <AccessibleButton
@@ -73,12 +94,5 @@ export const CheckEmail: React.FC<CheckEmailProps> = ({
                 />
             </AccessibleButton>
         </div>
-        { errorText && <ErrorMessage message={errorText} /> }
-        <input
-            onClick={onSubmitForm}
-            type="button"
-            className="mx_Login_submit"
-            value={_t("Next")}
-        />
     </>;
 };
diff --git a/src/components/structures/auth/forgot-password/EnterEmail.tsx b/src/components/structures/auth/forgot-password/EnterEmail.tsx
@@ -22,13 +22,15 @@ import EmailField from "../../../views/auth/EmailField";
 import { ErrorMessage } from "../../ErrorMessage";
 import Spinner from "../../../views/elements/Spinner";
 import Field from "../../../views/elements/Field";
+import AccessibleButton from "../../../views/elements/AccessibleButton";
 
 interface EnterEmailProps {
     email: string;
     errorText: string | ReactNode | null;
     homeserver: string;
     loading: boolean;
     onInputChanged: (stateKey: string, ev: React.FormEvent<HTMLInputElement>) => void;
+    onLoginClick?: () => void;
     onSubmitForm: (ev: React.FormEvent) => void;
 }
 
@@ -41,6 +43,7 @@ export const EnterEmail: React.FC<EnterEmailProps> = ({
     homeserver,
     loading,
     onInputChanged,
+    onLoginClick = () => {},
     onSubmitForm,
 }) => {
     const submitButtonChild = loading
@@ -92,6 +95,15 @@ export const EnterEmail: React.FC<EnterEmailProps> = ({
                 >
                     { submitButtonChild }
                 </button>
+                <div className="mx_AuthBody_button-container">
+                    <AccessibleButton
+                        className="mx_AuthBody_sign-in-instead-button"
+                        element="button"
+                        kind="link"
+                        onClick={onLoginClick}>
+                        { _t("Sign in instead") }
+                    </AccessibleButton>
+                </div>
             </fieldset>
         </form>
     </>;
diff --git a/src/components/structures/auth/forgot-password/VerifyEmailModal.tsx b/src/components/structures/auth/forgot-password/VerifyEmailModal.tsx
@@ -27,12 +27,16 @@ import { ErrorMessage } from "../../ErrorMessage";
 interface Props {
     email: string;
     errorText: string | null;
+    onCloseClick: () => void;
+    onReEnterEmailClick: () => void;
     onResendClick: () => Promise<boolean>;
 }
 
 export const VerifyEmailModal: React.FC<Props> = ({
     email,
     errorText,
+    onCloseClick,
+    onReEnterEmailClick,
     onResendClick,
 }) => {
     const { toggle: toggleTooltipVisible, value: tooltipVisible } = useTimeoutToggle(false, 2500);
@@ -57,7 +61,8 @@ export const VerifyEmailModal: React.FC<Props> = ({
                 },
             ) }
         </p>
-        <div className="mx_AuthBody_did-not-receive mx_AuthBody_did-not-receive--centered">
+
+        <div className="mx_AuthBody_did-not-receive">
             <span className="mx_VerifyEMailDialog_text-light">{ _t("Did not receive it?") }</span>
             <AccessibleButton
                 className="mx_AuthBody_resend-button"
@@ -74,5 +79,22 @@ export const VerifyEmailModal: React.FC<Props> = ({
             </AccessibleButton>
             { errorText && <ErrorMessage message={errorText} /> }
         </div>
+
+        <div className="mx_AuthBody_did-not-receive">
+            <span className="mx_VerifyEMailDialog_text-light">{ _t("Wrong email address?") }</span>
+            <AccessibleButton
+                className="mx_AuthBody_resend-button"
+                kind="link"
+                onClick={onReEnterEmailClick}
+            >
+                { _t("Re-enter email address") }
+            </AccessibleButton>
+        </div>
+
+        <AccessibleButton
+            onClick={onCloseClick}
+            className="mx_Dialog_cancelButton"
+            aria-label={_t("Close dialog")}
+        />
     </>;
 };
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
@@ -3496,13 +3496,16 @@
     "Clear personal data": "Clear personal data",
     "Warning: Your personal data (including encryption keys) is still stored in this session. Clear it if you're finished using this session, or want to sign in to another account.": "Warning: Your personal data (including encryption keys) is still stored in this session. Clear it if you're finished using this session, or want to sign in to another account.",
     "Follow the instructions sent to <b>%(email)s</b>": "Follow the instructions sent to <b>%(email)s</b>",
+    "Wrong email address?": "Wrong email address?",
+    "Re-enter email address": "Re-enter email address",
     "Did not receive it?": "Did not receive it?",
     "Verification link email resent!": "Verification link email resent!",
     "Send email": "Send email",
     "Enter your email to reset password": "Enter your email to reset password",
     "<b>%(homeserver)s</b> will send you a verification link to let you reset your password.": "<b>%(homeserver)s</b> will send you a verification link to let you reset your password.",
     "The email address linked to your account must be entered.": "The email address linked to your account must be entered.",
     "The email address doesn't appear to be valid.": "The email address doesn't appear to be valid.",
+    "Sign in instead": "Sign in instead",
     "Verify your email to continue": "Verify your email to continue",
     "We need to know it’s you before resetting your password.\n                    Click the link in the email we just sent to <b>%(email)s</b>": "We need to know it’s you before resetting your password.\n                    Click the link in the email we just sent to <b>%(email)s</b>",
     "Commands": "Commands",
diff --git a/test/components/structures/auth/ForgotPassword-test.tsx b/test/components/structures/auth/ForgotPassword-test.tsx
