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

Commit 641a20c

Browse files
t3chguyt3chguy
authored
Prepare for OIDC QR Login PR (#12463)
* Move LoginWithQRSection to the top of the settings tab Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Refactor LoginWithQRSection to a Functional Component Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Extract LoginWithQR types Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update LoginWithQRFlow styling & copy Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Re-add missing buttons and update snapshots Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Use compound spacings Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --------- Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
1 parent 1c79bbb commit 641a20c

File tree

10 files changed

+594
-385
lines changed

10 files changed

+594
-385
lines changed

‎res/css/views/auth/_LoginWithQR.pcss‎

Lines changed: 90 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -32,55 +32,25 @@ limitations under the License.
3232
margin-top: $spacing-8;
3333
}
3434

35-
.mx_LoginWithQR_separator {
36-
display: flex;
37-
align-items: center;
38-
text-align: center;
39-
40-
&::before,
41-
&::after {
42-
content: "";
43-
flex: 1;
44-
border-bottom: 1px solid $quinary-content;
45-
}
46-
47-
&:not(:empty) {
48-
&::before {
49-
margin-right: 1em;
50-
}
51-
&::after {
52-
margin-left: 1em;
53-
}
54-
}
55-
}
56-
5735
font-size: $font-15px;
5836
}
5937

6038
.mx_UserSettingsDialog .mx_LoginWithQR {
61-
.mx_AccessibleButton + .mx_AccessibleButton {
62-
margin-left: $spacing-12;
63-
}
64-
6539
font: var(--cpd-font-body-md-regular);
6640

6741
h1 {
6842
font-size: $font-24px;
6943
margin-bottom: 0;
7044
}
7145

72-
li {
73-
line-height: 1.8;
46+
h2 {
47+
margin-top: $spacing-24;
7448
}
7549

7650
.mx_QRCode {
7751
margin: $spacing-28 0;
7852
}
7953

80-
.mx_LoginWithQR_buttons {
81-
text-align: center;
82-
}
83-
8454
.mx_LoginWithQR_qrWrapper {
8555
display: flex;
8656
}
@@ -91,12 +61,6 @@ limitations under the License.
9161
display: flex;
9262
flex-direction: column;
9363

94-
.mx_LoginWithQR_centreTitle {
95-
h1 {
96-
text-align: center;
97-
}
98-
}
99-
10064
h1 > svg {
10165
&.normal {
10266
color: $secondary-content;
@@ -137,11 +101,69 @@ limitations under the License.
137101
}
138102

139103
ol {
140-
list-style-position: inside;
141104
padding-inline-start: 0;
105+
list-style: none; /* list markers do not support the outlined number styling we need */
106+
107+
li {
108+
position: relative;
109+
padding-left: var(--cpd-space-7x);
110+
color: 1px solid $input-placeholder;
111+
margin-bottom: var(--cpd-space-4x);
112+
line-height: 20px;
113+
text-align: initial;
114+
}
142115

143-
li::marker {
144-
color: $accent;
116+
/* Circled number list item marker */
117+
li::before {
118+
content: counter(list-item);
119+
position: absolute;
120+
left: 0;
121+
display: inline-block;
122+
width: 20px;
123+
height: 20px;
124+
line-height: 20px;
125+
border-radius: 50%;
126+
border: 1px solid $input-placeholder;
127+
box-sizing: border-box;
128+
text-align: center;
129+
}
130+
}
131+
132+
label[for="mx_LoginWithQR_checkCode"] {
133+
margin-top: var(--cpd-space-6x);
134+
color: var(--cpd-color-text-primary);
135+
margin-bottom: var(--cpd-space-1x);
136+
}
137+
138+
.mx_LoginWithQR_icon {
139+
width: 56px;
140+
height: 56px;
141+
border-radius: 8px;
142+
box-sizing: border-box;
143+
padding: var(--cpd-space-3x);
144+
gap: 10px;
145+
146+
background-color: var(--cpd-color-bg-success-subtle);
147+
svg {
148+
color: var(--cpd-color-icon-success-primary);
149+
}
150+
151+
&.mx_LoginWithQR_icon--critical {
152+
background-color: var(--cpd-color-bg-critical-subtle);
153+
svg {
154+
color: var(--cpd-color-icon-critical-primary);
155+
}
156+
}
157+
}
158+
159+
.mx_LoginWithQR_checkCode_input {
160+
margin-bottom: var(--cpd-space-1x);
161+
text-align: initial;
162+
163+
input {
164+
/* Workaround for one of the input rules in _common.pcss being not specific enough */
165+
padding: 0;
166+
padding-inline-start: calc(40px / 2 - (1ch / 2));
145167
}
146168
}
147169

@@ -164,13 +186,39 @@ limitations under the License.
164186

165187
.mx_LoginWithQR_breadcrumbs {
166188
font-size: $font-13px;
167-
color: var(--cpd-color-text-secondary);
189+
color: $secondary-content;
168190
}
169191

170192
.mx_LoginWithQR_main {
171193
display: flex;
172194
flex-direction: column;
173195
flex-grow: 1;
196+
align-items: center;
197+
color: $primary-content;
198+
text-align: center;
199+
200+
p {
201+
color: $secondary-content;
202+
}
203+
}
204+
205+
&.mx_LoginWithQR_error .mx_LoginWithQR_main {
206+
max-width: 400px;
207+
margin: 0 auto;
208+
}
209+
210+
.mx_LoginWithQR_buttons {
211+
display: flex;
212+
flex-direction: column;
213+
align-items: center;
214+
gap: $spacing-16;
215+
margin-top: var(--cpd-space-6x);
216+
217+
.mx_AccessibleButton {
218+
width: 300px;
219+
height: 48px;
220+
box-sizing: border-box;
221+
}
174222
}
175223

176224
.mx_QRCode {

‎src/components/views/auth/LoginWithQR-types.ts‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
/*
2+
Copyright 2024 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+
/**
18+
* The intention of this enum is to have a mode that scans a QR code instead of generating one.
19+
*/
20+
export enum Mode {
21+
/**
22+
* A QR code with be generated and shown
23+
*/
24+
Show = "show",
25+
}
26+
27+
export enum Phase {
28+
Loading,
29+
ShowingQR,
30+
Connecting,
31+
Connected,
32+
WaitingForDevice,
33+
Verifying,
34+
Error,
35+
}
36+
37+
export enum Click {
38+
Cancel,
39+
Decline,
40+
Approve,
41+
TryAgain,
42+
Back,
43+
}

‎src/components/views/auth/LoginWithQR.tsx‎

Lines changed: 1 addition & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -24,34 +24,7 @@ import { HTTPError, MatrixClient } from "matrix-js-sdk/src/matrix";
2424
import { _t } from "../../../languageHandler";
2525
import { wrapRequestWithDialog } from "../../../utils/UserInteractiveAuth";
2626
import LoginWithQRFlow from "./LoginWithQRFlow";
27-
28-
/**
29-
* The intention of this enum is to have a mode that scans a QR code instead of generating one.
30-
*/
31-
export enum Mode {
32-
/**
33-
* A QR code with be generated and shown
34-
*/
35-
Show = "show",
36-
}
37-
38-
export enum Phase {
39-
Loading,
40-
ShowingQR,
41-
Connecting,
42-
Connected,
43-
WaitingForDevice,
44-
Verifying,
45-
Error,
46-
}
47-
48-
export enum Click {
49-
Cancel,
50-
Decline,
51-
Approve,
52-
TryAgain,
53-
Back,
54-
}
27+
import { Click, Mode, Phase } from "./LoginWithQR-types";
5528

5629
interface IProps {
5730
client: MatrixClient;

0 commit comments

Comments
 (0)