Switch to version 1: remove src/app/signup/page.tsx
This commit is contained in:
@@ -1,428 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
|
||||
import ContactCTA from '@/components/sections/contact/ContactCTA';
|
||||
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
|
||||
import { Mail, Lock, User, AlertCircle, Check, ArrowRight } from 'lucide-react';
|
||||
import { useState } from 'react';
|
||||
|
||||
interface FormErrors {
|
||||
[key: string]: string;
|
||||
}
|
||||
|
||||
interface SignupFormData {
|
||||
name: string;
|
||||
email: string;
|
||||
password: string;
|
||||
confirmPassword: string;
|
||||
agreedToTerms: boolean;
|
||||
}
|
||||
|
||||
export default function SignupPage() {
|
||||
const [formData, setFormData] = useState<SignupFormData>({
|
||||
name: '',
|
||||
email: '',
|
||||
password: '',
|
||||
confirmPassword: '',
|
||||
agreedToTerms: false
|
||||
});
|
||||
const [errors, setErrors] = useState<FormErrors>({});
|
||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||
const [passwordStrength, setPasswordStrength] = useState(0);
|
||||
|
||||
const calculatePasswordStrength = (password: string) => {
|
||||
let strength = 0;
|
||||
if (password.length >= 8) strength++;
|
||||
if (/[a-z]/.test(password) && /[A-Z]/.test(password)) strength++;
|
||||
if (/\d/.test(password)) strength++;
|
||||
if (/[^a-zA-Z\d]/.test(password)) strength++;
|
||||
setPasswordStrength(strength);
|
||||
};
|
||||
|
||||
const validateForm = () => {
|
||||
const newErrors: FormErrors = {};
|
||||
|
||||
if (!formData.name.trim()) {
|
||||
newErrors.name = 'Nome é obrigatório';
|
||||
} else if (formData.name.length < 2) {
|
||||
newErrors.name = 'Nome deve ter pelo menos 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 pelo menos 8 caracteres';
|
||||
}
|
||||
|
||||
if (formData.password !== formData.confirmPassword) {
|
||||
newErrors.confirmPassword = 'As senhas não correspondem';
|
||||
}
|
||||
|
||||
if (!formData.agreedToTerms) {
|
||||
newErrors.agreedToTerms = 'Você deve aceitar os termos e condições';
|
||||
}
|
||||
|
||||
setErrors(newErrors);
|
||||
return Object.keys(newErrors).length === 0;
|
||||
};
|
||||
|
||||
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const { name, value, type, checked } = e.target;
|
||||
const newValue = type === 'checkbox' ? checked : value;
|
||||
|
||||
setFormData(prev => ({
|
||||
...prev,
|
||||
[name]: newValue
|
||||
}));
|
||||
|
||||
if (errors[name]) {
|
||||
setErrors(prev => ({
|
||||
...prev,
|
||||
[name]: ''
|
||||
}));
|
||||
}
|
||||
|
||||
if (name === 'password') {
|
||||
calculatePasswordStrength(value);
|
||||
}
|
||||
};
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
|
||||
e.preventDefault();
|
||||
|
||||
if (!validateForm()) {
|
||||
return;
|
||||
}
|
||||
|
||||
setIsSubmitting(true);
|
||||
try {
|
||||
await new Promise(resolve => setTimeout(resolve, 1500));
|
||||
console.log('Signup attempt:', formData);
|
||||
alert('Conta criada com sucesso! Faça login para continuar.');
|
||||
setFormData({
|
||||
name: '',
|
||||
email: '',
|
||||
password: '',
|
||||
confirmPassword: '',
|
||||
agreedToTerms: false
|
||||
});
|
||||
setPasswordStrength(0);
|
||||
} catch (error) {
|
||||
setErrors({ submit: 'Erro ao criar conta. Tente novamente.' });
|
||||
} finally {
|
||||
setIsSubmitting(false);
|
||||
}
|
||||
};
|
||||
|
||||
const getPasswordStrengthColor = () => {
|
||||
if (passwordStrength === 0) return 'bg-gray-300';
|
||||
if (passwordStrength === 1) return 'bg-red-500';
|
||||
if (passwordStrength === 2) return 'bg-yellow-500';
|
||||
if (passwordStrength === 3) return 'bg-blue-500';
|
||||
return 'bg-green-500';
|
||||
};
|
||||
|
||||
const getPasswordStrengthLabel = () => {
|
||||
if (passwordStrength === 0) return '';
|
||||
if (passwordStrength === 1) return 'Fraca';
|
||||
if (passwordStrength === 2) return 'Média';
|
||||
if (passwordStrength === 3) return 'Forte';
|
||||
return 'Muito Forte';
|
||||
};
|
||||
|
||||
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: "Sobre", id: "#hero" },
|
||||
{ name: "Features", id: "#onboarding" },
|
||||
{ name: "Contato", id: "#contact" },
|
||||
{ name: "Login", id: "/login" }
|
||||
]}
|
||||
button={{ text: "Criar Conta", href: "/signup" }}
|
||||
brandName="FitFlow Pro"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="signup" data-section="signup" className="min-h-screen flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8">
|
||||
<div className="w-full max-w-md space-y-8">
|
||||
<div className="text-center space-y-3">
|
||||
<h1 className="text-4xl font-extrabold tracking-tight">Comece sua jornada</h1>
|
||||
<p className="text-base text-gray-600 dark:text-gray-400">Crie sua conta FitFlow Pro e transforme seu corpo</p>
|
||||
</div>
|
||||
|
||||
<div className="bg-card rounded-2xl border border-primary-cta/20 p-8 shadow-lg">
|
||||
<form onSubmit={handleSubmit} className="space-y-5">
|
||||
{/* Name Field */}
|
||||
<div className="space-y-2">
|
||||
<label htmlFor="name" className="block text-sm font-medium text-foreground">
|
||||
Nome Completo
|
||||
</label>
|
||||
<div className="relative">
|
||||
<User className="absolute left-3 top-3.5 w-5 h-5 text-gray-400" />
|
||||
<input
|
||||
id="name"
|
||||
name="name"
|
||||
type="text"
|
||||
value={formData.name}
|
||||
onChange={handleChange}
|
||||
placeholder="Seu nome"
|
||||
className={`w-full pl-10 pr-4 py-2.5 bg-background border rounded-lg focus:outline-none focus:ring-2 transition-all ${
|
||||
errors.name
|
||||
? 'border-red-500 focus:ring-red-500'
|
||||
: 'border-gray-300 focus:ring-primary-cta'
|
||||
}`}
|
||||
/>
|
||||
</div>
|
||||
{errors.name && (
|
||||
<div className="flex items-center gap-2 text-red-500 text-sm">
|
||||
<AlertCircle className="w-4 h-4" />
|
||||
{errors.name}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Email Field */}
|
||||
<div className="space-y-2">
|
||||
<label htmlFor="email" className="block text-sm font-medium text-foreground">
|
||||
Email
|
||||
</label>
|
||||
<div className="relative">
|
||||
<Mail className="absolute left-3 top-3.5 w-5 h-5 text-gray-400" />
|
||||
<input
|
||||
id="email"
|
||||
name="email"
|
||||
type="email"
|
||||
value={formData.email}
|
||||
onChange={handleChange}
|
||||
placeholder="seu@email.com"
|
||||
className={`w-full pl-10 pr-4 py-2.5 bg-background border rounded-lg focus:outline-none focus:ring-2 transition-all ${
|
||||
errors.email
|
||||
? 'border-red-500 focus:ring-red-500'
|
||||
: 'border-gray-300 focus:ring-primary-cta'
|
||||
}`}
|
||||
/>
|
||||
</div>
|
||||
{errors.email && (
|
||||
<div className="flex items-center gap-2 text-red-500 text-sm">
|
||||
<AlertCircle className="w-4 h-4" />
|
||||
{errors.email}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Password Field */}
|
||||
<div className="space-y-2">
|
||||
<label htmlFor="password" className="block text-sm font-medium text-foreground">
|
||||
Senha
|
||||
</label>
|
||||
<div className="relative">
|
||||
<Lock className="absolute left-3 top-3.5 w-5 h-5 text-gray-400" />
|
||||
<input
|
||||
id="password"
|
||||
name="password"
|
||||
type="password"
|
||||
value={formData.password}
|
||||
onChange={handleChange}
|
||||
placeholder="••••••••••"
|
||||
className={`w-full pl-10 pr-4 py-2.5 bg-background border rounded-lg focus:outline-none focus:ring-2 transition-all ${
|
||||
errors.password
|
||||
? 'border-red-500 focus:ring-red-500'
|
||||
: 'border-gray-300 focus:ring-primary-cta'
|
||||
}`}
|
||||
/>
|
||||
</div>
|
||||
{formData.password && (
|
||||
<div className="space-y-2">
|
||||
<div className="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-1.5 overflow-hidden">
|
||||
<div
|
||||
className={`h-full transition-all ${getPasswordStrengthColor()}`}
|
||||
style={{ width: `${(passwordStrength / 4) * 100}%` }}
|
||||
></div>
|
||||
</div>
|
||||
<p className="text-xs text-gray-600 dark:text-gray-400">
|
||||
Força: <span className="font-semibold">{getPasswordStrengthLabel()}</span>
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
{errors.password && (
|
||||
<div className="flex items-center gap-2 text-red-500 text-sm">
|
||||
<AlertCircle className="w-4 h-4" />
|
||||
{errors.password}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Confirm Password Field */}
|
||||
<div className="space-y-2">
|
||||
<label htmlFor="confirmPassword" className="block text-sm font-medium text-foreground">
|
||||
Confirmar Senha
|
||||
</label>
|
||||
<div className="relative">
|
||||
<Lock className="absolute left-3 top-3.5 w-5 h-5 text-gray-400" />
|
||||
<input
|
||||
id="confirmPassword"
|
||||
name="confirmPassword"
|
||||
type="password"
|
||||
value={formData.confirmPassword}
|
||||
onChange={handleChange}
|
||||
placeholder="••••••••••"
|
||||
className={`w-full pl-10 pr-4 py-2.5 bg-background border rounded-lg focus:outline-none focus:ring-2 transition-all ${
|
||||
errors.confirmPassword
|
||||
? 'border-red-500 focus:ring-red-500'
|
||||
: 'border-gray-300 focus:ring-primary-cta'
|
||||
}`}
|
||||
/>
|
||||
</div>
|
||||
{formData.confirmPassword && formData.password === formData.confirmPassword && !errors.confirmPassword && (
|
||||
<div className="flex items-center gap-2 text-green-500 text-sm">
|
||||
<Check className="w-4 h-4" />
|
||||
Senhas correspondem
|
||||
</div>
|
||||
)}
|
||||
{errors.confirmPassword && (
|
||||
<div className="flex items-center gap-2 text-red-500 text-sm">
|
||||
<AlertCircle className="w-4 h-4" />
|
||||
{errors.confirmPassword}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Terms Checkbox */}
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-start gap-3">
|
||||
<input
|
||||
id="agreedToTerms"
|
||||
name="agreedToTerms"
|
||||
type="checkbox"
|
||||
checked={formData.agreedToTerms}
|
||||
onChange={handleChange}
|
||||
className="w-5 h-5 mt-0.5 rounded border-gray-300 accent-primary-cta cursor-pointer"
|
||||
/>
|
||||
<label htmlFor="agreedToTerms" className="text-sm text-gray-600 dark:text-gray-400 cursor-pointer">
|
||||
Concordo com os{' '}
|
||||
<a href="#" className="text-primary-cta hover:underline font-semibold">
|
||||
termos de serviço
|
||||
</a>
|
||||
{' '}e{' '}
|
||||
<a href="#" className="text-primary-cta hover:underline font-semibold">
|
||||
política de privacidade
|
||||
</a>
|
||||
</label>
|
||||
</div>
|
||||
{errors.agreedToTerms && (
|
||||
<div className="flex items-center gap-2 text-red-500 text-sm">
|
||||
<AlertCircle className="w-4 h-4" />
|
||||
{errors.agreedToTerms}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Submit Errors */}
|
||||
{errors.submit && (
|
||||
<div className="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg p-3 flex items-center gap-2 text-red-700 dark:text-red-400 text-sm">
|
||||
<AlertCircle className="w-4 h-4 flex-shrink-0" />
|
||||
{errors.submit}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Submit Button */}
|
||||
<button
|
||||
type="submit"
|
||||
disabled={isSubmitting}
|
||||
className="w-full bg-primary-cta hover:bg-primary-cta/90 text-white font-semibold py-2.5 rounded-lg transition-all flex items-center justify-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
>
|
||||
{isSubmitting ? 'Criando conta...' : 'Criar Conta'}
|
||||
{!isSubmitting && <ArrowRight className="w-4 h-4" />}
|
||||
</button>
|
||||
</form>
|
||||
|
||||
{/* Divider */}
|
||||
<div className="mt-6 relative">
|
||||
<div className="absolute inset-0 flex items-center">
|
||||
<div className="w-full border-t border-gray-300 dark:border-gray-600"></div>
|
||||
</div>
|
||||
<div className="relative flex justify-center text-sm">
|
||||
<span className="px-2 bg-card text-gray-500">ou continue com</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Social Signup Buttons */}
|
||||
<div className="mt-6 space-y-3">
|
||||
<button className="w-full bg-background hover:bg-gray-50 dark:hover:bg-gray-800 border border-gray-300 dark:border-gray-600 text-foreground font-medium py-2.5 rounded-lg transition-all">
|
||||
Google
|
||||
</button>
|
||||
<button className="w-full bg-background hover:bg-gray-50 dark:hover:bg-gray-800 border border-gray-300 dark:border-gray-600 text-foreground font-medium py-2.5 rounded-lg transition-all">
|
||||
Apple
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Login Link */}
|
||||
<p className="text-center text-gray-600 dark:text-gray-400 text-sm">
|
||||
Já tem conta?{' '}
|
||||
<a href="/login" className="text-primary-cta hover:text-primary-cta/80 font-semibold transition-colors">
|
||||
Fazer login
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterLogoEmphasis
|
||||
columns={[
|
||||
{
|
||||
items: [
|
||||
{ label: "Home", href: "/" },
|
||||
{ label: "Sobre", href: "/#hero" },
|
||||
{ label: "Features", href: "/#onboarding" }
|
||||
]
|
||||
},
|
||||
{
|
||||
items: [
|
||||
{ label: "Blog", href: "#" },
|
||||
{ label: "Ajuda", href: "#" },
|
||||
{ label: "Suporte", href: "#" }
|
||||
]
|
||||
},
|
||||
{
|
||||
items: [
|
||||
{ label: "Privacidade", href: "#" },
|
||||
{ label: "Termos", href: "#" },
|
||||
{ label: "Contato", href: "#" }
|
||||
]
|
||||
},
|
||||
{
|
||||
items: [
|
||||
{ label: "Login", href: "/login" },
|
||||
{ label: "Signup", href: "/signup" },
|
||||
{ label: "Dashboard", href: "/" }
|
||||
]
|
||||
}
|
||||
]}
|
||||
logoText="FitFlow Pro"
|
||||
/>
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user