Skip to content

T
Tia-dev
Commit 45916933 authored by Rifka Kurnia Irfiana's avatar Rifka Kurnia Irfiana
Browse files
Options

Merge branch 'master' of http://103.44.149.204/d.arizona/tia-dev into rifka

parents dc006cbf 2b07702a
Hide whitespace changes
Inline Side-by-side
Showing with 189 additions and 187 deletions
src/assets/sass/app.css
View file @ 45916933
.main-color{ .main-color{
background-color: #1a2d3e !important; background-color: #273b80 !important;
} }
.sub-color{ .sub-color{
...@@ -7,7 +7,7 @@ ...@@ -7,7 +7,7 @@
} }
.blue-color{ .blue-color{
color: #1a2d3e !important; color: #273b80 !important;
} }
.btn-save{ .btn-save{
src/container/Home.js
View file @ 45916933
...@@ -76,7 +76,7 @@ const useStyles = makeStyles((theme) => ({ ...@@ -76,7 +76,7 @@ const useStyles = makeStyles((theme) => ({
easing: theme.transitions.easing.sharp, easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.enteringScreen, duration: theme.transitions.duration.enteringScreen,
}), }),
backgroundColor: '#1a2d3e' backgroundColor: '#273b80'
}, },
topleftClose: { topleftClose: {
borderRight: 0, borderRight: 0,
...@@ -91,7 +91,7 @@ const useStyles = makeStyles((theme) => ({ ...@@ -91,7 +91,7 @@ const useStyles = makeStyles((theme) => ({
width: theme.spacing(7) + 1, width: theme.spacing(7) + 1,
}, },
paddingLeft: 15, paddingLeft: 15,
backgroundColor: '#1a2d3e' backgroundColor: '#273b80'
}, },
drawerOpen: { drawerOpen: {
width: drawerWidth, width: drawerWidth,
......
src/container/MasterData/UnitBisnis.js
View file @ 45916933
...@@ -430,8 +430,8 @@ export default class UnitBisnis extends Component { ...@@ -430,8 +430,8 @@ export default class UnitBisnis extends Component {
</Alert> </Alert>
</Snackbar> </Snackbar>
{this.state.visibleUnitBisnis === true ? {this.state.visibleUnitBisnis === true ?
<div> this.state.load && (
{this.state.load && ( <div>
<div style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between', paddingRight: 25, paddingLeft: 25, marginTop: -118 }}> <div style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between', paddingRight: 25, paddingLeft: 25, marginTop: -118 }}>
<label style={{ color: 'white', fontSize: 16, alignSelf: 'center', width: '20%', }}>Master Data - Business Unit</label> <label style={{ color: 'white', fontSize: 16, alignSelf: 'center', width: '20%', }}>Master Data - Business Unit</label>
<div style={{ color: 'white', width: '50%', height: 37, display: 'flex', backgroundColor: 'white', borderWidth: 2, alignItems: 'center', borderRadius: 6, paddingLeft: 5, paddingRight: 5, alignSelf: 'center' }}> <div style={{ color: 'white', width: '50%', height: 37, display: 'flex', backgroundColor: 'white', borderWidth: 2, alignItems: 'center', borderRadius: 6, paddingLeft: 5, paddingRight: 5, alignSelf: 'center' }}>
...@@ -508,19 +508,18 @@ export default class UnitBisnis extends Component { ...@@ -508,19 +508,18 @@ export default class UnitBisnis extends Component {
<ReactTooltip border={true} id="create" place="bottom" type="light" effect="solid" /> <ReactTooltip border={true} id="create" place="bottom" type="light" effect="solid" />
</div> </div>
</div> </div>
)} <div style={{ padding: 25 }}>
<div style={{ padding: 25 }}> <MuiThemeProvider theme={getMuiTheme()}>
<MuiThemeProvider theme={getMuiTheme()}> <MUIDataTable
<MUIDataTable theme={getMuiTheme()}
theme={getMuiTheme()} data={this.state.dataTable}
data={this.state.dataTable} columns={columns}
columns={columns} options={options}
options={options} />
/> </MuiThemeProvider>
</MuiThemeProvider> </div>
</div> </div>
</div> )
: :
<div> <div>
<div style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between', paddingRight: 25, paddingLeft: 25, marginTop: -150 }}> <div style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between', paddingRight: 25, paddingLeft: 25, marginTop: -150 }}>
......
src/container/ResetPassword.js
View file @ 45916933
...@@ -11,192 +11,195 @@ const Alert = withStyles({ ...@@ -11,192 +11,195 @@ const Alert = withStyles({
})((props) => <MuiAlert elevation={6} variant="filled" {...props} />); })((props) => <MuiAlert elevation={6} variant="filled" {...props} />);
class ResetPassword extends Component { class ResetPassword extends Component {
constructor(props) { constructor(props) {
super(props) super(props)
this.state = { this.state = {
password: '', password: '',
confirmPassword: '', confirmPassword: '',
showPass: false, showPass: false,
showPass2: false, showPass2: false,
errorPassword: false, errorPassword: false,
errorConfirmPassword: false, errorConfirmPassword: false,
msgPassword: 'Consists of 8 characters with a combination of numbers.', msgPassword: 'Consists of 8 characters with a combination of numbers.',
msgConfirmPassword: 'Consists of 8 characters with a combination of numbers.', msgConfirmPassword: 'Consists of 8 characters with a combination of numbers.',
userId: 0, userId: 0,
alert: false, alert: false,
tipeAlert: '', tipeAlert: '',
messageAlert: '' messageAlert: ''
}
} }
}
componentDidMount() { componentDidMount() {
console.log(this.props.match.params.id) console.log(this.props.match.params.id)
let userId = this.props.match.params.id let userId = this.props.match.params.id
this.setState({userId}) this.setState({ userId })
this.checkExpiredLink(userId) this.checkExpiredLink(userId)
// console.log(this.props) // console.log(this.props)
} }
checkExpiredLink(userId) { checkExpiredLink(userId) {
api.create().isResetPassword(userId).then((response) => { api.create().isResetPassword(userId).then((response) => {
if (response.data) { if (response.data) {
if (response.data.status == 'success') { if (response.data.status == 'success') {
// //
} else { } else {
this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'warning' }) this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'warning' })
this.props.history.push('/login') this.props.history.push('/login')
} }
} else { } else {
this.setState({ alert: true, messageAlert: response.problem, tipeAlert: 'error' }) this.setState({ alert: true, messageAlert: response.problem, tipeAlert: 'error' })
} }
}) })
} }
isRegex(value) { isRegex(value) {
// const re = /^(?=.*[0-9])(?=.*[a-zA-Z])([a-zA-Z0-9]+)$/; // const re = /^(?=.*[0-9])(?=.*[a-zA-Z])([a-zA-Z0-9]+)$/;
const re = /^(?=.*[A-Za-z])(?=.*\d)(?=.*[@$!%*#?&])[A-Za-z\d@$!%*#?&]{1,}$/; const re = /^(?=.*[A-Za-z])(?=.*\d)(?=.*[@$!%*#?&])[A-Za-z\d@$!%*#?&]{1,}$/;
return re.test(String(value)); return re.test(String(value));
} }
isEmail(email) {
const re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
return re.test(String(email).toLowerCase());
}
isEmail(email) { validateReset() {
const re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/; if (this.state.password.trim() == "") {
return re.test(String(email).toLowerCase()); this.setState({ errorPassword: true, msgPassword: 'Password is required' })
} else if (this.state.password.length < 8) {
this.setState({ errorPassword: true, msgPassword: 'Password minimum 8 characters.' })
} else if (this.isEmail(this.state.password)) {
this.setState({ errorPassword: true, msgPassword: 'Password format should not use email.' })
} else if (!this.isRegex(this.state.password)) {
this.setState({ errorPassword: true, msgPassword: 'Password must be a combination of characters, letters and numbers.' })
} else if (this.state.confirmPassword.trim() == "") {
this.setState({ errorConfirmPassword: true, msgConfirmPassword: 'Confirm password is required.' })
} else if (this.state.confirmPassword.length < 8) {
this.setState({ errorConfirmPassword: true, msgConfirmPassword: 'Confirm password minimum 8 characters.' })
} else if (this.isEmail(this.state.confirmPassword)) {
this.setState({ errorConfirmPassword: true, msgConfirmPassword: 'Password confirmation format should not use email.' })
} else if (!this.isRegex(this.state.confirmPassword)) {
this.setState({ errorConfirmPassword: true, msgConfirmPassword: 'Password confirmation must be a combination of characters, letters and numbers.' })
} else if (this.state.password !== this.state.confirmPassword) {
this.setState({ errorConfirmPassword: true, msgConfirmPassword: 'Confirmation password must match the password.' })
} else {
this.confirmPassword()
} }
}
validateReset() { confirmPassword() {
if (this.state.password.trim() == "") { let payload = {
this.setState({ errorPassword: true, msgPassword: 'Password is required' }) "password": this.state.password,
} else if (this.state.password.length < 8) { "confirm_password": this.state.confirmPassword,
this.setState({ errorPassword: true, msgPassword: 'Password minimum 8 characters.' }) "user_id": this.state.userId
} else if (this.isEmail(this.state.password)) { }
this.setState({ errorPassword: true, msgPassword: 'Password format should not use email.' }) api.create().resetPassword(payload).then((response) => {
} else if (!this.isRegex(this.state.password)) { if (response.data) {
this.setState({ errorPassword: true, msgPassword: 'Password must be a combination of characters, letters and numbers.' }) if (response.ok) {
} else if (this.state.confirmPassword.trim() == "") { if (response.data.status === 'success') {
this.setState({ errorConfirmPassword: true, msgConfirmPassword: 'Confirm password is required.' }) this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'success' }, () => {
} else if (this.state.confirmPassword.length < 8) { setTimeout(() => {
this.setState({ errorConfirmPassword: true, msgConfirmPassword: 'Confirm password minimum 8 characters.' }) this.props.history.push('/login')
} else if (this.isEmail(this.state.confirmPassword)) { }, 1000);
this.setState({ errorConfirmPassword: true, msgConfirmPassword: 'Password confirmation format should not use email.' }) })
} else if (!this.isRegex(this.state.confirmPassword)) { } else {
this.setState({ errorConfirmPassword: true, msgConfirmPassword: 'Password confirmation must be a combination of characters, letters and numbers.' }) this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'warning' })
} else if (this.state.password !== this.state.confirmPassword) { }
this.setState({ errorConfirmPassword: true, msgConfirmPassword: 'Confirmation password must match the password.' })
} else { } else {
this.confirmPassword() this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'error' })
} }
} } else {
this.setState({ alert: true, messageAlert: response.problem, tipeAlert: 'error' })
confirmPassword() {
let payload = {
"password": this.state.password,
"confirm_password": this.state.confirmPassword,
"user_id": this.state.userId
} }
api.create().resetPassword(payload).then((response) => { })
if (response.data) { }
if (response.ok) {
if(response.data.status === 'success') {
this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'success' })
this.props.history.push('/login')
} else {
this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'warning' })
}
} else {
this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'error' })
}
} else {
this.setState({ alert: true, messageAlert: response.problem, tipeAlert: 'error' })
}
})
}
closeAlert() { closeAlert() {
this.setState({ alert: false }) this.setState({ alert: false })
} }
handleChange(e) { handleChange(e) {
let data = this.state let data = this.state
this.setState({...data, [e.target.name] : e.target.value}) this.setState({ ...data, [e.target.name]: e.target.value })
if (e.target.name == "password") { if (e.target.name == "password") {
this.setState({ errorPassword: false, msgPassword: 'Password consists of 8 characters with a combination of numbers.' }) this.setState({ errorPassword: false, msgPassword: 'Password consists of 8 characters with a combination of numbers.' })
} else if (e.target.name == "confirmPassword") { } else if (e.target.name == "confirmPassword") {
this.setState({ errorConfirmPassword: false, msgConfirmPassword: 'Confirm Password consists of 8 characters with a combination of numbers.' }) this.setState({ errorConfirmPassword: false, msgConfirmPassword: 'Confirm Password consists of 8 characters with a combination of numbers.' })
}
} }
}
render() { render() {
return ( return (
<div style={{ flex: 1, display: 'flex', backgroundColor: '#152d40', height: '100vh', justifyContent: 'center', alignItems: 'center' }}> <div style={{ flex: 1, display: 'flex', backgroundColor: '#152d40', height: '100vh', justifyContent: 'center', alignItems: 'center' }}>
<Snackbar open={this.state.alert} autoHideDuration={6000} onClose={() => this.closeAlert()}> <Snackbar open={this.state.alert} autoHideDuration={6000} onClose={() => this.closeAlert()}>
<Alert onClose={() => this.closeAlert()} severity={this.state.tipeAlert}> <Alert onClose={() => this.closeAlert()} severity={this.state.tipeAlert}>
{this.state.messageAlert} {this.state.messageAlert}
</Alert> </Alert>
</Snackbar> </Snackbar>
<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' }}> <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}/> <img src={Images.tia} />
<TextField <TextField
label={<Typography style={{fontSize: 12, fontFamily: 'Nunito Sans, sans-serif'}}>New password *</Typography>} label={<Typography style={{ fontSize: 12, fontFamily: 'Nunito Sans, sans-serif' }}>New password *</Typography>}
id="password" id="password"
type={this.state.showPass ? 'text' : 'password'} type={this.state.showPass ? 'text' : 'password'}
name={"password"} name={"password"}
value={this.state.password} value={this.state.password}
onChange={(password) => { onChange={(password) => {
this.handleChange(password) this.handleChange(password)
}} }}
variant="outlined" variant="outlined"
error={this.state.errorPassword} error={this.state.errorPassword}
style={{ width: 250, height: 51, marginTop: 32 }} style={{ width: 250, height: 51, marginTop: 32 }}
helperText={<Typography style={{fontSize: 9, marginTop: 4, fontFamily: 'Nunito Sans, sans-serif'}}>{this.state.msgPassword}</Typography>} helperText={<Typography style={{ fontSize: 9, marginTop: 4, fontFamily: 'Nunito Sans, sans-serif' }}>{this.state.msgPassword}</Typography>}
InputProps={{ InputProps={{
endAdornment: <InputAdornment position="end"> endAdornment: <InputAdornment position="end">
<IconButton <IconButton
aria-label="toggle password visibility" aria-label="toggle password visibility"
style={{color: '#4b4b4b', opacity: 0.5}} style={{ color: '#4b4b4b', opacity: 0.5 }}
onClick={() => this.setState({showPass: !this.state.showPass})} onClick={() => this.setState({ showPass: !this.state.showPass })}
edge="end" edge="end"
> >
{this.state.showPass ? <Visibility style={{fontSize: 18}} /> : <VisibilityOff style={{fontSize: 18}} />} {this.state.showPass ? <Visibility style={{ fontSize: 18 }} /> : <VisibilityOff style={{ fontSize: 18 }} />}
</IconButton> </IconButton>
</InputAdornment>, </InputAdornment>,
}} }}
/> />
<TextField <TextField
label={<Typography style={{fontSize: 12, fontFamily: 'Nunito Sans, sans-serif'}}>Repeat New Password *</Typography>} label={<Typography style={{ fontSize: 12, fontFamily: 'Nunito Sans, sans-serif' }}>Repeat New Password *</Typography>}
id="confirmPassword" id="confirmPassword"
type={this.state.showPass2 ? 'text' : 'password'} type={this.state.showPass2 ? 'text' : 'password'}
name={"confirmPassword"} name={"confirmPassword"}
value={this.state.confirmPassword} value={this.state.confirmPassword}
onChange={(confirmPassword) => { onChange={(confirmPassword) => {
this.handleChange(confirmPassword) this.handleChange(confirmPassword)
}} }}
variant="outlined" variant="outlined"
error={this.state.errorConfirmPassword} error={this.state.errorConfirmPassword}
style={{ width: 250, height: 51, marginTop: 45 }} style={{ width: 250, height: 51, marginTop: 45 }}
helperText={<Typography style={{fontSize: 9, marginTop: 4, fontFamily: 'Nunito Sans, sans-serif'}}>{this.state.msgConfirmPassword}</Typography>} helperText={<Typography style={{ fontSize: 9, marginTop: 4, fontFamily: 'Nunito Sans, sans-serif' }}>{this.state.msgConfirmPassword}</Typography>}
InputProps={{ InputProps={{
endAdornment: <InputAdornment position="end"> endAdornment: <InputAdornment position="end">
<IconButton <IconButton
aria-label="toggle password visibility" aria-label="toggle password visibility"
style={{color: '#4b4b4b', opacity: 0.5}} style={{ color: '#4b4b4b', opacity: 0.5 }}
onClick={() => this.setState({showPass2: !this.state.showPass2})} onClick={() => this.setState({ showPass2: !this.state.showPass2 })}
edge="end" edge="end"
> >
{this.state.showPass2 ? <Visibility style={{fontSize: 18}} /> : <VisibilityOff style={{fontSize: 18}} />} {this.state.showPass2 ? <Visibility style={{ fontSize: 18 }} /> : <VisibilityOff style={{ fontSize: 18 }} />}
</IconButton> </IconButton>
</InputAdornment>, </InputAdornment>,
}} }}
/> />
<Button name="submit" variant="contained" disabled={this.state.password.trim() == '' && this.state.confirmPassword.trim() == '' ? true : false} onClick={() => this.validateReset()} style={{ marginTop: 50, width: '100%', height: 35, borderRadius: 4, color: this.state.password.trim() == '' && this.state.confirmPassword.trim() == '' ? '#4b4b4b' : '#fff', backgroundColor: this.state.password.trim() == '' && this.state.confirmPassword.trim() == '' ? '#d8d8d8' : '#51c6ea' }}> <Button name="submit" variant="contained" disabled={this.state.password.trim() == '' && this.state.confirmPassword.trim() == '' ? true : false} onClick={() => this.validateReset()} style={{ marginTop: 50, width: '100%', height: 35, borderRadius: 4, color: this.state.password.trim() == '' && this.state.confirmPassword.trim() == '' ? '#4b4b4b' : '#fff', backgroundColor: this.state.password.trim() == '' && this.state.confirmPassword.trim() == '' ? '#d8d8d8' : '#51c6ea' }}>
<Typography style={{fontSize: 12, fontFamily: 'Nunito Sans, sans-serif'}}>Reset Password</Typography> <Typography style={{ fontSize: 12, fontFamily: 'Nunito Sans, sans-serif' }}>Reset Password</Typography>
</Button> </Button>
</div> </div>
</div> </div>
); );
} }
} }
export default ResetPassword; export default ResetPassword;
\ No newline at end of file
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