devops/encoach_frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Made it so users have to verify their e-mail starting to use the application

Browse Source
This commit is contained in:
Tiago Ribeiro
2023-09-07 12:45:31 +01:00
parent 5211e92c65
commit f91cd0ca63
17 changed files with 375 additions and 181 deletions
Download Patch File Download Diff File Expand all files Collapse all files

102
src/pages/register.tsx
View File

@@ -8,6 +8,9 @@ import {BsArrowRepeat} from "react-icons/bs";
import Link from "next/link";
import Input from "@/components/Low/Input";
import axios from "axios";
import {Divider} from "primereact/divider";
import {useRouter} from "next/router";
import clsx from "clsx";
export default function Register() {
const [name, setName] = useState("");
@@ -16,7 +19,9 @@ export default function Register() {
const [confirmPassword, setConfirmPassword] = useState("");
const [isLoading, setIsLoading] = useState(false);
const {mutateUser} = useUser({
const router = useRouter();
const {user, mutateUser} = useUser({
redirectTo: "/",
redirectIfFound: true,
});
@@ -32,7 +37,9 @@ export default function Register() {
setIsLoading(true);
axios
.post("/api/register", {name, email, password, profilePicture: "/defaultAvatar.png"})
.then((response) => mutateUser(response.data.user))
.then((response) => {
mutateUser(response.data.user).then(sendEmailVerification);
})
.catch((error) => {
console.log(error.response.data);
@@ -45,6 +52,23 @@ export default function Register() {
.finally(() => setIsLoading(false));
};
const sendEmailVerification = () => {
setIsLoading(true);
axios
.post<{ok: boolean}>("/api/reset/sendVerification", {})
.catch((e) => {
console.log(e);
toast.error("Something went wrong, please logout and re-login.", {toastId: "send-verify-error"});
})
.finally(() => setIsLoading(false));
};
const logout = async () => {
axios.post("/api/logout").finally(() => {
setTimeout(() => router.reload(), 500);
});
};
return (
<>
<Head>
@@ -60,33 +84,59 @@ export default function Register() {
<img src="/people-talking-tablet.png" alt="People smiling looking at a tablet" className="h-full aspect-auto" />
</section>
<section className="h-full w-full flex flex-col items-center justify-center gap-4">
<div className="flex flex-col gap-2 items-center relative mb-4">
<div className={clsx("flex flex-col gap-2 items-center relative", !user && "mb-4")}>
<img src="/logo_title.png" alt="EnCoach's Logo" className="w-36 lg:w-64 absolute -top-36 lg:-top-64" />
<h1 className="font-bold text-2xl lg:text-4xl">Create new account</h1>
</div>
<form className="flex flex-col items-center gap-6 w-full -lg:px-8 lg:w-1/2" onSubmit={register}>
<Input type="text" name="name" onChange={(e) => setName(e)} placeholder="Enter your name" required />
<Input type="email" name="email" onChange={(e) => setEmail(e)} placeholder="Enter email address" required />
<Input type="password" name="password" onChange={(e) => setPassword(e)} placeholder="Enter your password" required />
<Input
type="password"
name="confirmPassword"
onChange={(e) => setConfirmPassword(e)}
placeholder="Confirm your password"
required
/>
<Button className="lg:mt-8 w-full" color="purple" disabled={isLoading}>
{!isLoading && "Create account"}
{isLoading && (
<div className="flex items-center justify-center">
<BsArrowRepeat className="text-white animate-spin" size={25} />
</div>
)}
</Button>
</form>
<Link className="text-mti-purple-light text-sm font-normal" href="/login">
Sign in instead
</Link>
{!user && (
<>
<form className="flex flex-col items-center gap-6 w-full -lg:px-8 lg:w-1/2" onSubmit={register}>
<Input type="text" name="name" onChange={(e) => setName(e)} placeholder="Enter your name" required />
<Input type="email" name="email" onChange={(e) => setEmail(e)} placeholder="Enter email address" required />
<Input type="password" name="password" onChange={(e) => setPassword(e)} placeholder="Enter your password" required />
<Input
type="password"
name="confirmPassword"
onChange={(e) => setConfirmPassword(e)}
placeholder="Confirm your password"
required
/>
<Button className="lg:mt-8 w-full" color="purple" disabled={isLoading}>
{!isLoading && "Create account"}
{isLoading && (
<div className="flex items-center justify-center">
<BsArrowRepeat className="text-white animate-spin" size={25} />
</div>
)}
</Button>
</form>
<Link className="text-mti-purple-light text-sm font-normal" href="/login">
Sign in instead
</Link>
</>
)}
{user && (
<>
<Divider className="max-w-xs lg:max-w-md" />
<div className="flex flex-col items-center gap-6 w-full -lg:px-8 lg:w-1/2 relative">
<h4 className="font-semibold text-2xl text-mti-purple-light">Please confirm your account!</h4>
<span className="text-center">
An e-mail has been sent to <span className="italic text-mti-purple-light">{user.email}</span>, please click the
link in it to confirm your account to be able to use the application. <br /> <br />
Please refresh this page once it has been verified.
</span>
<Button className="mt-8 w-full" color="purple" disabled={isLoading} onClick={sendEmailVerification}>
Resend e-mail
</Button>
</div>
<Divider className="max-w-xs lg:max-w-md" />
<span className="text-mti-gray-cool text-sm font-normal">
<button className="text-mti-purple-light" onClick={logout}>
Log out instead
</button>
</span>
</>
)}
</section>
</main>
</>