MatrixGW/matrixgw_frontend/src/routes/MatrixLinkRoute.tsx

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 {
  Button,
  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";
import { useLoadingMessage } from "../hooks/contexts_provider/LoadingMessageProvider";
import { useSnackbar } from "../hooks/contexts_provider/SnackbarProvider";
import { useUserInfo } from "../widgets/dashboard/BaseAuthenticatedPage";
import { MatrixGWRouteContainer } from "../widgets/MatrixGWRouteContainer";

export function MatrixLinkRoute(): React.ReactElement {
  const user = useUserInfo();
  return (
    <MatrixGWRouteContainer label={"Matrix account link"}>
      {user.info.matrix_user_id === null ? (
        <ConnectCard />
      ) : (
        <>
          <ConnectedCard />
          <EncryptionKeyStatus />
        </>
      )}
    </MatrixGWRouteContainer>
  );
}

function ConnectCard(): React.ReactElement {
  const alert = useAlert();
  const loadingMessage = useLoadingMessage();

  const startMatrixConnection = async () => {
    try {
      loadingMessage.show("Initiating Matrix link...");

      const res = await MatrixLinkApi.StartAuth();

      window.location.href = res.url;
    } catch (e) {
      console.error(`Failed to connect to Matrix account! ${e}`);
      alert(`Failed to connect to Matrix account! ${e}`);
    } finally {
      loadingMessage.hide();
    }
  };

  return (
    <Card>
      <CardContent>
        <Typography variant="h5" component="div" gutterBottom>
          <i>Disconnected from your Matrix account</i>
        </Typography>

        <Typography variant="body1" gutterBottom>
          You need to connect MatrixGW to your Matrix account to let it access
          your messages.
        </Typography>
      </CardContent>
      <CardActions>
        <Button
          size="small"
          variant="outlined"
          startIcon={<LinkIcon />}
          onClick={startMatrixConnection}
        >
          Connect now
        </Button>
      </CardActions>
    </Card>
  );
}

function ConnectedCard(): React.ReactElement {
  const snackbar = useSnackbar();
  const confirm = useConfirm();
  const alert = useAlert();
  const loadingMessage = useLoadingMessage();

  const user = useUserInfo();

  const handleDisconnect = async () => {
    if (!(await confirm("Do you really want to unlink your Matrix account?")))
      return;

    try {
      loadingMessage.show("Unlinking Matrix account...");
      await MatrixLinkApi.Disconnect();
      snackbar("Successfully unlinked Matrix account!");
    } catch (e) {
      console.error(`Failed to unlink user account! ${e}`);
      alert(`Failed to unlink your account! ${e}`);
    } finally {
      user.reloadUserInfo();
      loadingMessage.hide();
    }
  };

  return (
    <Card style={{ marginBottom: "10px" }}>
      <CardContent>
        <Typography variant="h5" component="div" gutterBottom>
          <i>Connected to your Matrix account</i>
        </Typography>

        <Typography variant="body1" gutterBottom>
          <p>
            MatrixGW is currently connected to your account with the following
            information:
          </p>
          <ul>
            <li>
              User id: <i>{user.info.matrix_user_id}</i>
            </li>
            <li>
              Device id: <i>{user.info.matrix_device_id}</i>
            </li>
          </ul>
          <p>
            If you encounter issues with your Matrix account you can try to
            disconnect and connect back again.
          </p>
        </Typography>
      </CardContent>
      <CardActions>
        <Button
          size="small"
          variant="outlined"
          startIcon={<LinkOffIcon />}
          onClick={handleDisconnect}
        >
          Disconnect
        </Button>
      </CardActions>
    </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>
    </>
  );
}