Client: login/register

Client: login/register

Client: login/register

Client: login/register


Client: login/register


Client: login/register

Client: login/register

Client: login/register

Client: login/register

mpwo_client/src/components/App.jsx

@@ -1,7 +1,10 @@
 import React from 'react'
+import { Route, Switch } from 'react-router-dom'
 
 import './App.css'
+import Logout from './Logout'
 import NavBar from './NavBar'
+import UserForm from './User/UserForm'
 
 export default class App extends React.Component {
   constructor(props) {
@@ -13,9 +16,37 @@ export default class App extends React.Component {
     return (
       <div className="App">
         <NavBar />
-        <p className="App-body">
-          App in progress
-        </p>
+        <div className="container">
+          <div className="row">
+            <div className="col-md-6">
+              <br />
+              <Switch>
+                <Route
+                  exact path="/register"
+                  render={() => (
+                    <UserForm
+                      formType={'Register'}
+                    />
+                  )}
+                />
+                <Route
+                  exact path="/login"
+                  render={() => (
+                    <UserForm
+                      formType={'Login'}
+                    />
+                  )}
+                />
+                <Route
+                  exact path="/logout"
+                  render={() => (
+                    <Logout />
+                  )}
+                />
+              </Switch>
+            </div>
+          </div>
+        </div>
       </div>
     )
   }

mpwo_client/src/components/Logout.jsx

@@ -0,0 +1,31 @@
+import React from 'react'
+import { connect } from 'react-redux'
+import { Link } from 'react-router-dom'
+
+import { logout } from '../actions'
+
+class Logout extends React.Component {
+  componentDidMount() {
+    this.props.UserLogout()
+  }
+  render() {
+    return (
+      <div>
+        <p>
+          You are now logged out.
+          Click <Link to="/login">here</Link> to log back in.</p>
+      </div>
+    )
+  }
+}
+
+export default connect(
+  state => ({
+    user: state.user,
+  }),
+  dispatch => ({
+    UserLogout: () => {
+      dispatch(logout())
+    }
+  })
+)(Logout)

mpwo_client/src/components/NavBar.jsx

@@ -1,14 +1,9 @@
 import React from 'react'
+import { connect } from 'react-redux'
 import { Link } from 'react-router-dom'
 
-export default class NavBar extends React.Component {
-  constructor(props) {
-    super(props)
-    this.props = props
-  }
-
-  render() {
-    return (
+function NavBar (props) {
+  return (
     <header>
       <nav className="navbar navbar-expand-lg navbar-light bg-light">
         <span className="navbar-brand">mpwo</span>
@@ -36,10 +31,50 @@ export default class NavBar extends React.Component {
                 Home
               </Link>
             </li>
+            {!props.user.isAuthenticated && (
+              <li className="nav-item">
+                <Link
+                  className="nav-link"
+                  to={{
+                    pathname: '/login',
+                  }}
+                >
+                  Login
+                </Link>
+              </li>
+            )}
+            {!props.user.isAuthenticated && (
+              <li className="nav-item">
+                <Link
+                  className="nav-link"
+                  to={{
+                    pathname: '/register',
+                  }}
+                >
+                  Register
+                </Link>
+              </li>
+            )}
+            {props.user.isAuthenticated && (
+            <li className="nav-item">
+              <Link
+                className="nav-link"
+                to={{
+                  pathname: '/logout',
+                }}
+              >
+                Logout
+              </Link>
+            </li>
+            )}
           </ul>
         </div>
       </nav>
     </header>
-    )
-  }
+  )
 }
+export default connect(
+  state => ({
+    user: state.user,
+  })
+)(NavBar)

mpwo_client/src/components/User/Form.jsx

@@ -0,0 +1,52 @@
+import React from 'react'
+
+
+export default function Form (props) {
+  return (
+    <div>
+      <h1>{props.formType}</h1>
+      <hr /><br />
+      <form onSubmit={event =>
+          props.handleUserFormSubmit(event, props.formType)}
+      >
+        {props.formType === 'Register' &&
+          <div className="form-group">
+            <input
+              name="username"
+              className="form-control input-lg"
+              type="text"
+              placeholder="Enter a username"
+              required
+              onChange={props.onHandleFormChange}
+            />
+          </div>
+        }
+        <div className="form-group">
+          <input
+            name="email"
+            className="form-control input-lg"
+            type="email"
+            placeholder="Enter an email address"
+            required
+            onChange={props.onHandleFormChange}
+          />
+        </div>
+        <div className="form-group">
+          <input
+            name="password"
+            className="form-control input-lg"
+            type="password"
+            placeholder="Enter a password"
+            required
+            onChange={props.onHandleFormChange}
+          />
+        </div>
+        <input
+          type="submit"
+          className="btn btn-primary btn-lg btn-block"
+          value="Submit"
+        />
+      </form>
+    </div>
+  )
+}

mpwo_client/src/components/User/UserForm.jsx

@@ -0,0 +1,36 @@
+import React from 'react'
+import { connect } from 'react-redux'
+
+import Form from './Form'
+import { handleFormChange, handleUserFormSubmit } from '../../actions'
+
+function UserForm(props) {
+  return (
+    <div>
+     {props.message !== '' && (
+       <code>{props.message}</code>
+     )}
+     <Form
+        formType={props.formType}
+        userForm={props.formData}
+        onHandleFormChange={event => props.onHandleFormChange(event)}
+        handleUserFormSubmit={(event, formType) =>
+            props.onHandleUserFormSubmit(event, formType)}
+     />
+    </div>
+  )
+}
+export default connect(
+  state => ({
+    formData: state.formData,
+    message: state.message,
+  }),
+  dispatch => ({
+    onHandleFormChange: event => {
+      dispatch(handleFormChange(event))
+    },
+    onHandleUserFormSubmit: (event, formType) => {
+      dispatch(handleUserFormSubmit(event, formType))
+    },
+  })
+)(UserForm)