Skip to content

T
Tia-dev
Commit af356595 authored by Riri Novita's avatar Riri Novita
Browse files
Options

Merge branch 'dev/riri' into 'ENV-DEV' 

maintenance login

See merge request !1667
parents 21ba5a14 e253eae9
Hide whitespace changes
Inline Side-by-side
Showing with 120 additions and 104 deletions
src/container/Auth/Login.js
View file @ af356595
...@@ -38,7 +38,10 @@ class Login extends Component { ...@@ -38,7 +38,10 @@ class Login extends Component {
tipeAlert: '', tipeAlert: '',
messageAlert: '', messageAlert: '',
width: 0, width: 0,
height: 0 height: 0,
maintenanceHeadline: "",
maintenanceContent: "",
maintenanceStatus: null,
} }
} }
...@@ -53,7 +56,7 @@ class Login extends Component { ...@@ -53,7 +56,7 @@ class Login extends Component {
this.setState({ this.setState({
width, width,
height height
}) })
} }
handleChange(e) { handleChange(e) {
...@@ -96,32 +99,38 @@ class Login extends Component { ...@@ -96,32 +99,38 @@ class Login extends Component {
api.create().login(payload).then((response) => { api.create().login(payload).then((response) => {
if (response.data) { if (response.data) {
if (response.ok) { if (response.ok) {
if (response.data.status === 'success') { if (response.data.status === 'success') {
// console.log(response.data.data) // console.log(response.data.data)
if (response.data.data.role_id === 185 && response.data.maintenance_mode === 'ACTIVE'){ let datas = response.data.data
this.props.history.push('/maintenance') if (datas.maintenance_status === 1) {
} else { this.setState({
localStorage.setItem(Constant.TOKEN, response.data.data.token) maintenanceHeadline: datas.maintenance_headline,
localStorage.setItem(Constant.USER, response.data.data.user_id) maintenanceContent: datas.maintenance_content,
if (this.state.rememberMe) { maintenanceStatus: datas.maintenance_status
localStorage.setItem(Constant.EMAIL, this.state.email) })
localStorage.setItem(Constant.PASSWORD, this.state.password) } else {
// console.log(this.state.email, this.state.password) localStorage.setItem(Constant.TOKEN, datas.token)
} else { localStorage.setItem(Constant.USER, datas.user_id)
localStorage.setItem(Constant.EMAIL, '') if (this.state.rememberMe) {
localStorage.setItem(Constant.PASSWORD, '') localStorage.setItem(Constant.EMAIL, this.state.email)
} localStorage.setItem(Constant.PASSWORD, this.state.password)
this.props.history.push('/home/beranda') // console.log(this.state.email, this.state.password)
}
} else { } else {
if (response.data.message == 'Password is Not Correct') { localStorage.setItem(Constant.EMAIL, '')
this.setState({ errorPassword: true, msgPassword: 'Incorrect Password' }) localStorage.setItem(Constant.PASSWORD, '')
} else {
this.setState({ errorEmail: true, msgEmail: response.data.message })
}
} }
this.props.history.push('/home/beranda')
}
} else {
if (response.data.message == 'Password is Not Correct') {
this.setState({ errorPassword: true, msgPassword: 'Incorrect Password' })
} else {
this.setState({ errorEmail: true, msgEmail: response.data.message })
}
}
} else { } else {
this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'error' }) this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'error' })
} }
} else { } else {
this.setState({ alert: true, messageAlert: response.problem, tipeAlert: 'error' }) this.setState({ alert: true, messageAlert: response.problem, tipeAlert: 'error' })
...@@ -144,92 +153,99 @@ class Login extends Component { ...@@ -144,92 +153,99 @@ class Login extends Component {
return ( return (
<div style={{ flex: 1, display: 'flex' }}> <div style={{ flex: 1, display: 'flex' }}>
<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={{ width: '50%', display: 'grid' }}> <div style={{ width: '50%', display: 'grid' }}>
<img src={Images.meeting} style={{ objectFit: 'fill', width: '100%', height: '100%' }}/> <img src={Images.meeting} style={{ objectFit: 'fill', width: '100%', height: '100%' }} />
{/* <img src={Images.imageLogin} style={{ marginTop: 30 }} /> */} {/* <img src={Images.imageLogin} style={{ marginTop: 30 }} /> */}
</div> </div>
<div style={{ width: '50%', height: '100vh', backgroundColor: '#263b80', display: 'flex', justifyContent: 'center', alignItems: 'center', flexDirection: 'column' }}> <div style={{ width: '50%', height: '100vh', backgroundColor: '#263b80', display: 'flex', justifyContent: 'center', alignItems: 'center', flexDirection: 'column' }}>
<form onSubmit={(e) => { {this.state.maintenanceStatus === 1 ?
e.preventDefault() <div>
this.validateLogin() <Typography style={{ color: '#fff', fontSize: 20, margin: '10px 40px'}}>{this.state.maintenanceHeadline}</Typography>
}} <Typography style={{ color: '#fff', fontSize: 20, margin: 40}}>{this.state.maintenanceContent}</Typography>
>
<div style={{ maxWidth: 397, paddingTop: 56, padding: 65, display: 'flex', flexDirection: 'column', height: (this.state.msgEmail.length > 45 ? 485 : 441), borderRadius: 12, boxShadow: '0 2 4 0 rgba(0, 0, 0, 0.2)', backgroundColor: '#ffffff' }}>
<img src={Images.triputraBlack} style={{ height: 59, width: 175, alignSelf: 'center'}} />
<TextField
label={<Typography style={{ fontSize: 12, fontFamily: 'Nunito Sans, sans-serif' }}>Email *</Typography>}
id="email"
type={"text"}
name={"email"}
value={this.state.email}
onChange={(email) => {
this.handleChange(email)
}}
variant="outlined"
error={this.state.errorEmail}
style={{ width: '100%', height: 51, marginTop: 32, fontSize: 14 }}
helperText={this.state.msgEmail}
InputProps={{
endAdornment: <InputAdornment position="end"><img src={Images.email} /></InputAdornment>,
}}
/>
<TextField
label={<Typography style={{ fontSize: 12, fontFamily: 'Nunito Sans, sans-serif' }}>Password *</Typography>}
id="password"
type={this.state.showPass ? 'text' : 'password'}
name={"password"}
value={this.state.password}
onChange={(password) => {
this.handleChange(password)
}}
variant="outlined"
error={this.state.errorPassword}
style={{ width: '100%', height: 51, marginTop: this.state.errorEmail ? (this.state.msgEmail.length > 45 ? 80 : 35) : 20 }}
helperText={this.state.msgPassword}
onSubmit={() => this.validateLogin()}
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>,
}}
/>
<div style={{ flexDirection: 'row', width: '100%', marginTop: this.state.errorPassword ? 26 : 16 }}>
<CustomCheckbox name="checked-remember" checked={this.state.rememberMe} onChange={() => this.setState({ rememberMe: !this.state.rememberMe })} />
<span style={{ color: 'rgba(0, 0, 0, 0.5)', fontSize: 12, fontFamily: 'Nunito Sans, sans-serif' }}>Remember Me</span>
<Link to={{ pathname: '/forgot-password' }} style={{ textDecoration: 'none' }}><span style={{ marginLeft: 30, color: '#51c6ea', cursor: 'pointer', fontSize: 12, fontFamily: 'Nunito Sans, sans-serif' }}>Forgot Password?</span></Link>
</div>
<button
type="submit"
style={{
backgroundColor: 'transparent',
cursor: 'pointer',
borderColor: 'transparent',
outline: 'none'
}}
disabled={this.state.email.trim() == '' && this.state.password.trim() == '' ? true : false}
// onClick={() => this.validateLogin()}
>
<Button name="submit" variant="contained" disabled={this.state.email.trim() == '' && this.state.password.trim() == '' ? true : false} style={{ marginTop: 23, width: '100%', height: 35, borderRadius: 4, color: this.state.email.trim() == '' && this.state.password.trim() == '' ? '#4b4b4b' : '#fff', backgroundColor: this.state.email.trim() == '' && this.state.password.trim() == '' ? '#d8d8d8' : '#51c6ea' }}>
<Typography style={{ fontSize: 12, fontFamily: 'Nunito Sans, sans-serif' }}>Login</Typography>
</Button>
</button>
</div> </div>
</form> :
<form onSubmit={(e) => {
e.preventDefault()
this.validateLogin()
}}
>
<div style={{ maxWidth: 397, paddingTop: 56, padding: 65, display: 'flex', flexDirection: 'column', height: (this.state.msgEmail.length > 45 ? 485 : 441), borderRadius: 12, boxShadow: '0 2 4 0 rgba(0, 0, 0, 0.2)', backgroundColor: '#ffffff' }}>
<img src={Images.triputraBlack} style={{ height: 59, width: 175, alignSelf: 'center' }} />
<TextField
label={<Typography style={{ fontSize: 12, fontFamily: 'Nunito Sans, sans-serif' }}>Email *</Typography>}
id="email"
type={"text"}
name={"email"}
value={this.state.email}
onChange={(email) => {
this.handleChange(email)
}}
variant="outlined"
error={this.state.errorEmail}
style={{ width: '100%', height: 51, marginTop: 32, fontSize: 14 }}
helperText={this.state.msgEmail}
InputProps={{
endAdornment: <InputAdornment position="end"><img src={Images.email} /></InputAdornment>,
}}
/>
<TextField
label={<Typography style={{ fontSize: 12, fontFamily: 'Nunito Sans, sans-serif' }}>Password *</Typography>}
id="password"
type={this.state.showPass ? 'text' : 'password'}
name={"password"}
value={this.state.password}
onChange={(password) => {
this.handleChange(password)
}}
variant="outlined"
error={this.state.errorPassword}
style={{ width: '100%', height: 51, marginTop: this.state.errorEmail ? (this.state.msgEmail.length > 45 ? 80 : 35) : 20 }}
helperText={this.state.msgPassword}
onSubmit={() => this.validateLogin()}
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>,
}}
/>
<div style={{ flexDirection: 'row', width: '100%', marginTop: this.state.errorPassword ? 26 : 16 }}>
<CustomCheckbox name="checked-remember" checked={this.state.rememberMe} onChange={() => this.setState({ rememberMe: !this.state.rememberMe })} />
<span style={{ color: 'rgba(0, 0, 0, 0.5)', fontSize: 12, fontFamily: 'Nunito Sans, sans-serif' }}>Remember Me</span>
<Link to={{ pathname: '/forgot-password' }} style={{ textDecoration: 'none' }}><span style={{ marginLeft: 30, color: '#51c6ea', cursor: 'pointer', fontSize: 12, fontFamily: 'Nunito Sans, sans-serif' }}>Forgot Password?</span></Link>
</div>
<button
type="submit"
style={{
backgroundColor: 'transparent',
cursor: 'pointer',
borderColor: 'transparent',
outline: 'none'
}}
disabled={this.state.email.trim() == '' && this.state.password.trim() == '' ? true : false}
// onClick={() => this.validateLogin()}
>
<Button name="submit" variant="contained" disabled={this.state.email.trim() == '' && this.state.password.trim() == '' ? true : false} style={{ marginTop: 23, width: '100%', height: 35, borderRadius: 4, color: this.state.email.trim() == '' && this.state.password.trim() == '' ? '#4b4b4b' : '#fff', backgroundColor: this.state.email.trim() == '' && this.state.password.trim() == '' ? '#d8d8d8' : '#51c6ea' }}>
<Typography style={{ fontSize: 12, fontFamily: 'Nunito Sans, sans-serif' }}>Login</Typography>
</Button>
</button>
</div>
</form>
}
</div> </div>
</div > </div >
); );
......
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