import React, {useCallback, useEffect, useState} from 'react';
import logo from '../../Flaticon_circle.png'
import {Alert, Card, Col, Row} from "react-bootstrap-v5";
import {Link, useNavigate} from "react-router-dom";
import {useTranslation} from "react-i18next";
import {FontAwesomeIcon as Fa} from "@fortawesome/react-fontawesome";
import {faPalette} from "@fortawesome/free-solid-svg-icons";
import {useTheme} from "../../hooks/themeHook";
import ColorSelectorModal from "../../components/modal/ColorSelectorModal";
import {useAuth} from "../../hooks/authenticationHook";
import FinalizeRegistrationModal from "../../components/modal/FinalizeRegistrationModal";
import {fetchRegisterCheck, postRegister} from "../../service/authenticationService";
const Logo = () => {
return (
)
};
const RegisterCard = ({children}) => {
return (
{children}
)
}
const RegisterForm = ({register}) => {
const {t} = useTranslation();
const [username, setUsername] = useState('');
const [password, setPassword] = useState('');
const onRegister = useCallback(event => {
event.preventDefault();
register(username, password).then(() => setPassword(''));
}, [username, password, setPassword, register]);
return (
);
}
const ColorChooserButton = () => {
const {t} = useTranslation();
const {toggleColorChooser} = useTheme();
return (
)
}
const LoginLink = () => {
const {t} = useTranslation();
return (
{t('html.register.login')}
)
}
const RegisterPage = () => {
const {t} = useTranslation();
const navigate = useNavigate();
const {authLoaded, authRequired, loggedIn} = useAuth();
const [finalizeRegistrationModalOpen, setFinalizeRegistrationModalOpen] = useState(false);
const [registerCode, setRegisterCode] = useState(undefined);
const [failMessage, setFailMessage] = useState('');
const toggleRegistrationModal = useCallback(() => setFinalizeRegistrationModalOpen(!finalizeRegistrationModalOpen),
[setFinalizeRegistrationModalOpen, finalizeRegistrationModalOpen])
useEffect(() => {
document.body.classList.add("bg-theme", "plan-bg-gradient");
return () => {
document.body.classList.remove("bg-theme", "plan-bg-gradient");
}
}, []);
const checkRegistration = async (code) => {
if (!code) {
setFinalizeRegistrationModalOpen(false);
return setFailMessage("Register code was not received.");
}
if (!finalizeRegistrationModalOpen) {
setFinalizeRegistrationModalOpen(true);
}
const {data, error} = await fetchRegisterCheck(code);
if (error) {
setFailMessage(t('html.register.error.checkFailed') + error)
} else if (data && data.success) {
navigate('/login?registerSuccess=true');
} else {
setTimeout(() => checkRegistration(code), 5000);
}
}
const register = async (username, password) => {
if (!username || username.length < 1) {
return setFailMessage(t('html.register.error.noUsername'));
}
if (username.length > 50) {
return setFailMessage(t('html.register.error.usernameLength') + username.length);
}
if (!password || password.length < 1) {
return setFailMessage(t('html.register.error.noPassword'));
}
const {data, error} = await postRegister(username, password);
if (error) {
setFailMessage(t('html.register.error.failed') + (error.data && error.data.error ? error.data.error : error.message));
} else if (data && data.code) {
setRegisterCode(data.code);
setFinalizeRegistrationModalOpen(true);
setTimeout(() => checkRegistration(data.code), 10000);
} else {
setFailMessage(t('html.register.error.failed') + data ? data.error : t('generic.noData'));
}
}
if (!authLoaded) {
return <>>
}
if (!authRequired || loggedIn) {
navigate('../');
}
return (
<>
{t('html.register.createNewUser')}
{failMessage && {failMessage} }
>
)
};
export default RegisterPage