aaronleetw/savage-tracking
1
0
Fork 0
mirror of https://github.com/aaronleetw/savage-tracking.git synced 2024-11-14 19:11:39 -08:00
Code Issues Projects Releases Packages Wiki Activity Actions

fixed structure, added dashboard header format

Browse source
This commit is contained in:
Aaron Lee 2023-12-22 11:56:12 +08:00
parent 4fd2900f5b
commit af65bb7191
3 changed files with 65 additions and 53 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

107
src/components/DashboardHeader.tsx
View file

@ -3,7 +3,7 @@ import { useRouter } from "next/navigation";
import { useEffect } from "react"; import { useEffect } from "react";
import { api } from "~/utils/api"; import { api } from "~/utils/api";
export default function DashboardHeader() { export default function DashboardHeader({ url }: { url: string }) {
const { push } = useRouter(); const { push } = useRouter();
const session = api.admin.session.useQuery(); const session = api.admin.session.useQuery();
const logout = api.admin.logout.useMutation(); const logout = api.admin.logout.useMutation();
@ -15,49 +15,70 @@ export default function DashboardHeader() {
}, [logout.isSuccess]) }, [logout.isSuccess])
return ( return (
<div className="text-3xl md:text-5xl font-bold bg-indigo-100 p-5 pb-0"> <div className="text-3xl md:text-5xl font-bold bg-indigo-100">
<div className="flex items-center w-full mb-3"> <div className="p-5 pb-0">
<img className="h-16 md:h-24 m-2" src="/favicon.png" alt="" /> <div className="flex items-center w-full mb-3">
<div> <img className="h-16 md:h-24 m-2" src="/favicon.png" alt="" />
<h1 className="mb-2">Savage Tracking</h1> <div>
<h2 className="text-2xl">Hi, {session?.data?.name} ({session?.data?.grade} {session?.data?.class})</h2> <h1 className="mb-2">Savage Tracking</h1>
<h2 className="text-2xl">Hi, {session?.data?.name} ({session?.data?.grade} {session?.data?.class})</h2>
</div>
<button className="text-2xl ml-10 bg-indigo-600 px-3 py-2 rounded text-white focus:ring focus:ring-indigo-200 focus:ring-opacity-70 disabled:bg-indigo-400" disabled={logout.isLoading} onClick={() => logout.mutate()}>
Logout
</button>
</div>
<div className="flex items-center w-full gap-3">
<Link href="/dash">
<button className={[
"text-xl px-3 py-2 rounded-lg rounded-b-none focus:ring focus:ring-sky-200 focus:ring-opacity-70",
url == "/dash" ? "bg-sky-600 text-white" : "bg-sky-300 text-black"
].join(" ")}>
Time Selection
</button>
</Link>
<Link href="/dash/chgPassword">
<button className={[
"text-xl px-3 py-2 rounded-lg rounded-b-none focus:ring focus:ring-sky-200 focus:ring-opacity-70",
url == "/dash/chgPassword" ? "bg-sky-600 text-white" : "bg-sky-300 text-black"
].join(" ")}>
Change Password
</button>
</Link>
{
session?.data?.isAdmin && (
<>
<Link href="/dash/admin">
<button className={[
"text-xl px-3 py-2 rounded-lg rounded-b-none focus:ring focus:ring-emerald-200 focus:ring-opacity-70",
url == "/dash/admin" ? "bg-emerald-600 text-white" : "bg-emerald-200 text-black"
].join(" ")}>
Admin
</button>
</Link>
<Link href="/dash/admin/roster">
<button className={[
"text-xl px-3 py-2 rounded-lg rounded-b-none focus:ring focus:ring-emerald-200 focus:ring-opacity-70",
url == "/dash/admin/roster" ? "bg-emerald-600 text-white" : "bg-emerald-200 text-black"
].join(" ")}>
Print Roster
</button>
</Link>
<Link href="/dash/admin/rfid">
<button className={[
"text-xl px-3 py-2 rounded-lg rounded-b-none focus:ring focus:ring-emerald-200 focus:ring-opacity-70",
url == "/dash/admin/rfid" ? "bg-emerald-600 text-white" : "bg-emerald-200 text-black"
].join(" ")}>
RFID Log
</button>
</Link>
</>
)
}
</div> </div>
<button className="text-2xl ml-10 bg-indigo-600 px-3 py-2 rounded text-white focus:ring focus:ring-indigo-200 focus:ring-opacity-70 disabled:bg-indigo-400" disabled={logout.isLoading} onClick={() => logout.mutate()}>
Logout
</button>
</div>
<div className="flex items-center w-full gap-3">
<Link href="/dash/time">
<button className="text-xl bg-sky-600 px-3 py-2 rounded-lg rounded-b-none text-white focus:ring focus:ring-sky-200 focus:ring-opacity-70 disabled:bg-sky-400" disabled={logout.isLoading}>
Time Selection
</button>
</Link>
<Link href="/dash/chgPassword">
<button className="text-xl bg-sky-600 px-3 py-2 rounded-lg rounded-b-none text-white focus:ring focus:ring-sky-200 focus:ring-opacity-70 disabled:bg-sky-400" disabled={logout.isLoading}>
Change Password
</button>
</Link>
{
session?.data?.isAdmin && (
<>
<Link href="/dash/admin">
<button className="text-xl bg-emerald-600 px-3 py-2 rounded-lg rounded-b-none text-white focus:ring focus:ring-emerald-200 focus:ring-opacity-70 disabled:bg-emerald-400" disabled={logout.isLoading}>
Admin
</button>
</Link>
<Link href="/dash/admin/roster">
<button className="text-xl bg-emerald-600 px-3 py-2 rounded-lg rounded-b-none text-white focus:ring focus:ring-emerald-200 focus:ring-opacity-70 disabled:bg-emerald-400" disabled={logout.isLoading}>
Print Roster
</button>
</Link>
<Link href="/dash/admin/rfid">
<button className="text-xl bg-emerald-600 px-3 py-2 rounded-lg rounded-b-none text-white focus:ring focus:ring-emerald-200 focus:ring-opacity-70 disabled:bg-emerald-400" disabled={logout.isLoading}>
RFID Log
</button>
</Link>
</>
)
}
</div> </div>
<div className={[
"w-full h-2",
url.startsWith("/dash/admin") ? "bg-emerald-600" : "bg-sky-600"
].join(" ")}></div>
</div>) </div>)
} }

2
src/pages/dash.tsx → src/pages/dash/index.tsx
View file

@ -24,7 +24,7 @@ export default function Dash() {
<link rel="icon" href="/favicon.png" /> <link rel="icon" href="/favicon.png" />
</Head> </Head>
<main className=""> <main className="">
<DashboardHeader /> <DashboardHeader url="/dash" />
</main> </main>
</>) </>)
} }

9
src/server/api/routers/admin.ts
View file

@ -17,16 +17,7 @@ export const adminRouter = createTRPCRouter({
}).then((user) => { }).then((user) => {
const result = compareSync(input.password, user?.password || ""); const result = compareSync(input.password, user?.password || "");
if (result) { if (result) {
console.log(user)
console.log(PublicUserType.parse({
grade: user?.grade,
class: user?.class,
name: user?.name,
username: user?.username,
isAdmin: user?.isAdmin,
}))
const session = PublicUserType.parse(user)!; const session = PublicUserType.parse(user)!;
console.log(session)
const token = jwt.sign(session, process.env.JWT_SECRET || "", { expiresIn: "1d" }); const token = jwt.sign(session, process.env.JWT_SECRET || "", { expiresIn: "1d" });
ctx.res.setHeader("Set-Cookie", `token=${token}; Path=/; HttpOnly; SameSite=Strict; Max-Age=${60 * 60 * 24};`); ctx.res.setHeader("Set-Cookie", `token=${token}; Path=/; HttpOnly; SameSite=Strict; Max-Age=${60 * 60 * 24};`);
return { return {