126 lines
3.4 KiB
TypeScript
126 lines
3.4 KiB
TypeScript
"use client";
|
||
|
||
import { useEffect, useState } from "react";
|
||
import TextField from "@/components/ui/TextField";
|
||
import LoadingSpinner from "@/components/icons/LoadingSpinner";
|
||
import { Portal } from "@/components/utils/Portal";
|
||
import { Dialog } from "@/components/ui/Dialog";
|
||
import { setLocale } from "yup";
|
||
import { useTranslations } from "next-intl";
|
||
import { useCaptcha } from "@/components/hooks/useCaptcha";
|
||
import useSWRMutation from "swr/mutation";
|
||
import { FilledButton } from "@/components/ui/Buttons/FilledButton";
|
||
import { ApiRequestError } from "@/lib/net";
|
||
import { useRouter } from "next/navigation";
|
||
import { requestLogin } from "./request";
|
||
import { ErrorDialog } from "@/components/utils/ErrorDialog";
|
||
|
||
setLocale({
|
||
mixed: {
|
||
default: "yup_errors.field_invalid",
|
||
required: () => ({ key: "yup_errors.field_required" })
|
||
},
|
||
string: {
|
||
min: ({ min }) => ({ key: "yup_errors.field_too_short", values: { min } }),
|
||
max: ({ max }) => ({ key: "yup_errors.field_too_big", values: { max } })
|
||
}
|
||
});
|
||
|
||
export interface LocalizedMessage {
|
||
key: string;
|
||
values: {
|
||
[key: string]: number | string;
|
||
};
|
||
}
|
||
|
||
interface RegistrationFormProps {
|
||
backendURL: string;
|
||
}
|
||
|
||
const SignUpForm: React.FC<RegistrationFormProps> = ({ backendURL }) => {
|
||
const [usernameInput, setUsername] = useState("");
|
||
const [passwordInput, setPassword] = useState("");
|
||
const [showDialog, setShowDialog] = useState(false);
|
||
const [dialogContent, setDialogContent] = useState(<></>);
|
||
const [isLoading, setLoading] = useState(false);
|
||
const t = useTranslations("");
|
||
const { startCaptcha, captchaResult, captchaUsed, setCaptchaUsedState, captchaError } = useCaptcha({
|
||
backendURL,
|
||
route: "POST-/user"
|
||
});
|
||
const { trigger } = useSWRMutation(`${backendURL}/login/session`, requestLogin);
|
||
const router = useRouter();
|
||
|
||
const translateErrorMessage = (item: LocalizedMessage | string, path?: string) => {
|
||
if (typeof item === "string") {
|
||
return item;
|
||
}
|
||
return t(`${item.key}`, { ...item.values, field: path ? t(path) : "" });
|
||
};
|
||
|
||
const register = async () => {
|
||
try {
|
||
if (captchaUsed || !captchaResult) {
|
||
await startCaptcha();
|
||
}
|
||
|
||
const result = await trigger({
|
||
data: {
|
||
username: usernameInput,
|
||
password: passwordInput
|
||
},
|
||
setShowDialog,
|
||
captchaResult,
|
||
setCaptchaUsedState,
|
||
translateErrorMessage,
|
||
setDialogContent,
|
||
t
|
||
});
|
||
if (result) {
|
||
router.push("/");
|
||
}
|
||
} finally {
|
||
setLoading(false);
|
||
}
|
||
};
|
||
|
||
useEffect(() => {
|
||
if (!captchaError || captchaError === undefined) return;
|
||
const err = captchaError as ApiRequestError;
|
||
setShowDialog(true);
|
||
if (err.code && err.code == -1) {
|
||
setDialogContent(
|
||
<ErrorDialog closeDialog={() => setShowDialog(false)}>
|
||
<p>无法连接到服务器，请检查你的网络连接后重试。</p>
|
||
</ErrorDialog>
|
||
);
|
||
}
|
||
}, [captchaError]);
|
||
|
||
useEffect(() => {
|
||
startCaptcha();
|
||
}, []);
|
||
|
||
return (
|
||
<form
|
||
className="w-full flex flex-col gap-6"
|
||
onSubmit={async (e) => {
|
||
setLoading(true);
|
||
e.preventDefault();
|
||
await register();
|
||
}}
|
||
>
|
||
<TextField labelText="用户名" inputText={usernameInput} onInputTextChange={setUsername} />
|
||
<TextField labelText="密码" type="password" inputText={passwordInput} onInputTextChange={setPassword} />
|
||
<FilledButton type="submit" disabled={isLoading}>
|
||
{isLoading ? <LoadingSpinner /> : <span>登录</span>}
|
||
</FilledButton>
|
||
<Portal>
|
||
<Dialog show={showDialog}>{dialogContent}</Dialog>
|
||
</Portal>
|
||
</form>
|
||
);
|
||
};
|
||
|
||
export default SignUpForm;
|