Skip to content

T
Tia-dev
Commit 1bdaa9f7 authored by Deni Rinaldi's avatar Deni Rinaldi
Browse files
Options

Merge branch 'master' of http://103.44.149.204/d.arizona/tia-dev into deni-dev(pc)

parents ce83b3ce 1426fa62
Show whitespace changes
Inline Side-by-side
Showing with 569 additions and 74 deletions
src/assets/Images.js
View file @ 1bdaa9f7
......@@ -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 @ 1bdaa9f7
<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/ApprovalMatrix.js
View file @ 1bdaa9f7
import React, { Component } from 'react';
import { Typography } from '@material-ui/core';
import { Container, Row, Col } from "react-bootstrap";
import { makeStyles, createMuiTheme, MuiThemeProvider } from '@material-ui/core/styles';
import TextField from "@material-ui/core/TextField";
import Images from '../assets/Images';
import MUIDataTable from "mui-datatables";
import Modal from '@material-ui/core/Modal';
class ApprovalMatrix extends Component {
render() {
var ct = require("../library/CustomTable");
const getMuiTheme = () => createMuiTheme(ct.customTable());
const options = ct.customOptions();
function rand() {
return Math.round(Math.random() * 20) - 10;
}
function getModalStyle() {
const top = 50 + rand();
const left = 50 + rand();
return {
top: `${top}%`,
left: `${left}%`,
transform: `translate(-${top}%, -${left}%)`,
};
}
const useStyles = makeStyles((theme) => ({
paper: {
position: 'absolute',
width: 400,
backgroundColor: theme.palette.background.paper,
boxShadow: theme.shadows[5],
padding: theme.spacing(2, 4, 3),
},
}));
// class ApprovalMatrix extends Component {
// render() {
export default function ApprovalMatrix() {
const classess = useStyles();
const [modalStyle] = React.useState(getModalStyle);
const [open, setOpen] = React.useState(false);
const handleOpen = () => {
setOpen(true);
};
const handleClose = () => {
setOpen(false);
};
const showModal = (
<div className="" style={{ marginTop: 100 }}>
<div className="popup-content background-white border-radius">
<div className="popup-panel grid grid-2x">
<div className="col-1" style={{ width: '140%' }}>
<div className="popup-title">
Test
</div>
</div>
<div className="col-2 content-right" style={{ maxWidth: "inherit" }}>
<button
type="button"
className="btn btn-circle btn-grey"
onClick={() => null}
>
<i className="fa fa-lg fa-times" />
</button>
</div>
</div>
{/* <div>
CONTENT
</div> */}
</div>
</div>
);
const columns = [{
name: "Action",
options: {
......@@ -36,7 +106,7 @@ class ApprovalMatrix extends Component {
]
const options = {
filter: false,
sort: false,
sort: true,
responsive: "scroll",
print: false,
download: false,
......@@ -47,11 +117,12 @@ class ApprovalMatrix extends Component {
}
return (
<div style={{ flex: 1 }}>
<div style={{ height: 150, width: '100%', backgroundColor: '#354960', padding: 24, paddingTop: 30 }}>
<div style={{ display: 'flex' }}>
<Container fluid style={{ height: '100vh', padding: 0 }}>
<div style={{ height: '200px', width: '100%', backgroundColor: '#354960', padding: 24, paddingTop: 30 }}>
<div style={{ }}>
<div style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between', paddingRight: 25, paddingLeft: 25 }}>
<Typography style={{ paddingTop: 8, paddingBottom: 7, fontSize: '16px', color: 'white' }}>Master Data - Approval Matrix</Typography>
<form style={{ marginLeft: 110 }}>
<form style={{ }}>
<TextField id="" label="" variant="outlined" size="small" placeholder="Search" style={{ width: 423, backgroundColor: 'white', borderRadius: 6 }}/>
</form>
<div style={{ display: 'flex' }}>
......@@ -60,7 +131,6 @@ class ApprovalMatrix extends Component {
backgroundColor: 'transparent',
cursor: 'pointer',
borderColor: 'transparent',
marginLeft: 82,
padding: 0
}}
onClick={() => null}
......@@ -111,26 +181,35 @@ class ApprovalMatrix extends Component {
marginLeft: 16,
padding:0
}}
onClick={() => null}
onClick={handleOpen}
>
<img src={Images.add} />
</button>
</div >
<Modal
open={open}
onClose={handleClose}
aria-labelledby="simple-modal-title"
aria-describedby="simple-modal-description"
>
{showModal}
</Modal>
</div>
</div>
<div style={{ flex: 1, padding: 20, width: '100%' }}>
<div>
<div style={{ padding: 20, width: '100%' }}>
<MuiThemeProvider theme={getMuiTheme()}>
<MUIDataTable
data={data}
columns={columns}
options={options}
/>
</MuiThemeProvider>
</div>
</div>
</div>
</Container>
);
}
// }
}
export default ApprovalMatrix;
\ No newline at end of file
// export default ApprovalMatrix;
src/container/EmailVerification.js 0 → 100644
View file @ 1bdaa9f7
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 @ 1bdaa9f7
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 @ 1bdaa9f7
......@@ -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/Otorisasi/User.js
View file @ 1bdaa9f7
......@@ -9,7 +9,7 @@ var ct = require("../../library/CustomTable");
const getMuiTheme = () => createMuiTheme(ct.customTable());
const options = ct.customOptions();
export default class componentName extends Component {
export default class User extends Component {
render() {
const columns = ["#", "Nama Perusahaan", "Revisi", "Status", {
name: "Action",
......
src/container/Otorisasi/UserRole.js
View file @ 1bdaa9f7
import React, { Component } from 'react';
import React, { Component } from "react";
import { Container, Row, Col } from "react-bootstrap";
import { makeStyles, createMuiTheme, MuiThemeProvider } from '@material-ui/core/styles';
import SearchIcon from '@material-ui/icons/Search';
import Images from "../../assets/Images";
import MUIDataTable from "mui-datatables";
import AddRole from './UserRole/AddRole';
import EditRole from './UserRole/EditRole'
export default class componentName extends Component {
var ct = require("../../library/CustomTable");
const getMuiTheme = () => createMuiTheme(ct.customTable());
const options = ct.customOptions();
export default class UserRole extends Component {
constructor(props) {
super(props)
this.state = {
add: false,
edit: false
}
}
render() {
const columns = [{
name: "Action",
options: {
customBodyRender: (val, tableMeta) => {
return (
<div style={{ display: 'flex' }}>
<button
style={{
backgroundColor: 'transparent',
cursor: 'pointer',
borderColor: 'transparent',
}}
onClick={() => this.setState({edit: true})}
>
<img src={Images.editCopy} />
</button>
</div >
);
}
}
}, {
name: "ID",
options: {
customBodyRender: (val, tableMeta) => {
return (
<div style={{ display: 'flex', width: 50 }}>
{val}
</div >
);
}
}
}, {
name: "User Role",
options: {
customBodyRender: (val, tableMeta) => {
return (
<div style={{ display: 'flex', width: 250 }}>
{val}
</div >
);
}
}
}, "Hak Akses", "Status"]
const data = [
["1", "1", "Laporan Bulanan - September 2020", "1 (20 Oktober 2020)", "Belum Disetujui"],
["2", "2", "Laporan Bulanan - September 2020", "1 (20 Oktober 2020)", "Belum Disetujui"],
["3", "3", "Budget Tahunan 2021", "0 (20 Oktober 2020)", "Belum Disetujui"],
["4", "4", "Laporan Bulanan - September 2020", "0 (20 Oktober 2020)", "Belum Disetujui"],
["5", "5", "Budget Tahunan 2021", "0 (20 Oktober 2020)", "Belum Disetujui"],
]
return (
<div style={{height: '100vh', width: '100%', flex: 1}}> textInComponent </div>
<div style={{ height: this.props.height }}>
{/* <Row> */}
<div style={{ height: 199, backgroundColor: '#354960', width: '100%' }} />
<div>
<div style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between', paddingRight: 25, paddingLeft: 25, marginTop: -150 }}>
<label style={{ color: 'white', width: '20%', alignSelf: 'center'}}>Master Data - Role & Otorisasi</label>
<div style={{width: '60%', justifyContent: 'center', display: 'flex', borderWidth: 2, alignItems: 'center' }}>
<div style={{width: '50%', backgroundColor:'white', padding: 10, borderRadius: 7.5, flexDirection: 'row', display: 'flex'}}>
<SearchIcon/>
<input type="text" style={{flexGrow: 1, marginLeft: 10}}/>
</div>
</div>
{/* <label style={{ color: 'white', width: '60%', justifyContent: 'center', display: 'flex', backgroundColor: 'white', borderWidth: 2, alignItems: 'center' }}>Search</label> */}
<div style={{ width: '20%', justifyContent: 'flex-end', display: 'flex' }}>
<img src={Images.add} onClick={() => this.setState({add: true})}/>
</div>
</div>
<div style={{ padding: 25 }}>
<MuiThemeProvider theme={getMuiTheme()}>
<MUIDataTable
data={data}
columns={columns}
options={options}
/>
</MuiThemeProvider>
</div>
</div>
{this.state.add && <AddRole/>}
{this.state.edit && <EditRole/>}
</div>
);
}
}
src/container/Otorisasi/UserRole/AddRole.js 0 → 100644
View file @ 1bdaa9f7
import React, { Component } from 'react';
import { TextField } from '@material-ui/core';
export default class CreateUnitBisnis extends Component {
render() {
return (
<div className="test app-popup-show" style={{ paddingTop: 100 }}>
<div className="popup-content background-white border-radius" style={{ borderRadius: 8 }}>
<div className="popup-panel grid grid-2x" style={{ backgroundColor: '#51c6ea', height: 64, borderTopRightRadius: 8, borderTopLeftRadius: 8 }}>
<div className="col-1" style={{ maxWidth: "inherit", display: 'flex', alignItems: 'center' }}>
<div className="popup-title">
<span style={{ color: '#fff', fontSize: 16, fontWeight: 'bold' }}>Create Data</span>
</div>
</div>
<div className="col-2 content-right" style={{ maxWidth: "inherit", alignSelf: 'center' }}>
<button
type="button"
className="btn btn-circle btn-white"
onClick={() => this.props.onClickClose()}
>
<i className="fa fa-lg fa-times" style={{ color: 'white' }} />
</button>
</div>
</div>
<div className="border-bottom grid grid-2x grid-mobile-none gap-15px" style={{ padding: 20 }}>
<div className="column-1">
<div className="margin-bottom-20px">
<TextField
style={{ width: '100%' }}
id="periode"
select
label="Berlaku Mulai"
// value={this.state.periode}
onChange={(e) => null}
>
{/* {periode.map((option) => (
<MenuItem key={option.value} value={option.value}>
{option.label}
</MenuItem>
))} */}
</TextField>
</div>
</div>
<div className="column-2">
<div className="margin-bottom-20px">
<TextField
style={{ width: '100%' }}
id="unit"
select
label="Unit Bisnis"
// value={this.state.periode}
onChange={(e) => null}
>
{/* {periode.map((option) => (
<MenuItem key={option.value} value={option.value}>
{option.label}
</MenuItem>
))} */}
</TextField>
</div>
</div>
</div>
<div className="border-top grid grid-2x" style={{ height: 56, backgroundColor: '#f5f5f5', paddingLeft: 20, paddingRight: 20 }}>
<div className="column-1" style={{ alignSelf: 'center' }}>
<div style={{ width: 102, height: 30, border: 'solid 1px #354960', borderRadius: 5, alignItems: 'center', display: 'flex', justifyContent: 'center' }}>
<span style={{ color: '#354960', fontSize: 11 }}>Batal</span>
</div>
</div>
<div className="column-2" style={{display: 'flex', justifyContent: 'flex-end', alignItems: 'center'}}>
<div style={{ width: 102, height: 30, backgroundColor: '#354960', borderRadius: 5, alignItems: 'center', display: 'flex', justifyContent: 'center' }}>
<span style={{ color: '#fff', fontSize: 11 }}>Simpan</span>
</div>
</div>
</div>
</div>
</div>
);
}
}
src/container/Otorisasi/UserRole/EditRole.js 0 → 100644
View file @ 1bdaa9f7
import React, { Component } from 'react';
import { TextField } from '@material-ui/core';
export default class CreateUnitBisnis extends Component {
render() {
return (
<div className="test app-popup-show" style={{ paddingTop: 100 }}>
<div className="popup-content background-white border-radius" style={{ borderRadius: 8 }}>
<div className="popup-panel grid grid-2x" style={{ backgroundColor: '#51c6ea', height: 64, borderTopRightRadius: 8, borderTopLeftRadius: 8 }}>
<div className="col-1" style={{ maxWidth: "inherit", display: 'flex', alignItems: 'center' }}>
<div className="popup-title">
<span style={{ color: '#fff', fontSize: 16, fontWeight: 'bold' }}>Create Data</span>
</div>
</div>
<div className="col-2 content-right" style={{ maxWidth: "inherit", alignSelf: 'center' }}>
<button
type="button"
className="btn btn-circle btn-white"
onClick={() => this.props.onClickClose()}
>
<i className="fa fa-lg fa-times" style={{ color: 'white' }} />
</button>
</div>
</div>
<div className="border-bottom grid grid-2x grid-mobile-none gap-15px" style={{ padding: 20 }}>
<div className="column-1">
<div className="margin-bottom-20px">
<TextField
style={{ width: '100%' }}
id="periode"
select
label="Berlaku Mulai"
// value={this.state.periode}
onChange={(e) => null}
>
{/* {periode.map((option) => (
<MenuItem key={option.value} value={option.value}>
{option.label}
</MenuItem>
))} */}
</TextField>
</div>
</div>
<div className="column-2">
<div className="margin-bottom-20px">
<TextField
style={{ width: '100%' }}
id="unit"
select
label="Unit Bisnis"
// value={this.state.periode}
onChange={(e) => null}
>
{/* {periode.map((option) => (
<MenuItem key={option.value} value={option.value}>
{option.label}
</MenuItem>
))} */}
</TextField>
</div>
</div>
</div>
<div className="border-top grid grid-2x" style={{ height: 56, backgroundColor: '#f5f5f5', paddingLeft: 20, paddingRight: 20 }}>
<div className="column-1" style={{ alignSelf: 'center' }}>
<div style={{ width: 102, height: 30, border: 'solid 1px #354960', borderRadius: 5, alignItems: 'center', display: 'flex', justifyContent: 'center' }}>
<span style={{ color: '#354960', fontSize: 11 }}>Batal</span>
</div>
</div>
<div className="column-2" style={{display: 'flex', justifyContent: 'flex-end', alignItems: 'center'}}>
<div style={{ width: 102, height: 30, backgroundColor: '#354960', borderRadius: 5, alignItems: 'center', display: 'flex', justifyContent: 'center' }}>
<span style={{ color: '#fff', fontSize: 11 }}>Simpan</span>
</div>
</div>
</div>
</div>
</div>
);
}
}
src/container/ResetPassword.js
View file @ 1bdaa9f7
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})}
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: '90%', height: 51, marginTop: 32, fontSize: 14 }}
helperText=""
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"><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: '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/container/Screen404.js
View file @ 1bdaa9f7
......@@ -2,15 +2,21 @@ import React from 'react'
import {
useLocation
} from "react-router-dom";
import Images from '../assets/Images';
export default function NoMatch() {
let location = useLocation();
return (
<div>
<h3>
Link '<code>{location.pathname}</code>' engga ada euy
<div style={{flex: 1, height: '100vh', alignItems:'center', justifyContent: 'center', display: 'flex'}}>
<div style={{flexDirection:'column'}}>
<div style={{alignItems:'center', justifyContent: 'center', display: 'flex'}}>
<img src={Images.tia}/>
</div>
<h3 style={{marginTop: 20}}>
'<code>{location.pathname}</code>' Not Found
</h3>
</div>
</div>
);
}
\ No newline at end of file
src/router/homeRoutes.js
View file @ 1bdaa9f7
......@@ -48,6 +48,10 @@ const routes = [
path: "/home/unit-bisnis",
main: UnitBisnis
},
{
path: "*",
main: screen404
}
];
export default routes;
\ No newline at end of file
src/router/index.js
View file @ 1bdaa9f7
......@@ -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).
//
......@@ -28,13 +30,15 @@ export default function BasicExample() {
<Route exact path="/">
<Redirect
to={{
pathname: "/home",
pathname: "/home/beranda",
// state: { from: location }
}}
/>
</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