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

* add security card and style

* deprecate warning and verified svgs that use hard coded color

* style icons, test

* i18n

* stylelint

* redo lost lint fixes

* fix svg ref

* actually fix svg

* fix stupid copy pasting

* use rgba for e2e light variations

* add security card and style

* deprecate warning and verified svgs that use hard coded color

* style icons, test

* i18n

* stylelint

* fix svg ref

* actually fix svg

* fix stupid copy pasting

* use rgba for e2e light variations

* use device security card in current session section

* lint

* update snapshot test after dev merge

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 &&