Merge branch 'riri' into 'master'

Update

See merge request !17

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>

src/container/ResetPassword.js

+import React, { Component } from 'react';
+import Images from '../assets/Images';
+import { TextField, InputAdornment, Button, Typography } from '@material-ui/core';
+
+
+class ResetPassword extends Component {
+    constructor(props) {
+        super(props)
+        this.state = {
+            username: '',
+            password: ''
+        }
+    }
+
+    user(username) {
+        this.setState({
+          username: username
+        })
+        
+      }
+      
+    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: 351, borderRadius: 12, boxShadow: '0 2 4 0 rgba(0, 0, 0, 0.2)', backgroundColor: '#ffffff' }}>
+                <img src={Images.tia} />
+
+                <TextField
+                    label="Email *"
+                    id="username"
+                    type={"text"}
+                    name={"username"}
+                    value={this.state.username}
+                    onChange={(username) => this.setState({username: username.target.value})}
+                    variant="outlined"
+                    error={false}
+                    style={{ width: 250, height: 51, margin: 32, fontSize: 14 }}
+                    helperText=""
+                    InputProps={{
+                        endAdornment: <InputAdornment position="end"><img src={Images.email} /></InputAdornment>,
+                    }}
+                />
+
+                <Button variant="contained" style={{ width: 250, height: 51, marginLeft: 32, marginBottom: 24, borderRadius: 4 }} disabled>
+                    <Typography style={{fontSize: 12}}>Lanjut</Typography>
+                </Button>
+              </div>
+          </div>
+        );
+      }
+}
+
+export default ResetPassword;
\ No newline at end of file

src/router/index.js

@@ -11,6 +11,7 @@ import Home from '../container/Home'
 import Login from '../container/Login'
 import Register from '../container/Register'
 import Screen404 from '../container/Screen404'
+import ResetPassword from '../container/ResetPassword'
 // This site has 3 pages, all of which are rendered
 // dynamically in the browser (not server rendered).
 //
@@ -33,6 +34,7 @@ export default function BasicExample() {
           />
         </Route>
         <Route path="/login" component={Login} />
+        <Route path="/reset" component={ResetPassword} />
         <Route path="/register" component={Register}/>
         <PrivateRoute path="/home" component={Home} />
         <Route path="*">