fixed structure, added dashboard header format

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

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,7 +15,8 @@ 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="p-5 pb-0">
<div className="flex items-center w-full mb-3"> <div className="flex items-center w-full mb-3">
<img className="h-16 md:h-24 m-2" src="/favicon.png" alt="" /> <img className="h-16 md:h-24 m-2" src="/favicon.png" alt="" />
<div> <div>
@ -27,13 +28,19 @@ export default function DashboardHeader() {
</button> </button>
</div> </div>
<div className="flex items-center w-full gap-3"> <div className="flex items-center w-full gap-3">
<Link href="/dash/time"> <Link href="/dash">
<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}> <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 Time Selection
</button> </button>
</Link> </Link>
<Link href="/dash/chgPassword"> <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}> <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 Change Password
</button> </button>
</Link> </Link>
@ -41,17 +48,26 @@ export default function DashboardHeader() {
session?.data?.isAdmin && ( session?.data?.isAdmin && (
<> <>
<Link href="/dash/admin"> <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}> <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 Admin
</button> </button>
</Link> </Link>
<Link href="/dash/admin/roster"> <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}> <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 Print Roster
</button> </button>
</Link> </Link>
<Link href="/dash/admin/rfid"> <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}> <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 RFID Log
</button> </button>
</Link> </Link>
@ -59,5 +75,10 @@ export default function DashboardHeader() {
) )
} }
</div> </div>
</div>
<div className={[
"w-full h-2",
url.startsWith("/dash/admin") ? "bg-emerald-600" : "bg-sky-600"
].join(" ")}></div>
</div>) </div>)
} }

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>
</>) </>)
} }

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 {