Basic signup form is bouncing back a message

common/utilities.js

@@ -0,0 +1,9 @@
+var emailExpression = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
+
+function validateEmail(email) {
+	return emailExpression.test(email);
+}
+
+module.exports = {
+	validateEmail
+};

package.json

@@ -4,8 +4,12 @@
   "description": "Kingdom Battles",
   "main": "index.js",
   "scripts": {
-    "start": "webpack --mode=development",
+    "start": "forever -o forever.log -e error.log start server/index.js",
-    "build": "webpack --mode=production"
+    "restart": "forever -o forever.log -e error.log restart server/index.js",
+    "stop": "forever stop server.js",
+    "node": "node server/index.js",
+    "webpack": "webpack --mode=development",
+    "webpack-production": "webpack --mode=production"
   },
   "author": "Kayne Ruse",
   "license": "",
@@ -14,6 +18,8 @@
     "@babel/preset-env": "^7.4.4",
     "@babel/preset-react": "^7.0.0",
     "babel-loader": "^8.0.5",
+    "express": "^4.16.4",
+    "forever": "^1.0.0",
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
     "react-redux": "^7.0.3",

public/styles/shared.css

@@ -84,6 +84,13 @@ footer {
 	justify-content: flex-start;
 }
 
+.panel {
+	flex: 0 1 auto;
+	display: flex;
+	flex-direction: column;
+	justify-content: flex-start;
+}
+
 /* warning message */
 .warning {
 	flex: 0 1 auto;

server/index.js

@@ -0,0 +1,30 @@
+//libraries
+let express = require('express');
+let app = express();
+let http = require('http').Server(app);
+let path = require('path');
+
+//handle accounts
+app.post('/signup', (req, res) => {
+	console.log('message heard, data ignored')
+	res.write('<p>message heard, data ignored</p>');
+	res.end();
+});
+
+//static directories
+app.use('/styles', express.static(path.resolve(__dirname + '/../public/styles')) );
+
+//the app file
+app.get('/app.bundle.js', (req, res) => {
+  res.sendFile(path.resolve(__dirname + '/../public/app.bundle.js'));
+});
+
+//fallback
+app.get('*', (req, res) => {
+  res.sendFile(path.resolve(__dirname + '/../public/index.html'));
+});
+
+//startup
+http.listen(4000, () => {
+  console.log('listening to *:4000');
+});

src/components/pages/home.jsx

@@ -3,6 +3,9 @@ import { connect } from 'react-redux';
 import { withRouter, Link } from 'react-router-dom';
 import PropTypes from 'prop-types';
 
+//panels
+import Signup from '../panels/signup.jsx';
+
 class Home extends React.Component {
 	constructor(props) {
 		super(props);
@@ -12,7 +15,8 @@ class Home extends React.Component {
 	render() {
 		return (
 			<div className='page'>
-				<p>This is the home page</p>
+				<p>This is the home page.</p>
+				<Signup />
 			</div>
 		);
 	}

src/components/panels/signup.jsx

@@ -0,0 +1,99 @@
+import React from 'react';
+import { validateEmail } from '../../../common/utilities.js';
+
+export default class Signup extends React.Component {
+	constructor(props) {
+		super(props);
+		this.state = {
+			email: '',
+			password: '',
+			retype: '',
+			warning: ''
+		};
+	}
+
+	render() {
+		let warningStyle = {
+			display: this.state.warning.length > 0 ? 'flex' : 'none'
+		};
+
+		return (
+			<div className='panel'>
+				<h1>Sign Up</h1>
+
+				<div className='warning' style={warningStyle}>
+					<p>{this.state.warning}</p>
+				</div>
+
+				<form action='/signup' method='post' onSubmit={(e) => this.validateInput(e)}>
+					<div>
+						<label>Email:</label>
+						<input type='text' name='email' value={this.state.email} onChange={this.updateEmail.bind(this)} />
+					</div>
+
+					<div>
+						<label>Password:</label>
+						<input type='password' name='password' value={this.state.password} onChange={this.updatePassword.bind(this)} />
+					</div>
+
+					<div>
+						<label>Retype Password:</label>
+						<input type='password' name='retype' value={this.state.retype} onChange={this.updateRetype.bind(this)} />
+					</div>
+
+					<button type='submit'>Sign Up</button>
+				</form>
+			</div>
+		);
+	}
+
+	validateInput(e) {
+		if (!validateEmail(this.state.email)) {
+			e.preventDefault();
+			this.setWarning('Invalid Email');
+		}
+
+		else if (this.state.password.length < 8) {
+			e.preventDefault();
+			this.setWarning('Minimum password length is 8 characters');
+		}
+
+		else if (this.state.password !== this.state.retype) {
+			e.preventDefault();
+			this.setWarning('Passwords do not match');
+		}
+	}
+
+	setWarning(s) {
+		this.setState({
+			warning: s
+		});
+	}
+
+	clearInput() {
+		this.setState({
+			email: '',
+			password: '',
+			retype: '',
+			warning: ''
+		});
+	}
+
+	updateEmail(evt) {
+		this.setState({
+			email: evt.target.value
+		});
+	}
+
+	updatePassword(evt) {
+		this.setState({
+			password: evt.target.value
+		});
+	}
+
+	updateRetype(evt) {
+		this.setState({
+			retype: evt.target.value
+		});
+	}
+}