Skip to content
This repository was archived by the owner on Sep 11, 2024. It is now read-only.

Commit 9bf7796

Browse files
author
Kerry
authored
Device manager - add verification details to session details (PSG-644) (#9187)
* extract security card for session verification to shared comp * add card to device details * tidy * fix section spacing * update snapshots
1 parent ba171f1 commit 9bf7796

File tree

8 files changed

+250
-23
lines changed

8 files changed

+250
-23
lines changed

‎res/css/components/views/settings/devices/_DeviceSecurityCard.pcss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ limitations under the License.
1919
display: flex;
2020
flex-direction: row;
2121
align-items: flex-start;
22+
box-sizing: border-box;
2223

2324
padding: $spacing-16;
2425

‎src/components/views/settings/devices/CurrentDeviceSection.tsx‎

Lines changed: 4 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -21,12 +21,9 @@ import Spinner from '../../elements/Spinner';
2121
import SettingsSubsection from '../shared/SettingsSubsection';
2222
import DeviceDetails from './DeviceDetails';
2323
import DeviceExpandDetailsButton from './DeviceExpandDetailsButton';
24-
import DeviceSecurityCard from './DeviceSecurityCard';
2524
import DeviceTile from './DeviceTile';
26-
import {
27-
DeviceSecurityVariation,
28-
DeviceWithVerification,
29-
} from './types';
25+
import { DeviceVerificationStatusCard } from './DeviceVerificationStatusCard';
26+
import { DeviceWithVerification } from './types';
3027

3128
interface Props {
3229
device?: DeviceWithVerification;
@@ -37,15 +34,7 @@ const CurrentDeviceSection: React.FC<Props> = ({
3734
device, isLoading,
3835
}) => {
3936
const [isExpanded, setIsExpanded] = useState(false);
40-
const securityCardProps = device?.isVerified ? {
41-
variation: DeviceSecurityVariation.Verified,
42-
heading: _t('Verified session'),
43-
description: _t('This session is ready for secure messaging.'),
44-
} : {
45-
variation: DeviceSecurityVariation.Unverified,
46-
heading: _t('Unverified session'),
47-
description: _t('Verify or sign out from this session for best security and reliability.'),
48-
};
37+
4938
return <SettingsSubsection
5039
heading={_t('Current session')}
5140
data-testid='current-session-section'
@@ -63,9 +52,7 @@ const CurrentDeviceSection: React.FC<Props> = ({
6352
</DeviceTile>
6453
{ isExpanded && <DeviceDetails device={device} /> }
6554
<br />
66-
<DeviceSecurityCard
67-
{...securityCardProps}
68-
/>
55+
<DeviceVerificationStatusCard device={device} />
6956
</>
7057
}
7158
</SettingsSubsection>;

‎src/components/views/settings/devices/DeviceDetails.tsx‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,14 +15,15 @@ limitations under the License.
1515
*/
1616

1717
import React from 'react';
18-
import { IMyDevice } from 'matrix-js-sdk/src/matrix';
1918

2019
import { formatDate } from '../../../../DateUtils';
2120
import { _t } from '../../../../languageHandler';
2221
import Heading from '../../typography/Heading';
22+
import { DeviceVerificationStatusCard } from './DeviceVerificationStatusCard';
23+
import { DeviceWithVerification } from './types';
2324

2425
interface Props {
25-
device: IMyDevice;
26+
device: DeviceWithVerification;
2627
}
2728

2829
interface MetadataTable {
@@ -51,6 +52,7 @@ const DeviceDetails: React.FC<Props> = ({ device }) => {
5152
return <div className='mx_DeviceDetails'>
5253
<section className='mx_DeviceDetails_section'>
5354
<Heading size='h3'>{ device.display_name ?? device.device_id }</Heading>
55+
<DeviceVerificationStatusCard device={device} />
5456
</section>
5557
<section className='mx_DeviceDetails_section'>
5658
<p className='mx_DeviceDetails_sectionHeading'>{ _t('Session details') }</p>

‎src/components/views/settings/devices/DeviceVerificationStatusCard.tsx‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
/*
2+
Copyright 2022 The Matrix.org Foundation C.I.C.
3+
4+
Licensed under the Apache License, Version 2.0 (the "License");
5+
you may not use this file except in compliance with the License.
6+
You may obtain a copy of the License at
7+
8+
http://www.apache.org/licenses/LICENSE-2.0
9+
10+
Unless required by applicable law or agreed to in writing, software
11+
distributed under the License is distributed on an "AS IS" BASIS,
12+
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13+
See the License for the specific language governing permissions and
14+
limitations under the License.
15+
*/
16+
17+
import React from 'react';
18+
19+
import { _t } from '../../../../languageHandler';
20+
import DeviceSecurityCard from './DeviceSecurityCard';
21+
import {
22+
DeviceSecurityVariation,
23+
DeviceWithVerification,
24+
} from './types';
25+
26+
interface Props {
27+
device: DeviceWithVerification;
28+
}
29+
30+
export const DeviceVerificationStatusCard: React.FC<Props> = ({
31+
device,
32+
}) => {
33+
const securityCardProps = device?.isVerified ? {
34+
variation: DeviceSecurityVariation.Verified,
35+
heading: _t('Verified session'),
36+
description: _t('This session is ready for secure messaging.'),
37+
} : {
38+
variation: DeviceSecurityVariation.Unverified,
39+
heading: _t('Unverified session'),
40+
description: _t('Verify or sign out from this session for best security and reliability.'),
41+
};
42+
return <DeviceSecurityCard
43+
{...securityCardProps}
44+
/>;
45+
};

‎src/i18n/strings/en_EN.json‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1686,10 +1686,6 @@
16861686
"Please enter verification code sent via text.": "Please enter verification code sent via text.",
16871687
"Verification code": "Verification code",
16881688
"Discovery options will appear once you have added a phone number above.": "Discovery options will appear once you have added a phone number above.",
1689-
"Verified session": "Verified session",
1690-
"This session is ready for secure messaging.": "This session is ready for secure messaging.",
1691-
"Unverified session": "Unverified session",
1692-
"Verify or sign out from this session for best security and reliability.": "Verify or sign out from this session for best security and reliability.",
16931689
"Current session": "Current session",
16941690
"Confirm logging out these devices by using Single Sign On to prove your identity.|other": "Confirm logging out these devices by using Single Sign On to prove your identity.",
16951691
"Confirm logging out these devices by using Single Sign On to prove your identity.|one": "Confirm logging out this device by using Single Sign On to prove your identity.",
@@ -1708,6 +1704,10 @@
17081704
"Inactive for %(inactiveAgeDays)s+ days": "Inactive for %(inactiveAgeDays)s+ days",
17091705
"Verified": "Verified",
17101706
"Unverified": "Unverified",
1707+
"Verified session": "Verified session",
1708+
"This session is ready for secure messaging.": "This session is ready for secure messaging.",
1709+
"Unverified session": "Unverified session",
1710+
"Verify or sign out from this session for best security and reliability.": "Verify or sign out from this session for best security and reliability.",
17111711
"Security recommendations": "Security recommendations",
17121712
"Improve your account security by following these recommendations": "Improve your account security by following these recommendations",
17131713
"Unverified sessions": "Unverified sessions",

‎test/components/views/settings/devices/DeviceDetails-test.tsx‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ import DeviceDetails from '../../../../../src/components/views/settings/devices/
2222
describe('<DeviceDetails />', () => {
2323
const baseDevice = {
2424
device_id: 'my-device',
25+
isVerified: false,
2526
};
2627
const defaultProps = {
2728
device: baseDevice,
@@ -50,4 +51,13 @@ describe('<DeviceDetails />', () => {
5051
const { container } = render(getComponent({ device }));
5152
expect(container).toMatchSnapshot();
5253
});
54+
55+
it('renders a verified device', () => {
56+
const device = {
57+
...baseDevice,
58+
isVerified: true,
59+
};
60+
const { container } = render(getComponent({ device }));
61+
expect(container).toMatchSnapshot();
62+
});
5363
});

‎test/components/views/settings/devices/__snapshots__/CurrentDeviceSection-test.tsx.snap‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,32 @@ HTMLCollection [
1313
>
1414
alices_device
1515
</h3>
16+
<div
17+
class="mx_DeviceSecurityCard"
18+
>
19+
<div
20+
class="mx_DeviceSecurityCard_icon Unverified"
21+
>
22+
<div
23+
height="16"
24+
width="16"
25+
/>
26+
</div>
27+
<div
28+
class="mx_DeviceSecurityCard_content"
29+
>
30+
<p
31+
class="mx_DeviceSecurityCard_heading"
32+
>
33+
Unverified session
34+
</p>
35+
<p
36+
class="mx_DeviceSecurityCard_description"
37+
>
38+
Verify or sign out from this session for best security and reliability.
39+
</p>
40+
</div>
41+
</div>
1642
</section>
1743
<section
1844
class="mx_DeviceDetails_section"

‎test/components/views/settings/devices/__snapshots__/DeviceDetails-test.tsx.snap‎

Lines changed: 156 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,109 @@
11
// Jest Snapshot v1, https://goo.gl/fbAQLP
22

3+
exports[`<DeviceDetails /> renders a verified device 1`] = `
4+
<div>
5+
<div
6+
class="mx_DeviceDetails"
7+
>
8+
<section
9+
class="mx_DeviceDetails_section"
10+
>
11+
<h3
12+
class="mx_Heading_h3"
13+
>
14+
my-device
15+
</h3>
16+
<div
17+
class="mx_DeviceSecurityCard"
18+
>
19+
<div
20+
class="mx_DeviceSecurityCard_icon Verified"
21+
>
22+
<div
23+
height="16"
24+
width="16"
25+
/>
26+
</div>
27+
<div
28+
class="mx_DeviceSecurityCard_content"
29+
>
30+
<p
31+
class="mx_DeviceSecurityCard_heading"
32+
>
33+
Verified session
34+
</p>
35+
<p
36+
class="mx_DeviceSecurityCard_description"
37+
>
38+
This session is ready for secure messaging.
39+
</p>
40+
</div>
41+
</div>
42+
</section>
43+
<section
44+
class="mx_DeviceDetails_section"
45+
>
46+
<p
47+
class="mx_DeviceDetails_sectionHeading"
48+
>
49+
Session details
50+
</p>
51+
<table
52+
class="mxDeviceDetails_metadataTable"
53+
>
54+
<tbody>
55+
<tr>
56+
<td
57+
class="mxDeviceDetails_metadataLabel"
58+
>
59+
Session ID
60+
</td>
61+
<td
62+
class="mxDeviceDetails_metadataValue"
63+
>
64+
my-device
65+
</td>
66+
</tr>
67+
<tr>
68+
<td
69+
class="mxDeviceDetails_metadataLabel"
70+
>
71+
Last activity
72+
</td>
73+
<td
74+
class="mxDeviceDetails_metadataValue"
75+
/>
76+
</tr>
77+
</tbody>
78+
</table>
79+
<table
80+
class="mxDeviceDetails_metadataTable"
81+
>
82+
<thead>
83+
<tr>
84+
<th>
85+
Device
86+
</th>
87+
</tr>
88+
</thead>
89+
<tbody>
90+
<tr>
91+
<td
92+
class="mxDeviceDetails_metadataLabel"
93+
>
94+
IP address
95+
</td>
96+
<td
97+
class="mxDeviceDetails_metadataValue"
98+
/>
99+
</tr>
100+
</tbody>
101+
</table>
102+
</section>
103+
</div>
104+
</div>
105+
`;
106+
3107
exports[`<DeviceDetails /> renders device with metadata 1`] = `
4108
<div>
5109
<div
@@ -13,6 +117,32 @@ exports[`<DeviceDetails /> renders device with metadata 1`] = `
13117
>
14118
My Device
15119
</h3>
120+
<div
121+
class="mx_DeviceSecurityCard"
122+
>
123+
<div
124+
class="mx_DeviceSecurityCard_icon Unverified"
125+
>
126+
<div
127+
height="16"
128+
width="16"
129+
/>
130+
</div>
131+
<div
132+
class="mx_DeviceSecurityCard_content"
133+
>
134+
<p
135+
class="mx_DeviceSecurityCard_heading"
136+
>
137+
Unverified session
138+
</p>
139+
<p
140+
class="mx_DeviceSecurityCard_description"
141+
>
142+
Verify or sign out from this session for best security and reliability.
143+
</p>
144+
</div>
145+
</div>
16146
</section>
17147
<section
18148
class="mx_DeviceDetails_section"
@@ -95,6 +225,32 @@ exports[`<DeviceDetails /> renders device without metadata 1`] = `
95225
>
96226
my-device
97227
</h3>
228+
<div
229+
class="mx_DeviceSecurityCard"
230+
>
231+
<div
232+
class="mx_DeviceSecurityCard_icon Unverified"
233+
>
234+
<div
235+
height="16"
236+
width="16"
237+
/>
238+
</div>
239+
<div
240+
class="mx_DeviceSecurityCard_content"
241+
>
242+
<p
243+
class="mx_DeviceSecurityCard_heading"
244+
>
245+
Unverified session
246+
</p>
247+
<p
248+
class="mx_DeviceSecurityCard_description"
249+
>
250+
Verify or sign out from this session for best security and reliability.
251+
</p>
252+
</div>
253+
</div>
98254
</section>
99255
<section
100256
class="mx_DeviceDetails_section"

0 commit comments

Comments
 (0)