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 PlayArrowIcon from "@mui/icons-material/PlayArrow";
import PowerSettingsNewIcon from "@mui/icons-material/PowerSettingsNew";
import StopIcon from "@mui/icons-material/Stop";
import {
  Button,
  Card,
  CardActions,
  CardContent,
  CircularProgress,
  Grid,
  Typography,
} from "@mui/material";
import React from "react";
import { MatrixLinkApi } from "../api/MatrixLinkApi";
import { MatrixSyncApi } from "../api/MatrixSyncApi";
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";
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 />
      ) : (
        <Grid container spacing={2}>
          <Grid size={{ sm: 12, md: 6 }}>
            <ConnectedCard />
          </Grid>
          <Grid size={{ sm: 12, md: 6 }}>
            <EncryptionKeyStatus />
          </Grid>
          <Grid size={{ sm: 12, md: 6 }}>
            <SyncThreadStatus />
          </Grid>
        </Grid>
      )}
    </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 user = useUserInfo();

  const [openSetKeyDialog, setOpenSetKeyDialog] = React.useState(false);

  const handleSetKey = () => setOpenSetKeyDialog(true);
  const handleCloseSetKey = () => setOpenSetKeyDialog(false);

  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 */}
      <SetRecoveryKeyDialog
        open={openSetKeyDialog}
        onClose={handleCloseSetKey}
      />
    </>
  );
}

function SyncThreadStatus(): React.ReactElement {
  const alert = useAlert();
  const snackbar = useSnackbar();

  const [started, setStarted] = React.useState<undefined | boolean>();

  const loadStatus = async () => {
    try {
      setStarted(await MatrixSyncApi.Status());
    } catch (e) {
      console.error(`Failed to refresh sync thread status! ${e}`);
      snackbar(`Failed to refresh sync thread status! ${e}`);
    }
  };

  const handleStartThread = async () => {
    try {
      setStarted(undefined);
      await MatrixSyncApi.Start();
      snackbar("Sync thread started");
    } catch (e) {
      console.error(`Failed to start sync thread! ${e}`);
      alert(`Failed to start sync thread! ${e}`);
    }
  };

  const handleStopThread = async () => {
    try {
      setStarted(undefined);
      await MatrixSyncApi.Stop();
      snackbar("Sync thread stopped");
    } catch (e) {
      console.error(`Failed to stop sync thread! ${e}`);
      alert(`Failed to stop sync thread! ${e}`);
    }
  };

  React.useEffect(() => {
    const interval = setInterval(loadStatus, 1000);

    return () => clearInterval(interval);
  }, []);

  return (
    <>
      <Card>
        <CardContent>
          <Typography variant="h5" component="div" gutterBottom>
            Sync thread status
          </Typography>
          <Typography variant="body1" gutterBottom>
            <p>
              A thread is spawned on the server to watch for events on the
              Matrix server. You can restart this thread from here in case of
              issue.
            </p>

            <p>
              Current thread status:{" "}
              {started === undefined ? (
                <>
                  <CircularProgress
                    size={"1rem"}
                    style={{ verticalAlign: "middle" }}
                  />
                </>
              ) : started === true ? (
                <>
                  <CheckIcon
                    style={{ display: "inline", verticalAlign: "middle" }}
                  />{" "}
                  Started
                </>
              ) : (
                <>
                  <PowerSettingsNewIcon
                    style={{ display: "inline", verticalAlign: "middle" }}
                  />
                  Stopped
                </>
              )}
            </p>
          </Typography>
        </CardContent>
        <CardActions>
          {started === false && (
            <Button
              size="small"
              variant="outlined"
              startIcon={<PlayArrowIcon />}
              onClick={handleStartThread}
            >
              Start thread
            </Button>
          )}

          {started === true && (
            <Button
              size="small"
              variant="outlined"
              startIcon={<StopIcon />}
              onClick={handleStopThread}
            >
              Stop thread
            </Button>
          )}
        </CardActions>
      </Card>
    </>
  );
}