diff --git a/src/app/auth/page.tsx b/src/app/auth/page.tsx new file mode 100644 index 0000000..ec6a4c5 --- /dev/null +++ b/src/app/auth/page.tsx @@ -0,0 +1,317 @@ +"use client"; + +import { useState } from "react"; +import { useRouter } from "next/navigation"; +import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider"; +import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered'; +import FooterBase from '@/components/sections/footer/FooterBase'; +import { Mail, Lock, Eye, EyeOff, LogIn, UserPlus } from 'lucide-react'; + +export default function AuthPage() { + const router = useRouter(); + const [isLogin, setIsLogin] = useState(true); + const [showPassword, setShowPassword] = useState(false); + const [formData, setFormData] = useState({ + email: '', + password: '', + confirmPassword: '', + name: '' + }); + const [error, setError] = useState(''); + const [loading, setLoading] = useState(false); + + const handleInputChange = (e: React.ChangeEvent) => { + const { name, value } = e.target; + setFormData(prev => ({ + ...prev, + [name]: value + })); + setError(''); + }; + + const validateForm = () => { + if (!formData.email) { + setError('Email é obrigatório'); + return false; + } + if (!formData.password) { + setError('Senha é obrigatória'); + return false; + } + if (!isLogin) { + if (!formData.name) { + setError('Nome é obrigatório'); + return false; + } + if (formData.password !== formData.confirmPassword) { + setError('As senhas não coincidem'); + return false; + } + if (formData.password.length < 6) { + setError('Senha deve ter no mínimo 6 caracteres'); + return false; + } + } + return true; + }; + + const handleSubmit = async (e: React.FormEvent) => { + e.preventDefault(); + + if (!validateForm()) { + return; + } + + setLoading(true); + + try { + const endpoint = isLogin ? '/api/auth/login' : '/api/auth/register'; + const payload = isLogin + ? { email: formData.email, password: formData.password } + : { name: formData.name, email: formData.email, password: formData.password }; + + const response = await fetch(endpoint, { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + }, + body: JSON.stringify(payload), + }); + + const data = await response.json(); + + if (!response.ok) { + setError(data.message || 'Erro ao processar requisição'); + setLoading(false); + return; + } + + // Store token and user data + localStorage.setItem('token', data.token); + localStorage.setItem('user', JSON.stringify(data.user)); + + // Redirect to dashboard + router.push('/dashboard'); + } catch (err) { + setError('Erro de conexão. Tente novamente.'); + setLoading(false); + } + }; + + return ( + + + +
+
+ {/* Header */} +
+

+ {isLogin ? 'Bem-vindo de Volta' : 'Crie sua Conta'} +

+

+ {isLogin ? 'Acesse sua jornada de fitness' : 'Comece sua transformação hoje'} +

+
+ + {/* Form Card */} +
+ {error && ( +
+

{error}

+
+ )} + +
+ {/* Name field (Registration only) */} + {!isLogin && ( +
+ + +
+ )} + + {/* Email field */} +
+ +
+ + +
+
+ + {/* Password field */} +
+ +
+ + + +
+
+ + {/* Confirm Password field (Registration only) */} + {!isLogin && ( +
+ +
+ + +
+
+ )} + + {/* Submit Button */} + +
+ + {/* Toggle Login/Register */} +
+

+ {isLogin ? 'Não tem conta? ' : 'Já tem conta? '} + +

+
+
+ + {/* Security Note */} +

+ Seu email e senha estão protegidos com criptografia de ponta a ponta. +

+
+
+ + + + ); +} \ No newline at end of file