import * as React from "react";
import { useState } from "react";
import { TextField, Button, Box, Typography, InputAdornment, IconButton } from "@mui/material";
import { NavLink } from "react-router-dom";
import { useTranslation } from "react-i18next";
import WarningAmberIcon from "@mui/icons-material/WarningAmber";
import { Visibility, VisibilityOff } from "@mui/icons-material";
import accountApi from "../app/AccountApi";
import AvatarBox from "./AvatarBox";
import session from "../app/Session";
import routes from "./routes";
import { AccountCreateLimitReachedError, UserExistsError } from "../app/errors";
const Signup = () => {
const { t } = useTranslation();
const [error, setError] = useState("");
const [username, setUsername] = useState("");
const [password, setPassword] = useState("");
const [confirm, setConfirm] = useState("");
const [showPassword, setShowPassword] = useState(false);
const [showConfirm, setShowConfirm] = useState(false);
const handleSubmit = async (event) => {
event.preventDefault();
const user = { username, password };
try {
await accountApi.create(user.username, user.password);
const token = await accountApi.login(user);
console.log(`[Signup] User signup for user ${user.username} successful, token is ${token}`);
await session.store(user.username, token);
window.location.href = routes.app;
} catch (e) {
console.log(`[Signup] Signup for user ${user.username} failed`, e);
if (e instanceof UserExistsError) {
setError(t("signup_error_username_taken", { username: e.username }));
} else if (e instanceof AccountCreateLimitReachedError) {
setError(t("signup_error_creation_limit_reached"));
} else {
setError(e.message);
}
}
};
if (!config.enable_signup) {
return (
{t("signup_disabled")}
);
}
return (
{t("signup_title")}
setUsername(ev.target.value.trim())}
autoFocus
/>
setPassword(ev.target.value.trim())}
InputProps={{
endAdornment: (
setShowPassword(!showPassword)}
onMouseDown={(ev) => ev.preventDefault()}
edge="end"
>
{showPassword ? : }
),
}}
/>
setConfirm(ev.target.value.trim())}
InputProps={{
endAdornment: (
setShowConfirm(!showConfirm)}
onMouseDown={(ev) => ev.preventDefault()}
edge="end"
>
{showConfirm ? : }
),
}}
/>
{error && (
{error}
)}
{config.enable_login && (
{t("signup_already_have_account")}
)}
);
};
export default Signup;