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

res/css/_components.pcss

@@ -28,6 +28,7 @@
 @import "./components/views/messages/_MBeaconBody.pcss";
 @import "./components/views/messages/shared/_MediaProcessingError.pcss";
 @import "./components/views/settings/devices/_DeviceDetails.pcss";
+@import "./components/views/settings/devices/_DeviceSecurityCard.pcss";
 @import "./components/views/settings/devices/_DeviceTile.pcss";
 @import "./components/views/settings/devices/_FilteredDeviceList.pcss";
 @import "./components/views/settings/devices/_SelectableDeviceTile.pcss";

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

@@ -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;
+}

res/themes/legacy-light/css/_legacy-light.pcss

@@ -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: rgba($e2e-verified-color, 0.06);
+$e2e-warning-color-light: rgba($e2e-warning-color, 0.06);
 
 /*** ImageView ***/
 $lightbox-bg-color: #454545;

res/themes/light/css/_light.pcss

@@ -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: rgba($e2e-verified-color, 0.06);
+$e2e-warning-color-light: rgba($e2e-warning-color, 0.06);
 /* ******************** */
 
 /* Tabbed views */

src/components/views/dialogs/security/SetupEncryptionDialog.tsx

@@ -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;
     }
 }
 

src/components/views/right_panel/EncryptionPanel.tsx

@@ -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/warning-deprecated.svg").default,
                 title: _t("Your messages are not secure"),
                 description: <div>
                     { _t("One of the following may be compromised:") }

src/components/views/settings/devices/DeviceSecurityCard.tsx

@@ -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;

src/components/views/settings/tabs/user/SessionManagerTab.tsx

@@ -20,6 +20,7 @@ import { _t } from "../../../../../languageHandler";
 import Spinner from '../../../elements/Spinner';
 import { useOwnDevices } from '../../devices/useOwnDevices';
 import DeviceTile from '../../devices/DeviceTile';
+import DeviceSecurityCard, { DeviceSecurityVariation } from '../../devices/DeviceSecurityCard';
 import SettingsSubsection from '../../shared/SettingsSubsection';
 import SettingsTab from '../SettingsTab';
 import FilteredDeviceList from '../../devices/FilteredDeviceList';
@@ -30,15 +31,32 @@ const SessionManagerTab: React.FC = () => {
     const { [currentDeviceId]: currentDevice, ...otherDevices } = devices;
     const shouldShowOtherSessions = Object.keys(otherDevices).length > 0;
 
+    const securityCardProps = currentDevice?.isVerified ? {
+        variation: DeviceSecurityVariation.Verified,
+        heading: _t('Verified session'),
+        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.'),
+    };
+
     return <SettingsTab heading={_t('Sessions')}>
         <SettingsSubsection
             heading={_t('Current session')}
             data-testid='current-session-section'
         >
             { isLoading && <Spinner /> }
-            { !!currentDevice && <DeviceTile
-                device={currentDevice}
-            /> }
+            { !!currentDevice && <>
+                <DeviceTile
+                    device={currentDevice}
+                />
+                <br />
+                <DeviceSecurityCard
+                    {...securityCardProps}
+                />
+            </>
+            }
         </SettingsSubsection>
         {
             shouldShowOtherSessions &&

src/i18n/strings/en_EN.json

@@ -1553,6 +1553,10 @@
     "Share anonymous data to help us identify issues. Nothing personal. No third parties.": "Share anonymous data to help us identify issues. Nothing personal. No third parties.",
     "Where you're signed in": "Where you're signed in",
     "Manage your signed-in devices below. A device's name is visible to people you communicate with.": "Manage your signed-in devices below. A device's name is visible to people you communicate with.",
+    "Verified session": "Verified session",
+    "This session is ready for secure messaging.": "This session is ready for secure messaging.",
+    "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.",
     "Sessions": "Sessions",
     "Current session": "Current session",
     "Other sessions": "Other sessions",

test/components/views/settings/devices/DeviceSecurityCard-test.tsx

@@ -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();
+    });
+});

test/components/views/settings/devices/__snapshots__/DeviceSecurityCard-test.tsx.snap

@@ -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>
+`;