Reset Password UI

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

@@ -22,7 +22,7 @@ class ForgotPassword extends Component {
                 <img src={Images.tia} />
 
                 <TextField
-                    label="Email *"
+                    label={<Typography style={{fontSize: 12, fontFamily: 'Nunito Sans, sans-serif'}}>Email *</Typography>}
                     id="username"
                     type={"text"}
                     name={"username"}
@@ -38,7 +38,7 @@ class ForgotPassword extends Component {
                 />
 
                 <Button variant="contained" style={{ marginTop: 23,  width: 250, height: 30, borderRadius: 4 }} disabled>
-                  <Typography style={{fontSize: 12}}>Lanjut</Typography>
+                  <Typography style={{fontSize: 12, fontFamily: 'Nunito Sans, sans-serif'}}>Lanjut</Typography>
                 </Button>
 
                 <div style={{ marginTop: 24}}>

src/container/Login.js

@@ -62,7 +62,7 @@ class Login extends Component {
             <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"}
@@ -78,7 +78,7 @@ 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"}
@@ -104,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)', fontSize: 12 }}>Remember Me</span>
-              <span style={{marginLeft: 30, color: '#51c6ea', cursor: 'pointer', fontSize: 12 }}>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 name="submit" variant="contained" onClick={() => this.login()} style={{ marginTop: 23,  width: '100%', height: 35, borderRadius: 4 }}>
-              <Typography style={{fontSize: 12}}>Login</Typography>
+              <Typography style={{fontSize: 12, fontFamily: 'Nunito Sans, sans-serif'}}>Login</Typography>
             </Button>
           </div>
         </div>

src/container/ResetPassword.js

@@ -27,7 +27,7 @@ class ResetPassword extends Component {
                 <img src={Images.tia}/>
 
                 <TextField
-                  label={<Typography style={{fontSize: 12, fontFamily: 'Nunito Sans, sans-serif', }}>Kata Sandi Baru *</Typography>}
+                  label={<Typography style={{fontSize: 12, fontFamily: 'Nunito Sans, sans-serif'}}>Kata Sandi Baru *</Typography>}
                   id="password"
                   type={this.state.showPass ? 'text' : 'password'}
                   name={"password"}
@@ -36,7 +36,7 @@ class ResetPassword extends Component {
                   variant="outlined"
                   error={false}
                   style={{ width: 250, height: 51, marginTop: 32 }}
-                  helperText={<Typography style={{fontSize: 9, marginTop: 4}}>Terdiri 8 karakter dengan kombinasi angka.</Typography>}
+                  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
@@ -52,7 +52,7 @@ class ResetPassword extends Component {
                 />
 
                 <TextField
-                  label={<Typography style={{fontSize: 12}}>Ulangi Kata Sandi Baru *</Typography>}
+                  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"}
@@ -61,7 +61,7 @@ class ResetPassword extends Component {
                   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>}
+                  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
@@ -76,8 +76,8 @@ class ResetPassword extends Component {
                   }}
                 />
 
-                <Button variant="contained" style={{ marginTop: 50,  width: 250, height: 30, borderRadius: 4 }} disabled>
-                  <Typography style={{fontSize: 12}}>Lanjut</Typography>
+                <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

@@ -13,6 +13,7 @@ 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).
 //
@@ -35,8 +36,9 @@ export default function BasicExample() {
           />
         </Route>
         <Route path="/login" component={Login} />
-        <Route path="/forgotpassword" component={ForgotPassword} />
-        <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="*">