148 lines
4 KiB
TypeScript
148 lines
4 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect, useState } from "react";
|
|
import { useRouter } from "next/navigation";
|
|
import { useAuth, Permission } from "./auth-context";
|
|
import { API_URL } from "./config";
|
|
import { sharedStyles } from "./styles/shared";
|
|
|
|
export default function Home() {
|
|
const [count, setCount] = useState<number | null>(null);
|
|
const { user, isLoading, logout, hasPermission } = useAuth();
|
|
const router = useRouter();
|
|
|
|
const canViewCounter = hasPermission(Permission.VIEW_COUNTER);
|
|
|
|
useEffect(() => {
|
|
if (!isLoading) {
|
|
if (!user) {
|
|
router.push("/login");
|
|
} else if (!canViewCounter) {
|
|
// Redirect to audit if user has audit permission, otherwise to login
|
|
router.push(hasPermission(Permission.VIEW_AUDIT) ? "/audit" : "/login");
|
|
}
|
|
}
|
|
}, [isLoading, user, router, canViewCounter, hasPermission]);
|
|
|
|
useEffect(() => {
|
|
if (user) {
|
|
fetch(`${API_URL}/api/counter`, {
|
|
credentials: "include",
|
|
})
|
|
.then((res) => res.json())
|
|
.then((data) => setCount(data.value))
|
|
.catch(() => setCount(null));
|
|
}
|
|
}, [user]);
|
|
|
|
const increment = async () => {
|
|
const res = await fetch(`${API_URL}/api/counter/increment`, {
|
|
method: "POST",
|
|
credentials: "include",
|
|
});
|
|
const data = await res.json();
|
|
setCount(data.value);
|
|
};
|
|
|
|
const handleLogout = async () => {
|
|
await logout();
|
|
router.push("/login");
|
|
};
|
|
|
|
if (isLoading) {
|
|
return (
|
|
<main style={styles.main}>
|
|
<div style={styles.loader}>Loading...</div>
|
|
</main>
|
|
);
|
|
}
|
|
|
|
if (!user || !canViewCounter) {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<main style={styles.main}>
|
|
<div style={styles.header}>
|
|
<div style={styles.nav}>
|
|
<span style={styles.navCurrent}>Counter</span>
|
|
<span style={styles.navDivider}>•</span>
|
|
<a href="/sum" style={styles.navLink}>Sum</a>
|
|
</div>
|
|
<div style={styles.userInfo}>
|
|
<span style={styles.userEmail}>{user.email}</span>
|
|
<button onClick={handleLogout} style={styles.logoutBtn}>
|
|
Sign out
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div style={styles.content}>
|
|
<div style={styles.counterCard}>
|
|
<span style={styles.counterLabel}>Current Count</span>
|
|
<h1 style={styles.counter}>{count === null ? "..." : count}</h1>
|
|
<button onClick={increment} style={styles.incrementBtn}>
|
|
<span style={styles.plusIcon}>+</span>
|
|
Increment
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
);
|
|
}
|
|
|
|
const pageStyles: Record<string, React.CSSProperties> = {
|
|
counterCard: {
|
|
background: "rgba(255, 255, 255, 0.03)",
|
|
backdropFilter: "blur(10px)",
|
|
border: "1px solid rgba(255, 255, 255, 0.08)",
|
|
borderRadius: "32px",
|
|
padding: "4rem 5rem",
|
|
textAlign: "center",
|
|
boxShadow: "0 25px 50px -12px rgba(0, 0, 0, 0.5)",
|
|
},
|
|
counterLabel: {
|
|
fontFamily: "'DM Sans', system-ui, sans-serif",
|
|
display: "block",
|
|
color: "rgba(255, 255, 255, 0.4)",
|
|
fontSize: "0.875rem",
|
|
textTransform: "uppercase",
|
|
letterSpacing: "0.1em",
|
|
marginBottom: "1rem",
|
|
},
|
|
counter: {
|
|
fontFamily: "'Instrument Serif', Georgia, serif",
|
|
fontSize: "8rem",
|
|
fontWeight: 400,
|
|
color: "#fff",
|
|
margin: 0,
|
|
lineHeight: 1,
|
|
background: "linear-gradient(135deg, #fff 0%, #a78bfa 100%)",
|
|
WebkitBackgroundClip: "text",
|
|
WebkitTextFillColor: "transparent",
|
|
backgroundClip: "text",
|
|
},
|
|
incrementBtn: {
|
|
fontFamily: "'DM Sans', system-ui, sans-serif",
|
|
marginTop: "2.5rem",
|
|
padding: "1rem 2.5rem",
|
|
fontSize: "1.125rem",
|
|
fontWeight: 600,
|
|
background: "linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%)",
|
|
color: "#fff",
|
|
border: "none",
|
|
borderRadius: "16px",
|
|
cursor: "pointer",
|
|
display: "inline-flex",
|
|
alignItems: "center",
|
|
gap: "0.5rem",
|
|
transition: "transform 0.2s, box-shadow 0.2s",
|
|
boxShadow: "0 4px 14px rgba(99, 102, 241, 0.4)",
|
|
},
|
|
plusIcon: {
|
|
fontSize: "1.5rem",
|
|
fontWeight: 400,
|
|
},
|
|
};
|
|
|
|
const styles = { ...sharedStyles, ...pageStyles };
|