refactor: everything

2026-06-06 10:51:13 +05:30
parent 09565b75b9
commit a619d44eca
11 changed files with 394 additions and 379 deletions
--- a/src/pages/Register.jsx
+++ b/src/pages/Register.jsx
@@ -0,0 +1,113 @@
+import { useState, useContext } from 'react';
+import { AuthContext } from '../AuthContext';
+import { inputCls, labelCls } from '../constants';
+
+export default function Register({ onRegisterSuccess }) {
+  const [formData, setFormData] = useState({ username: '', email: '', password: '', confirmPassword: '' });
+  const [error, setError] = useState('');
+  const [success, setSuccess] = useState('');
+  const [loading, setLoading] = useState(false);
+  const { register } = useContext(AuthContext);
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setError('');
+    setSuccess('');
+
+    if (formData.password !== formData.confirmPassword) {
+      setError('Passwords do not match');
+      return;
+    }
+    if (formData.password.length < 6) {
+      setError('Password must be at least 6 characters');
+      return;
+    }
+
+    setLoading(true);
+    const result = await register(formData.username, formData.email, formData.password);
+    if (result.success) {
+      setSuccess(result.message);
+      setFormData({ username: '', email: '', password: '', confirmPassword: '' });
+      onRegisterSuccess?.();
+    } else {
+      setError(result.error);
+    }
+    setLoading(false);
+  };
+
+  return (
+    <div className="px-5 pt-12 pb-8 max-w-[480px] mx-auto">
+      <div className="mb-8 text-center">
+        <div className="text-5xl mb-3">🫘</div>
+        <h1 className="font-serif text-3xl font-semibold text-[#2C1810] mb-1">Create Account</h1>
+        <p className="text-sm text-[#9C8B7A]">Start tracking your coffee journey</p>
+      </div>
+
+      {error && (
+        <div className="bg-[rgba(180,64,64,0.08)] border border-[rgba(180,64,64,0.2)] text-[#B44040] text-sm px-4 py-3 rounded-lg mb-4">
+          {error}
+        </div>
+      )}
+      {success && (
+        <div className="bg-[rgba(74,124,89,0.08)] border border-[rgba(74,124,89,0.2)] text-[#4A7C59] text-sm px-4 py-3 rounded-lg mb-4">
+          {success}
+        </div>
+      )}
+
+      <form onSubmit={handleSubmit} className="flex flex-col gap-4">
+        <div>
+          <label className={labelCls}>Username</label>
+          <input
+            className={inputCls}
+            type="text"
+            placeholder="coffeelover"
+            value={formData.username}
+            onChange={(e) => setFormData({ ...formData, username: e.target.value })}
+            required
+          />
+        </div>
+        <div>
+          <label className={labelCls}>Email</label>
+          <input
+            className={inputCls}
+            type="email"
+            placeholder="you@example.com"
+            value={formData.email}
+            onChange={(e) => setFormData({ ...formData, email: e.target.value })}
+            required
+          />
+        </div>
+        <div>
+          <label className={labelCls}>Password</label>
+          <input
+            className={inputCls}
+            type="password"
+            placeholder="••••••••"
+            value={formData.password}
+            onChange={(e) => setFormData({ ...formData, password: e.target.value })}
+            required
+          />
+        </div>
+        <div>
+          <label className={labelCls}>Confirm Password</label>
+          <input
+            className={inputCls}
+            type="password"
+            placeholder="••••••••"
+            value={formData.confirmPassword}
+            onChange={(e) => setFormData({ ...formData, confirmPassword: e.target.value })}
+            required
+          />
+        </div>
+        <button
+          type="submit"
+          disabled={loading}
+          className="w-full py-3.5 border-none rounded-lg bg-[#2C1810] text-[#FAF6F1] text-sm font-semibold tracking-wide mt-1 cursor-pointer transition-opacity"
+          style={{ opacity: loading ? 0.6 : 1, cursor: loading ? 'not-allowed' : 'pointer' }}
+        >
+          {loading ? 'Creating account…' : 'Create Account'}
+        </button>
+      </form>
+    </div>
+  );
+}