133 lines
3.7 KiB
TypeScript
133 lines
3.7 KiB
TypeScript
import Button from "@/components/Low/Button";
|
|
import Checkbox from "@/components/Low/Checkbox";
|
|
import Input from "@/components/Low/Input";
|
|
import {User} from "@/interfaces/user";
|
|
import {sendEmailVerification} from "@/utils/email";
|
|
import axios from "axios";
|
|
import {useEffect, useState} from "react";
|
|
import {toast} from "react-toastify";
|
|
import {KeyedMutator} from "swr";
|
|
|
|
interface Props {
|
|
queryCode?: string;
|
|
defaultInformation?: {
|
|
email: string;
|
|
name: string;
|
|
passport_id?: string;
|
|
};
|
|
isLoading: boolean;
|
|
setIsLoading: (isLoading: boolean) => void;
|
|
mutateUser: KeyedMutator<User>;
|
|
sendEmailVerification: typeof sendEmailVerification;
|
|
}
|
|
|
|
export default function RegisterIndividual({queryCode, defaultInformation, isLoading, setIsLoading, mutateUser, sendEmailVerification}: Props) {
|
|
const [name, setName] = useState(defaultInformation?.name || "");
|
|
const [email, setEmail] = useState(defaultInformation?.email || "");
|
|
const [password, setPassword] = useState("");
|
|
const [confirmPassword, setConfirmPassword] = useState("");
|
|
const [code, setCode] = useState(queryCode || "");
|
|
const [hasCode, setHasCode] = useState<boolean>(!!queryCode);
|
|
|
|
const onSuccess = () => toast.success("An e-mail has been sent, please make sure to check your spam folder!");
|
|
|
|
const onError = (e: Error) => {
|
|
console.error(e);
|
|
toast.error("Something went wrong, please logout and re-login.", {toastId: "send-verify-error"});
|
|
};
|
|
|
|
const register = (e: any) => {
|
|
e.preventDefault();
|
|
|
|
if (confirmPassword !== password) {
|
|
toast.error("Your passwords do not match!", {toastId: "password-not-match"});
|
|
return;
|
|
}
|
|
|
|
setIsLoading(true);
|
|
axios
|
|
.post("/api/register", {
|
|
name,
|
|
email,
|
|
password,
|
|
type: "individual",
|
|
code,
|
|
passport_id: defaultInformation?.passport_id,
|
|
profilePicture: "/defaultAvatar.png",
|
|
})
|
|
.then((response) => {
|
|
mutateUser(response.data.user).then(() => sendEmailVerification(setIsLoading, onSuccess, onError));
|
|
})
|
|
.catch((error) => {
|
|
console.log(error.response.data);
|
|
|
|
if (error.response.status === 401) {
|
|
toast.error("There is already a user with that e-mail!");
|
|
return;
|
|
}
|
|
|
|
if (error.response.status === 400) {
|
|
toast.error("The provided code is invalid!");
|
|
return;
|
|
}
|
|
|
|
toast.error("There was something wrong, please try again!");
|
|
})
|
|
.finally(() => setIsLoading(false));
|
|
};
|
|
|
|
return (
|
|
<form className="flex flex-col items-center gap-6 w-full" onSubmit={register}>
|
|
<Input type="text" name="name" onChange={(e) => setName(e)} placeholder="Enter your name" value={name} required />
|
|
<Input
|
|
type="email"
|
|
name="email"
|
|
onChange={(e) => setEmail(e)}
|
|
placeholder="Enter email address"
|
|
value={email}
|
|
disabled={!!defaultInformation?.email}
|
|
required
|
|
/>
|
|
<Input
|
|
type="password"
|
|
name="password"
|
|
onChange={(e) => setPassword(e)}
|
|
placeholder="Enter your password"
|
|
defaultValue={password}
|
|
required
|
|
/>
|
|
<Input
|
|
type="password"
|
|
name="confirmPassword"
|
|
onChange={(e) => setConfirmPassword(e)}
|
|
placeholder="Confirm your password"
|
|
defaultValue={confirmPassword}
|
|
required
|
|
/>
|
|
|
|
<div className="flex flex-col gap-4 w-full items-start">
|
|
<Checkbox isChecked={hasCode} onChange={setHasCode}>
|
|
I have a code
|
|
</Checkbox>
|
|
{hasCode && (
|
|
<Input
|
|
type="text"
|
|
name="code"
|
|
onChange={(e) => setCode(e)}
|
|
placeholder="Enter your registration code (optional)"
|
|
defaultValue={code}
|
|
required
|
|
/>
|
|
)}
|
|
</div>
|
|
|
|
<Button
|
|
className="lg:mt-8 w-full"
|
|
color="purple"
|
|
disabled={isLoading || !email || !name || !password || !confirmPassword || password !== confirmPassword || (hasCode ? !code : false)}>
|
|
Create account
|
|
</Button>
|
|
</form>
|
|
);
|
|
}
|