aboutsummaryrefslogtreecommitdiff
path: root/FrontEnd
diff options
context:
space:
mode:
Diffstat (limited to 'FrontEnd')
-rw-r--r--FrontEnd/src/index.tsx6
-rw-r--r--FrontEnd/src/locales/en/translation.json4
-rw-r--r--FrontEnd/src/locales/zh/translation.json4
-rw-r--r--FrontEnd/src/views/common/button/Button.tsx36
-rw-r--r--FrontEnd/src/views/common/button/FlatButton.tsx31
-rw-r--r--FrontEnd/src/views/common/button/LoadingButton.tsx48
-rw-r--r--FrontEnd/src/views/common/button/common.ts35
-rw-r--r--FrontEnd/src/views/common/input/InputPanel.tsx4
-rw-r--r--FrontEnd/src/views/register/index.css5
-rw-r--r--FrontEnd/src/views/register/index.tsx111
10 files changed, 189 insertions, 95 deletions
diff --git a/FrontEnd/src/index.tsx b/FrontEnd/src/index.tsx
index ea940004..2affb277 100644
--- a/FrontEnd/src/index.tsx
+++ b/FrontEnd/src/index.tsx
@@ -17,4 +17,8 @@ import App from "./App";
const container = document.getElementById("app");
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
const root = createRoot(container!);
-root.render(<App />);
+root.render(
+ <React.StrictMode>
+ <App />
+ </React.StrictMode>
+);
diff --git a/FrontEnd/src/locales/en/translation.json b/FrontEnd/src/locales/en/translation.json
index 5ce4d70e..622ccd18 100644
--- a/FrontEnd/src/locales/en/translation.json
+++ b/FrontEnd/src/locales/en/translation.json
@@ -25,6 +25,7 @@
"public": "Public To Everyone"
},
"register": {
+ "register": "Register",
"username": "Username",
"password": "Password",
"confirmPassword": "Confirm Password",
@@ -33,7 +34,8 @@
"usernameEmpty": "Username can't be empty.",
"passwordEmpty": "Password can't be emtpy.",
"confirmPasswordWrong": "Password does not match.",
- "registerCodeEmpty": "Register code can't be empty."
+ "registerCodeEmpty": "Register code can't be empty.",
+ "registerCodeInvalid": "Register code is invalid."
}
},
"serviceWorker": {
diff --git a/FrontEnd/src/locales/zh/translation.json b/FrontEnd/src/locales/zh/translation.json
index 721ac81a..8ebc617a 100644
--- a/FrontEnd/src/locales/zh/translation.json
+++ b/FrontEnd/src/locales/zh/translation.json
@@ -18,6 +18,7 @@
"public": "对所有人公开"
},
"register": {
+ "register": "注册",
"username": "用户名",
"password": "密码",
"confirmPassword": "确认密码",
@@ -26,7 +27,8 @@
"usernameEmpty": "用户名不能为空。",
"passwordEmpty": "密码不能为空。",
"confirmPasswordWrong": "密码不匹配。",
- "registerCodeEmpty": "注册码不能为空。"
+ "registerCodeEmpty": "注册码不能为空。",
+ "registerCodeInvalid": "注册码无效。"
}
},
"connectionState": {
diff --git a/FrontEnd/src/views/common/button/Button.tsx b/FrontEnd/src/views/common/button/Button.tsx
index a39ef8a7..1e4163ff 100644
--- a/FrontEnd/src/views/common/button/Button.tsx
+++ b/FrontEnd/src/views/common/button/Button.tsx
@@ -1,30 +1,40 @@
import React from "react";
+import classNames from "classnames";
import { useTranslation } from "react-i18next";
-import { calculateProps, CommonButtonProps } from "./common";
+import { convertI18nText, I18nText } from "@/common";
+import { PaletteColorType } from "@/palette";
import "./Button.css";
function _Button(
- props: CommonButtonProps & {
+ props: {
+ color?: PaletteColorType;
+ text?: I18nText;
outline?: boolean;
- customButtonClassName?: string;
- },
+ } & React.ComponentPropsWithoutRef<"button">,
ref: React.ForwardedRef<HTMLButtonElement>
-): React.ReactElement | null {
+): JSX.Element {
const { t } = useTranslation();
- const { customButtonClassName, outline, ...otherProps } = props;
+ const { color, text, outline, className, children, ...otherProps } = props;
- const { newProps, children } = calculateProps(
- otherProps,
- customButtonClassName ?? "cru-button" + (outline ? " outline" : ""),
- t
- );
+ if (text != null && children != null) {
+ console.warn("You can't set both text and children props.");
+ }
return (
- <button ref={ref} {...newProps}>
- {children}
+ <button
+ ref={ref}
+ className={classNames(
+ "cru-" + (color ?? "primary"),
+ "cru-button",
+ outline && "outline",
+ className
+ )}
+ {...otherProps}
+ >
+ {text != null ? convertI18nText(text, t) : children}
</button>
);
}
diff --git a/FrontEnd/src/views/common/button/FlatButton.tsx b/FrontEnd/src/views/common/button/FlatButton.tsx
index 266ea908..a6377708 100644
--- a/FrontEnd/src/views/common/button/FlatButton.tsx
+++ b/FrontEnd/src/views/common/button/FlatButton.tsx
@@ -1,16 +1,39 @@
import React from "react";
+import { useTranslation } from "react-i18next";
+import classNames from "classnames";
-import { CommonButtonProps } from "./common";
-import Button from "./Button";
+import { convertI18nText, I18nText } from "@/common";
+import { PaletteColorType } from "@/palette";
import "./FlatButton.css";
function _FlatButton(
- props: CommonButtonProps,
+ props: {
+ color?: PaletteColorType;
+ text?: I18nText;
+ } & React.ComponentPropsWithoutRef<"button">,
ref: React.ForwardedRef<HTMLButtonElement>
): React.ReactElement | null {
+ const { t } = useTranslation();
+
+ const { color, text, className, children, ...otherProps } = props;
+
+ if (text != null && children != null) {
+ console.warn("You can't set both text and children props.");
+ }
+
return (
- <Button ref={ref} customButtonClassName="cru-flat-button" {...props} />
+ <button
+ ref={ref}
+ className={classNames(
+ "cru-" + (color ?? "primary"),
+ "cru-flat-button",
+ className
+ )}
+ {...otherProps}
+ >
+ {text != null ? convertI18nText(text, t) : children}
+ </button>
);
}
diff --git a/FrontEnd/src/views/common/button/LoadingButton.tsx b/FrontEnd/src/views/common/button/LoadingButton.tsx
index a7e34f91..2764f92e 100644
--- a/FrontEnd/src/views/common/button/LoadingButton.tsx
+++ b/FrontEnd/src/views/common/button/LoadingButton.tsx
@@ -1,28 +1,40 @@
import React from "react";
+import classNames from "classnames";
+import { useTranslation } from "react-i18next";
+
+import { convertI18nText, I18nText } from "@/common";
+import { PaletteColorType } from "@/palette";
-import { CommonButtonProps } from "./common";
-import Button from "./Button";
import Spinner from "../Spinner";
-const LoadingButton: React.FC<{ loading?: boolean } & CommonButtonProps> = ({
- loading,
- disabled,
- color,
- ...otherProps
-}) => {
+function LoadingButton(
+ props: {
+ color?: PaletteColorType;
+ text?: I18nText;
+ loading?: boolean;
+ } & React.ComponentPropsWithoutRef<"button">
+): JSX.Element {
+ const { t } = useTranslation();
+
+ const { color, text, loading, className, children, ...otherProps } = props;
+
+ if (text != null && children != null) {
+ console.warn("You can't set both text and children props.");
+ }
+
return (
- <Button
- color={color}
- outline
- disabled={disabled || loading}
+ <button
+ className={classNames(
+ "cru-" + (color ?? "primary"),
+ "cru-button outline",
+ className
+ )}
{...otherProps}
>
- {otherProps.children}
- {loading ? (
- <Spinner className="cru-align-text-bottom ms-1" color={color} />
- ) : null}
- </Button>
+ {text != null ? convertI18nText(text, t) : children}
+ {loading && <Spinner />}
+ </button>
);
-};
+}
export default LoadingButton;
diff --git a/FrontEnd/src/views/common/button/common.ts b/FrontEnd/src/views/common/button/common.ts
deleted file mode 100644
index 0d84bae0..00000000
--- a/FrontEnd/src/views/common/button/common.ts
+++ /dev/null
@@ -1,35 +0,0 @@
-import React from "react";
-import classNames from "classnames";
-import { TFunction } from "i18next";
-
-import { convertI18nText, I18nText } from "@/common";
-import { PaletteColorType } from "@/palette";
-
-export type CommonButtonProps = {
- text?: I18nText;
- color?: PaletteColorType;
-} & React.ButtonHTMLAttributes<HTMLButtonElement>;
-
-export function calculateProps(
- props: CommonButtonProps,
- buttonClassName: string,
- t: TFunction
-): {
- children: React.ReactNode;
- newProps: React.ButtonHTMLAttributes<HTMLButtonElement>;
-} {
- const { text, color, className, children, ...otherProps } = props;
- const newProps = {
- className: classNames(
- buttonClassName,
- color != null ? "cru-" + color : "cru-primary",
- className
- ),
- ...otherProps,
- };
-
- return {
- children: text != null ? convertI18nText(text, t) : children,
- newProps: newProps,
- };
-}
diff --git a/FrontEnd/src/views/common/input/InputPanel.tsx b/FrontEnd/src/views/common/input/InputPanel.tsx
index 3ac0cb04..c76b8d45 100644
--- a/FrontEnd/src/views/common/input/InputPanel.tsx
+++ b/FrontEnd/src/views/common/input/InputPanel.tsx
@@ -78,8 +78,8 @@ export type InputPanelError = {
export function hasError(e: InputPanelError | null | undefined): boolean {
if (e == null) return false;
- for (const key in e) {
- if (e[key] != null) return true;
+ for (const key of Object.keys(e)) {
+ if (e[key as unknown as number] != null) return true;
}
return false;
}
diff --git a/FrontEnd/src/views/register/index.css b/FrontEnd/src/views/register/index.css
new file mode 100644
index 00000000..c0078b28
--- /dev/null
+++ b/FrontEnd/src/views/register/index.css
@@ -0,0 +1,5 @@
+.register-page {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+}
diff --git a/FrontEnd/src/views/register/index.tsx b/FrontEnd/src/views/register/index.tsx
index a051cfaf..d8530fcf 100644
--- a/FrontEnd/src/views/register/index.tsx
+++ b/FrontEnd/src/views/register/index.tsx
@@ -1,7 +1,41 @@
import React from "react";
-import InputPanel, { InputPanelError } from "../common/input/InputPanel";
+import { useTranslation } from "react-i18next";
+import { useNavigate } from "react-router-dom";
+
+import { HttpBadRequestError } from "@/http/common";
+import { getHttpTokenClient } from "@/http/token";
+import { userService, useUser } from "@/services/user";
+
+import { LoadingButton } from "../common/button";
+import InputPanel, {
+ hasError,
+ InputPanelError,
+} from "../common/input/InputPanel";
+
+import "./index.css";
+
+const validate = (values: string[], dirties: boolean[]): InputPanelError => {
+ const e: InputPanelError = {};
+ if (dirties[0] && values[0].length === 0) {
+ e[0] = "register.error.usernameEmpty";
+ }
+ if (dirties[1] && values[1].length === 0) {
+ e[1] = "register.error.passwordEmpty";
+ }
+ if (dirties[2] && values[2] !== values[1]) {
+ e[2] = "register.error.confirmPasswordWrong";
+ }
+ if (dirties[3] && values[3].length === 0) {
+ e[3] = "register.error.registerCodeEmpty";
+ }
+ return e;
+};
const RegisterPage: React.FC = () => {
+ const navigate = useNavigate();
+
+ const { t } = useTranslation();
+
const [username, setUsername] = React.useState<string>("");
const [password, setPassword] = React.useState<string>("");
const [confirmPassword, setConfirmPassword] = React.useState<string>("");
@@ -9,27 +43,21 @@ const RegisterPage: React.FC = () => {
const [dirty, setDirty] = React.useState<boolean[]>(new Array(4).fill(false));
- const [error, setError] = React.useState<InputPanelError>();
+ const [process, setProcess] = React.useState<boolean>(false);
- const validate = (): InputPanelError => {
- const e: InputPanelError = {};
- if (dirty[0] && username.length === 0) {
- e[0] = "register.error.usernameEmpty";
- }
- if (dirty[1] && password.length === 0) {
- e[1] = "register.error.passwordEmpty";
- }
- if (dirty[2] && confirmPassword !== password) {
- e[2] = "register.error.confirmPasswordWrong";
- }
- if (dirty[3] && registerCode.length === 0) {
- e[3] = "register.error.registerCodeEmpty";
+ const [inputError, setInputError] = React.useState<InputPanelError>();
+ const [resultError, setResultError] = React.useState<string | null>(null);
+
+ const user = useUser();
+
+ React.useEffect(() => {
+ if (user != null) {
+ navigate("/");
}
- return e;
- };
+ });
return (
- <div className="container">
+ <div className="container register-page">
<InputPanel
scheme={[
{
@@ -58,9 +86,52 @@ const RegisterPage: React.FC = () => {
newDirty[index] = true;
setDirty(newDirty);
- setError(validate());
+ setInputError(validate(values, newDirty));
+ }}
+ error={inputError}
+ disable={process}
+ />
+ {resultError && <div className="cru-color-danger">{t(resultError)}</div>}
+ <LoadingButton
+ text="register.register"
+ loading={process}
+ disabled={hasError(inputError)}
+ onClick={() => {
+ const newDirty = dirty.slice().fill(true);
+ setDirty(newDirty);
+ const e = validate(
+ [username, password, confirmPassword, registerCode],
+ newDirty
+ );
+ if (hasError(e)) {
+ setInputError(e);
+ } else {
+ setProcess(true);
+ void getHttpTokenClient()
+ .register({
+ username,
+ password,
+ registerCode,
+ })
+ .then(
+ () => {
+ void userService
+ .login({ username, password }, true)
+ .then(() => {
+ navigate("/");
+ });
+ },
+ (error) => {
+ if (error instanceof HttpBadRequestError) {
+ setResultError("register.error.registerCodeInvalid");
+ } else {
+ setResultError("error.network");
+ }
+ setProcess(false);
+ }
+ );
+ }
}}
- error={error}
/>
</div>
);
generated by cgit v1.2.3 (git 2.46.0) at 2025-09-28 17:04:41 +0000