Can disconnect user from UI

matrixgw_frontend/src/api/MatrixLinkApi.ts

@@ -23,4 +23,14 @@ export class MatrixLinkApi {
       jsonData: { code, state },
     });
   }
+
+  /**
+   * Disconnect from Matrix Account
+   */
+  static async Disconnect(): Promise<void> {
+    await APIClient.exec({
+      uri: "/matrix_link/logout",
+      method: "POST",
+    });
+  }
 }

matrixgw_frontend/src/routes/MatrixLinkRoute.tsx

@@ -9,7 +9,9 @@ import {
 } from "@mui/material";
 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";
 
@@ -68,8 +70,32 @@ function ConnectCard(): React.ReactElement {
 }
 
 function ConnectedCard(): React.ReactElement {
+  const snackbar = useSnackbar();
+  const confirm = useConfirm();
+  const alert = useAlert();
+  const loadingMessage = useLoadingMessage();
+
+  const info = useUserInfo();
+
   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 {
+      info.reloadUserInfo();
+      loadingMessage.hide();
+    }
+  };
+
   return (
     <Card>
       <CardContent>
@@ -97,7 +123,12 @@ function ConnectedCard(): React.ReactElement {
         </Typography>
       </CardContent>
       <CardActions>
-        <Button size="small" variant="outlined" startIcon={<LinkOffIcon />}>
+        <Button
+          size="small"
+          variant="outlined"
+          startIcon={<LinkOffIcon />}
+          onClick={handleDisconnect}
+        >
           Disconnect
         </Button>
       </CardActions>