Signup data is reaching the server code

2021-01-22 00:55:17 +11:00
parent 30a5251400
commit a983d60b32
17 changed files with 3251 additions and 15 deletions
@@ -1,3 +1,7 @@
+//polyfills
+import 'core-js/stable';
+import 'regenerator-runtime/runtime';
+
 import React from 'react';
 import ReactDOM from 'react-dom';

@@ -9,15 +9,23 @@ import LazyRoute from './lazy-route';
 //TODO: styling import

 //common components
-//TODO: header
-//TODO: footer
+import Header from './panels/header.jsx';
+import Footer from './panels/footer.jsx';

 const App = props => {
 	return (
 		<BrowserRouter>
+				<Header />
 				<Switch>
 					<LazyRoute exact path='/' component={() => import('./pages/homepage')} />
+					
+					<LazyRoute path='/signup' component={() => import('./pages/signup')} />
+					<LazyRoute path='/login' component={() => import('./pages/login')} />
+					<LazyRoute path='/account' component={() => import('./pages/account')} />
+					
+					<LazyRoute path='*' component={() => import('./pages/not-found')} />
 				</Switch>
+				<Footer />
 		</BrowserRouter>
 	);
 };
@@ -0,0 +1,11 @@
+import React from 'react';
+
+const Account = props => {
+	return (
+		<div className='page'>
+			<h1 className='middle centered'>Account</h1>
+		</div>
+	);
+};
+
+export default Account;
@@ -1,7 +1,16 @@
 import React from 'react';

 const HomePage = props => {
-	return <p>Hello world!</p>;
+	return (
+		<div className='page'>
+			<p>This is the MERN template homepage.</p>
+			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+		</div>
+	);
 };

 export default HomePage;
@@ -0,0 +1,11 @@
+import React from 'react';
+
+const LogIn = props => {
+	return (
+		<div className='page'>
+			<h1 className='middle centered'>Log In</h1>
+		</div>
+	);
+};
+
+export default LogIn;
@@ -0,0 +1,11 @@
+import React from 'react';
+
+const NotFound = props => {
+	return (
+		<div className='page'>
+			<h1 className='middle centered'>Not Found</h1>
+		</div>
+	);
+};
+
+export default NotFound;
@@ -0,0 +1,98 @@
+import React, { useState } from 'react';
+
+//utilities
+const validateEmail = require('../../../common/utilities/validate-email.js');
+const validateUsername = require('../../../common/utilities/validate-username.js');
+
+const SignUp = props => {
+	//refs
+	let emailElement, usernameElement, passwordElement, retypeElement;
+
+	return (
+		<div className='page'>
+			<h1 className='middle centered'>Signup</h1>
+			<form className='constricted' onSubmit={
+				evt => {
+					evt.preventDefault();
+					handleSubmit(emailElement.value, usernameElement.value, passwordElement.value, retypeElement.value)
+						.then(res => alert(res))
+						.then(() => emailElement.value = usernameElement.value = passwordElement.value = retypeElement.value = '') //clear input
+						.catch(e => console.error(e))
+					;
+				}
+			}>
+				<div>
+					<label htmlFor="email">Email:</label>
+					<input type="email" name="email" ref={e => emailElement = e} />
+				</div>
+
+				<div>
+					<label htmlFor="username">Username:</label>
+					<input type="text" name="username" ref={e => usernameElement = e} />
+				</div>
+
+				<div>
+					<label htmlFor="password">Password:</label>
+					<input type="password" name="password" ref={e => passwordElement = e} />
+				</div>
+
+				<div>
+					<label htmlFor="retype">Retype Password:</label>
+					<input type="password" name="retype" ref={e => retypeElement = e} />
+				</div>
+
+				<button type='submit'>Signup</button>
+			</form>
+		</div>
+	);
+};
+
+const handleSubmit = async (email, username, password, retype) => {
+	email = email.trim();
+	username = username.trim();
+
+	const err = handleValidation(email, username, password, retype);
+	
+	if (err) {
+		alert(err);
+		return;
+	}
+
+	//generate a new formdata payload
+	let formData = new FormData();
+	
+	formData.append('email', email);
+	formData.append('username', username);
+	formData.append('password', password);
+
+	const result = await fetch('/api/accounts/signup', { method: 'POST', body: formData });
+	
+	if (result.ok) {
+		return result.text();
+	} else {
+		return result.text();
+	}
+};
+
+//returns an error message, or null on success
+const handleValidation = (email, username, password, retype) => {
+	if (!validateEmail(email)) {
+		return 'invalid email';
+	}
+	
+	if (!validateUsername(username)) {
+		return 'invalid username';
+	}
+	
+	if (password.length < 8) {
+		return 'invalid password (Must be at least 8 characters long)';
+	}
+	
+	if (password !== retype) {
+		return 'passwords do not match';
+	}
+	
+	return null;
+};
+
+export default SignUp;
@@ -0,0 +1,11 @@
+import React from 'react';
+
+const Footer = () => {
+	return (
+		<footer>
+			<p className='centered'>MERN template designed by Kayne Ruse, KR Game Studios</p>
+		</footer>
+	);
+};
+
+export default Footer;
@@ -0,0 +1,30 @@
+import React from 'react';
+
+const Visitor = () => {
+	return (
+		<div>
+			<a href='/signup'>Sign Up</a>
+			<a href='/login'>Log In</a>
+		</div>
+	);
+};
+
+const Member = () => {
+	return (
+		<div>
+			<a href='/account'>Account</a>
+			<a href='/logout'>Log out</a>
+		</div>
+	);
+};
+
+const Header = () => {
+	return (
+		<header>
+			<h1><a href='/'>MERN Template</a></h1>
+			<Visitor />
+		</header>
+	);
+};
+
+export default Header;