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

Commit

Permalink
Iterate cross signing reset flows (#3102)
Browse files Browse the repository at this point in the history
* Handle UIA fallback authDone API for cross signing reset unlock

* Extract VisualList into a more reusable component

* Redesign cross signing reset unlock flow

* Fix block gap

* Hide reset x-signing flow on account view under a collapsible heading

* i18n

* Iterate

* Downgrade Radix react-collapsible

* Fix class names

* Update snapshots
  • Loading branch information
t3chguy authored Aug 30, 2024
1 parent 19cef28 commit 54d5e94
Show file tree
Hide file tree
Showing 16 changed files with 450 additions and 116 deletions.
26 changes: 19 additions & 7 deletions frontend/locales/en.json
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@
}
},
"common": {
"e2ee": "End-to-end encryption",
"loading": "Loading…",
"next": "Next",
"previous": "Previous",
Expand Down Expand Up @@ -185,17 +186,28 @@
}
},
"reset_cross_signing": {
"button": "Allow crypto identity reset",
"description": "If you are not signed in anywhere else, and have forgotten or lost all recovery options you’ll need to reset your crypto identity. This means you will lose your existing message history, other users will see that you have reset your identity and you will need to verify your existing devices again.",
"button": "Reset identity",
"cancelled": {
"description_1": "You can close this window and go back to the app to continue.",
"description_2": "If you're signed out everywhere and don't remember your recovery code, you'll still need to reset your identity.",
"heading": "Identity reset cancelled."
},
"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.",
"effect_list": {
"negative_1": "You will lose your existing message history",
"negative_2": "You will need to verify all your existing devices and contacts again",
"positive_1": "Your account details, contacts, preferences, and chat list will be kept"
},
"failure": {
"description": "This might be a temporary problem, so please try again later. If the problem persists, please contact your server administrator.",
"title": "Failed to allow crypto identity"
"heading": "Failed to allow crypto identity reset"
},
"heading": "Reset crypto identity",
"heading": "Reset your identity in case you can't confirm another way",
"success": {
"description": "A client can now temporarily reset your account crypto identity. Follow the instructions in your client to complete the process.",
"title": "Crypto identity reset temporarily allowed"
}
"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.",
"heading": "Identity reset successfully. Go back to the app to finish the process."
},
"warning": "Only reset your identity if you don't have access to another signed-in device and you've lost your recovery key."
},
"session": {
"client_id_label": "Client ID",
Expand Down
32 changes: 32 additions & 0 deletions frontend/package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions frontend/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@
"dependencies": {
"@fontsource/inconsolata": "^5.0.18",
"@fontsource/inter": "^5.0.20",
"@radix-ui/react-collapsible": "1.0.3",
"@radix-ui/react-dialog": "^1.0.5",
"@tanstack/react-router": "^1.46.7",
"@urql/core": "^5.0.5",
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/components/BlockList/BlockList.module.css
Original file line number Diff line number Diff line change
Expand Up @@ -17,5 +17,5 @@
display: flex;
flex-direction: column;
align-content: flex-start;
gap: var(--cpd-space-8x);
gap: var(--cpd-space-6x);
}
32 changes: 32 additions & 0 deletions frontend/src/components/Collapsible/Collapsible.module.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
/* Copyright 2024 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.
*/

.trigger {
display: flex;
width: 100%;
}

.trigger-title {
flex-grow: 1;
text-align: start;
}

[data-state="closed"] .trigger-icon {
transform: rotate(180deg);
}

.content {
margin-top: var(--cpd-space-2x);
}
50 changes: 50 additions & 0 deletions frontend/src/components/Collapsible/Collapsible.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
// Copyright 2024 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.

import * as Collapsible from "@radix-ui/react-collapsible";
import IconChevronUp from "@vector-im/compound-design-tokens/assets/web/icons/chevron-up";
import classNames from "classnames";

import styles from "./Collapsible.module.css";

export const Trigger: React.FC<
React.ComponentProps<typeof Collapsible.Trigger>
> = ({ children, className, ...props }) => {
return (
<Collapsible.Trigger
{...props}
className={classNames(styles.trigger, className)}
>
<div className={styles.triggerTitle}>{children}</div>
<IconChevronUp
className={styles.triggerIcon}
height="24px"
width="24px"
/>
</Collapsible.Trigger>
);
};

export const Content: React.FC<
React.ComponentProps<typeof Collapsible.Content>
> = ({ className, ...props }) => {
return (
<Collapsible.Content
{...props}
className={classNames(styles.content, className)}
/>
);
};

export const Root = Collapsible.Root;
15 changes: 15 additions & 0 deletions frontend/src/components/Collapsible/index.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
// Copyright 2024 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.

export * from "./Collapsible";
2 changes: 1 addition & 1 deletion frontend/src/components/PageHeading/PageHeading.module.css
Original file line number Diff line number Diff line change
Expand Up @@ -63,7 +63,7 @@
text-align: center;

& .title {
font: var(--cpd-font-heading-lg-semibold);
font: var(--cpd-font-heading-md-semibold);
letter-spacing: var(--cpd-font-letter-spacing-heading-xl);
color: var(--cpd-color-text-primary);
text-wrap: balance;
Expand Down
22 changes: 0 additions & 22 deletions frontend/src/components/SessionDetail/SessionDetails.module.css
Original file line number Diff line number Diff line change
Expand Up @@ -39,25 +39,3 @@
text-overflow: ellipsis;
overflow: hidden;
}

.scope-list {
display: flex;
flex-direction: column;
gap: var(--cpd-space-scale);
border-radius: var(--cpd-space-5x);
overflow: hidden;
}

.scope {
background: var(--cpd-color-bg-subtle-secondary);
padding: var(--cpd-space-3x) var(--cpd-space-5x);
display: flex;
align-items: center;
gap: var(--cpd-space-3x);
}

.scope svg {
inline-size: var(--cpd-space-6x);
block-size: var(--cpd-space-6x);
color: var(--cpd-color-icon-tertiary);
}
12 changes: 4 additions & 8 deletions frontend/src/components/SessionDetail/SessionDetails.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@ import { useTranslation } from "react-i18next";
import Block from "../Block/Block";
import DateTime from "../DateTime";
import LastActive from "../Session/LastActive";
import { VisualList, VisualListItem } from "../VisualList/VisualList";

import styles from "./SessionDetails.module.css";

Expand Down Expand Up @@ -68,12 +69,7 @@ const Scope: React.FC<{ scope: string }> = ({ scope }) => {
return (
<>
{mappedScopes.map(([Icon, text], i) => (
<li className={styles.scope} key={i}>
<Icon />
<Text size="md" weight="medium">
{text}
</Text>
</li>
<VisualListItem key={i} Icon={Icon} label={text} />
))}
</>
);
Expand Down Expand Up @@ -153,11 +149,11 @@ const SessionDetails: React.FC<Props> = ({
<Datum
label={t("frontend.session.scopes_label")}
value={
<ul className={styles.scopeList}>
<VisualList>
{scopes.map((scope) => (
<Scope key={scope} scope={scope} />
))}
</ul>
</VisualList>
}
/>
)}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -109,12 +109,13 @@ exports[`<CompatSessionDetail> > renders a compatability session details 1`] = `
Scopes
</h5>
<ul
class="_scopeList_040867"
class="_list_7f22f8"
>
<li
class="_scope_040867"
class="_item_7f22f8"
>
<svg
color="var(--cpd-color-icon-tertiary)"
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
Expand All @@ -138,9 +139,10 @@ exports[`<CompatSessionDetail> > renders a compatability session details 1`] = `
</p>
</li>
<li
class="_scope_040867"
class="_item_7f22f8"
>
<svg
color="var(--cpd-color-icon-tertiary)"
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
Expand All @@ -158,9 +160,10 @@ exports[`<CompatSessionDetail> > renders a compatability session details 1`] = `
</p>
</li>
<li
class="_scope_040867"
class="_item_7f22f8"
>
<svg
color="var(--cpd-color-icon-tertiary)"
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
Expand Down Expand Up @@ -366,12 +369,13 @@ exports[`<CompatSessionDetail> > renders a compatability session without an ssoL
Scopes
</h5>
<ul
class="_scopeList_040867"
class="_list_7f22f8"
>
<li
class="_scope_040867"
class="_item_7f22f8"
>
<svg
color="var(--cpd-color-icon-tertiary)"
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
Expand All @@ -395,9 +399,10 @@ exports[`<CompatSessionDetail> > renders a compatability session without an ssoL
</p>
</li>
<li
class="_scope_040867"
class="_item_7f22f8"
>
<svg
color="var(--cpd-color-icon-tertiary)"
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
Expand All @@ -415,9 +420,10 @@ exports[`<CompatSessionDetail> > renders a compatability session without an ssoL
</p>
</li>
<li
class="_scope_040867"
class="_item_7f22f8"
>
<svg
color="var(--cpd-color-icon-tertiary)"
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
Expand Down Expand Up @@ -592,12 +598,13 @@ exports[`<CompatSessionDetail> > renders a finished compatability session detail
Scopes
</h5>
<ul
class="_scopeList_040867"
class="_list_7f22f8"
>
<li
class="_scope_040867"
class="_item_7f22f8"
>
<svg
color="var(--cpd-color-icon-tertiary)"
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
Expand All @@ -621,9 +628,10 @@ exports[`<CompatSessionDetail> > renders a finished compatability session detail
</p>
</li>
<li
class="_scope_040867"
class="_item_7f22f8"
>
<svg
color="var(--cpd-color-icon-tertiary)"
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
Expand All @@ -641,9 +649,10 @@ exports[`<CompatSessionDetail> > renders a finished compatability session detail
</p>
</li>
<li
class="_scope_040867"
class="_item_7f22f8"
>
<svg
color="var(--cpd-color-icon-tertiary)"
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
Expand Down
Loading

0 comments on commit 54d5e94

Please sign in to comment.