123 link auth to form

client/actions/auth.js

@@ -1,5 +1,6 @@
 import {setToken} from '../utils/tokens'
-import {register as registerApi, signin as signinApi} from '../api/auth'
+import {registerWithApi, signinWithApi} from '../api/auth'
+
 
 export const signinPending = _ => {
   return {
@@ -41,7 +42,7 @@ export const registerError = error => {
 
 export const signin = (user) => dispatch => {
   dispatch(signinPending())
-  return signinApi(user)
+  return signinWithApi(user)
     .then(res => {
       setToken(res.body.token)
       dispatch(signinSuccess())
@@ -51,7 +52,7 @@ export const signin = (user) => dispatch => {
 
 export const register = (user) => dispatch => {
   dispatch(registerPending())
-  return registerApi(user)
+  return registerWithApi(user)
     .then(res => {
       setToken(res.body.token)
       dispatch(registerSuccess())

client/api/auth.js

@@ -2,16 +2,16 @@ import request from 'superagent'
 
 const url = 'http://localhost:3000/api/v1/auth'
 
-export function register (user) {
+export function registerWithApi (user) {
   return request
     .post(`${url}/register`)
     .send(user)
     .then(res => res.body)
 }
 
-export const signin = (user) => {
+export const signinWithApi = (user) => {
   return request
     .post(`${url}/signin`)
-    .send({user})
+    .send(user)
     .then(res => res.body)
 }

client/components/App.jsx

@@ -10,10 +10,10 @@ const App = () => {
   return (
     <Switch>
       <Route exact path="/" component={Home} />
-      <Route path="/student/:id" component={Dashboard} />
-      <Route path="/login" component={Login} />
-      <Route path="/register" component={Register} />
-      <Route path="/evidence" component={Evidence} />
+      <Route exact path="/student/:id" component={Dashboard} />
+      <Route exact path="/login" component={Login} />
+      <Route exact path="/register" component={Register} />
+      <Route exact path="/evidence" component={Evidence} />
     </Switch>
   )
 }

client/components/Dashboard.jsx

@@ -1,4 +1,3 @@
-
 import React, { Component } from 'react'
 import ProgressModule from './ProgressModule'
 import DropdownModule from './DropdownModule'
@@ -51,4 +50,4 @@ export default class Dashboard extends Component {
       </React.Fragment>
     )
   }
-}
+}

client/components/Register.jsx

@@ -9,6 +9,9 @@ import { Paper,
   MenuItem,
   InputLabel } from '@material-ui/core'
 
+import {connect} from 'react-redux'
+import {register, registerError} from '../actions/auth'
+
 class Register extends React.Component {
   state = {
     name: '',
@@ -25,22 +28,30 @@ class Register extends React.Component {
     })
   }
 
-  handleSubmit (evt) {
-    this.props.saveItem(this.state)
-    this.setState(this.state)
-    evt.preventDefault()
-  }
+  registering = () => {
+    const { name, surname, password } = this.state
 
-  handleChange = event => {
-    this.setState({ [event.target.name]: event.target.value });
-  }
+    if(!name) {
+      return this.props.dispatch(registerFailure('Must provide name.'))
+    }
+    if(!surname) {
+      return this.props.dispatch(registerFailure('Must provide surname.'))
+    }
+    if(!password) {
+      return this.props.dispatch(registerFailure('Must provide email.'))
+    }
+
+    this.props.dispatch(register({name, surname, password}))
 
-  resetForm (evt) {
     this.setState({
-      item: this.state,
-      invalid: {}
+      name: '',
+      surname: '',
+      password: ''
     })
-    evt && evt.preventDefault()
+  }
+
+  handleChange = event => {
+    this.setState({ [event.target.name]: event.target.value });
   }
 
   render () {
@@ -57,26 +68,20 @@ class Register extends React.Component {
           <Paper style={styles.paper} >
             <h1>Register</h1>
               <form >
-                <br/>
-                <br/>
                 <TextField
                   variant="outlined"
                   label="First name"
                   name='name'
                   value={this.state.name}
                   onChange={this.handleChange}
                 />
-                <br/>
-                <br/>
                 <TextField
                   variant="outlined"
                   label="Last name"
                   name='surname'
                   value={this.state.surname}
                   onChange={this.handleChange}
                 />
-                <br/>
-                <br/>
                 <TextField
                   variant="outlined"
                   type='password'
@@ -86,9 +91,6 @@ class Register extends React.Component {
                   value={this.state.password}
                   onChange={this.handleChange}
                 />
-                <br/>
-                <br/>
-
                 <FormControl variant="outlined" style={{minWidth: '200px'}} >
                   <InputLabel
                     ref={ref => {
@@ -117,9 +119,6 @@ class Register extends React.Component {
                   </Select>
                 </FormControl>
 
-                <br/>
-                <br/>
-
                 <FormControl variant="outlined" style={{minWidth: '200px'}} >
                   <InputLabel
                     ref={ref => {
@@ -147,14 +146,12 @@ class Register extends React.Component {
                     <MenuItem value={'Kowhai2018'}>Kowhai2018</MenuItem>
                   </Select>
                 </FormControl>
-                <br/>
-                <br/>
-                <br/>
-                <button type='submit' className='button-primary' value='Add' onSubmit={this.handleSubmit}
-                  onClick={this.resetForm}>Register</button>
-                <br/>
-                <br/>
-                <br/>
+                <button 
+                  type='submit' 
+                  className='button-primary' 
+                  value='Add' 
+                  onClick={this.registering}
+                  >Register</button>
               </form>
           </Paper>
         </Grid>
@@ -164,4 +161,5 @@ class Register extends React.Component {
   }
 }
 
-export default Register
+const mapStateToProps = ({auth}) => ({auth})
+export default connect(mapStateToProps)(Register)

client/components/SignIn.jsx

@@ -3,10 +3,6 @@ import TextField from '@material-ui/core/TextField';
 import Button from '@material-ui/core/Button'
 
 class SignIn extends React.Component() {
-  constructor(props) {
-    super(props)
-  }
-
   render() {
     return (
       <div>