Update src/app/auth/register/page.tsx

src/app/auth/register/page.tsx

@@ -2,49 +2,73 @@
 
 import { useState } from "react";
 import { useRouter } from "next/navigation";
+import Link from "next/link";
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
 import FooterBase from '@/components/sections/footer/FooterBase';
-import Input from '@/components/form/Input';
-import ButtonDirectionalHover from '@/components/button/ButtonDirectionalHover/ButtonDirectionalHover';
-import { Mail, Lock, User, UserPlus } from 'lucide-react';
+import { Mail, Lock, User, Eye, EyeOff, Check } from 'lucide-react';
 
 export default function RegisterPage() {
   const router = useRouter();
-  const [name, setName] = useState("");
-  const [email, setEmail] = useState("");
-  const [password, setPassword] = useState("");
-  const [confirmPassword, setConfirmPassword] = useState("");
+  const [formData, setFormData] = useState({
+    name: "",    email: "",    password: "",    confirmPassword: ""});
+  const [showPassword, setShowPassword] = useState(false);
+  const [showConfirm, setShowConfirm] = useState(false);
   const [error, setError] = useState("");
-  const [isLoading, setIsLoading] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const [agreedToTerms, setAgreedToTerms] = useState(false);
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const { name, value } = e.target;
+    setFormData((prev) => ({ ...prev, [name]: value }));
+  };
 
   const handleRegister = async (e: React.FormEvent) => {
     e.preventDefault();
     setError("");
 
-    if (password !== confirmPassword) {
-      setError("Senhas não correspondem");
+    if (!agreedToTerms) {
+      setError("Você deve concordar com os Termos e Condições");
       return;
     }
 
-    setIsLoading(true);
+    if (formData.password !== formData.confirmPassword) {
+      setError("As senhas não conferem");
+      return;
+    }
+
+    if (formData.password.length < 8) {
+      setError("A senha deve ter pelo menos 8 caracteres");
+      return;
+    }
+
+    setLoading(true);
 
     try {
       const response = await fetch("/api/auth/register", {
         method: "POST",        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ name, email, password }),
+        body: JSON.stringify({
+          name: formData.name,
+          email: formData.email,
+          password: formData.password,
+        }),
       });
 
       if (!response.ok) {
         const data = await response.json();
-        throw new Error(data.message || "Registration failed");
+        setError(data.message || "Falha ao registrar");
+        return;
       }
 
-      await router.push("/auth/login?registered=true");
-    } catch (err: any) {
-      setError(err.message);
+      const data = await response.json();
+      localStorage.setItem("authToken", data.token);
+      localStorage.setItem("user", JSON.stringify(data.user));
+      router.push("/dashboard");
+    } catch (err) {
+      setError("Erro ao conectar ao servidor");
+      console.error(err);
     } finally {
-      setIsLoading(false);
+      setLoading(false);
     }
   };
 
@@ -64,123 +88,144 @@ export default function RegisterPage() {
       <div id="nav" data-section="nav">
         <NavbarStyleCentered
           navItems={[
-            { name: "Home", id: "/" },
+            { name: "Dashboard", id: "/dashboard" },
             { name: "Treino", id: "training" },
             { name: "Nutrição", id: "nutrition" },
+            { name: "Comunidade", id: "community" },
+            { name: "Perfil", id: "profile" }
           ]}
-          button={{ text: "Login", href: "/auth/login" }}
+          button={{ text: "Entrar", href: "/auth/login" }}
           brandName="FitFlow Pro"
         />
       </div>
 
-      <div className="min-h-[calc(100vh-200px)] flex items-center justify-center py-20 px-4">
+      <div className="min-h-screen flex items-center justify-center px-4 py-20">
         <div className="w-full max-w-md">
-          <div className="bg-card rounded-2xl p-8 shadow-lg border border-accent/20">
-            <div className="mb-8 text-center">
-              <div className="flex items-center justify-center mb-4 gap-2">
-                <UserPlus className="w-8 h-8 text-primary-cta" />
-                <h1 className="text-3xl font-extrabold text-foreground">Registrar</h1>
-              </div>
-              <p className="text-foreground/70 text-sm">Crie sua conta FitFlow Pro</p>
-            </div>
+          <div className="bg-card rounded-2xl p-8 shadow-lg">
+            <h1 className="text-3xl font-bold text-center mb-2">Registre-se</h1>
+            <p className="text-center text-foreground/60 mb-8">Comece sua transformação com FitFlow Pro</p>
 
-            <form onSubmit={handleRegister} className="space-y-5">
+            {error && (
+              <div className="bg-red-500/10 border border-red-500 text-red-500 px-4 py-3 rounded-lg mb-6">
+                {error}
+              </div>
+            )}
+
+            <form onSubmit={handleRegister} className="space-y-6">
               <div>
-                <label className="block text-sm font-medium text-foreground mb-2">
-                  Nome Completo
-                </label>
+                <label className="block text-sm font-medium mb-2">Nome Completo</label>
                 <div className="relative">
-                  <User className="absolute left-3 top-3 w-5 h-5 text-accent/50" />
-                  <Input
-                    value={name}
-                    onChange={setName}
+                  <User className="absolute left-3 top-3 w-5 h-5 text-foreground/40" />
+                  <input
                     type="text"
+                    name="name"
+                    value={formData.name}
+                    onChange={handleChange}
                     placeholder="Seu nome completo"
                     required
-                    disabled={isLoading}
-                    className="pl-10"
+                    className="w-full pl-10 pr-4 py-3 border border-foreground/20 rounded-lg bg-background focus:outline-none focus:ring-2 focus:ring-primary-cta"
                   />
                 </div>
               </div>
 
               <div>
-                <label className="block text-sm font-medium text-foreground mb-2">
-                  Email
-                </label>
+                <label className="block text-sm font-medium mb-2">Email</label>
                 <div className="relative">
-                  <Mail className="absolute left-3 top-3 w-5 h-5 text-accent/50" />
-                  <Input
-                    value={email}
-                    onChange={setEmail}
+                  <Mail className="absolute left-3 top-3 w-5 h-5 text-foreground/40" />
+                  <input
                     type="email"
+                    name="email"
+                    value={formData.email}
+                    onChange={handleChange}
                     placeholder="seu.email@exemplo.com"
                     required
-                    disabled={isLoading}
-                    className="pl-10"
+                    className="w-full pl-10 pr-4 py-3 border border-foreground/20 rounded-lg bg-background focus:outline-none focus:ring-2 focus:ring-primary-cta"
                   />
                 </div>
               </div>
 
               <div>
-                <label className="block text-sm font-medium text-foreground mb-2">
-                  Senha
-                </label>
+                <label className="block text-sm font-medium mb-2">Senha</label>
                 <div className="relative">
-                  <Lock className="absolute left-3 top-3 w-5 h-5 text-accent/50" />
-                  <Input
-                    value={password}
-                    onChange={setPassword}
-                    type="password"
-                    placeholder="Sua senha segura"
+                  <Lock className="absolute left-3 top-3 w-5 h-5 text-foreground/40" />
+                  <input
+                    type={showPassword ? "text" : "password"}
+                    name="password"
+                    value={formData.password}
+                    onChange={handleChange}
+                    placeholder="Mínimo 8 caracteres"
                     required
-                    disabled={isLoading}
-                    className="pl-10"
+                    className="w-full pl-10 pr-10 py-3 border border-foreground/20 rounded-lg bg-background focus:outline-none focus:ring-2 focus:ring-primary-cta"
                   />
+                  <button
+                    type="button"
+                    onClick={() => setShowPassword(!showPassword)}
+                    className="absolute right-3 top-3 text-foreground/40"
+                  >
+                    {showPassword ? (
+                      <EyeOff className="w-5 h-5" />
+                    ) : (
+                      <Eye className="w-5 h-5" />
+                    )}
+                  </button>
                 </div>
               </div>
 
               <div>
-                <label className="block text-sm font-medium text-foreground mb-2">
-                  Confirmar Senha
-                </label>
+                <label className="block text-sm font-medium mb-2">Confirmar Senha</label>
                 <div className="relative">
-                  <Lock className="absolute left-3 top-3 w-5 h-5 text-accent/50" />
-                  <Input
-                    value={confirmPassword}
-                    onChange={setConfirmPassword}
-                    type="password"
+                  <Lock className="absolute left-3 top-3 w-5 h-5 text-foreground/40" />
+                  <input
+                    type={showConfirm ? "text" : "password"}
+                    name="confirmPassword"
+                    value={formData.confirmPassword}
+                    onChange={handleChange}
                     placeholder="Confirme sua senha"
                     required
-                    disabled={isLoading}
-                    className="pl-10"
+                    className="w-full pl-10 pr-10 py-3 border border-foreground/20 rounded-lg bg-background focus:outline-none focus:ring-2 focus:ring-primary-cta"
                   />
+                  <button
+                    type="button"
+                    onClick={() => setShowConfirm(!showConfirm)}
+                    className="absolute right-3 top-3 text-foreground/40"
+                  >
+                    {showConfirm ? (
+                      <EyeOff className="w-5 h-5" />
+                    ) : (
+                      <Eye className="w-5 h-5" />
+                    )}
+                  </button>
                 </div>
               </div>
 
-              {error && (
-                <div className="p-4 bg-red-500/10 border border-red-500/30 rounded-lg">
-                  <p className="text-red-600 text-sm font-medium">{error}</p>
-                </div>
-              )}
-
-              <div className="flex gap-3">
-                <ButtonDirectionalHover
-                  text={isLoading ? "Registrando..." : "Criar Conta"}
-                  onClick={() => handleRegister(new Event('submit') as unknown as React.FormEvent)}
-                  disabled={isLoading}
-                  className="flex-1"
+              <div className="flex items-start space-x-3">
+                <input
+                  type="checkbox"
+                  id="terms"
+                  checked={agreedToTerms}
+                  onChange={(e) => setAgreedToTerms(e.target.checked)}
+                  className="mt-1 w-5 h-5 rounded cursor-pointer"
                 />
+                <label htmlFor="terms" className="text-sm text-foreground/60 cursor-pointer">
+                  Concordo com os <Link href="/terms" className="text-primary-cta hover:underline">Termos e Condições</Link> e a <Link href="/privacy" className="text-primary-cta hover:underline">Política de Privacidade</Link>
+                </label>
               </div>
+
+              <button
+                type="submit"
+                disabled={loading}
+                className="w-full bg-primary-cta text-white py-3 rounded-lg font-semibold hover:opacity-90 disabled:opacity-50 transition"
+              >
+                {loading ? "Registrando..." : "Criar Conta"}
+              </button>
             </form>
 
-            <div className="mt-6 pt-6 border-t border-accent/20 text-center">
-              <p className="text-foreground/70 text-sm">
-                Já tem conta?{" "}
-                <a href="/auth/login" className="text-primary-cta hover:text-primary-cta/80 font-semibold">
-                  Faça login
-                </a>
-              </p>
-            </div>
+            <p className="text-center mt-6 text-foreground/60">
+              Já tem uma conta?{" "}
+              <Link href="/auth/login" className="text-primary-cta font-semibold hover:underline">
+                Faça login aqui
+              </Link>
+            </p>
           </div>
         </div>
       </div>
@@ -190,16 +235,26 @@ export default function RegisterPage() {
           columns={[
             {
               title: "Produto",              items: [
-                { label: "Dashboard", href: "dashboard" },
+                { label: "Dashboard", href: "/dashboard" },
                 { label: "Treino", href: "training" },
                 { label: "Nutrição", href: "nutrition" },
+                { label: "Cardio Hub", href: "cardio" }
+              ]
+            },
+            {
+              title: "Comunidade",              items: [
+                { label: "Comunidade", href: "community" },
+                { label: "Perfil", href: "profile" },
+                { label: "Rankings", href: "rankings" },
+                { label: "Blog", href: "blog" }
               ]
             },
             {
               title: "Empresa",              items: [
-                { label: "Sobre", href: "/" },
+                { label: "Sobre", href: "about" },
                 { label: "Contato", href: "contact" },
                 { label: "Privacidade", href: "privacy" },
+                { label: "Termos", href: "terms" }
               ]
             }
           ]}
@@ -209,4 +264,4 @@ export default function RegisterPage() {
       </div>
     </ThemeProvider>
   );
-}
+}