Can set user recovery key from UI

matrixgw_frontend/src/routes/MatrixLinkRoute.tsx

@@ -1,3 +1,6 @@
+import CheckIcon from "@mui/icons-material/Check";
+import CloseIcon from "@mui/icons-material/Close";
+import KeyIcon from "@mui/icons-material/Key";
 import LinkIcon from "@mui/icons-material/Link";
 import LinkOffIcon from "@mui/icons-material/LinkOff";
 import {
@@ -5,8 +8,15 @@ import {
   Card,
   CardActions,
   CardContent,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogContentText,
+  DialogTitle,
+  TextField,
   Typography,
 } from "@mui/material";
+import React from "react";
 import { MatrixLinkApi } from "../api/MatrixLinkApi";
 import { useAlert } from "../hooks/contexts_provider/AlertDialogProvider";
 import { useConfirm } from "../hooks/contexts_provider/ConfirmDialogProvider";
@@ -19,7 +29,14 @@ export function MatrixLinkRoute(): React.ReactElement {
   const user = useUserInfo();
   return (
     <MatrixGWRouteContainer label={"Matrix account link"}>
-      {user.info.matrix_user_id === null ? <ConnectCard /> : <ConnectedCard />}
+      {user.info.matrix_user_id === null ? (
+        <ConnectCard />
+      ) : (
+        <>
+          <ConnectedCard />
+          <EncryptionKeyStatus />
+        </>
+      )}
     </MatrixGWRouteContainer>
   );
 }
@@ -75,8 +92,6 @@ function ConnectedCard(): React.ReactElement {
   const alert = useAlert();
   const loadingMessage = useLoadingMessage();
 
-  const info = useUserInfo();
-
   const user = useUserInfo();
 
   const handleDisconnect = async () => {
@@ -91,13 +106,13 @@ function ConnectedCard(): React.ReactElement {
       console.error(`Failed to unlink user account! ${e}`);
       alert(`Failed to unlink your account! ${e}`);
     } finally {
-      info.reloadUserInfo();
+      user.reloadUserInfo();
       loadingMessage.hide();
     }
   };
 
   return (
-    <Card>
+    <Card style={{ marginBottom: "10px" }}>
       <CardContent>
         <Typography variant="h5" component="div" gutterBottom>
           <i>Connected to your Matrix account</i>
@@ -135,3 +150,102 @@ function ConnectedCard(): React.ReactElement {
     </Card>
   );
 }
+
+function EncryptionKeyStatus(): React.ReactElement {
+  const alert = useAlert();
+  const snackbar = useSnackbar();
+  const loadingMessage = useLoadingMessage();
+
+  const user = useUserInfo();
+
+  const [typeNewKey, setTypeNewKey] = React.useState(false);
+  const [newKey, setNewKey] = React.useState("");
+
+  const handleSetKey = () => setTypeNewKey(true);
+  const cancelSetKey = () => setTypeNewKey(false);
+  const handleSubmitKey = async () => {
+    try {
+      loadingMessage.show("Updating recovery key...");
+
+      await MatrixLinkApi.SetRecoveryKey(newKey);
+      setNewKey("");
+      setTypeNewKey(false);
+
+      snackbar("Recovery key successfully updated!");
+      user.reloadUserInfo();
+    } catch (e) {
+      console.error(`Failed to set new recovery key! ${e}`);
+      alert(`Failed to set new recovery key! ${e}`);
+    } finally {
+      loadingMessage.hide();
+    }
+  };
+
+  return (
+    <>
+      <Card>
+        <CardContent>
+          <Typography variant="h5" component="div" gutterBottom>
+            Recovery keys
+          </Typography>
+          <Typography variant="body1" gutterBottom>
+            <p>
+              Recovery key is used to verify MatrixGW connection and access
+              message history in encrypted rooms.
+            </p>
+
+            <p>
+              Current encryption status:{" "}
+              {user.info.matrix_recovery_state === "Enabled" ? (
+                <CheckIcon
+                  style={{ display: "inline", verticalAlign: "middle" }}
+                />
+              ) : (
+                <CloseIcon
+                  style={{ display: "inline", verticalAlign: "middle" }}
+                />
+              )}{" "}
+              {user.info.matrix_recovery_state}
+            </p>
+          </Typography>
+        </CardContent>
+        <CardActions>
+          <Button
+            size="small"
+            variant="outlined"
+            startIcon={<KeyIcon />}
+            onClick={handleSetKey}
+          >
+            Set new recovery key
+          </Button>
+        </CardActions>
+      </Card>
+
+      {/* Set new key dialog */}
+      <Dialog open={typeNewKey} onClose={cancelSetKey}>
+        <DialogTitle>Set new recovery key</DialogTitle>
+        <DialogContent>
+          <DialogContentText>
+            Enter below you recovery key to verify this session and gain access
+            to old messages.
+          </DialogContentText>
+          <TextField
+            label="Recovery key"
+            type="text"
+            variant="standard"
+            autoComplete="off"
+            value={newKey}
+            onChange={(e) => setNewKey(e.target.value)}
+            fullWidth
+          />
+        </DialogContent>
+        <DialogActions>
+          <Button onClick={cancelSetKey}>Cancel</Button>
+          <Button onClick={handleSubmitKey} disabled={newKey === ""} autoFocus>
+            Submit
+          </Button>
+        </DialogActions>
+      </Dialog>
+    </>
+  );
+}