Refactor code structure and remove redundant changes

components/auth/AuthModal.tsx

@@ -0,0 +1,110 @@
+'use client';
+
+import { useState } from 'react';
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+} from '@/components/ui/dialog';
+import { LoginForm } from './LoginForm';
+import { RegisterForm } from './RegisterForm';
+import { PasswordResetForm } from './PasswordResetForm';
+import { OAuthButtons } from './OAuthButtons';
+
+type AuthView = 'login' | 'register' | 'reset';
+
+interface AuthModalProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  defaultView?: AuthView;
+  onSuccess?: () => void;
+  showOAuth?: boolean;
+}
+
+export function AuthModal({
+  open,
+  onOpenChange,
+  defaultView = 'login',
+  onSuccess,
+  showOAuth = true,
+}: AuthModalProps) {
+  const [view, setView] = useState<AuthView>(defaultView);
+
+  const handleSuccess = () => {
+    onSuccess?.();
+    onOpenChange(false);
+  };
+
+  const getTitle = () => {
+    switch (view) {
+      case 'login':
+        return 'Welcome Back';
+      case 'register':
+        return 'Create Account';
+      case 'reset':
+        return 'Reset Password';
+    }
+  };
+
+  const getDescription = () => {
+    switch (view) {
+      case 'login':
+        return 'Sign in to your account to continue';
+      case 'register':
+        return 'Create a new account to get started';
+      case 'reset':
+        return 'Reset your password';
+    }
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-[425px]">
+        <DialogHeader>
+          <DialogTitle>{getTitle()}</DialogTitle>
+          <DialogDescription>{getDescription()}</DialogDescription>
+        </DialogHeader>
+
+        <div className="mt-4">
+          {view === 'login' && (
+            <>
+              <LoginForm
+                onSuccess={handleSuccess}
+                onSwitchToRegister={() => setView('register')}
+                onSwitchToReset={() => setView('reset')}
+              />
+              {showOAuth && (
+                <div className="mt-6">
+                  <OAuthButtons />
+                </div>
+              )}
+            </>
+          )}
+
+          {view === 'register' && (
+            <>
+              <RegisterForm
+                onSuccess={handleSuccess}
+                onSwitchToLogin={() => setView('login')}
+              />
+              {showOAuth && (
+                <div className="mt-6">
+                  <OAuthButtons />
+                </div>
+              )}
+            </>
+          )}
+
+          {view === 'reset' && (
+            <PasswordResetForm
+              onSuccess={handleSuccess}
+              onBack={() => setView('login')}
+            />
+          )}
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}