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

115
src/pages/login.tsx
View File

@@ -11,6 +11,7 @@ import {BsArrowRepeat, BsCheck} from "react-icons/bs";
import Link from "next/link";
import Input from "@/components/Low/Input";
import clsx from "clsx";
import {useRouter} from "next/router";
const EMAIL_REGEX = new RegExp(/^[a-zA-Z0-9]+(?:\.[a-zA-Z0-9]+)*@[a-zA-Z0-9]+(?:\.[a-zA-Z0-9]+)*$/g);
@@ -20,7 +21,9 @@ export default function Login() {
const [rememberPassword, setRememberPassword] = useState(false);
const [isLoading, setIsLoading] = useState(false);
const {mutateUser} = useUser({
const router = useRouter();
const {user, mutateUser} = useUser({
redirectTo: "/",
redirectIfFound: true,
});
@@ -64,6 +67,23 @@ export default function Login() {
});
};
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>
@@ -85,41 +105,68 @@ export default function Login() {
<p className="self-start text-sm lg:text-base font-normal text-mti-gray-cool">with your registered Email Address</p>
</div>
<Divider className="max-w-xs lg:max-w-md" />
<form className="flex flex-col items-center gap-6 w-full -lg:px-8 lg:w-1/2" onSubmit={login}>
<Input type="email" name="email" onChange={(e) => setEmail(e)} placeholder="Enter email address" />
<Input type="password" name="password" onChange={(e) => setPassword(e)} placeholder="Password" />
<div className="flex justify-between w-full px-4">
<div className="flex gap-3 text-mti-gray-dim text-xs cursor-pointer" onClick={() => setRememberPassword((prev) => !prev)}>
<input type="checkbox" className="hidden" />
<div
className={clsx(
"w-4 h-4 rounded-sm flex items-center justify-center border border-mti-purple-light bg-white",
"transition duration-300 ease-in-out",
rememberPassword && "!bg-mti-purple-light ",
)}>
<BsCheck color="white" className="w-full h-full" />
{!user && (
<>
<form className="flex flex-col items-center gap-6 w-full -lg:px-8 lg:w-1/2" onSubmit={login}>
<Input type="email" name="email" onChange={(e) => setEmail(e)} placeholder="Enter email address" />
<Input type="password" name="password" onChange={(e) => setPassword(e)} placeholder="Password" />
<div className="flex justify-between w-full px-4">
<div
className="flex gap-3 text-mti-gray-dim text-xs cursor-pointer"
onClick={() => setRememberPassword((prev) => !prev)}>
<input type="checkbox" className="hidden" />
<div
className={clsx(
"w-4 h-4 rounded-sm flex items-center justify-center border border-mti-purple-light bg-white",
"transition duration-300 ease-in-out",
rememberPassword && "!bg-mti-purple-light ",
)}>
<BsCheck color="white" className="w-full h-full" />
</div>
<span>Remember my password</span>
</div>
<span className="text-mti-purple-light text-xs cursor-pointer hover:underline" onClick={forgotPassword}>
Forgot Password?
</span>
</div>
<span>Remember my password</span>
</div>
<span className="text-mti-purple-light text-xs cursor-pointer hover:underline" onClick={forgotPassword}>
Forgot Password?
<Button className="mt-8 w-full" color="purple" disabled={isLoading}>
{!isLoading && "Login"}
{isLoading && (
<div className="flex items-center justify-center">
<BsArrowRepeat className="text-white animate-spin" size={25} />
</div>
)}
</Button>
</form>
<span className="text-mti-gray-cool text-sm font-normal mt-8">
Don&apos;t have an account?{" "}
<Link className="text-mti-purple-light" href="/register">
Sign up
</Link>
</span>
</div>
<Button className="mt-8 w-full" color="purple" disabled={isLoading}>
{!isLoading && "Login"}
{isLoading && (
<div className="flex items-center justify-center">
<BsArrowRepeat className="text-white animate-spin" size={25} />
</div>
)}
</Button>
</form>
<span className="text-mti-gray-cool text-sm font-normal mt-8">
Don&apos;t have an account?{" "}
<Link className="text-mti-purple-light" href="/register">
Sign up
</Link>
</span>
</>
)}
{user && (
<>
<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>
</>