Forgot & Reset

src/container/ForgotPassword.js

+import React, { Component } from 'react';
+import Images from '../assets/Images';
+import { TextField, InputAdornment, Button, Typography } from '@material-ui/core';
+
+
+class ForgotPassword extends Component {
+    constructor(props) {
+        super(props)
+        this.state = {
+            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: 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
+                    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, marginTop: 32, fontSize: 14 }}
+                    helperText=""
+                    InputProps={{
+                        endAdornment: <InputAdornment position="end"><img src={Images.email} /></InputAdornment>,
+                    }}
+                />
+
+                <Button variant="contained" style={{ marginTop: 23,  width: 250, height: 30, borderRadius: 4 }} disabled>
+                  <Typography style={{fontSize: 12}}>Lanjut</Typography>
+                </Button>
+
+                <div style={{ marginTop: 24}}>
+                  <span style={{ color: '#51c6ea', cursor: 'pointer' }}>
+                    <Typography style={{fontSize: 14}}>Kembali Ke Login</Typography>
+                  </span>
+                </div>
+              </div>
+          </div>
+        );
+      }
+}
+
+export default ForgotPassword;
\ No newline at end of file

src/container/Login.js

@@ -5,7 +5,6 @@ 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: {
@@ -45,6 +44,8 @@ class Login extends Component {
     if (response.data.status === 'success') {
       this.props.history.replace('/home')
       // console.log(response.data)
+    } else {
+      alert("Oops Incorrect Username or Password!")
     }
   })
   }

src/container/ResetPassword.js

 import React, { Component } from 'react';
 import Images from '../assets/Images';
-import { TextField, InputAdornment, Button, Typography } from '@material-ui/core';
+import { TextField, InputAdornment, Button, Typography, IconButton } from '@material-ui/core';
+import Visibility from '@material-ui/icons/Visibility';
+import VisibilityOff from '@material-ui/icons/VisibilityOff';
 
 
 class ResetPassword extends Component {
     constructor(props) {
         super(props)
         this.state = {
-            username: ''
+            password: '',
+            confirmPassword: '',
+            showPass: false,
+            showPass2: false,
         }
     }
 
@@ -18,34 +23,62 @@ class ResetPassword extends Component {
     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: 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} />
+              <div style={{padding: 56, display: 'flex', flexDirection: 'column', width: 378, height: 415, borderRadius: 12, boxShadow: '0 2 4 0 rgba(0, 0, 0, 0.2)', backgroundColor: '#ffffff', justifyContent: 'center', alignItems: 'center' }}>
+                <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})}
+                  label={<Typography style={{fontSize: 12, fontFamily: 'Nunito Sans, sans-serif', }}>Kata Sandi Baru *</Typography>}
+                  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: 250, height: 51, marginTop: 32, fontSize: 14 }}
-                    helperText=""
+                  style={{ width: 250, height: 51, marginTop: 32 }}
+                  helperText={<Typography style={{fontSize: 9, marginTop: 4}}>Terdiri 8 karakter dengan kombinasi angka.</Typography>}
                   InputProps={{
-                        endAdornment: <InputAdornment position="end"><img src={Images.email} /></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>,
                   }}
                 />
 
-                <Button variant="contained" style={{ marginTop: 23,  width: 250, height: 30, borderRadius: 4 }} disabled>
+                <TextField
+                  label={<Typography style={{fontSize: 12}}>Ulangi Kata Sandi Baru *</Typography>}
+                  id="confirmPassword"
+                  type={this.state.showPass2 ? 'text' : 'password'}
+                  name={"confirmPassword"}
+                  value={this.state.confirmPassword}
+                  onChange={(confirmPassword) => this.handleChange(confirmPassword) }
+                  variant="outlined"
+                  error={false}
+                  style={{ width: 250, height: 51, marginTop: 38 }}
+                  helperText={<Typography style={{fontSize: 9, marginTop: 4}}>Terdiri 8 karakter dengan kombinasi angka.</Typography>}
+                  InputProps={{
+                    endAdornment: <InputAdornment position="end">
+                      <IconButton
+                      aria-label="toggle password visibility"
+                      style={{color: '#4b4b4b', opacity: 0.5}}
+                      onClick={() => this.setState({showPass2: !this.state.showPass2})}
+                      edge="end"
+                    >
+                      {this.state.showPass2 ? <Visibility style={{fontSize: 18}} /> : <VisibilityOff style={{fontSize: 18}} />}
+                    </IconButton>
+                    </InputAdornment>,
+                  }}
+                />
+
+                <Button variant="contained" style={{ marginTop: 50,  width: 250, height: 30, borderRadius: 4 }} disabled>
                   <Typography style={{fontSize: 12}}>Lanjut</Typography>
                 </Button>
-
-                <div style={{ marginTop: 24}}>
-                  <span style={{ color: '#51c6ea', cursor: 'pointer' }}>
-                    <Typography style={{fontSize: 14}}>Kembali Ke Login</Typography>
-                  </span>
-                </div>
               </div>
           </div>
         );

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