added support to decrypt older message

This commit is contained in:
unknown 2021-08-01 19:30:35 +05:30
parent 9f6047aebd
commit e597f81b45
2 changed files with 24 additions and 6 deletions

View file

@ -1,4 +1,4 @@
import React, { useState, useEffect } from 'react'; import React, { useState } from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import './Settings.scss'; import './Settings.scss';
@ -12,6 +12,7 @@ import SegmentedControls from '../../atoms/segmented-controls/SegmentedControls'
import PopupWindow, { PWContentSelector } from '../../molecules/popup-window/PopupWindow'; import PopupWindow, { PWContentSelector } from '../../molecules/popup-window/PopupWindow';
import SettingTile from '../../molecules/setting-tile/SettingTile'; import SettingTile from '../../molecules/setting-tile/SettingTile';
import ImportE2ERoomKeys from '../../molecules/import-e2e-room-keys/ImportE2ERoomKeys';
import SunIC from '../../../../public/res/ic/outlined/sun.svg'; import SunIC from '../../../../public/res/ic/outlined/sun.svg';
import LockIC from '../../../../public/res/ic/outlined/lock.svg'; import LockIC from '../../../../public/res/ic/outlined/lock.svg';
@ -44,8 +45,20 @@ function AppearanceSection() {
function SecuritySection() { function SecuritySection() {
return ( return (
<div className="settings-content"> <div className="set-security settings-content">
<Text>{`Device ID: ${initMatrix.matrixClient.getDeviceId()}`}</Text> <SettingTile
title={`Device ID: ${initMatrix.matrixClient.getDeviceId()}`}
content={<Text variant="b3">Use this device ID to verify or manage this session from Element client.</Text>}
/>
<SettingTile
title="Import E2E room keys"
content={(
<>
<Text variant="b3">{'To decrypt older messages, Export E2EE room keys from Element (Settings > Security & Privacy > Encryption > Cryptography) and import them here. Imported keys are also encrypted so you have to enter account password.'}</Text>
<ImportE2ERoomKeys />
</>
)}
/>
</div> </div>
); );
} }
@ -53,7 +66,7 @@ function SecuritySection() {
function AboutSection() { function AboutSection() {
return ( return (
<div className="settings-content settings__about"> <div className="settings-content settings__about">
<div className="settings__about__branding"> <div className="set-about__branding">
<img width="60" height="60" src={CinnySVG} alt="Cinny logo" /> <img width="60" height="60" src={CinnySVG} alt="Cinny logo" />
<div> <div>
<Text variant="h2"> <Text variant="h2">
@ -62,7 +75,7 @@ function AboutSection() {
</Text> </Text>
<Text>Yet another matrix client</Text> <Text>Yet another matrix client</Text>
<div className="settings__about__btns"> <div className="set-about__btns">
<Button onClick={() => window.open('https://github.com/ajbura/cinny')}>Source code</Button> <Button onClick={() => window.open('https://github.com/ajbura/cinny')}>Source code</Button>
<Button onClick={() => window.open('https://liberapay.com/ajbura/donate')}>Support</Button> <Button onClick={() => window.open('https://liberapay.com/ajbura/donate')}>Support</Button>
</div> </div>

View file

@ -14,10 +14,15 @@
& .setting-tile { & .setting-tile {
margin-top: var(--sp-normal); margin-top: var(--sp-normal);
border-bottom: 1px solid var(--bg-surface-border);
padding-bottom: 16px;
&__title__wrapper {
margin-bottom: var(--sp-ultra-tight);
}
} }
} }
.settings__about { .set-about {
&__branding { &__branding {
margin-top: var(--sp-extra-tight); margin-top: var(--sp-extra-tight);
margin-bottom: var(--sp-normal); margin-bottom: var(--sp-normal);