Shooty-Arena/web/pages/account.js

// Strict Mode
"use strict";

// Imports
import React, { useEffect, useState } from "react";
import authentication from "../authentication/authentication.js";
import styles from "../styles/account.module.css";
import Header from "../components/header/header.jsx";
import Title from "../components/title/title.jsx";
import Footer from "../components/footer/footer.jsx";

// Get Server Side Props
export async function getServerSideProps ( ctx ) {
    try {
        const user = await authentication.getUser(ctx.req, ctx.res);
        if (user == "") {
            return {
                props: {
                    loggedIn: false
                }
            };
        } else {
            return {
                props: {
                    loggedIn: true
                }
            };
        };
    } catch {
        return {
            props: {
                loggedIn: false
            }
        };
    }

};

// Account
export default function Home( props ) {
    const [ signInError, setSignInError ] = useState("");
    const [ signUpError, setSignUpError ] = useState("");
    useEffect(() => {
        const host = "http://localhost:3000/";
        try {
            const signInForm = document.querySelector(".signInForm");
            signInForm.addEventListener("submit", async function ( event ) {
                try {
                    event.preventDefault();
                    const formData = new FormData(signInForm).entries();
                    const request = await fetch(host + "api/signIn", {
                        method: "POST",
                        headers: { "Content-Type": "application/json" },
                        body: JSON.stringify(Object.fromEntries(formData))
                    });
                    const result = await request.json();
                    if (result.response.success == true && result.response.activated == true) {
                        window.location = host + "account";
                    } else if (result.response.success == true && result.response.activated == false) {
                        setSignInError("Account Not Activated");
                    } else {
                        setSignInError("Bad Login");
                    };
                } catch (error) {
                    console.log(error)
                    setSignInError("Error");
                };
            }, []);
        } catch {};
        try {
            const signUpForm = document.querySelector(".signUpForm");
            signUpForm.addEventListener("submit", async function ( event ) {
                try {
                    event.preventDefault();
                    const formData = new FormData(signUpForm).entries();
                    const response = await fetch(host + "api/createAccount", {
                        method: "POST",
                        headers: { "Content-Type": "application/json" },
                        body: JSON.stringify(Object.fromEntries(formData))
                    });
                    const result = await response.json();
                    if (result.response.error != "") {
                        setSignUpError(result.response.error);
                    } else {
                        setSignUpError("Check Your Email To Activate Your Account");
                    }
                } catch (error) {
                    setSignUpError("Error");
                    console.log(error)
                };
            });
        } catch {};
        try {
            const signOutForm = document.querySelector(".signOutForm");
            signOutForm.addEventListener("submit", async function ( event ) {
                try {
                    event.preventDefault();
                    const formData = new FormData(signOutForm).entries()
                    const response = await fetch(host + "api/signOut", {
                        method: "POST",
                        headers: { "Content-Type": "application/json" },
                        body: JSON.stringify(Object.fromEntries(formData))
                    });
                    await response.json();
                    window.location = host + "account";
                } catch {
                    window.location = host + "account";
                };
            }, []);
        } catch {};
    });
    return (
        <div>
            <Header/>
            <Title title = "Account"/>
            {
                props.loggedIn ?
                    <div className = { styles.account }>
                        <form className = "signOutForm">
                            <button type = "submit">Sign Out</button>
                        </form> 
                    </div>
                : (
                    <div className = { styles.account }>
                        <div>
                            <h2>Sign In</h2>
                            <form className = "signInForm">
                                <input type = "email" placeholder = "Email" name = "Email"/>
                                <input type = "password" placeholder = "Password" name = "Password"/>
                                <button type = "submit">Submit</button>
                            </form>
                            {
                                signInError ?
                                    <h3>{ signInError }</h3>
                                : (
                                    <h3>&nbsp;</h3>
                                )
                            }
                        </div>
                        <div>
                            <h2>Sign Up</h2>
                            <form className = "signUpForm">
                                <input type = "text" placeholder = "Username" name = "Username"/>
                                <input type = "email" placeholder = "Email" name = "Email"/>
                                <input type = "password" placeholder = "Password" name = "Password"/>
                                <input type = "password" placeholder = "Confirm Password" name = "Confirm Password"/>
                                <button type = "submit">Submit</button>
                            </form>
                            {
                                signUpError ?
                                    <h3>{ signUpError }</h3>
                                : (
                                    <h3>&nbsp;</h3>
                                )
                            }
                        </div>
                    </div>
                )
            }
            <Footer/>
        </div>
    );
};