Update login & reset

src/api/index.js

@@ -60,6 +60,8 @@ const create = (baseURL = 'https://trftia.eksad.com/tia-reporting-dev/public/')
   // way at this level.
   //
   const getRoot = () => api.get('')
+
+  //Auth
   const login = (body) => api.post('auth/login', body)
   const verification = (body) => api.post('email/reset_password', body)
   

src/container/EmailVerification.js

 import React, { Component } from 'react';
 import Images from '../assets/Images';
 import { TextField, InputAdornment, Button, Typography } from '@material-ui/core';
+import { Link } from 'react-router-dom';
 
 
 class EmailVerification extends Component {
@@ -23,9 +24,12 @@ class EmailVerification extends Component {
 
                 <Typography style={{textAlign: 'center', fontSize: 14, marginTop: 24, color: '#4b4b4b', fontFamily: 'Nunito Sans, sans-serif'}} >Link verifikasi berhasil terkirim. Silahkan cek email Anda.</Typography>
 
-                <Button variant="contained" style={{ marginTop: 24, marginBottom: 20,  width: 250, height: 30, borderRadius: 4 , backgroundColor: '#51c6ea', color: '#ffffff'}}>
-                  <Typography style={{fontSize: 12, fontFamily: 'Nunito Sans, sans-serif'}}>Tutup</Typography>
-                </Button>
+                <Link to={{pathname: '/login'}} style={{textDecoration: 'none'}}>
+                  <Button variant="contained" style={{ marginTop: 24, marginBottom: 20,  width: 250, height: 30, borderRadius: 4 , backgroundColor: '#51c6ea', color: '#ffffff'}}>
+                    <Typography style={{fontSize: 12, fontFamily: 'Nunito Sans, sans-serif'}}>Tutup</Typography>
+                  </Button>
+                </Link>
+                
               </div>
           </div>
         );

src/container/ForgotPassword.js

@@ -2,25 +2,49 @@ import React, { Component } from 'react';
 import Images from '../assets/Images';
 import { TextField, InputAdornment, Button, Typography } from '@material-ui/core';
 import api from '../api';
+import Constant from '../library/Constant';
 
 
 class ForgotPassword extends Component {
     constructor(props) {
         super(props)
         this.state = {
-            email: ''
+            email: '',
+            errorEmail: false,
+            msgEmail: ''
         }
     }
 
     handleChange(e) {
       let data = this.state
       this.setState({...data, [e.target.name] : e.target.value})
+      if (e.target.name == "email") {
+        this.setState({ errorEmail: false, msgEmail: '' })
+      }
     }
 
+    validateEmail() {
+      if (this.state.email.trim() == "") {
+          this.setState({ errorEmail: true, msgEmail: 'Email harus diisi!' })
+      }  else {
+          this.verification()
+      }
+  }
+
     verification() {
+      // alert('test')
       let payload = {
         "email": this.state.email
       }
+      api.create().verification(payload).then((response) => {
+        if(response.data.status === 'success') {
+          this.props.history.push('/email-verification')
+        } else {
+          if (response.data.message == 'Akun Tidak Ditemukan!') {
+            this.setState({ errorEmail: true, msgEmail: response.data.message })
+          }
+        }
+      })
     }
 
     render() {
@@ -35,22 +59,24 @@ class ForgotPassword extends Component {
                     type={"text"}
                     name={"email"}
                     value={this.state.email}
-                    onChange={(email) => this.setState({email: email.target.value})}
+                    onChange={(email) => {
+                      this.handleChange(email)
+                    }}
                     variant="outlined"
-                    error={false}
+                    error={this.state.errorEmail}
                     style={{ width: 250, height: 51, marginTop: 32, fontSize: 14 }}
-                    helperText=""
+                    helperText={this.state.msgEmail}
                     InputProps={{
                         endAdornment: <InputAdornment position="end"><img src={Images.email} /></InputAdornment>,
                     }}
                 />
 
-                <Button variant="contained" style={{ marginTop: 23,  width: 250, height: 30, borderRadius: 4, backgroundColor: '#51c6ea', color: '#ffffff' }}>
+                <Button name="submit" variant="contained" disabled={this.state.email.trim() === '' ? true : false} onClick={() => this.validateEmail()} style={{ marginTop: this.state.errorEmail ? 35 : 23,  width: '100%', height: 30, borderRadius: 4, color: this.state.email.trim() === '' ? '#4b4b4b' : '#fff', backgroundColor: this.state.email.trim() === '' ? '#d8d8d8' : '#51c6ea' }}>
                   <Typography style={{fontSize: 12, fontFamily: 'Nunito Sans, sans-serif'}}>Lanjut</Typography>
                 </Button>
 
                 <div style={{ marginTop: 24}}>
-                  <span style={{ color: '#51c6ea', cursor: 'pointer' }}>
+                  <span onClick={() => this.props.history.goBack()} style={{ color: '#51c6ea', cursor: 'pointer' }}>
                     <Typography style={{fontSize: 14}}>Kembali Ke Login</Typography>
                   </span>
                 </div>

src/container/Login.js

@@ -6,6 +6,7 @@ import Visibility from '@material-ui/icons/Visibility';
 import VisibilityOff from '@material-ui/icons/VisibilityOff';
 import api from '../api';
 import Constant from '../library/Constant';
+import { Link } from 'react-router-dom';
 
 const CustomCheckbox = withStyles({
   root: {
@@ -133,7 +134,7 @@ class Login extends Component {
             <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>
+              <Link to={{pathname: '/forgot-password'}} style={{textDecoration: 'none'}}><span style={{marginLeft: 30, color: '#51c6ea', cursor: 'pointer', fontSize: 12, fontFamily: 'Nunito Sans, sans-serif' }}>Lupa Kata Sandi?</span></Link>
             </div>
             <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>

src/container/ResetPassword.js

@@ -13,9 +13,25 @@ class ResetPassword extends Component {
             confirmPassword: '',
             showPass: false,
             showPass2: false,
+            userId: 0
         }
     }
 
+    componentDidMount() {
+      console.log(this.props.match.params.id)
+      let userId = this.props.match.params.id
+      this.setState({userId})
+    }
+
+    confirmPassword() {
+      let payload = {
+        "password": this.state.password,
+        "confirmPassword": this.state.confirmPassword,
+        "userId": this.state.userId  
+      }
+      
+    }
+
     handleChange(e) {
       let data = this.state
       this.setState({...data, [e.target.name] : e.target.value})

src/router/index.js

@@ -40,7 +40,7 @@ export default function BasicExample() {
           {/* <Login/>
         </PrivateRoute> */}
         <Route path="/forgot-password" component={ForgotPassword} />
-        <Route path="/reset-password" component={ResetPassword} />
+        <Route path="/reset-password/:id" component={ResetPassword} />
         <Route path="/email-verification" component={EmailVerification} />
         <Route path="/register" component={Register}/>
         <PrivateRoute path="/home">