2022-12-14 11:36:53 +01:00
|
|
|
import * as React from 'react';
|
2022-12-25 17:59:44 +01:00
|
|
|
import {useState} from 'react';
|
2022-12-14 11:36:53 +01:00
|
|
|
import TextField from "@mui/material/TextField";
|
|
|
|
import Button from "@mui/material/Button";
|
|
|
|
import Box from "@mui/material/Box";
|
|
|
|
import routes from "./routes";
|
|
|
|
import session from "../app/Session";
|
2022-12-15 05:11:22 +01:00
|
|
|
import Typography from "@mui/material/Typography";
|
|
|
|
import {NavLink} from "react-router-dom";
|
2022-12-21 19:19:07 +01:00
|
|
|
import AvatarBox from "./AvatarBox";
|
|
|
|
import {useTranslation} from "react-i18next";
|
2022-12-22 03:55:39 +01:00
|
|
|
import WarningAmberIcon from "@mui/icons-material/WarningAmber";
|
2022-12-25 17:59:44 +01:00
|
|
|
import accountApi, {AccountCreateLimitReachedError, UsernameTakenError} from "../app/AccountApi";
|
2022-12-14 11:36:53 +01:00
|
|
|
|
|
|
|
const Signup = () => {
|
2022-12-21 19:19:07 +01:00
|
|
|
const { t } = useTranslation();
|
2022-12-22 03:55:39 +01:00
|
|
|
const [error, setError] = useState("");
|
|
|
|
const [username, setUsername] = useState("");
|
|
|
|
const [password, setPassword] = useState("");
|
|
|
|
const [confirm, setConfirm] = useState("");
|
2022-12-14 11:36:53 +01:00
|
|
|
const handleSubmit = async (event) => {
|
|
|
|
event.preventDefault();
|
2022-12-22 03:55:39 +01:00
|
|
|
const user = { username, password };
|
|
|
|
try {
|
2022-12-25 17:59:44 +01:00
|
|
|
await accountApi.create(user.username, user.password);
|
|
|
|
const token = await accountApi.login(user);
|
2022-12-24 21:51:22 +01:00
|
|
|
console.log(`[Signup] User signup for user ${user.username} successful, token is ${token}`);
|
|
|
|
session.store(user.username, token);
|
|
|
|
window.location.href = routes.app;
|
2022-12-22 03:55:39 +01:00
|
|
|
} catch (e) {
|
|
|
|
console.log(`[Signup] Signup for user ${user.username} failed`, e);
|
2022-12-24 14:15:39 +01:00
|
|
|
if ((e instanceof UsernameTakenError)) {
|
2022-12-29 14:20:53 +01:00
|
|
|
setError(t("signup_error_username_taken", { username: e.username }));
|
2022-12-24 18:10:51 +01:00
|
|
|
} else if ((e instanceof AccountCreateLimitReachedError)) {
|
2022-12-29 14:20:53 +01:00
|
|
|
setError(t("signup_error_creation_limit_reached"));
|
2022-12-24 14:15:39 +01:00
|
|
|
} else if (e.message) {
|
2022-12-22 03:55:39 +01:00
|
|
|
setError(e.message);
|
|
|
|
} else {
|
2022-12-29 14:20:53 +01:00
|
|
|
setError(t("signup_error_unknown"))
|
2022-12-22 03:55:39 +01:00
|
|
|
}
|
|
|
|
}
|
2022-12-14 11:36:53 +01:00
|
|
|
};
|
2022-12-21 19:19:07 +01:00
|
|
|
if (!config.enableSignup) {
|
|
|
|
return (
|
|
|
|
<AvatarBox>
|
2022-12-29 14:20:53 +01:00
|
|
|
<Typography sx={{ typography: 'h6' }}>{t("signup_disabled")}</Typography>
|
2022-12-21 19:19:07 +01:00
|
|
|
</AvatarBox>
|
|
|
|
);
|
|
|
|
}
|
2022-12-14 11:36:53 +01:00
|
|
|
return (
|
2022-12-21 19:19:07 +01:00
|
|
|
<AvatarBox>
|
2022-12-15 05:11:22 +01:00
|
|
|
<Typography sx={{ typography: 'h6' }}>
|
2022-12-29 14:20:53 +01:00
|
|
|
{t("signup_title")}
|
2022-12-15 05:11:22 +01:00
|
|
|
</Typography>
|
|
|
|
<Box component="form" onSubmit={handleSubmit} noValidate sx={{mt: 1, maxWidth: 400}}>
|
|
|
|
<TextField
|
|
|
|
margin="dense"
|
|
|
|
required
|
|
|
|
fullWidth
|
|
|
|
id="username"
|
2022-12-29 14:20:53 +01:00
|
|
|
label={t("signup_form_username")}
|
2022-12-15 05:11:22 +01:00
|
|
|
name="username"
|
2022-12-22 03:55:39 +01:00
|
|
|
value={username}
|
|
|
|
onChange={ev => setUsername(ev.target.value.trim())}
|
2022-12-15 05:11:22 +01:00
|
|
|
autoFocus
|
|
|
|
/>
|
|
|
|
<TextField
|
|
|
|
margin="dense"
|
|
|
|
required
|
|
|
|
fullWidth
|
|
|
|
name="password"
|
2022-12-29 14:20:53 +01:00
|
|
|
label={t("signup_form_password")}
|
2022-12-15 05:11:22 +01:00
|
|
|
type="password"
|
|
|
|
id="password"
|
|
|
|
autoComplete="current-password"
|
2022-12-22 03:55:39 +01:00
|
|
|
value={password}
|
|
|
|
onChange={ev => setPassword(ev.target.value.trim())}
|
2022-12-15 05:11:22 +01:00
|
|
|
/>
|
|
|
|
<TextField
|
|
|
|
margin="dense"
|
|
|
|
required
|
|
|
|
fullWidth
|
|
|
|
name="confirm-password"
|
2022-12-29 14:20:53 +01:00
|
|
|
label={t("signup_form_confirm_password")}
|
2022-12-15 05:11:22 +01:00
|
|
|
type="password"
|
|
|
|
id="confirm-password"
|
2022-12-22 03:55:39 +01:00
|
|
|
value={confirm}
|
|
|
|
onChange={ev => setConfirm(ev.target.value.trim())}
|
|
|
|
|
2022-12-15 05:11:22 +01:00
|
|
|
/>
|
|
|
|
<Button
|
|
|
|
type="submit"
|
|
|
|
fullWidth
|
|
|
|
variant="contained"
|
2022-12-22 03:55:39 +01:00
|
|
|
disabled={username === "" || password === "" || password !== confirm}
|
2022-12-15 05:11:22 +01:00
|
|
|
sx={{mt: 2, mb: 2}}
|
|
|
|
>
|
2022-12-29 14:20:53 +01:00
|
|
|
{t("signup_form_button_submit")}
|
2022-12-15 05:11:22 +01:00
|
|
|
</Button>
|
2022-12-22 03:55:39 +01:00
|
|
|
{error &&
|
|
|
|
<Box sx={{
|
|
|
|
mb: 1,
|
|
|
|
display: 'flex',
|
|
|
|
flexGrow: 1,
|
|
|
|
justifyContent: 'center',
|
|
|
|
}}>
|
|
|
|
<WarningAmberIcon color="error" sx={{mr: 1}}/>
|
|
|
|
<Typography sx={{color: 'error.main'}}>{error}</Typography>
|
|
|
|
</Box>
|
|
|
|
}
|
2022-12-14 11:36:53 +01:00
|
|
|
</Box>
|
2022-12-21 19:19:07 +01:00
|
|
|
{config.enableLogin &&
|
|
|
|
<Typography sx={{mb: 4}}>
|
|
|
|
<NavLink to={routes.login} variant="body1">
|
2022-12-29 14:20:53 +01:00
|
|
|
{t("signup_already_have_account")}
|
2022-12-21 19:19:07 +01:00
|
|
|
</NavLink>
|
|
|
|
</Typography>
|
|
|
|
}
|
|
|
|
</AvatarBox>
|
2022-12-14 11:36:53 +01:00
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
export default Signup;
|