imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Device manager - add verification details to session details (PSG-644) (#9187)

Browse source 
* extract security card for session verification to shared comp

* add card to device details

* tidy

* fix section spacing

* update snapshots
This commit is contained in:
Kerry 2022-08-16 13:45:09 +02:00 • committed by GitHub
parent ba171f1fe5
commit 9bf77963ee
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
8 changed files with 250 additions and 23 deletions
Download patch file Download diff file Expand all files Collapse all files

10
test/components/views/settings/devices/DeviceDetails-test.tsx
View file

@ -22,6 +22,7 @@ import DeviceDetails from '../../../../../src/components/views/settings/devices/
describe('<DeviceDetails />', () => {
const baseDevice = {
device_id: 'my-device',
isVerified: false,
};
const defaultProps = {
device: baseDevice,
@ -50,4 +51,13 @@ describe('<DeviceDetails />', () => {
const { container } = render(getComponent({ device }));
expect(container).toMatchSnapshot();
});
it('renders a verified device', () => {
const device = {
...baseDevice,
isVerified: true,
};
const { container } = render(getComponent({ device }));
expect(container).toMatchSnapshot();
});
});

26
test/components/views/settings/devices/__snapshots__/CurrentDeviceSection-test.tsx.snap
View file

@ -13,6 +13,32 @@ HTMLCollection [
>
alices_device
</h3>
<div
class="mx_DeviceSecurityCard"
>
<div
class="mx_DeviceSecurityCard_icon Unverified"
>
<div
height="16"
width="16"
/>
</div>
<div
class="mx_DeviceSecurityCard_content"
>
<p
class="mx_DeviceSecurityCard_heading"
>
Unverified session
</p>
<p
class="mx_DeviceSecurityCard_description"
>
Verify or sign out from this session for best security and reliability.
</p>
</div>
</div>
</section>
<section
class="mx_DeviceDetails_section"

156
test/components/views/settings/devices/__snapshots__/DeviceDetails-test.tsx.snap
View file

@ -1,5 +1,109 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`<DeviceDetails /> renders a verified device 1`] = `
<div>
<div
class="mx_DeviceDetails"
>
<section
class="mx_DeviceDetails_section"
>
<h3
class="mx_Heading_h3"
>
my-device
</h3>
<div
class="mx_DeviceSecurityCard"
>
<div
class="mx_DeviceSecurityCard_icon Verified"
>
<div
height="16"
width="16"
/>
</div>
<div
class="mx_DeviceSecurityCard_content"
>
<p
class="mx_DeviceSecurityCard_heading"
>
Verified session
</p>
<p
class="mx_DeviceSecurityCard_description"
>
This session is ready for secure messaging.
</p>
</div>
</div>
</section>
<section
class="mx_DeviceDetails_section"
>
<p
class="mx_DeviceDetails_sectionHeading"
>
Session details
</p>
<table
class="mxDeviceDetails_metadataTable"
>
<tbody>
<tr>
<td
class="mxDeviceDetails_metadataLabel"
>
Session ID
</td>
<td
class="mxDeviceDetails_metadataValue"
>
my-device
</td>
</tr>
<tr>
<td
class="mxDeviceDetails_metadataLabel"
>
Last activity
</td>
<td
class="mxDeviceDetails_metadataValue"
/>
</tr>
</tbody>
</table>
<table
class="mxDeviceDetails_metadataTable"
>
<thead>
<tr>
<th>
Device
</th>
</tr>
</thead>
<tbody>
<tr>
<td
class="mxDeviceDetails_metadataLabel"
>
IP address
</td>
<td
class="mxDeviceDetails_metadataValue"
/>
</tr>
</tbody>
</table>
</section>
</div>
</div>
`;
exports[`<DeviceDetails /> renders device with metadata 1`] = `
<div>
<div
@ -13,6 +117,32 @@ exports[`<DeviceDetails /> renders device with metadata 1`] = `
>
My Device
</h3>
<div
class="mx_DeviceSecurityCard"
>
<div
class="mx_DeviceSecurityCard_icon Unverified"
>
<div
height="16"
width="16"
/>
</div>
<div
class="mx_DeviceSecurityCard_content"
>
<p
class="mx_DeviceSecurityCard_heading"
>
Unverified session
</p>
<p
class="mx_DeviceSecurityCard_description"
>
Verify or sign out from this session for best security and reliability.
</p>
</div>
</div>
</section>
<section
class="mx_DeviceDetails_section"
@ -95,6 +225,32 @@ exports[`<DeviceDetails /> renders device without metadata 1`] = `
>
my-device
</h3>
<div
class="mx_DeviceSecurityCard"
>
<div
class="mx_DeviceSecurityCard_icon Unverified"
>
<div
height="16"
width="16"
/>
</div>
<div
class="mx_DeviceSecurityCard_content"
>
<p
class="mx_DeviceSecurityCard_heading"
>
Unverified session
</p>
<p
class="mx_DeviceSecurityCard_description"
>
Verify or sign out from this session for best security and reliability.
</p>
</div>
</div>
</section>
<section
class="mx_DeviceDetails_section"