From cf16314c1f55c8330f83a01e843dc40702c1dcdc Mon Sep 17 00:00:00 2001 From: Kerry Archibald Date: Tue, 9 Aug 2022 15:20:56 +0200 Subject: [PATCH 01/22] add security card and style --- res/css/_components.pcss | 1 + .../settings/devices/_DeviceSecurityCard.pcss | 70 +++++++++++++++++++ .../legacy-light/css/_legacy-light.pcss | 2 + res/themes/light/css/_light.pcss | 2 + .../settings/devices/DeviceSecurityCard.tsx | 59 ++++++++++++++++ .../settings/tabs/user/SessionManagerTab.tsx | 19 ++++- src/i18n/strings/en_EN.json | 2 + .../devices/DeviceSecurityCard-test.tsx | 31 ++++++++ 8 files changed, 185 insertions(+), 1 deletion(-) create mode 100644 res/css/components/views/settings/devices/_DeviceSecurityCard.pcss create mode 100644 src/components/views/settings/devices/DeviceSecurityCard.tsx create mode 100644 test/components/views/settings/devices/DeviceSecurityCard-test.tsx diff --git a/res/css/_components.pcss b/res/css/_components.pcss index d6445f01435..c81f7d61a4a 100644 --- a/res/css/_components.pcss +++ b/res/css/_components.pcss @@ -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"; diff --git a/res/css/components/views/settings/devices/_DeviceSecurityCard.pcss b/res/css/components/views/settings/devices/_DeviceSecurityCard.pcss new file mode 100644 index 00000000000..bbad8fa3b95 --- /dev/null +++ b/res/css/components/views/settings/devices/_DeviceSecurityCard.pcss @@ -0,0 +1,70 @@ +/* +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 $system; + 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-unverified-color; + --background-color: $e2e-unverified-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; +} \ No newline at end of file diff --git a/res/themes/legacy-light/css/_legacy-light.pcss b/res/themes/legacy-light/css/_legacy-light.pcss index 4da7e8e1230..69d9779f12c 100644 --- a/res/themes/legacy-light/css/_legacy-light.pcss +++ b/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: #f1faf9; +$e2e-unverified-color-light: #fff5f5; /*** ImageView ***/ $lightbox-bg-color: #454545; diff --git a/res/themes/light/css/_light.pcss b/res/themes/light/css/_light.pcss index abde9cf52d1..00d1f1a1237 100644 --- a/res/themes/light/css/_light.pcss +++ b/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: #f1faf9; +$e2e-unverified-color-light: #fff5f5; /* ******************** */ /* Tabbed views */ diff --git a/src/components/views/settings/devices/DeviceSecurityCard.tsx b/src/components/views/settings/devices/DeviceSecurityCard.tsx new file mode 100644 index 00000000000..c9872254490 --- /dev/null +++ b/src/components/views/settings/devices/DeviceSecurityCard.tsx @@ -0,0 +1,59 @@ +/* +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'; + +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.Inactive]: VerifiedIcon, + [DeviceSecurityVariation.Verified]: VerifiedIcon, + [DeviceSecurityVariation.Unverified]: UnverifiedIcon, +}; + +const DeviceSecurityIcon: React.FC<{ variation: DeviceSecurityVariation }> = ({ variation }) => { + const Icon = VariationIcon[variation]; + return
+ +
; +}; + +const DeviceSecurityCard: React.FC = ({ variation, heading, description, children }) => { + return
+ +
+

{ heading }

+

{ description }

+ { children } +
+
; +}; + +export default DeviceSecurityCard; diff --git a/src/components/views/settings/tabs/user/SessionManagerTab.tsx b/src/components/views/settings/tabs/user/SessionManagerTab.tsx index 17c09aeb7a3..559bb5e4b40 100644 --- a/src/components/views/settings/tabs/user/SessionManagerTab.tsx +++ b/src/components/views/settings/tabs/user/SessionManagerTab.tsx @@ -17,6 +17,7 @@ limitations under the License. import React from 'react'; import { _t } from "../../../../../languageHandler"; +import DeviceSecurityCard, { DeviceSecurityVariation } from '../../devices/DeviceSecurityCard'; import SettingsSubsection from '../../shared/SettingsSubsection'; import SettingsTab from '../SettingsTab'; @@ -26,7 +27,23 @@ const SessionManagerTab: React.FC = () => { heading={_t('Current session')} // TODO session content coming here // in next PR - /> + > + + + + ; }; diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json index e601003ecb4..1878315eb69 100644 --- a/src/i18n/strings/en_EN.json +++ b/src/i18n/strings/en_EN.json @@ -1564,6 +1564,8 @@ "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.", "Sessions": "Sessions", "Current session": "Current session", + "Verified session": "Verified session", + "This session is ready for secure messaging.": "This session is ready for secure messaging.", "Sidebar": "Sidebar", "Spaces to show": "Spaces to show", "Spaces are ways to group rooms and people. Alongside the spaces you're in, you can use some pre-built ones too.": "Spaces are ways to group rooms and people. Alongside the spaces you're in, you can use some pre-built ones too.", diff --git a/test/components/views/settings/devices/DeviceSecurityCard-test.tsx b/test/components/views/settings/devices/DeviceSecurityCard-test.tsx new file mode 100644 index 00000000000..02a5cd38ea3 --- /dev/null +++ b/test/components/views/settings/devices/DeviceSecurityCard-test.tsx @@ -0,0 +1,31 @@ +/* +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 from '../../../../../src/components/views/settings/devices/DeviceSecurityCard'; + +describe('', () => { + const defaultProps = {}; + const getComponent = (props = {}) => + render(); + + it('renders', () => { + const component = getComponent(); + expect(component).toBeTruthy(); + }); +}); From aaf75ffb162a6df313877cc12252f1fddd9eea6b Mon Sep 17 00:00:00 2001 From: Kerry Archibald Date: Tue, 9 Aug 2022 15:51:31 +0200 Subject: [PATCH 02/22] deprecate warning and verified svgs that use hard coded color --- res/img/e2e/verified-deprecated.svg | 3 +++ res/img/e2e/verified.svg | 2 +- res/img/e2e/warning-deprecated.svg | 3 +++ res/img/e2e/warning.svg | 2 +- .../views/dialogs/security/SetupEncryptionDialog.tsx | 4 ++-- src/components/views/elements/AppWarning.tsx | 2 +- src/components/views/right_panel/EncryptionPanel.tsx | 2 +- 7 files changed, 12 insertions(+), 6 deletions(-) create mode 100644 res/img/e2e/verified-deprecated.svg create mode 100644 res/img/e2e/warning-deprecated.svg diff --git a/res/img/e2e/verified-deprecated.svg b/res/img/e2e/verified-deprecated.svg new file mode 100644 index 00000000000..f90d9db554c --- /dev/null +++ b/res/img/e2e/verified-deprecated.svg @@ -0,0 +1,3 @@ + + + diff --git a/res/img/e2e/verified.svg b/res/img/e2e/verified.svg index f90d9db554c..9213d2b05d9 100644 --- a/res/img/e2e/verified.svg +++ b/res/img/e2e/verified.svg @@ -1,3 +1,3 @@ - + diff --git a/res/img/e2e/warning-deprecated.svg b/res/img/e2e/warning-deprecated.svg new file mode 100644 index 00000000000..58f5c3b7d1c --- /dev/null +++ b/res/img/e2e/warning-deprecated.svg @@ -0,0 +1,3 @@ + + + diff --git a/res/img/e2e/warning.svg b/res/img/e2e/warning.svg index 58f5c3b7d1c..1acbb53bb71 100644 --- a/res/img/e2e/warning.svg +++ b/res/img/e2e/warning.svg @@ -1,3 +1,3 @@ - + diff --git a/src/components/views/dialogs/security/SetupEncryptionDialog.tsx b/src/components/views/dialogs/security/SetupEncryptionDialog.tsx index 1a945405023..63d9ad1d2cd 100644 --- a/src/components/views/dialogs/security/SetupEncryptionDialog.tsx +++ b/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; } } diff --git a/src/components/views/elements/AppWarning.tsx b/src/components/views/elements/AppWarning.tsx index b3dfae99118..819da419e3c 100644 --- a/src/components/views/elements/AppWarning.tsx +++ b/src/components/views/elements/AppWarning.tsx @@ -24,7 +24,7 @@ const AppWarning: React.FC = (props) => { return (
- +
{ props.errorMsg || "Error" } diff --git a/src/components/views/right_panel/EncryptionPanel.tsx b/src/components/views/right_panel/EncryptionPanel.tsx index a9ab3e6ab38..a7d11eb74eb 100644 --- a/src/components/views/right_panel/EncryptionPanel.tsx +++ b/src/components/views/right_panel/EncryptionPanel.tsx @@ -85,7 +85,7 @@ const EncryptionPanel: React.FC = (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, title: _t("Your messages are not secure"), description:
{ _t("One of the following may be compromised:") } From 6f0fd7426f005c35b5601116f0c7675482fbce88 Mon Sep 17 00:00:00 2001 From: Kerry Archibald Date: Tue, 9 Aug 2022 15:51:54 +0200 Subject: [PATCH 03/22] style icons, test --- .../settings/devices/_DeviceSecurityCard.pcss | 6 +- res/img/element-icons/settings/inactive.svg | 3 + .../legacy-light/css/_legacy-light.pcss | 2 +- res/themes/light/css/_light.pcss | 2 +- .../settings/devices/DeviceSecurityCard.tsx | 3 +- .../settings/tabs/user/SessionManagerTab.tsx | 18 +---- .../devices/DeviceSecurityCard-test.tsx | 28 ++++++-- .../DeviceSecurityCard-test.tsx.snap | 66 +++++++++++++++++++ 8 files changed, 98 insertions(+), 30 deletions(-) create mode 100644 res/img/element-icons/settings/inactive.svg create mode 100644 test/components/views/settings/devices/__snapshots__/DeviceSecurityCard-test.tsx.snap diff --git a/res/css/components/views/settings/devices/_DeviceSecurityCard.pcss b/res/css/components/views/settings/devices/_DeviceSecurityCard.pcss index bbad8fa3b95..5410925dafa 100644 --- a/res/css/components/views/settings/devices/_DeviceSecurityCard.pcss +++ b/res/css/components/views/settings/devices/_DeviceSecurityCard.pcss @@ -22,7 +22,7 @@ limitations under the License. padding: $spacing-16; - border: 1px solid $system; + border: 1px solid $quinary-content; border-radius: 8px; } @@ -47,8 +47,8 @@ limitations under the License. } &.Unverified { - --icon-color: $e2e-unverified-color; - --background-color: $e2e-unverified-color-light; + --icon-color: $e2e-warning-color; + --background-color: $e2e-warning-color-light; } &.Inactive { diff --git a/res/img/element-icons/settings/inactive.svg b/res/img/element-icons/settings/inactive.svg new file mode 100644 index 00000000000..63b6b97bd59 --- /dev/null +++ b/res/img/element-icons/settings/inactive.svg @@ -0,0 +1,3 @@ + + + diff --git a/res/themes/legacy-light/css/_legacy-light.pcss b/res/themes/legacy-light/css/_legacy-light.pcss index 69d9779f12c..07681feb335 100644 --- a/res/themes/legacy-light/css/_legacy-light.pcss +++ b/res/themes/legacy-light/css/_legacy-light.pcss @@ -218,7 +218,7 @@ $e2e-unknown-color: #e8bf37; $e2e-unverified-color: #e8bf37; $e2e-warning-color: #ba6363; $e2e-verified-color-light: #f1faf9; -$e2e-unverified-color-light: #fff5f5; +$e2e-warning-color-light: #fff5f5; /*** ImageView ***/ $lightbox-bg-color: #454545; diff --git a/res/themes/light/css/_light.pcss b/res/themes/light/css/_light.pcss index 00d1f1a1237..7eb2b410756 100644 --- a/res/themes/light/css/_light.pcss +++ b/res/themes/light/css/_light.pcss @@ -202,7 +202,7 @@ $e2e-unknown-color: #e8bf37; $e2e-unverified-color: #e8bf37; $e2e-warning-color: #ba6363; $e2e-verified-color-light: #f1faf9; -$e2e-unverified-color-light: #fff5f5; +$e2e-warning-color-light: #fff5f5; /* ******************** */ /* Tabbed views */ diff --git a/src/components/views/settings/devices/DeviceSecurityCard.tsx b/src/components/views/settings/devices/DeviceSecurityCard.tsx index c9872254490..bf5a3e5729b 100644 --- a/src/components/views/settings/devices/DeviceSecurityCard.tsx +++ b/src/components/views/settings/devices/DeviceSecurityCard.tsx @@ -19,6 +19,7 @@ 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', @@ -33,7 +34,7 @@ interface Props { } const VariationIcon: Record>> = { - [DeviceSecurityVariation.Inactive]: VerifiedIcon, + [DeviceSecurityVariation.Inactive]: InactiveIcon, [DeviceSecurityVariation.Verified]: VerifiedIcon, [DeviceSecurityVariation.Unverified]: UnverifiedIcon, }; diff --git a/src/components/views/settings/tabs/user/SessionManagerTab.tsx b/src/components/views/settings/tabs/user/SessionManagerTab.tsx index 559bb5e4b40..d17544e6332 100644 --- a/src/components/views/settings/tabs/user/SessionManagerTab.tsx +++ b/src/components/views/settings/tabs/user/SessionManagerTab.tsx @@ -27,23 +27,7 @@ const SessionManagerTab: React.FC = () => { heading={_t('Current session')} // TODO session content coming here // in next PR - > - - - - + /> ; }; diff --git a/test/components/views/settings/devices/DeviceSecurityCard-test.tsx b/test/components/views/settings/devices/DeviceSecurityCard-test.tsx index 02a5cd38ea3..045478fa803 100644 --- a/test/components/views/settings/devices/DeviceSecurityCard-test.tsx +++ b/test/components/views/settings/devices/DeviceSecurityCard-test.tsx @@ -17,15 +17,29 @@ limitations under the License. import { render } from '@testing-library/react'; import React from 'react'; -import DeviceSecurityCard from '../../../../../src/components/views/settings/devices/DeviceSecurityCard'; +import DeviceSecurityCard, { + DeviceSecurityVariation, +} from '../../../../../src/components/views/settings/devices/DeviceSecurityCard'; describe('', () => { - const defaultProps = {}; - const getComponent = (props = {}) => - render(); + const defaultProps = { + variation: DeviceSecurityVariation.Verified, + heading: 'Verified session', + description: 'nice', + }; + const getComponent = (props = {}): React.ReactElement => + ; - it('renders', () => { - const component = getComponent(); - expect(component).toBeTruthy(); + it('renders basic card', () => { + const { container } = render(getComponent()); + expect(container).toMatchSnapshot(); + }); + + it('renders with children', () => { + const { container } = render(getComponent({ + children:
hey
, + variation: DeviceSecurityVariation.Unverified, + })); + expect(container).toMatchSnapshot(); }); }); diff --git a/test/components/views/settings/devices/__snapshots__/DeviceSecurityCard-test.tsx.snap b/test/components/views/settings/devices/__snapshots__/DeviceSecurityCard-test.tsx.snap new file mode 100644 index 00000000000..900c94d451d --- /dev/null +++ b/test/components/views/settings/devices/__snapshots__/DeviceSecurityCard-test.tsx.snap @@ -0,0 +1,66 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[` renders basic card 1`] = ` +
+
+
+
+
+
+

+ Verified session +

+

+ nice +

+
+
+
+`; + +exports[` renders with children 1`] = ` +
+
+
+
+
+
+

+ Verified session +

+

+ nice +

+
+ hey +
+
+
+
+`; From d3ffdfbdb336f155966ddbbaccf11613ee13d37c Mon Sep 17 00:00:00 2001 From: Kerry Archibald Date: Tue, 9 Aug 2022 16:02:43 +0200 Subject: [PATCH 04/22] i18n --- src/i18n/strings/en_EN.json | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json index 1878315eb69..e601003ecb4 100644 --- a/src/i18n/strings/en_EN.json +++ b/src/i18n/strings/en_EN.json @@ -1564,8 +1564,6 @@ "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.", "Sessions": "Sessions", "Current session": "Current session", - "Verified session": "Verified session", - "This session is ready for secure messaging.": "This session is ready for secure messaging.", "Sidebar": "Sidebar", "Spaces to show": "Spaces to show", "Spaces are ways to group rooms and people. Alongside the spaces you're in, you can use some pre-built ones too.": "Spaces are ways to group rooms and people. Alongside the spaces you're in, you can use some pre-built ones too.", From 63a086662e0028b050c1ae56362b9c1d48f44e27 Mon Sep 17 00:00:00 2001 From: Kerry Archibald Date: Tue, 9 Aug 2022 16:05:42 +0200 Subject: [PATCH 05/22] stylelint --- .../components/views/settings/devices/_DeviceSecurityCard.pcss | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/res/css/components/views/settings/devices/_DeviceSecurityCard.pcss b/res/css/components/views/settings/devices/_DeviceSecurityCard.pcss index 5410925dafa..e6a207bf27e 100644 --- a/res/css/components/views/settings/devices/_DeviceSecurityCard.pcss +++ b/res/css/components/views/settings/devices/_DeviceSecurityCard.pcss @@ -37,7 +37,6 @@ limitations under the License. height: 40px; width: 40px; - color: var(--icon-color); background-color: var(--background-color); @@ -67,4 +66,4 @@ limitations under the License. margin: 0 0 $spacing-8 0; font-size: $font-12px; color: $secondary-content; -} \ No newline at end of file +} From 1bfa02d8efe2cb233c0fac57aba815bb36c68719 Mon Sep 17 00:00:00 2001 From: Kerry Archibald Date: Tue, 9 Aug 2022 16:21:44 +0200 Subject: [PATCH 06/22] redo lost lint fixes --- src/components/views/settings/tabs/user/SessionManagerTab.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/views/settings/tabs/user/SessionManagerTab.tsx b/src/components/views/settings/tabs/user/SessionManagerTab.tsx index d17544e6332..17c09aeb7a3 100644 --- a/src/components/views/settings/tabs/user/SessionManagerTab.tsx +++ b/src/components/views/settings/tabs/user/SessionManagerTab.tsx @@ -17,7 +17,6 @@ limitations under the License. import React from 'react'; import { _t } from "../../../../../languageHandler"; -import DeviceSecurityCard, { DeviceSecurityVariation } from '../../devices/DeviceSecurityCard'; import SettingsSubsection from '../../shared/SettingsSubsection'; import SettingsTab from '../SettingsTab'; From 20531984fca74ec2640ad670c18e150b01a3002d Mon Sep 17 00:00:00 2001 From: Kerry Archibald Date: Wed, 10 Aug 2022 09:41:41 +0200 Subject: [PATCH 07/22] fix svg ref --- src/components/views/elements/AppWarning.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/views/elements/AppWarning.tsx b/src/components/views/elements/AppWarning.tsx index 819da419e3c..9d1515bf0ab 100644 --- a/src/components/views/elements/AppWarning.tsx +++ b/src/components/views/elements/AppWarning.tsx @@ -24,7 +24,7 @@ const AppWarning: React.FC = (props) => { return (
- +
{ props.errorMsg || "Error" } From d1aee34d810d6787faf7d5c4db136ab4348f8ff1 Mon Sep 17 00:00:00 2001 From: Kerry Archibald Date: Wed, 10 Aug 2022 09:53:49 +0200 Subject: [PATCH 08/22] actually fix svg --- src/components/views/elements/AppWarning.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/views/elements/AppWarning.tsx b/src/components/views/elements/AppWarning.tsx index 9d1515bf0ab..256f2a50282 100644 --- a/src/components/views/elements/AppWarning.tsx +++ b/src/components/views/elements/AppWarning.tsx @@ -24,7 +24,7 @@ const AppWarning: React.FC = (props) => { return (
- +
{ props.errorMsg || "Error" } From d10f9b55e755c9cdaa568e0b17fb50f3ec64a104 Mon Sep 17 00:00:00 2001 From: Kerry Archibald Date: Wed, 10 Aug 2022 11:50:14 +0200 Subject: [PATCH 09/22] fix stupid copy pasting --- src/components/views/elements/AppWarning.tsx | 2 +- src/components/views/right_panel/EncryptionPanel.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/views/elements/AppWarning.tsx b/src/components/views/elements/AppWarning.tsx index 256f2a50282..b3dfae99118 100644 --- a/src/components/views/elements/AppWarning.tsx +++ b/src/components/views/elements/AppWarning.tsx @@ -24,7 +24,7 @@ const AppWarning: React.FC = (props) => { return (
- +
{ props.errorMsg || "Error" } diff --git a/src/components/views/right_panel/EncryptionPanel.tsx b/src/components/views/right_panel/EncryptionPanel.tsx index a7d11eb74eb..d0d6c7bf5b9 100644 --- a/src/components/views/right_panel/EncryptionPanel.tsx +++ b/src/components/views/right_panel/EncryptionPanel.tsx @@ -85,7 +85,7 @@ const EncryptionPanel: React.FC = (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/verified-deprecated.svg").default, + headerImage: require("../../../../res/img/e2e/warning-deprecated.svg").default, title: _t("Your messages are not secure"), description:
{ _t("One of the following may be compromised:") } From 44460637ab6b87a069e3f0b25cf6c501806318d8 Mon Sep 17 00:00:00 2001 From: Kerry Archibald Date: Wed, 10 Aug 2022 15:05:50 +0200 Subject: [PATCH 10/22] use rgba for e2e light variations --- res/themes/legacy-light/css/_legacy-light.pcss | 4 ++-- res/themes/light/css/_light.pcss | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/res/themes/legacy-light/css/_legacy-light.pcss b/res/themes/legacy-light/css/_legacy-light.pcss index 07681feb335..20ca67a3cf7 100644 --- a/res/themes/legacy-light/css/_legacy-light.pcss +++ b/res/themes/legacy-light/css/_legacy-light.pcss @@ -217,8 +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; +$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; diff --git a/res/themes/light/css/_light.pcss b/res/themes/light/css/_light.pcss index 7eb2b410756..fc9168ccf81 100644 --- a/res/themes/light/css/_light.pcss +++ b/res/themes/light/css/_light.pcss @@ -201,8 +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; +$e2e-verified-color-light: rgba($e2e-verified-color, 0.06); +$e2e-warning-color-light: rgba($e2e-warning-color, 0.06); /* ******************** */ /* Tabbed views */ From 5bffc94395ff760c65f133824e5374484daaea71 Mon Sep 17 00:00:00 2001 From: Kerry Archibald Date: Tue, 9 Aug 2022 15:20:56 +0200 Subject: [PATCH 11/22] add security card and style --- res/css/_components.pcss | 1 + .../settings/devices/_DeviceSecurityCard.pcss | 70 +++++++++++++++++++ .../legacy-light/css/_legacy-light.pcss | 2 + res/themes/light/css/_light.pcss | 2 + .../settings/devices/DeviceSecurityCard.tsx | 59 ++++++++++++++++ .../settings/tabs/user/SessionManagerTab.tsx | 1 + src/i18n/strings/en_EN.json | 2 + .../devices/DeviceSecurityCard-test.tsx | 31 ++++++++ 8 files changed, 168 insertions(+) create mode 100644 res/css/components/views/settings/devices/_DeviceSecurityCard.pcss create mode 100644 src/components/views/settings/devices/DeviceSecurityCard.tsx create mode 100644 test/components/views/settings/devices/DeviceSecurityCard-test.tsx diff --git a/res/css/_components.pcss b/res/css/_components.pcss index d6445f01435..c81f7d61a4a 100644 --- a/res/css/_components.pcss +++ b/res/css/_components.pcss @@ -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"; diff --git a/res/css/components/views/settings/devices/_DeviceSecurityCard.pcss b/res/css/components/views/settings/devices/_DeviceSecurityCard.pcss new file mode 100644 index 00000000000..bbad8fa3b95 --- /dev/null +++ b/res/css/components/views/settings/devices/_DeviceSecurityCard.pcss @@ -0,0 +1,70 @@ +/* +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 $system; + 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-unverified-color; + --background-color: $e2e-unverified-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; +} \ No newline at end of file diff --git a/res/themes/legacy-light/css/_legacy-light.pcss b/res/themes/legacy-light/css/_legacy-light.pcss index 4da7e8e1230..69d9779f12c 100644 --- a/res/themes/legacy-light/css/_legacy-light.pcss +++ b/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: #f1faf9; +$e2e-unverified-color-light: #fff5f5; /*** ImageView ***/ $lightbox-bg-color: #454545; diff --git a/res/themes/light/css/_light.pcss b/res/themes/light/css/_light.pcss index abde9cf52d1..00d1f1a1237 100644 --- a/res/themes/light/css/_light.pcss +++ b/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: #f1faf9; +$e2e-unverified-color-light: #fff5f5; /* ******************** */ /* Tabbed views */ diff --git a/src/components/views/settings/devices/DeviceSecurityCard.tsx b/src/components/views/settings/devices/DeviceSecurityCard.tsx new file mode 100644 index 00000000000..c9872254490 --- /dev/null +++ b/src/components/views/settings/devices/DeviceSecurityCard.tsx @@ -0,0 +1,59 @@ +/* +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'; + +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.Inactive]: VerifiedIcon, + [DeviceSecurityVariation.Verified]: VerifiedIcon, + [DeviceSecurityVariation.Unverified]: UnverifiedIcon, +}; + +const DeviceSecurityIcon: React.FC<{ variation: DeviceSecurityVariation }> = ({ variation }) => { + const Icon = VariationIcon[variation]; + return
+ +
; +}; + +const DeviceSecurityCard: React.FC = ({ variation, heading, description, children }) => { + return
+ +
+

{ heading }

+

{ description }

+ { children } +
+
; +}; + +export default DeviceSecurityCard; diff --git a/src/components/views/settings/tabs/user/SessionManagerTab.tsx b/src/components/views/settings/tabs/user/SessionManagerTab.tsx index 7d65ce83da0..832a9ae06be 100644 --- a/src/components/views/settings/tabs/user/SessionManagerTab.tsx +++ b/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'; diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json index c15c81273cf..4065d6c9922 100644 --- a/src/i18n/strings/en_EN.json +++ b/src/i18n/strings/en_EN.json @@ -1564,6 +1564,8 @@ "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.", "Sessions": "Sessions", "Current session": "Current session", + "Verified session": "Verified session", + "This session is ready for secure messaging.": "This session is ready for secure messaging.", "Sidebar": "Sidebar", "Spaces to show": "Spaces to show", "Spaces are ways to group rooms and people. Alongside the spaces you're in, you can use some pre-built ones too.": "Spaces are ways to group rooms and people. Alongside the spaces you're in, you can use some pre-built ones too.", diff --git a/test/components/views/settings/devices/DeviceSecurityCard-test.tsx b/test/components/views/settings/devices/DeviceSecurityCard-test.tsx new file mode 100644 index 00000000000..02a5cd38ea3 --- /dev/null +++ b/test/components/views/settings/devices/DeviceSecurityCard-test.tsx @@ -0,0 +1,31 @@ +/* +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 from '../../../../../src/components/views/settings/devices/DeviceSecurityCard'; + +describe('', () => { + const defaultProps = {}; + const getComponent = (props = {}) => + render(); + + it('renders', () => { + const component = getComponent(); + expect(component).toBeTruthy(); + }); +}); From 1c9cdf94f404c3bd198903fe89a4eca1341d6815 Mon Sep 17 00:00:00 2001 From: Kerry Archibald Date: Tue, 9 Aug 2022 15:51:31 +0200 Subject: [PATCH 12/22] deprecate warning and verified svgs that use hard coded color --- res/img/e2e/verified-deprecated.svg | 3 +++ res/img/e2e/verified.svg | 2 +- res/img/e2e/warning-deprecated.svg | 3 +++ res/img/e2e/warning.svg | 2 +- .../views/dialogs/security/SetupEncryptionDialog.tsx | 4 ++-- src/components/views/elements/AppWarning.tsx | 2 +- src/components/views/right_panel/EncryptionPanel.tsx | 2 +- 7 files changed, 12 insertions(+), 6 deletions(-) create mode 100644 res/img/e2e/verified-deprecated.svg create mode 100644 res/img/e2e/warning-deprecated.svg diff --git a/res/img/e2e/verified-deprecated.svg b/res/img/e2e/verified-deprecated.svg new file mode 100644 index 00000000000..f90d9db554c --- /dev/null +++ b/res/img/e2e/verified-deprecated.svg @@ -0,0 +1,3 @@ + + + diff --git a/res/img/e2e/verified.svg b/res/img/e2e/verified.svg index f90d9db554c..9213d2b05d9 100644 --- a/res/img/e2e/verified.svg +++ b/res/img/e2e/verified.svg @@ -1,3 +1,3 @@ - + diff --git a/res/img/e2e/warning-deprecated.svg b/res/img/e2e/warning-deprecated.svg new file mode 100644 index 00000000000..58f5c3b7d1c --- /dev/null +++ b/res/img/e2e/warning-deprecated.svg @@ -0,0 +1,3 @@ + + + diff --git a/res/img/e2e/warning.svg b/res/img/e2e/warning.svg index 58f5c3b7d1c..1acbb53bb71 100644 --- a/res/img/e2e/warning.svg +++ b/res/img/e2e/warning.svg @@ -1,3 +1,3 @@ - + diff --git a/src/components/views/dialogs/security/SetupEncryptionDialog.tsx b/src/components/views/dialogs/security/SetupEncryptionDialog.tsx index 1a945405023..63d9ad1d2cd 100644 --- a/src/components/views/dialogs/security/SetupEncryptionDialog.tsx +++ b/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; } } diff --git a/src/components/views/elements/AppWarning.tsx b/src/components/views/elements/AppWarning.tsx index b3dfae99118..819da419e3c 100644 --- a/src/components/views/elements/AppWarning.tsx +++ b/src/components/views/elements/AppWarning.tsx @@ -24,7 +24,7 @@ const AppWarning: React.FC = (props) => { return (
- +
{ props.errorMsg || "Error" } diff --git a/src/components/views/right_panel/EncryptionPanel.tsx b/src/components/views/right_panel/EncryptionPanel.tsx index a9ab3e6ab38..a7d11eb74eb 100644 --- a/src/components/views/right_panel/EncryptionPanel.tsx +++ b/src/components/views/right_panel/EncryptionPanel.tsx @@ -85,7 +85,7 @@ const EncryptionPanel: React.FC = (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, title: _t("Your messages are not secure"), description:
{ _t("One of the following may be compromised:") } From 4401a5b4e7c9a6e893be71343e566e814de3c413 Mon Sep 17 00:00:00 2001 From: Kerry Archibald Date: Tue, 9 Aug 2022 15:51:54 +0200 Subject: [PATCH 13/22] style icons, test --- .../settings/devices/_DeviceSecurityCard.pcss | 6 +- res/img/element-icons/settings/inactive.svg | 3 + .../legacy-light/css/_legacy-light.pcss | 2 +- res/themes/light/css/_light.pcss | 2 +- .../settings/devices/DeviceSecurityCard.tsx | 3 +- .../devices/DeviceSecurityCard-test.tsx | 28 ++++++-- .../DeviceSecurityCard-test.tsx.snap | 66 +++++++++++++++++++ 7 files changed, 97 insertions(+), 13 deletions(-) create mode 100644 res/img/element-icons/settings/inactive.svg create mode 100644 test/components/views/settings/devices/__snapshots__/DeviceSecurityCard-test.tsx.snap diff --git a/res/css/components/views/settings/devices/_DeviceSecurityCard.pcss b/res/css/components/views/settings/devices/_DeviceSecurityCard.pcss index bbad8fa3b95..5410925dafa 100644 --- a/res/css/components/views/settings/devices/_DeviceSecurityCard.pcss +++ b/res/css/components/views/settings/devices/_DeviceSecurityCard.pcss @@ -22,7 +22,7 @@ limitations under the License. padding: $spacing-16; - border: 1px solid $system; + border: 1px solid $quinary-content; border-radius: 8px; } @@ -47,8 +47,8 @@ limitations under the License. } &.Unverified { - --icon-color: $e2e-unverified-color; - --background-color: $e2e-unverified-color-light; + --icon-color: $e2e-warning-color; + --background-color: $e2e-warning-color-light; } &.Inactive { diff --git a/res/img/element-icons/settings/inactive.svg b/res/img/element-icons/settings/inactive.svg new file mode 100644 index 00000000000..63b6b97bd59 --- /dev/null +++ b/res/img/element-icons/settings/inactive.svg @@ -0,0 +1,3 @@ + + + diff --git a/res/themes/legacy-light/css/_legacy-light.pcss b/res/themes/legacy-light/css/_legacy-light.pcss index 69d9779f12c..07681feb335 100644 --- a/res/themes/legacy-light/css/_legacy-light.pcss +++ b/res/themes/legacy-light/css/_legacy-light.pcss @@ -218,7 +218,7 @@ $e2e-unknown-color: #e8bf37; $e2e-unverified-color: #e8bf37; $e2e-warning-color: #ba6363; $e2e-verified-color-light: #f1faf9; -$e2e-unverified-color-light: #fff5f5; +$e2e-warning-color-light: #fff5f5; /*** ImageView ***/ $lightbox-bg-color: #454545; diff --git a/res/themes/light/css/_light.pcss b/res/themes/light/css/_light.pcss index 00d1f1a1237..7eb2b410756 100644 --- a/res/themes/light/css/_light.pcss +++ b/res/themes/light/css/_light.pcss @@ -202,7 +202,7 @@ $e2e-unknown-color: #e8bf37; $e2e-unverified-color: #e8bf37; $e2e-warning-color: #ba6363; $e2e-verified-color-light: #f1faf9; -$e2e-unverified-color-light: #fff5f5; +$e2e-warning-color-light: #fff5f5; /* ******************** */ /* Tabbed views */ diff --git a/src/components/views/settings/devices/DeviceSecurityCard.tsx b/src/components/views/settings/devices/DeviceSecurityCard.tsx index c9872254490..bf5a3e5729b 100644 --- a/src/components/views/settings/devices/DeviceSecurityCard.tsx +++ b/src/components/views/settings/devices/DeviceSecurityCard.tsx @@ -19,6 +19,7 @@ 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', @@ -33,7 +34,7 @@ interface Props { } const VariationIcon: Record>> = { - [DeviceSecurityVariation.Inactive]: VerifiedIcon, + [DeviceSecurityVariation.Inactive]: InactiveIcon, [DeviceSecurityVariation.Verified]: VerifiedIcon, [DeviceSecurityVariation.Unverified]: UnverifiedIcon, }; diff --git a/test/components/views/settings/devices/DeviceSecurityCard-test.tsx b/test/components/views/settings/devices/DeviceSecurityCard-test.tsx index 02a5cd38ea3..045478fa803 100644 --- a/test/components/views/settings/devices/DeviceSecurityCard-test.tsx +++ b/test/components/views/settings/devices/DeviceSecurityCard-test.tsx @@ -17,15 +17,29 @@ limitations under the License. import { render } from '@testing-library/react'; import React from 'react'; -import DeviceSecurityCard from '../../../../../src/components/views/settings/devices/DeviceSecurityCard'; +import DeviceSecurityCard, { + DeviceSecurityVariation, +} from '../../../../../src/components/views/settings/devices/DeviceSecurityCard'; describe('', () => { - const defaultProps = {}; - const getComponent = (props = {}) => - render(); + const defaultProps = { + variation: DeviceSecurityVariation.Verified, + heading: 'Verified session', + description: 'nice', + }; + const getComponent = (props = {}): React.ReactElement => + ; - it('renders', () => { - const component = getComponent(); - expect(component).toBeTruthy(); + it('renders basic card', () => { + const { container } = render(getComponent()); + expect(container).toMatchSnapshot(); + }); + + it('renders with children', () => { + const { container } = render(getComponent({ + children:
hey
, + variation: DeviceSecurityVariation.Unverified, + })); + expect(container).toMatchSnapshot(); }); }); diff --git a/test/components/views/settings/devices/__snapshots__/DeviceSecurityCard-test.tsx.snap b/test/components/views/settings/devices/__snapshots__/DeviceSecurityCard-test.tsx.snap new file mode 100644 index 00000000000..900c94d451d --- /dev/null +++ b/test/components/views/settings/devices/__snapshots__/DeviceSecurityCard-test.tsx.snap @@ -0,0 +1,66 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[` renders basic card 1`] = ` +
+
+
+
+
+
+

+ Verified session +

+

+ nice +

+
+
+
+`; + +exports[` renders with children 1`] = ` +
+
+
+
+
+
+

+ Verified session +

+

+ nice +

+
+ hey +
+
+
+
+`; From 31af56bcce99a870f72b12502025c6d11276bab4 Mon Sep 17 00:00:00 2001 From: Kerry Archibald Date: Tue, 9 Aug 2022 16:02:43 +0200 Subject: [PATCH 14/22] i18n --- src/i18n/strings/en_EN.json | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json index 4065d6c9922..c15c81273cf 100644 --- a/src/i18n/strings/en_EN.json +++ b/src/i18n/strings/en_EN.json @@ -1564,8 +1564,6 @@ "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.", "Sessions": "Sessions", "Current session": "Current session", - "Verified session": "Verified session", - "This session is ready for secure messaging.": "This session is ready for secure messaging.", "Sidebar": "Sidebar", "Spaces to show": "Spaces to show", "Spaces are ways to group rooms and people. Alongside the spaces you're in, you can use some pre-built ones too.": "Spaces are ways to group rooms and people. Alongside the spaces you're in, you can use some pre-built ones too.", From a356a9a242c7d5707af119b5088021b3b52ebe60 Mon Sep 17 00:00:00 2001 From: Kerry Archibald Date: Tue, 9 Aug 2022 16:05:42 +0200 Subject: [PATCH 15/22] stylelint --- .../components/views/settings/devices/_DeviceSecurityCard.pcss | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/res/css/components/views/settings/devices/_DeviceSecurityCard.pcss b/res/css/components/views/settings/devices/_DeviceSecurityCard.pcss index 5410925dafa..e6a207bf27e 100644 --- a/res/css/components/views/settings/devices/_DeviceSecurityCard.pcss +++ b/res/css/components/views/settings/devices/_DeviceSecurityCard.pcss @@ -37,7 +37,6 @@ limitations under the License. height: 40px; width: 40px; - color: var(--icon-color); background-color: var(--background-color); @@ -67,4 +66,4 @@ limitations under the License. margin: 0 0 $spacing-8 0; font-size: $font-12px; color: $secondary-content; -} \ No newline at end of file +} From a5f4bf1b2fecc3fd55621830f71810aa9acd26c0 Mon Sep 17 00:00:00 2001 From: Kerry Archibald Date: Wed, 10 Aug 2022 09:41:41 +0200 Subject: [PATCH 16/22] fix svg ref --- src/components/views/elements/AppWarning.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/views/elements/AppWarning.tsx b/src/components/views/elements/AppWarning.tsx index 819da419e3c..9d1515bf0ab 100644 --- a/src/components/views/elements/AppWarning.tsx +++ b/src/components/views/elements/AppWarning.tsx @@ -24,7 +24,7 @@ const AppWarning: React.FC = (props) => { return (
- +
{ props.errorMsg || "Error" } From 46dc5de9b573baec83b29ebcb534229a497c3b0e Mon Sep 17 00:00:00 2001 From: Kerry Archibald Date: Wed, 10 Aug 2022 09:53:49 +0200 Subject: [PATCH 17/22] actually fix svg --- src/components/views/elements/AppWarning.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/views/elements/AppWarning.tsx b/src/components/views/elements/AppWarning.tsx index 9d1515bf0ab..256f2a50282 100644 --- a/src/components/views/elements/AppWarning.tsx +++ b/src/components/views/elements/AppWarning.tsx @@ -24,7 +24,7 @@ const AppWarning: React.FC = (props) => { return (
- +
{ props.errorMsg || "Error" } From 4c19bf45694418734e5859ac8f3f232f05c87d37 Mon Sep 17 00:00:00 2001 From: Kerry Archibald Date: Wed, 10 Aug 2022 11:50:14 +0200 Subject: [PATCH 18/22] fix stupid copy pasting --- src/components/views/elements/AppWarning.tsx | 2 +- src/components/views/right_panel/EncryptionPanel.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/views/elements/AppWarning.tsx b/src/components/views/elements/AppWarning.tsx index 256f2a50282..b3dfae99118 100644 --- a/src/components/views/elements/AppWarning.tsx +++ b/src/components/views/elements/AppWarning.tsx @@ -24,7 +24,7 @@ const AppWarning: React.FC = (props) => { return (
- +
{ props.errorMsg || "Error" } diff --git a/src/components/views/right_panel/EncryptionPanel.tsx b/src/components/views/right_panel/EncryptionPanel.tsx index a7d11eb74eb..d0d6c7bf5b9 100644 --- a/src/components/views/right_panel/EncryptionPanel.tsx +++ b/src/components/views/right_panel/EncryptionPanel.tsx @@ -85,7 +85,7 @@ const EncryptionPanel: React.FC = (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/verified-deprecated.svg").default, + headerImage: require("../../../../res/img/e2e/warning-deprecated.svg").default, title: _t("Your messages are not secure"), description:
{ _t("One of the following may be compromised:") } From 213a77c1c0876f71e7908f3c2b74d7262620f34a Mon Sep 17 00:00:00 2001 From: Kerry Archibald Date: Wed, 10 Aug 2022 15:05:50 +0200 Subject: [PATCH 19/22] use rgba for e2e light variations --- res/themes/legacy-light/css/_legacy-light.pcss | 4 ++-- res/themes/light/css/_light.pcss | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/res/themes/legacy-light/css/_legacy-light.pcss b/res/themes/legacy-light/css/_legacy-light.pcss index 07681feb335..20ca67a3cf7 100644 --- a/res/themes/legacy-light/css/_legacy-light.pcss +++ b/res/themes/legacy-light/css/_legacy-light.pcss @@ -217,8 +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; +$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; diff --git a/res/themes/light/css/_light.pcss b/res/themes/light/css/_light.pcss index 7eb2b410756..fc9168ccf81 100644 --- a/res/themes/light/css/_light.pcss +++ b/res/themes/light/css/_light.pcss @@ -201,8 +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; +$e2e-verified-color-light: rgba($e2e-verified-color, 0.06); +$e2e-warning-color-light: rgba($e2e-warning-color, 0.06); /* ******************** */ /* Tabbed views */ From 6b794ebe0af3dffed95d7a877feac4f2f3a7c876 Mon Sep 17 00:00:00 2001 From: Kerry Archibald Date: Wed, 10 Aug 2022 17:29:54 +0200 Subject: [PATCH 20/22] use device security card in current session section --- .../settings/tabs/user/SessionManagerTab.tsx | 22 +++- src/i18n/strings/en_EN.json | 4 + .../tabs/user/SessionManagerTab-test.tsx | 16 ++- .../SessionManagerTab-test.tsx.snap | 101 +++++++++++++++++- 4 files changed, 138 insertions(+), 5 deletions(-) diff --git a/src/components/views/settings/tabs/user/SessionManagerTab.tsx b/src/components/views/settings/tabs/user/SessionManagerTab.tsx index 832a9ae06be..890f845091d 100644 --- a/src/components/views/settings/tabs/user/SessionManagerTab.tsx +++ b/src/components/views/settings/tabs/user/SessionManagerTab.tsx @@ -28,15 +28,31 @@ const SessionManagerTab: React.FC = () => { const { devices, currentDeviceId, isLoading } = useOwnDevices(); const currentDevice = devices[currentDeviceId]; + 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 { isLoading && } - { !!currentDevice && } + { !!currentDevice && <> + +
+ + + } ; }; diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json index c15c81273cf..07c87bd0a57 100644 --- a/src/i18n/strings/en_EN.json +++ b/src/i18n/strings/en_EN.json @@ -1562,6 +1562,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", "Sidebar": "Sidebar", diff --git a/test/components/views/settings/tabs/user/SessionManagerTab-test.tsx b/test/components/views/settings/tabs/user/SessionManagerTab-test.tsx index 4118cf765a0..aeca182d690 100644 --- a/test/components/views/settings/tabs/user/SessionManagerTab-test.tsx +++ b/test/components/views/settings/tabs/user/SessionManagerTab-test.tsx @@ -137,7 +137,7 @@ describe('', () => { expect(getByTestId(`device-tile-${alicesDevice.device_id}`)).toMatchSnapshot(); }); - it('renders current session section', async () => { + it('renders current session section with an unverified session', async () => { mockClient.getDevices.mockResolvedValue({ devices: [alicesDevice, alicesMobileDevice] }); const noCryptoError = new Error("End-to-end encryption disabled"); mockClient.getStoredDevice.mockImplementation(() => { throw noCryptoError; }); @@ -149,4 +149,18 @@ describe('', () => { expect(getByTestId('current-session-section')).toMatchSnapshot(); }); + + it('renders current session section with a verified session', async () => { + mockClient.getDevices.mockResolvedValue({ devices: [alicesDevice, alicesMobileDevice] }); + mockClient.getStoredDevice.mockImplementation(() => new DeviceInfo(alicesDevice.device_id)); + mockCrossSigningInfo.checkDeviceTrust + .mockReturnValue(new DeviceTrustLevel(true, true, false, false)); + const { getByTestId } = render(getComponent()); + + await act(async () => { + await flushPromisesWithFakeTimers(); + }); + + expect(getByTestId('current-session-section')).toMatchSnapshot(); + }); }); diff --git a/test/components/views/settings/tabs/user/__snapshots__/SessionManagerTab-test.tsx.snap b/test/components/views/settings/tabs/user/__snapshots__/SessionManagerTab-test.tsx.snap index e0910063ab4..2e56729eadc 100644 --- a/test/components/views/settings/tabs/user/__snapshots__/SessionManagerTab-test.tsx.snap +++ b/test/components/views/settings/tabs/user/__snapshots__/SessionManagerTab-test.tsx.snap @@ -1,6 +1,78 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[` renders current session section 1`] = ` +exports[` renders current session section with a verified session 1`] = ` +
+

+ Current session +

+
+
+
+

+ alices_device +

+
+ + Verified + + · + · +
+
+
+
+
+
+
+
+
+
+

+ Verified session +

+

+ This session is ready for secure messaging. +

+
+
+
+
+`; + +exports[` renders current session section with an unverified session 1`] = `
renders current session section 1`] = ` class="mx_DeviceTile_actions" />
+
+
+
+
+
+
+

+ Unverified session +

+

+ Verify or sign out from this session for best security and reliability. +

+
+
`; From aaaa393aeb3799daba8241b1600e86b1a4e61bbd Mon Sep 17 00:00:00 2001 From: Kerry Archibald Date: Wed, 10 Aug 2022 17:37:55 +0200 Subject: [PATCH 21/22] lint --- src/components/views/settings/tabs/user/SessionManagerTab.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/views/settings/tabs/user/SessionManagerTab.tsx b/src/components/views/settings/tabs/user/SessionManagerTab.tsx index 890f845091d..bf6d3bc5aca 100644 --- a/src/components/views/settings/tabs/user/SessionManagerTab.tsx +++ b/src/components/views/settings/tabs/user/SessionManagerTab.tsx @@ -47,7 +47,7 @@ const SessionManagerTab: React.FC = () => { -
+
From 90aad5b43fa13e4d628fe7afc50294321402804a Mon Sep 17 00:00:00 2001 From: Kerry Archibald Date: Thu, 11 Aug 2022 10:10:39 +0200 Subject: [PATCH 22/22] update snapshot test after dev merge --- .../__snapshots__/DevicesPanel-test.tsx.snap | 21 +++++++++++++++++++ 1 file changed, 21 insertions(+) diff --git a/test/components/views/settings/__snapshots__/DevicesPanel-test.tsx.snap b/test/components/views/settings/__snapshots__/DevicesPanel-test.tsx.snap index 5d967f6d2ae..b0a056b10f9 100644 --- a/test/components/views/settings/__snapshots__/DevicesPanel-test.tsx.snap +++ b/test/components/views/settings/__snapshots__/DevicesPanel-test.tsx.snap @@ -109,6 +109,7 @@ exports[` renders device panel with devices 1`] = `
renders device panel with devices 1`] = `
+ + Unverified + + · ·
@@ -206,6 +213,7 @@ exports[` renders device panel with devices 1`] = `
renders device panel with devices 1`] = `
+ + Unverified + + · ·
@@ -262,6 +276,7 @@ exports[` renders device panel with devices 1`] = `
renders device panel with devices 1`] = `
+ + Unverified + + · ·