Skip to content

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

maintenance login

parent 661acec7
Hide whitespace changes
Inline Side-by-side
Showing with 120 additions and 104 deletions
src/container/Auth/Login.js
View file @ a785d23c
......@@ -38,7 +38,10 @@ class Login extends Component {
tipeAlert: '',
messageAlert: '',
width: 0,
height: 0
height: 0,
maintenanceHeadline: "",
maintenanceContent: "",
maintenanceStatus: null,
}
}
......@@ -53,7 +56,7 @@ class Login extends Component {
this.setState({
width,
height
})
})
}
handleChange(e) {
......@@ -96,32 +99,38 @@ class Login extends Component {
api.create().login(payload).then((response) => {
if (response.data) {
if (response.ok) {
if (response.data.status === 'success') {
// console.log(response.data.data)
if (response.data.data.role_id === 185 && response.data.maintenance_mode === 'ACTIVE'){
this.props.history.push('/maintenance')
} else {
localStorage.setItem(Constant.TOKEN, response.data.data.token)
localStorage.setItem(Constant.USER, response.data.data.user_id)
if (this.state.rememberMe) {
localStorage.setItem(Constant.EMAIL, this.state.email)
localStorage.setItem(Constant.PASSWORD, this.state.password)
// console.log(this.state.email, this.state.password)
} else {
localStorage.setItem(Constant.EMAIL, '')
localStorage.setItem(Constant.PASSWORD, '')
}
this.props.history.push('/home/beranda')
}
if (response.data.status === 'success') {
// console.log(response.data.data)
let datas = response.data.data
if (datas.maintenance_status === 1) {
this.setState({
maintenanceHeadline: datas.maintenance_headline,
maintenanceContent: datas.maintenance_content,
maintenanceStatus: datas.maintenance_status
})
} else {
localStorage.setItem(Constant.TOKEN, datas.token)
localStorage.setItem(Constant.USER, datas.user_id)
if (this.state.rememberMe) {
localStorage.setItem(Constant.EMAIL, this.state.email)
localStorage.setItem(Constant.PASSWORD, this.state.password)
// console.log(this.state.email, this.state.password)
} 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 })
}
localStorage.setItem(Constant.EMAIL, '')
localStorage.setItem(Constant.PASSWORD, '')
}
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 {
this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'error' })
this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'error' })
}
} else {
this.setState({ alert: true, messageAlert: response.problem, tipeAlert: 'error' })
......@@ -144,92 +153,99 @@ class Login extends Component {
return (
<div style={{ flex: 1, display: 'flex' }}>
<Snackbar open={this.state.alert} autoHideDuration={6000} onClose={() => this.closeAlert()}>
<Alert onClose={() => this.closeAlert()} severity={this.state.tipeAlert}>
{this.state.messageAlert}
</Alert>
<Alert onClose={() => this.closeAlert()} severity={this.state.tipeAlert}>
{this.state.messageAlert}
</Alert>
</Snackbar>
<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 }} /> */}
</div>
<div style={{ width: '50%', height: '100vh', backgroundColor: '#263b80', display: 'flex', justifyContent: 'center', alignItems: 'center', flexDirection: 'column' }}>
<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>
{this.state.maintenanceStatus === 1 ?
<div>
<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>
</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 >
);
......
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