New password reset flow (#9581)
This commit is contained in:
Michael Weimann
GitHub
parent
3f74ac37e8
commit
e5ce6d7800
23 changed files with 1163 additions and 362 deletions
|
|
@ -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";
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
25
res/css/structures/_ErrorMessage.pcss
Normal file
25
res/css/structures/_ErrorMessage.pcss
Normal file
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
35
res/css/views/dialogs/_VerifyEMailDialog.pcss
Normal file
35
res/css/views/dialogs/_VerifyEMailDialog.pcss
Normal file
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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,
|
||||
|
|
|
|||
3
res/img/element-icons/Checkbox.svg
Normal file
3
res/img/element-icons/Checkbox.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M5.0918 17.0489L11.6069 23.7576L26.91 8" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 243 B |
3
res/img/element-icons/Email-icon.svg
Normal file
3
res/img/element-icons/Email-icon.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="40" height="29" viewBox="0 0 40 29" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M0.260962 2.57584L18.9049 21.1615C19.5449 21.7995 20.5805 21.7995 21.2205 21.1615L39.7726 2.66735C39.9199 3.08419 40 3.53274 40 4V25C40 27.2091 38.2091 29 36 29H4C1.79086 29 0 27.2091 0 25V4C0 3.49835 0.0923447 3.01827 0.260962 2.57584ZM2.58227 0.258515C3.02293 0.0914515 3.50079 0 4 0H36C36.5334 0 37.0424 0.104395 37.5077 0.293868L20.0627 17.6843L2.58227 0.258515Z" fill="#737D8C"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 537 B |
|
|
@ -1,3 +1 @@
|
|||
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M15.1113 2.6665C11.1839 2.6665 8.00016 5.85026 8.00016 9.77762V13.3332L7.3335 13.3332C6.22893 13.3332 5.3335 14.2286 5.3335 15.3332V27.3332C5.3335 28.4377 6.22893 29.3332 7.3335 29.3332H24.6668C25.7714 29.3332 26.6668 28.4377 26.6668 27.3332V15.3332C26.6668 14.2286 25.7714 13.3332 24.6668 13.3332L24.0002 13.3332V9.77762C24.0002 5.85026 20.8164 2.6665 16.8891 2.6665H15.1113ZM20.4446 13.3332V9.77762C20.4446 7.81394 18.8527 6.22206 16.8891 6.22206H15.1113C13.1476 6.22206 11.5557 7.81394 11.5557 9.77762V13.3332H20.4446Z" fill="#8E99A4"/>
|
||||
</svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="21.333" height="26.667" fill="none"><path fill="#8e99a4" fill-rule="evenodd" d="M9.778 0a7.111 7.111 0 0 0-7.111 7.111v3.556H2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h17.333a2 2 0 0 0 2-2v-12a2 2 0 0 0-2-2h-.666V7.11A7.111 7.111 0 0 0 11.555 0Zm5.333 10.667V7.11a3.556 3.556 0 0 0-3.556-3.555H9.778A3.556 3.556 0 0 0 6.222 7.11v3.556Z" clip-rule="evenodd"/></svg>
|
||||
|
Before Width: | Height: | Size: 692 B After Width: | Height: | Size: 401 B |
|
|
@ -1,3 +1,7 @@
|
|||
<svg width="18" height="19" viewBox="0 0 18 19" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M4.58365 3.90848C5.79757 2.94852 7.33285 2.375 9 2.375C12.6817 2.375 15.7112 5.1675 16.086 8.75H17.6314C17.9253 8.75 18.1006 9.07792 17.9376 9.32274L15.6812 12.711C15.5355 12.9297 15.2145 12.9297 15.0688 12.711L12.8124 9.32274C12.6494 9.07792 12.8247 8.75 13.1186 8.75H14.5754C14.2088 5.99798 11.8523 3.875 9 3.875C7.68247 3.875 6.4726 4.32705 5.51407 5.08504C5.45221 5.13396 5.39899 5.17326 5.36001 5.20114C5.34047 5.21513 5.32433 5.22637 5.31229 5.23463L5.29733 5.24482L5.29227 5.24821L5.29037 5.24948L5.28958 5.25L5.28923 5.25023L5.28906 5.25034L5.28898 5.2504L4.875 4.625L5.2889 5.25045C4.94347 5.47904 4.47814 5.38433 4.24955 5.0389C4.02136 4.69408 4.11534 4.22977 4.45929 4.00075L4.4633 3.99802C4.46789 3.99487 4.47605 3.9892 4.48719 3.98123C4.5096 3.9652 4.5433 3.94038 4.58365 3.90848ZM3.42456 10.25H4.88138C5.1753 10.25 5.35061 9.92208 5.18758 9.67726L2.93119 6.28905C2.78553 6.07032 2.46447 6.07032 2.31881 6.28905L0.0624241 9.67726C-0.100613 9.92207 0.0746987 10.25 0.368618 10.25H1.914C2.28878 13.8325 5.31828 16.625 9 16.625C10.7415 16.625 12.3388 15.9992 13.5764 14.9611C13.8938 14.6949 13.9353 14.2219 13.6691 13.9045C13.4029 13.5872 12.9298 13.5457 12.6125 13.8119C11.6349 14.6319 10.376 15.125 9 15.125C6.14769 15.125 3.79123 13.002 3.42456 10.25Z" fill="currentColor"/>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="17" height="16" fill="none">
|
||||
<path
|
||||
fill="currentColor"
|
||||
fill-rule="evenodd"
|
||||
d="M4.523 2.964a6.418 6.418 0 0 1 10.36 4.369h1.29c.26 0 .416.292.272.51l-2.006 3.011a.327.327 0 0 1-.544 0l-2.006-3.012a.327.327 0 0 1 .272-.509h1.21a4.918 4.918 0 0 0-7.918-3.192 3.684 3.684 0 0 1-.184.136l-.014.01-.004.003-.002.001h-.001v.001l-.415-.625.414.625a.75.75 0 0 1-.83-1.25l.003-.001.02-.014c.02-.014.048-.035.083-.063Zm-.895 5.703H4.84a.327.327 0 0 0 .272-.51L3.106 5.146a.327.327 0 0 0-.545 0L.555 8.157c-.144.218.011.51.273.51h1.29a6.418 6.418 0 0 0 10.503 4.251.75.75 0 0 0-.963-1.15 4.918 4.918 0 0 1-8.03-3.102Z"
|
||||
clip-rule="evenodd"/>
|
||||
</svg>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 1.4 KiB After Width: | Height: | Size: 703 B |
Loading…
Add table
Add a link
Reference in a new issue