You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
163 lines
6.5 KiB
JavaScript
163 lines
6.5 KiB
JavaScript
// 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> </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> </h3>
|
|
)
|
|
}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
<Footer/>
|
|
</div>
|
|
);
|
|
}; |