Fixing issues with Better Auth

src/components/auth/LoginForm.tsx

@@ -33,7 +33,7 @@ export function LoginForm() {
       toast.success('Login successful!');
       // Small delay before redirecting to see the success message
       setTimeout(() => {
-        window.location.href = '/dashboard';
+        window.location.href = '/';
       }, 1000);
     } catch (error) {
       showErrorToast(error, toast);

src/components/auth/LoginPage.tsx

@@ -0,0 +1,10 @@
+import { LoginForm } from './LoginForm';
+import Providers from '@/components/layout/Providers';
+
+export function LoginPage() {
+  return (
+    <Providers>
+      <LoginForm />
+    </Providers>
+  );
+}

src/components/auth/SignupForm.tsx

@@ -16,12 +16,11 @@ export function SignupForm() {
     setIsLoading(true);
     const form = e.currentTarget;
     const formData = new FormData(form);
-    const username = formData.get('username') as string | null;
     const email = formData.get('email') as string | null;
     const password = formData.get('password') as string | null;
     const confirmPassword = formData.get('confirmPassword') as string | null;
 
-    if (!username || !email || !password || !confirmPassword) {
+    if (!email || !password || !confirmPassword) {
       toast.error('Please fill in all fields');
       setIsLoading(false);
       return;
@@ -34,11 +33,13 @@ export function SignupForm() {
     }
 
     try {
+      // Derive username from email (part before @)
+      const username = email.split('@')[0];
       await register(username, email, password);
       toast.success('Account created successfully! Redirecting to dashboard...');
       // Small delay before redirecting to see the success message
       setTimeout(() => {
-        window.location.href = '/dashboard';
+        window.location.href = '/';
       }, 1500);
     } catch (error) {
       showErrorToast(error, toast);
@@ -71,20 +72,6 @@ export function SignupForm() {
         <CardContent>
           <form id="signup-form" onSubmit={handleSignup}>
             <div className="space-y-4">
-              <div>
-                <label htmlFor="username" className="block text-sm font-medium mb-1">
-                  Username
-                </label>
-                <input
-                  id="username"
-                  name="username"
-                  type="text"
-                  required
-                  className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm shadow-sm transition-colors placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
-                  placeholder="Enter your username"
-                  disabled={isLoading}
-                />
-              </div>
               <div>
                 <label htmlFor="email" className="block text-sm font-medium mb-1">
                   Email
@@ -97,6 +84,7 @@ export function SignupForm() {
                   className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm shadow-sm transition-colors placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
                   placeholder="Enter your email"
                   disabled={isLoading}
+                  autoFocus
                 />
               </div>
               <div>

src/components/auth/SignupPage.tsx

@@ -0,0 +1,10 @@
+import { SignupForm } from './SignupForm';
+import Providers from '@/components/layout/Providers';
+
+export function SignupPage() {
+  return (
+    <Providers>
+      <SignupForm />
+    </Providers>
+  );
+}