diff --git a/src/pages/(register)/RegisterCorporate.tsx b/src/pages/(register)/RegisterCorporate.tsx index 6d04651c..46d6a54b 100644 --- a/src/pages/(register)/RegisterCorporate.tsx +++ b/src/pages/(register)/RegisterCorporate.tsx @@ -1,215 +1,279 @@ import Button from "@/components/Low/Button"; import Input from "@/components/Low/Input"; import useUsers from "@/hooks/useUsers"; -import {User} from "@/interfaces/user"; -import {sendEmailVerification} from "@/utils/email"; +import { User } from "@/interfaces/user"; +import { sendEmailVerification } from "@/utils/email"; import axios from "axios"; -import {Divider} from "primereact/divider"; -import {useState} from "react"; -import {toast} from "react-toastify"; -import {KeyedMutator} from "swr"; +import { Divider } from "primereact/divider"; +import { useState } from "react"; +import { toast } from "react-toastify"; +import { KeyedMutator } from "swr"; import Select from "react-select"; import moment from "moment"; interface Props { - isLoading: boolean; - setIsLoading: (isLoading: boolean) => void; - mutateUser: KeyedMutator; - sendEmailVerification: typeof sendEmailVerification; + isLoading: boolean; + setIsLoading: (isLoading: boolean) => void; + mutateUser: KeyedMutator; + sendEmailVerification: typeof sendEmailVerification; } const availableDurations = { - "1_month": {label: "1 Month", number: 1}, - "3_months": {label: "3 Months", number: 3}, - "6_months": {label: "6 Months", number: 6}, - "12_months": {label: "12 Months", number: 12}, + "1_month": { label: "1 Month", number: 1 }, + "3_months": { label: "3 Months", number: 3 }, + "6_months": { label: "6 Months", number: 6 }, + "12_months": { label: "12 Months", number: 12 }, }; -export default function RegisterCorporate({isLoading, setIsLoading, mutateUser, sendEmailVerification}: Props) { - const [name, setName] = useState(""); - const [email, setEmail] = useState(""); - const [password, setPassword] = useState(""); - const [confirmPassword, setConfirmPassword] = useState(""); - const [referralAgent, setReferralAgent] = useState(); +export default function RegisterCorporate({ + isLoading, + setIsLoading, + mutateUser, + sendEmailVerification, +}: Props) { + const [name, setName] = useState(""); + const [email, setEmail] = useState(""); + const [password, setPassword] = useState(""); + const [confirmPassword, setConfirmPassword] = useState(""); + const [referralAgent, setReferralAgent] = useState(); - const [companyName, setCompanyName] = useState(""); - const [companyUsers, setCompanyUsers] = useState(0); - const [subscriptionDuration, setSubscriptionDuration] = useState(1); + const [companyName, setCompanyName] = useState(""); + const [companyUsers, setCompanyUsers] = useState(0); + const [subscriptionDuration, setSubscriptionDuration] = useState(1); - const {users} = useUsers(); + const { users } = useUsers(); - const onSuccess = () => toast.success("An e-mail has been sent, please make sure to check your spam folder!"); + 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 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(); + const register = (e: any) => { + e.preventDefault(); - if (confirmPassword !== password) { - toast.error("Your passwords do not match!", {toastId: "password-not-match"}); - return; - } + 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: "corporate", - profilePicture: "/defaultAvatar.png", - subscriptionExpirationDate: moment().subtract(1, "days").toISOString(), - corporateInformation: { - companyInformation: { - name: companyName, - userAmount: companyUsers, - }, - monthlyDuration: subscriptionDuration, - referralAgent, - }, - }) - .then((response) => { - mutateUser(response.data.user).then(() => sendEmailVerification(setIsLoading, onSuccess, onError)); - }) - .catch((error) => { - console.log(error.response.data); + setIsLoading(true); + axios + .post("/api/register", { + name, + email, + password, + type: "corporate", + profilePicture: "/defaultAvatar.png", + subscriptionExpirationDate: moment().subtract(1, "days").toISOString(), + corporateInformation: { + companyInformation: { + name: companyName, + userAmount: companyUsers, + }, + monthlyDuration: subscriptionDuration, + referralAgent, + }, + }) + .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 === 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; - } + 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)); - }; + toast.error("There was something wrong, please try again!"); + }) + .finally(() => setIsLoading(false)); + }; - return ( -
-
- setName(e)} placeholder="Enter your name" defaultValue={name} required /> - setEmail(e)} placeholder="Enter email address" defaultValue={email} required /> -
+ return ( + +
+ setName(e)} + placeholder="Enter your name" + defaultValue={name} + required + /> + setEmail(e.toLowerCase())} + placeholder="Enter email address" + defaultValue={email} + required + /> +
-
- setPassword(e)} - placeholder="Enter your password" - defaultValue={password} - required - /> - setConfirmPassword(e)} - placeholder="Confirm your password" - defaultValue={confirmPassword} - required - /> -
+
+ setPassword(e)} + placeholder="Enter your password" + defaultValue={password} + required + /> + setConfirmPassword(e)} + placeholder="Confirm your password" + defaultValue={confirmPassword} + required + /> +
- + -
- setCompanyName(e)} - placeholder="Corporate name" - label="Corporate name" - defaultValue={companyName} - required - /> - setCompanyUsers(parseInt(e))} - label="Number of users" - defaultValue={companyUsers} - required - /> -
+
+ setCompanyName(e)} + placeholder="Corporate name" + label="Corporate name" + defaultValue={companyName} + required + /> + setCompanyUsers(parseInt(e))} + label="Number of users" + defaultValue={companyUsers} + required + /> +
-
-
- - u.type === "agent") + .map((x) => ({ value: x.id, label: `${x.name} - ${x.email}` })), + ]} + defaultValue={{ value: "", label: "No referral" }} + onChange={(value) => setReferralAgent(value?.value)} + styles={{ + control: (styles) => ({ + ...styles, + paddingLeft: "4px", + border: "none", + outline: "none", + ":focus": { + outline: "none", + }, + }), + option: (styles, state) => ({ + ...styles, + backgroundColor: state.isFocused + ? "#D5D9F0" + : state.isSelected + ? "#7872BF" + : "white", + color: state.isFocused ? "black" : styles.color, + }), + }} + /> +
-
- - ({ + value, + label: + availableDurations[value as keyof typeof availableDurations] + .label, + }))} + defaultValue={{ + value: "1_month", + label: availableDurations["1_month"].label, + }} + onChange={(value) => + setSubscriptionDuration( + value + ? availableDurations[ + value.value as keyof typeof availableDurations + ].number + : 1, + ) + } + styles={{ + control: (styles) => ({ + ...styles, + paddingLeft: "4px", + border: "none", + outline: "none", + ":focus": { + outline: "none", + }, + }), + option: (styles, state) => ({ + ...styles, + backgroundColor: state.isFocused + ? "#D5D9F0" + : state.isSelected + ? "#7872BF" + : "white", + color: state.isFocused ? "black" : styles.color, + }), + }} + /> +
+
- - - ); + + + ); } diff --git a/src/pages/(register)/RegisterIndividual.tsx b/src/pages/(register)/RegisterIndividual.tsx index 1d0a203a..d8efca7f 100644 --- a/src/pages/(register)/RegisterIndividual.tsx +++ b/src/pages/(register)/RegisterIndividual.tsx @@ -1,132 +1,167 @@ 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 { 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"; +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; - sendEmailVerification: typeof sendEmailVerification; + queryCode?: string; + defaultInformation?: { + email: string; + name: string; + passport_id?: string; + }; + isLoading: boolean; + setIsLoading: (isLoading: boolean) => void; + mutateUser: KeyedMutator; + 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(!!queryCode); +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(!!queryCode); - const onSuccess = () => toast.success("An e-mail has been sent, please make sure to check your spam folder!"); + 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 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(); + const register = (e: any) => { + e.preventDefault(); - if (confirmPassword !== password) { - toast.error("Your passwords do not match!", {toastId: "password-not-match"}); - return; - } + 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); + 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 === 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; - } + 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)); - }; + toast.error("There was something wrong, please try again!"); + }) + .finally(() => setIsLoading(false)); + }; - return ( -
- setName(e)} placeholder="Enter your name" value={name} required /> - setEmail(e)} - placeholder="Enter email address" - value={email} - disabled={!!defaultInformation?.email} - required - /> - setPassword(e)} - placeholder="Enter your password" - defaultValue={password} - required - /> - setConfirmPassword(e)} - placeholder="Confirm your password" - defaultValue={confirmPassword} - required - /> + return ( + + setName(e)} + placeholder="Enter your name" + value={name} + required + /> + setEmail(e.toLowerCase())} + placeholder="Enter email address" + value={email} + disabled={!!defaultInformation?.email} + required + /> + setPassword(e)} + placeholder="Enter your password" + defaultValue={password} + required + /> + setConfirmPassword(e)} + placeholder="Confirm your password" + defaultValue={confirmPassword} + required + /> -
- - I have a code - - {hasCode && ( - setCode(e)} - placeholder="Enter your registration code (optional)" - defaultValue={code} - required - /> - )} -
+
+ + I have a code + + {hasCode && ( + setCode(e)} + placeholder="Enter your registration code (optional)" + defaultValue={code} + required + /> + )} +
- -
- ); + + + ); } diff --git a/src/pages/api/code/index.ts b/src/pages/api/code/index.ts index d855e1f8..ff53ec05 100644 --- a/src/pages/api/code/index.ts +++ b/src/pages/api/code/index.ts @@ -1,109 +1,143 @@ // Next.js API route support: https://nextjs.org/docs/api-routes/introduction -import type {NextApiRequest, NextApiResponse} from "next"; -import {app} from "@/firebase"; -import {getFirestore, setDoc, doc, query, collection, where, getDocs} from "firebase/firestore"; -import {withIronSessionApiRoute} from "iron-session/next"; -import {sessionOptions} from "@/lib/session"; -import {Type} from "@/interfaces/user"; -import {PERMISSIONS} from "@/constants/userPermissions"; -import {uuidv4} from "@firebase/util"; -import {prepareMailer, prepareMailOptions} from "@/email"; +import type { NextApiRequest, NextApiResponse } from "next"; +import { app } from "@/firebase"; +import { + getFirestore, + setDoc, + doc, + query, + collection, + where, + getDocs, +} from "firebase/firestore"; +import { withIronSessionApiRoute } from "iron-session/next"; +import { sessionOptions } from "@/lib/session"; +import { Type } from "@/interfaces/user"; +import { PERMISSIONS } from "@/constants/userPermissions"; +import { uuidv4 } from "@firebase/util"; +import { prepareMailer, prepareMailOptions } from "@/email"; const db = getFirestore(app); export default withIronSessionApiRoute(handler, sessionOptions); async function handler(req: NextApiRequest, res: NextApiResponse) { - if (req.method === "GET") return get(req, res); - if (req.method === "POST") return post(req, res); + if (req.method === "GET") return get(req, res); + if (req.method === "POST") return post(req, res); - return res.status(404).json({ok: false}); + return res.status(404).json({ ok: false }); } async function get(req: NextApiRequest, res: NextApiResponse) { - if (!req.session.user) { - res.status(401).json({ok: false, reason: "You must be logged in to generate a code!"}); - return; - } + if (!req.session.user) { + res + .status(401) + .json({ ok: false, reason: "You must be logged in to generate a code!" }); + return; + } - const {creator} = req.query as {creator?: string}; - const q = query(collection(db, "codes"), where("creator", "==", creator)); - const snapshot = await getDocs(creator ? q : collection(db, "codes")); + const { creator } = req.query as { creator?: string }; + const q = query(collection(db, "codes"), where("creator", "==", creator)); + const snapshot = await getDocs(creator ? q : collection(db, "codes")); - res.status(200).json(snapshot.docs.map((doc) => doc.data())); + res.status(200).json(snapshot.docs.map((doc) => doc.data())); } async function post(req: NextApiRequest, res: NextApiResponse) { - if (!req.session.user) { - res.status(401).json({ok: false, reason: "You must be logged in to generate a code!"}); - return; - } + if (!req.session.user) { + res + .status(401) + .json({ ok: false, reason: "You must be logged in to generate a code!" }); + return; + } - const {type, codes, infos, expiryDate} = req.body as { - type: Type; - codes: string[]; - infos?: {email: string; name: string; passport_id?: string}[]; - expiryDate: null | Date; - }; - const permission = PERMISSIONS.generateCode[type]; + const { type, codes, infos, expiryDate } = req.body as { + type: Type; + codes: string[]; + infos?: { email: string; name: string; passport_id?: string }[]; + expiryDate: null | Date; + }; + const permission = PERMISSIONS.generateCode[type]; - if (!permission.includes(req.session.user.type)) { - res.status(403).json({ok: false, reason: "Your account type does not have permissions to generate a code for that type of user!"}); - return; - } + if (!permission.includes(req.session.user.type)) { + res + .status(403) + .json({ + ok: false, + reason: + "Your account type does not have permissions to generate a code for that type of user!", + }); + return; + } - if (req.session.user.type === "corporate") { - const codesGeneratedByUserSnapshot = await getDocs(query(collection(db, "codes"), where("creator", "==", req.session.user.id))); - const totalCodes = codesGeneratedByUserSnapshot.docs.length + codes.length; - const allowedCodes = req.session.user.corporateInformation?.companyInformation.userAmount || 0; + if (req.session.user.type === "corporate") { + const codesGeneratedByUserSnapshot = await getDocs( + query( + collection(db, "codes"), + where("creator", "==", req.session.user.id), + ), + ); + const totalCodes = codesGeneratedByUserSnapshot.docs.length + codes.length; + const allowedCodes = + req.session.user.corporateInformation?.companyInformation.userAmount || 0; - if (totalCodes > allowedCodes) { - res.status(403).json({ - ok: false, - reason: `You have or would have exceeded your amount of allowed codes, you currently are allowed to generate ${ - allowedCodes - codesGeneratedByUserSnapshot.docs.length - } codes.`, - }); - return; - } - } + if (totalCodes > allowedCodes) { + res.status(403).json({ + ok: false, + reason: `You have or would have exceeded your amount of allowed codes, you currently are allowed to generate ${ + allowedCodes - codesGeneratedByUserSnapshot.docs.length + } codes.`, + }); + return; + } + } - const codePromises = codes.map(async (code, index) => { - const codeRef = doc(db, "codes", code); - const codeInformation = {type, code, creator: req.session.user!.id, expiryDate}; + const codePromises = codes.map(async (code, index) => { + const codeRef = doc(db, "codes", code); + const codeInformation = { + type, + code, + creator: req.session.user!.id, + expiryDate, + }; - if (infos && infos.length > index) { - const {email, name, passport_id} = infos[index]; + if (infos && infos.length > index) { + const { email, name, passport_id } = infos[index]; - const transport = prepareMailer(); - const mailOptions = prepareMailOptions( - { - type, - code, - }, - [email.trim()], - "EnCoach Registration", - "main", - ); + const transport = prepareMailer(); + const mailOptions = prepareMailOptions( + { + type, + code, + }, + [email.toLowerCase().trim()], + "EnCoach Registration", + "main", + ); - try { - await transport.sendMail(mailOptions); - await setDoc( - codeRef, - {...codeInformation, email: email.trim(), name: name.trim(), ...(passport_id ? {passport_id: passport_id.trim()} : {})}, - {merge: true}, - ); + try { + await transport.sendMail(mailOptions); + await setDoc( + codeRef, + { + ...codeInformation, + email: email.trim().toLowerCase(), + name: name.trim(), + ...(passport_id ? { passport_id: passport_id.trim() } : {}), + }, + { merge: true }, + ); - return true; - } catch (e) { - return false; - } - } else { - await setDoc(codeRef, codeInformation); - } - }); + return true; + } catch (e) { + return false; + } + } else { + await setDoc(codeRef, codeInformation); + } + }); - Promise.all(codePromises).then((results) => { - res.status(200).json({ok: true, valid: results.filter((x) => x).length}); - }); + Promise.all(codePromises).then((results) => { + res.status(200).json({ ok: true, valid: results.filter((x) => x).length }); + }); } diff --git a/src/pages/login.tsx b/src/pages/login.tsx index 2f62981e..2a6990df 100644 --- a/src/pages/login.tsx +++ b/src/pages/login.tsx @@ -1,172 +1,232 @@ /* eslint-disable @next/next/no-img-element */ -import {User} from "@/interfaces/user"; -import {toast, ToastContainer} from "react-toastify"; +import { User } from "@/interfaces/user"; +import { toast, ToastContainer } from "react-toastify"; import axios from "axios"; -import {FormEvent, useEffect, useState} from "react"; +import { FormEvent, useEffect, useState } from "react"; import Head from "next/head"; import useUser from "@/hooks/useUser"; -import {Divider} from "primereact/divider"; +import { Divider } from "primereact/divider"; import Button from "@/components/Low/Button"; -import {BsArrowRepeat, BsCheck} from "react-icons/bs"; +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"; +import { useRouter } from "next/router"; import EmailVerification from "./(auth)/EmailVerification"; -import {withIronSessionSsr} from "iron-session/next"; -import {sessionOptions} from "@/lib/session"; +import { withIronSessionSsr } from "iron-session/next"; +import { sessionOptions } from "@/lib/session"; -const EMAIL_REGEX = new RegExp(/^[a-zA-Z0-9]+(?:\.[a-zA-Z0-9]+)*@[a-zA-Z0-9]+(?:\.[a-zA-Z0-9]+)*$/g); +const EMAIL_REGEX = new RegExp( + /^[a-zA-Z0-9]+(?:\.[a-zA-Z0-9]+)*@[a-zA-Z0-9]+(?:\.[a-zA-Z0-9]+)*$/g, +); -export const getServerSideProps = withIronSessionSsr(({req, res}) => { - const user = req.session.user; +export const getServerSideProps = withIronSessionSsr(({ req, res }) => { + const user = req.session.user; - const envVariables: {[key: string]: string} = {}; - Object.keys(process.env) - .filter((x) => x.startsWith("NEXT_PUBLIC")) - .forEach((x: string) => { - envVariables[x] = process.env[x]!; - }); + const envVariables: { [key: string]: string } = {}; + Object.keys(process.env) + .filter((x) => x.startsWith("NEXT_PUBLIC")) + .forEach((x: string) => { + envVariables[x] = process.env[x]!; + }); - if (user && user.isVerified) { - res.setHeader("location", "/"); - res.statusCode = 302; - res.end(); - return { - props: { - user: null, - envVariables, - }, - }; - } + if (user && user.isVerified) { + res.setHeader("location", "/"); + res.statusCode = 302; + res.end(); + return { + props: { + user: null, + envVariables, + }, + }; + } - return { - props: {user: null, envVariables}, - }; + return { + props: { user: null, envVariables }, + }; }, sessionOptions); export default function Login() { - const [email, setEmail] = useState(""); - const [password, setPassword] = useState(""); - const [rememberPassword, setRememberPassword] = useState(false); - const [isLoading, setIsLoading] = useState(false); + const [email, setEmail] = useState(""); + const [password, setPassword] = useState(""); + const [rememberPassword, setRememberPassword] = useState(false); + const [isLoading, setIsLoading] = useState(false); - const router = useRouter(); + const router = useRouter(); - const {user, mutateUser} = useUser({ - redirectTo: "/", - redirectIfFound: true, - }); + const { user, mutateUser } = useUser({ + redirectTo: "/", + redirectIfFound: true, + }); - useEffect(() => { - if (user && user.isVerified) router.push("/"); - }, [router, user]); + useEffect(() => { + if (user && user.isVerified) router.push("/"); + }, [router, user]); - const forgotPassword = () => { - if (!email || email.length < 0 || !EMAIL_REGEX.test(email)) { - toast.error("Please enter your e-mail to reset your password!", {toastId: "forgot-invalid-email"}); - return; - } + const forgotPassword = () => { + if (!email || email.length < 0 || !EMAIL_REGEX.test(email)) { + toast.error("Please enter your e-mail to reset your password!", { + toastId: "forgot-invalid-email", + }); + return; + } - axios - .post<{ok: boolean}>("/api/reset", {email}) - .then((response) => { - if (response.data.ok) { - toast.success("You should receive an e-mail to reset your password!", {toastId: "forgot-success"}); - return; - } + axios + .post<{ ok: boolean }>("/api/reset", { email }) + .then((response) => { + if (response.data.ok) { + toast.success( + "You should receive an e-mail to reset your password!", + { toastId: "forgot-success" }, + ); + return; + } - toast.error("That e-mail address is not connected to an account!", {toastId: "forgot-error"}); - }) - .catch(() => toast.error("That e-mail address is not connected to an account!", {toastId: "forgot-error"})); - }; + toast.error("That e-mail address is not connected to an account!", { + toastId: "forgot-error", + }); + }) + .catch(() => + toast.error("That e-mail address is not connected to an account!", { + toastId: "forgot-error", + }), + ); + }; - const login = (e: FormEvent) => { - e.preventDefault(); + const login = (e: FormEvent) => { + e.preventDefault(); - setIsLoading(true); - axios - .post("/api/login", {email, password}) - .then((response) => { - toast.success("You have been logged in!", {toastId: "login-successful"}); - mutateUser(response.data); - }) - .catch((e) => { - if (e.response.status === 401) { - toast.error("Wrong login credentials!", {toastId: "wrong-credentials"}); - } else { - toast.error("Something went wrong!", {toastId: "server-error"}); - } - setIsLoading(false); - }) - .finally(() => setIsLoading(false)); - }; + setIsLoading(true); + axios + .post("/api/login", { email, password }) + .then((response) => { + toast.success("You have been logged in!", { + toastId: "login-successful", + }); + mutateUser(response.data); + }) + .catch((e) => { + if (e.response.status === 401) { + toast.error("Wrong login credentials!", { + toastId: "wrong-credentials", + }); + } else { + toast.error("Something went wrong!", { toastId: "server-error" }); + } + setIsLoading(false); + }) + .finally(() => setIsLoading(false)); + }; - return ( - <> - - Login | EnCoach - - - - -
- -
-
- People smiling looking at a tablet -
-
-
- EnCoach's Logo -

Login to your account

-

with your registered Email Address

-
- - {!user && ( - <> -
- setEmail(e)} placeholder="Enter email address" /> - setPassword(e)} placeholder="Password" /> -
-
setRememberPassword((prev) => !prev)}> - -
- -
- Remember my password -
- - Forgot Password? - -
- -
- - Don't have an account?{" "} - - Sign up - - - - )} - {user && !user.isVerified && } -
-
- - ); + return ( + <> + + Login | EnCoach + + + + +
+ +
+
+ People smiling looking at a tablet +
+
+
+ EnCoach's Logo +

+ Login to your account +

+

+ with your registered Email Address +

+
+ + {!user && ( + <> +
+ setEmail(e.toLowerCase())} + placeholder="Enter email address" + /> + setPassword(e)} + placeholder="Password" + /> +
+
setRememberPassword((prev) => !prev)} + > + +
+ +
+ Remember my password +
+ + Forgot Password? + +
+ +
+ + Don't have an account?{" "} + + Sign up + + + + )} + {user && !user.isVerified && ( + + )} +
+
+ + ); }