Skip to content

Commit a5b2611

Browse files
sandhosesandhose
committed
Split the cross-signing reset pages & adapt the wording
1 parent 1fedb3c commit a5b2611

12 files changed

+393
-254
lines changed

‎frontend/locales/en.json‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -186,23 +186,24 @@
186186
}
187187
},
188188
"reset_cross_signing": {
189-
"button": "Reset identity",
190189
"cancelled": {
191190
"description_1": "You can close this window and go back to the app to continue.",
192191
"description_2": "If you're signed out everywhere and don't remember your recovery code, you'll still need to reset your identity.",
193192
"heading": "Identity reset cancelled."
194193
},
195194
"description": "If you're not signed in to any other devices and you've lost your recovery key, then you'll need to reset your identity to continue using the app.",
196195
"effect_list": {
197-
"negative_1": "You will lose your existing message history",
198-
"negative_2": "You will need to verify all your existing devices and contacts again",
196+
"neutral_1": "You will lose any message history that's stored only on the server",
197+
"neutral_2": "You will need to verify all your existing devices and contacts again",
199198
"positive_1": "Your account details, contacts, preferences, and chat list will be kept"
200199
},
201200
"failure": {
202201
"description": "This might be a temporary problem, so please try again later. If the problem persists, please contact your server administrator.",
203202
"heading": "Failed to allow crypto identity reset"
204203
},
204+
"finish_reset": "Finish reset",
205205
"heading": "Reset your identity in case you can't confirm another way",
206+
"start_reset": "Start reset",
206207
"success": {
207208
"description": "The identity reset has been approved for the next {{minutes}} minutes. You can close this window and go back to the app to continue.",
208209
"heading": "Identity reset successfully. Go back to the app to finish the process."

‎frontend/src/components/ButtonLink.module.css‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
/* Copyright 2024 New Vector Ltd.
2+
*
3+
* SPDX-License-Identifier: AGPL-3.0-only
4+
* Please see LICENSE in the repository root for full details.
5+
*/
6+
7+
/* The weird selector is to have higher specificity than compound-web's button-link */
8+
a.button-link[href] {
9+
/** This is to undo the following rule in compound-web:
10+
* https://github.com/element-hq/compound-web/blob/6ccb4b6049f3bc8e9739d9452c850ed3c7de49f9/src/components/Button/Button.module.css#L31-L34
11+
*/
12+
inline-size: initial;
13+
}

‎frontend/src/components/ButtonLink.tsx‎

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,22 +6,31 @@
66

77
import { createLink } from "@tanstack/react-router";
88
import { Button } from "@vector-im/compound-web";
9+
import cx from "classnames";
910
import { type PropsWithChildren, forwardRef } from "react";
11+
import styles from "./ButtonLink.module.css";
1012

1113
type Props = {
1214
kind?: "primary" | "secondary" | "tertiary";
1315
size?: "sm" | "lg";
1416
Icon?: React.ComponentType<React.SVGAttributes<SVGElement>>;
1517
destructive?: boolean;
1618
disabled?: boolean;
19+
className?: string;
1720
} & React.AnchorHTMLAttributes<HTMLAnchorElement>;
1821

1922
export const ButtonLink = createLink(
2023
forwardRef<HTMLAnchorElement, PropsWithChildren<Props>>(
21-
({ children, ...props }, ref) => {
24+
({ children, className, ...props }, ref) => {
2225
const disabled = !!props.disabled || !!props["aria-disabled"] || false;
2326
return (
24-
<Button as="a" {...props} disabled={disabled} ref={ref}>
27+
<Button
28+
as="a"
29+
{...props}
30+
className={cx(styles.buttonLink, className)}
31+
disabled={disabled}
32+
ref={ref}
33+
>
2534
{children}
2635
</Button>
2736
);

‎frontend/src/components/VisualList/VisualList.module.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414
}
1515

1616
.item {
17-
background: var(--cpd-color-bg-subtle-secondary);
17+
background: var(--cpd-color-bg-action-secondary-hovered);
1818
padding: var(--cpd-space-3x) var(--cpd-space-5x);
1919
display: flex;
2020
align-items: center;

‎frontend/src/components/VisualList/VisualList.tsx‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -30,9 +30,7 @@ export const VisualListItem: FC<{
3030
return (
3131
<li className={styles.item}>
3232
<Icon color={iconColor ?? "var(--cpd-color-icon-tertiary)"} />
33-
<Text size="md" weight="medium">
34-
{label}
35-
</Text>
33+
<Text size="md">{label}</Text>
3634
</li>
3735
);
3836
};

‎frontend/src/routeTree.gen.ts‎

Lines changed: 100 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,10 @@ import { createFileRoute } from '@tanstack/react-router'
1515
import { Route as rootRoute } from './routes/__root'
1616
import { Route as ResetCrossSigningImport } from './routes/reset-cross-signing'
1717
import { Route as AccountImport } from './routes/_account'
18+
import { Route as ResetCrossSigningIndexImport } from './routes/reset-cross-signing.index'
1819
import { Route as AccountIndexImport } from './routes/_account.index'
20+
import { Route as ResetCrossSigningSuccessImport } from './routes/reset-cross-signing.success'
21+
import { Route as ResetCrossSigningCancelledImport } from './routes/reset-cross-signing.cancelled'
1922
import { Route as DevicesSplatImport } from './routes/devices.$'
2023
import { Route as ClientsIdImport } from './routes/clients.$id'
2124
import { Route as PasswordRecoveryIndexImport } from './routes/password.recovery.index'
@@ -37,15 +40,19 @@ const ResetCrossSigningRoute = ResetCrossSigningImport.update({
3740
id: '/reset-cross-signing',
3841
path: '/reset-cross-signing',
3942
getParentRoute: () => rootRoute,
40-
} as any).lazy(() =>
41-
import('./routes/reset-cross-signing.lazy').then((d) => d.Route),
42-
)
43+
} as any)
4344

4445
const AccountRoute = AccountImport.update({
4546
id: '/_account',
4647
getParentRoute: () => rootRoute,
4748
} as any).lazy(() => import('./routes/_account.lazy').then((d) => d.Route))
4849

50+
const ResetCrossSigningIndexRoute = ResetCrossSigningIndexImport.update({
51+
id: '/',
52+
path: '/',
53+
getParentRoute: () => ResetCrossSigningRoute,
54+
} as any)
55+
4956
const AccountIndexRoute = AccountIndexImport.update({
5057
id: '/',
5158
path: '/',
@@ -54,6 +61,20 @@ const AccountIndexRoute = AccountIndexImport.update({
5461
import('./routes/_account.index.lazy').then((d) => d.Route),
5562
)
5663

64+
const ResetCrossSigningSuccessRoute = ResetCrossSigningSuccessImport.update({
65+
id: '/success',
66+
path: '/success',
67+
getParentRoute: () => ResetCrossSigningRoute,
68+
} as any)
69+
70+
const ResetCrossSigningCancelledRoute = ResetCrossSigningCancelledImport.update(
71+
{
72+
id: '/cancelled',
73+
path: '/cancelled',
74+
getParentRoute: () => ResetCrossSigningRoute,
75+
} as any,
76+
)
77+
5778
const DevicesSplatRoute = DevicesSplatImport.update({
5879
id: '/devices/$',
5980
path: '/devices/$',
@@ -154,13 +175,34 @@ declare module '@tanstack/react-router' {
154175
preLoaderRoute: typeof DevicesSplatImport
155176
parentRoute: typeof rootRoute
156177
}
178+
'/reset-cross-signing/cancelled': {
179+
id: '/reset-cross-signing/cancelled'
180+
path: '/cancelled'
181+
fullPath: '/reset-cross-signing/cancelled'
182+
preLoaderRoute: typeof ResetCrossSigningCancelledImport
183+
parentRoute: typeof ResetCrossSigningImport
184+
}
185+
'/reset-cross-signing/success': {
186+
id: '/reset-cross-signing/success'
187+
path: '/success'
188+
fullPath: '/reset-cross-signing/success'
189+
preLoaderRoute: typeof ResetCrossSigningSuccessImport
190+
parentRoute: typeof ResetCrossSigningImport
191+
}
157192
'/_account/': {
158193
id: '/_account/'
159194
path: '/'
160195
fullPath: '/'
161196
preLoaderRoute: typeof AccountIndexImport
162197
parentRoute: typeof AccountImport
163198
}
199+
'/reset-cross-signing/': {
200+
id: '/reset-cross-signing/'
201+
path: '/'
202+
fullPath: '/reset-cross-signing/'
203+
preLoaderRoute: typeof ResetCrossSigningIndexImport
204+
parentRoute: typeof ResetCrossSigningImport
205+
}
164206
'/_account/sessions/$id': {
165207
id: '/_account/sessions/$id'
166208
path: '/sessions/$id'
@@ -232,12 +274,30 @@ const AccountRouteChildren: AccountRouteChildren = {
232274
const AccountRouteWithChildren =
233275
AccountRoute._addFileChildren(AccountRouteChildren)
234276

277+
interface ResetCrossSigningRouteChildren {
278+
ResetCrossSigningCancelledRoute: typeof ResetCrossSigningCancelledRoute
279+
ResetCrossSigningSuccessRoute: typeof ResetCrossSigningSuccessRoute
280+
ResetCrossSigningIndexRoute: typeof ResetCrossSigningIndexRoute
281+
}
282+
283+
const ResetCrossSigningRouteChildren: ResetCrossSigningRouteChildren = {
284+
ResetCrossSigningCancelledRoute: ResetCrossSigningCancelledRoute,
285+
ResetCrossSigningSuccessRoute: ResetCrossSigningSuccessRoute,
286+
ResetCrossSigningIndexRoute: ResetCrossSigningIndexRoute,
287+
}
288+
289+
const ResetCrossSigningRouteWithChildren =
290+
ResetCrossSigningRoute._addFileChildren(ResetCrossSigningRouteChildren)
291+
235292
export interface FileRoutesByFullPath {
236293
'': typeof AccountRouteWithChildren
237-
'/reset-cross-signing': typeof ResetCrossSigningRoute
294+
'/reset-cross-signing': typeof ResetCrossSigningRouteWithChildren
238295
'/clients/$id': typeof ClientsIdRoute
239296
'/devices/$': typeof DevicesSplatRoute
297+
'/reset-cross-signing/cancelled': typeof ResetCrossSigningCancelledRoute
298+
'/reset-cross-signing/success': typeof ResetCrossSigningSuccessRoute
240299
'/': typeof AccountIndexRoute
300+
'/reset-cross-signing/': typeof ResetCrossSigningIndexRoute
241301
'/sessions/$id': typeof AccountSessionsIdRoute
242302
'/sessions/browsers': typeof AccountSessionsBrowsersRoute
243303
'/emails/$id/verify': typeof EmailsIdVerifyRoute
@@ -248,10 +308,12 @@ export interface FileRoutesByFullPath {
248308
}
249309

250310
export interface FileRoutesByTo {
251-
'/reset-cross-signing': typeof ResetCrossSigningRoute
252311
'/clients/$id': typeof ClientsIdRoute
253312
'/devices/$': typeof DevicesSplatRoute
313+
'/reset-cross-signing/cancelled': typeof ResetCrossSigningCancelledRoute
314+
'/reset-cross-signing/success': typeof ResetCrossSigningSuccessRoute
254315
'/': typeof AccountIndexRoute
316+
'/reset-cross-signing': typeof ResetCrossSigningIndexRoute
255317
'/sessions/$id': typeof AccountSessionsIdRoute
256318
'/sessions/browsers': typeof AccountSessionsBrowsersRoute
257319
'/emails/$id/verify': typeof EmailsIdVerifyRoute
@@ -264,10 +326,13 @@ export interface FileRoutesByTo {
264326
export interface FileRoutesById {
265327
__root__: typeof rootRoute
266328
'/_account': typeof AccountRouteWithChildren
267-
'/reset-cross-signing': typeof ResetCrossSigningRoute
329+
'/reset-cross-signing': typeof ResetCrossSigningRouteWithChildren
268330
'/clients/$id': typeof ClientsIdRoute
269331
'/devices/$': typeof DevicesSplatRoute
332+
'/reset-cross-signing/cancelled': typeof ResetCrossSigningCancelledRoute
333+
'/reset-cross-signing/success': typeof ResetCrossSigningSuccessRoute
270334
'/_account/': typeof AccountIndexRoute
335+
'/reset-cross-signing/': typeof ResetCrossSigningIndexRoute
271336
'/_account/sessions/$id': typeof AccountSessionsIdRoute
272337
'/_account/sessions/browsers': typeof AccountSessionsBrowsersRoute
273338
'/emails/$id/verify': typeof EmailsIdVerifyRoute
@@ -284,7 +349,10 @@ export interface FileRouteTypes {
284349
| '/reset-cross-signing'
285350
| '/clients/$id'
286351
| '/devices/$'
352+
| '/reset-cross-signing/cancelled'
353+
| '/reset-cross-signing/success'
287354
| '/'
355+
| '/reset-cross-signing/'
288356
| '/sessions/$id'
289357
| '/sessions/browsers'
290358
| '/emails/$id/verify'
@@ -294,10 +362,12 @@ export interface FileRouteTypes {
294362
| '/password/recovery'
295363
fileRoutesByTo: FileRoutesByTo
296364
to:
297-
| '/reset-cross-signing'
298365
| '/clients/$id'
299366
| '/devices/$'
367+
| '/reset-cross-signing/cancelled'
368+
| '/reset-cross-signing/success'
300369
| '/'
370+
| '/reset-cross-signing'
301371
| '/sessions/$id'
302372
| '/sessions/browsers'
303373
| '/emails/$id/verify'
@@ -311,7 +381,10 @@ export interface FileRouteTypes {
311381
| '/reset-cross-signing'
312382
| '/clients/$id'
313383
| '/devices/$'
384+
| '/reset-cross-signing/cancelled'
385+
| '/reset-cross-signing/success'
314386
| '/_account/'
387+
| '/reset-cross-signing/'
315388
| '/_account/sessions/$id'
316389
| '/_account/sessions/browsers'
317390
| '/emails/$id/verify'
@@ -324,7 +397,7 @@ export interface FileRouteTypes {
324397

325398
export interface RootRouteChildren {
326399
AccountRoute: typeof AccountRouteWithChildren
327-
ResetCrossSigningRoute: typeof ResetCrossSigningRoute
400+
ResetCrossSigningRoute: typeof ResetCrossSigningRouteWithChildren
328401
ClientsIdRoute: typeof ClientsIdRoute
329402
DevicesSplatRoute: typeof DevicesSplatRoute
330403
EmailsIdVerifyRoute: typeof EmailsIdVerifyRoute
@@ -335,7 +408,7 @@ export interface RootRouteChildren {
335408

336409
const rootRouteChildren: RootRouteChildren = {
337410
AccountRoute: AccountRouteWithChildren,
338-
ResetCrossSigningRoute: ResetCrossSigningRoute,
411+
ResetCrossSigningRoute: ResetCrossSigningRouteWithChildren,
339412
ClientsIdRoute: ClientsIdRoute,
340413
DevicesSplatRoute: DevicesSplatRoute,
341414
EmailsIdVerifyRoute: EmailsIdVerifyRoute,
@@ -376,18 +449,35 @@ export const routeTree = rootRoute
376449
]
377450
},
378451
"/reset-cross-signing": {
379-
"filePath": "reset-cross-signing.tsx"
452+
"filePath": "reset-cross-signing.tsx",
453+
"children": [
454+
"/reset-cross-signing/cancelled",
455+
"/reset-cross-signing/success",
456+
"/reset-cross-signing/"
457+
]
380458
},
381459
"/clients/$id": {
382460
"filePath": "clients.$id.tsx"
383461
},
384462
"/devices/$": {
385463
"filePath": "devices.$.tsx"
386464
},
465+
"/reset-cross-signing/cancelled": {
466+
"filePath": "reset-cross-signing.cancelled.tsx",
467+
"parent": "/reset-cross-signing"
468+
},
469+
"/reset-cross-signing/success": {
470+
"filePath": "reset-cross-signing.success.tsx",
471+
"parent": "/reset-cross-signing"
472+
},
387473
"/_account/": {
388474
"filePath": "_account.index.tsx",
389475
"parent": "/_account"
390476
},
477+
"/reset-cross-signing/": {
478+
"filePath": "reset-cross-signing.index.tsx",
479+
"parent": "/reset-cross-signing"
480+
},
391481
"/_account/sessions/$id": {
392482
"filePath": "_account.sessions.$id.tsx",
393483
"parent": "/_account"

‎frontend/src/routes/_account.index.lazy.tsx‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -92,8 +92,12 @@ function Index(): React.ReactElement {
9292
<Text className="text-secondary" size="md">
9393
{t("frontend.reset_cross_signing.description")}
9494
</Text>
95-
<ButtonLink to="/reset-cross-signing" kind="primary" destructive>
96-
{t("frontend.reset_cross_signing.button")}
95+
<ButtonLink
96+
to="/reset-cross-signing"
97+
kind="secondary"
98+
destructive
99+
>
100+
{t("frontend.reset_cross_signing.start_reset")}
97101
</ButtonLink>
98102
</BlockList>
99103
</Collapsible.Content>

‎frontend/src/routes/reset-cross-signing.cancelled.tsx‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
// Copyright 2024 New Vector Ltd.
2+
//
3+
// SPDX-License-Identifier: AGPL-3.0-only
4+
// Please see LICENSE in the repository root for full details.
5+
6+
import { createFileRoute } from "@tanstack/react-router";
7+
import IconKeyOffSolid from "@vector-im/compound-design-tokens/assets/web/icons/key-off-solid";
8+
import { Text } from "@vector-im/compound-web";
9+
import { useTranslation } from "react-i18next";
10+
import PageHeading from "../components/PageHeading";
11+
12+
export const Route = createFileRoute("/reset-cross-signing/cancelled")({
13+
component: () => {
14+
const { t } = useTranslation();
15+
return (
16+
<>
17+
<PageHeading
18+
Icon={IconKeyOffSolid}
19+
title={t("frontend.reset_cross_signing.cancelled.heading")}
20+
success
21+
/>
22+
<Text className="text-center text-secondary" size="lg">
23+
{t("frontend.reset_cross_signing.cancelled.description_1")}
24+
</Text>
25+
<Text className="text-center text-secondary" size="lg">
26+
{t("frontend.reset_cross_signing.cancelled.description_2")}
27+
</Text>
28+
</>
29+
);
30+
},
31+
});

0 commit comments

Comments
 (0)