From 038fb53b697e165a49dd0dbcf4c0633665e6c93a Mon Sep 17 00:00:00 2001 From: Kerry Archibald Date: Wed, 26 Oct 2022 11:17:47 +0200 Subject: [PATCH] extract device security learn more with content into component --- src/components/views/elements/LearnMore.tsx | 4 +- .../devices/DeviceSecurityLearnMore.tsx | 81 +++++++++++++++++++ .../settings/devices/FilteredDeviceList.tsx | 42 +--------- 3 files changed, 87 insertions(+), 40 deletions(-) create mode 100644 src/components/views/settings/devices/DeviceSecurityLearnMore.tsx diff --git a/src/components/views/elements/LearnMore.tsx b/src/components/views/elements/LearnMore.tsx index 1a96e3d8f4..16c82a3626 100644 --- a/src/components/views/elements/LearnMore.tsx +++ b/src/components/views/elements/LearnMore.tsx @@ -21,12 +21,12 @@ import Modal from '../../../Modal'; import InfoDialog from '../dialogs/InfoDialog'; import AccessibleButton, { IAccessibleButtonProps } from './AccessibleButton'; -interface Props extends IAccessibleButtonProps { +export interface LearnMoreProps extends IAccessibleButtonProps { title: string; description: string | React.ReactNode; } -const LearnMore: React.FC = ({ +const LearnMore: React.FC = ({ title, description, ...rest diff --git a/src/components/views/settings/devices/DeviceSecurityLearnMore.tsx b/src/components/views/settings/devices/DeviceSecurityLearnMore.tsx new file mode 100644 index 0000000000..8677afcbee --- /dev/null +++ b/src/components/views/settings/devices/DeviceSecurityLearnMore.tsx @@ -0,0 +1,81 @@ +/* +Copyright 2022 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 React from 'react'; + +import { _t } from "../../../../languageHandler"; +import LearnMore, { LearnMoreProps } from "../../elements/LearnMore"; +import { DeviceSecurityVariation } from "./types"; + +interface Props extends Omit { + variation: DeviceSecurityVariation; +} + +const securityCardContent: Record = { + [DeviceSecurityVariation.Verified]: { + title: _t('Verified sessions'), + description: <> +

{ _t('Verified sessions have logged in with your credentials and then been verified, either using your secure passphrase or by cross-verifying.') } +

+

+ { _t( + `This means they hold encryption keys for your previous messages, ` + + `and confirm to other users you are communicating with that these sessions are really you.`, + ) + } +

+ , + }, + [DeviceSecurityVariation.Unverified]: { + title: _t('Unverified sessions'), + description: <> +

{ _t('Unverified sessions are sessions that have logged in with your credentials but have not been cross-verified.') } +

+

+ { _t( + `You should make especially certain that you recognise these sessions ` + + `as they could represent an unauthorised use of your account.`, + ) + } +

+ , + }, + [DeviceSecurityVariation.Inactive]: { + title: _t('Inactive sessions'), + description: <> +

{ _t('Inactive sessions are sessions you have not used in some time, but they continue to receive encryption keys.') } +

+

+ { _t( + `Removing inactive sessions improves security and performance, ` + + `and makes it easier for you to identify if a new session is suspicious.`, + ) + } +

+ , + }, + }; + +/** + * LearnMore with content for device security warnings + */ +export const DeviceSecurityLearnMore: React.FC = ({ variation }) => { + const { title, description } = securityCardContent[variation]; + return ; +}; diff --git a/src/components/views/settings/devices/FilteredDeviceList.tsx b/src/components/views/settings/devices/FilteredDeviceList.tsx index a2afcc22f6..04d2c39d6c 100644 --- a/src/components/views/settings/devices/FilteredDeviceList.tsx +++ b/src/components/views/settings/devices/FilteredDeviceList.tsx @@ -39,6 +39,7 @@ import { DevicesState } from './useOwnDevices'; import FilteredDeviceListHeader from './FilteredDeviceListHeader'; import Spinner from '../../elements/Spinner'; import LearnMore from '../../elements/LearnMore'; +import { DeviceSecurityLearnMore } from './DeviceSecurityLearnMore'; interface Props { devices: DevicesDictionary; @@ -77,22 +78,10 @@ type DeviceFilterKey = DeviceSecurityVariation | typeof ALL_FILTER_ID; const securityCardContent: Record = { [DeviceSecurityVariation.Verified]: { title: _t('Verified sessions'), description: _t('For best security, sign out from any session that you don\'t recognize or use anymore.'), - learnMoreDescription: <> -

{ _t('Verified sessions have logged in with your credentials and then been verified, either using your secure passphrase or by cross-verifying.') } -

-

- { _t( - `This means they hold encryption keys for your previous messages, ` + - `and confirm to other users you are communicating with that these sessions are really you.`, - ) - } -

- , }, [DeviceSecurityVariation.Unverified]: { title: _t('Unverified sessions'), @@ -100,17 +89,6 @@ const securityCardContent: Record -

{ _t('Unverified sessions are sessions that have logged in with your credentials but have not been cross-verified.') } -

-

- { _t( - `You should make especially certain that you recognise these sessions ` + - `as they could represent an unauthorised use of your account.`, - ) - } -

- , }, [DeviceSecurityVariation.Inactive]: { title: _t('Inactive sessions'), @@ -119,17 +97,6 @@ const securityCardContent: Record -

{ _t('Inactive sessions are sessions you have not used in some time, but they continue to receive encryption keys.') } -

-

- { _t( - `Removing inactive sessions improves security and performance, ` + - `and makes it easier for you to identify if a new session is suspicious.`, - ) - } -

- , }, }; @@ -138,16 +105,15 @@ const isSecurityVariation = (filter?: DeviceFilterKey): filter is DeviceSecurity const FilterSecurityCard: React.FC<{ filter?: DeviceFilterKey }> = ({ filter }) => { if (isSecurityVariation(filter)) { - const { title, description, learnMoreDescription } = securityCardContent[filter]; + const { title, description } = securityCardContent[filter]; return
{ description } - } />