diff --git a/src/app/organisms/settings/DeviceManage.jsx b/src/app/organisms/settings/DeviceManage.jsx new file mode 100644 index 00000000..3d39cac0 --- /dev/null +++ b/src/app/organisms/settings/DeviceManage.jsx @@ -0,0 +1,175 @@ +import React, { useState, useEffect } from 'react'; +import './DeviceManage.scss'; +import dateFormat from 'dateformat'; + +import initMatrix from '../../../client/initMatrix'; + +import Text from '../../atoms/text/Text'; +import IconButton from '../../atoms/button/IconButton'; +import { MenuHeader } from '../../atoms/context-menu/ContextMenu'; +import Spinner from '../../atoms/spinner/Spinner'; +import SettingTile from '../../molecules/setting-tile/SettingTile'; + +import PencilIC from '../../../../public/res/ic/outlined/pencil.svg'; +import BinIC from '../../../../public/res/ic/outlined/bin.svg'; + +import { useStore } from '../../hooks/useStore'; + +function useDeviceList() { + const mx = initMatrix.matrixClient; + const [deviceList, setDeviceList] = useState(null); + + useEffect(() => { + let isMounted = true; + + const updateDevices = () => mx.getDevices().then((data) => { + if (!isMounted) return; + setDeviceList(data.devices || []); + }); + updateDevices(); + + const handleDevicesUpdate = (users) => { + if (users.includes(mx.getUserId())) { + updateDevices(); + } + }; + + mx.on('crypto.devicesUpdated', handleDevicesUpdate); + return () => { + mx.removeListener('crypto.devicesUpdated', handleDevicesUpdate); + isMounted = false; + }; + }, []); + return deviceList; +} + +function isCrossVerified(deviceId) { + try { + const mx = initMatrix.matrixClient; + const crossSignInfo = mx.getStoredCrossSigningForUser(mx.getUserId()); + const deviceInfo = mx.getStoredDevice(mx.getUserId(), deviceId); + const deviceTrust = crossSignInfo.checkDeviceTrust(crossSignInfo, deviceInfo, false, true); + return deviceTrust.isCrossSigningVerified(); + } catch { + return false; + } +} + +function DeviceManage() { + const mx = initMatrix.matrixClient; + const deviceList = useDeviceList(); + const [processing, setProcessing] = useState([]); + const mountStore = useStore(); + mountStore.setItem(true); + useEffect(() => { + setProcessing([]); + }, [deviceList]); + + const addToProcessing = (device) => { + const old = [...processing]; + old.push(device.device_id); + setProcessing(old); + }; + + const removeFromProcessing = () => { + setProcessing([]); + }; + + if (deviceList === null) { + return ( +
+
+ + Loading devices... +
+
+ ); + } + + const handleRename = async (device) => { + const newName = window.prompt('Edit session name', device.display_name); + if (newName === null || newName.trim() === '') return; + if (newName.trim() === device.display_name) return; + addToProcessing(device); + try { + await mx.setDeviceDetails(device.device_id, { + display_name: newName, + }); + } catch { + if (!mountStore.getItem()) return; + removeFromProcessing(device); + } + }; + + const handleRemove = async (device, auth = undefined) => { + if (confirm(`You are about to logout "${device.display_name}" session?`)) { + addToProcessing(device, auth); + try { + await mx.deleteDevice(device.device_id); + } catch (e) { + if (!mountStore.getItem()) return; + removeFromProcessing(device); + } + } + }; + + const renderDevice = (device, isVerified) => ( + + {device.display_name} + {` — ${device.device_id}${mx.deviceId === device.device_id ? ' (current)' : ''}`} + + )} + options={ + processing.includes(device.device_id) + ? + : ( + <> + handleRename(device)} src={PencilIC} tooltip="Rename" /> + handleRemove(device)} src={BinIC} tooltip="Remove session" /> + + ) + } + content={( + + Last activity + + {dateFormat(new Date(device.last_seen_ts), ' hh:MM TT, dd/mm/yyyy')} + + {` at ${device.last_seen_ip}`} + + )} + /> + ); + + const unverified = []; + const verified = []; + deviceList.sort((a, b) => b.last_seen_ts - a.last_seen_ts).forEach((device) => { + if (isCrossVerified(device.device_id)) verified.push(device); + else unverified.push(device); + }); + return ( +
+
+ Unverified sessions + { + unverified.length > 0 + ? unverified.map((device) => renderDevice(device, false)) + : No unverified session + } +
+
+ Verified sessions + { + verified.length > 0 + ? verified.map((device) => renderDevice(device, true)) + : No verified session + } +
+
+ ); +} + +export default DeviceManage; diff --git a/src/app/organisms/settings/DeviceManage.scss b/src/app/organisms/settings/DeviceManage.scss new file mode 100644 index 00000000..0daf2e61 --- /dev/null +++ b/src/app/organisms/settings/DeviceManage.scss @@ -0,0 +1,18 @@ +@use '../../partials/flex'; + +.device-manage { + &__loading { + @extend .cp-fx__row--c-c; + padding: var(--sp-extra-loose) var(--sp-normal); + + .text { + margin: 0 var(--sp-normal); + } + } + &__info { + margin: var(--sp-normal); + } + & .setting-tile:last-of-type { + border-bottom: none; + } +} \ No newline at end of file diff --git a/src/app/organisms/settings/Settings.jsx b/src/app/organisms/settings/Settings.jsx index 84013cc9..acfef5c9 100644 --- a/src/app/organisms/settings/Settings.jsx +++ b/src/app/organisms/settings/Settings.jsx @@ -26,6 +26,7 @@ import ImportE2ERoomKeys from '../../molecules/import-export-e2e-room-keys/Impor import ExportE2ERoomKeys from '../../molecules/import-export-e2e-room-keys/ExportE2ERoomKeys'; import ProfileEditor from '../profile-editor/ProfileEditor'; +import DeviceManage from './DeviceManage'; import SunIC from '../../../../public/res/ic/outlined/sun.svg'; import LockIC from '../../../../public/res/ic/outlined/lock.svg'; @@ -167,15 +168,16 @@ function SecuritySection() { return (
- Device Info + Session Info Use this device ID-key combo to verify or manage this session from Element client.} + title={`Session key: ${initMatrix.matrixClient.getDeviceEd25519Key().match(/.{1,4}/g).join(' ')}`} + content={Use this session ID-key combo to verify or manage this session.} />
+
Encryption