Split recovery key dialog in new file

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 [newKey, setNewKey] = React.useState("");
+  const [openSetKeyDialog, setOpenSetKeyDialog] = React.useState(false);
 
-  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();
-    }
-  };
+  const handleSetKey = () => setOpenSetKeyDialog(true);
+  const handleCloseSetKey = () => setOpenSetKeyDialog(false);
 
   return (
     <>
@@ -222,30 +195,10 @@ function EncryptionKeyStatus(): React.ReactElement {
       </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>
+      <SetRecoveryKeyDialog
+        open={openSetKeyDialog}
+        onClose={handleCloseSetKey}
+      />
     </>
   );
 }