Add user authentication system and backend integration

Co-authored-by: Snozxyx <150821778+Snozxyx@users.noreply.github.com>

Author: Copilot

tatakai-app/src/components/auth/AuthForm.tsx

@@ -0,0 +1,232 @@
+'use client';
+
+import React, { useState } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Alert, AlertDescription } from '@/components/ui/alert';
+import { Eye, EyeOff, User, Mail, Lock } from 'lucide-react';
+import { useAuth } from '@/lib/auth/auth-context';
+
+interface AuthFormProps {
+  isOpen: boolean;
+  onClose: () => void;
+  defaultMode?: 'login' | 'register';
+}
+
+const AuthForm: React.FC<AuthFormProps> = ({ isOpen, onClose, defaultMode = 'login' }) => {
+  const [mode, setMode] = useState<'login' | 'register'>(defaultMode);
+  const [showPassword, setShowPassword] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  
+  const [formData, setFormData] = useState({
+    username: '',
+    email: '',
+    password: '',
+    displayName: '',
+  });
+
+  const { login, register } = useAuth();
+
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const { name, value } = e.target;
+    setFormData(prev => ({ ...prev, [name]: value }));
+    setError(null);
+  };
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setIsLoading(true);
+    setError(null);
+
+    try {
+      let response;
+      
+      if (mode === 'login') {
+        response = await login(formData.email, formData.password);
+      } else {
+        response = await register({
+          username: formData.username,
+          email: formData.email,
+          password: formData.password,
+          displayName: formData.displayName || formData.username,
+        });
+      }
+
+      if (response.success) {
+        onClose();
+        setFormData({ username: '', email: '', password: '', displayName: '' });
+      } else {
+        setError(response.message || 'An error occurred');
+      }
+    } catch (error: unknown) {
+      const errorMessage = error instanceof Error ? error.message : 'An error occurred';
+      setError(errorMessage);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const switchMode = () => {
+    setMode(mode === 'login' ? 'register' : 'login');
+    setError(null);
+    setFormData({ username: '', email: '', password: '', displayName: '' });
+  };
+
+  if (!isOpen) return null;
+
+  return (
+    <AnimatePresence>
+      <motion.div
+        initial={{ opacity: 0 }}
+        animate={{ opacity: 1 }}
+        exit={{ opacity: 0 }}
+        className="fixed inset-0 bg-black/80 backdrop-blur-sm z-50 flex items-center justify-center p-4"
+        onClick={onClose}
+      >
+        <motion.div
+          initial={{ opacity: 0, scale: 0.95, y: 20 }}
+          animate={{ opacity: 1, scale: 1, y: 0 }}
+          exit={{ opacity: 0, scale: 0.95, y: 20 }}
+          className="w-full max-w-md"
+          onClick={(e) => e.stopPropagation()}
+        >
+          <Card className="bg-gray-900/95 border-gray-700/50 backdrop-blur-lg">
+            <CardHeader className="text-center">
+              <CardTitle className="text-2xl font-bold text-white">
+                {mode === 'login' ? 'Welcome Back' : 'Join Tatakai'}
+              </CardTitle>
+              <CardDescription className="text-gray-400">
+                {mode === 'login' 
+                  ? 'Sign in to your account to continue watching' 
+                  : 'Create an account to track your progress and favorites'
+                }
+              </CardDescription>
+            </CardHeader>
+            
+            <CardContent className="space-y-6">
+              {error && (
+                <Alert className="bg-red-500/10 border-red-500/30 text-red-400">
+                  <AlertDescription>{error}</AlertDescription>
+                </Alert>
+              )}
+
+              <form onSubmit={handleSubmit} className="space-y-4">
+                {mode === 'register' && (
+                  <div className="space-y-2">
+                    <Label htmlFor="username" className="text-gray-300">Username</Label>
+                    <div className="relative">
+                      <User className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
+                      <Input
+                        id="username"
+                        name="username"
+                        type="text"
+                        placeholder="Choose a username"
+                        value={formData.username}
+                        onChange={handleInputChange}
+                        className="pl-10 bg-gray-800/50 border-gray-600 text-white placeholder-gray-400"
+                        required
+                      />
+                    </div>
+                  </div>
+                )}
+
+                <div className="space-y-2">
+                  <Label htmlFor="email" className="text-gray-300">Email</Label>
+                  <div className="relative">
+                    <Mail className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
+                    <Input
+                      id="email"
+                      name="email"
+                      type="email"
+                      placeholder="Enter your email"
+                      value={formData.email}
+                      onChange={handleInputChange}
+                      className="pl-10 bg-gray-800/50 border-gray-600 text-white placeholder-gray-400"
+                      required
+                    />
+                  </div>
+                </div>
+
+                <div className="space-y-2">
+                  <Label htmlFor="password" className="text-gray-300">Password</Label>
+                  <div className="relative">
+                    <Lock className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
+                    <Input
+                      id="password"
+                      name="password"
+                      type={showPassword ? 'text' : 'password'}
+                      placeholder="Enter your password"
+                      value={formData.password}
+                      onChange={handleInputChange}
+                      className="pl-10 pr-10 bg-gray-800/50 border-gray-600 text-white placeholder-gray-400"
+                      required
+                      minLength={6}
+                    />
+                    <button
+                      type="button"
+                      onClick={() => setShowPassword(!showPassword)}
+                      className="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-gray-300"
+                    >
+                      {showPassword ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />}
+                    </button>
+                  </div>
+                </div>
+
+                {mode === 'register' && (
+                  <div className="space-y-2">
+                    <Label htmlFor="displayName" className="text-gray-300">Display Name (Optional)</Label>
+                    <div className="relative">
+                      <User className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
+                      <Input
+                        id="displayName"
+                        name="displayName"
+                        type="text"
+                        placeholder="How others will see you"
+                        value={formData.displayName}
+                        onChange={handleInputChange}
+                        className="pl-10 bg-gray-800/50 border-gray-600 text-white placeholder-gray-400"
+                      />
+                    </div>
+                  </div>
+                )}
+
+                <Button
+                  type="submit"
+                  className="w-full bg-rose-500 hover:bg-rose-600 text-white"
+                  disabled={isLoading}
+                >
+                  {isLoading ? (
+                    <div className="flex items-center space-x-2">
+                      <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-white"></div>
+                      <span>{mode === 'login' ? 'Signing In...' : 'Creating Account...'}</span>
+                    </div>
+                  ) : (
+                    mode === 'login' ? 'Sign In' : 'Create Account'
+                  )}
+                </Button>
+              </form>
+
+              <div className="text-center">
+                <p className="text-gray-400">
+                  {mode === 'login' ? "Don't have an account?" : "Already have an account?"}
+                  <button
+                    onClick={switchMode}
+                    className="ml-2 text-rose-400 hover:text-rose-300 font-medium"
+                  >
+                    {mode === 'login' ? 'Sign Up' : 'Sign In'}
+                  </button>
+                </p>
+              </div>
+            </CardContent>
+          </Card>
+        </motion.div>
+      </motion.div>
+    </AnimatePresence>
+  );
+};
+
+export default AuthForm;

tatakai-app/src/components/ui/label.tsx

@@ -0,0 +1,19 @@
+import * as React from "react"
+import { cn } from "@/lib/utils"
+
+const Label = React.forwardRef<
+  HTMLLabelElement,
+  React.ComponentProps<"label">
+>(({ className, ...props }, ref) => (
+  <label
+    ref={ref}
+    className={cn(
+      "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+      className
+    )}
+    {...props}
+  />
+))
+Label.displayName = "Label"
+
+export { Label }

tatakai-app/src/lib/auth/auth-context.tsx

@@ -0,0 +1,132 @@
+'use client';
+
+import React, { createContext, useContext, useEffect, useState } from 'react';
+import BackendAPI, { type User, type AuthResponse } from './backend-api';
+
+interface AuthContextType {
+  user: User | null;
+  isLoading: boolean;
+  isAuthenticated: boolean;
+  login: (email: string, password: string) => Promise<AuthResponse>;
+  register: (userData: {
+    username: string;
+    email: string;
+    password: string;
+    displayName?: string;
+  }) => Promise<AuthResponse>;
+  logout: () => void;
+  updateProfile: (profileData: Partial<User['profile']>) => Promise<void>;
+  refreshUser: () => Promise<void>;
+}
+
+const AuthContext = createContext<AuthContextType | undefined>(undefined);
+
+export const useAuth = () => {
+  const context = useContext(AuthContext);
+  if (context === undefined) {
+    throw new Error('useAuth must be used within an AuthProvider');
+  }
+  return context;
+};
+
+export const AuthProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+  const [user, setUser] = useState<User | null>(null);
+  const [isLoading, setIsLoading] = useState(true);
+
+  // Check if user is authenticated on mount
+  useEffect(() => {
+    const token = localStorage.getItem('auth_token');
+    if (token) {
+      refreshUser();
+    } else {
+      setIsLoading(false);
+    }
+  }, []);
+
+  const refreshUser = async () => {
+    try {
+      setIsLoading(true);
+      const response = await BackendAPI.getCurrentUser();
+      if (response.success && response.data) {
+        setUser(response.data.user);
+      } else {
+        // Token might be invalid, clear it
+        localStorage.removeItem('auth_token');
+        setUser(null);
+      }
+    } catch (error) {
+      console.error('Failed to refresh user:', error);
+      localStorage.removeItem('auth_token');
+      setUser(null);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const login = async (email: string, password: string): Promise<AuthResponse> => {
+    try {
+      const response = await BackendAPI.login({ email, password });
+      
+      if (response.success && response.data) {
+        localStorage.setItem('auth_token', response.data.token);
+        setUser(response.data.user);
+      }
+      
+      return response;
+    } catch (error) {
+      console.error('Login error:', error);
+      throw error;
+    }
+  };
+
+  const register = async (userData: {
+    username: string;
+    email: string;
+    password: string;
+    displayName?: string;
+  }): Promise<AuthResponse> => {
+    try {
+      const response = await BackendAPI.register(userData);
+      
+      if (response.success && response.data) {
+        localStorage.setItem('auth_token', response.data.token);
+        setUser(response.data.user);
+      }
+      
+      return response;
+    } catch (error) {
+      console.error('Registration error:', error);
+      throw error;
+    }
+  };
+
+  const logout = () => {
+    localStorage.removeItem('auth_token');
+    setUser(null);
+  };
+
+  const updateProfile = async (profileData: Partial<User['profile']>) => {
+    try {
+      const response = await BackendAPI.updateProfile(profileData);
+      if (response.success && response.data) {
+        setUser(response.data.user);
+      }
+    } catch (error) {
+      console.error('Update profile error:', error);
+      throw error;
+    }
+  };
+
+  const value = {
+    user,
+    isLoading,
+    isAuthenticated: !!user,
+    login,
+    register,
+    logout,
+    updateProfile,
+    refreshUser,
+  };
+
+  return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;
+};