Merge branch 'riri' into 'master'

Reset Password UI

See merge request !33

src/assets/Images.js

@@ -25,6 +25,7 @@ const Images = {
     visualisasi: require('./visualisasi.svg'),
     add: require('./add.svg'),
     searchBlack: require('./search-black.svg'),
+    berhasil: require('./berhasil.svg'),
 
     //Image
     triputra: require('./triputra.png'),

src/assets/berhasil.svg

+<svg xmlns="http://www.w3.org/2000/svg" width="72" height="72" viewBox="0 0 72 72">
+    <g fill="none" fill-rule="evenodd">
+        <circle cx="36" cy="36" r="36" fill="#32BA7C"/>
+        <path fill="#0AA06E" d="M36 72c19.882 0 36-16.118 36-36S55.882 0 36 0"/>
+        <circle cx="35.95" cy="35.95" r="31.95" fill="#4CC9F0" fill-rule="nonzero"/>
+        <path fill="#2EB7E1" fill-rule="nonzero" d="M35.95 67.9c17.645 0 31.95-14.305 31.95-31.95C67.9 18.304 53.594 4 35.95 4"/>
+        <g fill="#FFF" fill-rule="nonzero">
+            <path d="M22.047 23.357c1.411 1.412 1.411 3.83 0 5.241l-2.923 2.923c-1.41 1.411-3.83 1.411-5.24 0l-12.8-12.9c-1.412-1.412-1.412-3.83 0-5.241l2.922-2.923c1.411-1.411 3.83-1.411 5.241 0l12.8 12.9z" transform="translate(14.709 19.748)"/>
+            <path d="M33.235 1.083c1.41-1.41 3.83-1.41 5.24 0l2.923 2.923c1.411 1.411 1.411 3.83 0 5.241L19.225 31.32c-1.41 1.41-3.83 1.41-5.24 0l-2.924-2.923c-1.41-1.411-1.41-3.83 0-5.241L33.235 1.083z" transform="translate(14.709 19.748)"/>
+        </g>
+    </g>
+</svg>

src/container/EmailVerification.js

+import React, { Component } from 'react';
+import Images from '../assets/Images';
+import { TextField, InputAdornment, Button, Typography } from '@material-ui/core';
+
+
+class EmailVerification 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={{paddingTop: 20, paddingRight: 24, paddingLeft: 24, display: 'flex', flexDirection: 'column', width: 378, height: 300, borderRadius: 12, boxShadow: '0 2 4 0 rgba(0, 0, 0, 0.2)', backgroundColor: '#ffffff', justifyContent: 'center', alignItems: 'center' }}>
+                <img src={Images.berhasil} />
+
+                <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>
+              </div>
+          </div>
+        );
+      }
+}
+
+export default EmailVerification;
\ No newline at end of file

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={<Typography style={{fontSize: 12, fontFamily: 'Nunito Sans, sans-serif'}}>Email *</Typography>}
+                    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, fontFamily: 'Nunito Sans, sans-serif'}}>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

@@ -30,20 +30,23 @@ 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)
+    } else {
+      alert("Oops Incorrect Username or Password!")
+    }
   })
   }
 
@@ -55,19 +58,19 @@ 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
-              label="Username/Email *"
+              label={<Typography style={{fontSize: 12, fontFamily: 'Nunito Sans, sans-serif'}}>Username/Email *</Typography>}
               id="username"
               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>,
@@ -75,13 +78,15 @@ class Login extends Component {
             />
 
             <TextField
-              label="Kata Sandi *"
+              label={<Typography style={{fontSize: 12, fontFamily: 'Nunito Sans, sans-serif'}}>Kata Sandi *</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: '100%', height: 51, marginTop: 20 }}
+              style={{ width: 250, height: 51, marginTop: 20 }}
               helperText=""
               InputProps={{
                 endAdornment: <InputAdornment position="end">
@@ -99,11 +104,11 @@ 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, 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>
             </div>
-            <Button variant="contained" onClick={() => this.login()} style={{ marginTop: 23,  width: '100%', height: 35, borderRadius: 4 }}>
-              <Typography style={{fontSize: 12}}>Login</Typography>
+            <Button name="submit" variant="contained" onClick={() => this.login()} style={{ marginTop: 23,  width: '100%', height: 35, borderRadius: 4 }}>
+              <Typography style={{fontSize: 12, fontFamily: 'Nunito Sans, sans-serif'}}>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';
+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: ''
+            password: '',
+            confirmPassword: '',
+            showPass: false,
+            showPass2: false,
         }
     }
 
-    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' }}>
-                <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})}
-                    variant="outlined"
-                    error={false}
-                    style={{ width: '90%', height: 51, marginTop: 32, fontSize: 14 }}
-                    helperText=""
-                    InputProps={{
-                        endAdornment: <InputAdornment position="end"><img src={Images.email} /></InputAdornment>,
-                    }}
+                  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 }}
+                  helperText={<Typography style={{fontSize: 9, marginTop: 4, fontFamily: 'Nunito Sans, sans-serif'}}>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({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: '90%', height: 30, borderRadius: 4 }} disabled>
-                  <Typography style={{fontSize: 12}}>Lanjut</Typography>
-                </Button>
+                <TextField
+                  label={<Typography style={{fontSize: 12, fontFamily: 'Nunito Sans, sans-serif'}}>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, fontFamily: 'Nunito Sans, sans-serif'}}>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>,
+                  }}
+                />
 
-                <div style={{ marginTop: 24}}>
-                  <span style={{ color: '#51c6ea', cursor: 'pointer' }}>
-                    <Typography style={{fontSize: 14}}>Kembali Ke Login</Typography>
-                  </span>
-                </div>
+                <Button variant="contained" style={{ marginTop: 50,  width: 250, height: 30, borderRadius: 4, backgroundColor: '#51c6ea' }}>
+                  <Typography style={{fontSize: 12, fontFamily: 'Nunito Sans, sans-serif'}}>Lanjut</Typography>
+                </Button>
               </div>
           </div>
         );

src/router/index.js

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