Account login

web/app/register/page.js

@@ -0,0 +1,151 @@
+"use client";
+
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+import { useAuth } from "@/context/AuthContext";
+
+export default function RegisterPage() {
+  const {register} = useAuth();
+  const router = useRouter();
+
+  const [form, setForm] = useState({
+    fullName: "",
+    username: "",
+    email: "",
+    phone: "",
+    password: "",
+    confirmPassword: "",});
+
+  const [error, setError] = useState("");
+  const [loading, setLoading] = useState(false);
+
+  function handleChange(e) {
+    setForm((prev) => ({ ...prev, [e.target.name]: e.target.value }));
+  }
+
+  async function handleSubmit(e) {
+    e.preventDefault();
+    setError("");
+
+    if (form.password !== form.confirmPassword) {
+      setError("Passwords do not match.");
+      return;
+    }
+
+    setLoading(true);
+    try {
+      await register({fullName: form.fullName,
+        username: form.username,
+        email: form.email,
+        phone: form.phone,
+        password: form.password,
+      });
+      router.push("/");
+    } 
+    
+    catch (err) {
+      setError(err.message);
+    } 
+    
+    finally {
+      setLoading(false);
+    }
+  }
+
+  return (
+    <main className="auth-page">
+      <div className="auth-card">
+        <h1 className="auth-title">Create Account</h1>
+
+        {error && <p className="auth-error">{error}</p>}
+
+        <form className="auth-form" onSubmit={handleSubmit}>
+          <label className="auth-label">
+            Full Name
+            <input
+              className="auth-input"
+              type="text"
+              name="fullName"
+              value={form.fullName}
+              onChange={handleChange}
+              required
+            />
+          </label>
+
+          <label className="auth-label">
+            Username
+            <input
+              className="auth-input"
+              type="text"
+              name="username"
+              value={form.username}
+              onChange={handleChange}
+              required
+              minLength={3}
+            />
+          </label>
+
+          <label className="auth-label">
+            Email
+            <input
+              className="auth-input"
+              type="email"
+              name="email"
+              value={form.email}
+              onChange={handleChange}
+              required
+            />
+          </label>
+
+          <label className="auth-label">
+            Phone
+            <input
+              className="auth-input"
+              type="tel"
+              name="phone"
+              value={form.phone}
+              onChange={handleChange}
+              required
+            />
+          </label>
+
+          <label className="auth-label">
+            Password
+            <input
+              className="auth-input"
+              type="password"
+              name="password"
+              value={form.password}
+              onChange={handleChange}
+              required
+              minLength={6}
+              autoComplete="new-password"
+            />
+          </label>
+
+          <label className="auth-label">
+            Confirm Password
+            <input
+              className="auth-input"
+              type="password"
+              name="confirmPassword"
+              value={form.confirmPassword}
+              onChange={handleChange}
+              required
+              autoComplete="new-password"
+            />
+          </label>
+
+          <button className="auth-submit-btn" type="submit" disabled={loading}>
+            {loading ? "Creating account…" : "Register"}
+          </button>
+        </form>
+
+        <p className="auth-switch">
+          Already have an account?{" "}
+          <a href="/login" className="auth-switch-link">Log in here</a>
+        </p>
+      </div>
+    </main>
+  );
+}