Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
8747e62
commit 2710462
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,63 @@ | ||
| /* | ||
| * Copyright 2024 New Vector Ltd. | ||
| * | ||
| * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only | ||
| * Please see LICENSE files in the repository root for full details. | ||
| */ | ||
|
|
||
| .mx_ChangeRecoveryKey_header { | ||
| display: flex; | ||
| flex-direction: column; | ||
| gap: var(--cpd-space-4x); | ||
| align-items: center; | ||
|
|
||
| > h2 { | ||
| margin: 0; | ||
| } | ||
|
|
||
| > span { | ||
| color: var(--cpd-color-text-secondary); | ||
| text-align: center; | ||
| } | ||
| } | ||
|
|
||
| .mx_ChangeRecoveryKey_content { | ||
| display: grid; | ||
| grid-template: | ||
| "header button" auto | ||
| "content button" auto / 1fr 36px; | ||
| column-gap: var(--cpd-space-3x); | ||
| row-gap: var(--cpd-space-1x); | ||
| align-items: center; | ||
|
|
||
| > span { | ||
| grid-area: header; | ||
| } | ||
|
|
||
| > div { | ||
| grid-area: content; | ||
| display: flex; | ||
| flex-direction: column; | ||
| gap: var(--cpd-space-2x); | ||
| color: var(--cpd-color-text-secondary); | ||
|
|
||
| > code { | ||
| background-color: var(--cpd-color-bg-subtle-secondary); | ||
| border-radius: var(--cpd-space-2x); | ||
| padding: var(--cpd-space-3x) var(--cpd-space-4x); | ||
| } | ||
| } | ||
|
|
||
| > button { | ||
| margin: 0 var(--cpd-space-1x); | ||
| color: var(--cpd-color-bg-subtle-secondary); | ||
| grid-area: button; | ||
| } | ||
| } | ||
|
|
||
| .mx_ChangeRecoveryKey_action { | ||
| display: flex; | ||
| flex-direction: column; | ||
| gap: var(--cpd-space-4x); | ||
| justify-content: center; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,17 @@ | ||
| /* | ||
| * Copyright 2024 New Vector Ltd. | ||
| * | ||
| * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only | ||
| * Please see LICENSE files in the repository root for full details. | ||
| */ | ||
|
|
||
| .mx_EncryptionCard { | ||
| display: flex; | ||
| flex-direction: column; | ||
| gap: var(--cpd-space-8x); | ||
| padding: var(--cpd-space-10x); | ||
| border-radius: var(--cpd-space-4x); | ||
| /* From figma */ | ||
| box-shadow: 0 1.2px 2.4px 0 rgba(27, 29, 34, 0.15); | ||
| border: 1px solid var(--cpd-color-gray-400); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,22 @@ | ||
| /* | ||
| * Copyright 2024 New Vector Ltd. | ||
| * | ||
| * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only | ||
| * Please see LICENSE files in the repository root for full details. | ||
| */ | ||
|
|
||
| .mx_RecoveryPanel { | ||
| .mx_RecoveryPanel_Subheader { | ||
| display: flex; | ||
| flex-direction: column; | ||
| gap: var(--cpd-space-2x); | ||
|
|
||
| > span { | ||
| display: flex; | ||
| align-items: center; | ||
| gap: var(--cpd-space-2x); | ||
| font: var(--cpd-font-body-sm-medium); | ||
| color: var(--cpd-color-text-success-primary); | ||
| } | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,60 @@ | ||
| /* | ||
| * Copyright 2024 New Vector Ltd. | ||
| * | ||
| * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only | ||
| * Please see LICENSE files in the repository root for full details. | ||
| */ | ||
|
|
||
| import React, { JSX } from "react"; | ||
| import { Breadcrumb, Heading, BigIcon, IconButton, Text, Button } from "@vector-im/compound-web"; | ||
|
Check failure on line 9 in src/components/views/settings/encryption/ChangeRecoveryKey.tsx
|
||
| import KeyIcon from "@vector-im/compound-design-tokens/assets/web/icons/key-solid"; | ||
| import CopyIcon from "@vector-im/compound-design-tokens/assets/web/icons/copy"; | ||
|
|
||
| import { _t } from "../../../../languageHandler.tsx"; | ||
| import { EncryptionCard } from "./EncryptionCard.tsx"; | ||
|
|
||
| interface ChangeRecoveryKeyProps { | ||
| onBackClick: () => void; | ||
| } | ||
|
|
||
| export function ChangeRecoveryKey({ onBackClick }: ChangeRecoveryKeyProps): JSX.Element { | ||
| return ( | ||
| <> | ||
| <Breadcrumb | ||
| backLabel={_t("action|back")} | ||
| onBackClick={onBackClick} | ||
| pages={[_t("settings|encryption|title"), _t("settings|encryption|recovery|change_recovery_key")]} | ||
| onPageClick={onBackClick} | ||
| /> | ||
| <EncryptionCard> | ||
| <div className="mx_ChangeRecoveryKey_header"> | ||
| <BigIcon> | ||
| <KeyIcon /> | ||
| </BigIcon> | ||
| <Heading as="h2" size="sm" weight="semibold"> | ||
| {_t("settings|encryption|recovery|change_recovery_key_title")} | ||
| </Heading> | ||
| <span>{_t("settings|encryption|recovery|change_recovery_key_description")}</span> | ||
| </div> | ||
| <div className="mx_ChangeRecoveryKey_content"> | ||
| <Text as="span" weight="medium"> | ||
| {_t("settings|encryption|recovery|change_recovery_key_content_title")} | ||
| </Text> | ||
| <div> | ||
| <code>Text text text text text text text text text text text text text text text </code> | ||
| <Text as="span" size="sm"> | ||
| {_t("settings|encryption|recovery|change_recovery_key_content_description")} | ||
| </Text> | ||
| </div> | ||
| <IconButton size="28px"> | ||
| <CopyIcon /> | ||
| </IconButton> | ||
| </div> | ||
| <div className="mx_ChangeRecoveryKey_action"> | ||
| <Button>{_t("action|continue")}</Button> | ||
| <Button kind="tertiary">{_t("action|cancel")}</Button> | ||
| </div> | ||
| </EncryptionCard> | ||
| </> | ||
| ); | ||
| } | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,15 @@ | ||
| /* | ||
| * Copyright 2024 New Vector Ltd. | ||
| * | ||
| * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only | ||
| * Please see LICENSE files in the repository root for full details. | ||
| */ | ||
|
|
||
| import React, { JSX, PropsWithChildren } from "react"; | ||
|
|
||
| /** | ||
| * A styled card for encryption settings. | ||
| */ | ||
| export function EncryptionCard({ children }: PropsWithChildren): JSX.Element { | ||
| return <div className="mx_EncryptionCard">{children}</div>; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,89 @@ | ||
| /* | ||
| * Copyright 2024 New Vector Ltd. | ||
| * | ||
| * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only | ||
| * Please see LICENSE files in the repository root for full details. | ||
| */ | ||
|
|
||
| import React, { JSX, MouseEventHandler, useEffect, useState } from "react"; | ||
| import { Button, InlineSpinner } from "@vector-im/compound-web"; | ||
| import KeyIcon from "@vector-im/compound-design-tokens/assets/web/icons/key"; | ||
| import CheckCircleIcon from "@vector-im/compound-design-tokens/assets/web/icons/check-circle-solid"; | ||
|
|
||
| import { SettingsSection } from "../shared/SettingsSection"; | ||
| import { _t } from "../../../../languageHandler"; | ||
| import { useMatrixClientContext } from "../../../../contexts/MatrixClientContext"; | ||
| import { SettingsHeader } from "../SettingsHeader"; | ||
|
|
||
| interface RecoveryPanelProps { | ||
| onChangingRecoveryKeyClick: MouseEventHandler<HTMLButtonElement>; | ||
| } | ||
|
|
||
| /** | ||
| * This component allows the user to set up or change their recovery key. | ||
| */ | ||
| export function RecoveryPanel({ onChangingRecoveryKeyClick }: RecoveryPanelProps): JSX.Element { | ||
| const [hasRecoveryKey, setHasRecoveryKey] = useState<boolean | null>(null); | ||
| const isLoading = hasRecoveryKey === null; | ||
| const matrixClient = useMatrixClientContext(); | ||
|
|
||
| useEffect(() => { | ||
| const getRecoveryKey = async (): Promise<void> => | ||
| setHasRecoveryKey(Boolean(await matrixClient.getCrypto()?.getKeyBackupInfo())); | ||
| getRecoveryKey(); | ||
| }, [matrixClient]); | ||
|
|
||
| return ( | ||
| <SettingsSection | ||
| legacy={false} | ||
| heading={ | ||
| <SettingsHeader | ||
| hasRecommendedTag={!isLoading && !hasRecoveryKey} | ||
| label={_t("settings|encryption|recovery|title")} | ||
| /> | ||
| } | ||
| subHeading={<Subheader hasRecoveryKey={hasRecoveryKey} />} | ||
| className="mx_RecoveryPanel" | ||
| > | ||
| {isLoading && <InlineSpinner />} | ||
| {!isLoading && ( | ||
| <> | ||
| {hasRecoveryKey ? ( | ||
| <Button size="sm" kind="secondary" Icon={KeyIcon} onClick={onChangingRecoveryKeyClick}> | ||
| {_t("settings|encryption|recovery|change_recovery_key")} | ||
| </Button> | ||
| ) : ( | ||
| <Button size="sm" kind="primary" Icon={KeyIcon}> | ||
| {_t("settings|encryption|recovery|set_up_recovery")} | ||
| </Button> | ||
| )} | ||
| </> | ||
| )} | ||
| </SettingsSection> | ||
| ); | ||
| } | ||
|
|
||
| /** | ||
| * The subheader for the recovery panel. | ||
| */ | ||
| interface SubheaderProps { | ||
| /** | ||
| * Whether the user has a recovery key. | ||
| * If null, the recovery key is still fetching. | ||
| */ | ||
| hasRecoveryKey: boolean | null; | ||
| } | ||
|
|
||
| function Subheader({ hasRecoveryKey }: SubheaderProps): JSX.Element { | ||
| if (!hasRecoveryKey) return <>{_t("settings|encryption|recovery|description")}</>; | ||
|
|
||
| return ( | ||
| <div className="mx_RecoveryPanel_Subheader"> | ||
| {_t("settings|encryption|recovery|description")} | ||
| <span> | ||
| <CheckCircleIcon width="20" height="20" /> | ||
| {_t("settings|encryption|recovery|key_active")} | ||
| </span> | ||
| </div> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters