signin converted into smart component and connected with backend-server using fetch api

Author: hanzala-bhutto

Section 24 SmartBrain Front-End/facerecognitionbrain/src/Components/Signin/Signin.js

@@ -1,46 +1,84 @@
-import React from 'react';
+import React, { Component } from 'react';
+class Signin extends Component { 
 
-const Signin = ({onRouteChange}) => { 
+  constructor(props){
+    super(props);
+    this.state = {
+      signInEmail:'',
+      signInPassword: ''
+    }
+  }
+
+  onEmailChange = (event) => {
+    this.setState({signInEmail: event.target.value});
+  }
+
+  onPasswordChange = (event) => {
+    this.setState({signInPassword: event.target.value});
+  }
+
+  onSubmitSignIn = () => {
+    fetch("http://localhost:3001/signin", {
+      method : 'post',
+      headers: {'Content-Type' : 'application/json'},
+      body : JSON.stringify({
+        email: this.state.signInEmail,
+        password: this.state.signInPassword
+      })
+    })
+    .then(response => response.json())
+    .then(data => {
+      if(data === 'success'){
+        this.props.onRouteChange('home');
+      }
+    })
+  }
+
+  render(){
+    const {onRouteChange} = this.props;  
     return (
-        <article className="br3 ba b--black-10 mv4 w-100 w-50-m w-25-l mw6 shadow-5 center">
-          <main className="pa4 black-80">
-            <div className="measure">
-              <fieldset id="sign_up" className="ba b--transparent ph0 mh0">
-                <legend className="f1 fw6 ph0 mh0">Sign In</legend>
-                <div className="mt3">
-                  <label className="db fw6 lh-copy f6" htmlFor="email-address">Email</label>
-                  <input
-                    className="pa2 input-reset ba bg-transparent hover-bg-black hover-white w-100"
-                    type="email"
-                    name="email-address"
-                    id="email-address"
-                  />
-                </div>
-                <div className="mv3">
-                  <label className="db fw6 lh-copy f6" htmlFor="password">Password</label>
-                  <input
-                    className="b pa2 input-reset ba bg-transparent hover-bg-black hover-white w-100"
-                    type="password"
-                    name="password"
-                    id="password"
-                  />
-                </div>
-              </fieldset>
-              <div className="">
+      <article className="br3 ba b--black-10 mv4 w-100 w-50-m w-25-l mw6 shadow-5 center">
+        <main className="pa4 black-80">
+          <div className="measure">
+            <fieldset id="sign_up" className="ba b--transparent ph0 mh0">
+              <legend className="f1 fw6 ph0 mh0">Sign In</legend>
+              <div className="mt3">
+                <label className="db fw6 lh-copy f6" htmlFor="email-address">Email</label>
                 <input
-                  onClick={() => onRouteChange('home')}
-                  className="b ph3 pv2 input-reset ba b--black bg-transparent grow pointer f6 dib"
-                  type="submit"
-                  value="Sign in"
+                  onChange={this.onEmailChange}
+                  className="pa2 input-reset ba bg-transparent hover-bg-black hover-white w-100"
+                  type="email"
+                  name="email-address"
+                  id="email-address"
                 />
-                <div className="lh-copy mt3">
-                <p  onClick={() => onRouteChange('register')} className="f6 link dim black db pointer">Register</p>
-                </div>
+              </div>
+              <div className="mv3">
+                <label className="db fw6 lh-copy f6" htmlFor="password">Password</label>
+                <input
+                  onChange={this.onPasswordChange}
+                  className="b pa2 input-reset ba bg-transparent hover-bg-black hover-white w-100"
+                  type="password"
+                  name="password"
+                  id="password"
+                />
+              </div>
+            </fieldset>
+            <div className="">
+              <input
+                onClick={this.onSubmitSignIn}
+                className="b ph3 pv2 input-reset ba b--black bg-transparent grow pointer f6 dib"
+                type="submit"
+                value="Sign in"
+              />
+              <div className="lh-copy mt3">
+              <p  onClick={() => onRouteChange('register')} className="f6 link dim black db pointer">Register</p>
               </div>
             </div>
-          </main>
-        </article> 
+          </div>
+        </main>
+      </article> 
     )
+  }
 }
 
 export default Signin;

Section 26 SmartBrain Back-End Server/smart-brain-api/server.js

@@ -44,7 +44,7 @@ app.post('/signin', (req,res) => {
     if(req.body.email === database.users[0].email
         && req.body.password === database.users[0].password
     ){
-        res.json("Success");
+        res.json('success');
     }
     else{
         res.status(400).json('error logging in');