New password reset flow (#9581)

Author: weeman1337

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,