mirror of https://github.com/vector-im/riot-web
Add recovery section
Florian Duros
parent
ae623f8319
commit
f9e48b4e3b
|
|
@ -596,7 +596,9 @@ legend {
|
|||
.mx_Dialog
|
||||
button:not(.mx_Dialog_nonDialogButton):not([class|="maplibregl"]):not(.mx_AccessibleButton):not(
|
||||
.mx_UserProfileSettings button
|
||||
):not(.mx_ThemeChoicePanel_CustomTheme button):not(.mx_UnpinAllDialog button):not(.mx_ShareDialog button),
|
||||
):not(.mx_ThemeChoicePanel_CustomTheme button):not(.mx_UnpinAllDialog button):not(.mx_ShareDialog button):not(
|
||||
.mx_EncryptionUserSettingsTab button
|
||||
),
|
||||
.mx_Dialog input[type="submit"],
|
||||
.mx_Dialog_buttons button:not(.mx_Dialog_nonDialogButton):not(.mx_AccessibleButton),
|
||||
.mx_Dialog_buttons input[type="submit"] {
|
||||
|
|
@ -616,8 +618,8 @@ legend {
|
|||
.mx_Dialog
|
||||
button:not(.mx_Dialog_nonDialogButton):not([class|="maplibregl"]):not(.mx_AccessibleButton):not(
|
||||
.mx_UserProfileSettings button
|
||||
):not(.mx_ThemeChoicePanel_CustomTheme button):not(.mx_UnpinAllDialog button):not(
|
||||
.mx_ShareDialog button
|
||||
):not(.mx_ThemeChoicePanel_CustomTheme button):not(.mx_UnpinAllDialog button):not(.mx_ShareDialog button):not(
|
||||
.mx_EncryptionUserSettingsTab button
|
||||
):last-child {
|
||||
margin-right: 0px;
|
||||
}
|
||||
|
|
@ -625,7 +627,9 @@ legend {
|
|||
.mx_Dialog
|
||||
button:not(.mx_Dialog_nonDialogButton):not([class|="maplibregl"]):not(.mx_AccessibleButton):not(
|
||||
.mx_UserProfileSettings button
|
||||
):not(.mx_ThemeChoicePanel_CustomTheme button):not(.mx_UnpinAllDialog button):not(.mx_ShareDialog button):focus,
|
||||
):not(.mx_ThemeChoicePanel_CustomTheme button):not(.mx_UnpinAllDialog button):not(.mx_ShareDialog button):not(
|
||||
.mx_EncryptionUserSettingsTab button
|
||||
):focus,
|
||||
.mx_Dialog input[type="submit"]:focus,
|
||||
.mx_Dialog_buttons button:not(.mx_Dialog_nonDialogButton):not(.mx_AccessibleButton):focus,
|
||||
.mx_Dialog_buttons input[type="submit"]:focus {
|
||||
|
|
@ -637,7 +641,9 @@ legend {
|
|||
.mx_Dialog_buttons
|
||||
button.mx_Dialog_primary:not(.mx_Dialog_nonDialogButton):not(.mx_AccessibleButton):not(
|
||||
.mx_UserProfileSettings button
|
||||
):not(.mx_ThemeChoicePanel_CustomTheme button):not(.mx_UnpinAllDialog button):not(.mx_ShareDialog button),
|
||||
):not(.mx_ThemeChoicePanel_CustomTheme button):not(.mx_UnpinAllDialog button):not(.mx_ShareDialog button):not(
|
||||
.mx_EncryptionUserSettingsTab button
|
||||
),
|
||||
.mx_Dialog_buttons input[type="submit"].mx_Dialog_primary {
|
||||
color: var(--cpd-color-text-on-solid-primary);
|
||||
background-color: var(--cpd-color-bg-action-primary-rest);
|
||||
|
|
@ -650,7 +656,7 @@ legend {
|
|||
.mx_Dialog_buttons
|
||||
button.danger:not(.mx_Dialog_nonDialogButton):not(.mx_AccessibleButton):not(.mx_UserProfileSettings button):not(
|
||||
.mx_ThemeChoicePanel_CustomTheme button
|
||||
):not(.mx_UnpinAllDialog button):not(.mx_ShareDialog button),
|
||||
):not(.mx_UnpinAllDialog button):not(.mx_ShareDialog button):not(.mx_EncryptionUserSettingsTab button),
|
||||
.mx_Dialog_buttons input[type="submit"].danger {
|
||||
background-color: var(--cpd-color-bg-critical-primary);
|
||||
border: solid 1px var(--cpd-color-bg-critical-primary);
|
||||
|
|
@ -666,7 +672,9 @@ legend {
|
|||
.mx_Dialog
|
||||
button:not(.mx_Dialog_nonDialogButton):not([class|="maplibregl"]):not(.mx_AccessibleButton):not(
|
||||
.mx_UserProfileSettings button
|
||||
):not(.mx_ThemeChoicePanel_CustomTheme button):not(.mx_UnpinAllDialog button):not(.mx_ShareDialog button):disabled,
|
||||
):not(.mx_ThemeChoicePanel_CustomTheme button):not(.mx_UnpinAllDialog button):not(.mx_ShareDialog button):not(
|
||||
.mx_EncryptionUserSettingsTab button
|
||||
):disabled,
|
||||
.mx_Dialog input[type="submit"]:disabled,
|
||||
.mx_Dialog_buttons button:not(.mx_Dialog_nonDialogButton):not(.mx_AccessibleButton):disabled,
|
||||
.mx_Dialog_buttons input[type="submit"]:disabled {
|
||||
|
|
|
|||
|
|
@ -352,6 +352,8 @@
|
|||
@import "./views/settings/_ThemeChoicePanel.pcss";
|
||||
@import "./views/settings/_UpdateCheckButton.pcss";
|
||||
@import "./views/settings/_UserProfileSettings.pcss";
|
||||
@import "./views/settings/encryption/_ChangeRecoveryKey.pcss";
|
||||
@import "./views/settings/encryption/_EncryptionCard.pcss";
|
||||
@import "./views/settings/tabs/_SettingsBanner.pcss";
|
||||
@import "./views/settings/tabs/_SettingsIndent.pcss";
|
||||
@import "./views/settings/tabs/_SettingsSection.pcss";
|
||||
|
|
|
|||
|
|
@ -0,0 +1,76 @@
|
|||
/*
|
||||
* 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 {
|
||||
.mx_InformationPanel_description {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.mx_ChangeRecoveryKey_Form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--cpd-space-8x);
|
||||
|
||||
.mx_ChangeRecoveryKey_footer {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--cpd-space-4x);
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_KeyPanel {
|
||||
display: grid;
|
||||
grid-template:
|
||||
"header button" auto
|
||||
"content button" auto / 1fr;
|
||||
|
||||
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);
|
||||
|
||||
.mx_KeyPanel_key {
|
||||
font-family: InputMono, monospace;
|
||||
height: 70px;
|
||||
box-sizing: border-box;
|
||||
border-radius: var(--cpd-space-2x);
|
||||
padding: var(--cpd-space-3x) var(--cpd-space-4x);
|
||||
background-color: var(--cpd-color-bg-subtle-secondary);
|
||||
}
|
||||
}
|
||||
|
||||
> button {
|
||||
margin: 0 var(--cpd-space-1x);
|
||||
grid-area: button;
|
||||
color: var(--cpd-color-icon-secondary-alpha);
|
||||
}
|
||||
}
|
||||
|
||||
.mx_KeyForm {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--cpd-space-8x);
|
||||
}
|
||||
|
||||
.mx_ChangeRecoveryKey_footer {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--cpd-space-4x);
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
/*
|
||||
* 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);
|
||||
|
||||
.mx_EncryptionCard_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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -14,7 +14,7 @@ Please see LICENSE files in the repository root for full details.
|
|||
color: $links;
|
||||
}
|
||||
|
||||
form {
|
||||
form:not(.mx_EncryptionUserSettingsTab form) {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: $spacing-8;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,324 @@
|
|||
/*
|
||||
* 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, { FormEventHandler, JSX, MouseEventHandler, useState } from "react";
|
||||
import {
|
||||
Breadcrumb,
|
||||
Button,
|
||||
ErrorMessage,
|
||||
Field,
|
||||
IconButton,
|
||||
Label,
|
||||
Root,
|
||||
Text,
|
||||
TextControl,
|
||||
} from "@vector-im/compound-web";
|
||||
import CopyIcon from "@vector-im/compound-design-tokens/assets/web/icons/copy";
|
||||
import { logger } from "matrix-js-sdk/src/logger";
|
||||
|
||||
import { _t } from "../../../../languageHandler";
|
||||
import { EncryptionCard } from "./EncryptionCard";
|
||||
import { useMatrixClientContext } from "../../../../contexts/MatrixClientContext";
|
||||
import { useAsyncMemo } from "../../../../hooks/useAsyncMemo";
|
||||
import { copyPlaintext } from "../../../../utils/strings";
|
||||
import { withSecretStorageKeyCache } from "../../../../SecurityManager";
|
||||
|
||||
/**
|
||||
* The possible states of the component.
|
||||
* - `inform_user`: The user is informed about the recovery key.
|
||||
* - `save_key_setup_flow`: The user is asked to save the new recovery key during the setup flow.
|
||||
* - `save_key_change_flow`: The user is asked to save the new recovery key during the chang key flow.
|
||||
* - `confirm`: The user is asked to confirm the new recovery key.
|
||||
*/
|
||||
type State = "inform_user" | "save_key_setup_flow" | "save_key_change_flow" | "confirm";
|
||||
|
||||
interface ChangeRecoveryKeyProps {
|
||||
/**
|
||||
* If true, the component will display the flow to set up a new recovery key.
|
||||
* If false, the component will display the flow to change the recovery key.
|
||||
*/
|
||||
isSetupFlow: boolean;
|
||||
/**
|
||||
* Called when the recovery key is successfully changed.
|
||||
*/
|
||||
onFinish: () => void;
|
||||
/**
|
||||
* Called when the cancel button is clicked or when we go back in the breadcrumbs.
|
||||
*/
|
||||
onCancelClick: () => void;
|
||||
}
|
||||
|
||||
/**
|
||||
* A component to set up or change the recovery key.
|
||||
*/
|
||||
export function ChangeRecoveryKey({
|
||||
isSetupFlow,
|
||||
onFinish,
|
||||
onCancelClick,
|
||||
}: ChangeRecoveryKeyProps): JSX.Element | null {
|
||||
const matrixClient = useMatrixClientContext();
|
||||
|
||||
const [state, setState] = useState<State>(isSetupFlow ? "inform_user" : "save_key_change_flow");
|
||||
|
||||
// We create a new recovery key, the recovery key will be displayed to the user
|
||||
const recoveryKey = useAsyncMemo(() => {
|
||||
const crypto = matrixClient.getCrypto();
|
||||
if (!crypto) return Promise.resolve(undefined);
|
||||
|
||||
return crypto.createRecoveryKeyFromPassphrase();
|
||||
}, []);
|
||||
|
||||
if (!recoveryKey?.encodedPrivateKey) return null;
|
||||
|
||||
let content: JSX.Element;
|
||||
switch (state) {
|
||||
case "inform_user":
|
||||
content = (
|
||||
<InformationPanel
|
||||
onContinueClick={() => setState("save_key_setup_flow")}
|
||||
onCancelClick={onCancelClick}
|
||||
/>
|
||||
);
|
||||
break;
|
||||
case "save_key_setup_flow":
|
||||
case "save_key_change_flow":
|
||||
content = (
|
||||
<KeyPanel
|
||||
recoveryKey={recoveryKey.encodedPrivateKey}
|
||||
onConfirmClick={() => setState("confirm")}
|
||||
onCancelClick={onCancelClick}
|
||||
/>
|
||||
);
|
||||
break;
|
||||
case "confirm":
|
||||
content = (
|
||||
<KeyForm
|
||||
recoveryKey={recoveryKey.encodedPrivateKey}
|
||||
onCancelClick={onCancelClick}
|
||||
onSubmit={async () => {
|
||||
const crypto = matrixClient.getCrypto();
|
||||
if (!crypto) return onFinish();
|
||||
|
||||
try {
|
||||
// We need to enable the cache to avoid to prompt the user to enter the new key
|
||||
// when we will try to access the secret storage during the bootstrap
|
||||
await withSecretStorageKeyCache(() =>
|
||||
crypto.bootstrapSecretStorage({
|
||||
setupNewKeyBackup: isSetupFlow,
|
||||
setupNewSecretStorage: true,
|
||||
createSecretStorageKey: async () => recoveryKey,
|
||||
}),
|
||||
);
|
||||
onFinish();
|
||||
} catch (e) {
|
||||
logger.error("Failed to bootstrap secret storage", e);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
const pages = [
|
||||
_t("settings|encryption|title"),
|
||||
isSetupFlow
|
||||
? _t("settings|encryption|recovery|set_up_recovery")
|
||||
: _t("settings|encryption|recovery|change_recovery_key"),
|
||||
];
|
||||
const labels = getLabels(state);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Breadcrumb
|
||||
backLabel={_t("action|back")}
|
||||
onBackClick={onCancelClick}
|
||||
pages={pages}
|
||||
onPageClick={onCancelClick}
|
||||
/>
|
||||
<EncryptionCard title={labels.title} description={labels.description} className="mx_ChangeRecoveryKey">
|
||||
{content}
|
||||
</EncryptionCard>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
type Labels = {
|
||||
/**
|
||||
* The title of the card.
|
||||
*/
|
||||
title: string;
|
||||
/**
|
||||
* The description of the card.
|
||||
*/
|
||||
description: string;
|
||||
};
|
||||
|
||||
/**
|
||||
* Get the header title and description for the given state.
|
||||
* @param state
|
||||
*/
|
||||
function getLabels(state: State): Labels {
|
||||
switch (state) {
|
||||
case "inform_user":
|
||||
return {
|
||||
title: _t("settings|encryption|recovery|set_up_recovery"),
|
||||
description: _t("settings|encryption|recovery|set_up_recovery_description", {
|
||||
changeRecoveryKeyButton: _t("settings|encryption|recovery|change_recovery_key"),
|
||||
}),
|
||||
};
|
||||
case "save_key_setup_flow":
|
||||
return {
|
||||
title: _t("settings|encryption|recovery|set_up_recovery_save_key_title"),
|
||||
description: _t("settings|encryption|recovery|set_up_recovery_save_key_description"),
|
||||
};
|
||||
case "save_key_change_flow":
|
||||
return {
|
||||
title: _t("settings|encryption|recovery|change_recovery_key_title"),
|
||||
description: _t("settings|encryption|recovery|change_recovery_key_description"),
|
||||
};
|
||||
case "confirm":
|
||||
return {
|
||||
title: _t("settings|encryption|recovery|confirm_title"),
|
||||
description: _t("settings|encryption|recovery|confirm_description"),
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
interface InformationPanelProps {
|
||||
/**
|
||||
* Called when the continue button is clicked.
|
||||
*/
|
||||
onContinueClick: MouseEventHandler<HTMLButtonElement>;
|
||||
/**
|
||||
* Called when the cancel button is clicked.
|
||||
*/
|
||||
onCancelClick: MouseEventHandler<HTMLButtonElement>;
|
||||
}
|
||||
|
||||
/**
|
||||
* The panel to display information about the recovery key.
|
||||
*/
|
||||
function InformationPanel({ onContinueClick, onCancelClick }: InformationPanelProps): JSX.Element {
|
||||
return (
|
||||
<>
|
||||
<Text as="span" weight="medium" className="mx_InformationPanel_description">
|
||||
{_t("settings|encryption|recovery|set_up_recovery_secondary_description")}
|
||||
</Text>
|
||||
<div className="mx_ChangeRecoveryKey_footer">
|
||||
<Button onClick={onContinueClick}>{_t("action|continue")}</Button>
|
||||
<Button kind="tertiary" onClick={onCancelClick}>
|
||||
{_t("action|cancel")}
|
||||
</Button>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
interface KeyPanelProps {
|
||||
/**
|
||||
* Called when the confirm button is clicked.
|
||||
*/
|
||||
onConfirmClick: MouseEventHandler;
|
||||
/**
|
||||
* Called when the cancel button is clicked.
|
||||
*/
|
||||
onCancelClick: MouseEventHandler;
|
||||
/**
|
||||
* The recovery key to display.
|
||||
*/
|
||||
recoveryKey: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* The panel to display the recovery key.
|
||||
*/
|
||||
function KeyPanel({ recoveryKey, onConfirmClick, onCancelClick }: KeyPanelProps): JSX.Element {
|
||||
return (
|
||||
<>
|
||||
<div className="mx_KeyPanel">
|
||||
<Text as="span" weight="medium">
|
||||
{_t("settings|encryption|recovery|save_key_title")}
|
||||
</Text>
|
||||
<div>
|
||||
<Text as="span" className="mx_KeyPanel_key" data-testid="recoveryKey">
|
||||
{recoveryKey}
|
||||
</Text>
|
||||
<Text as="span" size="sm">
|
||||
{_t("settings|encryption|recovery|save_key_description")}
|
||||
</Text>
|
||||
</div>
|
||||
<IconButton aria-label={_t("action|copy")} size="28px" onClick={() => copyPlaintext(recoveryKey)}>
|
||||
<CopyIcon />
|
||||
</IconButton>
|
||||
</div>
|
||||
<div className="mx_ChangeRecoveryKey_footer">
|
||||
<Button onClick={onConfirmClick}>{_t("action|continue")}</Button>
|
||||
<Button kind="tertiary" onClick={onCancelClick}>
|
||||
{_t("action|cancel")}
|
||||
</Button>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
interface KeyFormProps {
|
||||
/**
|
||||
* Called when the cancel button is clicked.
|
||||
*/
|
||||
onCancelClick: MouseEventHandler;
|
||||
/**
|
||||
* Called when the form is submitted.
|
||||
*/
|
||||
onSubmit: FormEventHandler;
|
||||
/**
|
||||
* The recovery key to confirm.
|
||||
*/
|
||||
recoveryKey: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* The form to confirm the recovery key.
|
||||
* The finish button is disabled until the key is filled and valid.
|
||||
* The entered key is valid if it matches the recovery key.
|
||||
*/
|
||||
function KeyForm({ onCancelClick, onSubmit, recoveryKey }: KeyFormProps): JSX.Element {
|
||||
// Undefined by default, as the key is not filled yet
|
||||
const [isKeyValid, setIsKeyValid] = useState<boolean>();
|
||||
const isKeyInvalidAndFilled = isKeyValid === false;
|
||||
|
||||
return (
|
||||
<Root
|
||||
className="mx_KeyForm"
|
||||
onSubmit={(evt) => {
|
||||
evt.preventDefault();
|
||||
onSubmit(evt);
|
||||
}}
|
||||
onChange={async (evt) => {
|
||||
evt.preventDefault();
|
||||
evt.stopPropagation();
|
||||
|
||||
// We don't have any file in the form, we can cast it as string safely
|
||||
const filledKey = new FormData(evt.currentTarget).get("recoveryKey") as string | "";
|
||||
setIsKeyValid(filledKey.trim() === recoveryKey);
|
||||
}}
|
||||
>
|
||||
<Field name="recoveryKey" serverInvalid={isKeyInvalidAndFilled}>
|
||||
<Label>{_t("settings|encryption|recovery|enter_recovery_key")}</Label>
|
||||
|
||||
<TextControl required={true} />
|
||||
{isKeyInvalidAndFilled && (
|
||||
<ErrorMessage>{_t("settings|encryption|recovery|enter_key_error")}</ErrorMessage>
|
||||
)}
|
||||
</Field>
|
||||
<div className="mx_ChangeRecoveryKey_footer">
|
||||
<Button disabled={!isKeyValid}>{_t("settings|encryption|recovery|confirm_finish")}</Button>
|
||||
<Button kind="tertiary" onClick={onCancelClick}>
|
||||
{_t("action|cancel")}
|
||||
</Button>
|
||||
</div>
|
||||
</Root>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,51 @@
|
|||
/*
|
||||
* 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";
|
||||
import { BigIcon, Heading } from "@vector-im/compound-web";
|
||||
import KeyIcon from "@vector-im/compound-design-tokens/assets/web/icons/key-solid";
|
||||
import classNames from "classnames";
|
||||
|
||||
interface EncryptionCardProps {
|
||||
/**
|
||||
* CSS class name to apply to the card.
|
||||
*/
|
||||
className?: string;
|
||||
/**
|
||||
* The title of the card.
|
||||
*/
|
||||
title: string;
|
||||
/**
|
||||
* The description of the card.
|
||||
*/
|
||||
description: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* A styled card for encryption settings.
|
||||
*/
|
||||
export function EncryptionCard({
|
||||
title,
|
||||
description,
|
||||
className,
|
||||
children,
|
||||
}: PropsWithChildren<EncryptionCardProps>): JSX.Element {
|
||||
return (
|
||||
<div className={classNames("mx_EncryptionCard", className)}>
|
||||
<div className="mx_EncryptionCard_header">
|
||||
<BigIcon>
|
||||
<KeyIcon />
|
||||
</BigIcon>
|
||||
<Heading as="h2" size="sm" weight="semibold">
|
||||
{title}
|
||||
</Heading>
|
||||
<span>{description}</span>
|
||||
</div>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,134 @@
|
|||
/*
|
||||
* 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, useCallback, 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 { SettingsSection } from "../shared/SettingsSection";
|
||||
import { _t } from "../../../../languageHandler";
|
||||
import { useMatrixClientContext } from "../../../../contexts/MatrixClientContext";
|
||||
import { SettingsHeader } from "../SettingsHeader";
|
||||
import { accessSecretStorage } from "../../../../SecurityManager";
|
||||
import { SettingsSubheader } from "../SettingsSubheader";
|
||||
|
||||
/**
|
||||
* The possible states of the recovery panel.
|
||||
* - `loading`: We are checking the backup, the recovery and the secrets.
|
||||
* - `missing_backup`: The user has no backup.
|
||||
* - `secrets_not_cached`: The user has a backup but the secrets are not cached.
|
||||
* - `good`: The user has a backup and the secrets are cached.
|
||||
*/
|
||||
type State = "loading" | "missing_backup" | "secrets_not_cached" | "good";
|
||||
|
||||
interface RecoveryPanelProps {
|
||||
/**
|
||||
* Callback for when the user clicks the button to set up their recovery key.
|
||||
*/
|
||||
onSetUpRecoveryClick: MouseEventHandler<HTMLButtonElement>;
|
||||
/**
|
||||
* Callback for when the user clicks the button to change their recovery key.
|
||||
*/
|
||||
onChangingRecoveryKeyClick: MouseEventHandler<HTMLButtonElement>;
|
||||
}
|
||||
|
||||
/**
|
||||
* This component allows the user to set up or change their recovery key.
|
||||
*/
|
||||
export function RecoveryPanel({ onSetUpRecoveryClick, onChangingRecoveryKeyClick }: RecoveryPanelProps): JSX.Element {
|
||||
const [state, setState] = useState<State>("loading");
|
||||
const isMissingBackup = state === "missing_backup";
|
||||
|
||||
const matrixClient = useMatrixClientContext();
|
||||
|
||||
const checkEncryption = useCallback(async () => {
|
||||
const crypto = matrixClient.getCrypto();
|
||||
if (!crypto) return;
|
||||
|
||||
// Check if the user has a backup
|
||||
const hasBackup = Boolean(await crypto.checkKeyBackupAndEnable());
|
||||
if (!hasBackup) return setState("missing_backup");
|
||||
|
||||
// Check if the secrets are cached
|
||||
const cachedSecrets = (await crypto.getCrossSigningStatus()).privateKeysCachedLocally;
|
||||
const secretsOk = cachedSecrets.masterKey && cachedSecrets.selfSigningKey && cachedSecrets.userSigningKey;
|
||||
if (!secretsOk) return setState("secrets_not_cached");
|
||||
|
||||
setState("good");
|
||||
}, [matrixClient]);
|
||||
|
||||
useEffect(() => {
|
||||
checkEncryption();
|
||||
}, [checkEncryption]);
|
||||
|
||||
let content: JSX.Element;
|
||||
switch (state) {
|
||||
case "loading":
|
||||
content = <InlineSpinner />;
|
||||
break;
|
||||
case "missing_backup":
|
||||
content = (
|
||||
<Button size="sm" kind="primary" Icon={KeyIcon} onClick={onSetUpRecoveryClick}>
|
||||
{_t("settings|encryption|recovery|set_up_recovery")}
|
||||
</Button>
|
||||
);
|
||||
break;
|
||||
case "secrets_not_cached":
|
||||
content = (
|
||||
<Button
|
||||
size="sm"
|
||||
kind="primary"
|
||||
Icon={KeyIcon}
|
||||
onClick={async () => await accessSecretStorage(checkEncryption)}
|
||||
>
|
||||
{_t("settings|encryption|recovery|enter_recovery_key")}
|
||||
</Button>
|
||||
);
|
||||
break;
|
||||
default:
|
||||
content = (
|
||||
<Button size="sm" kind="secondary" Icon={KeyIcon} onClick={onChangingRecoveryKeyClick}>
|
||||
{_t("settings|encryption|recovery|change_recovery_key")}
|
||||
</Button>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<SettingsSection
|
||||
legacy={false}
|
||||
heading={
|
||||
<SettingsHeader hasRecommendedTag={isMissingBackup} label={_t("settings|encryption|recovery|title")} />
|
||||
}
|
||||
subHeading={<Subheader state={state} />}
|
||||
>
|
||||
{content}
|
||||
</SettingsSection>
|
||||
);
|
||||
}
|
||||
|
||||
interface SubheaderProps {
|
||||
/**
|
||||
* The state of the recovery panel.
|
||||
*/
|
||||
state: State;
|
||||
}
|
||||
|
||||
/**
|
||||
* The subheader for the recovery panel.
|
||||
*/
|
||||
function Subheader({ state }: SubheaderProps): JSX.Element {
|
||||
// If we the secrets are not cached, we display a warning message.
|
||||
if (state !== "secrets_not_cached") return <>{_t("settings|encryption|recovery|description")}</>;
|
||||
|
||||
return (
|
||||
<SettingsSubheader
|
||||
label={_t("settings|encryption|recovery|description")}
|
||||
state="error"
|
||||
stateMessage={_t("settings|encryption|recovery|key_storage_warning")}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
|
@ -5,10 +5,46 @@
|
|||
* Please see LICENSE files in the repository root for full details.
|
||||
*/
|
||||
|
||||
import React, { JSX } from "react";
|
||||
import React, { JSX, useState } from "react";
|
||||
|
||||
import SettingsTab from "../SettingsTab";
|
||||
import { RecoveryPanel } from "../../encryption/RecoveryPanel";
|
||||
import { ChangeRecoveryKey } from "../../encryption/ChangeRecoveryKey";
|
||||
|
||||
type Panel = "main" | "change_recovery_key" | "set_recovery_key";
|
||||
|
||||
export function EncryptionUserSettingsTab(): JSX.Element {
|
||||
return <SettingsTab />;
|
||||
const [panel, setPanel] = useState<Panel>("main");
|
||||
|
||||
let content: JSX.Element;
|
||||
switch (panel) {
|
||||
case "main":
|
||||
content = (
|
||||
<RecoveryPanel
|
||||
onChangingRecoveryKeyClick={() => setPanel("change_recovery_key")}
|
||||
onSetUpRecoveryClick={() => setPanel("set_recovery_key")}
|
||||
/>
|
||||
);
|
||||
break;
|
||||
case "set_recovery_key":
|
||||
content = (
|
||||
<ChangeRecoveryKey
|
||||
isSetupFlow={true}
|
||||
onCancelClick={() => setPanel("main")}
|
||||
onFinish={() => setPanel("main")}
|
||||
/>
|
||||
);
|
||||
break;
|
||||
case "change_recovery_key":
|
||||
content = (
|
||||
<ChangeRecoveryKey
|
||||
isSetupFlow={false}
|
||||
onCancelClick={() => setPanel("main")}
|
||||
onFinish={() => setPanel("main")}
|
||||
/>
|
||||
);
|
||||
break;
|
||||
}
|
||||
|
||||
return <SettingsTab className="mx_EncryptionUserSettingsTab">{content}</SettingsTab>;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2464,6 +2464,26 @@
|
|||
"enable_markdown_description": "Start messages with <code>/plain</code> to send without markdown.",
|
||||
"encryption": {
|
||||
"dialog_title": "<strong>Settings:</strong> Encryption",
|
||||
"recovery": {
|
||||
"change_recovery_key": "Change recovery key",
|
||||
"change_recovery_key_description": "Get a new recovery key if you've lost your existing one. After changing your recovery key, your old one will no longer work.",
|
||||
"change_recovery_key_title": "Change recovery key?",
|
||||
"confirm_description": "Enter the recovery key shown on the previous screen to finish setting up recovery.",
|
||||
"confirm_finish": "Finish set up",
|
||||
"confirm_title": "Enter your recovery key to confirm",
|
||||
"description": "Recover your cryptographic identity and message history with a recovery key if you’ve lost all your existing devices.",
|
||||
"enter_key_error": "The recovery key you entered is not correct.",
|
||||
"enter_recovery_key": "Enter recovery key",
|
||||
"key_storage_warning": "Your key storage is out of sync. Click the button below to fix the problem.",
|
||||
"save_key_description": "Do not share this with anyone!",
|
||||
"save_key_title": "Recovery key",
|
||||
"set_up_recovery": "Set up recovery",
|
||||
"set_up_recovery_description": "Your key storage is protected by a recovery key. If you need a new recovery key after setup, you can recreate it by selecting ‘%(changeRecoveryKeyButton)s’.",
|
||||
"set_up_recovery_save_key_description": "Write down this recovery key somewhere safe, like a password manager, encrypted note, or a physical safe.",
|
||||
"set_up_recovery_save_key_title": "Save your recovery key somewhere safe",
|
||||
"set_up_recovery_secondary_description": "After clicking continue, we’ll generate a recovery key for you.",
|
||||
"title": "Recovery"
|
||||
},
|
||||
"title": "Encryption"
|
||||
},
|
||||
"general": {
|
||||
|
|
|
|||
Loading…
Reference in New Issue