mirror of
https://github.com/vector-im/element-web.git
synced 2026-05-05 20:26:19 +02:00
Refactor EncryptionCard -> InformationCard
This commit is contained in:
Half-Shot
parent
147f2ba064
commit
34f19f0c20
@ -593,7 +593,7 @@ legend {
|
||||
.mx_Dialog
|
||||
button:not(
|
||||
.mx_EncryptionUserSettingsTab button,
|
||||
.mx_EncryptionCard button,
|
||||
.mx_InformationCard button,
|
||||
.mx_UserProfileSettings button,
|
||||
.mx_ShareDialog button,
|
||||
.mx_UnpinAllDialog button,
|
||||
|
||||
@ -10,7 +10,7 @@ Please see LICENSE files in the repository root for full details.
|
||||
width: 600px;
|
||||
}
|
||||
|
||||
.mx_EncryptionCard {
|
||||
.mx_InformationCard {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
@ -7,7 +7,7 @@ Please see LICENSE files in the repository root for full details.
|
||||
*/
|
||||
|
||||
.mx_AccessSecretStorageDialog {
|
||||
&.mx_EncryptionCard {
|
||||
&.mx_InformationCard {
|
||||
/* override some styles that we don't need */
|
||||
border: 0px none;
|
||||
box-shadow: none;
|
||||
@ -56,7 +56,7 @@ Please see LICENSE files in the repository root for full details.
|
||||
}
|
||||
}
|
||||
|
||||
.mx_EncryptionCard_buttons {
|
||||
.mx_InformationCard_buttons {
|
||||
margin-top: var(--cpd-space-20x);
|
||||
}
|
||||
}
|
||||
|
||||
@ -5,17 +5,18 @@
|
||||
* Please see LICENSE files in the repository root for full details.
|
||||
*/
|
||||
|
||||
.mx_EncryptionCard {
|
||||
.mx_InformationCard {
|
||||
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 rgb(27, 29, 34, 0.15);
|
||||
border: 1px solid var(--cpd-color-gray-400);
|
||||
|
||||
.mx_EncryptionCard_header {
|
||||
border: 0px none;
|
||||
box-shadow: none;
|
||||
padding: 0px;
|
||||
|
||||
.mx_InformationCard_header {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--cpd-space-4x);
|
||||
@ -31,15 +32,14 @@
|
||||
}
|
||||
}
|
||||
|
||||
/* extra class for specifying that we don't need a border */
|
||||
&.mx_EncryptionCard_noBorder {
|
||||
border: 0px none;
|
||||
box-shadow: none;
|
||||
padding: 0px;
|
||||
&.mx_InformationCard_border {
|
||||
padding: var(--cpd-space-10x);
|
||||
box-shadow: 0 1.2px 2.4px 0 rgb(27, 29, 34, 0.15);
|
||||
border: 1px solid var(--cpd-color-gray-400);
|
||||
}
|
||||
}
|
||||
|
||||
.mx_EncryptionCard_buttons {
|
||||
.mx_InformationCard_buttons {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--cpd-space-4x);
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
* Please see LICENSE files in the repository root for full details.
|
||||
*/
|
||||
|
||||
.mx_EncryptionCard_emphasisedContent {
|
||||
.mx_InformationCard_emphasisedContent {
|
||||
span {
|
||||
font: var(--cpd-font-body-md-medium);
|
||||
text-align: center;
|
||||
|
||||
@ -9,7 +9,7 @@ import React, { type JSX, type PropsWithChildren, type ComponentType, type SVGAt
|
||||
import { BigIcon, Heading } from "@vector-im/compound-web";
|
||||
import classNames from "classnames";
|
||||
|
||||
interface EncryptionCardProps {
|
||||
interface InformationCardProps {
|
||||
/**
|
||||
* CSS class name to apply to the card.
|
||||
*/
|
||||
@ -26,6 +26,10 @@ interface EncryptionCardProps {
|
||||
* Whether this icon shows a destructive action.
|
||||
*/
|
||||
destructive?: boolean;
|
||||
/**
|
||||
* Whether the component should have a border
|
||||
*/
|
||||
border?: boolean;
|
||||
/**
|
||||
* The icon to display.
|
||||
*/
|
||||
@ -33,19 +37,30 @@ interface EncryptionCardProps {
|
||||
}
|
||||
|
||||
/**
|
||||
* A styled card for encryption settings.
|
||||
* A component to present action buttons at the bottom of an {@link EncryptionCard}
|
||||
* (mostly as somewhere for the common CSS to live).
|
||||
*/
|
||||
export function EncryptionCard({
|
||||
export function InformationCardButtons({ children }: PropsWithChildren): JSX.Element {
|
||||
return <div className="mx_InformationCard_buttons">{children}</div>;
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* A styled card for encryption settings.
|
||||
* Note: This was previously known as the EncryptionCard
|
||||
*/
|
||||
export function InformationCard({
|
||||
title,
|
||||
description,
|
||||
className,
|
||||
border = true,
|
||||
destructive = false,
|
||||
Icon,
|
||||
children,
|
||||
}: PropsWithChildren<EncryptionCardProps>): JSX.Element {
|
||||
}: PropsWithChildren<InformationCardProps>): JSX.Element {
|
||||
return (
|
||||
<div className={classNames("mx_EncryptionCard", className)}>
|
||||
<div className="mx_EncryptionCard_header">
|
||||
<div className={classNames("mx_InformationCard", className, border && "mx_InformationCard_border")}>
|
||||
<div className="mx_InformationCard_header">
|
||||
<BigIcon destructive={destructive}>
|
||||
<Icon />
|
||||
</BigIcon>
|
||||
@ -22,8 +22,7 @@ import EncryptionPanel from "../../views/right_panel/EncryptionPanel";
|
||||
import AccessibleButton from "../../views/elements/AccessibleButton";
|
||||
import Spinner from "../../views/elements/Spinner";
|
||||
import { ResetIdentityDialog } from "../../views/dialogs/ResetIdentityDialog";
|
||||
import { EncryptionCard } from "../../views/settings/encryption/EncryptionCard";
|
||||
import { EncryptionCardButtons } from "../../views/settings/encryption/EncryptionCardButtons";
|
||||
import { InformationCard, InformationCardButtons } from "../../structures/InformationCard";
|
||||
import { EncryptionCardEmphasisedContent } from "../../views/settings/encryption/EncryptionCardEmphasisedContent";
|
||||
import ExternalLink from "../../views/elements/ExternalLink";
|
||||
import dispatcher from "../../../dispatcher/dispatcher";
|
||||
@ -196,10 +195,11 @@ export default class SetupEncryptionBody extends React.Component<IProps, IState>
|
||||
}
|
||||
|
||||
return (
|
||||
<EncryptionCard
|
||||
<InformationCard
|
||||
title={_t("encryption|verification|confirm_identity_title")}
|
||||
Icon={LockIcon}
|
||||
className="mx_EncryptionCard_noBorder mx_SetupEncryptionBody"
|
||||
className="mx_SetupEncryptionBody"
|
||||
border={false}
|
||||
>
|
||||
<EncryptionCardEmphasisedContent>
|
||||
<span>{_t("encryption|verification|confirm_identity_description")}</span>
|
||||
@ -209,15 +209,15 @@ export default class SetupEncryptionBody extends React.Component<IProps, IState>
|
||||
</ExternalLink>
|
||||
</span>
|
||||
</EncryptionCardEmphasisedContent>
|
||||
<EncryptionCardButtons>
|
||||
<InformationCardButtons>
|
||||
{verifyButton}
|
||||
{useRecoveryKeyButton}
|
||||
<Button kind="secondary" onClick={this.onCantConfirmClick}>
|
||||
{_t("encryption|verification|cant_confirm")}
|
||||
</Button>
|
||||
{signOutButton}
|
||||
</EncryptionCardButtons>
|
||||
</EncryptionCard>
|
||||
</InformationCardButtons>
|
||||
</InformationCard>
|
||||
);
|
||||
} else if (phase === Phase.Done) {
|
||||
let message: JSX.Element;
|
||||
|
||||
@ -23,8 +23,7 @@ import Field from "../elements/Field";
|
||||
import Spinner from "../elements/Spinner";
|
||||
import CaptchaForm from "./CaptchaForm";
|
||||
import { pickBestPolicyLanguage } from "../../../Terms.ts";
|
||||
import { EncryptionCardButtons } from "../settings/encryption/EncryptionCardButtons.tsx";
|
||||
import { EncryptionCard } from "../settings/encryption/EncryptionCard.tsx";
|
||||
import { InformationCard, InformationCardButtons } from "../../structures/InformationCard.tsx";
|
||||
|
||||
/* This file contains a collection of components which are used by the
|
||||
* InteractiveAuth to prompt the user to enter the information needed
|
||||
@ -973,14 +972,14 @@ export class MasUnlockCrossSigningAuthEntry extends FallbackAuthEntry<{
|
||||
|
||||
public render(): React.ReactNode {
|
||||
return (
|
||||
<EncryptionCard
|
||||
<InformationCard
|
||||
Icon={UserProfileSolidIcon}
|
||||
title={_t("auth|uia|mas_cross_signing_reset_title")}
|
||||
description={_t("auth|uia|mas_cross_signing_reset_description", {
|
||||
serverName: this.props.matrixClient.getDomain(),
|
||||
})}
|
||||
>
|
||||
<EncryptionCardButtons>
|
||||
<InformationCardButtons>
|
||||
<Button
|
||||
Icon={PopOutIcon}
|
||||
onClick={this.onGoToAccountClick}
|
||||
@ -993,8 +992,8 @@ export class MasUnlockCrossSigningAuthEntry extends FallbackAuthEntry<{
|
||||
<Button onClick={this.onRetryClick} kind="tertiary" className="mx_Dialog_nonDialogButton">
|
||||
{_t("action|retry")}
|
||||
</Button>
|
||||
</EncryptionCardButtons>
|
||||
</EncryptionCard>
|
||||
</InformationCardButtons>
|
||||
</InformationCard>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@ -12,8 +12,7 @@ import { PopOutIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
|
||||
|
||||
import { _t } from "../../../languageHandler";
|
||||
import defaultDispatcher from "../../../dispatcher/dispatcher";
|
||||
import { EncryptionCard } from "../settings/encryption/EncryptionCard";
|
||||
import { EncryptionCardButtons } from "../settings/encryption/EncryptionCardButtons";
|
||||
import { InformationCard, InformationCardButtons } from "../../structures/InformationCard";
|
||||
import { type OpenToTabPayload } from "../../../dispatcher/payloads/OpenToTabPayload";
|
||||
import { Action } from "../../../dispatcher/actions";
|
||||
import { UserTab } from "./UserTab";
|
||||
@ -52,7 +51,7 @@ export default class ConfirmKeyStorageOffDialog extends React.Component<Props> {
|
||||
|
||||
public render(): React.ReactNode {
|
||||
return (
|
||||
<EncryptionCard
|
||||
<InformationCard
|
||||
Icon={ErrorIcon}
|
||||
destructive={true}
|
||||
title={_t("settings|encryption|confirm_key_storage_off")}
|
||||
@ -67,15 +66,15 @@ export default class ConfirmKeyStorageOffDialog extends React.Component<Props> {
|
||||
</>
|
||||
),
|
||||
})}
|
||||
<EncryptionCardButtons>
|
||||
<InformationCardButtons>
|
||||
<Button onClick={this.onGoToSettingsClick} autoFocus kind="primary" className="">
|
||||
{_t("common|go_to_settings")}
|
||||
</Button>
|
||||
<Button onClick={this.onDismissClick} kind="secondary">
|
||||
{_t("action|yes_dismiss")}
|
||||
</Button>
|
||||
</EncryptionCardButtons>
|
||||
</EncryptionCard>
|
||||
</InformationCardButtons>
|
||||
</InformationCard>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@ -15,8 +15,7 @@ import { type SecretStorage } from "matrix-js-sdk/src/matrix";
|
||||
|
||||
import { Flex } from "../../../../../packages/shared-components/src/utils/Flex";
|
||||
import { _t } from "../../../../languageHandler";
|
||||
import { EncryptionCard } from "../../settings/encryption/EncryptionCard";
|
||||
import { EncryptionCardButtons } from "../../settings/encryption/EncryptionCardButtons";
|
||||
import { InformationCard, InformationCardButtons } from "../../../structures/InformationCard";
|
||||
import BaseDialog from "../BaseDialog";
|
||||
|
||||
// Don't shout at the user that their key is invalid every time they type a key: wait a short time
|
||||
@ -192,14 +191,14 @@ export default class AccessSecretStorageDialog extends React.PureComponent<IProp
|
||||
/>
|
||||
</div>
|
||||
{recoveryKeyFeedback}
|
||||
<EncryptionCardButtons>
|
||||
<InformationCardButtons>
|
||||
<Button disabled={!this.state.recoveryKeyCorrect} onClick={this.onRecoveryKeyNext}>
|
||||
{_t("action|continue")}
|
||||
</Button>
|
||||
<Button kind="tertiary" onClick={this.onCancel}>
|
||||
{_t("action|cancel")}
|
||||
</Button>
|
||||
</EncryptionCardButtons>
|
||||
</InformationCardButtons>
|
||||
</form>
|
||||
</div>
|
||||
);
|
||||
@ -208,14 +207,14 @@ export default class AccessSecretStorageDialog extends React.PureComponent<IProp
|
||||
// SettingsDialog is open, then the `FocusLock` in *that* stops us getting the focus.
|
||||
return (
|
||||
<BaseDialog fixedWidth={false} hasCancel={false}>
|
||||
<EncryptionCard
|
||||
<InformationCard
|
||||
Icon={LockSolidIcon}
|
||||
className="mx_AccessSecretStorageDialog"
|
||||
title={title}
|
||||
description={_t("encryption|access_secret_storage_dialog|privacy_warning")}
|
||||
>
|
||||
{content}
|
||||
</EncryptionCard>
|
||||
</InformationCard>
|
||||
</BaseDialog>
|
||||
);
|
||||
}
|
||||
|
||||
@ -21,13 +21,12 @@ import CopyIcon from "@vector-im/compound-design-tokens/assets/web/icons/copy";
|
||||
import KeyIcon from "@vector-im/compound-design-tokens/assets/web/icons/key-solid";
|
||||
|
||||
import { _t } from "../../../../languageHandler";
|
||||
import { EncryptionCard } from "./EncryptionCard";
|
||||
import { InformationCard, InformationCardButtons } from "../../../structures/InformationCard.tsx";
|
||||
import { useMatrixClientContext } from "../../../../contexts/MatrixClientContext";
|
||||
import { useAsyncMemo } from "../../../../hooks/useAsyncMemo";
|
||||
import { copyPlaintext } from "../../../../utils/strings";
|
||||
import { initialiseDehydrationIfEnabled } from "../../../../utils/device/dehydration.ts";
|
||||
import { withSecretStorageKeyCache } from "../../../../SecurityManager";
|
||||
import { EncryptionCardButtons } from "./EncryptionCardButtons";
|
||||
import { logErrorAndShowErrorDialog } from "../../../../utils/ErrorUtils.tsx";
|
||||
import { RECOVERY_ACCOUNT_DATA_KEY } from "../../../../DeviceListener";
|
||||
|
||||
@ -166,14 +165,14 @@ export function ChangeRecoveryKey({
|
||||
pages={pages}
|
||||
onPageClick={onCancelClick}
|
||||
/>
|
||||
<EncryptionCard
|
||||
<InformationCard
|
||||
Icon={KeyIcon}
|
||||
title={labels.title}
|
||||
description={labels.description}
|
||||
className="mx_ChangeRecoveryKey"
|
||||
>
|
||||
{content}
|
||||
</EncryptionCard>
|
||||
</InformationCard>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@ -245,12 +244,12 @@ function InformationPanel({ onContinueClick, onCancelClick }: InformationPanelPr
|
||||
<Text as="span" weight="medium" className="mx_InformationPanel_description">
|
||||
{_t("settings|encryption|recovery|set_up_recovery_secondary_description")}
|
||||
</Text>
|
||||
<EncryptionCardButtons>
|
||||
<InformationCardButtons>
|
||||
<Button onClick={onContinueClick}>{_t("action|continue")}</Button>
|
||||
<Button kind="tertiary" onClick={onCancelClick}>
|
||||
{_t("action|cancel")}
|
||||
</Button>
|
||||
</EncryptionCardButtons>
|
||||
</InformationCardButtons>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@ -292,12 +291,12 @@ function KeyPanel({ recoveryKey, onConfirmClick, onCancelClick }: KeyPanelProps)
|
||||
<CopyIcon />
|
||||
</IconButton>
|
||||
</div>
|
||||
<EncryptionCardButtons>
|
||||
<InformationCardButtons>
|
||||
<Button onClick={onConfirmClick}>{_t("action|continue")}</Button>
|
||||
<Button kind="tertiary" onClick={onCancelClick}>
|
||||
{_t("action|cancel")}
|
||||
</Button>
|
||||
</EncryptionCardButtons>
|
||||
</InformationCardButtons>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@ -367,12 +366,12 @@ function KeyForm({ onCancelClick, onSubmit, recoveryKey, submitButtonLabel }: Ke
|
||||
<ErrorMessage>{_t("settings|encryption|recovery|enter_key_error")}</ErrorMessage>
|
||||
)}
|
||||
</Field>
|
||||
<EncryptionCardButtons>
|
||||
<InformationCardButtons>
|
||||
<Button disabled={!isKeyValid || isKeyChangeInProgress}>{submitButtonLabel}</Button>
|
||||
<Button kind="tertiary" onClick={onCancelClick}>
|
||||
{_t("action|cancel")}
|
||||
</Button>
|
||||
</EncryptionCardButtons>
|
||||
</InformationCardButtons>
|
||||
</Root>
|
||||
);
|
||||
}
|
||||
|
||||
@ -11,10 +11,9 @@ import ErrorIcon from "@vector-im/compound-design-tokens/assets/web/icons/error-
|
||||
import React, { type JSX, useCallback, useState } from "react";
|
||||
|
||||
import { _t } from "../../../../languageHandler";
|
||||
import { EncryptionCard } from "./EncryptionCard";
|
||||
import { InformationCard, InformationCardButtons } from "../../../structures/InformationCard.tsx";
|
||||
import { useKeyStoragePanelViewModel } from "../../../viewmodels/settings/encryption/KeyStoragePanelViewModel";
|
||||
import SdkConfig from "../../../../SdkConfig";
|
||||
import { EncryptionCardButtons } from "./EncryptionCardButtons";
|
||||
import { EncryptionCardEmphasisedContent } from "./EncryptionCardEmphasisedContent";
|
||||
|
||||
interface Props {
|
||||
@ -49,7 +48,7 @@ export function DeleteKeyStoragePanel({ onFinish }: Props): JSX.Element {
|
||||
pages={[_t("settings|encryption|title"), _t("settings|encryption|delete_key_storage|breadcrumb_page")]}
|
||||
onPageClick={onFinish}
|
||||
/>
|
||||
<EncryptionCard
|
||||
<InformationCard
|
||||
Icon={ErrorIcon}
|
||||
destructive={true}
|
||||
title={_t("settings|encryption|delete_key_storage|title")}
|
||||
@ -65,15 +64,15 @@ export function DeleteKeyStoragePanel({ onFinish }: Props): JSX.Element {
|
||||
</VisualListItem>
|
||||
</VisualList>
|
||||
</EncryptionCardEmphasisedContent>
|
||||
<EncryptionCardButtons>
|
||||
<InformationCardButtons>
|
||||
<Button destructive={true} onClick={onDeleteClick} disabled={busy}>
|
||||
{_t("settings|encryption|delete_key_storage|confirm")}
|
||||
</Button>
|
||||
<Button kind="tertiary" onClick={onFinish}>
|
||||
{_t("action|cancel")}
|
||||
</Button>
|
||||
</EncryptionCardButtons>
|
||||
</EncryptionCard>
|
||||
</InformationCardButtons>
|
||||
</InformationCard>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,16 +0,0 @@
|
||||
/*
|
||||
* 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, { type JSX, type PropsWithChildren } from "react";
|
||||
|
||||
/**
|
||||
* A component to present action buttons at the bottom of an {@link EncryptionCard}
|
||||
* (mostly as somewhere for the common CSS to live).
|
||||
*/
|
||||
export function EncryptionCardButtons({ children }: PropsWithChildren): JSX.Element {
|
||||
return <div className="mx_EncryptionCard_buttons">{children}</div>;
|
||||
}
|
||||
@ -19,7 +19,7 @@ export function EncryptionCardEmphasisedContent({ children }: PropsWithChildren)
|
||||
direction="column"
|
||||
gap="var(--cpd-space-3x)"
|
||||
align="normal"
|
||||
className="mx_EncryptionCard_emphasisedContent"
|
||||
className="mx_InformationCard_emphasisedContent"
|
||||
>
|
||||
{children}
|
||||
</Flex>
|
||||
|
||||
@ -12,9 +12,8 @@ import ErrorIcon from "@vector-im/compound-design-tokens/assets/web/icons/error-
|
||||
import React, { type JSX, useState } from "react";
|
||||
|
||||
import { _t } from "../../../../languageHandler";
|
||||
import { EncryptionCard } from "./EncryptionCard";
|
||||
import { InformationCard, InformationCardButtons } from "../../../structures/InformationCard.tsx";
|
||||
import { uiAuthCallback } from "../../../../CreateCrossSigning";
|
||||
import { EncryptionCardButtons } from "./EncryptionCardButtons";
|
||||
import { EncryptionCardEmphasisedContent } from "./EncryptionCardEmphasisedContent";
|
||||
import { useMatrixClientContext } from "../../../../contexts/MatrixClientContext";
|
||||
|
||||
@ -68,7 +67,7 @@ export function ResetIdentityBody({ onCancelClick, onReset, variant }: ResetIden
|
||||
const [inProgress, setInProgress] = useState(false);
|
||||
|
||||
return (
|
||||
<EncryptionCard Icon={ErrorIcon} destructive={true} title={titleForVariant(variant)}>
|
||||
<InformationCard Icon={ErrorIcon} destructive={true} title={titleForVariant(variant)}>
|
||||
<EncryptionCardEmphasisedContent>
|
||||
<VisualList>
|
||||
<VisualListItem Icon={CheckIcon} success={true}>
|
||||
@ -83,7 +82,7 @@ export function ResetIdentityBody({ onCancelClick, onReset, variant }: ResetIden
|
||||
</VisualList>
|
||||
{variant === "compromised" && <span>{_t("settings|encryption|advanced|breadcrumb_warning")}</span>}
|
||||
</EncryptionCardEmphasisedContent>
|
||||
<EncryptionCardButtons>
|
||||
<InformationCardButtons>
|
||||
<Button
|
||||
destructive={true}
|
||||
disabled={inProgress}
|
||||
@ -114,8 +113,8 @@ export function ResetIdentityBody({ onCancelClick, onReset, variant }: ResetIden
|
||||
{_t("action|cancel")}
|
||||
</Button>
|
||||
)}
|
||||
</EncryptionCardButtons>
|
||||
</EncryptionCard>
|
||||
</InformationCardButtons>
|
||||
</InformationCard>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@ -33,10 +33,10 @@ exports[`CompleteSecurity Allows verifying with another device if one is availab
|
||||
class="mx_CompleteSecurity_body"
|
||||
>
|
||||
<div
|
||||
class="mx_EncryptionCard mx_EncryptionCard_noBorder mx_SetupEncryptionBody"
|
||||
class="mx_InformationCard mx_InformationCard_noBorder mx_SetupEncryptionBody"
|
||||
>
|
||||
<div
|
||||
class="mx_EncryptionCard_header"
|
||||
class="mx_InformationCard_header"
|
||||
>
|
||||
<div
|
||||
class="_content_o77nw_8"
|
||||
@ -61,7 +61,7 @@ exports[`CompleteSecurity Allows verifying with another device if one is availab
|
||||
</h2>
|
||||
</div>
|
||||
<div
|
||||
class="flex mx_EncryptionCard_emphasisedContent"
|
||||
class="flex mx_InformationCard_emphasisedContent"
|
||||
style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: normal; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
|
||||
>
|
||||
<span>
|
||||
@ -82,7 +82,7 @@ exports[`CompleteSecurity Allows verifying with another device if one is availab
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="mx_EncryptionCard_buttons"
|
||||
class="mx_InformationCard_buttons"
|
||||
>
|
||||
<button
|
||||
class="_button_vczzf_8"
|
||||
@ -199,10 +199,10 @@ exports[`CompleteSecurity Allows verifying with recovery key if one is available
|
||||
class="mx_CompleteSecurity_body"
|
||||
>
|
||||
<div
|
||||
class="mx_EncryptionCard mx_EncryptionCard_noBorder mx_SetupEncryptionBody"
|
||||
class="mx_InformationCard mx_InformationCard_noBorder mx_SetupEncryptionBody"
|
||||
>
|
||||
<div
|
||||
class="mx_EncryptionCard_header"
|
||||
class="mx_InformationCard_header"
|
||||
>
|
||||
<div
|
||||
class="_content_o77nw_8"
|
||||
@ -227,7 +227,7 @@ exports[`CompleteSecurity Allows verifying with recovery key if one is available
|
||||
</h2>
|
||||
</div>
|
||||
<div
|
||||
class="flex mx_EncryptionCard_emphasisedContent"
|
||||
class="flex mx_InformationCard_emphasisedContent"
|
||||
style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: normal; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
|
||||
>
|
||||
<span>
|
||||
@ -248,7 +248,7 @@ exports[`CompleteSecurity Allows verifying with recovery key if one is available
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="mx_EncryptionCard_buttons"
|
||||
class="mx_InformationCard_buttons"
|
||||
>
|
||||
<button
|
||||
class="_button_vczzf_8"
|
||||
|
||||
@ -36,10 +36,10 @@ exports[`<EmailIdentityAuthEntry/> should render 1`] = `
|
||||
exports[`<MasUnlockCrossSigningAuthEntry/> should render 1`] = `
|
||||
<div>
|
||||
<div
|
||||
class="mx_EncryptionCard"
|
||||
class="mx_InformationCard"
|
||||
>
|
||||
<div
|
||||
class="mx_EncryptionCard_header"
|
||||
class="mx_InformationCard_header"
|
||||
>
|
||||
<div
|
||||
class="_content_o77nw_8"
|
||||
@ -70,7 +70,7 @@ exports[`<MasUnlockCrossSigningAuthEntry/> should render 1`] = `
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="mx_EncryptionCard_buttons"
|
||||
class="mx_InformationCard_buttons"
|
||||
>
|
||||
<button
|
||||
class="_button_vczzf_8 mx_Dialog_nonDialogButton _has-icon_vczzf_57"
|
||||
|
||||
@ -3,10 +3,10 @@
|
||||
exports[`ConfirmKeyStorageOffDialog renders 1`] = `
|
||||
<DocumentFragment>
|
||||
<div
|
||||
class="mx_EncryptionCard"
|
||||
class="mx_InformationCard"
|
||||
>
|
||||
<div
|
||||
class="mx_EncryptionCard_header"
|
||||
class="mx_InformationCard_header"
|
||||
>
|
||||
<div
|
||||
class="_content_o77nw_8 _destructive_o77nw_34"
|
||||
@ -56,7 +56,7 @@ exports[`ConfirmKeyStorageOffDialog renders 1`] = `
|
||||
</a>
|
||||
</span>
|
||||
<div
|
||||
class="mx_EncryptionCard_buttons"
|
||||
class="mx_InformationCard_buttons"
|
||||
>
|
||||
<button
|
||||
class="_button_vczzf_8"
|
||||
|
||||
@ -9,14 +9,14 @@ import React from "react";
|
||||
import { render } from "jest-matrix-react";
|
||||
import KeyIcon from "@vector-im/compound-design-tokens/assets/web/icons/key-solid";
|
||||
|
||||
import { EncryptionCard } from "../../../../../../src/components/views/settings/encryption/EncryptionCard";
|
||||
import { InformationCard } from "../../../../../../src/components/structures/InformationCard";
|
||||
|
||||
describe("<EncryptionCard />", () => {
|
||||
describe("<InformationCard />", () => {
|
||||
it("should render", () => {
|
||||
const { asFragment } = render(
|
||||
<EncryptionCard Icon={KeyIcon} title="My title" description="My description">
|
||||
<InformationCard Icon={KeyIcon} title="My title" description="My description">
|
||||
Encryption card children
|
||||
</EncryptionCard>,
|
||||
</InformationCard>,
|
||||
);
|
||||
expect(asFragment()).toMatchSnapshot();
|
||||
});
|
||||
|
||||
@ -56,10 +56,10 @@ exports[`<ChangeRecoveryKey /> flow to change the recovery key should display th
|
||||
</ol>
|
||||
</nav>
|
||||
<div
|
||||
class="mx_EncryptionCard mx_ChangeRecoveryKey"
|
||||
class="mx_InformationCard mx_ChangeRecoveryKey"
|
||||
>
|
||||
<div
|
||||
class="mx_EncryptionCard_header"
|
||||
class="mx_InformationCard_header"
|
||||
>
|
||||
<div
|
||||
class="_content_o77nw_8"
|
||||
@ -137,7 +137,7 @@ exports[`<ChangeRecoveryKey /> flow to change the recovery key should display th
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
class="mx_EncryptionCard_buttons"
|
||||
class="mx_InformationCard_buttons"
|
||||
>
|
||||
<button
|
||||
class="_button_vczzf_8"
|
||||
@ -218,10 +218,10 @@ exports[`<ChangeRecoveryKey /> flow to set up a recovery key should ask the user
|
||||
</ol>
|
||||
</nav>
|
||||
<div
|
||||
class="mx_EncryptionCard mx_ChangeRecoveryKey"
|
||||
class="mx_InformationCard mx_ChangeRecoveryKey"
|
||||
>
|
||||
<div
|
||||
class="mx_EncryptionCard_header"
|
||||
class="mx_InformationCard_header"
|
||||
>
|
||||
<div
|
||||
class="_content_o77nw_8"
|
||||
@ -294,7 +294,7 @@ exports[`<ChangeRecoveryKey /> flow to set up a recovery key should ask the user
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="mx_EncryptionCard_buttons"
|
||||
class="mx_InformationCard_buttons"
|
||||
>
|
||||
<button
|
||||
aria-disabled="true"
|
||||
@ -377,10 +377,10 @@ exports[`<ChangeRecoveryKey /> flow to set up a recovery key should ask the user
|
||||
</ol>
|
||||
</nav>
|
||||
<div
|
||||
class="mx_EncryptionCard mx_ChangeRecoveryKey"
|
||||
class="mx_InformationCard mx_ChangeRecoveryKey"
|
||||
>
|
||||
<div
|
||||
class="mx_EncryptionCard_header"
|
||||
class="mx_InformationCard_header"
|
||||
>
|
||||
<div
|
||||
class="_content_o77nw_8"
|
||||
@ -475,7 +475,7 @@ exports[`<ChangeRecoveryKey /> flow to set up a recovery key should ask the user
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="mx_EncryptionCard_buttons"
|
||||
class="mx_InformationCard_buttons"
|
||||
>
|
||||
<button
|
||||
aria-disabled="true"
|
||||
@ -558,10 +558,10 @@ exports[`<ChangeRecoveryKey /> flow to set up a recovery key should display info
|
||||
</ol>
|
||||
</nav>
|
||||
<div
|
||||
class="mx_EncryptionCard mx_ChangeRecoveryKey"
|
||||
class="mx_InformationCard mx_ChangeRecoveryKey"
|
||||
>
|
||||
<div
|
||||
class="mx_EncryptionCard_header"
|
||||
class="mx_InformationCard_header"
|
||||
>
|
||||
<div
|
||||
class="_content_o77nw_8"
|
||||
@ -594,7 +594,7 @@ exports[`<ChangeRecoveryKey /> flow to set up a recovery key should display info
|
||||
After clicking continue, we’ll generate a recovery key for you.
|
||||
</span>
|
||||
<div
|
||||
class="mx_EncryptionCard_buttons"
|
||||
class="mx_InformationCard_buttons"
|
||||
>
|
||||
<button
|
||||
class="_button_vczzf_8"
|
||||
@ -675,10 +675,10 @@ exports[`<ChangeRecoveryKey /> flow to set up a recovery key should display the
|
||||
</ol>
|
||||
</nav>
|
||||
<div
|
||||
class="mx_EncryptionCard mx_ChangeRecoveryKey"
|
||||
class="mx_InformationCard mx_ChangeRecoveryKey"
|
||||
>
|
||||
<div
|
||||
class="mx_EncryptionCard_header"
|
||||
class="mx_InformationCard_header"
|
||||
>
|
||||
<div
|
||||
class="_content_o77nw_8"
|
||||
@ -756,7 +756,7 @@ exports[`<ChangeRecoveryKey /> flow to set up a recovery key should display the
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
class="mx_EncryptionCard_buttons"
|
||||
class="mx_InformationCard_buttons"
|
||||
>
|
||||
<button
|
||||
class="_button_vczzf_8"
|
||||
|
||||
@ -56,10 +56,10 @@ exports[`<DeleteKeyStoragePanel /> should match snapshot 1`] = `
|
||||
</ol>
|
||||
</nav>
|
||||
<div
|
||||
class="mx_EncryptionCard"
|
||||
class="mx_InformationCard"
|
||||
>
|
||||
<div
|
||||
class="mx_EncryptionCard_header"
|
||||
class="mx_InformationCard_header"
|
||||
>
|
||||
<div
|
||||
class="_content_o77nw_8 _destructive_o77nw_34"
|
||||
@ -84,7 +84,7 @@ exports[`<DeleteKeyStoragePanel /> should match snapshot 1`] = `
|
||||
</h2>
|
||||
</div>
|
||||
<div
|
||||
class="flex mx_EncryptionCard_emphasisedContent"
|
||||
class="flex mx_InformationCard_emphasisedContent"
|
||||
style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: normal; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
|
||||
>
|
||||
Deleting key storage will remove your cryptographic identity and message keys from the server and turn off the following security features:
|
||||
@ -130,7 +130,7 @@ exports[`<DeleteKeyStoragePanel /> should match snapshot 1`] = `
|
||||
</ul>
|
||||
</div>
|
||||
<div
|
||||
class="mx_EncryptionCard_buttons"
|
||||
class="mx_InformationCard_buttons"
|
||||
>
|
||||
<button
|
||||
aria-disabled="false"
|
||||
|
||||
@ -1,12 +1,12 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`<EncryptionCard /> should render 1`] = `
|
||||
exports[`<InformationCard /> should render 1`] = `
|
||||
<DocumentFragment>
|
||||
<div
|
||||
class="mx_EncryptionCard"
|
||||
class="mx_InformationCard"
|
||||
>
|
||||
<div
|
||||
class="mx_EncryptionCard_header"
|
||||
class="mx_InformationCard_header"
|
||||
>
|
||||
<div
|
||||
class="_content_o77nw_8"
|
||||
|
||||
@ -56,10 +56,10 @@ exports[`<ResetIdentityPanel /> should display the 'forgot recovery key' variant
|
||||
</ol>
|
||||
</nav>
|
||||
<div
|
||||
class="mx_EncryptionCard"
|
||||
class="mx_InformationCard"
|
||||
>
|
||||
<div
|
||||
class="mx_EncryptionCard_header"
|
||||
class="mx_InformationCard_header"
|
||||
>
|
||||
<div
|
||||
class="_content_o77nw_8 _destructive_o77nw_34"
|
||||
@ -84,7 +84,7 @@ exports[`<ResetIdentityPanel /> should display the 'forgot recovery key' variant
|
||||
</h2>
|
||||
</div>
|
||||
<div
|
||||
class="flex mx_EncryptionCard_emphasisedContent"
|
||||
class="flex mx_InformationCard_emphasisedContent"
|
||||
style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: normal; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
|
||||
>
|
||||
<ul
|
||||
@ -157,7 +157,7 @@ exports[`<ResetIdentityPanel /> should display the 'forgot recovery key' variant
|
||||
</ul>
|
||||
</div>
|
||||
<div
|
||||
class="mx_EncryptionCard_buttons"
|
||||
class="mx_InformationCard_buttons"
|
||||
>
|
||||
<button
|
||||
aria-disabled="false"
|
||||
@ -239,10 +239,10 @@ exports[`<ResetIdentityPanel /> should display the 'sync failed' variant correct
|
||||
</ol>
|
||||
</nav>
|
||||
<div
|
||||
class="mx_EncryptionCard"
|
||||
class="mx_InformationCard"
|
||||
>
|
||||
<div
|
||||
class="mx_EncryptionCard_header"
|
||||
class="mx_InformationCard_header"
|
||||
>
|
||||
<div
|
||||
class="_content_o77nw_8 _destructive_o77nw_34"
|
||||
@ -267,7 +267,7 @@ exports[`<ResetIdentityPanel /> should display the 'sync failed' variant correct
|
||||
</h2>
|
||||
</div>
|
||||
<div
|
||||
class="flex mx_EncryptionCard_emphasisedContent"
|
||||
class="flex mx_InformationCard_emphasisedContent"
|
||||
style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: normal; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
|
||||
>
|
||||
<ul
|
||||
@ -340,7 +340,7 @@ exports[`<ResetIdentityPanel /> should display the 'sync failed' variant correct
|
||||
</ul>
|
||||
</div>
|
||||
<div
|
||||
class="mx_EncryptionCard_buttons"
|
||||
class="mx_InformationCard_buttons"
|
||||
>
|
||||
<button
|
||||
aria-disabled="false"
|
||||
@ -422,10 +422,10 @@ exports[`<ResetIdentityPanel /> should reset the encryption when the continue bu
|
||||
</ol>
|
||||
</nav>
|
||||
<div
|
||||
class="mx_EncryptionCard"
|
||||
class="mx_InformationCard"
|
||||
>
|
||||
<div
|
||||
class="mx_EncryptionCard_header"
|
||||
class="mx_InformationCard_header"
|
||||
>
|
||||
<div
|
||||
class="_content_o77nw_8 _destructive_o77nw_34"
|
||||
@ -450,7 +450,7 @@ exports[`<ResetIdentityPanel /> should reset the encryption when the continue bu
|
||||
</h2>
|
||||
</div>
|
||||
<div
|
||||
class="flex mx_EncryptionCard_emphasisedContent"
|
||||
class="flex mx_InformationCard_emphasisedContent"
|
||||
style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: normal; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
|
||||
>
|
||||
<ul
|
||||
@ -526,7 +526,7 @@ exports[`<ResetIdentityPanel /> should reset the encryption when the continue bu
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="mx_EncryptionCard_buttons"
|
||||
class="mx_InformationCard_buttons"
|
||||
>
|
||||
<button
|
||||
aria-disabled="false"
|
||||
@ -608,10 +608,10 @@ exports[`<ResetIdentityPanel /> should reset the encryption when the continue bu
|
||||
</ol>
|
||||
</nav>
|
||||
<div
|
||||
class="mx_EncryptionCard"
|
||||
class="mx_InformationCard"
|
||||
>
|
||||
<div
|
||||
class="mx_EncryptionCard_header"
|
||||
class="mx_InformationCard_header"
|
||||
>
|
||||
<div
|
||||
class="_content_o77nw_8 _destructive_o77nw_34"
|
||||
@ -636,7 +636,7 @@ exports[`<ResetIdentityPanel /> should reset the encryption when the continue bu
|
||||
</h2>
|
||||
</div>
|
||||
<div
|
||||
class="flex mx_EncryptionCard_emphasisedContent"
|
||||
class="flex mx_InformationCard_emphasisedContent"
|
||||
style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: normal; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
|
||||
>
|
||||
<ul
|
||||
@ -712,7 +712,7 @@ exports[`<ResetIdentityPanel /> should reset the encryption when the continue bu
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="mx_EncryptionCard_buttons"
|
||||
class="mx_InformationCard_buttons"
|
||||
>
|
||||
<button
|
||||
aria-disabled="true"
|
||||
@ -740,7 +740,7 @@ exports[`<ResetIdentityPanel /> should reset the encryption when the continue bu
|
||||
Reset in progress...
|
||||
</button>
|
||||
<div
|
||||
class="flex mx_EncryptionCard_emphasisedContent"
|
||||
class="flex mx_InformationCard_emphasisedContent"
|
||||
style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: normal; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
|
||||
>
|
||||
<span
|
||||
|
||||
@ -227,10 +227,10 @@ exports[`<EncryptionUserSettingsTab /> should display the reset identity panel w
|
||||
</ol>
|
||||
</nav>
|
||||
<div
|
||||
class="mx_EncryptionCard"
|
||||
class="mx_InformationCard"
|
||||
>
|
||||
<div
|
||||
class="mx_EncryptionCard_header"
|
||||
class="mx_InformationCard_header"
|
||||
>
|
||||
<div
|
||||
class="_content_o77nw_8 _destructive_o77nw_34"
|
||||
@ -255,7 +255,7 @@ exports[`<EncryptionUserSettingsTab /> should display the reset identity panel w
|
||||
</h2>
|
||||
</div>
|
||||
<div
|
||||
class="flex mx_EncryptionCard_emphasisedContent"
|
||||
class="flex mx_InformationCard_emphasisedContent"
|
||||
style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: normal; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
|
||||
>
|
||||
<ul
|
||||
@ -331,7 +331,7 @@ exports[`<EncryptionUserSettingsTab /> should display the reset identity panel w
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="mx_EncryptionCard_buttons"
|
||||
class="mx_InformationCard_buttons"
|
||||
>
|
||||
<button
|
||||
aria-disabled="false"
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user