import { useState } from "react"; import { useAuth } from "@/hooks/use-auth.tsx"; import { Redirect, Link } from "wouter"; import { z } from "zod"; import { useForm } from "react-hook-form"; import { zodResolver } from "@hookform/resolvers/zod"; import { Button } from "@/components/ui/button"; import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage, } from "@/components/ui/form"; import { Input } from "@/components/ui/input"; import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"; import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"; import { Loader2 } from "lucide-react"; import { useToast } from "@/hooks/use-toast"; // Form validation schemas const loginSchema = z.object({ username: z.string().min(3, "Username must be at least 3 characters"), password: z.string().min(6, "Password must be at least 6 characters"), }); const registerSchema = z.object({ username: z.string().min(3, "Username must be at least 3 characters"), password: z .string() .min(6, "Password must be at least 6 characters") .max(100, "Password must be less than 100 characters"), confirmPassword: z.string(), }).refine((data) => data.password === data.confirmPassword, { message: "Passwords do not match", path: ["confirmPassword"], }); type LoginFormValues = z.infer; type RegisterFormValues = z.infer; export default function AuthPage() { const [activeTab, setActiveTab] = useState<"login" | "register">("login"); const { user, loginMutation, registerMutation, isLoading } = useAuth(); const { toast } = useToast(); // Initialize form objects up-front to avoid the hooks rules violation const loginForm = useForm({ resolver: zodResolver(loginSchema), defaultValues: { username: "", password: "", }, }); const registerForm = useForm({ resolver: zodResolver(registerSchema), defaultValues: { username: "", password: "", confirmPassword: "", }, }); // If user is already logged in, redirect to home page if (user) { return ; } // Form submission handlers const onLoginSubmit = async (data: LoginFormValues) => { try { await loginMutation.mutateAsync(data); toast({ title: "Welcome back!", description: "You've successfully logged in.", }); } catch (error) { console.error("Login error:", error); // Error handling is done in the loginMutation itself } }; const onRegisterSubmit = async (data: RegisterFormValues) => { try { const { confirmPassword, ...userData } = data; await registerMutation.mutateAsync(userData); toast({ title: "Account created!", description: "Your account has been created successfully.", }); } catch (error) { console.error("Registration error:", error); // Error handling is done in the registerMutation itself } }; const isPending = loginMutation.isPending || registerMutation.isPending || isLoading; return (
{/* Auth Form Section */} Welcome Sign in to your account or create a new one setActiveTab(v as "login" | "register")}> Login with Replit {/* Login with Replit */}

{activeTab === "login" ? ( <> Don't have an account?{" "} ) : ( <> Already have an account?{" "} )}

{/* Hero Section */}

AI Assistant

A powerful AI assistant that helps you with conversations, generates images, and creates videos based on your prompts.

Smart Conversations

Chat with an AI that understands context and provides helpful responses.

Image Generation

Create stunning images from text descriptions using FLUX.1-dev.

Video Creation

Transform your ideas into short videos with AI-powered generation.

); }