From 18e59b2d98d73e51290dc3a119a0298b23ff0efc Mon Sep 17 00:00:00 2001 From: Kerry Archibald Date: Tue, 25 Oct 2022 17:24:54 +0200 Subject: [PATCH 1/7] add learn more to filtered sessions --- .../devices/__snapshots__/FilteredDeviceList-test.tsx.snap | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/test/components/views/settings/devices/__snapshots__/FilteredDeviceList-test.tsx.snap b/test/components/views/settings/devices/__snapshots__/FilteredDeviceList-test.tsx.snap index 62a6cd94d1e..095517b1308 100644 --- a/test/components/views/settings/devices/__snapshots__/FilteredDeviceList-test.tsx.snap +++ b/test/components/views/settings/devices/__snapshots__/FilteredDeviceList-test.tsx.snap @@ -19,7 +19,7 @@ HTMLCollection [ class="mx_DeviceSecurityCard" >
Date: Tue, 25 Oct 2022 17:28:51 +0200 Subject: [PATCH 2/7] update tests and i18n for fullstop --- src/i18n/strings/en_EN.json | 1 + 1 file changed, 1 insertion(+) diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json index 8af41255fce..af019ffcc90 100644 --- a/src/i18n/strings/en_EN.json +++ b/src/i18n/strings/en_EN.json @@ -1788,6 +1788,7 @@ "Consider signing out from old sessions (%(inactiveAgeDays)s days or older) you don't use anymore.": "Consider signing out from old sessions (%(inactiveAgeDays)s days or older) you don't use anymore.", "Inactive sessions are sessions you have not used in some time, but they continue to receive encryption keys.": "Inactive sessions are sessions you have not used in some time, but they continue to receive encryption keys.", "Removing inactive sessions improves security and performance, and makes it easier for you to identify if a new session is suspicious.": "Removing inactive sessions improves security and performance, and makes it easier for you to identify if a new session is suspicious.", + "Consider signing out from old sessions (%(inactiveAgeDays)s days or older) you don't use anymore": "Consider signing out from old sessions (%(inactiveAgeDays)s days or older) you don't use anymore", "No verified sessions found.": "No verified sessions found.", "No unverified sessions found.": "No unverified sessions found.", "No inactive sessions found.": "No inactive sessions found.", From a6f6e6ce76d16e1231aa94333a4aa99938c3038f Mon Sep 17 00:00:00 2001 From: Kerry Archibald Date: Tue, 25 Oct 2022 17:30:07 +0200 Subject: [PATCH 3/7] remove unused switch --- src/i18n/strings/en_EN.json | 1 - 1 file changed, 1 deletion(-) diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json index af019ffcc90..8af41255fce 100644 --- a/src/i18n/strings/en_EN.json +++ b/src/i18n/strings/en_EN.json @@ -1788,7 +1788,6 @@ "Consider signing out from old sessions (%(inactiveAgeDays)s days or older) you don't use anymore.": "Consider signing out from old sessions (%(inactiveAgeDays)s days or older) you don't use anymore.", "Inactive sessions are sessions you have not used in some time, but they continue to receive encryption keys.": "Inactive sessions are sessions you have not used in some time, but they continue to receive encryption keys.", "Removing inactive sessions improves security and performance, and makes it easier for you to identify if a new session is suspicious.": "Removing inactive sessions improves security and performance, and makes it easier for you to identify if a new session is suspicious.", - "Consider signing out from old sessions (%(inactiveAgeDays)s days or older) you don't use anymore": "Consider signing out from old sessions (%(inactiveAgeDays)s days or older) you don't use anymore", "No verified sessions found.": "No verified sessions found.", "No unverified sessions found.": "No unverified sessions found.", "No inactive sessions found.": "No inactive sessions found.", From 78440d2d4363de5967014a0df5eb3d9febcbeac2 Mon Sep 17 00:00:00 2001 From: Kerry Archibald Date: Wed, 26 Oct 2022 10:18:06 +0200 Subject: [PATCH 4/7] use correct card type --- .../devices/__snapshots__/FilteredDeviceList-test.tsx.snap | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/test/components/views/settings/devices/__snapshots__/FilteredDeviceList-test.tsx.snap b/test/components/views/settings/devices/__snapshots__/FilteredDeviceList-test.tsx.snap index 095517b1308..62a6cd94d1e 100644 --- a/test/components/views/settings/devices/__snapshots__/FilteredDeviceList-test.tsx.snap +++ b/test/components/views/settings/devices/__snapshots__/FilteredDeviceList-test.tsx.snap @@ -19,7 +19,7 @@ HTMLCollection [ class="mx_DeviceSecurityCard" >
Date: Wed, 26 Oct 2022 11:03:19 +0200 Subject: [PATCH 5/7] learn more for session renaming --- .../settings/devices/DeviceDetailHeading.tsx | 18 +++++++++++++++++- src/i18n/strings/en_EN.json | 5 ++++- .../DeviceDetailHeading-test.tsx.snap | 9 ++++++++- 3 files changed, 29 insertions(+), 3 deletions(-) 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 && - 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 +
Date: Wed, 26 Oct 2022 11:17:47 +0200 Subject: [PATCH 6/7] 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 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/DeviceSecurityLearnMore.tsx b/src/components/views/settings/devices/DeviceSecurityLearnMore.tsx new file mode 100644 index 00000000000..8677afcbeee --- /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 a2afcc22f64..04d2c39d6c0 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 } - } /> From 35e45136b4f89b9016a34cf3dc7387f3d74b105f Mon Sep 17 00:00:00 2001 From: Kerry Archibald Date: Wed, 26 Oct 2022 11:30:32 +0200 Subject: [PATCH 7/7] add learn more to device security cards --- .../devices/DeviceVerificationStatusCard.tsx | 11 ++++- .../settings/devices/FilteredDeviceList.tsx | 1 - .../devices/SecurityRecommendations.tsx | 24 +++++++---- src/i18n/strings/en_EN.json | 18 ++++---- .../CurrentDeviceSection-test.tsx.snap | 21 ++++++++++ .../__snapshots__/DeviceDetails-test.tsx.snap | 21 ++++++++++ .../SecurityRecommendations-test.tsx.snap | 42 +++++++++++++++++++ .../SessionManagerTab-test.tsx.snap | 14 +++++++ 8 files changed, 132 insertions(+), 20 deletions(-) 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 = ({ + { _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 +

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 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. +
+ 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 +