Init v1.0.0

src/pages/Register.jsx

@@ -0,0 +1,165 @@
+import { useState } from 'react';
+import { Link, useNavigate } from 'react-router-dom';
+import { useAuth } from '../contexts/AuthContext';
+import { useLanguage } from '../contexts/LanguageContext';
+import { Video, Mail, Lock, User, ArrowRight, Loader2 } from 'lucide-react';
+import toast from 'react-hot-toast';
+
+export default function Register() {
+  const [name, setName] = useState('');
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [confirmPassword, setConfirmPassword] = useState('');
+  const [loading, setLoading] = useState(false);
+  const { register } = useAuth();
+  const { t } = useLanguage();
+  const navigate = useNavigate();
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+
+    if (password !== confirmPassword) {
+      toast.error(t('auth.passwordMismatch'));
+      return;
+    }
+
+    if (password.length < 6) {
+      toast.error(t('auth.passwordTooShort'));
+      return;
+    }
+
+    setLoading(true);
+    try {
+      await register(name, email, password);
+      toast.success(t('auth.registerSuccess'));
+      navigate('/dashboard');
+    } catch (err) {
+      toast.error(err.response?.data?.error || t('auth.registerFailed'));
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="min-h-screen flex items-center justify-center p-6 relative overflow-hidden">
+      {/* Animated background */}
+      <div className="absolute inset-0 bg-th-bg">
+        <div className="absolute inset-0 opacity-30">
+          <div className="absolute top-1/4 left-1/4 w-96 h-96 bg-th-accent rounded-full blur-[128px] animate-pulse" />
+          <div className="absolute bottom-1/4 right-1/4 w-80 h-80 bg-purple-500 rounded-full blur-[128px] animate-pulse" style={{ animationDelay: '2s' }} />
+          <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-64 h-64 bg-pink-500 rounded-full blur-[128px] animate-pulse" style={{ animationDelay: '4s' }} />
+        </div>
+      </div>
+
+      {/* Register card */}
+      <div className="relative w-full max-w-md">
+        <div className="card p-8 backdrop-blur-xl bg-th-card/80 border border-th-border shadow-2xl rounded-2xl">
+          {/* Logo */}
+          <div className="flex items-center justify-center gap-2.5 mb-8">
+            <div className="w-10 h-10 gradient-bg rounded-xl flex items-center justify-center">
+              <Video size={22} className="text-white" />
+            </div>
+            <span className="text-2xl font-bold gradient-text">Redlight</span>
+          </div>
+
+          <div className="mb-8">
+            <h2 className="text-2xl font-bold text-th-text mb-2">{t('auth.createAccount')}</h2>
+            <p className="text-th-text-s">
+              {t('auth.registerSubtitle')}
+            </p>
+          </div>
+
+          <form onSubmit={handleSubmit} className="space-y-5">
+            <div>
+              <label className="block text-sm font-medium text-th-text mb-1.5">{t('auth.name')}</label>
+              <div className="relative">
+                <User size={18} className="absolute left-3.5 top-1/2 -translate-y-1/2 text-th-text-s" />
+                <input
+                  type="text"
+                  value={name}
+                  onChange={e => setName(e.target.value)}
+                  className="input-field pl-11"
+                  placeholder={t('auth.namePlaceholder')}
+                  required
+                />
+              </div>
+            </div>
+
+            <div>
+              <label className="block text-sm font-medium text-th-text mb-1.5">{t('auth.email')}</label>
+              <div className="relative">
+                <Mail size={18} className="absolute left-3.5 top-1/2 -translate-y-1/2 text-th-text-s" />
+                <input
+                  type="email"
+                  value={email}
+                  onChange={e => setEmail(e.target.value)}
+                  className="input-field pl-11"
+                  placeholder={t('auth.emailPlaceholder')}
+                  required
+                />
+              </div>
+            </div>
+
+            <div>
+              <label className="block text-sm font-medium text-th-text mb-1.5">{t('auth.password')}</label>
+              <div className="relative">
+                <Lock size={18} className="absolute left-3.5 top-1/2 -translate-y-1/2 text-th-text-s" />
+                <input
+                  type="password"
+                  value={password}
+                  onChange={e => setPassword(e.target.value)}
+                  className="input-field pl-11"
+                  placeholder={t('auth.minPassword')}
+                  required
+                  minLength={6}
+                />
+              </div>
+            </div>
+
+            <div>
+              <label className="block text-sm font-medium text-th-text mb-1.5">{t('auth.confirmPassword')}</label>
+              <div className="relative">
+                <Lock size={18} className="absolute left-3.5 top-1/2 -translate-y-1/2 text-th-text-s" />
+                <input
+                  type="password"
+                  value={confirmPassword}
+                  onChange={e => setConfirmPassword(e.target.value)}
+                  className="input-field pl-11"
+                  placeholder={t('auth.repeatPassword')}
+                  required
+                  minLength={6}
+                />
+              </div>
+            </div>
+
+            <button
+              type="submit"
+              disabled={loading}
+              className="btn-primary w-full py-3"
+            >
+              {loading ? (
+                <Loader2 size={18} className="animate-spin" />
+              ) : (
+                <>
+                  {t('auth.register')}
+                  <ArrowRight size={18} />
+                </>
+              )}
+            </button>
+          </form>
+
+          <p className="mt-6 text-center text-sm text-th-text-s">
+            {t('auth.hasAccount')}{' '}
+            <Link to="/login" className="text-th-accent hover:underline font-medium">
+              {t('auth.signInNow')}
+            </Link>
+          </p>
+
+          <Link to="/" className="block mt-4 text-center text-sm text-th-text-s hover:text-th-text transition-colors">
+            {t('auth.backToHome')}
+          </Link>
+        </div>
+      </div>
+    </div>
+  );
+}