login update lagi

src/api/index.js

@@ -61,6 +61,7 @@ const create = (baseURL = 'https://trftia.eksad.com/tia-reporting-dev/public/')
   //
   const getRoot = () => api.get('')
   const login = (body) => api.post('auth/login', body)
+  const verification = (body) => api.post('email/reset_password', body)
   
   //Role
   const getRole = () => api.get('role/get_all_role')
@@ -83,6 +84,7 @@ const create = (baseURL = 'https://trftia.eksad.com/tia-reporting-dev/public/')
     // a list of the API functions from step 2
     getRoot,
     login,
+    verification,
     getRole,
     addRole,
     editRole,

src/container/ForgotPassword.js

 import React, { Component } from 'react';
 import Images from '../assets/Images';
 import { TextField, InputAdornment, Button, Typography } from '@material-ui/core';
+import api from '../api';
 
 
 class ForgotPassword extends Component {
@@ -15,6 +16,13 @@ class ForgotPassword extends Component {
       let data = this.state
       this.setState({...data, [e.target.name] : e.target.value})
     }
+
+    verification() {
+      let payload = {
+        "email": this.state.email
+      }
+    }
+
     render() {
         return (
           <div style={{ flex: 1, display: 'flex', backgroundColor: '#51c6ea', height: '100vh', justifyContent: 'center', alignItems: 'center' }}>
@@ -23,11 +31,11 @@ class ForgotPassword extends Component {
 
                 <TextField
                     label={<Typography style={{fontSize: 12, fontFamily: 'Nunito Sans, sans-serif'}}>Email *</Typography>}
-                    id="username"
+                    id="email"
                     type={"text"}
-                    name={"username"}
-                    value={this.state.username}
-                    onChange={(username) => this.setState({username: username.target.value})}
+                    name={"email"}
+                    value={this.state.email}
+                    onChange={(email) => this.setState({email: email.target.value})}
                     variant="outlined"
                     error={false}
                     style={{ width: 250, height: 51, marginTop: 32, fontSize: 14 }}

src/container/Login.js

@@ -23,7 +23,11 @@ class Login extends Component {
     this.state = {
       username: '',
       password: '',
-      showPass: false
+      showPass: false,
+      errorUsername: false,
+      errorPassword: false,
+      msgUsername: '',
+      msgPassword: ''
     }
   }
 
@@ -34,6 +38,21 @@ class Login extends Component {
   handleChange(e) {
     let data = this.state
     this.setState({...data, [e.target.name] : e.target.value})
+    if (e.target.name == "username") {
+        this.setState({ errorUsername: false, msgUsername: '' })
+    } else if (e.target.name) {
+        this.setState({ errorPassword: false, msgPassword: '' })
+    }
+  }
+
+  validateLogin() {
+      if (this.state.username.trim() == "") {
+          this.setState({ errorUsername: true, msgUsername: 'Username harus diisi!' })
+      } else if (this.state.password.trim() == "") {
+          this.setState({ errorPassword: true, msgPassword: 'Password harus diisi!' })
+      } else {
+          this.login()
+      }
   }
 
   login() {
@@ -43,10 +62,14 @@ class Login extends Component {
   }
     api.create().login(payload).then((response) => {
       if (response.data.status === 'success') {
-        localStorage.setItem(Constant.TOKEN, response.data.data.token)
         this.props.history.push('/home/beranda')
+        localStorage.setItem(Constant.TOKEN, response.data.data.token)
+      } else {
+        if (response.data.message == 'Password Salah!') {
+            this.setState({ errorPassword: true, msgPassword: response.data.message })
         } else {
-        alert(response.data.message)
+            this.setState({ errorUsername: true, msgUsername: response.data.message })
+        }
       }
     })
   }
@@ -59,7 +82,7 @@ class Login extends Component {
           <img src={Images.imageLogin} style={{ marginTop: 30 }} />
         </div>
         <div style={{ width: '50%', height: '100vh', backgroundColor: '#51c6ea', display: 'flex', justifyContent: 'center', alignItems: 'center', flexDirection: 'column' }}>
-          <div style={{ paddingTop: 56, paddingLeft: 64, paddingRight: 64, display: 'flex', flexDirection: 'column', width: 378, height: 431, borderRadius: 12, boxShadow: '0 2 4 0 rgba(0, 0, 0, 0.2)', backgroundColor: '#ffffff' }}>
+          <div style={{ paddingTop: 56, paddingLeft: 54, paddingRight: 54, display: 'flex', flexDirection: 'column', width: 388, height: 441, borderRadius: 12, boxShadow: '0 2 4 0 rgba(0, 0, 0, 0.2)', backgroundColor: '#ffffff' }}>
             <img src={Images.tia} />
 
             <TextField
@@ -68,11 +91,13 @@ class Login extends Component {
               type={"text"}
               name={"username"}
               value={this.state.username}
-              onChange={(username) => this.handleChange(username)}
+              onChange={(username) => {
+                  this.handleChange(username)
+                }}
               variant="outlined"
-              error={false}
-              style={{ width: 250, height: 51, marginTop: 32, fontSize: 14 }}
-              helperText=""
+              error={this.state.errorUsername}
+              style={{ width: '100%', height: 51, marginTop: 32, fontSize: 14 }}
+              helperText={this.state.msgUsername}
               InputProps={{
                 endAdornment: <InputAdornment position="end"><img src={Images.email} /></InputAdornment>,
               }}
@@ -84,11 +109,13 @@ class Login extends Component {
               type={this.state.showPass ? 'text' : 'password'}
               name={"password"}
               value={this.state.password}
-              onChange={(password) => this.handleChange(password) }
+              onChange={(password) => {
+                  this.handleChange(password)
+                }}
               variant="outlined"
-              error={false}
-              style={{ width: 250, height: 51, marginTop: 20 }}
-              helperText=""
+              error={this.state.errorPassword}
+              style={{ width: '100%', height: 51, marginTop: this.state.errorUsername ? 35 : 20 }}
+              helperText={this.state.msgPassword}
               InputProps={{
                 endAdornment: <InputAdornment position="end">
                   <IconButton
@@ -103,12 +130,12 @@ class Login extends Component {
               }}
             />
 
-            <div style={{ flexDirection: 'row', width: '100%', marginTop: 16 }}>
+            <div style={{ flexDirection: 'row', width: '100%', marginTop: this.state.errorPassword ? 26 : 16 }}>
               <CustomCheckbox name="checked-remember" />
               <span style={{ color: 'rgba(0, 0, 0, 0.5)', fontSize: 12, fontFamily: 'Nunito Sans, sans-serif' }}>Remember Me</span>
               <span style={{marginLeft: 30, color: '#51c6ea', cursor: 'pointer', fontSize: 12, fontFamily: 'Nunito Sans, sans-serif' }}>Lupa Kata Sandi?</span>
             </div>
-            <Button name="submit" variant="contained" onClick={() => this.login()} style={{ marginTop: 23,  width: '100%', height: 35, borderRadius: 4, backgroundColor: '#51c6ea', color: '#ffffff' }}>
+            <Button name="submit" variant="contained" disabled={this.state.username.trim() == '' && this.state.password.trim() == '' ? true : false} onClick={() => this.validateLogin()} style={{ marginTop: 23,  width: '100%', height: 35, borderRadius: 4, color: this.state.username.trim() == '' && this.state.password.trim() == '' ? '#4b4b4b' : '#fff', backgroundColor: this.state.username.trim() == '' && this.state.password.trim() == '' ? '#d8d8d8' : '#51c6ea' }}>
               <Typography style={{fontSize: 12, fontFamily: 'Nunito Sans, sans-serif'}}>Login</Typography>
             </Button>
           </div>