jackmechem/server-dash
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Authentication updates

Browse source
This commit is contained in:
Jack Mechem 2026-03-28 16:01:45 -07:00
parent 98b1daa7d3
commit 3015c98246
15 changed files with 657 additions and 165 deletions
Download patch file Download diff file Expand all files Collapse all files

78
app/components/NavBar.tsx
View file

@ -1,35 +1,55 @@
"use client";
import { useEffect, useState } from "react";
import { useRouter } from "next/navigation";
interface NavBarProps {
online: boolean;
online: boolean;
}
export default function NavBar({ online }: NavBarProps) {
return (
<nav className="flex items-center justify-between pt-7 pb-6 mb-13 border-b border-gray-200">
<div className="flex items-center gap-3">
<span
className="text-lg font-medium tracking-tight text-gray-900"
style={{ fontFamily: "'Playfair Display', serif" }}
>
Jack&apos;s Servers
</span>
</div>
const router = useRouter();
const [auth, setAuth] = useState(false);
<div
className={`flex items-center gap-2 text-xs font-medium px-3 py-1.5 rounded-full border ${
online
? "text-green-700 bg-green-50 border-green-200"
: "text-gray-500 bg-gray-50 border-gray-200"
}`}
>
<span
className="w-1.5 h-1.5 rounded-full"
style={{
background: online ? "#22c55e" : "#d1d5db",
animation: online ? "pulse-dot 2s infinite" : "none",
}}
/>
{online ? "Online" : "Connecting..."}
</div>
</nav>
);
useEffect(() => {
fetch("/api/auth/check")
.then((r) => setAuth(r.ok))
.catch(() => setAuth(false));
}, []);
async function handleLogout() {
await fetch("/api/auth/logout", { method: "POST" });
router.push("/auth");
}
return (
<nav className="flex items-center justify-between pt-7 pb-6 mb-13 border-b border-gray-200">
<div className="flex items-center gap-2">
{auth && (
<button
onClick={handleLogout}
className="flex items-center gap-2 text-xs text-red-700 bg-red-50 border border-red-200 px-3 py-1.5 rounded-full cursor-pointer"
>
Log out
</button>
)}
</div>
<div
className={`flex items-center gap-2 text-xs font-medium px-3 py-1.5 rounded-full border ${
online
? "text-green-700 bg-green-50 border-green-200"
: "text-gray-500 bg-gray-50 border-gray-200"
}`}
>
<span
className="w-1.5 h-1.5 rounded-full"
style={{
background: online ? "#22c55e" : "#d1d5db",
animation: online ? "pulse-dot 2s infinite" : "none",
}}
/>
{online ? "Online" : "Connecting..."}
</div>
</nav>
);
}