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/DeviceDetailHeading.tsx b/src/components/views/settings/devices/DeviceDetailHeading.tsx
index 2673ef4e89..16c0eb8bad 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 127f5eedf6..0ee37c9bc4 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 ddeb2f2e2e..7b6381306b 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.
+
+ Learn more
+
renders device and correct security card when
class="mx_DeviceSecurityCard_description"
>
Verify or sign out from this session for best security and reliability.
+
+ Learn more
+
renders device and correct security card when
class="mx_DeviceSecurityCard_description"
>
Verify or sign out from this session for best security and reliability.
+
+ Learn more
+
- 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.
+
+ Learn more
+
renders a verified device 1`] = `
class="mx_DeviceSecurityCard_description"
>
This session is ready for secure messaging.
+
+ Learn more
+
@@ -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.
+
+ Learn more
+
@@ -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.
+
+ Learn more
+
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 a854601344..f1c0f12cf5 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.
+
+ Learn more
+
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
+
+ Learn more
+
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.
+
+ Learn more
+
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
+
+ Learn more
+
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.
+
+ Learn more
+
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
+
+ Learn more
+
current session section renders current session s
class="mx_DeviceSecurityCard_description"
>
This session is ready for secure messaging.
+
+ Learn more
+
@@ -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.
+
+ Learn more
+