diff --git a/src/components/views/elements/LearnMore.tsx b/src/components/views/elements/LearnMore.tsx index 1a96e3d8f47..16c82a36267 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/DeviceDetailHeading.tsx b/src/components/views/settings/devices/DeviceDetailHeading.tsx index 2673ef4e897..16c0eb8bad7 100644 --- a/src/components/views/settings/devices/DeviceDetailHeading.tsx +++ b/src/components/views/settings/devices/DeviceDetailHeading.tsx @@ -19,6 +19,7 @@ import React, { FormEvent, useEffect, useState } from 'react'; import { _t } from '../../../../languageHandler'; import AccessibleButton from '../../elements/AccessibleButton'; import Field from '../../elements/Field'; +import LearnMore from '../../elements/LearnMore'; import Spinner from '../../elements/Spinner'; import { Caption } from '../../typography/Caption'; import Heading from '../../typography/Heading'; @@ -88,7 +89,22 @@ const DeviceNameEditor: React.FC void }> = ({ - { _t('Please be aware that session names are also visible to people you communicate with') } + { _t('Please be aware that session names are also visible to people you communicate with.') } + +

+ { _t(`Other users in direct messages and rooms that you join ` + + `are able to view a full list of your sessions.`, + ) } +

+

+ { _t(`This provides them with confidence that they are really speaking to you, ` + + `but it also means they can see the session name you enter here.`, + ) } +

+ } + /> { !!error && { + 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/DeviceVerificationStatusCard.tsx b/src/components/views/settings/devices/DeviceVerificationStatusCard.tsx index 127f5eedf60..0ee37c9bc43 100644 --- a/src/components/views/settings/devices/DeviceVerificationStatusCard.tsx +++ b/src/components/views/settings/devices/DeviceVerificationStatusCard.tsx @@ -19,6 +19,7 @@ import React from 'react'; import { _t } from '../../../../languageHandler'; import AccessibleButton from '../../elements/AccessibleButton'; import DeviceSecurityCard from './DeviceSecurityCard'; +import { DeviceSecurityLearnMore } from './DeviceSecurityLearnMore'; import { DeviceSecurityVariation, ExtendedDevice, @@ -36,11 +37,17 @@ export const DeviceVerificationStatusCard: React.FC = ({ const securityCardProps = device.isVerified ? { variation: DeviceSecurityVariation.Verified, heading: _t('Verified session'), - description: _t('This session is ready for secure messaging.'), + description: <> + { _t('This session is ready for secure messaging.') } + + , } : { variation: DeviceSecurityVariation.Unverified, heading: _t('Unverified session'), - description: _t('Verify or sign out from this session for best security and reliability.'), + description: <> + { _t('Verify or sign out from this session for best security and reliability.') } + + , }; return = { [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 +88,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 +96,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 +104,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 } - } /> diff --git a/src/components/views/settings/devices/SecurityRecommendations.tsx b/src/components/views/settings/devices/SecurityRecommendations.tsx index ddeb2f2e2e8..7b6381306b8 100644 --- a/src/components/views/settings/devices/SecurityRecommendations.tsx +++ b/src/components/views/settings/devices/SecurityRecommendations.tsx @@ -20,6 +20,7 @@ import { _t } from '../../../../languageHandler'; import AccessibleButton from '../../elements/AccessibleButton'; import SettingsSubsection from '../shared/SettingsSubsection'; import DeviceSecurityCard from './DeviceSecurityCard'; +import { DeviceSecurityLearnMore } from './DeviceSecurityLearnMore'; import { filterDevicesBySecurityRecommendation, INACTIVE_DEVICE_AGE_DAYS } from './filter'; import { DeviceSecurityVariation, @@ -70,10 +71,13 @@ const SecurityRecommendations: React.FC = ({ + { _t( + `Verify your sessions for enhanced secure messaging` + ` or sign out from those you don't recognize or use anymore.`, - )} + ) } + + } > = ({ + { _t( + `Consider signing out from old sessions ` + + `(%(inactiveAgeDays)s days or older) you don't use anymore`, + { inactiveAgeDays }, + ) } + + + } > Verify or sign out from this session for best security and reliability. +

renders device and correct security card when class="mx_DeviceSecurityCard_description" > Verify or sign out from this session for best security and reliability. +

renders device and correct security card when class="mx_DeviceSecurityCard_description" > Verify or sign out from this session for best security and reliability. +

- Please be aware that session names are also visible to people you communicate with + Please be aware that session names are also visible to people you communicate with. +
renders a verified device 1`] = ` class="mx_DeviceSecurityCard_description" > This session is ready for secure messaging. +

@@ -152,6 +159,13 @@ exports[` renders device with metadata 1`] = ` class="mx_DeviceSecurityCard_description" > Verify or sign out from this session for best security and reliability. +

@@ -354,6 +368,13 @@ exports[` renders device without metadata 1`] = ` class="mx_DeviceSecurityCard_description" > Verify or sign out from this session for best security and reliability. +

diff --git a/test/components/views/settings/devices/__snapshots__/SecurityRecommendations-test.tsx.snap b/test/components/views/settings/devices/__snapshots__/SecurityRecommendations-test.tsx.snap index a8546013448..f1c0f12cf56 100644 --- a/test/components/views/settings/devices/__snapshots__/SecurityRecommendations-test.tsx.snap +++ b/test/components/views/settings/devices/__snapshots__/SecurityRecommendations-test.tsx.snap @@ -46,6 +46,13 @@ exports[` renders both cards when user has both unver class="mx_DeviceSecurityCard_description" > Verify your sessions for enhanced secure messaging or sign out from those you don't recognize or use anymore. +

renders both cards when user has both unver class="mx_DeviceSecurityCard_description" > Consider signing out from old sessions (90 days or older) you don't use anymore +

renders inactive devices section when user class="mx_DeviceSecurityCard_description" > Verify your sessions for enhanced secure messaging or sign out from those you don't recognize or use anymore. +

renders inactive devices section when user class="mx_DeviceSecurityCard_description" > Consider signing out from old sessions (90 days or older) you don't use anymore +

renders unverified devices section when use class="mx_DeviceSecurityCard_description" > Verify your sessions for enhanced secure messaging or sign out from those you don't recognize or use anymore. +

renders unverified devices section when use class="mx_DeviceSecurityCard_description" > Consider signing out from old sessions (90 days or older) you don't use anymore +

current session section renders current session s class="mx_DeviceSecurityCard_description" > This session is ready for secure messaging. +

@@ -252,6 +259,13 @@ exports[` current session section renders current session s class="mx_DeviceSecurityCard_description" > Verify or sign out from this session for best security and reliability. +