Login

src/container/Login.js

@@ -5,6 +5,7 @@ import { withStyles } from '@material-ui/core/styles';
 import Visibility from '@material-ui/icons/Visibility';
 import VisibilityOff from '@material-ui/icons/VisibilityOff';
 import api from '../api';
+import { Redirect } from 'react-router-dom';
 
 const CustomCheckbox = withStyles({
   root: {
@@ -30,20 +31,21 @@ class Login extends Component {
     // this.coba()
   }
 
-  coba(e) {
-    this.setState({
-      username: e
-    })
-    
+  handleChange(e) {
+    let data = this.state
+    this.setState({...data, [e.target.name] : e.target.value})
   }
 
   login() {
     let payload = {
       "username": this.state.username,
-      "password": "admin"
+      "password": this.state.password
   }
   api.create().login(payload).then((response) => {
-    console.log(response.data)
+    if (response.data.status === 'success') {
+      this.props.history.replace('/home')
+      // console.log(response.data)
+    } 
   })
   }
 
@@ -55,7 +57,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={{ padding: 60, display: 'flex', flexDirection: 'column', width: 318, height: 351, borderRadius: 12, boxShadow: '0 2 4 0 rgba(0, 0, 0, 0.2)', backgroundColor: '#ffffff' }}>
+          <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' }}>
             <img src={Images.tia} />
 
             <TextField
@@ -64,10 +66,10 @@ class Login extends Component {
               type={"text"}
               name={"username"}
               value={this.state.username}
-              onChange={(e) => this.setState({username: e.target.value})}
+              onChange={(username) => this.handleChange(username)}
               variant="outlined"
               error={false}
-              style={{ width: '100%', height: 51, marginTop: 32, fontSize: 14 }}
+              style={{ width: 250, height: 51, marginTop: 32, fontSize: 14 }}
               helperText=""
               InputProps={{
                 endAdornment: <InputAdornment position="end"><img src={Images.email} /></InputAdornment>,
@@ -79,9 +81,11 @@ class Login extends Component {
               id="password"
               type={this.state.showPass ? 'text' : 'password'}
               name={"password"}
+              value={this.state.password}
+              onChange={(password) => this.handleChange(password) }
               variant="outlined"
               error={false}
-              style={{ width: '100%', height: 51, marginTop: 20 }}
+              style={{ width: 250, height: 51, marginTop: 20 }}
               helperText=""
               InputProps={{
                 endAdornment: <InputAdornment position="end">
@@ -99,10 +103,10 @@ class Login extends Component {
 
             <div style={{ flexDirection: 'row', width: '100%', marginTop: 16 }}>
               <CustomCheckbox name="checked-remember" />
-              <span style={{ color: 'rgba(0, 0, 0, 0.5)' }}>Remember Me</span>
-              <span style={{marginLeft: 30, color: '#51c6ea', cursor: 'pointer' }}>Lupa Kata Sandi?</span>
+              <span style={{ color: 'rgba(0, 0, 0, 0.5)', fontSize: 12 }}>Remember Me</span>
+              <span style={{marginLeft: 30, color: '#51c6ea', cursor: 'pointer', fontSize: 12 }}>Lupa Kata Sandi?</span>
             </div>
-            <Button variant="contained" onClick={() => this.login()} style={{ marginTop: 23,  width: '100%', height: 35, borderRadius: 4 }}>
+            <Button name="submit" variant="contained" onClick={() => this.login()} style={{ marginTop: 23,  width: '100%', height: 35, borderRadius: 4 }}>
               <Typography style={{fontSize: 12}}>Login</Typography>
             </Button>
           </div>

src/container/ResetPassword.js

@@ -7,22 +7,18 @@ class ResetPassword extends Component {
     constructor(props) {
         super(props)
         this.state = {
-            username: '',
-            password: ''
+            username: ''
         }
     }
 
-    user(username) {
-        this.setState({
-          username: username
-        })
-        
-      }
-      
+    handleChange(e) {
+      let data = this.state
+      this.setState({...data, [e.target.name] : e.target.value})
+    }
     render() {
         return (
           <div style={{ flex: 1, display: 'flex', backgroundColor: '#51c6ea', height: '100vh', justifyContent: 'center', alignItems: 'center' }}>
-              <div style={{padding: 60, display: 'flex', flexDirection: 'column', width: 318, height: 250, borderRadius: 12, boxShadow: '0 2 4 0 rgba(0, 0, 0, 0.2)', backgroundColor: '#ffffff', justifyContent: 'center', alignItems: 'center' }}>
+              <div style={{padding: 60, display: 'flex', flexDirection: 'column', width: 378, height: 351, borderRadius: 12, boxShadow: '0 2 4 0 rgba(0, 0, 0, 0.2)', backgroundColor: '#ffffff', justifyContent: 'center', alignItems: 'center' }}>
                 <img src={Images.tia} />
 
                 <TextField
@@ -34,14 +30,14 @@ class ResetPassword extends Component {
                     onChange={(username) => this.setState({username: username.target.value})}
                     variant="outlined"
                     error={false}
-                    style={{ width: '90%', height: 51, marginTop: 32, fontSize: 14 }}
+                    style={{ width: 250, height: 51, marginTop: 32, fontSize: 14 }}
                     helperText=""
                     InputProps={{
                         endAdornment: <InputAdornment position="end"><img src={Images.email} /></InputAdornment>,
                     }}
                 />
 
-                <Button variant="contained" style={{ marginTop: 23,  width: '90%', height: 30, borderRadius: 4 }} disabled>
+                <Button variant="contained" style={{ marginTop: 23,  width: 250, height: 30, borderRadius: 4 }} disabled>
                   <Typography style={{fontSize: 12}}>Lanjut</Typography>
                 </Button>