diff --git a/apps/web/res/css/components/views/settings/devices/_DeviceSecurityCard.pcss b/apps/web/res/css/components/views/settings/devices/_DeviceSecurityCard.pcss index 7ac20c076f..0474ceb33c 100644 --- a/apps/web/res/css/components/views/settings/devices/_DeviceSecurityCard.pcss +++ b/apps/web/res/css/components/views/settings/devices/_DeviceSecurityCard.pcss @@ -43,6 +43,7 @@ Please see LICENSE files in the repository root for full details. --background-color: $e2e-warning-color-light; } + &.Unverifiable, &.Inactive { --icon-color: $secondary-content; --background-color: $panels; diff --git a/apps/web/res/css/components/views/settings/devices/_DeviceTypeIcon.pcss b/apps/web/res/css/components/views/settings/devices/_DeviceTypeIcon.pcss index 0d459b3473..7c71fc8398 100644 --- a/apps/web/res/css/components/views/settings/devices/_DeviceTypeIcon.pcss +++ b/apps/web/res/css/components/views/settings/devices/_DeviceTypeIcon.pcss @@ -57,6 +57,10 @@ Please see LICENSE files in the repository root for full details. --v-icon-color: $e2e-verified-color; } + &.unverifiable { + --v-icon-color: $secondary-content; + } + &.unverified { --v-icon-color: $e2e-warning-color; } diff --git a/apps/web/src/components/views/settings/devices/DeviceMetaData.tsx b/apps/web/src/components/views/settings/devices/DeviceMetaData.tsx index 299cef69cf..3e3be6f4a2 100644 --- a/apps/web/src/components/views/settings/devices/DeviceMetaData.tsx +++ b/apps/web/src/components/views/settings/devices/DeviceMetaData.tsx @@ -52,11 +52,22 @@ const getInactiveMetadata = (device: ExtendedDevice): { id: string; value: React const DeviceMetaDatum: React.FC<{ value: string | React.ReactNode; id: string }> = ({ value, id }) => value ? {value} : null; +function getVerifiedTextStatus(isVerified: boolean | null): string { + switch (isVerified) { + case true: + return _t("common|verified"); + case false: + return _t("common|unverified"); + case null: + return _t("common|unverifiable"); + } +} + export const DeviceMetaData: React.FC = ({ device }) => { const inactive = getInactiveMetadata(device); const lastActivity = device.last_seen_ts && `${_t("settings|sessions|last_activity")} ${formatLastActivity(device.last_seen_ts)}`; - const verificationStatus = device.isVerified ? _t("common|verified") : _t("common|unverified"); + const verificationStatus = getVerifiedTextStatus(device.isVerified); // if device is inactive, don't display last activity or verificationStatus const metadata = inactive ? [inactive, { id: "lastSeenIp", value: device.last_seen_ip }] diff --git a/apps/web/src/components/views/settings/devices/DeviceSecurityCard.tsx b/apps/web/src/components/views/settings/devices/DeviceSecurityCard.tsx index 61d527e60f..6db9e3f79b 100644 --- a/apps/web/src/components/views/settings/devices/DeviceSecurityCard.tsx +++ b/apps/web/src/components/views/settings/devices/DeviceSecurityCard.tsx @@ -8,7 +8,7 @@ Please see LICENSE files in the repository root for full details. import classNames from "classnames"; import React from "react"; -import { ShieldIcon, ErrorSolidIcon } from "@vector-im/compound-design-tokens/assets/web/icons"; +import { ShieldIcon, ErrorSolidIcon, InfoSolidIcon } from "@vector-im/compound-design-tokens/assets/web/icons"; import { Icon as InactiveIcon } from "../../../../../res/img/element-icons/settings/inactive.svg"; import { DeviceSecurityVariation } from "./types"; @@ -24,7 +24,7 @@ const VariationIcon: Record = ({ variation }) => { diff --git a/apps/web/src/components/views/settings/devices/DeviceTypeIcon.tsx b/apps/web/src/components/views/settings/devices/DeviceTypeIcon.tsx index 836a2a2da8..23accad760 100644 --- a/apps/web/src/components/views/settings/devices/DeviceTypeIcon.tsx +++ b/apps/web/src/components/views/settings/devices/DeviceTypeIcon.tsx @@ -15,6 +15,7 @@ import { MobileIcon, WebBrowserIcon, DevicesIcon, + InfoSolidIcon, } from "@vector-im/compound-design-tokens/assets/web/icons"; import { _t, _td } from "../../../../languageHandler"; @@ -22,7 +23,7 @@ import { type ExtendedDevice } from "./types"; import { DeviceType } from "../../../../utils/device/parseUserAgent"; interface Props { - isVerified?: ExtendedDevice["isVerified"]; + isVerified: ExtendedDevice["isVerified"]; isSelected?: boolean; deviceType?: DeviceType; } @@ -43,6 +44,38 @@ const deviceTypeLabel: Record = { export const DeviceTypeIcon: React.FC = ({ isVerified, isSelected, deviceType }) => { const Icon = deviceTypeIcon[deviceType!] || deviceTypeIcon[DeviceType.Unknown]; const label = _t(deviceTypeLabel[deviceType!] || deviceTypeLabel[DeviceType.Unknown]); + + let statusIcon; + switch (isVerified) { + case true: + statusIcon = ( + + ); + break; + case false: + statusIcon = ( + + ); + break; + default: + statusIcon = ( + + ); + break; + } + return (
= ({ isVerified, isSelected, device
- {isVerified ? ( - - ) : ( - - )} + {statusIcon}
); }; diff --git a/apps/web/src/components/views/settings/devices/DeviceVerificationStatusCard.tsx b/apps/web/src/components/views/settings/devices/DeviceVerificationStatusCard.tsx index 87cb9113ca..93d440be3c 100644 --- a/apps/web/src/components/views/settings/devices/DeviceVerificationStatusCard.tsx +++ b/apps/web/src/components/views/settings/devices/DeviceVerificationStatusCard.tsx @@ -45,7 +45,7 @@ const getCardProps = ( } if (device.isVerified === null) { return { - variation: DeviceSecurityVariation.Unverified, + variation: DeviceSecurityVariation.Unverifiable, heading: _t("settings|sessions|unverified_session"), description: ( <> diff --git a/apps/web/src/components/views/settings/devices/filter.ts b/apps/web/src/components/views/settings/devices/filter.ts index 3712ab4939..e6edf063b1 100644 --- a/apps/web/src/components/views/settings/devices/filter.ts +++ b/apps/web/src/components/views/settings/devices/filter.ts @@ -17,6 +17,7 @@ export const INACTIVE_DEVICE_AGE_DAYS = INACTIVE_DEVICE_AGE_MS / MS_DAY; export type FilterVariation = | DeviceSecurityVariation.Verified | DeviceSecurityVariation.Inactive + | DeviceSecurityVariation.Unverifiable | DeviceSecurityVariation.Unverified; export const isDeviceInactive: DeviceFilterCondition = (device) => @@ -24,7 +25,8 @@ export const isDeviceInactive: DeviceFilterCondition = (device) => const filters: Record = { [DeviceSecurityVariation.Verified]: (device) => !!device.isVerified, - [DeviceSecurityVariation.Unverified]: (device) => !device.isVerified, + [DeviceSecurityVariation.Unverified]: (device) => device.isVerified === false, + [DeviceSecurityVariation.Unverifiable]: (device) => device.isVerified === null, [DeviceSecurityVariation.Inactive]: isDeviceInactive, }; diff --git a/apps/web/src/i18n/strings/en_EN.json b/apps/web/src/i18n/strings/en_EN.json index 481a2ad478..8def09eb7e 100644 --- a/apps/web/src/i18n/strings/en_EN.json +++ b/apps/web/src/i18n/strings/en_EN.json @@ -578,6 +578,7 @@ "unmute": "Unmute", "unnamed_room": "Unnamed Room", "unnamed_space": "Unnamed Space", + "unverifiable": "Unverifiable", "unverified": "Unverified", "updating": "Updating...", "user": "User",