On the client side, make sure we create the event handler for the submit button:
src/user/Signup.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 |
import React, { Component } from 'react'; export class Signup extends Component { constructor() { super() this.state = { name: "", email: "", password: "", error: "" } } // https://stackoverflow.com/questions/33973648/react-this-is-undefined-inside-a-component-function?r=SearchResults // 1) we use arrow function, so that 'this' is already bound to the component // 2) if you were to use this.handleChange, you'll have to bind it to the component in // constructor like this: // this.handleChange = this.handleChange.bind(this); // 3) Or do it on the onClick: onClick={this.handleChange.bind(this)}. // onChange gives event object. // by definition of curry function, we first give 'name'. Then it return s a function where: // event => {...} // onChange gives event obj // thus, this function will fun. handleChange = (name) => (event) => { this.setState({ [name] : event.target.value }) } // in our Node API // auth.js - router.post('/signup', userSignupValidator, signup) clickSubmit = event => { event.preventDefault() const { name, email, password } = this.state const user = { name, email, password } console.log(JSON.stringify(user)) fetch('http://localhost:8080/signup', { method: "POST", mode: "cors", headers: { Accept : "application/json", "Content-Type": "application/json", 'Access-Control-Allow-Origin':'*' }, body: JSON.stringify(user), }) .then(response => { return response.json() }) .catch(err => console.log(err )) } // when given a curry function // test = (first) => (second) => { // console.log('test result: ', first + ', ' + second); // } render() { const { name, email, password } = this.state if (name) console.log('name', name) if (email) console.log('email', email) if (password) console.log('password', password) // the curry function takes in one parameter // it returns function: // second => { // console.log('test result: ', first + ', ' + second); // } //let result = this.test("haha"); // it doesn't run the function without this second parameter, let's give it a parameter: // result("hehe"); // now, test will run. return ( <div className="container"> <h2 className="mt-5 mb-5">Signup</h2> <form> <div className="form-group"> <label className="text-muted">Name</label> <input onChange={this.handleChange("name")} type="text" className="form-control" value={this.state.name} /> </div> <div className="form-group"> <label className="text-muted">Email</label> <input onChange={this.handleChange("email")} type="email" className="form-control" value={this.state.email} /> </div> <div className="form-group"> <label className="text-muted">Password</label> <input onChange={this.handleChange("password")} type="password " className="form-control" value={this.state.password} /> </div> <button onClick={this.clickSubmit} className="btn btn-raised btn-primary">submit</button> </form> </div> ); } } export default Signup |
On the server side, make sure use cors.
To set up: npm i -S cors
app.js:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
// @ /routes/index.js var cors = require('cors'); var app = require('express')(); // Allow all app.use(cors()); // GET home page app.get('/', function(req, res, next) { res.render('index', { title: 'tol-node-public' }); }); module.exports = router; |
Now when you fill in the username, password, email, (like I did in the screenshot) you’ll see that the password is ‘compaq’ and does not have a number. Thus, you’ll get a bad request:
Click on the Network tab to see what this bad request is about. You’ll see the request, which is called signup. Click on signup.
In the response from the server, we see that the text tells us that we need a number in our password:
So change our password so that it has a number. This time, when you submit, you’ll see that the response to our request will be successful. When you analyze the response to our request, you’ll see that the json response will have a success message:
Go into your mLab account and you’ll see that our users have the information we just used to create a user:
Now, if you try to submit the same data for registration, the response from the server will tell you that the email you’re using to register already exists:
