Initial commit

Next.js + Express event management app for Hope Family Church.
2026-07-23 15:26:47 +02:00
commit 3d381944d2
246 changed files with 57565 additions and 0 deletions
@@ -0,0 +1,79 @@
+"use client";
+import React, { Suspense, useMemo, useState } from "react";
+import { Navbar } from "@/components/layout/Navbar";
+import { Footer } from "@/components/layout/Footer";
+import { apiFetch } from "@/lib/api";
+import { useSearchParams, useRouter } from "next/navigation";
+import { appName } from "@/lib/siteConfig";
+
+function ActivateAccountContent() {
+  const search = useSearchParams();
+  const router = useRouter();
+  const token = search.get("token") || "";
+  const [password, setPassword] = useState("");
+  const [confirm, setConfirm] = useState("");
+  const [status, setStatus] = useState<string | null>(null);
+  const [loading, setLoading] = useState(false);
+
+  const canSubmit = useMemo(() => password.length >= 8 && password === confirm && !!token, [password, confirm, token]);
+
+  const submit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!canSubmit) return;
+    try {
+      setLoading(true);
+      setStatus(null);
+      const data = await apiFetch<any>("/api/users/activate", { method: "POST", body: { token, password } });
+      // Auto-login: save token and redirect to dashboard
+      if (data?.token) {
+        localStorage.setItem("token", data.token);
+      }
+      setStatus("Your account is now active. Redirecting…");
+      setTimeout(() => router.push("/dashboard"), 1500);
+    } catch (err: any) {
+      setStatus(err?.message || "Activation failed. The link may have expired.");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="min-h-screen flex flex-col">
+      <Navbar />
+      <main className="flex-1 px-4 py-10 max-w-md mx-auto w-full">
+        <div className="border rounded-xl p-6 bg-white shadow-sm">
+          <h1 className="text-2xl font-semibold mb-2">Activate your account</h1>
+          <p className="text-gray-500 text-sm mb-5">Set a password to activate your {appName} account.</p>
+          {!token && <p className="text-red-600 mb-4">Missing or invalid activation link.</p>}
+          <form onSubmit={submit} className="space-y-4">
+            <div>
+              <label className="block text-sm font-medium mb-1">Password</label>
+              <input type="password" value={password} onChange={e => setPassword(e.target.value)} required className="w-full border rounded px-3 py-2" />
+              <p className="text-xs text-gray-500 mt-1">At least 8 characters.</p>
+            </div>
+            <div>
+              <label className="block text-sm font-medium mb-1">Confirm Password</label>
+              <input type="password" value={confirm} onChange={e => setConfirm(e.target.value)} required className="w-full border rounded px-3 py-2" />
+            </div>
+            {password && confirm && password !== confirm && (
+              <p className="text-xs text-red-600">Passwords do not match.</p>
+            )}
+            <button disabled={loading || !canSubmit} className="px-4 py-2 rounded bg-blue-600 text-white disabled:opacity-60 w-full py-2.5 font-medium">
+              {loading ? "Activating…" : "Activate my account"}
+            </button>
+          </form>
+          {status && <p className="text-sm text-gray-700 mt-4">{status}</p>}
+        </div>
+      </main>
+      <Footer />
+    </div>
+  );
+}
+
+export default function ActivateAccountPage() {
+  return (
+    <Suspense fallback={<div className="p-6">Loading...</div>}>
+      <ActivateAccountContent />
+    </Suspense>
+  );
+}