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

Commit 3c3df11

Browse files
hughnsturt2liveKerry
authored
Support for login + E2EE set up with QR (#9403)
* Support for login + E2EE set up with QR * Whitespace * Padding * Refactor of fetch * Whitespace * CSS whitespace * Add link to MSC3906 * Handle incorrect typing in MatrixClientPeg.get() * Use unstable class name * fix: use unstable class name * Use default fetch client instead * Update to revised function name * Refactor device manager panel and make it work with new sessions manager * Lint fix * Add missing interstitials and update wording * Linting * i18n * Lint * Use sensible sdk config name for fallback server * Improve error handling for QR code generation * Refactor feature availability logic * Hide device manager panel if no options available * Put sign in with QR behind lab setting * Reduce scope of PR to just showing code on existing device * i18n updates * Handle null features * Testing for LoginWithQRSection * Refactor to handle UIA * Imports * Reduce diff complexity * Remove unnecessary change * Remove unused styles * Support UIA * Tidy up * i18n * Remove additional unused parts of flow * Add extra instruction when showing QR code * Add getVersions to server mocks * Use proper colours for theme support * Test cases * Lint * Remove obsolete snapshot * Don't override error if already set * Remove unused var * Update src/components/views/settings/devices/LoginWithQRSection.tsx Co-authored-by: Travis Ralston <[email protected]> * Update src/components/views/auth/LoginWithQR.tsx Co-authored-by: Travis Ralston <[email protected]> * Update src/components/views/auth/LoginWithQR.tsx Co-authored-by: Travis Ralston <[email protected]> * Update src/components/views/auth/LoginWithQR.tsx Co-authored-by: Travis Ralston <[email protected]> * Update src/components/views/auth/LoginWithQR.tsx Co-authored-by: Travis Ralston <[email protected]> * Update src/components/views/auth/LoginWithQR.tsx Co-authored-by: Travis Ralston <[email protected]> * Update res/css/views/auth/_LoginWithQR.pcss Co-authored-by: Kerry <[email protected]> * Use spacing variables * Remove debug * Style + docs * preventDefault * Names of tests * Fixes for js-sdk refactor * Update snapshots to match test names * Refactor labs config to make deployment simpler * i18n * Unused imports * Typo * Stateless component * Whitespace * Use context not MatrixClientPeg * Add missing context * Type updates to match js-sdk * Wrap click handlers in useCallback * Update src/components/views/settings/DevicesPanel.tsx Co-authored-by: Travis Ralston <[email protected]> * Wait for DOM update instead of timeout * Add missing snapshot update from last commit * Remove void keyword in favour of then() clauses * test main paths in LoginWithQR Co-authored-by: Travis Ralston <[email protected]> Co-authored-by: Kerry <[email protected]>
1 parent e946674 commit 3c3df11

23 files changed

+1638
-12
lines changed

‎res/css/_components.pcss

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -96,6 +96,7 @@
9696
@import "./views/auth/_CountryDropdown.pcss";
9797
@import "./views/auth/_InteractiveAuthEntryComponents.pcss";
9898
@import "./views/auth/_LanguageSelector.pcss";
99+
@import "./views/auth/_LoginWithQR.pcss";
99100
@import "./views/auth/_PassphraseField.pcss";
100101
@import "./views/auth/_Welcome.pcss";
101102
@import "./views/avatars/_BaseAvatar.pcss";

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

Lines changed: 171 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,171 @@
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_LoginWithQRSection .mx_AccessibleButton {
18+
margin-right: $spacing-12;
19+
}
20+
21+
.mx_AuthPage .mx_LoginWithQR {
22+
.mx_AccessibleButton {
23+
display: block !important;
24+
}
25+
26+
.mx_AccessibleButton + .mx_AccessibleButton {
27+
margin-top: $spacing-8;
28+
}
29+
30+
.mx_LoginWithQR_separator {
31+
display: flex;
32+
align-items: center;
33+
text-align: center;
34+
35+
&::before, &::after {
36+
content: '';
37+
flex: 1;
38+
border-bottom: 1px solid $quinary-content;
39+
}
40+
41+
&:not(:empty) {
42+
&::before {
43+
margin-right: 1em;
44+
}
45+
&::after {
46+
margin-left: 1em;
47+
}
48+
}
49+
}
50+
51+
font-size: $font-15px;
52+
}
53+
54+
.mx_UserSettingsDialog .mx_LoginWithQR {
55+
.mx_AccessibleButton + .mx_AccessibleButton {
56+
margin-left: $spacing-12;
57+
}
58+
59+
font-size: $font-14px;
60+
61+
h1 {
62+
font-size: $font-24px;
63+
margin-bottom: 0;
64+
}
65+
66+
li {
67+
line-height: 1.8;
68+
}
69+
70+
.mx_QRCode {
71+
padding: $spacing-12 $spacing-40;
72+
margin: $spacing-28 0;
73+
}
74+
75+
.mx_LoginWithQR_buttons {
76+
text-align: center;
77+
}
78+
79+
.mx_LoginWithQR_qrWrapper {
80+
display: flex;
81+
}
82+
}
83+
84+
.mx_LoginWithQR {
85+
min-height: 350px;
86+
display: flex;
87+
flex-direction: column;
88+
89+
.mx_LoginWithQR_centreTitle {
90+
h1 {
91+
text-align: centre;
92+
}
93+
}
94+
95+
h1 > svg {
96+
&.normal {
97+
color: $secondary-content;
98+
}
99+
&.error {
100+
color: $alert;
101+
}
102+
&.success {
103+
color: $accent;
104+
}
105+
height: 1.3em;
106+
margin-right: $spacing-8;
107+
vertical-align: middle;
108+
}
109+
110+
.mx_LoginWithQR_confirmationDigits {
111+
text-align: center;
112+
margin: $spacing-48 auto;
113+
font-weight: 600;
114+
font-size: $font-24px;
115+
color: $primary-content;
116+
}
117+
118+
.mx_LoginWithQR_confirmationAlert {
119+
border: 1px solid $quaternary-content;
120+
border-radius: $spacing-8;
121+
padding: $spacing-8;
122+
line-height: 1.5em;
123+
display: flex;
124+
125+
svg {
126+
height: 30px;
127+
}
128+
}
129+
130+
.mx_LoginWithQR_separator {
131+
margin: 1em 0;
132+
}
133+
134+
ol {
135+
list-style-position: inside;
136+
padding-inline-start: 0;
137+
138+
li::marker {
139+
color: $accent;
140+
}
141+
}
142+
143+
.mx_LoginWithQR_BackButton {
144+
height: $spacing-12;
145+
margin-bottom: $spacing-24;
146+
svg {
147+
height: 100%;
148+
}
149+
}
150+
151+
.mx_LoginWithQR_main {
152+
display: flex;
153+
flex-direction: column;
154+
flex-grow: 1;
155+
}
156+
157+
.mx_QRCode {
158+
border: 1px solid $quinary-content;
159+
border-radius: $spacing-8;
160+
display: flex;
161+
justify-content: center;
162+
}
163+
164+
.mx_LoginWithQR_spinner {
165+
flex-grow: 1;
166+
display: flex;
167+
justify-content: center;
168+
align-items: center;
169+
height: 100%;
170+
}
171+
}

‎res/img/element-icons/back.svg

Lines changed: 3 additions & 0 deletions
Loading

‎res/img/element-icons/devices.svg

Lines changed: 11 additions & 0 deletions
Loading

‎res/img/element-icons/qrcode.svg

Lines changed: 4 additions & 0 deletions
Loading

0 commit comments

Comments
 (0)