62 lines
1.7 KiB
JavaScript
62 lines
1.7 KiB
JavaScript
"use client";
|
|
|
|
import { useEffect } from "react";
|
|
import { useRouter } from "next/navigation";
|
|
import { useAuth } from "@/context/AuthContext";
|
|
|
|
export default function ProfilePage() {
|
|
const { user, loading, logout } = useAuth();
|
|
const router = useRouter();
|
|
|
|
useEffect(() => {
|
|
if (!loading && !user) {
|
|
router.replace("/login");
|
|
}
|
|
}, [user, loading, router]);
|
|
|
|
function handleLogout() {
|
|
logout();
|
|
|
|
router.push("/");
|
|
}
|
|
|
|
if (loading || !user) {
|
|
return <main className="auth-page"><p className="profile-loading">Loading…</p></main>;
|
|
}
|
|
|
|
const fields = [
|
|
{label: "Full Name", value: user.fullName},
|
|
{label: "Username", value: user.username},
|
|
{label: "Email", value: user.email},
|
|
{label: "Phone", value: user.phone || "—"},
|
|
{label: "Role", value: user.role},
|
|
...(user.storeName ? [{label: "Store", value: user.storeName}] : []),
|
|
];
|
|
|
|
return (
|
|
<main className="auth-page">
|
|
<div className="profile-card">
|
|
<div className="profile-avatar-circle">
|
|
{(user.fullName || user.username).charAt(0).toUpperCase()}
|
|
</div>
|
|
|
|
<h1 className="profile-name">{user.fullName || user.username}</h1>
|
|
<span className="profile-role-badge">{user.role}</span>
|
|
|
|
<dl className="profile-fields">
|
|
{fields.map(({ label, value }) => (
|
|
<div key={label} className="profile-field-row">
|
|
<dt className="profile-field-label">{label}</dt>
|
|
<dd className="profile-field-value">{value}</dd>
|
|
</div>
|
|
))}
|
|
</dl>
|
|
|
|
<button className="auth-submit-btn profile-logout-btn" onClick={handleLogout}>
|
|
Log Out
|
|
</button>
|
|
</div>
|
|
</main>
|
|
);
|
|
}
|