Merge branch 'develop' of https://github.com/outerbase/studio into develop

Author: invisal

src/app/(outerbase)/account/account-footer.tsx

@@ -6,17 +6,21 @@ import {
   Dialog,
   DialogContent,
   DialogDescription,
+  DialogHeader,
+  DialogTitle,
 } from "@/components/ui/dialog";
 import { isValidEmail } from "@/lib/validation";
-import { DialogTitle } from "@radix-ui/react-dialog";
+import { deleteOuterbaseUser } from "@/outerbase-cloud/api-account";
 import { Check, Copy } from "lucide-react";
-import { useMemo, useState } from "react";
+import { useCallback, useMemo, useState } from "react";
+import { toast } from "sonner";
 
 export default function AccountFooter() {
-  const { session } = useSession();
+  const { session, logout } = useSession();
   const [open, setOpen] = useState(false);
   const [copied, setCopied] = useState(false);
   const [email, setEmail] = useState("");
+  const [loading, setLoading] = useState(false);
 
   const copyToClipboard = async () => {
     if (!session) return;
@@ -27,16 +31,36 @@ export default function AccountFooter() {
       console.error("Failed to copy:", error);
     }
   };
+
   const onClose = () => {
     setCopied(false);
     setOpen(false);
     setEmail("");
+    setLoading(false);
   };
+
+  const onDeleteOuerbaseUser = useCallback(() => {
+    setLoading(true);
+    deleteOuterbaseUser()
+      .then(() => {
+        onClose();
+        logout();
+      })
+      .catch((err) => {
+        setLoading(false);
+        toast.error(err.message);
+      });
+  }, [logout]);
+
   const fullName = useMemo(() => {
     if (!session) return;
     return session?.user.first_name + " " + session?.user.last_name;
   }, [session]);
 
+  const disabled = useMemo(() => {
+    return !isValidEmail(email) || email !== session?.user.email;
+  }, [email, session]);
+
   return (
     <>
       <Dialog
@@ -48,9 +72,12 @@ export default function AccountFooter() {
         }}
       >
         <DialogContent className="justify-items-start">
-          <DialogTitle>
-            Confirm deletion of {fullName}&apos; account
-          </DialogTitle>
+          <DialogHeader>
+            <DialogTitle>
+              Confirm deletion of {fullName}&apos; account
+            </DialogTitle>
+          </DialogHeader>
+
           <DialogDescription className="text-base">
             Deleting this account will delete all Bases and Workspaces and
             revoke all connections made to your databases. All members will lose
@@ -76,9 +103,11 @@ export default function AccountFooter() {
           </Label>
           <div className="flex flex-row gap-5">
             <Button
-              disabled={!isValidEmail(email)}
-              onClick={onClose}
+              loading={loading}
+              disabled={disabled}
+              onClick={onDeleteOuerbaseUser}
               variant="destructive"
+              shape="base"
               title="I understand, delete my account"
             />
             <Button variant="secondary" onClick={onClose} title="Cancel" />

src/app/(outerbase)/session-provider.tsx

@@ -1,4 +1,5 @@
 "use client";
+import { useRouter } from "next/navigation";
 import {
   createContext,
   PropsWithChildren,
@@ -19,11 +20,13 @@ interface OuterebaseSessionContextProps {
     session: OuterbaseAPISession;
     user: OuterbaseAPIUser;
   };
+  logout: () => void;
   refreshSession: () => Promise<void>;
 }
 
 const OuterbaseSessionContext = createContext<OuterebaseSessionContextProps>({
   isLoading: true,
+  logout: () => {},
   refreshSession: async () => {},
 });
 
@@ -32,6 +35,7 @@ export function useSession() {
 }
 
 export function OuterbaseSessionProvider({ children }: PropsWithChildren) {
+  const router = useRouter();
   const token =
     typeof window !== "undefined" ? localStorage.getItem("ob-token") || "" : "";
 
@@ -52,9 +56,15 @@ export function OuterbaseSessionProvider({ children }: PropsWithChildren) {
     await mutate("session-" + token);
   }, [token]);
 
+  const logout = useCallback(() => {
+    localStorage.removeItem("session");
+    localStorage.removeItem("ob-token");
+    router.push("/signin");
+  }, [router]);
+
   return (
     <OuterbaseSessionContext.Provider
-      value={{ session: data, isLoading, token, refreshSession }}
+      value={{ session: data, isLoading, token, logout, refreshSession }}
     >
       {children}
     </OuterbaseSessionContext.Provider>

src/outerbase-cloud/api-account.ts

@@ -84,3 +84,7 @@ export async function verifyOuterbaseOTP(token: string) {
 export async function submitVerifyPhone2FA(id: string, data: { code: string }) {
   return await requestOuterbase(`/api/v1/me/phone/${id}/submit`, "POST", data);
 }
+
+export async function deleteOuterbaseUser() {
+  return await requestOuterbase("/api/v1/me", "DELETE");
+}