OpenCloud
/
element-web
mirror of https://github.com/vector-im/element-web
1
0
Fork 0
Code Issues Releases Wiki Activity

add learn more to device security cards

pull/28788/head^2
Kerry Archibald 2022-10-26 11:30:32 +02:00
parent 038fb53b69
commit 35e45136b4
8 changed files with 132 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/components/views/settings/devices/DeviceVerificationStatusCard.tsx
View File

@ -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<Props> = ({
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.') }
<DeviceSecurityLearnMore variation={DeviceSecurityVariation.Verified} />
</>,
} : {
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.') }
<DeviceSecurityLearnMore variation={DeviceSecurityVariation.Unverified} />
</>,
};
return <DeviceSecurityCard
{...securityCardProps}

1
src/components/views/settings/devices/FilteredDeviceList.tsx
View File

@ -38,7 +38,6 @@ import {
import { DevicesState } from './useOwnDevices';
import FilteredDeviceListHeader from './FilteredDeviceListHeader';
import Spinner from '../../elements/Spinner';
import LearnMore from '../../elements/LearnMore';
import { DeviceSecurityLearnMore } from './DeviceSecurityLearnMore';
interface Props {

24
src/components/views/settings/devices/SecurityRecommendations.tsx
View File

@ -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<Props> = ({
<DeviceSecurityCard
variation={DeviceSecurityVariation.Unverified}
heading={_t('Unverified sessions')}
description={_t(
`Verify your sessions for enhanced secure messaging` +
description={<>
{ _t(
`Verify your sessions for enhanced secure messaging` +
` or sign out from those you don't recognize or use anymore.`,
)}
) }
<DeviceSecurityLearnMore variation={DeviceSecurityVariation.Unverified} />
</>}
>
<AccessibleButton
kind='link_inline'
@ -91,11 +95,15 @@ const SecurityRecommendations: React.FC<Props> = ({
<DeviceSecurityCard
variation={DeviceSecurityVariation.Inactive}
heading={_t('Inactive sessions')}
description={_t(
`Consider signing out from old sessions ` +
`(%(inactiveAgeDays)s days or older) you don't use anymore`,
{ inactiveAgeDays },
)}
description={<>
{ _t(
`Consider signing out from old sessions ` +
`(%(inactiveAgeDays)s days or older) you don't use anymore`,
{ inactiveAgeDays },
) }
<DeviceSecurityLearnMore variation={DeviceSecurityVariation.Inactive} />
</>
}
>
<AccessibleButton
kind='link_inline'

18
src/i18n/strings/en_EN.json
View File

@ -1767,6 +1767,15 @@
"Receive push notifications on this session.": "Receive push notifications on this session.",
"Sign out of this session": "Sign out of this session",
"Toggle device details": "Toggle device details",
"Verified sessions": "Verified sessions",
"Verified sessions have logged in with your credentials and then been verified, either using your secure passphrase or by cross-verifying.": "Verified sessions have logged in with your credentials and then been verified, either using your secure passphrase or by cross-verifying.",
"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.": "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.",
"Unverified sessions": "Unverified sessions",
"Unverified sessions are sessions that have logged in with your credentials but have not been cross-verified.": "Unverified sessions are sessions that have logged in with your credentials but have not been cross-verified.",
"You should make especially certain that you recognise these sessions as they could represent an unauthorised use of your account.": "You should make especially certain that you recognise these sessions as they could represent an unauthorised use of your account.",
"Inactive sessions": "Inactive sessions",
"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.",
"Inactive for %(inactiveAgeDays)s+ days": "Inactive for %(inactiveAgeDays)s+ days",
"Verified": "Verified",
"Unverified": "Unverified",
@ -1779,18 +1788,9 @@
"Unverified session": "Unverified session",
"Verify or sign out from this session for best security and reliability.": "Verify or sign out from this session for best security and reliability.",
"Verify session": "Verify session",
"Verified sessions": "Verified sessions",
"For best security, sign out from any session that you don't recognize or use anymore.": "For best security, sign out from any session that you don't recognize or use anymore.",
"Verified sessions have logged in with your credentials and then been verified, either using your secure passphrase or by cross-verifying.": "Verified sessions have logged in with your credentials and then been verified, either using your secure passphrase or by cross-verifying.",
"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.": "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.",
"Unverified sessions": "Unverified sessions",
"Verify your sessions for enhanced secure messaging or sign out from those you don't recognize or use anymore.": "Verify your sessions for enhanced secure messaging or sign out from those you don't recognize or use anymore.",
"Unverified sessions are sessions that have logged in with your credentials but have not been cross-verified.": "Unverified sessions are sessions that have logged in with your credentials but have not been cross-verified.",
"You should make especially certain that you recognise these sessions as they could represent an unauthorised use of your account.": "You should make especially certain that you recognise these sessions as they could represent an unauthorised use of your account.",
"Inactive sessions": "Inactive sessions",
"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.",
"No verified sessions found.": "No verified sessions found.",
"No unverified sessions found.": "No unverified sessions found.",
"No inactive sessions found.": "No inactive sessions found.",

21
test/components/views/settings/devices/__snapshots__/CurrentDeviceSection-test.tsx.snap
View File

@ -50,6 +50,13 @@ HTMLCollection [
class="mx_DeviceSecurityCard_description"
>
Verify or sign out from this session for best security and reliability.
<div
class="mx_AccessibleButton mx_LearnMore_button mx_AccessibleButton_hasKind mx_AccessibleButton_kind_link_inline"
role="button"
tabindex="0"
>
Learn more
</div>
</p>
<div
class="mx_DeviceSecurityCard_actions"
@ -266,6 +273,13 @@ exports[`<CurrentDeviceSection /> renders device and correct security card when
class="mx_DeviceSecurityCard_description"
>
Verify or sign out from this session for best security and reliability.
<div
class="mx_AccessibleButton mx_LearnMore_button mx_AccessibleButton_hasKind mx_AccessibleButton_kind_link_inline"
role="button"
tabindex="0"
>
Learn more
</div>
</p>
<div
class="mx_DeviceSecurityCard_actions"
@ -402,6 +416,13 @@ exports[`<CurrentDeviceSection /> renders device and correct security card when
class="mx_DeviceSecurityCard_description"
>
Verify or sign out from this session for best security and reliability.
<div
class="mx_AccessibleButton mx_LearnMore_button mx_AccessibleButton_hasKind mx_AccessibleButton_kind_link_inline"
role="button"
tabindex="0"
>
Learn more
</div>
</p>
<div
class="mx_DeviceSecurityCard_actions"

21
test/components/views/settings/devices/__snapshots__/DeviceDetails-test.tsx.snap
View File

@ -50,6 +50,13 @@ exports[`<DeviceDetails /> renders a verified device 1`] = `
class="mx_DeviceSecurityCard_description"
>
This session is ready for secure messaging.
<div
class="mx_AccessibleButton mx_LearnMore_button mx_AccessibleButton_hasKind mx_AccessibleButton_kind_link_inline"
role="button"
tabindex="0"
>
Learn more
</div>
</p>
</div>
</div>
@ -152,6 +159,13 @@ exports[`<DeviceDetails /> renders device with metadata 1`] = `
class="mx_DeviceSecurityCard_description"
>
Verify or sign out from this session for best security and reliability.
<div
class="mx_AccessibleButton mx_LearnMore_button mx_AccessibleButton_hasKind mx_AccessibleButton_kind_link_inline"
role="button"
tabindex="0"
>
Learn more
</div>
</p>
</div>
</div>
@ -354,6 +368,13 @@ exports[`<DeviceDetails /> renders device without metadata 1`] = `
class="mx_DeviceSecurityCard_description"
>
Verify or sign out from this session for best security and reliability.
<div
class="mx_AccessibleButton mx_LearnMore_button mx_AccessibleButton_hasKind mx_AccessibleButton_kind_link_inline"
role="button"
tabindex="0"
>
Learn more
</div>
</p>
</div>
</div>

42
test/components/views/settings/devices/__snapshots__/SecurityRecommendations-test.tsx.snap
View File

@ -46,6 +46,13 @@ exports[`<SecurityRecommendations /> 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.
<div
class="mx_AccessibleButton mx_LearnMore_button mx_AccessibleButton_hasKind mx_AccessibleButton_kind_link_inline"
role="button"
tabindex="0"
>
Learn more
</div>
</p>
<div
class="mx_DeviceSecurityCard_actions"
@ -87,6 +94,13 @@ exports[`<SecurityRecommendations /> 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
<div
class="mx_AccessibleButton mx_LearnMore_button mx_AccessibleButton_hasKind mx_AccessibleButton_kind_link_inline"
role="button"
tabindex="0"
>
Learn more
</div>
</p>
<div
class="mx_DeviceSecurityCard_actions"
@ -153,6 +167,13 @@ exports[`<SecurityRecommendations /> 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.
<div
class="mx_AccessibleButton mx_LearnMore_button mx_AccessibleButton_hasKind mx_AccessibleButton_kind_link_inline"
role="button"
tabindex="0"
>
Learn more
</div>
</p>
<div
class="mx_DeviceSecurityCard_actions"
@ -194,6 +215,13 @@ exports[`<SecurityRecommendations /> 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
<div
class="mx_AccessibleButton mx_LearnMore_button mx_AccessibleButton_hasKind mx_AccessibleButton_kind_link_inline"
role="button"
tabindex="0"
>
Learn more
</div>
</p>
<div
class="mx_DeviceSecurityCard_actions"
@ -260,6 +288,13 @@ exports[`<SecurityRecommendations /> 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.
<div
class="mx_AccessibleButton mx_LearnMore_button mx_AccessibleButton_hasKind mx_AccessibleButton_kind_link_inline"
role="button"
tabindex="0"
>
Learn more
</div>
</p>
<div
class="mx_DeviceSecurityCard_actions"
@ -301,6 +336,13 @@ exports[`<SecurityRecommendations /> 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
<div
class="mx_AccessibleButton mx_LearnMore_button mx_AccessibleButton_hasKind mx_AccessibleButton_kind_link_inline"
role="button"
tabindex="0"
>
Learn more
</div>
</p>
<div
class="mx_DeviceSecurityCard_actions"

14
test/components/views/settings/tabs/user/__snapshots__/SessionManagerTab-test.tsx.snap
View File

@ -130,6 +130,13 @@ exports[`<SessionManagerTab /> current session section renders current session s
class="mx_DeviceSecurityCard_description"
>
This session is ready for secure messaging.
<div
class="mx_AccessibleButton mx_LearnMore_button mx_AccessibleButton_hasKind mx_AccessibleButton_kind_link_inline"
role="button"
tabindex="0"
>
Learn more
</div>
</p>
</div>
</div>
@ -252,6 +259,13 @@ exports[`<SessionManagerTab /> current session section renders current session s
class="mx_DeviceSecurityCard_description"
>
Verify or sign out from this session for best security and reliability.
<div
class="mx_AccessibleButton mx_LearnMore_button mx_AccessibleButton_hasKind mx_AccessibleButton_kind_link_inline"
role="button"
tabindex="0"
>
Learn more
</div>
</p>
<div
class="mx_DeviceSecurityCard_actions"