New password reset flow (#9581)

res/css/_components.pcss

@@ -49,6 +49,7 @@
 @import "./structures/_BackdropPanel.pcss";
 @import "./structures/_CompatibilityPage.pcss";
 @import "./structures/_ContextualMenu.pcss";
+@import "./structures/_ErrorMessage.pcss";
 @import "./structures/_FileDropTarget.pcss";
 @import "./structures/_FilePanel.pcss";
 @import "./structures/_GenericDropdownMenu.pcss";
@@ -157,6 +158,7 @@
 @import "./views/dialogs/_UntrustedDeviceDialog.pcss";
 @import "./views/dialogs/_UploadConfirmDialog.pcss";
 @import "./views/dialogs/_UserSettingsDialog.pcss";
+@import "./views/dialogs/_VerifyEMailDialog.pcss";
 @import "./views/dialogs/_WidgetCapabilitiesPromptDialog.pcss";
 @import "./views/dialogs/security/_AccessSecretStorageDialog.pcss";
 @import "./views/dialogs/security/_CreateCrossSigningDialog.pcss";

res/css/compound/_Icon.pcss

@@ -25,20 +25,30 @@ limitations under the License.
     padding: 1px;
 }
 
+.mx_Icon_accent {
+    color: $accent;
+}
+
 .mx_Icon_8 {
-    height: 8px;
     flex: 0 0 8px;
+    height: 8px;
     width: 8px;
 }
 
 .mx_Icon_16 {
-    height: 16px;
     flex: 0 0 16px;
+    height: 16px;
     width: 16px;
 }
 
 .mx_Icon_24 {
-    height: 24px;
     flex: 0 0 24px;
+    height: 24px;
     width: 24px;
 }
+
+.mx_Icon_32 {
+    flex: 0 0 32px;
+    height: 32px;
+    width: 32px;
+}

res/css/structures/_ErrorMessage.pcss

@@ -0,0 +1,25 @@
+/*
+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.
+*/
+
+.mx_ErrorMessage {
+    align-items: center;
+    color: $alert;
+    display: flex;
+    font-size: $font-12px;
+    gap: $spacing-8;
+    line-height: 1.2em;
+    min-height: 2.4em;
+}

res/css/structures/auth/_Login.pcss

@@ -17,6 +17,8 @@ limitations under the License.
 
 .mx_Login_submit {
     @mixin mx_DialogButton;
+    font-size: 15px;
+    font-weight: 600;
     width: 100%;
     margin-top: 24px;
     margin-bottom: 24px;
@@ -87,7 +89,7 @@ limitations under the License.
 
 div.mx_AccessibleButton_kind_link.mx_Login_forgot {
     display: block;
-    margin: 0 auto;
+    margin-top: 24px;
 
     &.mx_AccessibleButton_disabled {
         cursor: not-allowed;

res/css/views/auth/_AuthBody.pcss

@@ -17,12 +17,17 @@ limitations under the License.
 
 .mx_AuthBody {
     width: 500px;
-    font-size: $font-12px;
-    color: $authpage-secondary-color;
+    font-size: $font-14px;
+    color: $primary-content;
     background-color: $background;
     border-radius: 0 4px 4px 0;
-    padding: 25px 60px;
+    padding: 50px 32px;
     box-sizing: border-box;
+    min-height: 600px;
+
+    b {
+        font-weight: 600;
+    }
 
     &.mx_AuthBody_flex {
         display: flex;
@@ -32,7 +37,8 @@ limitations under the License.
     h1 {
         font-size: $font-24px;
         font-weight: $font-semi-bold;
-        margin-top: 8px;
+        margin-bottom: $spacing-20;
+        margin-top: $spacing-24;
         color: $authpage-primary-color;
     }
 
@@ -52,6 +58,23 @@ limitations under the License.
         @mixin mx_Dialog_link;
     }
 
+    fieldset {
+        display: block;
+    }
+
+    .mx_AuthBody_icon {
+        width: 40px;
+    }
+
+    .mx_AuthBody_lockIcon {
+        height: 29px;
+    }
+
+    .mx_AuthBody_text {
+        margin-bottom: $spacing-48;
+        margin-top: 0;
+    }
+
     input[type="text"],
     input[type="password"] {
         color: $authpage-primary-color;
@@ -76,6 +99,16 @@ limitations under the License.
         color: $alert;
     }
 
+    .mx_Login_submit {
+        height: 33px;
+        margin-top: $spacing-16;
+    }
+
+    .mx_ErrorMessage {
+        margin-bottom: 12px;
+        margin-top: 2px;
+    }
+
     .mx_Field input {
         box-sizing: border-box;
     }
@@ -101,6 +134,43 @@ limitations under the License.
     }
 }
 
+.mx_AuthBody_did-not-receive {
+    align-items: center;
+    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 {
+    align-items: center;
+    border-radius: 8px;
+    color: $accent;
+    display: flex;
+    gap: $spacing-4;
+    padding: 4px;
+
+    &:hover {
+        background-color: $system;
+    }
+}
+
+.mx_AuthBody_emailPromptIcon {
+    width: 57px;
+}
+
+.mx_AuthBody_emailPromptIcon--shifted {
+    margin-bottom: -17px; // Prevent layout jump by relative positioning.
+    position: relative;
+    top: -17px; // This icon is higher than the other icons. Shift up to prevent icon jumping.
+    width: 57px;
+}
+
 .mx_AuthBody_fieldRow {
     display: flex;
     margin-bottom: 10px;

res/css/views/dialogs/_VerifyEMailDialog.pcss

@@ -0,0 +1,35 @@
+/*
+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.
+*/
+
+.mx_VerifyEMailDialog {
+    .mx_Dialog {
+        color: $primary-content;
+        font-size: 14px;
+        padding: 16px;
+        text-align: center;
+        width: 485px;
+
+        h1 {
+            font-size: $font-24px;
+            font-weight: 600;
+        }
+
+        .mx_VerifyEMailDialog_text-light {
+            color: $secondary-content;
+            line-height: 20px;
+        }
+    }
+}

res/css/views/elements/_AccessibleButton.pcss

@@ -24,6 +24,7 @@ limitations under the License.
         &.mx_AccessibleButton_kind_primary_outline,
         &.mx_AccessibleButton_kind_primary_sm,
         &.mx_AccessibleButton_kind_link,
+        &.mx_AccessibleButton_kind_link_accent,
         &.mx_AccessibleButton_kind_link_inline,
         &.mx_AccessibleButton_kind_danger_inline,
         &.mx_AccessibleButton_kind_content_inline,

src/PasswordReset.ts

@@ -19,6 +19,8 @@ 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.
  *
@@ -29,9 +31,10 @@ import { _t } from './languageHandler';
 export default class PasswordReset {
     private client: MatrixClient;
     private clientSecret: string;
-    private password: string;
-    private sessionId: string;
-    private logoutDevices: boolean;
+    private password = "";
+    private sessionId = "";
+    private logoutDevices = false;
+    private sendAttempt = 0;
 
     /**
      * Configure the endpoints for password resetting.
@@ -54,14 +57,40 @@ export default class PasswordReset {
      * @param {boolean} logoutDevices Should all devices be signed out after the reset? Defaults to `true`.
      * @return {Promise} Resolves when the email has been sent. Then call checkEmailLinkClicked().
      */
-    public resetPassword(
+    public async resetPassword(
         emailAddress: string,
         newPassword: string,
         logoutDevices = true,
     ): Promise<IRequestTokenResponse> {
         this.password = newPassword;
         this.logoutDevices = logoutDevices;
-        return this.client.requestPasswordEmailToken(emailAddress, this.clientSecret, 1).then((res) => {
+        this.sendAttempt++;
+
+        try {
+            const result = await this.client.requestPasswordEmailToken(
+                emailAddress,
+                this.clientSecret,
+                this.sendAttempt,
+            );
+            this.sessionId = result.sid;
+            return result;
+        } catch (err: any) {
+            if (err.errcode === 'M_THREEPID_NOT_FOUND') {
+                err.message = _t('This email address was not found');
+            } else if (err.httpStatus) {
+                err.message = err.message + ` (Status ${err.httpStatus})`;
+            }
+            throw err;
+        }
+    }
+
+    /**
+     * Request a password reset token.
+     * This will trigger a side-effect of sending an email to the provided email address.
+     */
+    public requestResetToken(emailAddress: string): Promise<IRequestTokenResponse> {
+        this.sendAttempt++;
+        return this.client.requestPasswordEmailToken(emailAddress, this.clientSecret, this.sendAttempt).then((res) => {
             this.sessionId = res.sid;
             return res;
         }, function(err) {
@@ -74,6 +103,29 @@ export default class PasswordReset {
         });
     }
 
+    public async setNewPassword(password: string): Promise<void> {
+        this.password = password;
+        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(() => {
+                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.
@@ -98,7 +150,7 @@ export default class PasswordReset {
                 threepid_creds: creds,
                 threepidCreds: creds,
             }, this.password, this.logoutDevices);
-        } catch (err) {
+        } catch (err: any) {
             if (err.httpStatus === 401) {
                 err.message = _t('Failed to verify email address: make sure you clicked the link in the email');
             } else if (err.httpStatus === 404) {