auth, trips and join trips

2026-04-16 14:51:54 +07:00
parent de0d1c5413
commit 237caad488
49 changed files with 11343 additions and 334 deletions
@@ -0,0 +1,141 @@
+"use client";
+
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+import { signIn } from "next-auth/react";
+import Link from "next/link";
+import { registerAction } from "@/features/auth/actions";
+
+export default function RegisterPage() {
+  const router = useRouter();
+  const [error, setError] = useState("");
+  const [loading, setLoading] = useState(false);
+
+  async function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
+    e.preventDefault();
+    setError("");
+    setLoading(true);
+
+    const formData = new FormData(e.currentTarget);
+    const result = await registerAction(formData);
+
+    if (result.error) {
+      setError(result.error);
+      setLoading(false);
+      return;
+    }
+
+    const loginResult = await signIn("credentials", {
+      email: formData.get("email") as string,
+      password: formData.get("password") as string,
+      redirect: false,
+    });
+
+    setLoading(false);
+
+    if (loginResult?.error) {
+      router.push("/login");
+    } else {
+      router.push("/");
+      router.refresh();
+    }
+  }
+
+  return (
+    <div className="flex min-h-[calc(100vh-3.5rem)] items-center justify-center px-4 py-12">
+      <div className="w-full max-w-sm">
+        {/* Header */}
+        <div className="mb-8 text-center">
+          <Link href="/" className="mb-4 inline-block text-2xl font-bold text-neutral-800">
+            Se<span className="text-primary-600">Trip</span>
+          </Link>
+          <p className="text-sm text-neutral-500">
+            Daftar dan mulai cari trip pendakian
+          </p>
+        </div>
+
+        {/* Card */}
+        <div className="rounded-2xl border border-neutral-200 bg-white p-6 shadow-sm">
+          {error && (
+            <div className="mb-4 rounded-xl bg-red-50 px-4 py-3 text-sm font-medium text-red-600">
+              {error}
+            </div>
+          )}
+
+          <form onSubmit={handleSubmit} className="space-y-4">
+            <div>
+              <label htmlFor="name" className="mb-1.5 block text-sm font-semibold text-neutral-700">
+                Nama Lengkap
+              </label>
+              <input
+                id="name"
+                name="name"
+                type="text"
+                required
+                className="w-full rounded-xl border border-neutral-200 bg-neutral-50 px-4 py-2.5 text-sm text-neutral-800 transition-colors placeholder:text-neutral-400 focus:bg-white"
+                placeholder="Nama kamu"
+              />
+            </div>
+
+            <div>
+              <label htmlFor="email" className="mb-1.5 block text-sm font-semibold text-neutral-700">
+                Email
+              </label>
+              <input
+                id="email"
+                name="email"
+                type="email"
+                required
+                className="w-full rounded-xl border border-neutral-200 bg-neutral-50 px-4 py-2.5 text-sm text-neutral-800 transition-colors placeholder:text-neutral-400 focus:bg-white"
+                placeholder="email@example.com"
+              />
+            </div>
+
+            <div>
+              <label htmlFor="password" className="mb-1.5 block text-sm font-semibold text-neutral-700">
+                Password
+              </label>
+              <input
+                id="password"
+                name="password"
+                type="password"
+                required
+                className="w-full rounded-xl border border-neutral-200 bg-neutral-50 px-4 py-2.5 text-sm text-neutral-800 transition-colors placeholder:text-neutral-400 focus:bg-white"
+                placeholder="Minimal 6 karakter"
+              />
+            </div>
+
+            <div>
+              <label htmlFor="confirmPassword" className="mb-1.5 block text-sm font-semibold text-neutral-700">
+                Konfirmasi Password
+              </label>
+              <input
+                id="confirmPassword"
+                name="confirmPassword"
+                type="password"
+                required
+                className="w-full rounded-xl border border-neutral-200 bg-neutral-50 px-4 py-2.5 text-sm text-neutral-800 transition-colors placeholder:text-neutral-400 focus:bg-white"
+                placeholder="Ulangi password"
+              />
+            </div>
+
+            <button
+              type="submit"
+              disabled={loading}
+              className="w-full rounded-xl bg-primary-600 py-2.5 text-sm font-bold text-white shadow-lg shadow-primary-600/20 transition-colors hover:bg-primary-700 disabled:opacity-50"
+            >
+              {loading ? "Loading..." : "Daftar"}
+            </button>
+          </form>
+        </div>
+
+        <p className="mt-5 text-center text-sm text-neutral-500">
+          Sudah punya akun?{" "}
+          <Link href="/login" className="font-semibold text-primary-600 hover:text-primary-700">
+            Login
+          </Link>
+        </p>
+      </div>
+    </div>
+  );
+}