update login

src/container/Login.js

 import React, { Component } from 'react';
 import Images from '../assets/Images';
-import { Checkbox, Button, InputAdornment, TextField, InputLabel } from '@material-ui/core';
+import { Checkbox, Button, InputAdornment, TextField, InputLabel, Typography, IconButton } from '@material-ui/core';
 import { withStyles } from '@material-ui/core/styles';
+import Visibility from '@material-ui/icons/Visibility';
+import VisibilityOff from '@material-ui/icons/VisibilityOff';
 
 const CustomCheckbox = withStyles({
   root: {
@@ -14,6 +16,26 @@ const CustomCheckbox = withStyles({
 })((props) => <Checkbox color="default" {...props} />);
 
 class Login extends Component {
+  constructor(props) {
+    super(props)
+    this.state = {
+      username: '',
+      password: '',
+      showPass: false
+    }
+  }
+
+  componentDidMount() {
+    // this.coba()
+  }
+
+  coba(e) {
+    this.setState({
+      username: e
+    })
+    
+  }
+
   render() {
     return (
       <div style={{ flex: 1, display: 'flex' }}>
@@ -30,9 +52,11 @@ class Login extends Component {
               id="username"
               type={"text"}
               name={"username"}
+              value={this.state.username}
+              onChange={(e) => this.setState({username: e.target.value})}
               variant="outlined"
               error={false}
-              style={{ width: '100%', height: 51, marginTop: 32 }}
+              style={{ width: '100%', height: 51, marginTop: 32, fontSize: 14 }}
               helperText=""
               InputProps={{
                 endAdornment: <InputAdornment position="end"><img src={Images.email} /></InputAdornment>,
@@ -42,14 +66,23 @@ class Login extends Component {
             <TextField
               label="Kata Sandi *"
               id="password"
-              type={"password"}
+              type={this.state.showPass ? 'text' : 'password'}
               name={"password"}
               variant="outlined"
-              error={true}
+              error={false}
               style={{ width: '100%', height: 51, marginTop: 12 }}
               helperText=""
               InputProps={{
-                endAdornment: <InputAdornment position="end"><img src={Images.key} /></InputAdornment>,
+                endAdornment: <InputAdornment position="end">
+                  <IconButton
+                  aria-label="toggle password visibility"
+                  style={{color: '#4b4b4b', opacity: 0.5}}
+                  onClick={() => this.setState({showPass: !this.state.showPass})}
+                  edge="end"
+                >
+                  {this.state.showPass ? <Visibility style={{fontSize: 18}} /> : <VisibilityOff style={{fontSize: 18}} />}
+                </IconButton>
+                </InputAdornment>,
               }}
             />
 
@@ -59,7 +92,7 @@ class Login extends Component {
               <span style={{marginLeft: 30, color: '#51c6ea', cursor: 'pointer' }}>Lupa Kata Sandi?</span>
             </div>
             <Button variant="contained" style={{ marginTop: 23,  width: '100%', height: 35, borderRadius: 4 }} disabled>
-              Login
+              <Typography style={{fontSize: 12}}>Login</Typography>
             </Button>
           </div>
         </div>