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

Device manager - device security recommendation card (PSG-637) #9158

Merged
merged 27 commits into from
Aug 11, 2022
Merged
Show file tree
Hide file tree
Changes from 8 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions res/css/_components.pcss
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@
@import "./components/views/location/_ZoomButtons.pcss";
@import "./components/views/messages/_MBeaconBody.pcss";
@import "./components/views/messages/shared/_MediaProcessingError.pcss";
@import "./components/views/settings/devices/_DeviceSecurityCard.pcss";
@import "./components/views/settings/devices/_DeviceTile.pcss";
@import "./components/views/settings/devices/_SelectableDeviceTile.pcss";
@import "./components/views/settings/shared/_SettingsSubsection.pcss";
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,69 @@
/*
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.
*/

.mx_DeviceSecurityCard {
width: 100%;
display: flex;
flex-direction: row;
align-items: flex-start;

padding: $spacing-16;

border: 1px solid $quinary-content;
border-radius: 8px;
}

.mx_DeviceSecurityCard_icon {
flex: 0 0 40px;
display: flex;
align-items: center;
justify-content: center;
margin-right: $spacing-16;
border-radius: 8px;

height: 40px;
width: 40px;

color: var(--icon-color);
background-color: var(--background-color);

&.Verified {
--icon-color: $e2e-verified-color;
--background-color: $e2e-verified-color-light;
}

&.Unverified {
--icon-color: $e2e-warning-color;
--background-color: $e2e-warning-color-light;
}

&.Inactive {
--icon-color: $secondary-content;
--background-color: $system;
}
}

.mx_DeviceSecurityCard_content {
flex: 1 1;
}
.mx_DeviceSecurityCard_heading {
margin: 0 0 $spacing-4 0;
}
.mx_DeviceSecurityCard_description {
margin: 0 0 $spacing-8 0;
font-size: $font-12px;
color: $secondary-content;
}
3 changes: 3 additions & 0 deletions res/img/e2e/verified-deprecated.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion res/img/e2e/verified.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions res/img/e2e/warning-deprecated.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion res/img/e2e/warning.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions res/img/element-icons/settings/inactive.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 2 additions & 0 deletions res/themes/legacy-light/css/_legacy-light.pcss
Original file line number Diff line number Diff line change
Expand Up @@ -217,6 +217,8 @@ $e2e-verified-color: #76cfa5; /* N.B. *NOT* the same as $accent */
$e2e-unknown-color: #e8bf37;
$e2e-unverified-color: #e8bf37;
$e2e-warning-color: #ba6363;
$e2e-verified-color-light: #f1faf9;
$e2e-warning-color-light: #fff5f5;

/*** ImageView ***/
$lightbox-bg-color: #454545;
Expand Down
2 changes: 2 additions & 0 deletions res/themes/light/css/_light.pcss
Original file line number Diff line number Diff line change
Expand Up @@ -201,6 +201,8 @@ $e2e-verified-color: #76cfa5; /* N.B. *NOT* the same as $accent */
$e2e-unknown-color: #e8bf37;
$e2e-unverified-color: #e8bf37;
$e2e-warning-color: #ba6363;
$e2e-verified-color-light: #f1faf9;
$e2e-warning-color-light: #fff5f5;
SimonBrandner marked this conversation as resolved.
Show resolved Hide resolved
/* ******************** */

/* Tabbed views */
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -24,9 +24,9 @@ import { IDialogProps } from "../IDialogProps";

function iconFromPhase(phase: Phase) {
if (phase === Phase.Done) {
return require("../../../../../res/img/e2e/verified.svg").default;
return require("../../../../../res/img/e2e/verified-deprecated.svg").default;
} else {
return require("../../../../../res/img/e2e/warning.svg").default;
return require("../../../../../res/img/e2e/warning-deprecated.svg").default;
}
}

Expand Down
2 changes: 1 addition & 1 deletion src/components/views/elements/AppWarning.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ const AppWarning: React.FC<IProps> = (props) => {
return (
<div className='mx_AppPermissionWarning'>
<div className='mx_AppPermissionWarningImage'>
<img src={require("../../../../res/img/warning.svg").default} alt='' />
<img src={require("../../../../res/img/e2e/verified.svg").default} alt='' />
SimonBrandner marked this conversation as resolved.
Show resolved Hide resolved
</div>
<div className='mx_AppPermissionWarningText'>
<span className='mx_AppPermissionWarningTextLabel'>{ props.errorMsg || "Error" }</span>
Expand Down
2 changes: 1 addition & 1 deletion src/components/views/right_panel/EncryptionPanel.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -85,7 +85,7 @@ const EncryptionPanel: React.FC<IProps> = (props: IProps) => {
// handle transitions -> cancelled for mismatches which fire a modal instead of showing a card
if (request && request.cancelled && MISMATCHES.includes(request.cancellationCode)) {
Modal.createDialog(ErrorDialog, {
headerImage: require("../../../../res/img/e2e/warning.svg").default,
headerImage: require("../../../../res/img/e2e/verified-deprecated.svg").default,
SimonBrandner marked this conversation as resolved.
Show resolved Hide resolved
title: _t("Your messages are not secure"),
description: <div>
{ _t("One of the following may be compromised:") }
Expand Down
60 changes: 60 additions & 0 deletions src/components/views/settings/devices/DeviceSecurityCard.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,60 @@
/*
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 classNames from 'classnames';
import React from 'react';

import { Icon as VerifiedIcon } from '../../../../../res/img/e2e/verified.svg';
import { Icon as UnverifiedIcon } from '../../../../../res/img/e2e/warning.svg';
import { Icon as InactiveIcon } from '../../../../../res/img/element-icons/settings/inactive.svg';

export enum DeviceSecurityVariation {
Verified = 'Verified',
Unverified = 'Unverified',
Inactive = 'Inactive',
}
interface Props {
variation: DeviceSecurityVariation;
heading: string;
description: string | React.ReactNode;
children?: React.ReactNode;
}

const VariationIcon: Record<DeviceSecurityVariation, React.FC<React.SVGProps<SVGSVGElement>>> = {
[DeviceSecurityVariation.Inactive]: InactiveIcon,
[DeviceSecurityVariation.Verified]: VerifiedIcon,
[DeviceSecurityVariation.Unverified]: UnverifiedIcon,
};

const DeviceSecurityIcon: React.FC<{ variation: DeviceSecurityVariation }> = ({ variation }) => {
const Icon = VariationIcon[variation];
return <div className={classNames('mx_DeviceSecurityCard_icon', variation)}>
<Icon height={16} width={16} />
</div>;
};

const DeviceSecurityCard: React.FC<Props> = ({ variation, heading, description, children }) => {
return <div className='mx_DeviceSecurityCard'>
<DeviceSecurityIcon variation={variation} />
<div className='mx_DeviceSecurityCard_content'>
<p className='mx_DeviceSecurityCard_heading'>{ heading }</p>
<p className='mx_DeviceSecurityCard_description'>{ description }</p>
{ children }
</div>
</div>;
};

export default DeviceSecurityCard;
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
/*
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 { render } from '@testing-library/react';
import React from 'react';

import DeviceSecurityCard, {
DeviceSecurityVariation,
} from '../../../../../src/components/views/settings/devices/DeviceSecurityCard';

describe('<DeviceSecurityCard />', () => {
const defaultProps = {
variation: DeviceSecurityVariation.Verified,
heading: 'Verified session',
description: 'nice',
};
const getComponent = (props = {}): React.ReactElement =>
<DeviceSecurityCard {...defaultProps} {...props} />;

it('renders basic card', () => {
const { container } = render(getComponent());
expect(container).toMatchSnapshot();
});

it('renders with children', () => {
const { container } = render(getComponent({
children: <div>hey</div>,
variation: DeviceSecurityVariation.Unverified,
}));
expect(container).toMatchSnapshot();
});
});
Original file line number Diff line number Diff line change
@@ -0,0 +1,66 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`<DeviceSecurityCard /> renders basic card 1`] = `
<div>
<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"
>
nice
</p>
</div>
</div>
</div>
`;

exports[`<DeviceSecurityCard /> renders with children 1`] = `
<div>
<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"
>
Verified session
</p>
<p
class="mx_DeviceSecurityCard_description"
>
nice
</p>
<div>
hey
</div>
</div>
</div>
</div>
`;