Split recovery key dialog in new file

matrixgw_frontend/src/dialogs/SetRecoveryKeyDialog.tsx

@@ -0,0 +1,73 @@
+import {
+  Dialog,
+  DialogTitle,
+  DialogContent,
+  DialogContentText,
+  TextField,
+  DialogActions,
+  Button,
+} from "@mui/material";
+import { MatrixLinkApi } from "../api/MatrixLinkApi";
+import { useAlert } from "../hooks/contexts_provider/AlertDialogProvider";
+import { useLoadingMessage } from "../hooks/contexts_provider/LoadingMessageProvider";
+import { useSnackbar } from "../hooks/contexts_provider/SnackbarProvider";
+import React from "react";
+import { useUserInfo } from "../widgets/dashboard/BaseAuthenticatedPage";
+
+export function SetRecoveryKeyDialog(p: {
+  open: boolean;
+  onClose: () => void;
+}): React.ReactElement {
+  const alert = useAlert();
+  const snackbar = useSnackbar();
+  const loadingMessage = useLoadingMessage();
+
+  const user = useUserInfo();
+
+  const [newKey, setNewKey] = React.useState("");
+
+  const handleSubmitKey = async () => {
+    try {
+      loadingMessage.show("Updating recovery key...");
+
+      await MatrixLinkApi.SetRecoveryKey(newKey);
+      setNewKey("");
+      p.onClose();
+
+      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 (
+    <Dialog open={p.open} onClose={p.onClose}>
+      <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={p.onClose}>Cancel</Button>
+        <Button onClick={handleSubmitKey} disabled={newKey === ""} autoFocus>
+          Submit
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+}

matrixgw_frontend/src/routes/MatrixLinkRoute.tsx

@@ -8,16 +8,11 @@ import {
   Card,
   CardActions,
   CardContent,
-  Dialog,
-  DialogActions,
-  DialogContent,
-  DialogContentText,
-  DialogTitle,
-  TextField,
   Typography,
 } from "@mui/material";
 import React from "react";
 import { MatrixLinkApi } from "../api/MatrixLinkApi";
+import { SetRecoveryKeyDialog } from "../dialogs/SetRecoveryKeyDialog";
 import { useAlert } from "../hooks/contexts_provider/AlertDialogProvider";
 import { useConfirm } from "../hooks/contexts_provider/ConfirmDialogProvider";
 import { useLoadingMessage } from "../hooks/contexts_provider/LoadingMessageProvider";
@@ -152,34 +147,12 @@ function ConnectedCard(): React.ReactElement {
 }
 
 function EncryptionKeyStatus(): React.ReactElement {
-  const alert = useAlert();
-  const snackbar = useSnackbar();
-  const loadingMessage = useLoadingMessage();
-
   const user = useUserInfo();
 
-  const [typeNewKey, setTypeNewKey] = React.useState(false);
+  const [openSetKeyDialog, setOpenSetKeyDialog] = React.useState(false);
-  const [newKey, setNewKey] = React.useState("");
 
-  const handleSetKey = () => setTypeNewKey(true);
+  const handleSetKey = () => setOpenSetKeyDialog(true);
-  const cancelSetKey = () => setTypeNewKey(false);
+  const handleCloseSetKey = () => setOpenSetKeyDialog(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 (
     <>
@@ -222,30 +195,10 @@ function EncryptionKeyStatus(): React.ReactElement {
       </Card>
 
       {/* Set new key dialog */}
-      <Dialog open={typeNewKey} onClose={cancelSetKey}>
+      <SetRecoveryKeyDialog
-        <DialogTitle>Set new recovery key</DialogTitle>
+        open={openSetKeyDialog}
-        <DialogContent>
+        onClose={handleCloseSetKey}
-          <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>
     </>
   );
 }