Chad sign up2.0

server/index.js

@@ -64,6 +64,10 @@ app.use('/auth', require('./auth'))
 app.use(express.static(path.resolve(__dirname, '../dist')))
 app.use('/api', router);
 
+app.get('/*', (req, res) => {
+	res.sendFile(path.resolve('dist/index.html'));
+});
+
 // ==== Starting Server =====
 app.listen(PORT, () => {
 	console.log(`App listening on PORT: ${PORT} 🐱 🎃 `)

src/comp/App.js → src/comp/App/index.js

@@ -1,7 +1,8 @@
 import React, { Component} from 'react'
-import Counter from './Counter.js'
-import Header from './Header.js'
-import Main from './Main.js'
+import Counter from '../Counter.js'
+import Header from '../Header.js'
+import Main from '../Main'
+import './styles.css'
 
 const styles = {
   wrapper : {

src/comp/App/styles.css

@@ -0,0 +1,23 @@
+html, body {
+  height: 100%;
+  width:100%;
+  background: #f2f2f2;
+  overflow-x: hidden;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.FunContent {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 30vw;
+}
+
+.Login {
+  display: flex;
+  background: white;
+  box-shadow: 0 5px 10px 0px rgba(0, 0, 0, 0.1);
+  padding: 20%;
+}

src/comp/Header.js

@@ -3,6 +3,10 @@ import { Link } from 'react-router-dom'
 
 const styles = {
   header : {
+    position: 'absolute',
+    top:'0px',
+    right: '0px',
+    left: '0px',
     width : '100%',
     backgroundColor: '#324a5f',
     display: 'flex',

src/comp/Login.js

@@ -1,9 +1,26 @@
-import React from 'react'
+import React, { Component } from 'react'
+import InputFields from './utilComps/InputFields'
+
+const fields = [
+  {
+    name: 'username',
+  },
+  {
+    name: 'password'
+  }
+]
+
+const validator = (stateObj) => {
+  return true;
+}
 
 const Login = () => (
-  <h1>
-    Login
-  </h1>
+  <div className="Login">
+    <div className="FunContent">
+      <p>Fun Content here</p>
+    </div>
+    <InputFields fields={fields} validator={validator} formName={"Login"}/>
+  </div>
 )
 
-export default Login;
+export default Login

src/comp/Signup.js

@@ -1,11 +1,29 @@
-import React from 'react'
+import React, { Component } from 'react'
+import InputFields from './utilComps/InputFields'
+
+const fields = [
+  {
+    name: 'username',
+  },
+  {
+    name: 'email'
+  },
+  {
+    name: 'password'
+  },
+  {
+    name: 'passwordConf'
+  }
+]
+
+const validator = (stateObj) => {
+  return true;
+}
 
 const Signup = () => (
-  <div>
-    <h3>
-      Signup
-    </h3>
+  <div className="Register">
+    <InputFields fields={fields} validator={validator} formName="Sign Up" />
   </div>
 )
 
-export default Signup;
+export default Signup

src/comp/utilComps/InputFields/index.js

@@ -0,0 +1,69 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import './styles.css'
+
+/**
+*@prop {func} validator @arg {InputFields.state} @returns {boolean}
+* * * checks whether or not the field data is okay for submission
+*
+*@prop {Array<Object<String>>} fields -
+* * * Defines what fields will be displayed and controlled
+*
+*@prop {String} formName -
+* * * Value to be placed on submit button
+*/
+
+export default class InputFields extends Component {
+  constructor(props) {
+    super(props)
+    this.state={}
+
+    props.fields.forEach(f => this.state[f.name] = '')
+
+    this.onChange = this.onChange.bind(this)
+    this.onSubmit = this.onSubmit.bind(this)
+  }
+
+  onChange(e) {
+    const { name, value } = e.target
+    this.setState({[name]: value})
+  }
+
+  onSubmit(e) {
+    e.preventDefault();
+    if (this.props.validator(this.state)) {
+      // TODO: Hook up redux action to submit form data to the user api
+    }
+  }
+
+  render() {
+    return(
+      <form className="InputFields" onSubmit={this.onSubmit}>
+        {
+          this.props.fields.map(f => (
+            <div className="InputWrapper">
+              <p>{ f.name }</p>
+              <input
+                key={f.name}
+                className={f.class || "InputFieldDefault"}
+                type={f.type || "text"}
+                name={f.name}
+                value={this.state[f.name]}
+                onChange={this.onChange}
+              />
+            </div>
+          ))
+        }
+        <div className="ButtonRow">
+          <input type="submit" value={this.props.formName} />
+        </div>
+      </form>
+    )
+  }
+}
+
+InputFields.propTypes = {
+  validator: PropTypes.func.isRequired,
+  fields: PropTypes.arrayOf(PropTypes.objectOf(PropTypes.string)).isRequired,
+  formName: PropTypes.string
+}

src/comp/utilComps/InputFields/styles.css

@@ -0,0 +1,32 @@
+.InputFields {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.InputFields > .InputWrapper {
+
+}
+
+.InputFields > .InputWrapper > p {
+  color: black;
+}
+
+.InputFields > .InputWrapper > input {
+  border-top: none;
+  border-left: none;
+  border-right: none;
+  border-bottom: 1px solid silver;
+  width: 100%;
+}
+
+input:focus {
+    outline:none !important;
+}
+
+.ButtonRow {
+  display: flex;
+  margin-top: 10px;
+  justify-content: flex-end;
+  width: 100%;
+}

src/index.js

@@ -3,16 +3,16 @@ import { render } from 'react-dom'
 import { Provider } from 'react-redux'
 import { createStore } from 'redux'
 import { BrowserRouter } from 'react-router-dom'
-import App from './comp/App'
+import App from './comp/App/index'
 import rootReducer from './reducers'
 
 const store = createStore(rootReducer)
 
 render(
-  <BrowserRouter>
-    <Provider store={store}>
-      <App />
-    </Provider>
-  </BrowserRouter>,
+  <Provider store={store}>
+    <BrowserRouter>
+        <App />
+    </BrowserRouter>
+  </Provider>,
   document.getElementById('root')
 )

webpack.config.js

@@ -4,6 +4,12 @@ const MiniCssExtractPlugin = require("mini-css-extract-plugin");
 const HtmlWebpackPlugin = require("html-webpack-plugin");
 
 module.exports = {
+  entry: './src/index.js',
+  output: {
+    path: path.resolve(__dirname, 'dist'),
+    filename: 'main.js',
+    publicPath: '/'
+  },
   module: {
     rules: [
       {
@@ -38,6 +44,9 @@ module.exports = {
       },
     ]
   },
+  devServer: {
+   historyApiFallback: true,
+ },
   plugins: [
     new MiniCssExtractPlugin({
       filename: "bundle.css"