From f5c3abb31023d58747f43ffeaa31b3d028fb6c2b Mon Sep 17 00:00:00 2001
From: Tiago Ribeiro <tiago.ribeiro@ecrop.dev>
Date: Tue, 25 Jul 2023 19:53:48 +0100
Subject: [PATCH] Fully implemented the register flow

---
 public/defaultAvatar.png  | Bin 0 -> 5341 bytes
 src/pages/api/register.ts |  48 ++++++++++++++++++++++++++++++++++++++
 src/pages/index.tsx       |   6 +++--
 src/pages/register.tsx    |  29 +++++++++++++++++++++--
 4 files changed, 79 insertions(+), 4 deletions(-)
 create mode 100644 public/defaultAvatar.png
 create mode 100644 src/pages/api/register.ts

diff --git a/public/defaultAvatar.png b/public/defaultAvatar.png
new file mode 100644
index 0000000000000000000000000000000000000000..2f907dabdf78032f4eb1ade68a49abe955a97b12
GIT binary patch
literal 5341
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
Jc?UdW{|OSI<%0kK

literal 0
HcmV?d00001

diff --git a/src/pages/api/register.ts b/src/pages/api/register.ts
new file mode 100644
index 00000000..cbdecb50
--- /dev/null
+++ b/src/pages/api/register.ts
@@ -0,0 +1,48 @@
+import {NextApiRequest, NextApiResponse} from "next";
+import {createUserWithEmailAndPassword, getAuth} from "firebase/auth";
+import {app} from "@/firebase";
+import {sessionOptions} from "@/lib/session";
+import {withIronSessionApiRoute} from "iron-session/next";
+import {getFirestore, getDoc, doc, setDoc} from "firebase/firestore";
+
+const auth = getAuth(app);
+const db = getFirestore(app);
+
+export default withIronSessionApiRoute(login, sessionOptions);
+
+const DEFAULT_DESIRED_LEVELS = {
+	reading: 9,
+	listening: 9,
+	writing: 9,
+	speaking: 9,
+};
+
+const DEFAULT_LEVELS = {
+	reading: 0,
+	listening: 0,
+	writing: 0,
+	speaking: 0,
+};
+
+async function login(req: NextApiRequest, res: NextApiResponse) {
+	const {email, password} = req.body as {email: string; password: string};
+
+	createUserWithEmailAndPassword(auth, email, password)
+		.then(async (userCredentials) => {
+			const userId = userCredentials.user.uid;
+			delete req.body.password;
+
+			const user = {...req.body, desiredLevels: DEFAULT_DESIRED_LEVELS, levels: DEFAULT_LEVELS, bio: "", isFirstLogin: true};
+
+			await setDoc(doc(db, "users", userId), user);
+
+			req.session.user = {...user, id: userId};
+			await req.session.save();
+
+			res.status(200).json({user: {...user, id: userId}});
+		})
+		.catch((error) => {
+			console.log(error);
+			res.status(401).json({error});
+		});
+}
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 6dda4e1b..0a3cdec6 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -124,7 +124,7 @@ export default function Home() {
 										<BsStar className="w-8 h-8 text-mti-red-light" />
 									</div>
 									<div className="flex flex-col">
-										<span className="font-bold text-xl">{averageScore(stats)}%</span>
+										<span className="font-bold text-xl">{stats.length > 0 ? averageScore(stats) : 0}%</span>
 										<span className="font-normal text-base text-mti-gray-dim">Average Score</span>
 									</div>
 								</div>
@@ -133,7 +133,9 @@ export default function Home() {
 					</section>
 					<section className="flex flex-col gap-3">
 						<span className="font-bold text-lg">Bio</span>
-						<span className="text-mti-gray-taupe">{user.bio || "Your bio will appear here..."}</span>
+						<span className="text-mti-gray-taupe">
+							{user.bio || "Your bio will appear here, you can change it by clicking on your name in the top right corner."}
+						</span>
 					</section>
 					<section className="flex flex-col gap-3">
 						<span className="font-bold text-lg">Score History</span>
diff --git a/src/pages/register.tsx b/src/pages/register.tsx
index c9dfb3a0..243e34c7 100644
--- a/src/pages/register.tsx
+++ b/src/pages/register.tsx
@@ -1,5 +1,5 @@
 /* eslint-disable @next/next/no-img-element */
-import {ToastContainer} from "react-toastify";
+import {toast, ToastContainer} from "react-toastify";
 import {useState} from "react";
 import Head from "next/head";
 import useUser from "@/hooks/useUser";
@@ -7,6 +7,7 @@ import Button from "@/components/Low/Button";
 import {BsArrowRepeat} from "react-icons/bs";
 import Link from "next/link";
 import Input from "@/components/Low/Input";
+import axios from "axios";
 
 export default function Register() {
 	const [name, setName] = useState("");
@@ -20,6 +21,30 @@ export default function Register() {
 		redirectIfFound: true,
 	});
 
+	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, profilePicture: "/defaultAvatar.png"})
+			.then((response) => mutateUser(response.data.user))
+			.catch((error) => {
+				console.log(error.response.data);
+
+				if (error.response.status === 401) {
+					toast.error("There is already a user with that e-mail!");
+					return;
+				}
+				toast.error("There was something wrong, please try again!");
+			})
+			.finally(() => setIsLoading(false));
+	};
+
 	return (
 		<>
 			<Head>
@@ -36,7 +61,7 @@ export default function Register() {
 				</section>
 				<section className="h-full w-full flex flex-col items-center justify-center gap-12">
 					<h1 className="font-bold text-4xl">Create new account</h1>
-					<form className="flex flex-col items-center gap-6 w-1/2">
+					<form className="flex flex-col items-center gap-6 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 />