auth

apps/website/app/auth/forgot-password/page.tsx

@@ -0,0 +1,235 @@
+'use client';
+
+import { useState, FormEvent, type ChangeEvent } from 'react';
+import { useRouter } from 'next/navigation';
+import Link from 'next/link';
+import { motion } from 'framer-motion';
+import {
+  Mail,
+  ArrowLeft,
+  AlertCircle,
+  Flag,
+  Shield,
+  CheckCircle2,
+} from 'lucide-react';
+
+import Card from '@/components/ui/Card';
+import Button from '@/components/ui/Button';
+import Input from '@/components/ui/Input';
+import Heading from '@/components/ui/Heading';
+
+interface FormErrors {
+  email?: string;
+  submit?: string;
+}
+
+interface SuccessState {
+  message: string;
+  magicLink?: string;
+}
+
+export default function ForgotPasswordPage() {
+  const router = useRouter();
+  
+  const [loading, setLoading] = useState(false);
+  const [errors, setErrors] = useState<FormErrors>({});
+  const [success, setSuccess] = useState<SuccessState | null>(null);
+  const [formData, setFormData] = useState({
+    email: '',
+  });
+
+  const validateForm = (): boolean => {
+    const newErrors: FormErrors = {};
+
+    if (!formData.email.trim()) {
+      newErrors.email = 'Email is required';
+    } else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(formData.email)) {
+      newErrors.email = 'Invalid email format';
+    }
+
+    setErrors(newErrors);
+    return Object.keys(newErrors).length === 0;
+  };
+
+  const handleSubmit = async (e: FormEvent) => {
+    e.preventDefault();
+    if (loading) return;
+
+    if (!validateForm()) return;
+
+    setLoading(true);
+    setErrors({});
+    setSuccess(null);
+
+    try {
+      const { ServiceFactory } = await import('@/lib/services/ServiceFactory');
+      const serviceFactory = new ServiceFactory(process.env.NEXT_PUBLIC_API_BASE_URL || 'http://localhost:3001');
+      const authService = serviceFactory.createAuthService();
+      const result = await authService.forgotPassword({ email: formData.email });
+
+      setSuccess({
+        message: result.message,
+        magicLink: result.magicLink,
+      });
+    } catch (error) {
+      setErrors({
+        submit: error instanceof Error ? error.message : 'Failed to send reset link. Please try again.',
+      });
+      setLoading(false);
+    }
+  };
+
+  return (
+    <main className="min-h-screen bg-deep-graphite flex items-center justify-center px-4 py-12">
+      {/* Background Pattern */}
+      <div className="absolute inset-0 bg-gradient-to-br from-primary-blue/5 via-transparent to-purple-600/5" />
+      <div className="absolute inset-0 opacity-5">
+        <div className="absolute inset-0" style={{
+          backgroundImage: `url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.4'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E")`,
+        }} />
+      </div>
+
+      <div className="relative w-full max-w-md">
+        {/* Header */}
+        <div className="text-center mb-8">
+          <div className="flex h-16 w-16 items-center justify-center rounded-2xl bg-gradient-to-br from-primary-blue/20 to-purple-600/10 border border-primary-blue/30 mx-auto mb-4">
+            <Flag className="w-8 h-8 text-primary-blue" />
+          </div>
+          <Heading level={1} className="mb-2">Reset Password</Heading>
+          <p className="text-gray-400">
+            Enter your email and we'll send you a reset link
+          </p>
+        </div>
+
+        <Card className="relative overflow-hidden">
+          {/* Background accent */}
+          <div className="absolute top-0 right-0 w-32 h-32 bg-gradient-to-bl from-primary-blue/10 to-transparent rounded-bl-full" />
+
+          {!success ? (
+            <form onSubmit={handleSubmit} className="relative space-y-5">
+              {/* Email */}
+              <div>
+                <label htmlFor="email" className="block text-sm font-medium text-gray-300 mb-2">
+                  Email Address
+                </label>
+                <div className="relative">
+                  <Mail className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-500" />
+                  <Input
+                    id="email"
+                    type="email"
+                    value={formData.email}
+                    onChange={(e: ChangeEvent<HTMLInputElement>) => setFormData({ ...formData, email: e.target.value })}
+                    error={!!errors.email}
+                    errorMessage={errors.email}
+                    placeholder="you@example.com"
+                    disabled={loading}
+                    className="pl-10"
+                    autoComplete="email"
+                  />
+                </div>
+              </div>
+
+              {/* Error Message */}
+              {errors.submit && (
+                <motion.div
+                  initial={{ opacity: 0, y: -10 }}
+                  animate={{ opacity: 1, y: 0 }}
+                  className="flex items-start gap-3 p-3 rounded-lg bg-red-500/10 border border-red-500/30"
+                >
+                  <AlertCircle className="w-5 h-5 text-red-400 flex-shrink-0 mt-0.5" />
+                  <p className="text-sm text-red-400">{errors.submit}</p>
+                </motion.div>
+              )}
+
+              {/* Submit Button */}
+              <Button
+                type="submit"
+                variant="primary"
+                disabled={loading}
+                className="w-full flex items-center justify-center gap-2"
+              >
+                {loading ? (
+                  <>
+                    <div className="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin" />
+                    Sending...
+                  </>
+                ) : (
+                  <>
+                    <Shield className="w-4 h-4" />
+                    Send Reset Link
+                  </>
+                )}
+              </Button>
+
+              {/* Back to Login */}
+              <div className="text-center">
+                <Link
+                  href="/auth/login"
+                  className="text-sm text-primary-blue hover:underline flex items-center justify-center gap-1"
+                >
+                  <ArrowLeft className="w-4 h-4" />
+                  Back to Login
+                </Link>
+              </div>
+            </form>
+          ) : (
+            <motion.div
+              initial={{ opacity: 0, y: 10 }}
+              animate={{ opacity: 1, y: 0 }}
+              className="relative space-y-4"
+            >
+              <div className="flex items-start gap-3 p-4 rounded-lg bg-performance-green/10 border border-performance-green/30">
+                <CheckCircle2 className="w-6 h-6 text-performance-green flex-shrink-0 mt-0.5" />
+                <div>
+                  <p className="text-sm text-performance-green font-medium">{success.message}</p>
+                  {success.magicLink && (
+                    <div className="mt-2">
+                      <p className="text-xs text-gray-400 mb-1">Development Mode - Magic Link:</p>
+                      <div className="bg-iron-gray p-2 rounded border border-charcoal-outline">
+                        <code className="text-xs text-primary-blue break-all">
+                          {success.magicLink}
+                        </code>
+                      </div>
+                      <p className="text-[10px] text-gray-500 mt-1">
+                        In production, this would be sent via email
+                      </p>
+                    </div>
+                  )}
+                </div>
+              </div>
+
+              <Button
+                type="button"
+                variant="secondary"
+                onClick={() => router.push('/auth/login')}
+                className="w-full"
+              >
+                Return to Login
+              </Button>
+            </motion.div>
+          )}
+        </Card>
+
+        {/* Trust Indicators */}
+        <div className="mt-6 flex items-center justify-center gap-6 text-sm text-gray-500">
+          <div className="flex items-center gap-2">
+            <Shield className="w-4 h-4" />
+            <span>Secure reset process</span>
+          </div>
+          <div className="flex items-center gap-2">
+            <CheckCircle2 className="w-4 h-4" />
+            <span>15 minute expiration</span>
+          </div>
+        </div>
+
+        {/* Footer */}
+        <p className="mt-6 text-center text-xs text-gray-500">
+          Need help?{' '}
+          <Link href="/support" className="text-gray-400 hover:underline">
+            Contact support
+          </Link>
+        </p>
+      </div>
+    </main>
+  );
+}

apps/website/app/auth/login/page.tsx

@@ -73,20 +73,14 @@ export default function LoginPage() {
     setErrors({});
 
     try {
-      const response = await fetch('/api/auth/login', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({
-          email: formData.email,
-          password: formData.password,
-        }),
+      const { ServiceFactory } = await import('@/lib/services/ServiceFactory');
+      const serviceFactory = new ServiceFactory(process.env.NEXT_PUBLIC_API_BASE_URL || 'http://localhost:3001');
+      const authService = serviceFactory.createAuthService();
+      
+      await authService.login({
+        email: formData.email,
+        password: formData.password,
       });
-
-      const data = await response.json();
-
-      if (!response.ok) {
-        throw new Error(data.error || 'Login failed');
-      }
       
       // Refresh session in context so header updates immediately
       await refreshSession();
@@ -102,8 +96,12 @@ export default function LoginPage() {
   const handleDemoLogin = async () => {
     setLoading(true);
     try {
-      // Demo: Set cookie to indicate driver mode (works without OAuth)
-      document.cookie = 'gridpilot_demo_mode=driver; path=/; max-age=86400';
+      const { ServiceFactory } = await import('@/lib/services/ServiceFactory');
+      const serviceFactory = new ServiceFactory(process.env.NEXT_PUBLIC_API_BASE_URL || 'http://localhost:3001');
+      const authService = serviceFactory.createAuthService();
+      
+      await authService.demoLogin({ role: 'driver' });
+      
       await new Promise(resolve => setTimeout(resolve, 500));
       router.push(returnTo);
     } catch (error) {
@@ -299,7 +297,7 @@ export default function LoginPage() {
               className="w-full flex items-center justify-center gap-3 px-4 py-3 rounded-lg bg-gradient-to-r from-deep-graphite to-iron-gray border border-charcoal-outline text-gray-300 hover:border-primary-blue/30 transition-all disabled:opacity-50 group"
             >
               <Gamepad2 className="w-5 h-5 text-primary-blue" />
-              <span>Demo Login (iRacing)</span>
+              <span>Demo Login</span>
               <ChevronRight className="w-4 h-4 text-gray-500 group-hover:translate-x-0.5 transition-transform" />
             </motion.button>
 
@@ -315,6 +313,16 @@ export default function LoginPage() {
             </p>
           </Card>
 
+          {/* Name Immutability Notice */}
+          <div className="mt-6 p-4 rounded-lg bg-iron-gray/30 border border-charcoal-outline">
+            <div className="flex items-start gap-3">
+              <AlertCircle className="w-5 h-5 text-gray-400 flex-shrink-0 mt-0.5" />
+              <div className="text-xs text-gray-400">
+                <strong>Note:</strong> Your display name cannot be changed after signup. Please ensure it's correct when creating your account.
+              </div>
+            </div>
+          </div>
+
           {/* Footer */}
           <p className="mt-6 text-center text-xs text-gray-500">
             By signing in, you agree to our{' '}

apps/website/app/auth/reset-password/page.tsx

@@ -0,0 +1,356 @@
+'use client';
+
+import { useState, FormEvent, type ChangeEvent, useEffect } from 'react';
+import { useRouter, useSearchParams } from 'next/navigation';
+import Link from 'next/link';
+import { motion } from 'framer-motion';
+import {
+  Lock,
+  Eye,
+  EyeOff,
+  AlertCircle,
+  Flag,
+  Shield,
+  CheckCircle2,
+  ArrowLeft,
+} from 'lucide-react';
+
+import Card from '@/components/ui/Card';
+import Button from '@/components/ui/Button';
+import Input from '@/components/ui/Input';
+import Heading from '@/components/ui/Heading';
+
+interface FormErrors {
+  newPassword?: string;
+  confirmPassword?: string;
+  submit?: string;
+}
+
+interface PasswordStrength {
+  score: number;
+  label: string;
+  color: string;
+}
+
+function checkPasswordStrength(password: string): PasswordStrength {
+  let score = 0;
+  if (password.length >= 8) score++;
+  if (password.length >= 12) score++;
+  if (/[a-z]/.test(password) && /[A-Z]/.test(password)) score++;
+  if (/\d/.test(password)) score++;
+  if (/[^a-zA-Z\d]/.test(password)) score++;
+
+  if (score <= 1) return { score, label: 'Weak', color: 'bg-red-500' };
+  if (score <= 2) return { score, label: 'Fair', color: 'bg-warning-amber' };
+  if (score <= 3) return { score, label: 'Good', color: 'bg-primary-blue' };
+  return { score, label: 'Strong', color: 'bg-performance-green' };
+}
+
+export default function ResetPasswordPage() {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  
+  const [loading, setLoading] = useState(false);
+  const [showPassword, setShowPassword] = useState(false);
+  const [showConfirmPassword, setShowConfirmPassword] = useState(false);
+  const [errors, setErrors] = useState<FormErrors>({});
+  const [success, setSuccess] = useState<string | null>(null);
+  const [formData, setFormData] = useState({
+    newPassword: '',
+    confirmPassword: '',
+  });
+  const [token, setToken] = useState<string>('');
+
+  // Extract token from URL on mount
+  useEffect(() => {
+    const tokenParam = searchParams.get('token');
+    if (tokenParam) {
+      setToken(tokenParam);
+    }
+  }, [searchParams]);
+
+  const passwordStrength = checkPasswordStrength(formData.newPassword);
+
+  const passwordRequirements = [
+    { met: formData.newPassword.length >= 8, label: 'At least 8 characters' },
+    { met: /[a-z]/.test(formData.newPassword) && /[A-Z]/.test(formData.newPassword), label: 'Upper and lowercase letters' },
+    { met: /\d/.test(formData.newPassword), label: 'At least one number' },
+    { met: /[^a-zA-Z\d]/.test(formData.newPassword), label: 'At least one special character' },
+  ];
+
+  const validateForm = (): boolean => {
+    const newErrors: FormErrors = {};
+
+    if (!formData.newPassword) {
+      newErrors.newPassword = 'New password is required';
+    } else if (formData.newPassword.length < 8) {
+      newErrors.newPassword = 'Password must be at least 8 characters';
+    } else if (!/[a-z]/.test(formData.newPassword) || !/[A-Z]/.test(formData.newPassword) || !/\d/.test(formData.newPassword)) {
+      newErrors.newPassword = 'Password must contain uppercase, lowercase, and number';
+    }
+
+    if (!formData.confirmPassword) {
+      newErrors.confirmPassword = 'Please confirm your password';
+    } else if (formData.newPassword !== formData.confirmPassword) {
+      newErrors.confirmPassword = 'Passwords do not match';
+    }
+
+    if (!token) {
+      newErrors.submit = 'Invalid reset token. Please request a new reset link.';
+    }
+
+    setErrors(newErrors);
+    return Object.keys(newErrors).length === 0;
+  };
+
+  const handleSubmit = async (e: FormEvent) => {
+    e.preventDefault();
+    if (loading) return;
+
+    if (!validateForm()) return;
+
+    setLoading(true);
+    setErrors({});
+    setSuccess(null);
+
+    try {
+      const { ServiceFactory } = await import('@/lib/services/ServiceFactory');
+      const serviceFactory = new ServiceFactory(process.env.NEXT_PUBLIC_API_BASE_URL || 'http://localhost:3001');
+      const authService = serviceFactory.createAuthService();
+      const result = await authService.resetPassword({
+        token,
+        newPassword: formData.newPassword,
+      });
+
+      setSuccess(result.message);
+    } catch (error) {
+      setErrors({
+        submit: error instanceof Error ? error.message : 'Failed to reset password. Please try again.',
+      });
+      setLoading(false);
+    }
+  };
+
+  return (
+    <main className="min-h-screen bg-deep-graphite flex items-center justify-center px-4 py-12">
+      {/* Background Pattern */}
+      <div className="absolute inset-0 bg-gradient-to-br from-primary-blue/5 via-transparent to-purple-600/5" />
+      <div className="absolute inset-0 opacity-5">
+        <div className="absolute inset-0" style={{
+          backgroundImage: `url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.4'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E")`,
+        }} />
+      </div>
+
+      <div className="relative w-full max-w-md">
+        {/* Header */}
+        <div className="text-center mb-8">
+          <div className="flex h-16 w-16 items-center justify-center rounded-2xl bg-gradient-to-br from-primary-blue/20 to-purple-600/10 border border-primary-blue/30 mx-auto mb-4">
+            <Lock className="w-8 h-8 text-primary-blue" />
+          </div>
+          <Heading level={1} className="mb-2">Set New Password</Heading>
+          <p className="text-gray-400">
+            Create a strong password for your account
+          </p>
+        </div>
+
+        <Card className="relative overflow-hidden">
+          {/* Background accent */}
+          <div className="absolute top-0 right-0 w-32 h-32 bg-gradient-to-bl from-primary-blue/10 to-transparent rounded-bl-full" />
+
+          {!success ? (
+            <form onSubmit={handleSubmit} className="relative space-y-5">
+              {/* New Password */}
+              <div>
+                <label htmlFor="newPassword" className="block text-sm font-medium text-gray-300 mb-2">
+                  New Password
+                </label>
+                <div className="relative">
+                  <Lock className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-500" />
+                  <Input
+                    id="newPassword"
+                    type={showPassword ? 'text' : 'password'}
+                    value={formData.newPassword}
+                    onChange={(e: ChangeEvent<HTMLInputElement>) => setFormData({ ...formData, newPassword: e.target.value })}
+                    error={!!errors.newPassword}
+                    errorMessage={errors.newPassword}
+                    placeholder="••••••••"
+                    disabled={loading}
+                    className="pl-10 pr-10"
+                    autoComplete="new-password"
+                  />
+                  <button
+                    type="button"
+                    onClick={() => setShowPassword(!showPassword)}
+                    className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-500 hover:text-gray-300"
+                  >
+                    {showPassword ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />}
+                  </button>
+                </div>
+
+                {/* Password Strength */}
+                {formData.newPassword && (
+                  <div className="mt-3 space-y-2">
+                    <div className="flex items-center gap-2">
+                      <div className="flex-1 h-1.5 rounded-full bg-charcoal-outline overflow-hidden">
+                        <motion.div
+                          className={`h-full ${passwordStrength.color}`}
+                          initial={{ width: 0 }}
+                          animate={{ width: `${(passwordStrength.score / 5) * 100}%` }}
+                          transition={{ duration: 0.3 }}
+                        />
+                      </div>
+                      <span className={`text-xs font-medium ${
+                        passwordStrength.score <= 1 ? 'text-red-400' :
+                        passwordStrength.score <= 2 ? 'text-warning-amber' :
+                        passwordStrength.score <= 3 ? 'text-primary-blue' :
+                        'text-performance-green'
+                      }`}>
+                        {passwordStrength.label}
+                      </span>
+                    </div>
+                    <div className="grid grid-cols-2 gap-1">
+                      {passwordRequirements.map((req, index) => (
+                        <div key={index} className="flex items-center gap-1.5 text-xs">
+                          {req.met ? (
+                            <CheckCircle2 className="w-3 h-3 text-performance-green" />
+                          ) : (
+                            <AlertCircle className="w-3 h-3 text-gray-500" />
+                          )}
+                          <span className={req.met ? 'text-gray-300' : 'text-gray-500'}>
+                            {req.label}
+                          </span>
+                        </div>
+                      ))}
+                    </div>
+                  </div>
+                )}
+              </div>
+
+              {/* Confirm Password */}
+              <div>
+                <label htmlFor="confirmPassword" className="block text-sm font-medium text-gray-300 mb-2">
+                  Confirm Password
+                </label>
+                <div className="relative">
+                  <Lock className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-500" />
+                  <Input
+                    id="confirmPassword"
+                    type={showConfirmPassword ? 'text' : 'password'}
+                    value={formData.confirmPassword}
+                    onChange={(e: ChangeEvent<HTMLInputElement>) => setFormData({ ...formData, confirmPassword: e.target.value })}
+                    error={!!errors.confirmPassword}
+                    errorMessage={errors.confirmPassword}
+                    placeholder="••••••••"
+                    disabled={loading}
+                    className="pl-10 pr-10"
+                    autoComplete="new-password"
+                  />
+                  <button
+                    type="button"
+                    onClick={() => setShowConfirmPassword(!showConfirmPassword)}
+                    className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-500 hover:text-gray-300"
+                  >
+                    {showConfirmPassword ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />}
+                  </button>
+                </div>
+                {formData.confirmPassword && formData.newPassword === formData.confirmPassword && (
+                  <p className="mt-1 text-xs text-performance-green flex items-center gap-1">
+                    <CheckCircle2 className="w-3 h-3" /> Passwords match
+                  </p>
+                )}
+              </div>
+
+              {/* Error Message */}
+              {errors.submit && (
+                <motion.div
+                  initial={{ opacity: 0, y: -10 }}
+                  animate={{ opacity: 1, y: 0 }}
+                  className="flex items-start gap-3 p-3 rounded-lg bg-red-500/10 border border-red-500/30"
+                >
+                  <AlertCircle className="w-5 h-5 text-red-400 flex-shrink-0 mt-0.5" />
+                  <p className="text-sm text-red-400">{errors.submit}</p>
+                </motion.div>
+              )}
+
+              {/* Submit Button */}
+              <Button
+                type="submit"
+                variant="primary"
+                disabled={loading}
+                className="w-full flex items-center justify-center gap-2"
+              >
+                {loading ? (
+                  <>
+                    <div className="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin" />
+                    Resetting...
+                  </>
+                ) : (
+                  <>
+                    <Lock className="w-4 h-4" />
+                    Reset Password
+                  </>
+                )}
+              </Button>
+
+              {/* Back to Login */}
+              <div className="text-center">
+                <Link
+                  href="/auth/login"
+                  className="text-sm text-primary-blue hover:underline flex items-center justify-center gap-1"
+                >
+                  <ArrowLeft className="w-4 h-4" />
+                  Back to Login
+                </Link>
+              </div>
+            </form>
+          ) : (
+            <motion.div
+              initial={{ opacity: 0, y: 10 }}
+              animate={{ opacity: 1, y: 0 }}
+              className="relative space-y-4"
+            >
+              <div className="flex items-start gap-3 p-4 rounded-lg bg-performance-green/10 border border-performance-green/30">
+                <CheckCircle2 className="w-6 h-6 text-performance-green flex-shrink-0 mt-0.5" />
+                <div>
+                  <p className="text-sm text-performance-green font-medium">{success}</p>
+                  <p className="text-xs text-gray-400 mt-1">
+                    Your password has been successfully reset
+                  </p>
+                </div>
+              </div>
+
+              <Button
+                type="button"
+                variant="primary"
+                onClick={() => router.push('/auth/login')}
+                className="w-full"
+              >
+                Login with New Password
+              </Button>
+            </motion.div>
+          )}
+        </Card>
+
+        {/* Trust Indicators */}
+        <div className="mt-6 flex items-center justify-center gap-6 text-sm text-gray-500">
+          <div className="flex items-center gap-2">
+            <Shield className="w-4 h-4" />
+            <span>Encrypted & secure</span>
+          </div>
+          <div className="flex items-center gap-2">
+            <CheckCircle2 className="w-4 h-4" />
+            <span>Instant update</span>
+          </div>
+        </div>
+
+        {/* Footer */}
+        <p className="mt-6 text-center text-xs text-gray-500">
+          Need help?{' '}
+          <Link href="/support" className="text-gray-400 hover:underline">
+            Contact support
+          </Link>
+        </p>
+      </div>
+    </main>
+  );
+}

apps/website/app/auth/signup/page.tsx

@@ -32,7 +32,8 @@ import Heading from '@/components/ui/Heading';
 import { useAuth } from '@/lib/auth/AuthContext';
 
 interface FormErrors {
-  displayName?: string;
+  firstName?: string;
+  lastName?: string;
   email?: string;
   password?: string;
   confirmPassword?: string;
@@ -101,7 +102,8 @@ export default function SignupPage() {
   const [showConfirmPassword, setShowConfirmPassword] = useState(false);
   const [errors, setErrors] = useState<FormErrors>({});
   const [formData, setFormData] = useState({
-    displayName: '',
+    firstName: '',
+    lastName: '',
     email: '',
     password: '',
     confirmPassword: '',
@@ -138,10 +140,32 @@ export default function SignupPage() {
   const validateForm = (): boolean => {
     const newErrors: FormErrors = {};
 
-    if (!formData.displayName.trim()) {
-      newErrors.displayName = 'Display name is required';
-    } else if (formData.displayName.trim().length < 3) {
-      newErrors.displayName = 'Display name must be at least 3 characters';
+    // First name validation
+    const firstName = formData.firstName.trim();
+    if (!firstName) {
+      newErrors.firstName = 'First name is required';
+    } else if (firstName.length < 2) {
+      newErrors.firstName = 'First name must be at least 2 characters';
+    } else if (firstName.length > 25) {
+      newErrors.firstName = 'First name must be no more than 25 characters';
+    } else if (!/^[A-Za-z\-']+$/.test(firstName)) {
+      newErrors.firstName = 'First name can only contain letters, hyphens, and apostrophes';
+    } else if (/^(user|test|demo|guest|player)/i.test(firstName)) {
+      newErrors.firstName = 'Please use your real first name, not a nickname';
+    }
+
+    // Last name validation
+    const lastName = formData.lastName.trim();
+    if (!lastName) {
+      newErrors.lastName = 'Last name is required';
+    } else if (lastName.length < 2) {
+      newErrors.lastName = 'Last name must be at least 2 characters';
+    } else if (lastName.length > 25) {
+      newErrors.lastName = 'Last name must be no more than 25 characters';
+    } else if (!/^[A-Za-z\-']+$/.test(lastName)) {
+      newErrors.lastName = 'Last name can only contain letters, hyphens, and apostrophes';
+    } else if (/^(user|test|demo|guest|player)/i.test(lastName)) {
+      newErrors.lastName = 'Please use your real last name, not a nickname';
     }
 
     if (!formData.email.trim()) {
@@ -150,10 +174,13 @@ export default function SignupPage() {
       newErrors.email = 'Invalid email format';
     }
 
+    // Password strength validation
     if (!formData.password) {
       newErrors.password = 'Password is required';
     } else if (formData.password.length < 8) {
       newErrors.password = 'Password must be at least 8 characters';
+    } else if (!/[a-z]/.test(formData.password) || !/[A-Z]/.test(formData.password) || !/\d/.test(formData.password)) {
+      newErrors.password = 'Password must contain uppercase, lowercase, and number';
     }
 
     if (!formData.confirmPassword) {
@@ -176,21 +203,18 @@ export default function SignupPage() {
     setErrors({});
 
     try {
-      const response = await fetch('/api/auth/signup', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({
-          email: formData.email,
-          password: formData.password,
-          displayName: formData.displayName,
-        }),
+      const { ServiceFactory } = await import('@/lib/services/ServiceFactory');
+      const serviceFactory = new ServiceFactory(process.env.NEXT_PUBLIC_API_BASE_URL || 'http://localhost:3001');
+      const authService = serviceFactory.createAuthService();
+      
+      // Combine first and last name into display name
+      const displayName = `${formData.firstName} ${formData.lastName}`.trim();
+      
+      await authService.signup({
+        email: formData.email,
+        password: formData.password,
+        displayName,
       });
-
-      const data = await response.json();
-
-      if (!response.ok) {
-        throw new Error(data.error || 'Signup failed');
-      }
       
       // Refresh session in context so header updates immediately
       await refreshSession();
@@ -206,8 +230,12 @@ export default function SignupPage() {
   const handleDemoLogin = async () => {
     setLoading(true);
     try {
-      // Demo: Set cookie to indicate driver mode (works without OAuth)
-      document.cookie = 'gridpilot_demo_mode=driver; path=/; max-age=86400';
+      const { ServiceFactory } = await import('@/lib/services/ServiceFactory');
+      const serviceFactory = new ServiceFactory(process.env.NEXT_PUBLIC_API_BASE_URL || 'http://localhost:3001');
+      const authService = serviceFactory.createAuthService();
+      
+      await authService.demoLogin({ role: 'driver' });
+      
       await new Promise(resolve => setTimeout(resolve, 500));
       router.push(returnTo === '/onboarding' ? '/dashboard' : returnTo);
     } catch {
@@ -337,27 +365,57 @@ export default function SignupPage() {
             <div className="absolute top-0 right-0 w-32 h-32 bg-gradient-to-bl from-primary-blue/10 to-transparent rounded-bl-full" />
 
             <form onSubmit={handleSubmit} className="relative space-y-4">
-              {/* Display Name */}
+              {/* First Name */}
               <div>
-                <label htmlFor="displayName" className="block text-sm font-medium text-gray-300 mb-2">
-                  Display Name
+                <label htmlFor="firstName" className="block text-sm font-medium text-gray-300 mb-2">
+                  First Name
                 </label>
                 <div className="relative">
                   <User className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-500" />
                   <Input
-                    id="displayName"
+                    id="firstName"
                     type="text"
-                    value={formData.displayName}
-                    onChange={(e: ChangeEvent<HTMLInputElement>) => setFormData({ ...formData, displayName: e.target.value })}
-                    error={!!errors.displayName}
-                    errorMessage={errors.displayName}
-                    placeholder="SpeedyRacer42"
+                    value={formData.firstName}
+                    onChange={(e: ChangeEvent<HTMLInputElement>) => setFormData({ ...formData, firstName: e.target.value })}
+                    error={!!errors.firstName}
+                    errorMessage={errors.firstName}
+                    placeholder="John"
                     disabled={loading}
                     className="pl-10"
-                    autoComplete="username"
+                    autoComplete="given-name"
                   />
                 </div>
-                <p className="mt-1 text-xs text-gray-500">This is how other drivers will see you</p>
+              </div>
+
+              {/* Last Name */}
+              <div>
+                <label htmlFor="lastName" className="block text-sm font-medium text-gray-300 mb-2">
+                  Last Name
+                </label>
+                <div className="relative">
+                  <User className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-500" />
+                  <Input
+                    id="lastName"
+                    type="text"
+                    value={formData.lastName}
+                    onChange={(e: ChangeEvent<HTMLInputElement>) => setFormData({ ...formData, lastName: e.target.value })}
+                    error={!!errors.lastName}
+                    errorMessage={errors.lastName}
+                    placeholder="Smith"
+                    disabled={loading}
+                    className="pl-10"
+                    autoComplete="family-name"
+                  />
+                </div>
+                <p className="mt-1 text-xs text-gray-500">Your name will be used as-is and cannot be changed later</p>
+              </div>
+
+              {/* Name Immutability Warning */}
+              <div className="flex items-start gap-3 p-3 rounded-lg bg-warning-amber/10 border border-warning-amber/30">
+                <AlertCircle className="w-5 h-5 text-warning-amber flex-shrink-0 mt-0.5" />
+                <div className="text-sm text-warning-amber">
+                  <strong>Important:</strong> Your name cannot be changed after signup. Please ensure it's correct.
+                </div>
               </div>
 
               {/* Email */}
@@ -529,7 +587,7 @@ export default function SignupPage() {
               </div>
             </div>
 
-            {/* iRacing Signup */}
+            {/* Demo Login */}
             <motion.button
               type="button"
               onClick={handleDemoLogin}
@@ -539,7 +597,7 @@ export default function SignupPage() {
               className="w-full flex items-center justify-center gap-3 px-4 py-3 rounded-lg bg-gradient-to-r from-deep-graphite to-iron-gray border border-charcoal-outline text-gray-300 hover:border-primary-blue/30 transition-all disabled:opacity-50 group"
             >
               <Gamepad2 className="w-5 h-5 text-primary-blue" />
-              <span>Demo Login (iRacing)</span>
+              <span>Demo Login</span>
               <ChevronRight className="w-4 h-4 text-gray-500 group-hover:translate-x-0.5 transition-transform" />
             </motion.button>
 

apps/website/app/layout.tsx

@@ -1,16 +1,15 @@
-import React from 'react';
-import type { Metadata, Viewport } from 'next';
+import AlphaFooter from '@/components/alpha/AlphaFooter';
+import { AlphaNav } from '@/components/alpha/AlphaNav';
+import DevToolbar from '@/components/dev/DevToolbar';
+import NotificationProvider from '@/components/notifications/NotificationProvider';
+import { AuthProvider } from '@/lib/auth/AuthContext';
+import { getAppMode } from '@/lib/mode';
+import { ServiceProvider } from '@/lib/services/ServiceProvider';
+import { Metadata, Viewport } from 'next';
 import Image from 'next/image';
 import Link from 'next/link';
+import React from 'react';
 import './globals.css';
-import { getAppMode } from '@/lib/mode';
-import { AlphaNav } from '@/components/alpha/AlphaNav';
-import AlphaBanner from '@/components/alpha/AlphaBanner';
-import AlphaFooter from '@/components/alpha/AlphaFooter';
-import { AuthProvider } from '@/lib/auth/AuthContext';
-import NotificationProvider from '@/components/notifications/NotificationProvider';
-import DevToolbar from '@/components/dev/DevToolbar';
-import { ServiceProvider } from '@/lib/services/ServiceProvider';
 
 export const dynamic = 'force-dynamic';
 
@@ -23,8 +22,8 @@ export const viewport: Viewport = {
 };
 
 export const metadata: Metadata = {
-  title: 'GridPilot - iRacing League Racing Platform',
-  description: 'The dedicated home for serious iRacing leagues. Automatic results, standings, team racing, and professional race control.',
+  title: 'GridPilot - SimRacing Platform',
+  description: 'The dedicated home for serious sim racing leagues. Automatic results, standings, team racing, and professional race control.',
   themeColor: '#0a0a0a',
   appleWebApp: {
     capable: true,
@@ -66,7 +65,6 @@ export default async function RootLayout({
             <AuthProvider initialSession={session}>
               <NotificationProvider>
                 <AlphaNav />
-                <AlphaBanner />
                 <main className="flex-1 max-w-7xl mx-auto px-6 py-8 w-full">
                   {children}
                 </main>