New password reset flow (#9581)

src/components/structures/ErrorMessage.tsx

@@ -0,0 +1,40 @@
+/*
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React, { ReactNode } from 'react';
+
+import { Icon as WarningBadgeIcon } from "../../../res/img/element-icons/warning-badge.svg";
+
+interface ErrorMessageProps {
+    message: string | ReactNode | null;
+}
+
+/**
+ * Error message component.
+ * Reserves two lines to display errors to prevent layout shifts when the error pops up.
+ */
+export const ErrorMessage: React.FC<ErrorMessageProps> = ({
+    message,
+}) => {
+    const icon = message
+        ? <WarningBadgeIcon className="mx_Icon mx_Icon_16" />
+        : null;
+
+    return <div className="mx_ErrorMessage">
+        { icon }
+        { message }
+    </div>;
+};

src/components/structures/MatrixChat.tsx

@@ -2086,7 +2086,6 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
                 <ForgotPassword
                     onComplete={this.onLoginClick}
                     onLoginClick={this.onLoginClick}
-                    onServerConfigChange={this.onServerConfigChange}
                     {...this.getServerProperties()}
                 />
             );

src/components/structures/auth/ForgotPassword.tsx

@@ -16,104 +16,102 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React from 'react';
-import classNames from 'classnames';
-import { logger } from "matrix-js-sdk/src/logger";
+import React, { ReactNode } from 'react';
+import { logger } from 'matrix-js-sdk/src/logger';
 import { createClient } from "matrix-js-sdk/src/matrix";
 
 import { _t, _td } from '../../../languageHandler';
 import Modal from "../../../Modal";
 import PasswordReset from "../../../PasswordReset";
-import AutoDiscoveryUtils from "../../../utils/AutoDiscoveryUtils";
 import AuthPage from "../../views/auth/AuthPage";
-import ServerPicker from "../../views/elements/ServerPicker";
-import EmailField from "../../views/auth/EmailField";
 import PassphraseField from '../../views/auth/PassphraseField';
 import { PASSWORD_MIN_SCORE } from '../../views/auth/RegistrationForm';
-import InlineSpinner from '../../views/elements/InlineSpinner';
-import Spinner from "../../views/elements/Spinner";
-import QuestionDialog from "../../views/dialogs/QuestionDialog";
-import ErrorDialog from "../../views/dialogs/ErrorDialog";
 import AuthHeader from "../../views/auth/AuthHeader";
 import AuthBody from "../../views/auth/AuthBody";
 import PassphraseConfirmField from "../../views/auth/PassphraseConfirmField";
-import AccessibleButton from '../../views/elements/AccessibleButton';
 import StyledCheckbox from '../../views/elements/StyledCheckbox';
 import { ValidatedServerConfig } from '../../../utils/ValidatedServerConfig';
+import { Icon as LockIcon } from "../../../../res/img/element-icons/lock.svg";
+import QuestionDialog from '../../views/dialogs/QuestionDialog';
+import { EnterEmail } from './forgot-password/EnterEmail';
+import { CheckEmail } from './forgot-password/CheckEmail';
+import Field from '../../views/elements/Field';
+import { ErrorMessage } from '../ErrorMessage';
+import { Icon as CheckboxIcon } from "../../../../res/img/element-icons/Checkbox.svg";
+import { VerifyEmailModal } from './forgot-password/VerifyEmailModal';
+import Spinner from '../../views/elements/Spinner';
+import { formatSeconds } from '../../../DateUtils';
+import AutoDiscoveryUtils from '../../../utils/AutoDiscoveryUtils';
 
 enum Phase {
-    // Show the forgot password inputs
-    Forgot = 1,
+    // Show email input
+    EnterEmail = 1,
     // Email is in the process of being sent
     SendingEmail = 2,
     // Email has been sent
     EmailSent = 3,
-    // User has clicked the link in email and completed reset
-    Done = 4,
+    // Show new password input
+    PasswordInput = 4,
+    // Password is in the process of being reset
+    ResettingPassword = 5,
+    // All done
+    Done = 6,
 }
 
-interface IProps {
+interface Props {
     serverConfig: ValidatedServerConfig;
-    onServerConfigChange: (serverConfig: ValidatedServerConfig) => void;
     onLoginClick?: () => void;
     onComplete: () => void;
 }
 
-interface IState {
+interface State {
     phase: Phase;
     email: string;
     password: string;
     password2: string;
-    errorText: string;
+    errorText: string | ReactNode | null;
 
     // We perform liveliness checks later, but for now suppress the errors.
     // We also track the server dead errors independently of the regular errors so
     // that we can render it differently, and override any other error the user may
     // be seeing.
     serverIsAlive: boolean;
-    serverErrorIsFatal: boolean;
     serverDeadError: string;
 
-    currentHttpRequest?: Promise<any>;
-
     serverSupportsControlOfDevicesLogout: boolean;
     logoutDevices: boolean;
 }
 
-enum ForgotPasswordField {
-    Email = 'field_email',
-    Password = 'field_password',
-    PasswordConfirm = 'field_password_confirm',
-}
-
-export default class ForgotPassword extends React.Component<IProps, IState> {
+export default class ForgotPassword extends React.Component<Props, State> {
     private reset: PasswordReset;
+    private fieldPassword: Field | null = null;
+    private fieldPasswordConfirm: Field | null = null;
 
-    state: IState = {
-        phase: Phase.Forgot,
-        email: "",
-        password: "",
-        password2: "",
-        errorText: null,
-
-        // We perform liveliness checks later, but for now suppress the errors.
-        // We also track the server dead errors independently of the regular errors so
-        // that we can render it differently, and override any other error the user may
-        // be seeing.
-        serverIsAlive: true,
-        serverErrorIsFatal: false,
-        serverDeadError: "",
-        serverSupportsControlOfDevicesLogout: false,
-        logoutDevices: false,
-    };
+    public constructor(props: Props) {
+        super(props);
+        this.state = {
+            phase: Phase.EnterEmail,
+            email: "",
+            password: "",
+            password2: "",
+            errorText: null,
+            // We perform liveliness checks later, but for now suppress the errors.
+            // We also track the server dead errors independently of the regular errors so
+            // that we can render it differently, and override any other error the user may
+            // be seeing.
+            serverIsAlive: true,
+            serverDeadError: "",
+            serverSupportsControlOfDevicesLogout: false,
+            logoutDevices: false,
+        };
+        this.reset = new PasswordReset(this.props.serverConfig.hsUrl, this.props.serverConfig.isUrl);
+    }
 
     public componentDidMount() {
-        this.reset = null;
-        this.checkServerLiveliness(this.props.serverConfig);
         this.checkServerCapabilities(this.props.serverConfig);
     }
 
-    public componentDidUpdate(prevProps: Readonly<IProps>) {
+    public componentDidUpdate(prevProps: Readonly<Props>) {
         if (prevProps.serverConfig.hsUrl !== this.props.serverConfig.hsUrl ||
             prevProps.serverConfig.isUrl !== this.props.serverConfig.isUrl
         ) {
@@ -125,7 +123,7 @@ export default class ForgotPassword extends React.Component<IProps, IState> {
         }
     }
 
-    private async checkServerLiveliness(serverConfig): Promise<void> {
+    private async checkServerLiveliness(serverConfig: ValidatedServerConfig): Promise<void> {
         try {
             await AutoDiscoveryUtils.validateServerConfigWithStaticUrls(
                 serverConfig.hsUrl,
@@ -135,8 +133,15 @@ export default class ForgotPassword extends React.Component<IProps, IState> {
             this.setState({
                 serverIsAlive: true,
             });
-        } catch (e) {
-            this.setState(AutoDiscoveryUtils.authComponentStateForError(e, "forgot_password") as IState);
+        } catch (e: any) {
+            const {
+                serverIsAlive,
+                serverDeadError,
+            } = AutoDiscoveryUtils.authComponentStateForError(e, "forgot_password");
+            this.setState({
+                serverIsAlive,
+                errorText: serverDeadError,
+            });
         }
     }
 
@@ -153,94 +158,85 @@ export default class ForgotPassword extends React.Component<IProps, IState> {
         });
     }
 
-    public submitPasswordReset(email: string, password: string, logoutDevices = true): void {
+    private async onPhaseEmailInputSubmit() {
+        this.phase = Phase.SendingEmail;
+
+        if (await this.sendVerificationMail()) {
+            this.phase = Phase.EmailSent;
+            return;
+        }
+
+        this.phase = Phase.EnterEmail;
+    }
+
+    private sendVerificationMail = async (): Promise<boolean> => {
+        try {
+            await this.reset.requestResetToken(this.state.email);
+            return true;
+        } catch (err: any) {
+            this.handleError(err);
+        }
+
+        return false;
+    };
+
+    private handleError(err: any): void {
+        if (err?.httpStatus === 429) {
+            // 429: rate limit
+            const retryAfterMs = parseInt(err?.data?.retry_after_ms, 10);
+
+            const errorText = isNaN(retryAfterMs)
+                ? _t("Too many attempts in a short time. Wait some time before trying again.")
+                : _t(
+                    "Too many attempts in a short time. Retry after %(timeout)s.",
+                    {
+                        timeout: formatSeconds(retryAfterMs / 1000),
+                    },
+                );
+
+            this.setState({
+                errorText,
+            });
+            return;
+        }
+
+        if (err?.name === "ConnectionError") {
+            this.setState({
+                errorText: _t("Cannot reach homeserver") + ": "
+                    + _t("Ensure you have a stable internet connection, or get in touch with the server admin"),
+            });
+            return;
+        }
+
         this.setState({
-            phase: Phase.SendingEmail,
-        });
-        this.reset = new PasswordReset(this.props.serverConfig.hsUrl, this.props.serverConfig.isUrl);
-        this.reset.resetPassword(email, password, logoutDevices).then(() => {
-            this.setState({
-                phase: Phase.EmailSent,
-            });
-        }, (err) => {
-            this.showErrorDialog(_t('Failed to send email') + ": " + err.message);
-            this.setState({
-                phase: Phase.Forgot,
-            });
+            errorText: err.message,
         });
     }
 
-    private onVerify = async (ev: React.MouseEvent): Promise<void> => {
-        ev.preventDefault();
-        if (!this.reset) {
-            logger.error("onVerify called before submitPasswordReset!");
-            return;
-        }
-        if (this.state.currentHttpRequest) return;
+    private async onPhaseEmailSentSubmit() {
+        this.setState({
+            phase: Phase.PasswordInput,
+        });
+    }
 
-        try {
-            await this.handleHttpRequest(this.reset.checkEmailLinkClicked());
-            this.setState({ phase: Phase.Done });
-        } catch (err) {
-            this.showErrorDialog(err.message);
-        }
-    };
+    private set phase(phase: Phase) {
+        this.setState({ phase });
+    }
 
-    private onSubmitForm = async (ev: React.FormEvent): Promise<void> => {
-        ev.preventDefault();
-        if (this.state.currentHttpRequest) return;
-
-        // refresh the server errors, just in case the server came back online
-        await this.handleHttpRequest(this.checkServerLiveliness(this.props.serverConfig));
-
-        const allFieldsValid = await this.verifyFieldsBeforeSubmit();
-        if (!allFieldsValid) {
-            return;
-        }
-
-        if (this.state.logoutDevices) {
-            const { finished } = Modal.createDialog<[boolean]>(QuestionDialog, {
-                title: _t('Warning!'),
-                description:
-                    <div>
-                        <p>{ !this.state.serverSupportsControlOfDevicesLogout ?
-                            _t(
-                                "Resetting your password on this homeserver will cause all of your devices to be " +
-                                "signed out. This will delete the message encryption keys stored on them, " +
-                                "making encrypted chat history unreadable.",
-                            ) :
-                            _t(
-                                "Signing out your devices will delete the message encryption keys stored on them, " +
-                                "making encrypted chat history unreadable.",
-                            )
-                        }</p>
-                        <p>{ _t(
-                            "If you want to retain access to your chat history in encrypted rooms, set up Key Backup " +
-                            "or export your message keys from one of your other devices before proceeding.",
-                        ) }</p>
-                    </div>,
-                button: _t('Continue'),
-            });
-            const [confirmed] = await finished;
-
-            if (!confirmed) return;
-        }
-
-        this.submitPasswordReset(this.state.email, this.state.password, this.state.logoutDevices);
-    };
-
-    private async verifyFieldsBeforeSubmit() {
+    private async verifyFieldsBeforeSubmit(): Promise<boolean> {
         const fieldIdsInDisplayOrder = [
-            ForgotPasswordField.Email,
-            ForgotPasswordField.Password,
-            ForgotPasswordField.PasswordConfirm,
+            this.fieldPassword,
+            this.fieldPasswordConfirm,
         ];
 
-        const invalidFields = [];
-        for (const fieldId of fieldIdsInDisplayOrder) {
-            const valid = await this[fieldId].validate({ allowEmpty: false });
+        const invalidFields: Field[] = [];
+
+        for (const field of fieldIdsInDisplayOrder) {
+            if (!field) continue;
+
+            const valid = await field.validate({ allowEmpty: false });
             if (!valid) {
-                invalidFields.push(this[fieldId]);
+                invalidFields.push(field);
             }
         }
 
@@ -256,6 +252,78 @@ export default class ForgotPassword extends React.Component<IProps, IState> {
         return false;
     }
 
+    private async onPhasePasswordInputSubmit(): Promise<void> {
+        if (!await this.verifyFieldsBeforeSubmit()) return;
+
+        if (this.state.logoutDevices) {
+            const logoutDevicesConfirmation = await this.renderConfirmLogoutDevicesDialog();
+            if (!logoutDevicesConfirmation) return;
+        }
+
+        this.phase = Phase.ResettingPassword;
+
+        try {
+            await this.reset.setNewPassword(this.state.password);
+        } catch (err: any) {
+            if (err.httpStatus !== 401) {
+                // 401 = waiting for email verification, else unknown error
+                this.handleError(err);
+                return;
+            }
+        }
+
+        const modal = Modal.createDialog(
+            VerifyEmailModal,
+            {
+                email: this.state.email,
+                errorText: this.state.errorText,
+                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";
+                },
+            },
+        );
+
+        await this.reset.retrySetNewPassword(this.state.password);
+        this.phase = Phase.Done;
+        modal.close();
+    }
+
+    private onSubmitForm = async (ev: React.FormEvent): Promise<void> => {
+        ev.preventDefault();
+
+        // Should not happen because of disabled forms, but just return if currently doing an action.
+        if ([Phase.SendingEmail, Phase.ResettingPassword].includes(this.state.phase)) return;
+
+        this.setState({
+            errorText: "",
+        });
+
+        // Refresh the server errors. Just in case the server came back online of went offline.
+        await this.checkServerLiveliness(this.props.serverConfig);
+
+        // Server error
+        if (!this.state.serverIsAlive) return;
+
+        switch (this.state.phase) {
+            case Phase.EnterEmail:
+                this.onPhaseEmailInputSubmit();
+                break;
+            case Phase.EmailSent:
+                this.onPhaseEmailSentSubmit();
+                break;
+            case Phase.PasswordInput:
+                this.onPhasePasswordInputSubmit();
+                break;
+        }
+    };
+
     private onInputChanged = (stateKey: string, ev: React.FormEvent<HTMLInputElement>) => {
         let value = ev.currentTarget.value;
         if (stateKey === "email") value = value.trim();
@@ -264,139 +332,109 @@ export default class ForgotPassword extends React.Component<IProps, IState> {
         } as any);
     };
 
-    private onLoginClick = (ev: React.MouseEvent): void => {
-        ev.preventDefault();
-        ev.stopPropagation();
-        this.props.onLoginClick();
-    };
-
-    public showErrorDialog(description: string, title?: string) {
-        Modal.createDialog(ErrorDialog, {
-            title,
-            description,
-        });
+    renderEnterEmail(): JSX.Element {
+        return <EnterEmail
+            email={this.state.email}
+            errorText={this.state.errorText}
+            homeserver={this.props.serverConfig.hsName}
+            loading={this.state.phase === Phase.SendingEmail}
+            onInputChanged={this.onInputChanged}
+            onSubmitForm={this.onSubmitForm}
+        />;
     }
 
-    private handleHttpRequest<T = unknown>(request: Promise<T>): Promise<T> {
-        this.setState({
-            currentHttpRequest: request,
-        });
-        return request.finally(() => {
-            this.setState({
-                currentHttpRequest: undefined,
-            });
+    async renderConfirmLogoutDevicesDialog(): Promise<boolean> {
+        const { finished } = Modal.createDialog<[boolean]>(QuestionDialog, {
+            title: _t('Warning!'),
+            description:
+                <div>
+                    <p>{ !this.state.serverSupportsControlOfDevicesLogout ?
+                        _t(
+                            "Resetting your password on this homeserver will cause all of your devices to be " +
+                            "signed out. This will delete the message encryption keys stored on them, " +
+                            "making encrypted chat history unreadable.",
+                        ) :
+                        _t(
+                            "Signing out your devices will delete the message encryption keys stored on them, " +
+                            "making encrypted chat history unreadable.",
+                        )
+                    }</p>
+                    <p>{ _t(
+                        "If you want to retain access to your chat history in encrypted rooms, set up Key Backup " +
+                        "or export your message keys from one of your other devices before proceeding.",
+                    ) }</p>
+                </div>,
+            button: _t('Continue'),
         });
+        const [confirmed] = await finished;
+        return confirmed;
     }
 
-    renderForgot() {
-        let errorText = null;
-        const err = this.state.errorText;
-        if (err) {
-            errorText = <div className="mx_Login_error">{ err }</div>;
-        }
+    renderCheckEmail(): JSX.Element {
+        return <CheckEmail
+            email={this.state.email}
+            errorText={this.state.errorText}
+            onResendClick={this.sendVerificationMail}
+            onSubmitForm={this.onSubmitForm}
+        />;
+    }
 
-        let serverDeadSection;
-        if (!this.state.serverIsAlive) {
-            const classes = classNames({
-                "mx_Login_error": true,
-                "mx_Login_serverError": true,
-                "mx_Login_serverErrorNonFatal": !this.state.serverErrorIsFatal,
-            });
-            serverDeadSection = (
-                <div className={classes}>
-                    { this.state.serverDeadError }
-                </div>
-            );
-        }
+    renderSetPassword(): JSX.Element {
+        const submitButtonChild = this.state.phase === Phase.ResettingPassword
+            ? <Spinner w={16} h={16} />
+            : _t("Reset password");
 
-        return <div>
-            { errorText }
-            { serverDeadSection }
-            <ServerPicker
-                serverConfig={this.props.serverConfig}
-                onServerConfigChange={this.props.onServerConfigChange}
-            />
+        return <>
+            <LockIcon className="mx_AuthBody_lockIcon" />
+            <h1>{ _t("Reset your password") }</h1>
             <form onSubmit={this.onSubmitForm}>
-                <div className="mx_AuthBody_fieldRow">
-                    <EmailField
-                        name="reset_email" // define a name so browser's password autofill gets less confused
-                        labelRequired={_td('The email address linked to your account must be entered.')}
-                        labelInvalid={_td("The email address doesn't appear to be valid.")}
-                        value={this.state.email}
-                        fieldRef={field => this[ForgotPasswordField.Email] = field}
-                        autoFocus={true}
-                        onChange={this.onInputChanged.bind(this, "email")}
-                    />
-                </div>
-                <div className="mx_AuthBody_fieldRow">
-                    <PassphraseField
-                        name="reset_password"
-                        type="password"
-                        label={_td('New Password')}
-                        value={this.state.password}
-                        minScore={PASSWORD_MIN_SCORE}
-                        fieldRef={field => this[ForgotPasswordField.Password] = field}
-                        onChange={this.onInputChanged.bind(this, "password")}
-                        autoComplete="new-password"
-                    />
-                    <PassphraseConfirmField
-                        name="reset_password_confirm"
-                        label={_td('Confirm')}
-                        labelRequired={_td("A new password must be entered.")}
-                        labelInvalid={_td("New passwords must match each other.")}
-                        value={this.state.password2}
-                        password={this.state.password}
-                        fieldRef={field => this[ForgotPasswordField.PasswordConfirm] = field}
-                        onChange={this.onInputChanged.bind(this, "password2")}
-                        autoComplete="new-password"
-                    />
-                </div>
-                { this.state.serverSupportsControlOfDevicesLogout ?
+                <fieldset disabled={this.state.phase === Phase.ResettingPassword}>
                     <div className="mx_AuthBody_fieldRow">
-                        <StyledCheckbox onChange={() => this.setState({ logoutDevices: !this.state.logoutDevices })} checked={this.state.logoutDevices}>
-                            { _t("Sign out all devices") }
-                        </StyledCheckbox>
-                    </div> : null
-                }
-                <span>{ _t(
-                    'A verification email will be sent to your inbox to confirm ' +
-                    'setting your new password.',
-                ) }</span>
-                <input
-                    className="mx_Login_submit"
-                    type="submit"
-                    value={_t('Send Reset Email')}
-                />
+                        <PassphraseField
+                            name="reset_password"
+                            type="password"
+                            label={_td("New Password")}
+                            value={this.state.password}
+                            minScore={PASSWORD_MIN_SCORE}
+                            fieldRef={field => this.fieldPassword = field}
+                            onChange={this.onInputChanged.bind(this, "password")}
+                            autoComplete="new-password"
+                        />
+                        <PassphraseConfirmField
+                            name="reset_password_confirm"
+                            label={_td("Confirm new password")}
+                            labelRequired={_td("A new password must be entered.")}
+                            labelInvalid={_td("New passwords must match each other.")}
+                            value={this.state.password2}
+                            password={this.state.password}
+                            fieldRef={field => this.fieldPasswordConfirm = field}
+                            onChange={this.onInputChanged.bind(this, "password2")}
+                            autoComplete="new-password"
+                        />
+                    </div>
+                    { this.state.serverSupportsControlOfDevicesLogout ?
+                        <div className="mx_AuthBody_fieldRow">
+                            <StyledCheckbox onChange={() => this.setState({ logoutDevices: !this.state.logoutDevices })} checked={this.state.logoutDevices}>
+                                { _t("Sign out of all devices") }
+                            </StyledCheckbox>
+                        </div> : null
+                    }
+                    { this.state.errorText && <ErrorMessage message={this.state.errorText} /> }
+                    <button
+                        type="submit"
+                        className="mx_Login_submit"
+                    >
+                        { submitButtonChild }
+                    </button>
+                </fieldset>
             </form>
-            <AccessibleButton kind='link' className="mx_AuthBody_changeFlow" onClick={this.onLoginClick}>
-                { _t('Sign in instead') }
-            </AccessibleButton>
-        </div>;
-    }
-
-    renderSendingEmail() {
-        return <Spinner />;
-    }
-
-    renderEmailSent() {
-        return <div>
-            { _t("An email has been sent to %(emailAddress)s. Once you've followed the " +
-                "link it contains, click below.", { emailAddress: this.state.email }) }
-            <br />
-            <input
-                className="mx_Login_submit"
-                type="button"
-                onClick={this.onVerify}
-                value={_t('I have verified my email address')} />
-            { this.state.currentHttpRequest && (
-                <div className="mx_Login_spinner"><InlineSpinner w={64} h={64} /></div>)
-            }
-        </div>;
+        </>;
     }
 
     renderDone() {
-        return <div>
-            <p>{ _t("Your password has been reset.") }</p>
+        return <>
+            <CheckboxIcon className="mx_Icon mx_Icon_32 mx_Icon_accent" />
+            <h1>{ _t("Your password has been reset.") }</h1>
             { this.state.logoutDevices ?
                 <p>{ _t(
                     "You have been logged out of all devices and will no longer receive " +
@@ -410,33 +448,40 @@ export default class ForgotPassword extends React.Component<IProps, IState> {
                 type="button"
                 onClick={this.props.onComplete}
                 value={_t('Return to login screen')} />
-        </div>;
+        </>;
     }
 
     render() {
-        let resetPasswordJsx;
+        let resetPasswordJsx: JSX.Element;
+
         switch (this.state.phase) {
-            case Phase.Forgot:
-                resetPasswordJsx = this.renderForgot();
-                break;
+            case Phase.EnterEmail:
             case Phase.SendingEmail:
-                resetPasswordJsx = this.renderSendingEmail();
+                resetPasswordJsx = this.renderEnterEmail();
                 break;
             case Phase.EmailSent:
-                resetPasswordJsx = this.renderEmailSent();
+                resetPasswordJsx = this.renderCheckEmail();
+                break;
+            case Phase.PasswordInput:
+            case Phase.ResettingPassword:
+                resetPasswordJsx = this.renderSetPassword();
                 break;
             case Phase.Done:
                 resetPasswordJsx = this.renderDone();
                 break;
             default:
-                resetPasswordJsx = <div className="mx_Login_spinner"><InlineSpinner w={64} h={64} /></div>;
+                // This should not happen. However, it is logged and the user is sent to the start.
+                logger.warn(`unknown forgot password phase ${this.state.phase}`);
+                this.setState({
+                    phase: Phase.EnterEmail,
+                });
+                return;
         }
 
         return (
             <AuthPage>
                 <AuthHeader />
                 <AuthBody>
-                    <h1> { _t('Set a new password') } </h1>
                     { resetPasswordJsx }
                 </AuthBody>
             </AuthPage>

src/components/structures/auth/forgot-password/CheckEmail.tsx

@@ -0,0 +1,84 @@
+/*
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React, { ReactNode } from "react";
+
+import AccessibleButton from "../../../views/elements/AccessibleButton";
+import { Icon as EMailPromptIcon } from "../../../../../res/img/element-icons/email-prompt.svg";
+import { Icon as RetryIcon } from "../../../../../res/img/element-icons/retry.svg";
+import { _t } from '../../../../languageHandler';
+import Tooltip, { Alignment } from "../../../views/elements/Tooltip";
+import { useTimeoutToggle } from "../../../../hooks/useTimeoutToggle";
+import { ErrorMessage } from "../../ErrorMessage";
+
+interface CheckEmailProps {
+    email: string;
+    errorText: string | ReactNode | null;
+    onResendClick: () => Promise<boolean>;
+    onSubmitForm: (ev: React.FormEvent) => void;
+}
+
+/**
+ * This component renders the email verification view of the forgot password flow.
+ */
+export const CheckEmail: React.FC<CheckEmailProps> = ({
+    email,
+    errorText,
+    onSubmitForm,
+    onResendClick,
+}) => {
+    const { toggle: toggleTooltipVisible, value: tooltipVisible } = useTimeoutToggle(false, 2500);
+
+    const onResendClickFn = async (): Promise<void> => {
+        await onResendClick();
+        toggleTooltipVisible();
+    };
+
+    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_did-not-receive">
+            <span className="mx_VerifyEMailDialog_text-light">{ _t("Did not receive it?") }</span>
+            <AccessibleButton
+                className="mx_AuthBody_resend-button"
+                kind="link"
+                onClick={onResendClickFn}
+            >
+                <RetryIcon className="mx_Icon mx_Icon_16" />
+                { _t("Resend") }
+                <Tooltip
+                    label={_t("Verification link email resent!")}
+                    alignment={Alignment.Top}
+                    visible={tooltipVisible}
+                />
+            </AccessibleButton>
+        </div>
+        { errorText && <ErrorMessage message={errorText} /> }
+        <input
+            onClick={onSubmitForm}
+            type="button"
+            className="mx_Login_submit"
+            value={_t("Next")}
+        />
+    </>;
+};

src/components/structures/auth/forgot-password/EnterEmail.tsx

@@ -0,0 +1,98 @@
+/*
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React, { ReactNode, useRef } from "react";
+
+import { Icon as EmailIcon } from "../../../../../res/img/element-icons/Email-icon.svg";
+import { _t, _td } from '../../../../languageHandler';
+import EmailField from "../../../views/auth/EmailField";
+import { ErrorMessage } from "../../ErrorMessage";
+import Spinner from "../../../views/elements/Spinner";
+import Field from "../../../views/elements/Field";
+
+interface EnterEmailProps {
+    email: string;
+    errorText: string | ReactNode | null;
+    homeserver: string;
+    loading: boolean;
+    onInputChanged: (stateKey: string, ev: React.FormEvent<HTMLInputElement>) => void;
+    onSubmitForm: (ev: React.FormEvent) => void;
+}
+
+/**
+ * This component renders the email input view of the forgot password flow.
+ */
+export const EnterEmail: React.FC<EnterEmailProps> = ({
+    email,
+    errorText,
+    homeserver,
+    loading,
+    onInputChanged,
+    onSubmitForm,
+}) => {
+    const submitButtonChild = loading
+        ? <Spinner w={16} h={16} />
+        : _t("Send email");
+
+    const emailFieldRef = useRef<Field>(null);
+
+    const onSubmit = async (event: React.FormEvent) => {
+        if (await emailFieldRef.current?.validate({ allowEmpty: false })) {
+            onSubmitForm(event);
+            return;
+        }
+
+        emailFieldRef.current?.focus();
+        emailFieldRef.current?.validate({ allowEmpty: false, focused: true });
+    };
+
+    return <>
+        <EmailIcon className="mx_AuthBody_icon" />
+        <h1>{ _t("Enter your email to reset password") }</h1>
+        <p className="mx_AuthBody_text">
+            {
+                _t(
+                    "<b>%(homeserver)s</b> will send you a verification link to let you reset your password.",
+                    { homeserver },
+                    { b: t => <b>{ t }</b> },
+                )
+            }
+        </p>
+        <form onSubmit={onSubmit}>
+            <fieldset disabled={loading}>
+                <div className="mx_AuthBody_fieldRow">
+                    <EmailField
+                        name="reset_email" // define a name so browser's password autofill gets less confused
+                        label="Email address"
+                        labelRequired={_td("The email address linked to your account must be entered.")}
+                        labelInvalid={_td("The email address doesn't appear to be valid.")}
+                        value={email}
+                        autoFocus={true}
+                        onChange={(event: React.FormEvent<HTMLInputElement>) => onInputChanged("email", event)}
+                        fieldRef={emailFieldRef}
+                    />
+                </div>
+                { errorText && <ErrorMessage message={errorText} /> }
+                <button
+                    type="submit"
+                    className="mx_Login_submit"
+                >
+                    { submitButtonChild }
+                </button>
+            </fieldset>
+        </form>
+    </>;
+};

src/components/structures/auth/forgot-password/VerifyEmailModal.tsx

@@ -0,0 +1,78 @@
+/*
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from "react";
+
+import { _t } from "../../../../languageHandler";
+import AccessibleButton from "../../../views/elements/AccessibleButton";
+import { Icon as RetryIcon } from "../../../../../res/img/element-icons/retry.svg";
+import { Icon as EmailPromptIcon } from "../../../../../res/img/element-icons/email-prompt.svg";
+import Tooltip, { Alignment } from "../../../views/elements/Tooltip";
+import { useTimeoutToggle } from "../../../../hooks/useTimeoutToggle";
+import { ErrorMessage } from "../../ErrorMessage";
+
+interface Props {
+    email: string;
+    errorText: string | null;
+    onResendClick: () => Promise<boolean>;
+}
+
+export const VerifyEmailModal: React.FC<Props> = ({
+    email,
+    errorText,
+    onResendClick,
+}) => {
+    const { toggle: toggleTooltipVisible, value: tooltipVisible } = useTimeoutToggle(false, 2500);
+
+    const onResendClickFn = async (): Promise<void> => {
+        await onResendClick();
+        toggleTooltipVisible();
+    };
+
+    return <>
+        <EmailPromptIcon className="mx_AuthBody_emailPromptIcon" />
+        <h1>{ _t("Verify your email to continue") }</h1>
+        <p>
+            { _t(
+                `We need to know it’s you before resetting your password.
+                    Click the link in the email we just sent to <b>%(email)s</b>`,
+                {
+                    email,
+                },
+                {
+                    b: sub => <b>{ sub }</b>,
+                },
+            ) }
+        </p>
+        <div className="mx_AuthBody_did-not-receive mx_AuthBody_did-not-receive--centered">
+            <span className="mx_VerifyEMailDialog_text-light">{ _t("Did not receive it?") }</span>
+            <AccessibleButton
+                className="mx_AuthBody_resend-button"
+                kind="link"
+                onClick={onResendClickFn}
+            >
+                <RetryIcon className="mx_Icon mx_Icon_16" />
+                { _t("Resend") }
+                <Tooltip
+                    label={_t("Verification link email resent!")}
+                    alignment={Alignment.Top}
+                    visible={tooltipVisible}
+                />
+            </AccessibleButton>
+            { errorText && <ErrorMessage message={errorText} /> }
+        </div>
+    </>;
+};