From 6e7b37883f593d52780941c4e8aea09108ef51ec Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Wed, 11 Mar 2026 20:24:16 +0000
Subject: [PATCH] Add src/app/auth/register/page.tsx

---
 src/app/auth/register/page.tsx | 212 +++++++++++++++++++++++++++++++++
 1 file changed, 212 insertions(+)
 create mode 100644 src/app/auth/register/page.tsx

diff --git a/src/app/auth/register/page.tsx b/src/app/auth/register/page.tsx
new file mode 100644
index 0000000..d23541a
--- /dev/null
+++ b/src/app/auth/register/page.tsx
@@ -0,0 +1,212 @@
+"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 Input from '@/components/form/Input';
+import ButtonDirectionalHover from '@/components/button/ButtonDirectionalHover/ButtonDirectionalHover';
+import { Mail, Lock, User, UserPlus } 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 [error, setError] = useState("");
+  const [isLoading, setIsLoading] = useState(false);
+
+  const handleRegister = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setError("");
+
+    if (password !== confirmPassword) {
+      setError("Senhas não correspondem");
+      return;
+    }
+
+    setIsLoading(true);
+
+    try {
+      const response = await fetch("/api/auth/register", {
+        method: "POST",        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ name, email, password }),
+      });
+
+      if (!response.ok) {
+        const data = await response.json();
+        throw new Error(data.message || "Registration failed");
+      }
+
+      router.push("/auth/login?registered=true");
+    } catch (err: any) {
+      setError(err.message);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <ThemeProvider
+      defaultButtonVariant="elastic-effect"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="pill"
+      contentWidth="smallMedium"
+      sizing="mediumSizeLargeTitles"
+      background="blurBottom"
+      cardStyle="gradient-bordered"
+      primaryButtonStyle="flat"
+      secondaryButtonStyle="glass"
+      headingFontWeight="extrabold"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarStyleCentered
+          navItems={[
+            { name: "Home", id: "/" },
+            { name: "Treino", id: "training" },
+            { name: "Nutrição", id: "nutrition" },
+          ]}
+          button={{ text: "Login", 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="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>
+
+            <form onSubmit={handleRegister} className="space-y-5">
+              <div>
+                <label className="block text-sm font-medium text-foreground 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}
+                    type="text"
+                    placeholder="Seu nome completo"
+                    required
+                    disabled={isLoading}
+                    className="pl-10"
+                  />
+                </div>
+              </div>
+
+              <div>
+                <label className="block text-sm font-medium text-foreground 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}
+                    type="email"
+                    placeholder="seu.email@exemplo.com"
+                    required
+                    disabled={isLoading}
+                    className="pl-10"
+                  />
+                </div>
+              </div>
+
+              <div>
+                <label className="block text-sm font-medium text-foreground 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"
+                    required
+                    disabled={isLoading}
+                    className="pl-10"
+                  />
+                </div>
+              </div>
+
+              <div>
+                <label className="block text-sm font-medium text-foreground 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"
+                    placeholder="Confirme sua senha"
+                    required
+                    disabled={isLoading}
+                    className="pl-10"
+                  />
+                </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}
+                  disabled={isLoading}
+                  className="flex-1"
+                />
+              </div>
+            </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>
+          </div>
+        </div>
+      </div>
+
+      <div id="footer" data-section="footer">
+        <FooterBase
+          columns={[
+            {
+              title: "Produto",              items: [
+                { label: "Dashboard", href: "dashboard" },
+                { label: "Treino", href: "training" },
+                { label: "Nutrição", href: "nutrition" },
+              ]
+            },
+            {
+              title: "Empresa",              items: [
+                { label: "Sobre", href: "/" },
+                { label: "Contato", href: "contact" },
+                { label: "Privacidade", href: "privacy" },
+              ]
+            }
+          ]}
+          logoText="FitFlow Pro"
+          copyrightText="© 2025 FitFlow Pro. Todos os direitos reservados."
+        />
+      </div>
+    </ThemeProvider>
+  );
+}