add: login status detection in frontend

packages/backend/middleware/captcha.ts

@@ -4,7 +4,7 @@ import { SlidingWindow } from "@core/mq/slidingWindow.ts";
 import { getCaptchaConfigMaxDuration, getCurrentCaptchaDifficulty } from "@/lib/auth/captchaDifficulty.ts";
 import { sqlCred } from "@core/db/dbNew.ts";
 import { redis } from "@core/db/redis.ts";
-import { verify } from 'hono/jwt';
+import { verify } from "hono/jwt";
 import { JwtTokenInvalid, JwtTokenExpired } from "hono/utils/jwt/types";
 import { getJWTsecret } from "@/lib/auth/getJWTsecret.ts";
 import { lockManager } from "@core/mq/lockManager.ts";
@@ -23,7 +23,8 @@ export const captchaMiddleware = async (c: Context, next: Next) => {
 	if (!authHeader) {
 		const response: ErrorResponse = {
 			message: "'Authorization' header is missing.",
-			code: "UNAUTHORIZED"
+			code: "UNAUTHORIZED",
+			errors: []
 		};
 		return c.json<ErrorResponse>(response, 401);
 	}
@@ -32,7 +33,8 @@ export const captchaMiddleware = async (c: Context, next: Next) => {
 	if (!authIsBearer || authHeader.length < 8) {
 		const response: ErrorResponse = {
 			message: "'Authorization' header is invalid.",
-			code: "INVALID_HEADER"
+			code: "INVALID_HEADER",
+			errors: []
 		};
 		return c.json<ErrorResponse>(response, 400);
 	}
@@ -60,47 +62,48 @@ export const captchaMiddleware = async (c: Context, next: Next) => {
 		if (consumed) {
 			const response: ErrorResponse = {
 				message: "Token has already been used.",
-				code: "INVALID_CREDENTIALS"
+				code: "INVALID_CREDENTIALS",
+				errors: []
 			};
 			return c.json<ErrorResponse>(response, 401);
 		}
 		if (difficulty < requiredDifficulty) {
 			const response: ErrorResponse = {
 				message: "Token too weak.",
-				code: "UNAUTHORIZED"
+				code: "UNAUTHORIZED",
+				errors: []
 			};
 			return c.json<ErrorResponse>(response, 401);
 		}
 		const EXPIRE_FIVE_MINUTES = 300;
 		await lockManager.acquireLock(tokenID, EXPIRE_FIVE_MINUTES);
-	}
+	} catch (e) {
-	catch (e) {
 		if (e instanceof JwtTokenInvalid) {
 			const response: ErrorResponse = {
 				message: "Failed to verify the token.",
-				code: "INVALID_CREDENTIALS"
+				code: "INVALID_CREDENTIALS",
+				errors: []
 			};
 			return c.json<ErrorResponse>(response, 400);
-		}
+		} else if (e instanceof JwtTokenExpired) {
-		else if (e instanceof JwtTokenExpired) {
 			const response: ErrorResponse = {
 				message: "Token expired.",
-				code: "INVALID_CREDENTIALS"
+				code: "INVALID_CREDENTIALS",
+				errors: []
 			};
 			return c.json<ErrorResponse>(response, 400);
-		}
+		} else if (e instanceof ValidationError) {
-		else if (e instanceof ValidationError) {
 			const response: ErrorResponse = {
 				code: "INVALID_QUERY_PARAMS",
 				message: "Invalid query parameters",
 				errors: e.errors
 			};
 			return c.json<ErrorResponse>(response, 400);
-		}
+		} else {
-		else {
 			const response: ErrorResponse = {
 				message: "Unknown error.",
-				code: "UNKNOWN_ERROR"
+				code: "UNKNOWN_ERROR",
+				errors: []
 			};
 			return c.json<ErrorResponse>(response, 500);
 		}
@@ -114,4 +117,4 @@ export const captchaMiddleware = async (c: Context, next: Next) => {
 	await window.event(`captcha-${identifierWithIP}`);
 
 	await next();
-};
+};

packages/backend/routes/captcha/[id]/result/GET.ts

@@ -34,7 +34,8 @@ export const verifyChallengeHandler = createHandlers(
 		if (!ans) {
 			const response: ErrorResponse = {
 				message: "Missing required query parameter: ans",
-				code: "INVALID_QUERY_PARAMS"
+				code: "INVALID_QUERY_PARAMS",
+				errors: []
 			};
 			return c.json<ErrorResponse>(response, 400);
 		}
@@ -46,26 +47,30 @@ export const verifyChallengeHandler = createHandlers(
 				code: "ENTITY_NOT_FOUND",
 				i18n: {
 					key: "backend.error.captcha_not_found"
-				}
+				},
+				errors: []
 			};
 			return c.json<ErrorResponse>(response, 401);
 		} else if (data.error && res.status === 400) {
 			const response: ErrorResponse = {
 				message: data.error,
-				code: "INVALID_QUERY_PARAMS"
+				code: "INVALID_QUERY_PARAMS",
+				errors: []
 			};
 			return c.json<ErrorResponse>(response, 400);
 		} else if (data.error) {
 			const response: ErrorResponse = {
 				message: data.error,
-				code: "UNKNOWN_ERROR"
+				code: "UNKNOWN_ERROR",
+				errors: []
 			};
 			return c.json<ErrorResponse>(response, 500);
 		}
 		if (!data.success) {
 			const response: ErrorResponse = {
 				message: "Incorrect answer",
-				code: "INVALID_CREDENTIALS"
+				code: "INVALID_CREDENTIALS",
+				errors: []
 			};
 			return c.json<ErrorResponse>(response, 401);
 		}

packages/backend/routes/user/index.ts

@@ -1 +1,2 @@
-export * from "./register.ts";
+export * from "./POST.ts";
+export * from "./session/[id]/GET.ts";

packages/backend/routes/user/session/[id]/GET.ts

@@ -0,0 +1,32 @@
+import { Context } from "hono";
+import { Bindings, BlankEnv } from "hono/types";
+import { ErrorResponse } from "src/schema";
+import { createHandlers } from "src/utils.ts";
+import { sqlCred } from "@core/db/dbNew";
+import { DatabaseUserType } from "@core/db/schema";
+
+export const getUserByLoginSessionHandler = createHandlers(
+	async (c: Context<BlankEnv & { Bindings: Bindings }, "/user/session/:id">) => {
+		const id = c.req.param("id");
+		const users = await sqlCred<DatabaseUserType[]>`
+    		SELECT u.*
+            FROM users u
+            JOIN login_sessions ls ON u.id = ls.uid
+            WHERE ls.id = ${id};
+        `;
+		if (users.length === 0) {
+			const response: ErrorResponse = {
+				message: "Cannot find user",
+				code: "ENTITY_NOT_FOUND",
+				errors: []
+			};
+			return c.json<ErrorResponse>(response, 404);
+		}
+		const user = users[0];
+		return c.json({
+			username: user.username,
+			nickname: user.nickname,
+			role: user.role
+		});
+	}
+);

packages/backend/src/routing.ts

@@ -1,23 +1,23 @@
 import { rootHandler } from "routes";
 import { pingHandler } from "routes/ping";
-import { registerHandler } from "routes/user";
+import { getUserByLoginSessionHandler, registerHandler } from "routes/user";
 import { videoInfoHandler, getSnapshotsHanlder } from "routes/video";
 import { Hono } from "hono";
 import { Variables } from "hono/types";
 import { createCaptchaSessionHandler, verifyChallengeHandler } from "routes/captcha";
-import { getCaptchaDifficultyHandler } from "../routes/captcha/difficulty/GET.ts";
+import { getCaptchaDifficultyHandler } from "routes/captcha/difficulty/GET.ts";
 
 export function configureRoutes(app: Hono<{ Variables: Variables }>) {
 	app.get("/", ...rootHandler);
 	app.all("/ping", ...pingHandler);
 
 	app.get("/video/:id/snapshots", ...getSnapshotsHanlder);
-	app.post("/user", ...registerHandler);
-
 	app.get("/video/:id/info", ...videoInfoHandler);
 
+	app.post("/user", ...registerHandler);
+	app.get("/user/session/:id", ...getUserByLoginSessionHandler);
+
 	app.post("/captcha/session", ...createCaptchaSessionHandler);
 	app.get("/captcha/:id/result", ...verifyChallengeHandler);
-
+	app.get("/captcha/difficulty", ...getCaptchaDifficultyHandler);
-	app.get("/captcha/difficulty", ...getCaptchaDifficultyHandler)
 }

packages/backend/src/schema.d.ts

@@ -43,6 +43,12 @@ export interface SignUpResponse {
     token: string;
 }
 
+export interface UserResponse {
+    username: string;
+    nickname: string | null;
+    role: string;
+}
+
 export type CaptchaVerificationRawResponse = {
 	token: string;
 }

packages/core/db/schema.d.ts

@@ -53,3 +53,12 @@ export interface SnapshotScheduleType {
 	finished_at?: string;
 	status: string;
 }
+
+export interface DatabaseUserType {
+	id: number;
+	username: string;
+	nickname: string | null;
+	password: string;
+	unq_id: string;
+	role: string;
+}

packages/core/db/videoSnapshot.ts

@@ -1,62 +0,0 @@
-import type { Client } from "https://deno.land/x/postgres@v0.19.3/mod.ts";
-import type { VideoSnapshotType } from "./schema.d.ts";
-
-export async function getVideoSnapshots(
-	client: Client,
-	aid: number,
-	limit: number,
-	pageOrOffset: number,
-	reverse: boolean,
-	mode: "page" | "offset" = "page",
-) {
-	const offset = mode === "page" ? (pageOrOffset - 1) * limit : pageOrOffset;
-	const queryDesc: string = `
-        SELECT *
-        FROM video_snapshot
-        WHERE aid = $1
-        ORDER BY created_at DESC
-        LIMIT $2
-        OFFSET $3
-    `;
-	const queryAsc: string = `
-        SELECT *
-        FROM video_snapshot
-        WHERE aid = $1
-        ORDER BY created_at
-        LIMIT $2 OFFSET $3
-    `;
-	const query = reverse ? queryAsc : queryDesc;
-	const queryResult = await client.queryObject<VideoSnapshotType>(query, [aid, limit, offset]);
-	return queryResult.rows;
-}
-
-export async function getVideoSnapshotsByBV(
-	client: Client,
-	bv: string,
-	limit: number,
-	pageOrOffset: number,
-	reverse: boolean,
-	mode: "page" | "offset" = "page",
-) {
-	const offset = mode === "page" ? (pageOrOffset - 1) * limit : pageOrOffset;
-	const queryAsc = `
-        SELECT vs.*
-        FROM video_snapshot vs
-        JOIN bilibili_metadata bm ON vs.aid = bm.aid
-        WHERE bm.bvid = $1
-        ORDER BY vs.created_at
-        LIMIT $2
-        OFFSET $3
-    `;
-	const queryDesc: string = `
-        SELECT *
-        FROM video_snapshot vs
-        JOIN bilibili_metadata bm ON vs.aid = bm.aid
-        WHERE bm.bvid = $1
-        ORDER BY vs.created_at DESC
-        LIMIT $2 OFFSET $3
-    `;
-	const query = reverse ? queryAsc : queryDesc;
-	const queryResult = await client.queryObject<VideoSnapshotType>(query, [bv, limit, offset]);
-	return queryResult.rows;
-}

packages/next/app/[locale]/fonts/MiSans/MiSans.css

@@ -2,7 +2,7 @@
 	font-family: "MiSans VF";
 	font-style: normal;
 	font-weight: 150 700;
-	font-display: swap;
+	font-display: optional;
 	src: url("MiSans VF.woff2") format("woff2");
 }
 

packages/next/app/[locale]/page.tsx

@@ -1,9 +1,21 @@
 import { Header } from "@/components/shell/Header";
+import { fetcher } from "@/lib/net";
+import { UserResponse } from "@backend/src/schema";
+import { cookies } from "next/headers";
 
-export default function Home() {
+export default async function Home() {
+	const cookieStore = await cookies();
+	const sessionID = cookieStore.get("session_id");
+	let user: undefined | UserResponse = undefined;
+	if (sessionID) {
+		try {
+			user = await fetcher<UserResponse>(`${process.env.BACKEND_URL}/user/session/${sessionID.value}`);
+		} finally {
+		}
+	}
 	return (
 		<>
-			<Header />
+			<Header user={user} />
 			<main className="flex flex-col items-center justify-center h-full flex-grow gap-8 px-4">
 				<h1 className="text-4xl font-medium text-center">正在施工中……</h1>
 				<p>在搜索栏输入BV号或AV号，可以查询目前数据库收集到的信息~</p>

packages/next/app/[locale]/signup/request.tsx

@@ -1,7 +1,7 @@
 import { Dispatch, JSX, SetStateAction } from "react";
 import { ApiRequestError, fetcher } from "@/lib/net";
 import type { CaptchaVerificationRawResponse, ErrorResponse, SignUpResponse } from "@backend/src/schema";
-import Link from "next/link";
+import { Link } from "@/i18n/navigation";
 import { LocalizedMessage } from "./SignUpForm";
 import { ErrorDialog } from "./ErrorDialog";
 import { string, object, ValidationError } from "yup";

packages/next/components/shell/Header.tsx

@@ -16,8 +16,13 @@ import { InfoIcon } from "@/components/icons/InfoIcon";
 import { HomeIcon } from "@/components/icons/HomeIcon";
 import { TextButton } from "@/components/ui/Buttons/TextButton";
 import { Link } from "@/i18n/navigation";
+import { UserResponse } from "@backend/src/schema";
 
-export const HeaderDestop = () => {
+interface HeaderProps {
+	user?: UserResponse;
+}
+
+export const HeaderDestop = ({ user }: HeaderProps) => {
 	return (
 		<div className="hidden md:flex relative top-0 left-0 w-full h-28 z-20 justify-between">
 			<div className="w-[305px] xl:ml-8 inline-flex items-center">
@@ -37,14 +42,19 @@ export const HeaderDestop = () => {
 				className="inline-flex relative gap-6 h-full lg:right-12
     				text-xl font-medium items-center w-[15rem] min-w-[8rem] mr-4 lg:mr-0 lg:w-[305px] justify-end"
 			>
-				<a href="/signup">注册</a>
+				{user ? (
+					<Link href="/my/profile">{user.nickname || user.username}</Link>
+				) : (
+					<Link href="/signup">注册</Link>
+				)}
+
 				<a href="/about">关于</a>
 			</div>
 		</div>
 	);
 };
 
-export const HeaderMobile = () => {
+export const HeaderMobile = ({ user }: HeaderProps) => {
 	const [showDrawer, setShowDrawer] = useState(false);
 	const [showsearchBox, setShowsearchBox] = useState(false);
 
@@ -125,11 +135,11 @@ export const HeaderMobile = () => {
 	);
 };
 
-export const Header = () => {
+export const Header = (props: HeaderProps) => {
 	return (
 		<>
-			<HeaderDestop />
+			<HeaderDestop {...props} />
-			<HeaderMobile />
+			<HeaderMobile {...props} />
 		</>
 	);
 };