89 lines
4.9 KiB
TypeScript
89 lines
4.9 KiB
TypeScript
import React, { useState } from 'react';
|
|
import { useLanguage } from '../i18n/LanguageContext';
|
|
|
|
interface SignUpPageProps {
|
|
onSignUp: (name: string, email: string, password: string) => void;
|
|
onNavigateToLogin: () => void;
|
|
}
|
|
|
|
const AppIcon = () => (
|
|
<svg xmlns="http://www.w3.org/2000/svg" className="h-12 w-12 text-green-600 dark:text-green-400 mx-auto mb-4" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor">
|
|
<path strokeLinecap="round" strokeLinejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
|
</svg>
|
|
);
|
|
|
|
const SignUpPage: React.FC<SignUpPageProps> = ({ onSignUp, onNavigateToLogin }) => {
|
|
const { t } = useLanguage();
|
|
const [name, setName] = useState('');
|
|
const [email, setEmail] = useState('');
|
|
const [password, setPassword] = useState('');
|
|
|
|
const handleSubmit = (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
if (name.trim() && email.trim() && password.trim()) {
|
|
onSignUp(name.trim(), email.trim(), password);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="bg-white dark:bg-slate-800 p-8 sm:p-10 rounded-3xl shadow-sm border border-slate-200/80 dark:border-slate-700 w-full max-w-md mx-auto">
|
|
<AppIcon />
|
|
<h2 className="text-2xl font-bold text-slate-800 dark:text-slate-100 mb-2 text-center">{t('createAccount')}</h2>
|
|
<p className="text-slate-600 dark:text-slate-400 mb-6 text-center">{t('signupSubtitle')}</p>
|
|
<form onSubmit={handleSubmit} className="space-y-4">
|
|
<div>
|
|
<label htmlFor="name" className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">{t('fullName')}</label>
|
|
<input
|
|
type="text"
|
|
id="name"
|
|
value={name}
|
|
onChange={(e) => setName(e.target.value)}
|
|
className="w-full p-3 bg-slate-50 dark:bg-slate-700 text-slate-900 dark:text-slate-100 border border-slate-200 dark:border-slate-600 rounded-xl focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500 focus:bg-white dark:focus:bg-slate-700 transition-shadow placeholder:text-slate-400 dark:placeholder:text-slate-500"
|
|
placeholder={t('namePlaceholder')}
|
|
required
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label htmlFor="signup-email" className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">{t('email')}</label>
|
|
<input
|
|
type="email"
|
|
id="signup-email"
|
|
value={email}
|
|
onChange={(e) => setEmail(e.target.value)}
|
|
className="w-full p-3 bg-slate-50 dark:bg-slate-700 text-slate-900 dark:text-slate-100 border border-slate-200 dark:border-slate-600 rounded-xl focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500 focus:bg-white dark:focus:bg-slate-700 transition-shadow placeholder:text-slate-400 dark:placeholder:text-slate-500"
|
|
placeholder="you@example.com"
|
|
required
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label htmlFor="signup-password" className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">{t('password')}</label>
|
|
<input
|
|
type="password"
|
|
id="signup-password"
|
|
value={password}
|
|
onChange={(e) => setPassword(e.target.value)}
|
|
className="w-full p-3 bg-slate-50 dark:bg-slate-700 text-slate-900 dark:text-slate-100 border border-slate-200 dark:border-slate-600 rounded-xl focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500 focus:bg-white dark:focus:bg-slate-700 transition-shadow placeholder:text-slate-400 dark:placeholder:text-slate-500"
|
|
placeholder="••••••••"
|
|
required
|
|
/>
|
|
</div>
|
|
<button
|
|
type="submit"
|
|
className="w-full bg-emerald-600 text-white font-semibold px-6 py-3 rounded-xl hover:bg-emerald-700 transition-colors disabled:bg-slate-300 dark:disabled:bg-slate-600 disabled:cursor-not-allowed"
|
|
disabled={!name || !email || !password}
|
|
>
|
|
{t('createAccount')}
|
|
</button>
|
|
</form>
|
|
<p className="text-sm text-center text-slate-500 dark:text-slate-400 mt-6">
|
|
{t('hasAccount')}{' '}
|
|
<button onClick={onNavigateToLogin} className="font-semibold text-green-600 dark:text-green-400 hover:underline">
|
|
{t('logIn')}
|
|
</button>
|
|
</p>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default SignUpPage;
|