Skip to content
This repository was archived by the owner on Sep 11, 2024. It is now read-only.

Commit 3237b6f

Browse files
committed
Start new login flow implementation
1 parent 663c7e0 commit 3237b6f

23 files changed

+716
-270
lines changed

res/css/_components.pcss

+2
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,7 @@
4949
@import "./structures/_BackdropPanel.pcss";
5050
@import "./structures/_CompatibilityPage.pcss";
5151
@import "./structures/_ContextualMenu.pcss";
52+
@import "./structures/_ErrorMessage.pcss";
5253
@import "./structures/_FileDropTarget.pcss";
5354
@import "./structures/_FilePanel.pcss";
5455
@import "./structures/_GenericDropdownMenu.pcss";
@@ -157,6 +158,7 @@
157158
@import "./views/dialogs/_UntrustedDeviceDialog.pcss";
158159
@import "./views/dialogs/_UploadConfirmDialog.pcss";
159160
@import "./views/dialogs/_UserSettingsDialog.pcss";
161+
@import "./views/dialogs/_VerifyEMailDialog.pcss";
160162
@import "./views/dialogs/_WidgetCapabilitiesPromptDialog.pcss";
161163
@import "./views/dialogs/security/_AccessSecretStorageDialog.pcss";
162164
@import "./views/dialogs/security/_CreateCrossSigningDialog.pcss";

res/css/compound/_Icon.pcss

+9
Original file line numberDiff line numberDiff line change
@@ -30,3 +30,12 @@ limitations under the License.
3030
flex: 0 0 16px;
3131
width: 16px;
3232
}
33+
34+
.mx_Icon_32 {
35+
height: 32px;
36+
width: 32px;
37+
}
38+
39+
.mx_Icon_accent {
40+
color: $accent;
41+
}

res/css/structures/_ErrorMessage.pcss

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
/*
2+
Copyright 2022 The Matrix.org Foundation C.I.C.
3+
4+
Licensed under the Apache License, Version 2.0 (the "License");
5+
you may not use this file except in compliance with the License.
6+
You may obtain a copy of the License at
7+
8+
http://www.apache.org/licenses/LICENSE-2.0
9+
10+
Unless required by applicable law or agreed to in writing, software
11+
distributed under the License is distributed on an "AS IS" BASIS,
12+
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13+
See the License for the specific language governing permissions and
14+
limitations under the License.
15+
*/
16+
17+
.mx_ErrorMessage {
18+
align-items: center;
19+
color: $alert;
20+
display: flex;
21+
font-size: $font-12px;
22+
gap: $spacing-8;
23+
line-height: 1.2em;
24+
min-height: 2.4em;
25+
}

res/css/structures/auth/_Login.pcss

+3-1
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,8 @@ limitations under the License.
1717

1818
.mx_Login_submit {
1919
@mixin mx_DialogButton;
20+
font-size: 15px;
21+
font-weight: 600;
2022
width: 100%;
2123
margin-top: 24px;
2224
margin-bottom: 24px;
@@ -87,7 +89,7 @@ limitations under the License.
8789

8890
div.mx_AccessibleButton_kind_link.mx_Login_forgot {
8991
display: block;
90-
margin: 0 auto;
92+
margin-bottom: $spacing-16;
9193

9294
&.mx_AccessibleButton_disabled {
9395
cursor: not-allowed;

res/css/views/auth/_AuthBody.pcss

+74-4
Original file line numberDiff line numberDiff line change
@@ -17,12 +17,17 @@ limitations under the License.
1717

1818
.mx_AuthBody {
1919
width: 500px;
20-
font-size: $font-12px;
21-
color: $authpage-secondary-color;
20+
font-size: $font-14px;
21+
color: $primary-content;
2222
background-color: $background;
2323
border-radius: 0 4px 4px 0;
24-
padding: 25px 60px;
24+
padding: 50px 32px;
2525
box-sizing: border-box;
26+
min-height: 600px;
27+
28+
b {
29+
font-weight: 600;
30+
}
2631

2732
&.mx_AuthBody_flex {
2833
display: flex;
@@ -32,7 +37,8 @@ limitations under the License.
3237
h1 {
3338
font-size: $font-24px;
3439
font-weight: $font-semi-bold;
35-
margin-top: 8px;
40+
margin-bottom: $spacing-20;
41+
margin-top: $spacing-24;
3642
color: $authpage-primary-color;
3743
}
3844

@@ -52,6 +58,23 @@ limitations under the License.
5258
@mixin mx_Dialog_link;
5359
}
5460

61+
fieldset {
62+
display: block;
63+
}
64+
65+
.mx_AuthBody_icon {
66+
width: 40px;
67+
}
68+
69+
.mx_AuthBody_lockIcon {
70+
height: 29px;
71+
}
72+
73+
.mx_AuthBody_text {
74+
margin-bottom: $spacing-48;
75+
margin-top: 0;
76+
}
77+
5578
input[type="text"],
5679
input[type="password"] {
5780
color: $authpage-primary-color;
@@ -76,6 +99,16 @@ limitations under the License.
7699
color: $alert;
77100
}
78101

102+
.mx_Login_submit {
103+
height: 33px;
104+
margin-top: $spacing-16;
105+
}
106+
107+
.mx_ErrorMessage {
108+
margin-bottom: 12px;
109+
margin-top: 2px;
110+
}
111+
79112
.mx_Field input {
80113
box-sizing: border-box;
81114
}
@@ -101,6 +134,43 @@ limitations under the License.
101134
}
102135
}
103136

137+
.mx_AuthBody_did-not-receive {
138+
align-items: center;
139+
color: $secondary-content;
140+
display: flex;
141+
gap: $spacing-8;
142+
margin-bottom: 10px;
143+
margin-top: $spacing-24;
144+
}
145+
146+
.mx_AuthBody_did-not-receive--centered {
147+
justify-content: center;
148+
}
149+
150+
.mx_AuthBody_resend-button {
151+
align-items: center;
152+
border-radius: 8px;
153+
color: $accent;
154+
display: flex;
155+
gap: $spacing-4;
156+
padding: 4px;
157+
158+
&:hover {
159+
background-color: $system;
160+
}
161+
}
162+
163+
.mx_AuthBody_emailPromptIcon {
164+
width: 57px;
165+
}
166+
167+
.mx_AuthBody_emailPromptIcon--shifted {
168+
margin-bottom: -17px; // Prevent layout jump by relative positioning.
169+
position: relative;
170+
top: -17px; // This icon is higher than the other icons. Shift up to prevent icon jumping.
171+
width: 57px;
172+
}
173+
104174
.mx_AuthBody_fieldRow {
105175
display: flex;
106176
margin-bottom: 10px;
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
/*
2+
Copyright 2022 The Matrix.org Foundation C.I.C.
3+
4+
Licensed under the Apache License, Version 2.0 (the "License");
5+
you may not use this file except in compliance with the License.
6+
You may obtain a copy of the License at
7+
8+
http://www.apache.org/licenses/LICENSE-2.0
9+
10+
Unless required by applicable law or agreed to in writing, software
11+
distributed under the License is distributed on an "AS IS" BASIS,
12+
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13+
See the License for the specific language governing permissions and
14+
limitations under the License.
15+
*/
16+
17+
.mx_VerifyEMailDialog {
18+
.mx_Dialog {
19+
color: $primary-content;
20+
font-size: 14px;
21+
padding: 16px;
22+
text-align: center;
23+
width: 485px;
24+
25+
h1 {
26+
font-size: $font-24px;
27+
font-weight: 600;
28+
}
29+
30+
.mx_VerifyEMailDialog_text-light {
31+
color: $secondary-content;
32+
line-height: 20px;
33+
}
34+
}
35+
}

res/css/views/elements/_AccessibleButton.pcss

+1
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@ limitations under the License.
2424
&.mx_AccessibleButton_kind_primary_outline,
2525
&.mx_AccessibleButton_kind_primary_sm,
2626
&.mx_AccessibleButton_kind_link,
27+
&.mx_AccessibleButton_kind_link_accent,
2728
&.mx_AccessibleButton_kind_link_inline,
2829
&.mx_AccessibleButton_kind_danger_inline,
2930
&.mx_AccessibleButton_kind_content_inline,

res/css/views/elements/_Field.pcss

-2
Original file line numberDiff line numberDiff line change
@@ -174,8 +174,6 @@ limitations under the License.
174174
}
175175

176176
.mx_Field_tooltip {
177-
margin-top: -12px;
178-
margin-left: 4px;
179177
width: 200px;
180178
}
181179

res/css/views/elements/_Tooltip.pcss

+1-1
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@ limitations under the License.
3838
.mx_Tooltip_chevron {
3939
position: absolute;
4040
left: -7px;
41-
top: 10px;
41+
top: calc(50% - 6px);
4242
width: 0;
4343
height: 0;
4444
border-top: 7px solid transparent;

res/img/element-icons/Checkbox.svg

+3
Loading

res/img/element-icons/Email-icon.svg

+3
Loading

res/img/element-icons/lock.svg

+1-3
Loading

res/img/element-icons/retry.svg

+6-2
Loading

src/PasswordReset.ts

+47-4
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,8 @@ import { createClient, IRequestTokenResponse, MatrixClient } from 'matrix-js-sdk
1919

2020
import { _t } from './languageHandler';
2121

22+
const CHECK_EMAIL_VERIFIED_POLL_INTERVAL = 2000;
23+
2224
/**
2325
* Allows a user to reset their password on a homeserver.
2426
*
@@ -29,9 +31,9 @@ import { _t } from './languageHandler';
2931
export default class PasswordReset {
3032
private client: MatrixClient;
3133
private clientSecret: string;
32-
private password: string;
33-
private sessionId: string;
34-
private logoutDevices: boolean;
34+
private password = "";
35+
private sessionId = "";
36+
private logoutDevices = false;
3537

3638
/**
3739
* Configure the endpoints for password resetting.
@@ -74,6 +76,47 @@ export default class PasswordReset {
7476
});
7577
}
7678

79+
/**
80+
* Request a password reset token.
81+
* This will trigger a side-effect of sending an email to the provided email address.
82+
*/
83+
public requestResetToken(emailAddress: string): Promise<IRequestTokenResponse> {
84+
return this.client.requestPasswordEmailToken(emailAddress, this.clientSecret, 1).then((res) => {
85+
this.sessionId = res.sid;
86+
return res;
87+
}, function(err) {
88+
if (err.errcode === 'M_THREEPID_NOT_FOUND') {
89+
err.message = _t('This email address was not found');
90+
} else if (err.httpStatus) {
91+
err.message = err.message + ` (Status ${err.httpStatus})`;
92+
}
93+
throw err;
94+
});
95+
}
96+
97+
public async setNewPassword(password: string): Promise<void> {
98+
this.password = password;
99+
await this.checkEmailLinkClicked();
100+
}
101+
102+
public async retrySetNewPassword(password: string): Promise<void> {
103+
this.password = password;
104+
return new Promise((resolve) => {
105+
this.tryCheckEmailLinkClicked(resolve);
106+
});
107+
}
108+
109+
private tryCheckEmailLinkClicked(resolve: Function): void {
110+
this.checkEmailLinkClicked()
111+
.then(() => resolve())
112+
.catch(() => {
113+
setTimeout(
114+
() => this.tryCheckEmailLinkClicked(resolve),
115+
CHECK_EMAIL_VERIFIED_POLL_INTERVAL,
116+
);
117+
});
118+
}
119+
77120
/**
78121
* Checks if the email link has been clicked by attempting to change the password
79122
* for the mxid linked to the email.
@@ -98,7 +141,7 @@ export default class PasswordReset {
98141
threepid_creds: creds,
99142
threepidCreds: creds,
100143
}, this.password, this.logoutDevices);
101-
} catch (err) {
144+
} catch (err: any) {
102145
if (err.httpStatus === 401) {
103146
err.message = _t('Failed to verify email address: make sure you clicked the link in the email');
104147
} else if (err.httpStatus === 404) {
+40
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
/*
2+
Copyright 2022 The Matrix.org Foundation C.I.C.
3+
4+
Licensed under the Apache License, Version 2.0 (the "License");
5+
you may not use this file except in compliance with the License.
6+
You may obtain a copy of the License at
7+
8+
http://www.apache.org/licenses/LICENSE-2.0
9+
10+
Unless required by applicable law or agreed to in writing, software
11+
distributed under the License is distributed on an "AS IS" BASIS,
12+
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13+
See the License for the specific language governing permissions and
14+
limitations under the License.
15+
*/
16+
17+
import React from 'react';
18+
19+
import { Icon as WarningBadgeIcon } from "../../../res/img/element-icons/warning-badge.svg";
20+
21+
interface ErrorMessageProps {
22+
message: string | null;
23+
}
24+
25+
/**
26+
* Error message component.
27+
* Reserves two lines to display errors to prevent layout shifts when the error pops up.
28+
*/
29+
export const ErrorMessage: React.FC<ErrorMessageProps> = ({
30+
message,
31+
}) => {
32+
const icon = message
33+
? <WarningBadgeIcon className="mx_Icon mx_Icon_16" />
34+
: null;
35+
36+
return <div className="mx_ErrorMessage">
37+
{ icon }
38+
{ message }
39+
</div>;
40+
};

0 commit comments

Comments
 (0)