ref: use axios for API requests
add: a useCaptcha hook
This commit is contained in:
parent
d0d9c21aba
commit
7f9563a2a6
@ -6,8 +6,8 @@ import { RateLimiter } from "@koshnic/ratelimit";
|
||||
import { ErrorResponse } from "@/src/schema";
|
||||
import { redis } from "@core/db/redis.ts";
|
||||
|
||||
export const getIdentifier = (c: Context, includeIP: boolean = true) => {
|
||||
let ipAddr = generateRandomId(6);
|
||||
export const getUserIP = (c: Context) => {
|
||||
let ipAddr = null;
|
||||
const info = getConnInfo(c);
|
||||
if (info.remote && info.remote.address) {
|
||||
ipAddr = info.remote.address;
|
||||
@ -16,6 +16,14 @@ export const getIdentifier = (c: Context, includeIP: boolean = true) => {
|
||||
if (forwardedFor) {
|
||||
ipAddr = forwardedFor.split(",")[0];
|
||||
}
|
||||
return ipAddr;
|
||||
};
|
||||
|
||||
export const getIdentifier = (c: Context, includeIP: boolean = true) => {
|
||||
let ipAddr = generateRandomId(6);
|
||||
if (getUserIP(c)) {
|
||||
ipAddr = getUserIP(c);
|
||||
}
|
||||
const path = c.req.path;
|
||||
const method = c.req.method;
|
||||
const ipIdentifier = includeIP ? `@${ipAddr}` : "";
|
||||
@ -41,4 +49,4 @@ export const registerRateLimiter = async (c: Context<BlankEnv, "/user", {}>, nex
|
||||
}
|
||||
|
||||
await next();
|
||||
};
|
||||
};
|
||||
|
@ -2,7 +2,7 @@ import { Context } from "hono";
|
||||
import { Bindings, BlankEnv } from "hono/types";
|
||||
import { ErrorResponse } from "src/schema";
|
||||
import { createHandlers } from "src/utils.ts";
|
||||
import { sign } from 'hono/jwt'
|
||||
import { sign } from "hono/jwt";
|
||||
import { generateRandomId } from "@core/lib/randomID.ts";
|
||||
import { getJWTsecret } from "lib/auth/getJWTsecret.ts";
|
||||
|
||||
@ -43,7 +43,10 @@ export const verifyChallengeHandler = createHandlers(
|
||||
if (data.error && res.status === 404) {
|
||||
const response: ErrorResponse = {
|
||||
message: data.error,
|
||||
code: "ENTITY_NOT_FOUND"
|
||||
code: "ENTITY_NOT_FOUND",
|
||||
i18n: {
|
||||
key: "backend.error.captcha_not_found"
|
||||
}
|
||||
};
|
||||
return c.json<ErrorResponse>(response, 401);
|
||||
} else if (data.error && res.status === 400) {
|
||||
@ -74,13 +77,16 @@ export const verifyChallengeHandler = createHandlers(
|
||||
const jwtSecret = r as string;
|
||||
|
||||
const tokenID = generateRandomId(6);
|
||||
const NOW = Math.floor(Date.now() / 1000)
|
||||
const NOW = Math.floor(Date.now() / 1000);
|
||||
const FIVE_MINUTES_LATER = NOW + 60 * 5;
|
||||
const jwt = await sign({
|
||||
difficulty: data.difficulty!,
|
||||
id: tokenID,
|
||||
exp: FIVE_MINUTES_LATER
|
||||
}, jwtSecret);
|
||||
const jwt = await sign(
|
||||
{
|
||||
difficulty: data.difficulty!,
|
||||
id: tokenID,
|
||||
exp: FIVE_MINUTES_LATER
|
||||
},
|
||||
jwtSecret
|
||||
);
|
||||
return c.json({
|
||||
token: jwt
|
||||
});
|
||||
|
@ -1,2 +1,2 @@
|
||||
export * from "./session/POST.ts";
|
||||
export * from "./[id]/result/GET.ts";
|
||||
export * from "./[id]/result/GET.ts";
|
||||
|
@ -2,58 +2,50 @@ import { createHandlers } from "src/utils.ts";
|
||||
import { getCurrentCaptchaDifficulty } from "@/lib/auth/captchaDifficulty.ts";
|
||||
import { sqlCred } from "@core/db/dbNew.ts";
|
||||
import { object, string, ValidationError } from "yup";
|
||||
import { ErrorResponse } from "@/src/schema";
|
||||
import { CaptchaSessionResponse, ErrorResponse } from "@/src/schema";
|
||||
import type { ContentfulStatusCode } from "hono/utils/http-status";
|
||||
|
||||
const bodySchema = object({
|
||||
route: string().matches(/(?:GET|POST|PUT|PATCH|DELETE)-\/.*/g)
|
||||
route: string().matches(/(?:GET|POST|PUT|PATCH|DELETE)-\/.*/g)
|
||||
});
|
||||
|
||||
interface CaptchaSessionResponse {
|
||||
success: boolean;
|
||||
id: string;
|
||||
g: string;
|
||||
n: string;
|
||||
t: number;
|
||||
}
|
||||
|
||||
const createNewChallenge = async (difficulty: number) => {
|
||||
const baseURL = process.env["UCAPTCHA_URL"];
|
||||
const url = new URL(baseURL);
|
||||
url.pathname = "/challenge";
|
||||
return await fetch(url.toString(), {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify({
|
||||
difficulty: difficulty,
|
||||
})
|
||||
});
|
||||
}
|
||||
const baseURL = process.env["UCAPTCHA_URL"];
|
||||
const url = new URL(baseURL);
|
||||
url.pathname = "/challenge";
|
||||
return await fetch(url.toString(), {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json"
|
||||
},
|
||||
body: JSON.stringify({
|
||||
difficulty: difficulty
|
||||
})
|
||||
});
|
||||
};
|
||||
|
||||
export const createCaptchaSessionHandler = createHandlers(async (c) => {
|
||||
try {
|
||||
const requestBody = await bodySchema.validate(await c.req.json());
|
||||
const { route } = requestBody;
|
||||
const difficuly = await getCurrentCaptchaDifficulty(sqlCred, route)
|
||||
const res = await createNewChallenge(difficuly);
|
||||
return c.json<CaptchaSessionResponse|unknown>(await res.json(), res.status as ContentfulStatusCode);
|
||||
} catch (e: unknown) {
|
||||
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 {
|
||||
const response: ErrorResponse<unknown> = {
|
||||
code: "UNKNOWN_ERROR",
|
||||
message: "Unknown error",
|
||||
errors: [e]
|
||||
};
|
||||
return c.json<ErrorResponse<unknown>>(response, 500);
|
||||
}
|
||||
}
|
||||
try {
|
||||
const requestBody = await bodySchema.validate(await c.req.json());
|
||||
const { route } = requestBody;
|
||||
const difficuly = await getCurrentCaptchaDifficulty(sqlCred, route);
|
||||
const res = await createNewChallenge(difficuly);
|
||||
return c.json<CaptchaSessionResponse | unknown>(await res.json(), res.status as ContentfulStatusCode);
|
||||
} catch (e: unknown) {
|
||||
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 {
|
||||
const response: ErrorResponse<unknown> = {
|
||||
code: "UNKNOWN_ERROR",
|
||||
message: "Unknown error",
|
||||
errors: [e]
|
||||
};
|
||||
return c.json<ErrorResponse<unknown>>(response, 500);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
@ -5,6 +5,8 @@ import type { Context } from "hono";
|
||||
import type { Bindings, BlankEnv, BlankInput } from "hono/types";
|
||||
import { sqlCred } from "@core/db/dbNew.ts";
|
||||
import { ErrorResponse, StatusResponse } from "src/schema";
|
||||
import { generateRandomId } from "@core/lib/randomID";
|
||||
import { getUserIP } from "@/middleware/rateLimiters";
|
||||
|
||||
const RegistrationBodySchema = object({
|
||||
username: string().trim().required("Username is required").max(50, "Username cannot exceed 50 characters"),
|
||||
@ -23,16 +25,46 @@ export const userExists = async (username: string) => {
|
||||
return result.length > 0;
|
||||
};
|
||||
|
||||
const createLoginSession = async (uid: number, ua?: string, ip?: string) => {
|
||||
const ip_address = ip || null;
|
||||
const user_agent = ua || null;
|
||||
const id = generateRandomId(16);
|
||||
await sqlCred`
|
||||
INSERT INTO login_sessions (id, uid, expire_at, ip_address, user_agent)
|
||||
VALUES (${id}, ${uid}, CURRENT_TIMESTAMP + INTERVAL '1 year', ${ip_address}, ${user_agent})
|
||||
`;
|
||||
};
|
||||
|
||||
const getUserIDByName = async (username: string) => {
|
||||
const result = await sqlCred<{ id: number }[]>`
|
||||
SELECT id
|
||||
FROM users
|
||||
WHERE username = ${username}
|
||||
`;
|
||||
if (result.length === 0) {
|
||||
return null;
|
||||
}
|
||||
return result[0].id;
|
||||
};
|
||||
|
||||
export const registerHandler = createHandlers(async (c: ContextType) => {
|
||||
try {
|
||||
const body = await RegistrationBodySchema.validate(await c.req.json());
|
||||
const { username, password, nickname } = body;
|
||||
|
||||
if (await userExists(username)) {
|
||||
const response: StatusResponse = {
|
||||
message: `User "${username}" already exists.`
|
||||
const response: ErrorResponse = {
|
||||
message: `User "${username}" already exists.`,
|
||||
code: "ENTITY_EXISTS",
|
||||
errors: [],
|
||||
i18n: {
|
||||
key: "backend.error.user_exists",
|
||||
values: {
|
||||
username: username
|
||||
}
|
||||
}
|
||||
};
|
||||
return c.json<StatusResponse>(response, 400);
|
||||
return c.json<ErrorResponse>(response, 400);
|
||||
}
|
||||
|
||||
const hash = await Argon2id.hashEncoded(password);
|
||||
@ -42,6 +74,25 @@ export const registerHandler = createHandlers(async (c: ContextType) => {
|
||||
VALUES (${username}, ${hash}, ${nickname ? nickname : null})
|
||||
`;
|
||||
|
||||
const uid = await getUserIDByName(username);
|
||||
|
||||
if (!uid) {
|
||||
const response: ErrorResponse<string> = {
|
||||
message: "Cannot find registered user.",
|
||||
errors: [`Cannot find user ${username} in table 'users'.`],
|
||||
code: "ENTITY_NOT_FOUND",
|
||||
i18n: {
|
||||
key: "backend.error.user_not_found_after_register",
|
||||
values: {
|
||||
username: username
|
||||
}
|
||||
}
|
||||
};
|
||||
return c.json<ErrorResponse<string>>(response, 500);
|
||||
}
|
||||
|
||||
createLoginSession(uid, c.req.header("User-Agent"), getUserIP(c));
|
||||
|
||||
const response: StatusResponse = {
|
||||
message: `User '${username}' registered successfully.`
|
||||
};
|
||||
|
31
packages/backend/src/schema.d.ts
vendored
31
packages/backend/src/schema.d.ts
vendored
@ -9,14 +9,39 @@ type ErrorCode =
|
||||
| "INVALID_CREDENTIALS"
|
||||
| "ENTITY_NOT_FOUND"
|
||||
| "SERVER_ERROR"
|
||||
| "RATE_LIMIT_EXCEEDED";
|
||||
| "RATE_LIMIT_EXCEEDED"
|
||||
| "ENTITY_EXISTS";
|
||||
|
||||
export interface ErrorResponse<E=string> {
|
||||
export interface ErrorResponse<E = string> {
|
||||
code: ErrorCode;
|
||||
message: string;
|
||||
errors?: E[];
|
||||
errors: E[] = [];
|
||||
i18n?: {
|
||||
key: string;
|
||||
values?: {
|
||||
[key: string]: string | number | Date;
|
||||
};
|
||||
};
|
||||
}
|
||||
|
||||
export interface StatusResponse {
|
||||
message: string;
|
||||
}
|
||||
|
||||
export type CaptchaSessionResponse = ErrorResponse | CaptchaSessionRawResponse;
|
||||
|
||||
interface CaptchaSessionRawResponse {
|
||||
success: boolean;
|
||||
id: string;
|
||||
g: string;
|
||||
n: string;
|
||||
t: number;
|
||||
}
|
||||
|
||||
export type CaptchaVerificationRawResponse = {
|
||||
token: string;
|
||||
}
|
||||
|
||||
export type CaptchaVerificationResponse =
|
||||
| ErrorResponse
|
||||
| CaptchaVerificationRawResponse;
|
||||
|
@ -1,10 +1,8 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { useEffect, useState } from "react";
|
||||
import TextField from "@/components/ui/TextField";
|
||||
import LoadingSpinner from "@/components/icons/LoadingSpinner";
|
||||
import { computeVdfInWorker } from "@/lib/vdf";
|
||||
import useSWR from "swr";
|
||||
import { ApiRequestError } from "@/lib/net";
|
||||
import { Portal } from "@/components/utils/Portal";
|
||||
import { Dialog, DialogButton, DialogButtonGroup, DialogHeadline, DialogSupportingText } from "@/components/ui/Dialog";
|
||||
@ -12,6 +10,9 @@ import { FilledButton } from "@/components/ui/Buttons/FilledButton";
|
||||
import { string, object, ValidationError } from "yup";
|
||||
import { setLocale } from "yup";
|
||||
import { useTranslations } from "next-intl";
|
||||
import type { ErrorResponse } from "@backend/src/schema";
|
||||
import Link from "next/link";
|
||||
import { useCaptcha } from "@/components/hooks/useCaptcha";
|
||||
|
||||
setLocale({
|
||||
mixed: {
|
||||
@ -37,32 +38,27 @@ const FormSchema = object().shape({
|
||||
nickname: string().optional().max(30)
|
||||
});
|
||||
|
||||
interface CaptchaSessionResponse {
|
||||
g: string;
|
||||
n: string;
|
||||
t: string;
|
||||
id: string;
|
||||
}
|
||||
|
||||
interface CaptchaResultResponse {
|
||||
token: string;
|
||||
}
|
||||
|
||||
async function fetcher<JSON = any>(input: RequestInfo, init?: RequestInit): Promise<JSON> {
|
||||
const res = await fetch(input, init);
|
||||
if (!res.ok) {
|
||||
const error = new ApiRequestError("An error occurred while fetching the data.");
|
||||
error.response = await res.json();
|
||||
error.code = res.status;
|
||||
throw error;
|
||||
}
|
||||
return res.json();
|
||||
}
|
||||
|
||||
interface RegistrationFormProps {
|
||||
backendURL: string;
|
||||
}
|
||||
|
||||
interface ErrorDialogProps {
|
||||
children: React.ReactNode;
|
||||
closeDialog: () => void;
|
||||
}
|
||||
|
||||
const ErrorDialog: React.FC<ErrorDialogProps> = ({ children, closeDialog }) => {
|
||||
return (
|
||||
<>
|
||||
<DialogHeadline>错误</DialogHeadline>
|
||||
<DialogSupportingText>{children}</DialogSupportingText>
|
||||
<DialogButtonGroup>
|
||||
<DialogButton onClick={closeDialog}>关闭</DialogButton>
|
||||
</DialogButtonGroup>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
const SignUpForm: React.FC<RegistrationFormProps> = ({ backendURL }) => {
|
||||
const [usernameInput, setUsername] = useState("");
|
||||
const [passwordInput, setPassword] = useState("");
|
||||
@ -71,29 +67,10 @@ const SignUpForm: React.FC<RegistrationFormProps> = ({ backendURL }) => {
|
||||
const [showDialog, setShowDialog] = useState(false);
|
||||
const [dialogContent, setDialogContent] = useState(<></>);
|
||||
const t = useTranslations("");
|
||||
|
||||
const {
|
||||
data: captchaSession,
|
||||
error: captchaSessionError,
|
||||
mutate: createCaptchaSession
|
||||
} = useSWR<CaptchaSessionResponse>(
|
||||
`${backendURL}/captcha/session`,
|
||||
(url) =>
|
||||
fetcher(url, {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json"
|
||||
},
|
||||
body: JSON.stringify({ route: "POST-/user" })
|
||||
}),
|
||||
{ revalidateOnFocus: false, revalidateOnReconnect: false }
|
||||
);
|
||||
|
||||
const getCaptchaResult = async (id: string, ans: string): Promise<CaptchaResultResponse> => {
|
||||
const url = new URL(`${backendURL}/captcha/${id}/result`);
|
||||
url.searchParams.set("ans", ans);
|
||||
return fetcher<CaptchaResultResponse>(url.toString());
|
||||
};
|
||||
const { startCaptcha, captchaResult } = useCaptcha({
|
||||
backendURL,
|
||||
route: "POST-/user"
|
||||
});
|
||||
|
||||
const translateErrorMessage = (item: LocalizedMessage | string, path?: string) => {
|
||||
if (typeof item === "string") {
|
||||
@ -125,40 +102,24 @@ const SignUpForm: React.FC<RegistrationFormProps> = ({ backendURL }) => {
|
||||
console.log(JSON.parse(JSON.stringify(e)));
|
||||
setShowDialog(true);
|
||||
setDialogContent(
|
||||
<>
|
||||
<DialogHeadline>错误</DialogHeadline>
|
||||
<DialogSupportingText>
|
||||
<p>注册信息填写有误,请检查后重新提交。</p>
|
||||
<span>错误信息: </span>
|
||||
<br />
|
||||
<ol className="list-decimal list-inside">
|
||||
{e.errors.map((item, i) => {
|
||||
return <li key={i}>{translateErrorMessage(item, e.inner[i].path)}</li>;
|
||||
})}
|
||||
</ol>
|
||||
</DialogSupportingText>
|
||||
<DialogButtonGroup>
|
||||
<DialogButton onClick={() => setShowDialog(false)}>关闭</DialogButton>
|
||||
</DialogButtonGroup>
|
||||
</>
|
||||
<ErrorDialog closeDialog={() => setShowDialog(false)}>
|
||||
<p>注册信息填写有误,请检查后重新提交。</p>
|
||||
<span>错误信息: </span>
|
||||
<br />
|
||||
<ol className="list-decimal list-inside">
|
||||
{e.errors.map((item, i) => {
|
||||
return <li key={i}>{translateErrorMessage(item, e.inner[i].path)}</li>;
|
||||
})}
|
||||
</ol>
|
||||
</ErrorDialog>
|
||||
);
|
||||
return;
|
||||
}
|
||||
|
||||
setLoading(true);
|
||||
try {
|
||||
if (!captchaSession?.g || !captchaSession?.n || !captchaSession?.t || !captchaSession?.id) {
|
||||
console.error("Captcha session data is missing.");
|
||||
return;
|
||||
}
|
||||
const ans = await computeVdfInWorker(
|
||||
BigInt(captchaSession.g),
|
||||
BigInt(captchaSession.n),
|
||||
BigInt(captchaSession.t)
|
||||
);
|
||||
const captchaResult = await getCaptchaResult(captchaSession.id, ans.result.toString());
|
||||
|
||||
if (!captchaResult.token) {
|
||||
if (!captchaResult || !captchaResult.token) {
|
||||
await startCaptcha();
|
||||
}
|
||||
// Proceed with user registration using username, password, and nickname
|
||||
const registrationUrl = new URL(`${backendURL}/user`);
|
||||
@ -166,7 +127,7 @@ const SignUpForm: React.FC<RegistrationFormProps> = ({ backendURL }) => {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
Authorization: `Bearer ${captchaResult.token}`
|
||||
Authorization: `Bearer ${captchaResult!.token}`
|
||||
},
|
||||
body: JSON.stringify({
|
||||
username: username,
|
||||
@ -180,17 +141,50 @@ const SignUpForm: React.FC<RegistrationFormProps> = ({ backendURL }) => {
|
||||
// Optionally redirect the user or show a success message
|
||||
//router.push("/login"); // Example redirection
|
||||
} else {
|
||||
console.error("Registration failed:", await registrationResponse.json());
|
||||
// Handle registration error
|
||||
const res: ErrorResponse = await registrationResponse.json();
|
||||
setShowDialog(true);
|
||||
setDialogContent(
|
||||
<ErrorDialog closeDialog={() => setShowDialog(false)}>
|
||||
<p>无法为你注册账户。</p>
|
||||
<p>错误码: {res.code}</p>
|
||||
<p>
|
||||
错误信息: <br />
|
||||
{res.i18n ? t(res.i18n.key, { ...res.i18n.values }) : res.message}
|
||||
</p>
|
||||
</ErrorDialog>
|
||||
);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Registration process error:", error);
|
||||
// Handle general error
|
||||
if (error instanceof ApiRequestError) {
|
||||
const res = error.response as ErrorResponse;
|
||||
setShowDialog(true);
|
||||
setDialogContent(
|
||||
<ErrorDialog closeDialog={() => setShowDialog(false)}>
|
||||
<p>无法为你注册账户。</p>
|
||||
<p>错误码: {res.code}</p>
|
||||
<p>
|
||||
错误信息: <br />
|
||||
{res.i18n
|
||||
? t.rich(res.i18n.key, {
|
||||
...res.i18n.values,
|
||||
support: (chunks) => <Link href="/support">{chunks}</Link>
|
||||
})
|
||||
: res.message}
|
||||
</p>
|
||||
</ErrorDialog>
|
||||
);
|
||||
}
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (startCaptcha) {
|
||||
startCaptcha();
|
||||
}
|
||||
}, [startCaptcha]);
|
||||
|
||||
return (
|
||||
<form
|
||||
className="w-full flex flex-col gap-6"
|
||||
|
@ -4,6 +4,8 @@
|
||||
"": {
|
||||
"name": "next",
|
||||
"dependencies": {
|
||||
"@cvsa/backend": "../backend/",
|
||||
"axios": "^1.9.0",
|
||||
"framer-motion": "^12.12.2",
|
||||
"i18next": "^25.2.1",
|
||||
"next": "^15.1.8",
|
||||
@ -14,6 +16,7 @@
|
||||
"yup": "^1.6.1",
|
||||
},
|
||||
"devDependencies": {
|
||||
"@cvsa/backend": "link:../backend/",
|
||||
"@tailwindcss/postcss": "^4",
|
||||
"@types/node": "^20",
|
||||
"@types/react": "^19",
|
||||
@ -30,6 +33,8 @@
|
||||
|
||||
"@babel/runtime": ["@babel/runtime@7.27.4", "", {}, "sha512-t3yaEOuGu9NlIZ+hIeGbBjFtZT7j2cb2tg0fuaJKeGotchRjjLfrBA9Kwf8quhpP1EUuxModQg04q/mBwyg8uA=="],
|
||||
|
||||
"@cvsa/backend": ["@cvsa/backend@link:../backend/", {}],
|
||||
|
||||
"@emnapi/runtime": ["@emnapi/runtime@1.4.3", "", { "dependencies": { "tslib": "^2.4.0" } }, "sha512-pBPWdu6MLKROBX05wSNKcNb++m5Er+KQ9QkB+WVM+pW2Kx9hoSrVTnu3BdkI5eBLZoKu/J6mW/B6i6bJB2ytXQ=="],
|
||||
|
||||
"@formatjs/ecma402-abstract": ["@formatjs/ecma402-abstract@2.3.4", "", { "dependencies": { "@formatjs/fast-memoize": "2.2.7", "@formatjs/intl-localematcher": "0.6.1", "decimal.js": "^10.4.3", "tslib": "^2.8.0" } }, "sha512-qrycXDeaORzIqNhBOx0btnhpD1c+/qFIHAN9znofuMJX6QBwtbrmlpWfD4oiUUD2vJUOIYFA/gYtg2KAMGG7sA=="],
|
||||
@ -156,8 +161,14 @@
|
||||
|
||||
"@types/react-dom": ["@types/react-dom@19.1.5", "", { "peerDependencies": { "@types/react": "^19.0.0" } }, "sha512-CMCjrWucUBZvohgZxkjd6S9h0nZxXjzus6yDfUb+xLxYM7VvjKNH1tQrE9GWLql1XoOP4/Ds3bwFqShHUYraGg=="],
|
||||
|
||||
"asynckit": ["asynckit@0.4.0", "", {}, "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="],
|
||||
|
||||
"axios": ["axios@1.9.0", "", { "dependencies": { "follow-redirects": "^1.15.6", "form-data": "^4.0.0", "proxy-from-env": "^1.1.0" } }, "sha512-re4CqKTJaURpzbLHtIi6XpDv20/CnpXOtjRY5/CU32L8gU8ek9UIivcfvSWvmKEngmVbrUtPpdDwWDWL7DNHvg=="],
|
||||
|
||||
"busboy": ["busboy@1.6.0", "", { "dependencies": { "streamsearch": "^1.1.0" } }, "sha512-8SFQbg/0hQ9xy3UNTB0YEnsNBbWfhf7RtnzpL7TkBiTBRfrQ9Fxcnz7VJsleJpyp6rVLvXiuORqjlHi5q+PYuA=="],
|
||||
|
||||
"call-bind-apply-helpers": ["call-bind-apply-helpers@1.0.2", "", { "dependencies": { "es-errors": "^1.3.0", "function-bind": "^1.1.2" } }, "sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ=="],
|
||||
|
||||
"caniuse-lite": ["caniuse-lite@1.0.30001718", "", {}, "sha512-AflseV1ahcSunK53NfEs9gFWgOEmzr0f+kaMFA4xiLZlr9Hzt7HxcSpIFcnNCUkz6R6dWKa54rUz3HUmI3nVcw=="],
|
||||
|
||||
"chownr": ["chownr@3.0.0", "", {}, "sha512-+IxzY9BZOQd/XuYPRmrvEVjF/nqj5kgT4kEq7VofrDoM1MxoRjEWkrCC3EtLi59TVawxTAn+orJwFQcrqEN1+g=="],
|
||||
@ -172,20 +183,52 @@
|
||||
|
||||
"color-string": ["color-string@1.9.1", "", { "dependencies": { "color-name": "^1.0.0", "simple-swizzle": "^0.2.2" } }, "sha512-shrVawQFojnZv6xM40anx4CkoDP+fZsw/ZerEMsW/pyzsRbElpsL/DBVW7q3ExxwusdNXI3lXpuhEZkzs8p5Eg=="],
|
||||
|
||||
"combined-stream": ["combined-stream@1.0.8", "", { "dependencies": { "delayed-stream": "~1.0.0" } }, "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg=="],
|
||||
|
||||
"csstype": ["csstype@3.1.3", "", {}, "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="],
|
||||
|
||||
"decimal.js": ["decimal.js@10.5.0", "", {}, "sha512-8vDa8Qxvr/+d94hSh5P3IJwI5t8/c0KsMp+g8bNw9cY2icONa5aPfvKeieW1WlG0WQYwwhJ7mjui2xtiePQSXw=="],
|
||||
|
||||
"delayed-stream": ["delayed-stream@1.0.0", "", {}, "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ=="],
|
||||
|
||||
"dequal": ["dequal@2.0.3", "", {}, "sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA=="],
|
||||
|
||||
"detect-libc": ["detect-libc@2.0.4", "", {}, "sha512-3UDv+G9CsCKO1WKMGw9fwq/SWJYbI0c5Y7LU1AXYoDdbhE2AHQ6N6Nb34sG8Fj7T5APy8qXDCKuuIHd1BR0tVA=="],
|
||||
|
||||
"dunder-proto": ["dunder-proto@1.0.1", "", { "dependencies": { "call-bind-apply-helpers": "^1.0.1", "es-errors": "^1.3.0", "gopd": "^1.2.0" } }, "sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A=="],
|
||||
|
||||
"enhanced-resolve": ["enhanced-resolve@5.18.1", "", { "dependencies": { "graceful-fs": "^4.2.4", "tapable": "^2.2.0" } }, "sha512-ZSW3ma5GkcQBIpwZTSRAI8N71Uuwgs93IezB7mf7R60tC8ZbJideoDNKjHn2O9KIlx6rkGTTEk1xUCK2E1Y2Yg=="],
|
||||
|
||||
"es-define-property": ["es-define-property@1.0.1", "", {}, "sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g=="],
|
||||
|
||||
"es-errors": ["es-errors@1.3.0", "", {}, "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw=="],
|
||||
|
||||
"es-object-atoms": ["es-object-atoms@1.1.1", "", { "dependencies": { "es-errors": "^1.3.0" } }, "sha512-FGgH2h8zKNim9ljj7dankFPcICIK9Cp5bm+c2gQSYePhpaG5+esrLODihIorn+Pe6FGJzWhXQotPv73jTaldXA=="],
|
||||
|
||||
"es-set-tostringtag": ["es-set-tostringtag@2.1.0", "", { "dependencies": { "es-errors": "^1.3.0", "get-intrinsic": "^1.2.6", "has-tostringtag": "^1.0.2", "hasown": "^2.0.2" } }, "sha512-j6vWzfrGVfyXxge+O0x5sh6cvxAog0a/4Rdd2K36zCMV5eJ+/+tOAngRO8cODMNWbVRdVlmGZQL2YS3yR8bIUA=="],
|
||||
|
||||
"follow-redirects": ["follow-redirects@1.15.9", "", {}, "sha512-gew4GsXizNgdoRyqmyfMHyAmXsZDk6mHkSxZFCzW9gwlbtOW44CDtYavM+y+72qD/Vq2l550kMF52DT8fOLJqQ=="],
|
||||
|
||||
"form-data": ["form-data@4.0.2", "", { "dependencies": { "asynckit": "^0.4.0", "combined-stream": "^1.0.8", "es-set-tostringtag": "^2.1.0", "mime-types": "^2.1.12" } }, "sha512-hGfm/slu0ZabnNt4oaRZ6uREyfCj6P4fT/n6A1rGV+Z0VdGXjfOhVUpkn6qVQONHGIFwmveGXyDs75+nr6FM8w=="],
|
||||
|
||||
"framer-motion": ["framer-motion@12.12.2", "", { "dependencies": { "motion-dom": "^12.12.1", "motion-utils": "^12.12.1", "tslib": "^2.4.0" }, "peerDependencies": { "@emotion/is-prop-valid": "*", "react": "^18.0.0 || ^19.0.0", "react-dom": "^18.0.0 || ^19.0.0" }, "optionalPeers": ["@emotion/is-prop-valid", "react", "react-dom"] }, "sha512-qCszZCiGWkilL40E3VuhIJJC/CS3SIBl2IHyGK8FU30nOUhTmhBNWPrNFyozAWH/bXxwzi19vJHIGVdALF0LCg=="],
|
||||
|
||||
"function-bind": ["function-bind@1.1.2", "", {}, "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA=="],
|
||||
|
||||
"get-intrinsic": ["get-intrinsic@1.3.0", "", { "dependencies": { "call-bind-apply-helpers": "^1.0.2", "es-define-property": "^1.0.1", "es-errors": "^1.3.0", "es-object-atoms": "^1.1.1", "function-bind": "^1.1.2", "get-proto": "^1.0.1", "gopd": "^1.2.0", "has-symbols": "^1.1.0", "hasown": "^2.0.2", "math-intrinsics": "^1.1.0" } }, "sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ=="],
|
||||
|
||||
"get-proto": ["get-proto@1.0.1", "", { "dependencies": { "dunder-proto": "^1.0.1", "es-object-atoms": "^1.0.0" } }, "sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g=="],
|
||||
|
||||
"gopd": ["gopd@1.2.0", "", {}, "sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg=="],
|
||||
|
||||
"graceful-fs": ["graceful-fs@4.2.11", "", {}, "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ=="],
|
||||
|
||||
"has-symbols": ["has-symbols@1.1.0", "", {}, "sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ=="],
|
||||
|
||||
"has-tostringtag": ["has-tostringtag@1.0.2", "", { "dependencies": { "has-symbols": "^1.0.3" } }, "sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw=="],
|
||||
|
||||
"hasown": ["hasown@2.0.2", "", { "dependencies": { "function-bind": "^1.1.2" } }, "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ=="],
|
||||
|
||||
"i18next": ["i18next@25.2.1", "", { "dependencies": { "@babel/runtime": "^7.27.1" }, "peerDependencies": { "typescript": "^5" }, "optionalPeers": ["typescript"] }, "sha512-+UoXK5wh+VlE1Zy5p6MjcvctHXAhRwQKCxiJD8noKZzIXmnAX8gdHX5fLPA3MEVxEN4vbZkQFy8N0LyD9tUqPw=="],
|
||||
|
||||
"intl-messageformat": ["intl-messageformat@10.7.16", "", { "dependencies": { "@formatjs/ecma402-abstract": "2.3.4", "@formatjs/fast-memoize": "2.2.7", "@formatjs/icu-messageformat-parser": "2.11.2", "tslib": "^2.8.0" } }, "sha512-UmdmHUmp5CIKKjSoE10la5yfU+AYJAaiYLsodbjL4lji83JNvgOQUjGaGhGrpFCb0Uh7sl7qfP1IyILa8Z40ug=="],
|
||||
@ -218,6 +261,12 @@
|
||||
|
||||
"magic-string": ["magic-string@0.30.17", "", { "dependencies": { "@jridgewell/sourcemap-codec": "^1.5.0" } }, "sha512-sNPKHvyjVf7gyjwS4xGTaW/mCnF8wnjtifKBEhxfZ7E/S8tQ0rssrwGNn6q8JH/ohItJfSQp9mBtQYuTlH5QnA=="],
|
||||
|
||||
"math-intrinsics": ["math-intrinsics@1.1.0", "", {}, "sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g=="],
|
||||
|
||||
"mime-db": ["mime-db@1.52.0", "", {}, "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg=="],
|
||||
|
||||
"mime-types": ["mime-types@2.1.35", "", { "dependencies": { "mime-db": "1.52.0" } }, "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw=="],
|
||||
|
||||
"minipass": ["minipass@7.1.2", "", {}, "sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw=="],
|
||||
|
||||
"minizlib": ["minizlib@3.0.2", "", { "dependencies": { "minipass": "^7.1.2" } }, "sha512-oG62iEk+CYt5Xj2YqI5Xi9xWUeZhDI8jjQmC5oThVH5JGCTgIjr7ciJDzC7MBzYd//WvR1OTmP5Q38Q8ShQtVA=="],
|
||||
@ -242,6 +291,8 @@
|
||||
|
||||
"property-expr": ["property-expr@2.0.6", "", {}, "sha512-SVtmxhRE/CGkn3eZY1T6pC8Nln6Fr/lu1mKSgRud0eC73whjGfoAogbn78LkD8aFL0zz3bAFerKSnOl7NlErBA=="],
|
||||
|
||||
"proxy-from-env": ["proxy-from-env@1.1.0", "", {}, "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="],
|
||||
|
||||
"react": ["react@19.1.0", "", {}, "sha512-FS+XFBNvn3GTAWq26joslQgWNoFu08F4kl0J4CgdNKADkdSGXQyTCnKteIAJy96Br6YbpEU1LSzV5dYtjMkMDg=="],
|
||||
|
||||
"react-dom": ["react-dom@19.1.0", "", { "dependencies": { "scheduler": "^0.26.0" }, "peerDependencies": { "react": "^19.1.0" } }, "sha512-Xs1hdnE+DyKgeHJeJznQmYMIBG3TKIHJJT95Q58nHLSrElKlGQqDTR2HQ9fx5CN/Gk6Vh/kupBTDLU11/nDk/g=="],
|
||||
|
54
packages/next/components/hooks/useCaptcha.ts
Normal file
54
packages/next/components/hooks/useCaptcha.ts
Normal file
@ -0,0 +1,54 @@
|
||||
import useSWRMutation from "swr/mutation";
|
||||
import type { ErrorResponse, CaptchaSessionResponse, CaptchaVerificationRawResponse } from "@backend/src/schema";
|
||||
import { fetcher } from "@/lib/net";
|
||||
import { computeVdfInWorker } from "@/lib/vdf";
|
||||
|
||||
interface UseCaptchaOptions {
|
||||
backendURL: string;
|
||||
route: string;
|
||||
}
|
||||
|
||||
function isErrResponse(res: ErrorResponse | object): res is ErrorResponse {
|
||||
return (res as ErrorResponse).errors !== undefined;
|
||||
}
|
||||
|
||||
export function useCaptcha({ backendURL, route }: UseCaptchaOptions) {
|
||||
const fullUrl = `${backendURL}/captcha/session`;
|
||||
|
||||
const { trigger, data, isMutating, error } = useSWRMutation<CaptchaVerificationRawResponse, Error>(
|
||||
fullUrl,
|
||||
async (url: string) => {
|
||||
const sessionRes = await fetcher<CaptchaSessionResponse>(url, {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json"
|
||||
},
|
||||
data: { route }
|
||||
});
|
||||
|
||||
if (isErrResponse(sessionRes)) {
|
||||
throw new Error(sessionRes.message || "Failed to get captcha session");
|
||||
}
|
||||
|
||||
const { g, n, t, id } = sessionRes;
|
||||
if (!g || !n || !t || !id) {
|
||||
throw new Error("Missing required CAPTCHA parameters");
|
||||
}
|
||||
|
||||
const ans = await computeVdfInWorker(BigInt(g), BigInt(n), BigInt(t));
|
||||
|
||||
const resultUrl = new URL(`${backendURL}/captcha/${id}/result`);
|
||||
resultUrl.searchParams.set("ans", ans.result.toString());
|
||||
|
||||
const result = await fetcher<CaptchaVerificationRawResponse>(resultUrl.toString());
|
||||
return result;
|
||||
}
|
||||
);
|
||||
|
||||
return {
|
||||
startCaptcha: trigger,
|
||||
captchaResult: data,
|
||||
isLoadingCaptcha: isMutating,
|
||||
captchaError: error
|
||||
};
|
||||
}
|
20
packages/next/components/utils/LocalizedRichText.tsx
Normal file
20
packages/next/components/utils/LocalizedRichText.tsx
Normal file
@ -0,0 +1,20 @@
|
||||
import { ReactNode } from "react";
|
||||
|
||||
// These tags are available
|
||||
type Tag = "p" | "b" | "i";
|
||||
|
||||
type Props = {
|
||||
children(tags: Record<Tag, (chunks: ReactNode) => ReactNode>): ReactNode;
|
||||
};
|
||||
|
||||
export default function LocalizedRichText({ children }: Props) {
|
||||
return (
|
||||
<div className="prose">
|
||||
{children({
|
||||
p: (chunks: ReactNode) => <p>{chunks}</p>,
|
||||
b: (chunks: ReactNode) => <b className="font-semibold">{chunks}</b>,
|
||||
i: (chunks: ReactNode) => <i className="italic">{chunks}</i>
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
}
|
@ -6,5 +6,12 @@
|
||||
},
|
||||
"username": "用户名",
|
||||
"password": "密码",
|
||||
"nickname": "昵称"
|
||||
"nickname": "昵称",
|
||||
"backend": {
|
||||
"error": {
|
||||
"user_exists": "用户名 “{username}” 已被占用。",
|
||||
"user_not_found_after_register": "我们的服务器出现错误:找不到名为'{username}'的用户。请联系我们的<support>支持团队</support>,反馈此问题。",
|
||||
"captcha_not_found": "无法完成安全验证。你可以刷新页面并重试。如果此问题反复出现,你可以联系我们的<support>支持团队</support>,反馈此问题。"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -1,3 +1,5 @@
|
||||
import axios, { AxiosRequestConfig, AxiosError, Method } from "axios";
|
||||
|
||||
export class ApiRequestError extends Error {
|
||||
public code: number | undefined;
|
||||
public response: unknown | undefined;
|
||||
@ -8,3 +10,48 @@ export class ApiRequestError extends Error {
|
||||
this.response = res;
|
||||
}
|
||||
}
|
||||
|
||||
type HttpMethod = Extract<Method, "GET" | "POST" | "PUT" | "DELETE" | "PATCH">;
|
||||
|
||||
const httpMethods = {
|
||||
get: axios.get,
|
||||
post: axios.post,
|
||||
put: axios.put,
|
||||
delete: axios.delete,
|
||||
patch: axios.patch
|
||||
};
|
||||
|
||||
export async function fetcher<JSON = unknown>(
|
||||
url: string,
|
||||
init?: Omit<AxiosRequestConfig, "method"> & { method?: HttpMethod }
|
||||
): Promise<JSON> {
|
||||
const { method = "get", data, ...config } = init || {};
|
||||
|
||||
const fullConfig: AxiosRequestConfig = {
|
||||
method,
|
||||
...config,
|
||||
timeout: 10000
|
||||
};
|
||||
|
||||
try {
|
||||
const m = method.toLowerCase() as keyof typeof httpMethods;
|
||||
if (["post", "patch", "put"].includes(m)) {
|
||||
const response = await httpMethods[m](url, data, fullConfig);
|
||||
return response.data;
|
||||
} else {
|
||||
const response = await httpMethods[m](url, fullConfig);
|
||||
return response.data;
|
||||
}
|
||||
} catch (error) {
|
||||
const axiosError = error as AxiosError;
|
||||
|
||||
if (axiosError.response) {
|
||||
const { status, data } = axiosError.response;
|
||||
throw new ApiRequestError(`HTTP error! status: ${status}`, data, status);
|
||||
} else if (axiosError.request) {
|
||||
throw new ApiRequestError("No response received.");
|
||||
} else {
|
||||
throw new ApiRequestError(axiosError.message || "Unknown error");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -2,7 +2,11 @@ import type { NextConfig } from "next";
|
||||
import createNextIntlPlugin from "next-intl/plugin";
|
||||
|
||||
const nextConfig: NextConfig = {
|
||||
devIndicators: false
|
||||
devIndicators: false,
|
||||
experimental: {
|
||||
externalDir: true
|
||||
},
|
||||
transpilePackages: ["@cvsa/backend"]
|
||||
};
|
||||
|
||||
const withNextIntl = createNextIntlPlugin();
|
||||
|
@ -10,6 +10,7 @@
|
||||
"format": "prettier --write ."
|
||||
},
|
||||
"dependencies": {
|
||||
"axios": "^1.9.0",
|
||||
"framer-motion": "^12.12.2",
|
||||
"i18next": "^25.2.1",
|
||||
"next": "^15.1.8",
|
||||
|
@ -19,7 +19,8 @@
|
||||
}
|
||||
],
|
||||
"paths": {
|
||||
"@/*": ["./*"]
|
||||
"@/*": ["./*"],
|
||||
"@backend/*": ["../backend/*"]
|
||||
}
|
||||
},
|
||||
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
|
||||
|
Loading…
Reference in New Issue
Block a user