diff --git a/public/orange-stock-photo.jpg b/public/orange-stock-photo.jpg new file mode 100644 index 00000000..821d0f82 Binary files /dev/null and b/public/orange-stock-photo.jpg differ diff --git a/public/red-stock-photo.jpg b/public/red-stock-photo.jpg new file mode 100644 index 00000000..3d5ab68b Binary files /dev/null and b/public/red-stock-photo.jpg differ diff --git a/src/pages/login.tsx b/src/pages/login.tsx index 73582e1a..4d4b6292 100644 --- a/src/pages/login.tsx +++ b/src/pages/login.tsx @@ -1,229 +1,181 @@ /* 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) { - return { + if (user && user.isVerified) { + return { redirect: { destination: "/", permanent: false, - } + }, }; - } + } - 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.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 && ( - - )} -
-
- - ); + 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 && } +
+
+ + ); } diff --git a/src/pages/register.tsx b/src/pages/register.tsx index 1da21305..3cfda76d 100644 --- a/src/pages/register.tsx +++ b/src/pages/register.tsx @@ -55,8 +55,7 @@ export default function Register({code: queryCode}: {code: string}) {
-
- People smiling looking at a tablet + People smiling looking at a tablet