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