feat(app): unlink account dialog

closes #315
RBND-studio · May 18, 2024 · 3e51fac · 3e51fac
1 parent df9287b
commit 3e51fac
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 12 deletions.
diff --git a/apps/app/src/app/(dashboard)/user/settings/connected-account.tsx b/apps/app/src/app/(dashboard)/user/settings/connected-account.tsx
@@ -1,12 +1,23 @@
 "use client";
 import { css } from "@flows/styled-system/css";
 import type { User, UserIdentity } from "@supabase/supabase-js";
+import { mutate } from "hooks/use-fetch";
 import { useSend } from "hooks/use-send";
 import { GitHub16, Google16, Mail16 } from "icons";
 import { api } from "lib/api";
 import { useRouter } from "next/navigation";
+import { useState } from "react";
 import { t } from "translations";
-import { Button, Text, Tooltip } from "ui";
+import {
+  Button,
+  Dialog,
+  DialogActions,
+  DialogClose,
+  DialogContent,
+  DialogTitle,
+  Text,
+  Tooltip,
+} from "ui";
 
 import { PasswordChangeDialog } from "./password-change-dialog";
 
@@ -26,13 +37,18 @@ export const ConnectedAccount = ({
   user,
   hasPassword,
 }: ConnectedAccountProps): JSX.Element => {
+  const [confirmDialogOpen, setConfirmDialogOpen] = useState(false);
   const { send, loading, error } = useSend();
   const router = useRouter();
   const handleUnlink = async (): Promise<void> => {
     await send(api["DELETE /me/identities/:providerId"](identity.id), {
       errorMessage: t.toasts.accountUnlinkFailed,
     });
-    if (!error) router.refresh();
+    if (!error) {
+      setConfirmDialogOpen(false);
+      void mutate("/organizations", []);
+      router.refresh();
+    }
   };
 
   const isDisabled = !hasPassword && user.identities?.length === 1;
@@ -67,15 +83,36 @@ export const ConnectedAccount = ({
           text={isDisabled ? t.personal.connectedAccounts.lastProvider : ""}
           trigger={
             <div>
-              <Button
-                disabled={isDisabled}
-                loading={loading}
-                onClick={handleUnlink}
-                size="small"
-                variant="danger"
+              <Dialog
+                open={confirmDialogOpen}
+                onOpenChange={setConfirmDialogOpen}
+                trigger={
+                  <Button disabled={isDisabled} loading={loading} size="small" variant="danger">
+                    {t.actions.unlink}
+                  </Button>
+                }
               >
-                {t.actions.unlink}
-              </Button>
+                <DialogTitle>{t.personal.connectedAccounts.unlinkDialog.title}</DialogTitle>
+                <DialogContent>
+                  <Text mb="space24">{t.personal.connectedAccounts.unlinkDialog.description}</Text>
+                </DialogContent>
+                <DialogActions>
+                  <DialogClose asChild>
+                    <Button shadow="none" size="small" variant="secondary">
+                      {t.actions.close}
+                    </Button>
+                  </DialogClose>
+                  <Button
+                    type="button"
+                    size="small"
+                    loading={loading}
+                    variant="primary"
+                    onClick={handleUnlink}
+                  >
+                    {t.personal.connectedAccounts.unlinkDialog.confirm}
+                  </Button>
+                </DialogActions>
+              </Dialog>
             </div>
           }
         />

diff --git a/apps/app/src/translations/translations.ts b/apps/app/src/translations/translations.ts
@@ -222,6 +222,11 @@ export const t = {
         "This is the only way for you to login. To unlink it delete your account or create a password.",
       changePassword: "Change password",
       createPassword: "Create password",
+      unlinkDialog: {
+        title: "Unlink account",
+        description: "Are you sure you want to unlink this account?",
+        confirm: "Unlink account",
+      },
     },
     deleteAccount: {
       title: "Delete account",

diff --git a/apps/backend/src/users/users.controller.ts b/apps/backend/src/users/users.controller.ts
@@ -1,4 +1,4 @@
-import { Body, Controller, Delete, Get, Post } from "@nestjs/common";
+import { Body, Controller, Delete, Get, Param, Post } from "@nestjs/common";
 import { ApiBearerAuth, ApiTags } from "@nestjs/swagger";
 
 import { type Auth, Authorization } from "../auth";
@@ -47,7 +47,7 @@ export class UsersController {
   @Delete("me/identities/:providerId")
   deleteIdentity(
     @Authorization() auth: Auth,
-    @UUIDParam("providerId") providerId: string,
+    @Param("providerId") providerId: string,
   ): Promise<void> {
     return this.usersService.deleteIdentity({ auth, providerId });
   }