init app

app/reset-password/reset-password-form.tsx

@@ -0,0 +1,108 @@
+"use client";
+
+import { useActionState } from "react";
+import { useFormStatus } from "react-dom";
+import { useSearchParams } from "next/navigation";
+import Link from "next/link";
+import { resetPassword } from "@/app/actions/auth";
+
+function SubmitButton() {
+  const { pending } = useFormStatus();
+  return (
+    <button
+      type="submit"
+      disabled={pending}
+      className="w-full bg-accent text-accent-on font-bold py-3 rounded-xl border-b-4 border-accent-active hover:bg-accent-hover active:translate-y-0.5 active:border-b-0 transition-all disabled:opacity-50 cursor-pointer"
+    >
+      {pending ? "Resetting..." : "Reset password"}
+    </button>
+  );
+}
+
+export default function ResetPasswordForm() {
+  const searchParams = useSearchParams();
+  const token = searchParams.get("token") ?? "";
+  const [state, formAction] = useActionState(resetPassword, undefined);
+
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-bg px-4">
+      <div className="w-full max-w-md">
+        <div className="text-center mb-8">
+          <div className="w-14 h-14 rounded-2xl bg-accent flex items-center justify-center mx-auto mb-4 shadow-[0_4px_0_0_var(--accent-active)]">
+            <span className="text-accent-on font-bold text-xl">OL</span>
+          </div>
+          <h1 className="font-display text-2xl font-bold text-fg">Order Loop</h1>
+        </div>
+
+        <div className="bg-surface border-2 border-border rounded-2xl p-6 shadow-card">
+          <h2 className="font-display text-xl font-bold text-fg mb-2">
+            Reset your password
+          </h2>
+          <p className="text-sm text-muted mb-6">
+            Enter your new password below.
+          </p>
+
+          {state?.message && (
+            <div
+              className={`mb-4 p-3 rounded-xl text-sm font-medium ${
+                state.success
+                  ? "bg-green-50 border border-green-200 text-green-700"
+                  : "bg-danger/10 border border-danger/20 text-danger"
+              }`}
+            >
+              {state.message}
+            </div>
+          )}
+
+          {state?.success ? (
+            <Link
+              href="/login"
+              className="block w-full text-center bg-accent text-accent-on font-bold py-3 rounded-xl"
+            >
+              Go to login
+            </Link>
+          ) : (
+            <form action={formAction} className="space-y-4">
+              <input type="hidden" name="token" value={token} />
+              <div>
+                <label
+                  htmlFor="password"
+                  className="block text-sm font-medium text-fg mb-1"
+                >
+                  New password
+                </label>
+                <input
+                  id="password"
+                  name="password"
+                  type="password"
+                  required
+                  minLength={8}
+                  className="w-full border-2 border-border rounded-xl px-4 py-2.5 text-sm bg-bg text-fg focus:outline-none focus:border-accent"
+                  placeholder="At least 8 characters"
+                />
+              </div>
+              <div>
+                <label
+                  htmlFor="confirmPassword"
+                  className="block text-sm font-medium text-fg mb-1"
+                >
+                  Confirm password
+                </label>
+                <input
+                  id="confirmPassword"
+                  name="confirmPassword"
+                  type="password"
+                  required
+                  minLength={8}
+                  className="w-full border-2 border-border rounded-xl px-4 py-2.5 text-sm bg-bg text-fg focus:outline-none focus:border-accent"
+                  placeholder="Repeat password"
+                />
+              </div>
+              <SubmitButton />
+            </form>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}