account management upgrades
This commit is contained in:
parent
94de501a49
commit
86fdd403b0
8 changed files with 439 additions and 46 deletions
86
components/account/AvatarUploader.tsx
Normal file
86
components/account/AvatarUploader.tsx
Normal file
|
|
@ -0,0 +1,86 @@
|
|||
// components/account/AvatarUploader.tsx
|
||||
"use client";
|
||||
|
||||
import { useMemo, useState } from "react";
|
||||
|
||||
export default function AvatarUploader({
|
||||
avatarId,
|
||||
onUpdated,
|
||||
}: {
|
||||
avatarId?: string | null;
|
||||
onUpdated?: () => void;
|
||||
}) {
|
||||
const [file, setFile] = useState<File | null>(null);
|
||||
const [busy, setBusy] = useState(false);
|
||||
const [msg, setMsg] = useState<string | null>(null);
|
||||
|
||||
const API_BASE = useMemo(
|
||||
() => (process.env.NEXT_PUBLIC_API_BASE_URL || "").replace(/\/$/, ""),
|
||||
[]
|
||||
);
|
||||
const currentUrl = avatarId ? `${API_BASE}/assets/${avatarId}` : null;
|
||||
|
||||
const onUpload = async () => {
|
||||
setMsg(null);
|
||||
if (!file) {
|
||||
setMsg("Choose a file first.");
|
||||
return;
|
||||
}
|
||||
setBusy(true);
|
||||
try {
|
||||
const fd = new FormData();
|
||||
fd.set("file", file, file.name);
|
||||
|
||||
const r = await fetch("/api/account/avatar", { method: "POST", body: fd });
|
||||
if (r.status === 401) {
|
||||
location.assign(`/auth/sign-in?reauth=1&next=${encodeURIComponent("/portal/account")}`);
|
||||
return;
|
||||
}
|
||||
const j = await r.json().catch(() => ({}));
|
||||
if (!r.ok) {
|
||||
setMsg(j?.error || "Upload failed");
|
||||
return;
|
||||
}
|
||||
setMsg("Avatar updated.");
|
||||
setFile(null);
|
||||
onUpdated?.();
|
||||
} catch (e: any) {
|
||||
setMsg(e?.message || "Upload failed");
|
||||
} finally {
|
||||
setBusy(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="rounded-md border p-4 space-y-3">
|
||||
<h3 className="font-semibold">Avatar</h3>
|
||||
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="h-16 w-16 rounded-full overflow-hidden border bg-muted flex items-center justify-center">
|
||||
{currentUrl ? (
|
||||
// eslint-disable-next-line @next/next/no-img-element
|
||||
<img src={currentUrl} alt="Avatar" className="h-full w-full object-cover" />
|
||||
) : (
|
||||
<span className="text-xs opacity-60">No Avatar</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<input
|
||||
className="text-sm"
|
||||
type="file"
|
||||
accept="image/*"
|
||||
onChange={(e) => setFile(e.currentTarget.files?.[0] ?? null)}
|
||||
/>
|
||||
<button
|
||||
onClick={onUpload}
|
||||
disabled={busy || !file}
|
||||
className="rounded-md bg-black text-white px-3 py-2 text-sm disabled:opacity-60"
|
||||
>
|
||||
{busy ? "Uploading…" : "Upload"}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{msg && <div className="text-sm opacity-80">{msg}</div>}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
100
components/account/PasswordChange.tsx
Normal file
100
components/account/PasswordChange.tsx
Normal file
|
|
@ -0,0 +1,100 @@
|
|||
// components/account/PasswordChange.tsx
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
|
||||
export default function PasswordChange() {
|
||||
const [current, setCurrent] = useState("");
|
||||
const [next, setNext] = useState("");
|
||||
const [next2, setNext2] = useState("");
|
||||
const [busy, setBusy] = useState(false);
|
||||
const [msg, setMsg] = useState<string | null>(null);
|
||||
|
||||
const onSave = async () => {
|
||||
setMsg(null);
|
||||
if (next !== next2) {
|
||||
setMsg("New passwords do not match.");
|
||||
return;
|
||||
}
|
||||
if (next.length < 8) {
|
||||
setMsg("Password must be at least 8 characters.");
|
||||
return;
|
||||
}
|
||||
setBusy(true);
|
||||
try {
|
||||
const r = await fetch("/api/account/password", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ current, next }),
|
||||
});
|
||||
if (r.status === 401) {
|
||||
// Wrong current or expired token; the route returns a friendly message for wrong current.
|
||||
const j = await r.json().catch(() => ({}));
|
||||
setMsg(j?.error || "Re-authentication required.");
|
||||
return;
|
||||
}
|
||||
const j = await r.json().catch(() => ({}));
|
||||
if (!r.ok) {
|
||||
setMsg(j?.error || "Password change failed");
|
||||
return;
|
||||
}
|
||||
setMsg("Password updated.");
|
||||
setCurrent("");
|
||||
setNext("");
|
||||
setNext2("");
|
||||
} catch (e: any) {
|
||||
setMsg(e?.message || "Password change failed");
|
||||
} finally {
|
||||
setBusy(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div id="security" className="rounded-md border p-4 space-y-3">
|
||||
<h3 className="font-semibold">Change Password</h3>
|
||||
|
||||
<div className="grid sm:grid-cols-2 gap-3 text-sm">
|
||||
<label className="grid gap-1 sm:col-span-2">
|
||||
<span className="opacity-60">Current Password</span>
|
||||
<input
|
||||
className="rounded-md border px-2 py-1"
|
||||
type="password"
|
||||
value={current}
|
||||
onChange={(e) => setCurrent(e.target.value)}
|
||||
/>
|
||||
</label>
|
||||
|
||||
<label className="grid gap-1">
|
||||
<span className="opacity-60">New Password</span>
|
||||
<input
|
||||
className="rounded-md border px-2 py-1"
|
||||
type="password"
|
||||
value={next}
|
||||
onChange={(e) => setNext(e.target.value)}
|
||||
/>
|
||||
</label>
|
||||
|
||||
<label className="grid gap-1">
|
||||
<span className="opacity-60">Confirm New Password</span>
|
||||
<input
|
||||
className="rounded-md border px-2 py-1"
|
||||
type="password"
|
||||
value={next2}
|
||||
onChange={(e) => setNext2(e.target.value)}
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-3">
|
||||
<button
|
||||
onClick={onSave}
|
||||
disabled={busy}
|
||||
className="rounded-md bg-black text-white px-3 py-2 text-sm disabled:opacity-60"
|
||||
>
|
||||
{busy ? "Saving…" : "Update Password"}
|
||||
</button>
|
||||
{msg && <div className="text-sm opacity-80">{msg}</div>}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
161
components/account/ProfileEditor.tsx
Normal file
161
components/account/ProfileEditor.tsx
Normal file
|
|
@ -0,0 +1,161 @@
|
|||
// components/account/ProfileEditor.tsx
|
||||
"use client";
|
||||
|
||||
import { useEffect, useMemo, useState } from "react";
|
||||
|
||||
type Me = {
|
||||
id: string;
|
||||
username: string;
|
||||
first_name?: string | null;
|
||||
last_name?: string | null;
|
||||
email?: string | null;
|
||||
location?: string | null;
|
||||
avatar?: { id: string; filename_download?: string } | null;
|
||||
};
|
||||
|
||||
export default function ProfileEditor({
|
||||
me: meProp,
|
||||
onUpdated,
|
||||
}: {
|
||||
me?: Me | null;
|
||||
onUpdated?: () => void;
|
||||
}) {
|
||||
const [me, setMe] = useState<Me | null>(meProp ?? null);
|
||||
const [first_name, setFirst] = useState("");
|
||||
const [last_name, setLast] = useState("");
|
||||
const [email, setEmail] = useState("");
|
||||
const [location, setLocation] = useState("");
|
||||
const [msg, setMsg] = useState<string | null>(null);
|
||||
const [busy, setBusy] = useState(false);
|
||||
const [loading, setLoading] = useState(!meProp);
|
||||
|
||||
const nextAccount = "/portal/account";
|
||||
|
||||
useEffect(() => {
|
||||
if (meProp) {
|
||||
setMe(meProp);
|
||||
setLoading(false);
|
||||
} else {
|
||||
(async () => {
|
||||
try {
|
||||
const r = await fetch("/api/account", { credentials: "include", cache: "no-store" });
|
||||
if (!r.ok) throw new Error(String(r.status));
|
||||
const j = await r.json();
|
||||
const user: Me | undefined = j?.user ?? j?.data ?? undefined;
|
||||
if (!user) throw new Error("Bad response");
|
||||
setMe(user);
|
||||
} catch (e: any) {
|
||||
setMsg(`Failed to load: ${e?.message || e}`);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
})();
|
||||
}
|
||||
}, [meProp]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!me) return;
|
||||
setFirst(me.first_name || "");
|
||||
setLast(me.last_name || "");
|
||||
setEmail(me.email || "");
|
||||
setLocation(me.location || "");
|
||||
}, [me]);
|
||||
|
||||
const onSave = async () => {
|
||||
setMsg(null);
|
||||
setBusy(true);
|
||||
try {
|
||||
const payload: Record<string, any> = {
|
||||
first_name: first_name.trim(),
|
||||
last_name: last_name.trim(),
|
||||
email: email.trim() || null, // allow clearing email
|
||||
location: location.trim(),
|
||||
};
|
||||
const r = await fetch("/api/account/profile", {
|
||||
method: "PATCH",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify(payload),
|
||||
});
|
||||
if (r.status === 428) {
|
||||
// Need reauth for sensitive change (email)
|
||||
location.assign(`/auth/sign-in?reauth=1&next=${encodeURIComponent(nextAccount + "#security")}`);
|
||||
return;
|
||||
}
|
||||
if (r.status === 401) {
|
||||
location.assign(`/auth/sign-in?reauth=1&next=${encodeURIComponent(nextAccount)}`);
|
||||
return;
|
||||
}
|
||||
const j = await r.json().catch(() => ({}));
|
||||
if (!r.ok) {
|
||||
setMsg(j?.error || "Update failed");
|
||||
return;
|
||||
}
|
||||
setMsg("Saved.");
|
||||
onUpdated?.();
|
||||
} catch (e: any) {
|
||||
setMsg(e?.message || "Update failed");
|
||||
} finally {
|
||||
setBusy(false);
|
||||
}
|
||||
};
|
||||
|
||||
if (loading) return <div className="rounded-md border p-4 text-sm opacity-70">Loading editor…</div>;
|
||||
|
||||
return (
|
||||
<div className="rounded-md border p-4 space-y-3">
|
||||
<h3 className="font-semibold">Edit Profile</h3>
|
||||
|
||||
<div className="grid sm:grid-cols-2 gap-3 text-sm">
|
||||
<label className="grid gap-1">
|
||||
<span className="opacity-60">First Name</span>
|
||||
<input
|
||||
className="rounded-md border px-2 py-1"
|
||||
value={first_name}
|
||||
onChange={(e) => setFirst(e.target.value)}
|
||||
/>
|
||||
</label>
|
||||
|
||||
<label className="grid gap-1">
|
||||
<span className="opacity-60">Last Name</span>
|
||||
<input
|
||||
className="rounded-md border px-2 py-1"
|
||||
value={last_name}
|
||||
onChange={(e) => setLast(e.target.value)}
|
||||
/>
|
||||
</label>
|
||||
|
||||
<label className="grid gap-1 sm:col-span-2">
|
||||
<span className="opacity-60">Email (reauth required)</span>
|
||||
<input
|
||||
className="rounded-md border px-2 py-1"
|
||||
type="email"
|
||||
value={email}
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
placeholder="you@example.com"
|
||||
/>
|
||||
</label>
|
||||
|
||||
<label className="grid gap-1 sm:col-span-2">
|
||||
<span className="opacity-60">Location</span>
|
||||
<input
|
||||
className="rounded-md border px-2 py-1"
|
||||
value={location}
|
||||
onChange={(e) => setLocation(e.target.value)}
|
||||
placeholder="City, Country"
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-3">
|
||||
<button
|
||||
onClick={onSave}
|
||||
disabled={busy}
|
||||
className="rounded-md bg-black text-white px-3 py-2 text-sm disabled:opacity-60"
|
||||
>
|
||||
{busy ? "Saving…" : "Save Changes"}
|
||||
</button>
|
||||
{msg && <div className="text-sm opacity-80">{msg}</div>}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue