✨ Clean Up Login & Add Signup Flow

🧹 Login Page Cleanup:
- Removed admin login account (keeping Alice & Bob for testing)
- Deleted the Testing Accounts box at the bottom
- Improved quick login button layout (2 columns instead of 3)
- Added signup link with consistent styling

📝 New Signup Page:
- Complete registration form with validation
- First name, last name, email, password fields
- Password confirmation with matching validation
- Real-time form validation with error messages
- Consistent styling with login page
- Link back to login page

🎨 Enhanced UX:
- Form validation with red borders for errors
- Loading states for both login and signup
- Proper error handling and display
- Clean navigation between login/signup
- Consistent gradient text styling

Ready for user registration! 🚀

pages/login.js

@@ -1,5 +1,6 @@
 import { useState } from 'react';
 import { useRouter } from 'next/router';
+import Link from 'next/link';
 import AuthLayout from '../components/AuthLayout';
 import AnimatedFireLogo from '../components/AnimatedFireLogo';
 
@@ -165,23 +166,11 @@ export default function Login() {
                   <p className="text-sm mb-3" style={{ color: 'var(--text-secondary)' }}>
                     Quick Login for Testing:
                   </p>
-                  <div className="grid grid-cols-3 gap-2">
-                    <button
-                      type="button"
-                      onClick={() => handleQuickLogin('admin@tcgvault.com', 'admin123')}
-                      className="px-3 py-2 rounded-lg text-xs font-medium border border-opacity-20 transition-all duration-200 hover:shadow-md backdrop-blur-sm hover:bg-opacity-80"
-                      style={{
-                        backgroundColor: 'rgba(var(--bg-primary-rgb), 0.6)',
-                        borderColor: 'var(--border)',
-                        color: 'var(--text-primary)'
-                      }}
-                    >
-                      👑 Admin
-                    </button>
+                  <div className="grid grid-cols-2 gap-3">
                     <button
                       type="button"
                       onClick={() => handleQuickLogin('alice@tcgvault.com', 'alice123')}
-                      className="px-3 py-2 rounded-lg text-xs font-medium border border-opacity-20 transition-all duration-200 hover:shadow-md backdrop-blur-sm hover:bg-opacity-80"
+                      className="px-4 py-2 rounded-lg text-sm font-medium border border-opacity-20 transition-all duration-200 hover:shadow-md backdrop-blur-sm hover:bg-opacity-80"
                       style={{
                         backgroundColor: 'rgba(var(--bg-primary-rgb), 0.6)',
                         borderColor: 'var(--border)',
@@ -193,7 +182,7 @@ export default function Login() {
                     <button
                       type="button"
                       onClick={() => handleQuickLogin('bob@tcgvault.com', 'bob123')}
-                      className="px-3 py-2 rounded-lg text-xs font-medium border border-opacity-20 transition-all duration-200 hover:shadow-md backdrop-blur-sm hover:bg-opacity-80"
+                      className="px-4 py-2 rounded-lg text-sm font-medium border border-opacity-20 transition-all duration-200 hover:shadow-md backdrop-blur-sm hover:bg-opacity-80"
                       style={{
                         backgroundColor: 'rgba(var(--bg-primary-rgb), 0.6)',
                         borderColor: 'var(--border)',
@@ -205,33 +194,16 @@ export default function Login() {
                   </div>
                 </div>
               </div>
-            </form>
 
-            <div className="mt-6 text-center">
+              <div className="text-center">
                 <p className="text-sm" style={{ color: 'var(--text-secondary)' }}>
-                Use the quick login buttons above for testing, or enter credentials manually.
+                  Don't have an account?{' '}
+                  <Link href="/signup" className="font-medium gradient-text-flame hover:underline">
+                    Sign up here
+                  </Link>
                 </p>
               </div>
-          </div>
-
-          {/* Testing Guide */}
-          <div 
-            className="p-4 rounded-xl border border-opacity-20 backdrop-blur-sm" 
-            style={{ 
-              backgroundColor: 'rgba(var(--bg-secondary-rgb), 0.6)', 
-              borderColor: 'var(--border)' 
-            }}
-          >
-            <div className="text-center">
-              <h3 className="text-sm font-semibold mb-2" style={{ color: 'var(--text-primary)' }}>
-                🧪 Testing Accounts
-              </h3>
-              <div className="text-xs space-y-1" style={{ color: 'var(--text-secondary)' }}>
-                <p><strong>Admin:</strong> Full system access</p>
-                <p><strong>Alice:</strong> Regular user for testing</p>
-                <p><strong>Bob:</strong> Collaborator for testing</p>
-              </div>
-            </div>
+            </form>
           </div>
         </div>
       </div>

pages/signup.js

@@ -0,0 +1,307 @@
+import { useState } from 'react';
+import { useRouter } from 'next/router';
+import Link from 'next/link';
+import AuthLayout from '../components/AuthLayout';
+import AnimatedFireLogo from '../components/AnimatedFireLogo';
+
+export default function Signup() {
+  const router = useRouter();
+  const [formData, setFormData] = useState({
+    email: '',
+    password: '',
+    confirmPassword: '',
+    firstName: '',
+    lastName: ''
+  });
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState('');
+  const [validationErrors, setValidationErrors] = useState({});
+
+  const handleInputChange = (field, value) => {
+    setFormData(prev => ({
+      ...prev,
+      [field]: value
+    }));
+    // Clear errors when user starts typing
+    if (error) setError('');
+    if (validationErrors[field]) {
+      setValidationErrors(prev => ({
+        ...prev,
+        [field]: ''
+      }));
+    }
+  };
+
+  const validateForm = () => {
+    const errors = {};
+
+    // Email validation
+    if (!formData.email) {
+      errors.email = 'Email is required';
+    } else if (!/\S+@\S+\.\S+/.test(formData.email)) {
+      errors.email = 'Please enter a valid email address';
+    }
+
+    // Password validation
+    if (!formData.password) {
+      errors.password = 'Password is required';
+    } else if (formData.password.length < 6) {
+      errors.password = 'Password must be at least 6 characters';
+    }
+
+    // Confirm password validation
+    if (!formData.confirmPassword) {
+      errors.confirmPassword = 'Please confirm your password';
+    } else if (formData.password !== formData.confirmPassword) {
+      errors.confirmPassword = 'Passwords do not match';
+    }
+
+    // Name validation
+    if (!formData.firstName.trim()) {
+      errors.firstName = 'First name is required';
+    }
+
+    if (!formData.lastName.trim()) {
+      errors.lastName = 'Last name is required';
+    }
+
+    setValidationErrors(errors);
+    return Object.keys(errors).length === 0;
+  };
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    
+    if (!validateForm()) {
+      return;
+    }
+
+    setLoading(true);
+    setError('');
+
+    try {
+      const response = await fetch('/api/auth/register', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          email: formData.email,
+          password: formData.password,
+          firstName: formData.firstName,
+          lastName: formData.lastName
+        })
+      });
+
+      const data = await response.json();
+
+      if (response.ok) {
+        // Store the JWT token in localStorage
+        localStorage.setItem('auth_token', data.token);
+        
+        // Redirect to dashboard
+        router.push('/dashboard');
+      } else {
+        setError(data.error || 'Registration failed');
+      }
+    } catch (error) {
+      console.error('Registration error:', error);
+      setError('Network error. Please try again.');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <AuthLayout>
+      <div className="min-h-screen flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8">
+        <div className="max-w-md w-full space-y-8">
+          <div>
+            <div className="text-center">
+              <div className="mb-6 flex justify-center">
+                <AnimatedFireLogo size={100} />
+              </div>
+              <h2 className="text-3xl font-bold gradient-text-flame mb-2">
+                Join Deck Hearth
+              </h2>
+              <p className="mt-2 text-sm" style={{ color: 'var(--text-secondary)' }}>
+                Create your account to start building your collection
+              </p>
+            </div>
+          </div>
+
+          <div 
+            className="p-8 rounded-2xl shadow-2xl backdrop-blur-sm border border-opacity-20" 
+            style={{ 
+              backgroundColor: 'rgba(var(--bg-secondary-rgb), 0.85)',
+              borderColor: 'var(--border)'
+            }}
+          >
+            <form onSubmit={handleSubmit} className="space-y-6">
+              {error && (
+                <div className="p-4 rounded-lg bg-red-500 bg-opacity-10 border border-red-500 border-opacity-20 backdrop-blur-sm">
+                  <p className="text-red-400 text-sm">{error}</p>
+                </div>
+              )}
+
+              <div className="grid grid-cols-2 gap-4">
+                <div>
+                  <label htmlFor="firstName" className="block text-sm font-medium mb-2" style={{ color: 'var(--text-primary)' }}>
+                    First Name
+                  </label>
+                  <input
+                    id="firstName"
+                    name="firstName"
+                    type="text"
+                    required
+                    value={formData.firstName}
+                    onChange={(e) => handleInputChange('firstName', e.target.value)}
+                    className="w-full px-4 py-3 rounded-lg border transition-all duration-200 focus:ring-2 focus:ring-orange-500 focus:border-transparent backdrop-blur-sm"
+                    style={{
+                      backgroundColor: 'rgba(var(--bg-primary-rgb), 0.7)',
+                      borderColor: validationErrors.firstName ? '#ef4444' : 'var(--border)',
+                      color: 'var(--text-primary)'
+                    }}
+                    placeholder="John"
+                  />
+                  {validationErrors.firstName && (
+                    <p className="mt-1 text-xs text-red-400">{validationErrors.firstName}</p>
+                  )}
+                </div>
+
+                <div>
+                  <label htmlFor="lastName" className="block text-sm font-medium mb-2" style={{ color: 'var(--text-primary)' }}>
+                    Last Name
+                  </label>
+                  <input
+                    id="lastName"
+                    name="lastName"
+                    type="text"
+                    required
+                    value={formData.lastName}
+                    onChange={(e) => handleInputChange('lastName', e.target.value)}
+                    className="w-full px-4 py-3 rounded-lg border transition-all duration-200 focus:ring-2 focus:ring-orange-500 focus:border-transparent backdrop-blur-sm"
+                    style={{
+                      backgroundColor: 'rgba(var(--bg-primary-rgb), 0.7)',
+                      borderColor: validationErrors.lastName ? '#ef4444' : 'var(--border)',
+                      color: 'var(--text-primary)'
+                    }}
+                    placeholder="Doe"
+                  />
+                  {validationErrors.lastName && (
+                    <p className="mt-1 text-xs text-red-400">{validationErrors.lastName}</p>
+                  )}
+                </div>
+              </div>
+
+              <div>
+                <label htmlFor="email" className="block text-sm font-medium mb-2" style={{ color: 'var(--text-primary)' }}>
+                  Email Address
+                </label>
+                <input
+                  id="email"
+                  name="email"
+                  type="email"
+                  autoComplete="email"
+                  required
+                  value={formData.email}
+                  onChange={(e) => handleInputChange('email', e.target.value)}
+                  className="w-full px-4 py-3 rounded-lg border transition-all duration-200 focus:ring-2 focus:ring-orange-500 focus:border-transparent backdrop-blur-sm"
+                  style={{
+                    backgroundColor: 'rgba(var(--bg-primary-rgb), 0.7)',
+                    borderColor: validationErrors.email ? '#ef4444' : 'var(--border)',
+                    color: 'var(--text-primary)'
+                  }}
+                  placeholder="john@example.com"
+                />
+                {validationErrors.email && (
+                  <p className="mt-1 text-xs text-red-400">{validationErrors.email}</p>
+                )}
+              </div>
+
+              <div>
+                <label htmlFor="password" className="block text-sm font-medium mb-2" style={{ color: 'var(--text-primary)' }}>
+                  Password
+                </label>
+                <input
+                  id="password"
+                  name="password"
+                  type="password"
+                  autoComplete="new-password"
+                  required
+                  value={formData.password}
+                  onChange={(e) => handleInputChange('password', e.target.value)}
+                  className="w-full px-4 py-3 rounded-lg border transition-all duration-200 focus:ring-2 focus:ring-orange-500 focus:border-transparent backdrop-blur-sm"
+                  style={{
+                    backgroundColor: 'rgba(var(--bg-primary-rgb), 0.7)',
+                    borderColor: validationErrors.password ? '#ef4444' : 'var(--border)',
+                    color: 'var(--text-primary)'
+                  }}
+                  placeholder="At least 6 characters"
+                />
+                {validationErrors.password && (
+                  <p className="mt-1 text-xs text-red-400">{validationErrors.password}</p>
+                )}
+              </div>
+
+              <div>
+                <label htmlFor="confirmPassword" className="block text-sm font-medium mb-2" style={{ color: 'var(--text-primary)' }}>
+                  Confirm Password
+                </label>
+                <input
+                  id="confirmPassword"
+                  name="confirmPassword"
+                  type="password"
+                  autoComplete="new-password"
+                  required
+                  value={formData.confirmPassword}
+                  onChange={(e) => handleInputChange('confirmPassword', e.target.value)}
+                  className="w-full px-4 py-3 rounded-lg border transition-all duration-200 focus:ring-2 focus:ring-orange-500 focus:border-transparent backdrop-blur-sm"
+                  style={{
+                    backgroundColor: 'rgba(var(--bg-primary-rgb), 0.7)',
+                    borderColor: validationErrors.confirmPassword ? '#ef4444' : 'var(--border)',
+                    color: 'var(--text-primary)'
+                  }}
+                  placeholder="Confirm your password"
+                />
+                {validationErrors.confirmPassword && (
+                  <p className="mt-1 text-xs text-red-400">{validationErrors.confirmPassword}</p>
+                )}
+              </div>
+
+              <div>
+                <button
+                  type="submit"
+                  disabled={loading}
+                  className={`w-full px-4 py-3 rounded-lg font-medium transition-all duration-200 ${
+                    loading 
+                      ? 'opacity-50 cursor-not-allowed' 
+                      : 'gradient-bg-ember text-white hover:shadow-xl transform hover:scale-105 hover:shadow-orange-500/20'
+                  }`}
+                >
+                  {loading ? (
+                    <div className="flex items-center justify-center">
+                      <div className="animate-spin rounded-full h-5 w-5 border-b-2 border-white mr-2"></div>
+                      Creating Account...
+                    </div>
+                  ) : (
+                    'Create Account'
+                  )}
+                </button>
+              </div>
+
+              <div className="text-center">
+                <p className="text-sm" style={{ color: 'var(--text-secondary)' }}>
+                  Already have an account?{' '}
+                  <Link href="/login" className="font-medium gradient-text-flame hover:underline">
+                    Sign in here
+                  </Link>
+                </p>
+              </div>
+            </form>
+          </div>
+        </div>
+      </div>
+    </AuthLayout>
+  );
+}