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

Fully implemented the register flow

Browse Source
This commit is contained in:
Tiago Ribeiro
2023-07-25 19:53:48 +01:00
parent 02260d496c
commit f5c3abb310
4 changed files with 79 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/defaultAvatar.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.2 KiB

48
src/pages/api/register.ts Normal file
View File

@@ -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});
});
}

6
src/pages/index.tsx
View File

@@ -124,7 +124,7 @@ export default function Home() {
<BsStar className="w-8 h-8 text-mti-red-light" /> <BsStar className="w-8 h-8 text-mti-red-light" />
</div> </div>
<div className="flex flex-col"> <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> <span className="font-normal text-base text-mti-gray-dim">Average Score</span>
</div> </div>
</div> </div>
@@ -133,7 +133,9 @@ export default function Home() {
</section> </section>
<section className="flex flex-col gap-3"> <section className="flex flex-col gap-3">
<span className="font-bold text-lg">Bio</span> <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>
<section className="flex flex-col gap-3"> <section className="flex flex-col gap-3">
<span className="font-bold text-lg">Score History</span> <span className="font-bold text-lg">Score History</span>

29
src/pages/register.tsx
View File

@@ -1,5 +1,5 @@
/* eslint-disable @next/next/no-img-element */ /* eslint-disable @next/next/no-img-element */
import {ToastContainer} from "react-toastify"; import {toast, ToastContainer} from "react-toastify";
import {useState} from "react"; import {useState} from "react";
import Head from "next/head"; import Head from "next/head";
import useUser from "@/hooks/useUser"; import useUser from "@/hooks/useUser";
@@ -7,6 +7,7 @@ import Button from "@/components/Low/Button";
import {BsArrowRepeat} from "react-icons/bs"; import {BsArrowRepeat} from "react-icons/bs";
import Link from "next/link"; import Link from "next/link";
import Input from "@/components/Low/Input"; import Input from "@/components/Low/Input";
import axios from "axios";
export default function Register() { export default function Register() {
const [name, setName] = useState(""); const [name, setName] = useState("");
@@ -20,6 +21,30 @@ export default function Register() {
redirectIfFound: true, 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 ( return (
<> <>
<Head> <Head>
@@ -36,7 +61,7 @@ export default function Register() {
</section> </section>
<section className="h-full w-full flex flex-col items-center justify-center gap-12"> <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> <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="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="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="password" onChange={(e) => setPassword(e)} placeholder="Enter your password" required />