Skip to content

T
Tia-dev
Commit 1426fa62 authored by Deni Rinaldi's avatar Deni Rinaldi
Browse files
Options

Merge branch 'riri' into 'master' 

Reset Password UI

See merge request !33
parents 7b01fde0 38a319c3
Hide whitespace changes
Inline Side-by-side
Showing with 192 additions and 51 deletions
src/assets/Images.js
View file @ 1426fa62
......@@ -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 0 → 100644
View file @ 1426fa62
<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 0 → 100644
View file @ 1426fa62
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 0 → 100644
View file @ 1426fa62
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
View file @ 1426fa62
......@@ -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
View file @ 1426fa62
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
View file @ 1426fa62
......@@ -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="*">
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment