Add cross signing and key backup component

Signed-off-by: Ajay Bura <ajbura@gmail.com>

src/app/organisms/settings/CrossSignin.jsx

@@ -0,0 +1,24 @@
+import React from 'react';
+
+import initMatrix from '../../../client/initMatrix';
+import { hasCrossSigninAccountData } from '../../../util/matrixUtil';
+
+import Text from '../../atoms/text/Text';
+import Button from '../../atoms/button/Button';
+import SettingTile from '../../molecules/setting-tile/SettingTile';
+
+function CrossSignin() {
+  return (
+    <SettingTile
+      title="Cross sign-in"
+      content={<Text variant="b3">Setup to verify and keep track of all your devices. Also required to enable secure encryption key backup.</Text>}
+      options={(
+        hasCrossSigninAccountData()
+          ? <Button variant="danger">Reset</Button>
+          : <Button variant="primary">Setup</Button>
+      )}
+    />
+  );
+}
+
+export default CrossSignin;

src/app/organisms/settings/KeyBackup.jsx

@@ -0,0 +1,68 @@
+import React, { useState, useEffect } from 'react';
+
+import initMatrix from '../../../client/initMatrix';
+
+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 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 { useCrossSigninStatus } from '../../hooks/useCrossSigninStatus';
+
+function KeyBackup() {
+  const mx = initMatrix.matrixClient;
+  const isCSEnabled = useCrossSigninStatus();
+  const [keyBackup, setKeyBackup] = useState(undefined);
+
+  useEffect(() => {
+    let isMounted = true;
+    mx.getKeyBackupVersion().then((info) => {
+      if (!isMounted) return;
+      setKeyBackup(info);
+    });
+
+    return () => {
+      isMounted = false;
+    };
+  }, []);
+
+  const renderOptions = () => {
+    if (keyBackup === undefined) return <Spinner size="small" />;
+    if (keyBackup === null) return <Button variant="primary" onClick={() => alert('create')}>Create Backup</Button>;
+    return (
+      <>
+        <IconButton src={DownloadIC} variant="positive" onClick={() => alert('restore')} tooltip="Restore backup" />
+        <IconButton src={BinIC} onClick={() => alert('delete')} tooltip="Delete backup" />
+      </>
+    );
+  };
+
+  return (
+    <SettingTile
+      title="Encrypted messages backup"
+      content={(
+        <>
+          <Text variant="b3">Online backup your encryption keys with your account data in case you lose access to your sessions. Your keys will be secured with a unique Security Key.</Text>
+          {!isCSEnabled && (
+            <InfoCard
+              style={{ marginTop: 'var(--sp-ultra-tight)' }}
+              rounded
+              variant="caution"
+              iconSrc={InfoIC}
+              title="Setup cross sign-in to backup your encrypted messages."
+            />
+          )}
+        </>
+      )}
+      options={isCSEnabled ? renderOptions() : null}
+    />
+  );
+}
+
+export default KeyBackup;

src/app/organisms/settings/Settings.jsx

@@ -26,6 +26,8 @@ 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 CrossSignin from './CrossSignin';
+import KeyBackup from './KeyBackup';
 import DeviceManage from './DeviceManage';
 
 import SunIC from '../../../../public/res/ic/outlined/sun.svg';
@@ -167,6 +169,11 @@ function NotificationsSection() {
 function SecuritySection() {
   return (
     <div className="settings-security">
+      <div className="settings-security__card">
+        <MenuHeader>Cross sign-in and backup</MenuHeader>
+        <CrossSignin />
+        <KeyBackup />
+      </div>
       <DeviceManage />
       <div className="settings-security__card">
         <MenuHeader>Encryption</MenuHeader>