+ Your device is verified.
+
+
+
+ {menuItems.map((item) => (
+ }
+ onClick={() => setActivePage(item.page)}
+ >
+
+ {item.name}
+
+
+ ))}
+
+ -
+
- Open your other verified device. +
- + Open Settings. + +
- + Find this device in Devices/Sessions section. + +
- Initiate verification. +
- Global Notifications
- onSelect(evt, DM)} iconSrc={ChevronBottomIC}>
- { typeToLabel[rulesToType[DM]] }
-
- )}
- content={Default notification settings for all direct message. }
- />
- onSelect(evt, ENC_DM)} iconSrc={ChevronBottomIC}>
- {typeToLabel[rulesToType[ENC_DM]]}
-
- )}
- content={Default notification settings for all encrypted direct message. }
- />
- onSelect(evt, ROOM)} iconSrc={ChevronBottomIC}>
- {typeToLabel[rulesToType[ROOM]]}
-
- )}
- content={Default notification settings for all room message. }
- />
- onSelect(evt, ENC_ROOM)} iconSrc={ChevronBottomIC}>
- {typeToLabel[rulesToType[ENC_ROOM]]}
-
- )}
- content={Default notification settings for all encrypted room message. }
- />
-
- );
-}
-
-export default GlobalNotification;
diff --git a/src/app/molecules/global-notification/IgnoreUserList.jsx b/src/app/molecules/global-notification/IgnoreUserList.jsx
deleted file mode 100644
index 1b44a04..0000000
--- a/src/app/molecules/global-notification/IgnoreUserList.jsx
+++ /dev/null
@@ -1,65 +0,0 @@
-import React from 'react';
-import './IgnoreUserList.scss';
-
-import * as roomActions from '../../../client/action/room';
-
-import Text from '../../atoms/text/Text';
-import Chip from '../../atoms/chip/Chip';
-import Input from '../../atoms/input/Input';
-import Button from '../../atoms/button/Button';
-import { MenuHeader } from '../../atoms/context-menu/ContextMenu';
-import SettingTile from '../setting-tile/SettingTile';
-
-import CrossIC from '../../../../public/res/ic/outlined/cross.svg';
-
-import { useAccountData } from '../../hooks/useAccountData';
-import { useMatrixClient } from '../../hooks/useMatrixClient';
-
-function IgnoreUserList() {
- useAccountData('m.ignored_user_list');
- const mx = useMatrixClient();
- const ignoredUsers = mx.getIgnoredUsers();
-
- const handleSubmit = (evt) => {
- evt.preventDefault();
- const { ignoreInput } = evt.target.elements;
- const value = ignoreInput.value.trim();
- const userIds = value.split(' ').filter((v) => v.match(/^@\S+:\S+$/));
- if (userIds.length === 0) return;
- ignoreInput.value = '';
- roomActions.ignore(mx, userIds);
- };
-
- return (
-
- Ignored users
-
- Ignore userId if you do not want to receive their messages or invites.
-
- {ignoredUsers.length > 0 && (
-
- )}
- />
-
- );
-}
-
-export default IgnoreUserList;
diff --git a/src/app/molecules/global-notification/IgnoreUserList.scss b/src/app/molecules/global-notification/IgnoreUserList.scss
deleted file mode 100644
index 9283155..0000000
--- a/src/app/molecules/global-notification/IgnoreUserList.scss
+++ /dev/null
@@ -1,17 +0,0 @@
-.ignore-user-list {
- &__users {
- & form,
- & > div:last-child {
- display: flex;
- flex-wrap: wrap;
- gap: var(--sp-tight);
- }
-
- & form {
- margin: var(--sp-extra-tight) 0 var(--sp-normal);
- .input-container {
- flex-grow: 1;
- }
- }
- }
-}
\ No newline at end of file
diff --git a/src/app/molecules/global-notification/KeywordNotification.jsx b/src/app/molecules/global-notification/KeywordNotification.jsx
deleted file mode 100644
index 7f7e4de..0000000
--- a/src/app/molecules/global-notification/KeywordNotification.jsx
+++ /dev/null
@@ -1,239 +0,0 @@
-import React from 'react';
-import './KeywordNotification.scss';
-
-import { openReusableContextMenu } from '../../../client/action/navigation';
-import { getEventCords } from '../../../util/common';
-
-import Text from '../../atoms/text/Text';
-import Chip from '../../atoms/chip/Chip';
-import Input from '../../atoms/input/Input';
-import Button from '../../atoms/button/Button';
-import { MenuHeader } from '../../atoms/context-menu/ContextMenu';
-import SettingTile from '../setting-tile/SettingTile';
-
-import NotificationSelector from './NotificationSelector';
-
-import ChevronBottomIC from '../../../../public/res/ic/outlined/chevron-bottom.svg';
-import CrossIC from '../../../../public/res/ic/outlined/cross.svg';
-
-import { useAccountData } from '../../hooks/useAccountData';
-import {
- notifType, typeToLabel, getActionType, getTypeActions,
-} from './GlobalNotification';
-import { useMatrixClient } from '../../hooks/useMatrixClient';
-
-const DISPLAY_NAME = '.m.rule.contains_display_name';
-const ROOM_PING = '.m.rule.roomnotif';
-const USERNAME = '.m.rule.contains_user_name';
-const KEYWORD = 'keyword';
-
-function useKeywordNotif() {
- const mx = useMatrixClient();
- const pushRules = useAccountData('m.push_rules')?.getContent();
- const override = pushRules?.global?.override ?? [];
- const content = pushRules?.global?.content ?? [];
-
- const rulesToType = {
- [DISPLAY_NAME]: notifType.NOISY,
- [ROOM_PING]: notifType.NOISY,
- [USERNAME]: notifType.NOISY,
- };
-
- const setRule = (rule, type) => {
- const evtContent = pushRules ?? {};
- if (!evtContent.global) evtContent.global = {};
- if (!evtContent.global.override) evtContent.global.override = [];
- if (!evtContent.global.content) evtContent.global.content = [];
- const or = evtContent.global.override;
- const ct = evtContent.global.content;
-
- if (rule === DISPLAY_NAME || rule === ROOM_PING) {
- let orRule = or.find((r) => r?.rule_id === rule);
- if (!orRule) {
- orRule = {
- conditions: [],
- actions: [],
- rule_id: rule,
- default: true,
- enabled: true,
- };
- or.push(orRule);
- }
- if (rule === DISPLAY_NAME) {
- orRule.conditions = [{ kind: 'contains_display_name' }];
- orRule.actions = getTypeActions(type, true);
- } else {
- orRule.conditions = [
- { kind: 'event_match', key: 'content.body', pattern: '@room' },
- { kind: 'sender_notification_permission', key: 'room' },
- ];
- orRule.actions = getTypeActions(type, true);
- }
- } else if (rule === USERNAME) {
- let usernameRule = ct.find((r) => r?.rule_id === rule);
- if (!usernameRule) {
- const userId = mx.getUserId();
- const username = userId.match(/^@?(\S+):(\S+)$/)?.[1] ?? userId;
- usernameRule = {
- actions: [],
- default: true,
- enabled: true,
- pattern: username,
- rule_id: rule,
- };
- ct.push(usernameRule);
- }
- usernameRule.actions = getTypeActions(type, true);
- } else {
- const keyRules = ct.filter((r) => r.rule_id !== USERNAME);
- keyRules.forEach((r) => {
- // eslint-disable-next-line no-param-reassign
- r.actions = getTypeActions(type, true);
- });
- }
-
- mx.setAccountData('m.push_rules', evtContent);
- };
-
- const addKeyword = (keyword) => {
- if (content.find((r) => r.rule_id === keyword)) return;
- content.push({
- rule_id: keyword,
- pattern: keyword,
- enabled: true,
- default: false,
- actions: getTypeActions(rulesToType[KEYWORD] ?? notifType.NOISY, true),
- });
- mx.setAccountData('m.push_rules', pushRules);
- };
- const removeKeyword = (rule) => {
- pushRules.global.content = content.filter((r) => r.rule_id !== rule.rule_id);
- mx.setAccountData('m.push_rules', pushRules);
- };
-
- const dsRule = override.find((rule) => rule.rule_id === DISPLAY_NAME);
- const roomRule = override.find((rule) => rule.rule_id === ROOM_PING);
- const usernameRule = content.find((rule) => rule.rule_id === USERNAME);
- const keywordRule = content.find((rule) => rule.rule_id !== USERNAME);
-
- if (dsRule) rulesToType[DISPLAY_NAME] = getActionType(dsRule);
- if (roomRule) rulesToType[ROOM_PING] = getActionType(roomRule);
- if (usernameRule) rulesToType[USERNAME] = getActionType(usernameRule);
- if (keywordRule) rulesToType[KEYWORD] = getActionType(keywordRule);
-
- return {
- rulesToType,
- pushRules,
- setRule,
- addKeyword,
- removeKeyword,
- };
-}
-
-function GlobalNotification() {
- const {
- rulesToType,
- pushRules,
- setRule,
- addKeyword,
- removeKeyword,
- } = useKeywordNotif();
-
- const keywordRules = pushRules?.global?.content.filter((r) => r.rule_id !== USERNAME) ?? [];
-
- const onSelect = (evt, rule) => {
- openReusableContextMenu(
- 'bottom',
- getEventCords(evt, '.btn-surface'),
- (requestClose) => (
-
- {ignoredUsers.map((uId) => (
- roomActions.unignore(mx, [uId])}
- />
- ))}
-
- )}
-
- Mentions & keywords
- onSelect(evt, DISPLAY_NAME)} iconSrc={ChevronBottomIC}>
- { typeToLabel[rulesToType[DISPLAY_NAME]] }
-
- )}
- content={Default notification settings for all message containing your display name. }
- />
- onSelect(evt, USERNAME)} iconSrc={ChevronBottomIC}>
- { typeToLabel[rulesToType[USERNAME]] }
-
- )}
- content={Default notification settings for all message containing your username. }
- />
- onSelect(evt, ROOM_PING)} iconSrc={ChevronBottomIC}>
- {typeToLabel[rulesToType[ROOM_PING]]}
-
- )}
- content={Default notification settings for all messages containing @room. }
- />
- { rulesToType[KEYWORD] && (
- onSelect(evt, KEYWORD)} iconSrc={ChevronBottomIC}>
- {typeToLabel[rulesToType[KEYWORD]]}
-
- )}
- content={Default notification settings for all message containing keywords. }
- />
- )}
-
- Get notification when a message contains keyword.
-
- {keywordRules.length > 0 && (
-
- )}
- />
-
- );
-}
-
-export default GlobalNotification;
diff --git a/src/app/molecules/global-notification/KeywordNotification.scss b/src/app/molecules/global-notification/KeywordNotification.scss
deleted file mode 100644
index 4d1bfd4..0000000
--- a/src/app/molecules/global-notification/KeywordNotification.scss
+++ /dev/null
@@ -1,17 +0,0 @@
-.keyword-notification {
- &__keyword {
- & form,
- & > div:last-child {
- display: flex;
- flex-wrap: wrap;
- gap: var(--sp-tight);
- }
-
- & form {
- margin: var(--sp-extra-tight) 0 var(--sp-normal);
- .input-container {
- flex-grow: 1;
- }
- }
- }
-}
\ No newline at end of file
diff --git a/src/app/molecules/global-notification/NotificationSelector.jsx b/src/app/molecules/global-notification/NotificationSelector.jsx
deleted file mode 100644
index b2a8f4e..0000000
--- a/src/app/molecules/global-notification/NotificationSelector.jsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-import { MenuHeader, MenuItem } from '../../atoms/context-menu/ContextMenu';
-
-import CheckIC from '../../../../public/res/ic/outlined/check.svg';
-
-function NotificationSelector({
- value, onSelect,
-}) {
- return (
-
- {keywordRules.map((rule) => (
- removeKeyword(rule)}
- />
- ))}
-
- )}
-
- Notification
-
-
-
-
- );
-}
-
-NotificationSelector.propTypes = {
- value: PropTypes.oneOf(['off', 'on', 'noisy']).isRequired,
- onSelect: PropTypes.func.isRequired,
-};
-
-export default NotificationSelector;
diff --git a/src/app/molecules/image-pack/ImagePack.jsx b/src/app/molecules/image-pack/ImagePack.jsx
index e4e6be2..93d1d90 100644
--- a/src/app/molecules/image-pack/ImagePack.jsx
+++ b/src/app/molecules/image-pack/ImagePack.jsx
@@ -1,5 +1,6 @@
import React, { useState, useMemo, useReducer, useEffect } from 'react';
import PropTypes from 'prop-types';
+import { EventTimeline } from 'matrix-js-sdk';
import './ImagePack.scss';
import { openReusableDialog } from '../../../client/action/navigation';
@@ -18,6 +19,7 @@ import ImagePackItem from './ImagePackItem';
import ImagePackUpload from './ImagePackUpload';
import { useMatrixClient } from '../../hooks/useMatrixClient';
import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
+import { getStateEvent } from '../../utils/room';
const renameImagePackItem = (shortcode) =>
new Promise((resolve) => {
@@ -76,7 +78,7 @@ function useRoomImagePack(roomId, stateKey) {
const room = mx.getRoom(roomId);
const pack = useMemo(() => {
- const packEvent = room.currentState.getStateEvents('im.ponies.room_emotes', stateKey);
+ const packEvent = getStateEvent(room, 'im.ponies.room_emotes', stateKey);
return ImagePackBuilder.parsePack(packEvent.getId(), packEvent.getContent());
}, [room, stateKey]);
@@ -245,7 +247,10 @@ function ImagePack({ roomId, stateKey, handlePackDelete }) {
};
const myPowerlevel = room.getMember(mx.getUserId())?.powerLevel || 0;
- const canChange = room.currentState.hasSufficientPowerLevelFor('state_default', myPowerlevel);
+ const canChange = room
+ .getLiveTimeline()
+ .getState(EventTimeline.FORWARDS)
+ ?.hasSufficientPowerLevelFor('state_default', myPowerlevel);
const handleDeletePack = async () => {
const isConfirmed = await confirmDialog(
@@ -473,7 +478,7 @@ function ImagePackGlobal() {
[...roomIdToStateKeys].map(([roomId, stateKeys]) => {
const room = mx.getRoom(roomId);
return stateKeys.map((stateKey) => {
- const data = room.currentState.getStateEvents('im.ponies.room_emotes', stateKey);
+ const data = getStateEvent(room, 'im.ponies.room_emotes', stateKey);
const pack = ImagePackBuilder.parsePack(data?.getId(), data?.getContent());
if (!pack) return null;
return (
diff --git a/src/app/molecules/import-export-e2e-room-keys/ExportE2ERoomKeys.jsx b/src/app/molecules/import-export-e2e-room-keys/ExportE2ERoomKeys.jsx
deleted file mode 100644
index 1ce7e78..0000000
--- a/src/app/molecules/import-export-e2e-room-keys/ExportE2ERoomKeys.jsx
+++ /dev/null
@@ -1,101 +0,0 @@
-import React, { useState, useEffect, useRef } from 'react';
-import './ExportE2ERoomKeys.scss';
-
-import FileSaver from 'file-saver';
-
-import cons from '../../../client/state/cons';
-import { encryptMegolmKeyFile } from '../../../util/cryptE2ERoomKeys';
-
-import Text from '../../atoms/text/Text';
-import Button from '../../atoms/button/Button';
-import Input from '../../atoms/input/Input';
-import Spinner from '../../atoms/spinner/Spinner';
-
-import { useStore } from '../../hooks/useStore';
-import { useMatrixClient } from '../../hooks/useMatrixClient';
-
-function ExportE2ERoomKeys() {
- const mx = useMatrixClient();
- const isMountStore = useStore();
- const [status, setStatus] = useState({
- isOngoing: false,
- msg: null,
- type: cons.status.PRE_FLIGHT,
- });
- const passwordRef = useRef(null);
- const confirmPasswordRef = useRef(null);
-
- const exportE2ERoomKeys = async () => {
- const password = passwordRef.current.value;
- if (password !== confirmPasswordRef.current.value) {
- setStatus({
- isOngoing: false,
- msg: 'Password does not match.',
- type: cons.status.ERROR,
- });
- return;
- }
- setStatus({
- isOngoing: true,
- msg: 'Getting keys...',
- type: cons.status.IN_FLIGHT,
- });
- try {
- const keys = await mx.exportRoomKeys();
- if (isMountStore.getItem()) {
- setStatus({
- isOngoing: true,
- msg: 'Encrypting keys...',
- type: cons.status.IN_FLIGHT,
- });
- }
- const encKeys = await encryptMegolmKeyFile(JSON.stringify(keys), password);
- const blob = new Blob([encKeys], {
- type: 'text/plain;charset=us-ascii',
- });
- FileSaver.saveAs(blob, 'cinny-keys.txt');
- if (isMountStore.getItem()) {
- setStatus({
- isOngoing: false,
- msg: 'Successfully exported all keys.',
- type: cons.status.SUCCESS,
- });
- }
- } catch (e) {
- if (isMountStore.getItem()) {
- setStatus({
- isOngoing: false,
- msg: e.friendlyText || 'Failed to export keys. Please try again.',
- type: cons.status.ERROR,
- });
- }
- }
- };
-
- useEffect(() => {
- isMountStore.setItem(true);
- return () => {
- isMountStore.setItem(false);
- };
- }, []);
-
- return (
-
-
- { status.type === cons.status.IN_FLIGHT && (
- {status.msg} }
- {status.type === cons.status.ERROR && {status.msg} }
-
- );
-}
-
-export default ExportE2ERoomKeys;
diff --git a/src/app/molecules/import-export-e2e-room-keys/ExportE2ERoomKeys.scss b/src/app/molecules/import-export-e2e-room-keys/ExportE2ERoomKeys.scss
deleted file mode 100644
index a8bd029..0000000
--- a/src/app/molecules/import-export-e2e-room-keys/ExportE2ERoomKeys.scss
+++ /dev/null
@@ -1,28 +0,0 @@
-.export-e2e-room-keys {
- margin-top: var(--sp-extra-tight);
- &__form {
- display: flex;
- & > .input-container {
- flex: 1;
- min-width: 0;
- }
- & > *:nth-child(2) {
- margin: 0 var(--sp-tight);
- }
- }
-
- &__process {
- margin-top: var(--sp-tight);
- display: flex;
- justify-content: center;
- align-items: center;
- & .text {
- margin: 0 var(--sp-tight);
- }
- }
- &__error {
- margin-top: var(--sp-tight);
- color: var(--tc-danger-high);
- }
-
-}
\ No newline at end of file
diff --git a/src/app/molecules/import-export-e2e-room-keys/ImportE2ERoomKeys.jsx b/src/app/molecules/import-export-e2e-room-keys/ImportE2ERoomKeys.jsx
deleted file mode 100644
index 9f0ab79..0000000
--- a/src/app/molecules/import-export-e2e-room-keys/ImportE2ERoomKeys.jsx
+++ /dev/null
@@ -1,134 +0,0 @@
-import React, { useState, useEffect, useRef } from 'react';
-import './ImportE2ERoomKeys.scss';
-
-import cons from '../../../client/state/cons';
-import { decryptMegolmKeyFile } from '../../../util/cryptE2ERoomKeys';
-
-import Text from '../../atoms/text/Text';
-import IconButton from '../../atoms/button/IconButton';
-import Button from '../../atoms/button/Button';
-import Input from '../../atoms/input/Input';
-import Spinner from '../../atoms/spinner/Spinner';
-
-import CirclePlusIC from '../../../../public/res/ic/outlined/circle-plus.svg';
-
-import { useStore } from '../../hooks/useStore';
-import { useMatrixClient } from '../../hooks/useMatrixClient';
-
-function ImportE2ERoomKeys() {
- const mx = useMatrixClient();
- const isMountStore = useStore();
- const [keyFile, setKeyFile] = useState(null);
- const [status, setStatus] = useState({
- isOngoing: false,
- msg: null,
- type: cons.status.PRE_FLIGHT,
- });
- const inputRef = useRef(null);
- const passwordRef = useRef(null);
-
- async function tryDecrypt(file, password) {
- try {
- const arrayBuffer = await file.arrayBuffer();
- if (isMountStore.getItem()) {
- setStatus({
- isOngoing: true,
- msg: 'Decrypting file...',
- type: cons.status.IN_FLIGHT,
- });
- }
-
- const keys = await decryptMegolmKeyFile(arrayBuffer, password);
- if (isMountStore.getItem()) {
- setStatus({
- isOngoing: true,
- msg: 'Decrypting messages...',
- type: cons.status.IN_FLIGHT,
- });
- }
- await mx.importRoomKeys(JSON.parse(keys));
- if (isMountStore.getItem()) {
- setStatus({
- isOngoing: false,
- msg: 'Successfully imported all keys.',
- type: cons.status.SUCCESS,
- });
- inputRef.current.value = null;
- passwordRef.current.value = null;
- }
- } catch (e) {
- if (isMountStore.getItem()) {
- setStatus({
- isOngoing: false,
- msg: e.friendlyText || 'Failed to decrypt keys. Please try again.',
- type: cons.status.ERROR,
- });
- }
- }
- }
-
- const importE2ERoomKeys = () => {
- const password = passwordRef.current.value;
- if (password === '' || keyFile === null) return;
- if (status.isOngoing) return;
-
- tryDecrypt(keyFile, password);
- };
-
- const handleFileChange = (e) => {
- const file = e.target.files.item(0);
- passwordRef.current.value = '';
- setKeyFile(file);
- setStatus({
- isOngoing: false,
- msg: null,
- type: cons.status.PRE_FLIGHT,
- });
- };
- const removeImportKeysFile = () => {
- if (status.isOngoing) return;
- inputRef.current.value = null;
- passwordRef.current.value = null;
- setKeyFile(null);
- setStatus({
- isOngoing: false,
- msg: null,
- type: cons.status.PRE_FLIGHT,
- });
- };
-
- useEffect(() => {
- isMountStore.setItem(true);
- return () => {
- isMountStore.setItem(false);
- };
- }, []);
-
- return (
-
- {status.msg}
-
- )}
- {status.type === cons.status.SUCCESS &&
-
-
-
- { status.type === cons.status.IN_FLIGHT && (
- {status.msg} }
- {status.type === cons.status.ERROR && {status.msg} }
-
- );
-}
-
-export default ImportE2ERoomKeys;
diff --git a/src/app/molecules/import-export-e2e-room-keys/ImportE2ERoomKeys.scss b/src/app/molecules/import-export-e2e-room-keys/ImportE2ERoomKeys.scss
deleted file mode 100644
index 4f27fdf..0000000
--- a/src/app/molecules/import-export-e2e-room-keys/ImportE2ERoomKeys.scss
+++ /dev/null
@@ -1,61 +0,0 @@
-@use '../../partials/text';
-@use '../../partials/dir';
-
-.import-e2e-room-keys {
- &__file {
- display: inline-flex;
- align-items: center;
- background: var(--bg-surface-low);
- border-radius: var(--bo-radius);
- box-shadow: var(--bs-surface-border);
-
- & button {
- --parent-height: 46px;
- width: var(--parent-height);
- height: 100%;
- display: flex;
- justify-content: center;
- align-items: center;
- }
-
- & .ic-raw {
- background-color: var(--bg-caution);
- transform: rotate(45deg);
- }
-
- & .text {
- @extend .cp-txt__ellipsis;
- @include dir.side(margin, var(--sp-tight), var(--sp-loose));
- max-width: 86px;
- }
- }
-
- &__form {
- display: flex;
- margin-top: var(--sp-extra-tight);
-
-
- & .input-container {
- flex: 1;
- margin: 0 var(--sp-tight);
- }
- }
-
- &__process {
- margin-top: var(--sp-tight);
- display: flex;
- justify-content: center;
- align-items: center;
- & .text {
- margin: 0 var(--sp-tight);
- }
- }
- &__error {
- margin-top: var(--sp-tight);
- color: var(--tc-danger-high);
- }
- &__success {
- margin-top: var(--sp-tight);
- color: var(--tc-positive-high);
- }
-}
\ No newline at end of file
diff --git a/src/app/molecules/room-aliases/RoomAliases.jsx b/src/app/molecules/room-aliases/RoomAliases.jsx
index 876d063..a96fbb8 100644
--- a/src/app/molecules/room-aliases/RoomAliases.jsx
+++ b/src/app/molecules/room-aliases/RoomAliases.jsx
@@ -1,6 +1,7 @@
import React, { useState, useEffect } from 'react';
import PropTypes from 'prop-types';
import './RoomAliases.scss';
+import { EventTimeline } from 'matrix-js-sdk';
import cons from '../../../client/state/cons';
import { Debounce } from '../../../util/common';
@@ -108,7 +109,7 @@ function RoomAliases({ roomId }) {
const [deleteAlias, setDeleteAlias] = useState(null);
const [validate, setValidateToDefault, handleAliasChange] = useValidate(hsString);
- const canPublishAlias = room.currentState.maySendStateEvent('m.room.canonical_alias', userId);
+ const canPublishAlias = room.getLiveTimeline().getState(EventTimeline.FORWARDS)?.maySendStateEvent('m.room.canonical_alias', userId);
useEffect(() => {
isMountedStore.setItem(true)
diff --git a/src/app/molecules/room-emojis/RoomEmojis.jsx b/src/app/molecules/room-emojis/RoomEmojis.jsx
index da09ea8..c45a9af 100644
--- a/src/app/molecules/room-emojis/RoomEmojis.jsx
+++ b/src/app/molecules/room-emojis/RoomEmojis.jsx
@@ -1,6 +1,7 @@
import React, { useReducer, useEffect } from 'react';
import PropTypes from 'prop-types';
import './RoomEmojis.scss';
+import { EventTimeline } from 'matrix-js-sdk';
import { suffixRename } from '../../../util/common';
@@ -10,12 +11,13 @@ import Input from '../../atoms/input/Input';
import Button from '../../atoms/button/Button';
import ImagePack from '../image-pack/ImagePack';
import { useMatrixClient } from '../../hooks/useMatrixClient';
+import { getStateEvent, getStateEvents } from '../../utils/room';
function useRoomPacks(room) {
const mx = useMatrixClient();
const [, forceUpdate] = useReducer((count) => count + 1, 0);
- const packEvents = room.currentState.getStateEvents('im.ponies.room_emotes');
+ const packEvents = getStateEvents(room, 'im.ponies.room_emotes');
const unUsablePacks = [];
const usablePacks = packEvents.filter((mEvent) => {
if (typeof mEvent.getContent()?.images !== 'object') {
@@ -40,7 +42,7 @@ function useRoomPacks(room) {
};
}, [room, mx]);
- const isStateKeyAvailable = (key) => !room.currentState.getStateEvents('im.ponies.room_emotes', key);
+ const isStateKeyAvailable = (key) => !getStateEvent(room, 'im.ponies.room_emotes', key);
const createPack = async (name) => {
const packContent = {
@@ -80,7 +82,7 @@ function RoomEmojis({ roomId }) {
const { usablePacks, createPack, deletePack } = useRoomPacks(room);
- const canChange = room.currentState.maySendStateEvent('im.ponies.room_emote', mx.getUserId());
+ const canChange = room.getLiveTimeline().getState(EventTimeline.FORWARDS)?.maySendStateEvent('im.ponies.room_emote', mx.getUserId());
const handlePackCreate = (e) => {
e.preventDefault();
diff --git a/src/app/molecules/room-encryption/RoomEncryption.jsx b/src/app/molecules/room-encryption/RoomEncryption.jsx
index 47250f4..6db87a8 100644
--- a/src/app/molecules/room-encryption/RoomEncryption.jsx
+++ b/src/app/molecules/room-encryption/RoomEncryption.jsx
@@ -1,7 +1,7 @@
import React, { useState } from 'react';
import PropTypes from 'prop-types';
import './RoomEncryption.scss';
-
+import { EventTimeline } from 'matrix-js-sdk';
import Text from '../../atoms/text/Text';
import Toggle from '../../atoms/button/Toggle';
@@ -9,13 +9,14 @@ import SettingTile from '../setting-tile/SettingTile';
import { confirmDialog } from '../confirm-dialog/ConfirmDialog';
import { useMatrixClient } from '../../hooks/useMatrixClient';
+import { getStateEvents } from '../../utils/room';
function RoomEncryption({ roomId }) {
const mx = useMatrixClient();
const room = mx.getRoom(roomId);
- const encryptionEvents = room.currentState.getStateEvents('m.room.encryption');
+ const encryptionEvents = getStateEvents(room, 'm.room.encryption');
const [isEncrypted, setIsEncrypted] = useState(encryptionEvents.length > 0);
- const canEnableEncryption = room.currentState.maySendStateEvent('m.room.encryption', mx.getUserId());
+ const canEnableEncryption = room.getLiveTimeline().getState(EventTimeline.FORWARDS).maySendStateEvent('m.room.encryption', mx.getUserId());
const handleEncryptionEnable = async () => {
const joinRule = room.getJoinRule();
diff --git a/src/app/molecules/room-permissions/RoomPermissions.jsx b/src/app/molecules/room-permissions/RoomPermissions.jsx
index f8cd048..7629558 100644
--- a/src/app/molecules/room-permissions/RoomPermissions.jsx
+++ b/src/app/molecules/room-permissions/RoomPermissions.jsx
@@ -1,6 +1,7 @@
import React, { useEffect } from 'react';
import PropTypes from 'prop-types';
import './RoomPermissions.scss';
+import { EventTimeline } from 'matrix-js-sdk';
import { getPowerLabel } from '../../../util/matrixUtil';
import { openReusableContextMenu } from '../../../client/action/navigation';
@@ -16,6 +17,7 @@ import ChevronBottomIC from '../../../../public/res/ic/outlined/chevron-bottom.s
import { useForceUpdate } from '../../hooks/useForceUpdate';
import { useMatrixClient } from '../../hooks/useMatrixClient';
+import { getStateEvent } from '../../utils/room';
const permissionsInfo = {
users_default: {
@@ -176,9 +178,9 @@ function RoomPermissions({ roomId }) {
useRoomStateUpdate(roomId);
const mx = useMatrixClient();
const room = mx.getRoom(roomId);
- const pLEvent = room.currentState.getStateEvents('m.room.power_levels')[0];
+ const pLEvent = getStateEvent(room, 'm.room.power_levels');
const permissions = pLEvent.getContent();
- const canChangePermission = room.currentState.maySendStateEvent('m.room.power_levels', mx.getUserId());
+ const canChangePermission = room.getLiveTimeline().getState(EventTimeline.FORWARDS)?.maySendStateEvent('m.room.power_levels', mx.getUserId());
const myPowerLevel = room.getMember(mx.getUserId())?.powerLevel ?? 100;
const handlePowerSelector = (e, permKey, parentKey, powerLevel) => {
diff --git a/src/app/molecules/room-visibility/RoomVisibility.jsx b/src/app/molecules/room-visibility/RoomVisibility.jsx
index 6579513..f9bb815 100644
--- a/src/app/molecules/room-visibility/RoomVisibility.jsx
+++ b/src/app/molecules/room-visibility/RoomVisibility.jsx
@@ -1,7 +1,7 @@
import React, { useState, useEffect, useCallback } from 'react';
import PropTypes from 'prop-types';
import './RoomVisibility.scss';
-
+import { EventTimeline } from 'matrix-js-sdk';
import Text from '../../atoms/text/Text';
import RadioButton from '../../atoms/button/RadioButton';
@@ -74,7 +74,7 @@ function RoomVisibility({ roomId }) {
const roomVersion = Number(mCreate?.room_version ?? 0);
const myPowerlevel = room.getMember(mx.getUserId())?.powerLevel || 0;
- const canChange = room.currentState.hasSufficientPowerLevelFor('state_default', myPowerlevel);
+ const canChange = room.getLiveTimeline().getState(EventTimeline.FORWARDS)?.hasSufficientPowerLevelFor('state_default', myPowerlevel);
const items = [{
iconSrc: isSpace ? SpaceLockIC : HashLockIC,
diff --git a/src/app/organisms/emoji-verification/EmojiVerification.jsx b/src/app/organisms/emoji-verification/EmojiVerification.jsx
deleted file mode 100644
index 21be477..0000000
--- a/src/app/organisms/emoji-verification/EmojiVerification.jsx
+++ /dev/null
@@ -1,204 +0,0 @@
-/* eslint-disable react/prop-types */
-import React, { useState, useEffect } from 'react';
-import PropTypes from 'prop-types';
-import './EmojiVerification.scss';
-
-import cons from '../../../client/state/cons';
-import navigation from '../../../client/state/navigation';
-import { hasPrivateKey } from '../../../client/state/secretStorageKeys';
-import { getDefaultSSKey, isCrossVerified } from '../../../util/matrixUtil';
-
-import Text from '../../atoms/text/Text';
-import IconButton from '../../atoms/button/IconButton';
-import Button from '../../atoms/button/Button';
-import Spinner from '../../atoms/spinner/Spinner';
-import Dialog from '../../molecules/dialog/Dialog';
-
-import CrossIC from '../../../../public/res/ic/outlined/cross.svg';
-import { useStore } from '../../hooks/useStore';
-import { accessSecretStorage } from '../settings/SecretStorageAccess';
-import { useMatrixClient } from '../../hooks/useMatrixClient';
-
-function EmojiVerificationContent({ data, requestClose }) {
- const [sas, setSas] = useState(null);
- const [process, setProcess] = useState(false);
- const { request, targetDevice } = data;
- const mx = useMatrixClient();
- const mountStore = useStore();
- const beginStore = useStore();
-
- const beginVerification = async () => {
- if (
- isCrossVerified(mx, mx.deviceId) &&
- (mx.getCrossSigningId() === null ||
- (await mx.crypto.crossSigningInfo.isStoredInKeyCache('self_signing')) === false)
- ) {
- if (!hasPrivateKey(getDefaultSSKey(mx))) {
- const keyData = await accessSecretStorage(mx, 'Emoji verification');
- if (!keyData) {
- request.cancel();
- return;
- }
- }
- await mx.checkOwnCrossSigningTrust();
- }
- setProcess(true);
- await request.accept();
-
- const verifier = request.beginKeyVerification('m.sas.v1', targetDevice);
-
- const handleVerifier = (sasData) => {
- verifier.off('show_sas', handleVerifier);
- if (!mountStore.getItem()) return;
- setSas(sasData);
- setProcess(false);
- };
- verifier.on('show_sas', handleVerifier);
- await verifier.verify();
- };
-
- const sasMismatch = () => {
- sas.mismatch();
- setProcess(true);
- };
-
- const sasConfirm = () => {
- sas.confirm();
- setProcess(true);
- };
-
- useEffect(() => {
- mountStore.setItem(true);
- const handleChange = () => {
- if (request.done || request.cancelled) {
- requestClose();
- return;
- }
- if (targetDevice && !beginStore.getItem()) {
- beginStore.setItem(true);
- beginVerification();
- }
- };
-
- if (request === null) return undefined;
- const req = request;
- req.on('change', handleChange);
- return () => {
- req.off('change', handleChange);
- if (req.cancelled === false && req.done === false) {
- req.cancel();
- }
- };
- }, [request]);
-
- const renderWait = () => (
- <>
-
- {status.msg}
-
- )}
- {status.type === cons.status.SUCCESS &&
- Confirm the emoji below are displayed on both devices, in the same order:
-
- );
- }
-
- if (targetDevice) {
- return (
-
- {sas.sas.emoji.map((emoji, i) => (
- // eslint-disable-next-line react/no-array-index-key
-
-
- {emoji[0]}
- {emoji[1]}
-
- ))}
-
- {process ? (
- renderWait()
- ) : (
- <>
-
-
-
- )}
-
-
- Please accept the request from other device.
-
- );
- }
-
- return (
- {renderWait()}
-
- Click accept to start the verification process.
-
- );
-}
-EmojiVerificationContent.propTypes = {
- data: PropTypes.shape({}).isRequired,
- requestClose: PropTypes.func.isRequired,
-};
-
-function useVisibilityToggle() {
- const [data, setData] = useState(null);
- const mx = useMatrixClient();
-
- useEffect(() => {
- const handleOpen = (request, targetDevice) => {
- setData({ request, targetDevice });
- };
- navigation.on(cons.events.navigation.EMOJI_VERIFICATION_OPENED, handleOpen);
- mx.on('crypto.verification.request', handleOpen);
- return () => {
- navigation.removeListener(cons.events.navigation.EMOJI_VERIFICATION_OPENED, handleOpen);
- mx.removeListener('crypto.verification.request', handleOpen);
- };
- }, [mx]);
-
- const requestClose = () => setData(null);
-
- return [data, requestClose];
-}
-
-function EmojiVerification() {
- const [data, requestClose] = useVisibilityToggle();
-
- return (
-
- );
-}
-
-export default EmojiVerification;
diff --git a/src/app/organisms/emoji-verification/EmojiVerification.scss b/src/app/organisms/emoji-verification/EmojiVerification.scss
deleted file mode 100644
index 4e6dc11..0000000
--- a/src/app/organisms/emoji-verification/EmojiVerification.scss
+++ /dev/null
@@ -1,35 +0,0 @@
-@use '../../partials/flex';
-@use '../../partials/dir';
-
-.emoji-verification {
- &__content {
- padding: var(--sp-normal);
- @include dir.side(padding, var(--sp-normal), var(--sp-extra-tight));
- display: flex;
- flex-direction: column;
- gap: var(--sp-normal);
- }
-
- &__emojis {
- margin: var(--sp-loose) 0;
- display: flex;
- align-items: center;
- justify-content: space-around;
- gap: var(--sp-extra-tight);
- flex-wrap: wrap;
- }
-
- &__emoji-block {
- @extend .cp-fx__column;
- flex: 1;
- align-items: center;
- gap: var(--sp-extra-tight);
- white-space: nowrap;
- text-transform: capitalize;
- }
-
- &__buttons {
- display: flex;
- gap: var(--sp-normal);
- }
-}
diff --git a/src/app/organisms/profile-editor/ProfileEditor.jsx b/src/app/organisms/profile-editor/ProfileEditor.jsx
deleted file mode 100644
index 9612002..0000000
--- a/src/app/organisms/profile-editor/ProfileEditor.jsx
+++ /dev/null
@@ -1,156 +0,0 @@
-import React, { useState, useEffect, useRef } from 'react';
-import PropTypes from 'prop-types';
-
-import colorMXID from '../../../util/colorMXID';
-
-import Text from '../../atoms/text/Text';
-import IconButton from '../../atoms/button/IconButton';
-import Button from '../../atoms/button/Button';
-import ImageUpload from '../../molecules/image-upload/ImageUpload';
-import Input from '../../atoms/input/Input';
-
-import PencilIC from '../../../../public/res/ic/outlined/pencil.svg';
-import { confirmDialog } from '../../molecules/confirm-dialog/ConfirmDialog';
-
-import './ProfileEditor.scss';
-import { useMatrixClient } from '../../hooks/useMatrixClient';
-import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
-
-function ProfileEditor({ userId }) {
- const [isEditing, setIsEditing] = useState(false);
- const mx = useMatrixClient();
- const user = mx.getUser(mx.getUserId());
- const useAuthentication = useMediaAuthentication();
-
- const displayNameRef = useRef(null);
- const [avatarSrc, setAvatarSrc] = useState(
- user.avatarUrl
- ? mx.mxcUrlToHttp(user.avatarUrl, 80, 80, 'crop', undefined, undefined, useAuthentication)
- : null
- );
- const [username, setUsername] = useState(user.displayName);
- const [disabled, setDisabled] = useState(true);
-
- useEffect(() => {
- let isMounted = true;
- mx.getProfileInfo(mx.getUserId()).then((info) => {
- if (!isMounted) return;
- setAvatarSrc(
- info.avatar_url
- ? mx.mxcUrlToHttp(
- info.avatar_url,
- 80,
- 80,
- 'crop',
- undefined,
- undefined,
- useAuthentication
- )
- : null
- );
- setUsername(info.displayname);
- });
- return () => {
- isMounted = false;
- };
- }, [mx, userId, useAuthentication]);
-
- const handleAvatarUpload = async (url) => {
- if (url === null) {
- const isConfirmed = await confirmDialog(
- 'Remove avatar',
- 'Are you sure that you want to remove avatar?',
- 'Remove',
- 'caution'
- );
- if (isConfirmed) {
- mx.setAvatarUrl('');
- setAvatarSrc(null);
- }
- return;
- }
- mx.setAvatarUrl(url);
- setAvatarSrc(mx.mxcUrlToHttp(url, 80, 80, 'crop', undefined, undefined, useAuthentication));
- };
-
- const saveDisplayName = () => {
- const newDisplayName = displayNameRef.current.value;
- if (newDisplayName !== null && newDisplayName !== username) {
- mx.setDisplayName(newDisplayName);
- setUsername(newDisplayName);
- setDisabled(true);
- setIsEditing(false);
- }
- };
-
- const onDisplayNameInputChange = () => {
- setDisabled(username === displayNameRef.current.value || displayNameRef.current.value == null);
- };
- const cancelDisplayNameChanges = () => {
- displayNameRef.current.value = username;
- onDisplayNameInputChange();
- setIsEditing(false);
- };
-
- const renderForm = () => (
-
- );
-
- const renderInfo = () => (
-
- {process ? (
- renderWait()
- ) : (
-
- )}
-
-
- {mx.getUserId()}
-
- );
-
- return (
-
-
- {username ?? userId}
-
- setIsEditing(true)}
- />
-
-
- handleAvatarUpload(null)}
- />
- {isEditing ? renderForm() : renderInfo()}
-
- );
-}
-
-ProfileEditor.defaultProps = {
- userId: null,
-};
-
-ProfileEditor.propTypes = {
- userId: PropTypes.string,
-};
-
-export default ProfileEditor;
diff --git a/src/app/organisms/profile-editor/ProfileEditor.scss b/src/app/organisms/profile-editor/ProfileEditor.scss
deleted file mode 100644
index 2e2ef91..0000000
--- a/src/app/organisms/profile-editor/ProfileEditor.scss
+++ /dev/null
@@ -1,41 +0,0 @@
-@use '../../partials/dir';
-@use '../../partials/flex';
-
-.profile-editor {
- display: flex;
- align-items: flex-end;
-}
-
-.profile-editor__info,
-.profile-editor__form {
- @extend .cp-fx__item-one;
- @include dir.side(margin, var(--sp-loose), 0);
- display: flex;
-}
-
-.profile-editor__info {
- flex-direction: column;
- & > div:first-child {
- display: flex;
- align-items: center;
- }
- .ic-btn {
- margin: 0 var(--sp-extra-tight);
- }
-}
-
-.profile-editor__form {
- margin-top: 10px;
- flex-wrap: wrap;
- align-items: flex-end;
-
- & > .input-container {
- @extend .cp-fx__item-one;
- }
- & > button {
- height: 46px;
- margin-top: var(--sp-normal);
- @include dir.side(margin, var(--sp-normal), 0);
- }
-
-}
\ No newline at end of file
diff --git a/src/app/organisms/profile-viewer/ProfileViewer.jsx b/src/app/organisms/profile-viewer/ProfileViewer.jsx
index 6ff5fe7..1ed8969 100644
--- a/src/app/organisms/profile-viewer/ProfileViewer.jsx
+++ b/src/app/organisms/profile-viewer/ProfileViewer.jsx
@@ -1,6 +1,7 @@
import React, { useState, useEffect, useRef } from 'react';
import PropTypes from 'prop-types';
import './ProfileViewer.scss';
+import { EventTimeline } from 'matrix-js-sdk';
import cons from '../../../client/state/cons';
import navigation from '../../../client/state/navigation';
@@ -45,13 +46,14 @@ function ModerationTools({ roomId, userId }) {
const myPowerLevel = room.getMember(mx.getUserId())?.powerLevel || 0;
const powerLevel = roomMember?.powerLevel || 0;
+ const roomState = room.getLiveTimeline().getState(EventTimeline.FORWARDS);
const canIKick =
roomMember?.membership === 'join' &&
- room.currentState.hasSufficientPowerLevelFor('kick', myPowerLevel) &&
+ roomState?.hasSufficientPowerLevelFor('kick', myPowerLevel) &&
powerLevel < myPowerLevel;
const canIBan =
['join', 'leave'].includes(roomMember?.membership) &&
- room.currentState.hasSufficientPowerLevelFor('ban', myPowerLevel) &&
+ roomState?.hasSufficientPowerLevelFor('ban', myPowerLevel) &&
powerLevel < myPowerLevel;
const handleKick = (e) => {
@@ -98,8 +100,9 @@ function SessionInfo({ userId }) {
async function loadDevices() {
try {
- await mx.downloadKeys([userId], true);
- const myDevices = mx.getStoredDevicesForUser(userId);
+ const crypto = mx.getCrypto();
+ const userToDevices = await crypto.getUserDeviceInfo([userId], true);
+ const myDevices = Array.from(userToDevices.get(userId).values());
if (isUnmounted) return;
setDevices(myDevices);
@@ -125,7 +128,7 @@ function SessionInfo({ userId }) {
-
-
- );
-}
-AuthRequest.propTypes = {
- onComplete: PropTypes.func.isRequired,
- makeRequest: PropTypes.func.isRequired,
-};
-
-/**
- * @param {string} title Title of dialog
- * @param {(auth) => void} makeRequest request to make
- * @returns {Promise
- ❌
- Failed to setup cross signing. Please try again.
-
-
- );
-
- openReusableDialog(
-
- Please save this security key somewhere safe.
- {key.encodedPrivateKey}
-
- );
-
- // Download automatically.
- downloadKey();
-
- openReusableDialog(
-
-
-
-
-
- OR
- setup(values.phrase)}
- validate={validator}
- >
- {({ values, errors, handleChange, handleSubmit }) => (
-
- )}
-
-
- );
-}
-
-const setupDialog = () => {
- openReusableDialog(
-
-
- We will generate a Security Key, which you can use to manage messages backup and
- session verification.
-
- {genWithPhrase !== false && (
-
- )}
- {genWithPhrase === false &&
-
- ✋🧑🚒🤚
- Resetting cross-signing keys is permanent.
-
- Anyone you have verified with will see security alerts and your message backup will be lost.
- You almost certainly do not want to do this, unless you have lost Security Key or{' '}
- Phrase and every session you can cross-sign from.
-
-
-
- );
-}
-
-const resetDialog = () => {
- openReusableDialog(
-
-
- );
- }
-
- const handleRename = async (device) => {
- const newName = await promptDeviceName(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) => {
- const isConfirmed = await confirmDialog(
- `Logout ${device.display_name}`,
- `You are about to logout "${device.display_name}" session.`,
- 'Logout',
- 'danger',
- );
- if (!isConfirmed) return;
- addToProcessing(device);
- await authRequest(`Logout "${device.display_name}"`, async (auth) => {
- await mx.deleteDevice(device.device_id, auth);
- });
-
- if (!mountStore.getItem()) return;
- removeFromProcessing(device);
- };
-
- const verifyWithKey = async (device) => {
- const keyData = await accessSecretStorage(mx, 'Session verification');
- if (!keyData) return;
- addToProcessing(device);
- await mx.checkOwnCrossSigningTrust();
- };
-
- const verifyWithEmojis = async (deviceId) => {
- const req = await mx.requestVerification(mx.getUserId(), [deviceId]);
- openEmojiVerification(req, { userId: mx.getUserId(), deviceId });
- };
-
- const verify = (deviceId, isCurrentDevice) => {
- if (isCurrentDevice) {
- verifyWithKey(deviceId);
- return;
- }
- verifyWithEmojis(deviceId);
- };
-
- const renderDevice = (device, isVerified) => {
- const deviceId = device.device_id;
- const displayName = device.display_name;
- const lastIP = device.last_seen_ip;
- const lastTS = device.last_seen_ts;
- const isCurrentDevice = mx.deviceId === deviceId;
- const canVerify = isVerified === false && (isMeVerified || isCurrentDevice);
-
- return (
-
- Loading sessions...
-
-
-
- );
-}
-
-export default DeviceManage;
diff --git a/src/app/organisms/settings/DeviceManage.scss b/src/app/organisms/settings/DeviceManage.scss
deleted file mode 100644
index 5116cda..0000000
--- a/src/app/organisms/settings/DeviceManage.scss
+++ /dev/null
@@ -1,46 +0,0 @@
-@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;
- }
- & .setting-tile__options {
- display: flex;
- align-items: center;
- gap: var(--sp-ultra-tight);
- & .btn-positive {
- padding: 6px var(--sp-tight);
- min-width: 0;
- }
- }
-
- &__current-label {
- margin: 0 var(--sp-extra-tight);
- padding: 2px var(--sp-ultra-tight);
- color: var(--bg-surface);
- background-color: var(--tc-surface-low);
- border-radius: 4px;
- }
-
- &__rename {
- padding: var(--sp-normal);
- & > *:not(:last-child) {
- margin-bottom: var(--sp-normal);
- }
- &-btn {
- display: flex;
- gap: var(--sp-normal);
- }
- }
-}
\ No newline at end of file
diff --git a/src/app/organisms/settings/KeyBackup.jsx b/src/app/organisms/settings/KeyBackup.jsx
deleted file mode 100644
index 47be511..0000000
--- a/src/app/organisms/settings/KeyBackup.jsx
+++ /dev/null
@@ -1,303 +0,0 @@
-/* eslint-disable react/prop-types */
-import React, { useState, useEffect } from 'react';
-import PropTypes from 'prop-types';
-import './KeyBackup.scss';
-
-import { openReusableDialog } from '../../../client/action/navigation';
-import { deletePrivateKey } from '../../../client/state/secretStorageKeys';
-
-import Text from '../../atoms/text/Text';
-import Button from '../../atoms/button/Button';
-import IconButton from '../../atoms/button/IconButton';
-import Spinner from '../../atoms/spinner/Spinner';
-import InfoCard from '../../atoms/card/InfoCard';
-import SettingTile from '../../molecules/setting-tile/SettingTile';
-
-import { accessSecretStorage } from './SecretStorageAccess';
-
-import InfoIC from '../../../../public/res/ic/outlined/info.svg';
-import BinIC from '../../../../public/res/ic/outlined/bin.svg';
-import DownloadIC from '../../../../public/res/ic/outlined/download.svg';
-
-import { useStore } from '../../hooks/useStore';
-import { useCrossSigningStatus } from '../../hooks/useCrossSigningStatus';
-import { useMatrixClient } from '../../hooks/useMatrixClient';
-
-function CreateKeyBackupDialog({ keyData }) {
- const [done, setDone] = useState(false);
- const mx = useMatrixClient();
- const mountStore = useStore();
-
- const doBackup = async () => {
- setDone(false);
- let info;
-
- try {
- info = await mx.prepareKeyBackupVersion(null, { secureSecretStorage: true });
- info = await mx.createKeyBackupVersion(info);
- await mx.scheduleAllGroupSessionsForBackup();
- if (!mountStore.getItem()) return;
- setDone(true);
- } catch (e) {
- deletePrivateKey(keyData.keyId);
- await mx.deleteKeyBackupVersion(info.version);
- if (!mountStore.getItem()) return;
- setDone(null);
- }
- };
-
- useEffect(() => {
- mountStore.setItem(true);
- doBackup();
- }, []);
-
- return (
-
- Unverified sessions
- {!isMeVerified && isCSEnabled && (
- No unverified sessions
- }
-
- {noEncryption.length > 0 && (
-
-
- )}
- {isMeVerified && unverified.length > 0 && (
-
-
- )}
- {!isCSEnabled && (
-
-
- )}
- {
- unverified.length > 0
- ? unverified.map((device) => renderDevice(device, false))
- :
- Sessions without encryption support
- {noEncryption.map((device) => renderDevice(device, null))}
-
- )}
-
- Verified sessions
- {
- verified.length > 0
- ? verified.map((device, index) => {
- if (truncated && index >= TRUNCATED_COUNT) return null;
- return renderDevice(device, true);
- })
- : No verified sessions
- }
- { verified.length > TRUNCATED_COUNT && (
-
- )}
- { deviceList.length > 0 && (
- Session names are visible to everyone, so do not put any private info here.
- )}
-
-
- {done === false && (
- ✅
- Successfully created backup
-
- )}
- {done === null && (
- <>
- Failed to create backup
-
-
- )}
-
- );
-}
-CreateKeyBackupDialog.propTypes = {
- keyData: PropTypes.shape({}).isRequired,
-};
-
-function RestoreKeyBackupDialog({ keyData }) {
- const [status, setStatus] = useState(false);
- const mx = useMatrixClient();
- const mountStore = useStore();
-
- const restoreBackup = async () => {
- setStatus(false);
-
- let meBreath = true;
- const progressCallback = (progress) => {
- if (!progress.successes) return;
- if (meBreath === false) return;
- meBreath = false;
- setTimeout(() => {
- meBreath = true;
- }, 200);
-
- setStatus({ message: `Restoring backup keys... (${progress.successes}/${progress.total})` });
- };
-
- try {
- const backupInfo = await mx.getKeyBackupVersion();
- const info = await mx.restoreKeyBackupWithSecretStorage(backupInfo, undefined, undefined, {
- progressCallback,
- });
- if (!mountStore.getItem()) return;
- setStatus({ done: `Successfully restored backup keys (${info.imported}/${info.total}).` });
- } catch (e) {
- if (!mountStore.getItem()) return;
- if (e.errcode === 'RESTORE_BACKUP_ERROR_BAD_KEY') {
- deletePrivateKey(keyData.keyId);
- setStatus({ error: 'Failed to restore backup. Key is invalid!', errorCode: 'BAD_KEY' });
- } else {
- setStatus({ error: 'Failed to restore backup.', errCode: 'UNKNOWN' });
- }
- }
- };
-
- useEffect(() => {
- mountStore.setItem(true);
- restoreBackup();
- }, []);
-
- return (
-
- Creating backup...
-
- )}
- {done === true && (
- <>
-
- {(status === false || status.message) && (
- ✅
- {status.done}
-
- )}
- {status.error && (
- <>
- {status.error}
-
-
- )}
-
- );
-}
-RestoreKeyBackupDialog.propTypes = {
- keyData: PropTypes.shape({}).isRequired,
-};
-
-function DeleteKeyBackupDialog({ requestClose }) {
- const [isDeleting, setIsDeleting] = useState(false);
- const mx = useMatrixClient();
- const mountStore = useStore();
-
- const deleteBackup = async () => {
- mountStore.setItem(true);
- setIsDeleting(true);
- try {
- const backupInfo = await mx.getKeyBackupVersion();
- if (backupInfo) await mx.deleteKeyBackupVersion(backupInfo.version);
- if (!mountStore.getItem()) return;
- requestClose(true);
- } catch {
- if (!mountStore.getItem()) return;
- setIsDeleting(false);
- }
- };
-
- return (
-
- {status.message ?? 'Restoring backup keys...'}
-
- )}
- {status.done && (
- <>
-
- 🗑
- Deleting key backup is permanent.
- All encrypted messages keys stored on server will be deleted.
- {isDeleting ? (
-
- );
-}
-DeleteKeyBackupDialog.propTypes = {
- requestClose: PropTypes.func.isRequired,
-};
-
-function KeyBackup() {
- const mx = useMatrixClient();
- const isCSEnabled = useCrossSigningStatus();
- const [keyBackup, setKeyBackup] = useState(undefined);
- const mountStore = useStore();
-
- const fetchKeyBackupVersion = async () => {
- const info = await mx.getKeyBackupVersion();
- if (!mountStore.getItem()) return;
- setKeyBackup(info);
- };
-
- useEffect(() => {
- mountStore.setItem(true);
- fetchKeyBackupVersion();
-
- const handleAccountData = (event) => {
- if (event.getType() === 'm.megolm_backup.v1') {
- fetchKeyBackupVersion();
- }
- };
-
- mx.on('accountData', handleAccountData);
- return () => {
- mx.removeListener('accountData', handleAccountData);
- };
- }, [isCSEnabled]);
-
- const openCreateKeyBackup = async () => {
- const keyData = await accessSecretStorage(mx, 'Create Key Backup');
- if (keyData === null) return;
-
- openReusableDialog(
-
-
- {process &&
- );
-}
-SecretStorageAccess.propTypes = {
- onComplete: PropTypes.func.isRequired,
-};
-
-/**
- * @param {MatrixClient} mx Matrix client
- * @param {string} title Title of secret storage access dialog
- * @returns {Promise
-
- );
-}
-
-function NotificationsSection() {
- const notifPermission = usePermissionState(
- 'notifications',
- window.Notification?.permission ?? 'denied'
- );
- const [showNotifications, setShowNotifications] = useSetting(settingsAtom, 'showNotifications');
- const [isNotificationSounds, setIsNotificationSounds] = useSetting(
- settingsAtom,
- 'isNotificationSounds'
- );
-
- const renderOptions = () => {
- if (window.Notification === undefined) {
- return (
-
- Theme
- {
- toggleSystemTheme();
- updateState({});
- }}
- />
- }
- content={Use light or dark mode based on the system settings. }
- />
- {
- if (settings.useSystemTheme) toggleSystemTheme();
- settings.setTheme(index);
- updateState({});
- }}
- />
- }
- />
- setTwitterEmoji(!twitterEmoji)} />
- }
- content={Use Twitter emoji instead of system emoji. }
- />
- %}
- />
- }
- content={
-
- Change page zoom to scale user interface between 75% to 150%. Default: 100%
-
- }
- />
-
-
- Room messages
- setMessageLayout(index)}
- />
- }
- />
- s === messageSpacing)}
- segments={[
- { text: 'No' },
- { text: 'XXS' },
- { text: 'XS' },
- { text: 'S' },
- { text: 'M' },
- { text: 'L' },
- ]}
- onSelect={(index) => {
- setMessageSpacing(spacings[index]);
- }}
- />
- }
- />
- setEnterForNewline(!enterForNewline)}
- />
- }
- content={
- {`Use ${
- isMacOS() ? KeySymbol.Command : 'Ctrl'
- } + ENTER to send message and ENTER for newline.`}
- }
- />
- setIsMarkdown(!isMarkdown)} />}
- content={Format messages with markdown syntax before sending. }
- />
- setHideMembershipEvents(!hideMembershipEvents)}
- />
- }
- content={
-
- Hide membership change messages from room timeline. (Join, Leave, Invite, Kick and
- Ban)
-
- }
- />
- setHideNickAvatarEvents(!hideNickAvatarEvents)}
- />
- }
- content={
- Hide nick and avatar change messages from room timeline.
- }
- />
- setMediaAutoLoad(!mediaAutoLoad)} />
- }
- content={
- Prevent images and videos from auto loading to save bandwidth.
- }
- />
- setUrlPreview(!urlPreview)} />}
- content={Show url preview for link in messages. }
- />
- setEncUrlPreview(!encUrlPreview)} />
- }
- content={Show url preview for link in encrypted messages. }
- />
- setShowHiddenEvents(!showHiddenEvents)}
- />
- }
- content={Show hidden state and message events. }
- />
-
-
- Notification & Sound
- Show desktop notification when new messages arrive.}
- />
- setIsNotificationSounds(!isNotificationSounds)}
- />
- }
- content={Play sound when new messages arrive. }
- />
-
-
-
-
-
-
- );
-}
-
-function SecuritySection() {
- return (
-
-
- );
-}
-
-function AboutSection() {
- const mx = useMatrixClient();
-
- return (
-
- Cross signing and backup
-
-
- Export/Import encryption keys
-
-
- Export end-to-end encryption room keys to decrypt old messages in other session. In
- order to encrypt keys you need to set a password, which will be used while
- importing.
-
-
-
- {
- "To decrypt older messages, Export E2EE room keys from Element (Settings > Security & Privacy > Encryption > Cryptography) and import them here. Imported keys are encrypted so you'll have to enter the password you set in order to decrypt it."
- }
-
-
-
-
- );
-}
-
-export const tabText = {
- APPEARANCE: 'Appearance',
- NOTIFICATIONS: 'Notifications',
- EMOJI: 'Emoji',
- SECURITY: 'Security',
- ABOUT: 'About',
-};
-const tabItems = [
- {
- text: tabText.APPEARANCE,
- iconSrc: SunIC,
- disabled: false,
- render: () =>
- Application
-
-
- 
-
-
-
- Cinny
- {`v${cons.version}`}
-
- Yet another matrix client
-
-
-
-
-
-
-
-
- Credits
-
-
-
- -
-
-
- {/* eslint-disable-next-line react/jsx-one-expression-per-line */}
-
- The{' '} - - matrix-js-sdk - {' '} - is ©{' '} - - The Matrix.org Foundation C.I.C - {' '} - used under the terms of{' '} - - Apache 2.0 - - . - -
- -
- {/* eslint-disable-next-line react/jsx-one-expression-per-line */}
-
- The{' '} - - twemoji-colr - {' '} - font is ©{' '} - - Mozilla Foundation - {' '} - used under the terms of{' '} - - Apache 2.0 - - . - -
- -
- {/* eslint-disable-next-line react/jsx-one-expression-per-line */}
-
- The{' '} - - Twemoji - {' '} - emoji art is ©{' '} - - Twitter, Inc and other contributors - {' '} - used under the terms of{' '} - - CC-BY 4.0 - - . - -
- -
- {/* eslint-disable-next-line react/jsx-one-expression-per-line */}
-
- The{' '} - - Material sound resources - {' '} - are ©{' '} - - Google - {' '} - used under the terms of{' '} - - CC-BY 4.0 - - . - -
-
- tab.text === selectedTab.text)}
- onSelect={handleTabChange}
- />
-
- )}
- {selectedTab.render()}
-