Account login

web/app/login/page.js

@@ -0,0 +1,75 @@
+"use client";
+
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+import { useAuth } from "@/context/AuthContext";
+
+export default function LoginPage() {
+  const {login} = useAuth();
+  const router = useRouter();
+
+  const [username, setUsername] = useState("");
+  const [password, setPassword] = useState("");
+  const [error, setError] = useState("");
+  const [loading, setLoading] = useState(false);
+
+  async function handleSubmit(e) {
+    e.preventDefault();
+    setError("");
+    setLoading(true);
+
+    try {
+      await login(username, password);
+      router.push("/");
+    } 
+    
+    catch (err) {
+      setError(err.message);
+    } 
+    
+    finally {
+      setLoading(false);
+    }
+  }
+
+  return (
+    <main className="auth-page">
+      <div className="auth-card">
+        <h1 className="auth-title">Log In</h1>
+
+        {error && <p className="auth-error">{error}</p>}
+
+        <form className="auth-form" onSubmit={handleSubmit}>
+          <label className="auth-label">
+            Username
+            <input className="auth-input"
+              type="text"
+              value={username}
+              onChange={(e) => setUsername(e.target.value)}
+              required
+              autoComplete="username"/>
+          </label>
+
+          <label className="auth-label">
+            Password
+            <input className="auth-input"
+              type="password"
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              required
+              autoComplete="current-password"/>
+          </label>
+
+          <button className="auth-submit-btn" type="submit" disabled={loading}>
+            {loading ? "Logging in…" : "Log In"}
+          </button>
+        </form>
+
+        <p className="auth-switch">
+          Don&apos;t have an account?{" "}
+          <a href="/register" className="auth-switch-link">Register here</a>
+        </p>
+      </div>
+    </main>
+  );
+}