65 lines
2.1 KiB
TypeScript
65 lines
2.1 KiB
TypeScript
"use client";
|
|
|
|
/**
|
|
* /settings/profile — dedicated profile editor.
|
|
*
|
|
* Lives outside the /u/me profile layout (same reasoning as /settings) so it
|
|
* carries the default site chrome instead of the ProfileHeader + tabs frame.
|
|
* The "Edit profile" button on the profile header links here. The page owns
|
|
* the title + back button; ProfileEditForm renders the sections. Saving stays
|
|
* on the page (toast); the back button / Cancel return to /u/me.
|
|
*/
|
|
|
|
import { useEffect } from "react";
|
|
import Link from "next/link";
|
|
import { useRouter } from "next/navigation";
|
|
import { ChevronLeft } from "lucide-react";
|
|
import { useAuth } from "@/components/auth/auth-provider";
|
|
import { useAuthGate } from "@/components/auth/auth-gate";
|
|
import { ProfileEditForm } from "@/components/profile/profile-edit-form";
|
|
|
|
export default function EditProfilePage() {
|
|
const { user, loading } = useAuth();
|
|
const { requireAuth } = useAuthGate();
|
|
const router = useRouter();
|
|
|
|
// Same auth gate as the /u/me layout: prompt anonymous visitors and bounce
|
|
// them home if they dismiss it.
|
|
useEffect(() => {
|
|
if (loading || user) return;
|
|
let cancelled = false;
|
|
(async () => {
|
|
const ok = await requireAuth();
|
|
if (!ok && !cancelled) router.replace("/");
|
|
})();
|
|
return () => {
|
|
cancelled = true;
|
|
};
|
|
}, [loading, user, requireAuth, router]);
|
|
|
|
return (
|
|
<main className="flex-1 max-w-3xl w-full mx-auto px-4 sm:px-6 py-6 space-y-10">
|
|
<header className="space-y-1">
|
|
<Link
|
|
href="/u/me"
|
|
className="inline-flex items-center gap-1 text-sm text-muted-foreground hover:text-foreground transition-colors"
|
|
>
|
|
<ChevronLeft className="size-4" />
|
|
Back to profile
|
|
</Link>
|
|
<h1 className="font-[family-name:var(--font-title)] text-3xl font-semibold text-foreground pt-2">
|
|
Edit profile
|
|
</h1>
|
|
</header>
|
|
|
|
{loading || !user ? (
|
|
<p className="text-sm text-muted-foreground">
|
|
{loading ? "Loading…" : "Sign in to edit your profile."}
|
|
</p>
|
|
) : (
|
|
<ProfileEditForm user={user} onDone={() => router.push("/u/me")} />
|
|
)}
|
|
</main>
|
|
);
|
|
}
|