add settings auth redirect

1 files changed, 26 insertions, 3 deletions

diff --git a/src/app/settings/page.tsx b/src/app/settings/page.tsx
index 45caa18..c44b787 100644
--- a/src/app/settings/page.tsx
+++ b/src/app/settings/page.tsx
@@ -1,17 +1,40 @@
 'use client';
 
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
+import { useUser } from '@/lib/contexts/Auth.context';
 import SettingsMenu from '@/components/settings/SettingsMenu';
 import SecurityPage from '@/components/settings/SecurityPage';
 import ProfilePage from '@/components/settings/ProfilePage';
+import { Dialog, DialogTrigger, DialogContent } from '@/components/ui/dialog';
+import { AuthDialog } from '@/components/header/AuthDialog';
 
 export default function Settings() {
+    const user = useUser();
     const [tab, setTab] = useState('profile');
+    const [showAuth, setShowAuth] = useState(false);
+
+    useEffect(() => {
+        if (user === null) {
+            setShowAuth(true);
+        }
+    }, [user]);
+
+    if (!user) {
+        return (
+            <Dialog open={showAuth} onOpenChange={setShowAuth}>
+                <DialogTrigger asChild>
+                    <div />
+                </DialogTrigger>
+                <DialogContent className="p-0 bg-transparent border-none">
+                    <AuthDialog redirectTo="/settings" />
+                </DialogContent>
+            </Dialog>
+        );
+    }
 
     return (
-        <div className="flex flex-row gap-[250px] w-full max-w-[1500px] ">
+        <div className="flex flex-row gap-[250px] w-full max-w-[1500px]">
             <SettingsMenu tab={tab} setTab={setTab} />
-
             <div className="flex-1">
                 {tab === 'profile' && <ProfilePage />}
                 {tab === 'security' && <SecurityPage />}