bender/bd539cad-e5a1-45ab-8774-c070fc7bb50f
1
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases Wiki Activity

Switch to version 1: remove src/app/signup/page.tsx

Browse Source
This commit is contained in:
bender
2026-03-11 19:53:14 +00:00
parent 81364f26e1
commit 9f6d8f6534
1 changed files with 0 additions and 273 deletions
Download Patch File Download Diff File Expand all files Collapse all files

273
src/app/signup/page.tsx
View File

@@ -1,273 +0,0 @@
"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import { useState } from "react";
import { Eye, EyeOff, Mail, Lock, User, CheckCircle2, AlertCircle } from 'lucide-react';
import Input from '@/components/form/Input';
export default function SignupPage() {
const [formData, setFormData] = useState({
name: "", email: "", password: "", confirmPassword: ""
});
const [showPassword, setShowPassword] = useState(false);
const [showConfirmPassword, setShowConfirmPassword] = useState(false);
const [errors, setErrors] = useState<{ [key: string]: string }>({});
const [isSubmitted, setIsSubmitted] = useState(false);
const [passwordStrength, setPasswordStrength] = useState<"weak" | "medium" | "strong" | "">("");
const calculatePasswordStrength = (pwd: string): "weak" | "medium" | "strong" | "" => {
if (!pwd) return "";
if (pwd.length < 8) return "weak";
if (/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d@$!%*?&]{8}$/.test(pwd)) return "strong";
return "medium";
};
const handleInputChange = (field: string, value: string) => {
setFormData(prev => ({
...prev,
[field]: value
}));
if (field === "password") {
setPasswordStrength(calculatePasswordStrength(value));
}
};
const validateForm = () => {
const newErrors: { [key: string]: string } = {};
if (!formData.name.trim()) {
newErrors.name = "Nome é obrigatório";
} else if (formData.name.trim().length < 2) {
newErrors.name = "Nome deve ter no mínimo 2 caracteres";
}
if (!formData.email) {
newErrors.email = "Email é obrigatório";
} else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(formData.email)) {
newErrors.email = "Email inválido";
}
if (!formData.password) {
newErrors.password = "Senha é obrigatória";
} else if (formData.password.length < 8) {
newErrors.password = "Senha deve ter no mínimo 8 caracteres";
}
if (formData.password !== formData.confirmPassword) {
newErrors.confirmPassword = "As senhas não correspondem";
}
return newErrors;
};
const handleSubmit = (e: React.FormEvent) => {
e.preventDefault();
const newErrors = validateForm();
setErrors(newErrors);
if (Object.keys(newErrors).length === 0) {
setIsSubmitted(true);
console.log("Signup attempt:", formData);
setTimeout(() => {
setIsSubmitted(false);
}, 2000);
}
};
const getStrengthColor = () => {
switch (passwordStrength) {
case "weak":
return "text-red-500";
case "medium":
return "text-yellow-500";
case "strong":
return "text-green-500";
default:
return "text-foreground/30";
}
};
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: "Dashboard", id: "/" },
{ name: "Treino", id: "training" },
{ name: "Nutrição", id: "nutrition" },
{ name: "Comunidade", id: "community" },
{ name: "Perfil", id: "profile" }
]}
button={{ text: "Entrar", href: "/login" }}
brandName="FitFlow Pro"
/>
</div>
<div className="min-h-[calc(100vh-80px)] flex items-center justify-center py-12 px-4">
<div className="w-full max-w-md">
<div className="bg-card rounded-3xl shadow-lg p-8 border border-accent/10">
<div className="mb-8">
<h1 className="text-3xl font-extrabold text-foreground mb-2">Começar Agora</h1>
<p className="text-foreground/70">Crie sua conta e inicie sua transformação</p>
</div>
<form onSubmit={handleSubmit} className="space-y-6">
<div>
<label className="block text-sm font-medium text-foreground mb-2">
<div className="flex items-center gap-2">
<User size={16} />
Nome Completo
</div>
</label>
<Input
value={formData.name}
onChange={(value) => handleInputChange("name", value)}
type="text"
placeholder="Seu nome"
required
className={errors.name ? "border-red-500" : ""}
/>
{errors.name && (
<div className="flex items-center gap-1 text-red-500 text-sm mt-1">
<AlertCircle size={14} />
{errors.name}
</div>
)}
</div>
<div>
<label className="block text-sm font-medium text-foreground mb-2">
<div className="flex items-center gap-2">
<Mail size={16} />
Email
</div>
</label>
<Input
value={formData.email}
onChange={(value) => handleInputChange("email", value)}
type="email"
placeholder="seu@email.com"
required
className={errors.email ? "border-red-500" : ""}
/>
{errors.email && (
<div className="flex items-center gap-1 text-red-500 text-sm mt-1">
<AlertCircle size={14} />
{errors.email}
</div>
)}
</div>
<div>
<label className="block text-sm font-medium text-foreground mb-2">
<div className="flex items-center gap-2">
<Lock size={16} />
Senha
</div>
</label>
<div className="relative">
<Input
value={formData.password}
onChange={(value) => handleInputChange("password", value)}
type={showPassword ? "text" : "password"}
placeholder="••••••••"
required
className={errors.password ? "border-red-500" : "pr-10"}
/>
<button
type="button"
onClick={() => setShowPassword(!showPassword)}
className="absolute right-3 top-1/2 -translate-y-1/2 text-foreground/50 hover:text-foreground transition-colors"
aria-label={showPassword ? "Ocultar senha" : "Mostrar senha"}
>
{showPassword ? <EyeOff size={18} /> : <Eye size={18} />}
</button>
</div>
{passwordStrength && (
<div className={`flex items-center gap-1 text-xs mt-2 ${getStrengthColor()}`}>
<CheckCircle2 size={12} />
Força: {passwordStrength === "weak" ? "Fraca" : passwordStrength === "medium" ? "Média" : "Forte"}
</div>
)}
{errors.password && (
<div className="flex items-center gap-1 text-red-500 text-sm mt-1">
<AlertCircle size={14} />
{errors.password}
</div>
)}
</div>
<div>
<label className="block text-sm font-medium text-foreground mb-2">
<div className="flex items-center gap-2">
<Lock size={16} />
Confirmar Senha
</div>
</label>
<div className="relative">
<Input
value={formData.confirmPassword}
onChange={(value) => handleInputChange("confirmPassword", value)}
type={showConfirmPassword ? "text" : "password"}
placeholder="••••••••"
required
className={errors.confirmPassword ? "border-red-500" : "pr-10"}
/>
<button
type="button"
onClick={() => setShowConfirmPassword(!showConfirmPassword)}
className="absolute right-3 top-1/2 -translate-y-1/2 text-foreground/50 hover:text-foreground transition-colors"
aria-label={showConfirmPassword ? "Ocultar senha" : "Mostrar senha"}
>
{showConfirmPassword ? <EyeOff size={18} /> : <Eye size={18} />}
</button>
</div>
{errors.confirmPassword && (
<div className="flex items-center gap-1 text-red-500 text-sm mt-1">
<AlertCircle size={14} />
{errors.confirmPassword}
</div>
)}
</div>
<button
type="submit"
disabled={isSubmitted}
className="w-full py-3 px-4 bg-primary-cta hover:opacity-90 disabled:opacity-50 text-white font-semibold rounded-full transition-all duration-300 transform hover:scale-105"
>
{isSubmitted ? "Criando conta..." : "Criar Conta"}
</button>
</form>
<div className="mt-6 text-center text-sm text-foreground/70">
<p>
Já tem conta?{" "}
<a href="/login" className="text-primary-cta font-semibold hover:underline">
Fazer login
</a>
</p>
</div>
<div className="mt-6 pt-6 border-t border-accent/10 text-center text-xs text-foreground/50">
<p>Teste gratuito por 30 dias. Sem cartão de crédito necessário.</p>
<p className="mt-2">Ao criar uma conta, você concorda com nossos Termos de Serviço e Política de Privacidade.</p>
</div>
</div>
</div>
</div>
</ThemeProvider>
);
}