ordo
/
surveyor_indonesia_frontend
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

implement remember me

pull/2/head
Muhammad Sulaiman Yusuf 2 years ago
parent
dc4368502f
commit
3443101b76
1 changed files with 293 additions and 401 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 152
      src/views/Pages/Login/Login.js

152
src/views/Pages/Login/Login.js
Unescape View File

@ -4,6 +4,7 @@ import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";
import Slider from "react-slick";
import { Spin } from 'antd';
import { Checkbox } from 'antd';
import { LoadingOutlined } from '@ant-design/icons';
import {
Button,
@ -56,9 +57,10 @@ class Login extends Component {
this.state = {
name: '',
password: '',
remember: '',
alertVisible: false,
alertMessage: '',
alertColor: 'success', // bootstrap color (success, danger, info, warning)
alertColor: 'success',
validate: {
emailState: '',
},
@ -78,8 +80,6 @@ class Login extends Component {
this.setState({ validate })
}
handleChange = async (event) => {
const { target } = event;
const value = target.type === 'checkbox' ? target.checked : target.value;
@ -87,7 +87,6 @@ class Login extends Component {
await this.setState({
[name]: value,
});
}
getDataMenu = async (token, role_id) => {
@ -105,10 +104,8 @@ class Login extends Component {
.then(res => res)
.catch((error) => error.response);
if (result && result.data && result.data.code == 200) {
let resData = result.data.data
window.localStorage.setItem('menu_login', JSON.stringify(resData));
this.setState({ loader: false })
this.props.history.push("/dashboard");
@ -118,7 +115,6 @@ class Login extends Component {
}
}
submitForm = (event) => {
event.preventDefault();
this.submitFormLogin();
@ -126,7 +122,7 @@ class Login extends Component {
submitFormLogin = async () => {
this.setState({ loader: true })
const { name, password } = this.state
const { name, password, remember } = this.state
if (name === '') {
NotificationManager.error('Please fill username', 'Login Failed!');
@ -143,16 +139,15 @@ class Login extends Component {
let formData = {
username: name,
password,
remember,
}
const doLogin = await axios.post(USER_LOGIN_V2, formData)
.then(response => response)
.catch(error => {
console.log('test error', error)
this.setState({loader: false});
});
console.log('doLogin', doLogin);
if (doLogin && doLogin.data && doLogin.data.code === 200) {
const { access_token, data_user } = doLogin.data.data
this.getDataMenu(access_token, data_user.role_id)
@ -161,26 +156,13 @@ class Login extends Component {
window.localStorage.setItem('user_id', data_user.id);
window.localStorage.setItem('user_name', data_user.name);
window.localStorage.setItem('role_id', data_user.role_id);
} else {
NotificationManager.error('Cek username atau password anda!', 'Gagal Login!');
this.setState({loader: false});
}
}
getConfigAlert = async (token, user_id) => {
const config = {
headers:
@ -204,8 +186,6 @@ class Login extends Component {
.then(res => res)
.catch((error) => error.response);
if (result && result.data && result.data.code == 200) {
let resData = result.data.data
let configAlert = []
@ -224,85 +204,37 @@ class Login extends Component {
});
}
getLoginLogo = () => {
let img = null;
switch (APP_MODE) {
case 'KIT':
img = <div style={{textAlign: 'center'}}><img style={{width:'100%'}} src={logo_login_kit}/></div>
break;
case 'ADW':
img = <div style={{textAlign: 'center'}}><img style={{width:'100%'}} src={logo_login_adw}/></div>
break;
case 'NAWAKARA':
img = <div style={{textAlign: 'center'}}><img style={{width:150, height: 150}} src={logo_login_nawakara}/></div>
break;
case 'IU':
img = <div style={{textAlign: 'center'}}><img style={{width:'100%'}} src={logo_login_si}/></div>
break;
default:
img = null
}
return img;
return <div style={{textAlign: 'center'}}><img style={{width:'100%'}} src={logo_login_adw}/></div>
}
getLoginSlider = () => {
let slider = <Slider {...settings} >
return <Slider {...settings} >
<div>
<img src={require('../../../assets/img/login/carousel1.jpeg')} className="img-avatar" alt="admin@bootstrapmaster.com" />
<img src={require('../../../assets/img/login/slide1.jpg')} className="img-avatar" />
</div>
<div>
<img src={require('../../../assets/img/login/carousel2.jpeg')} className="img-avatar" alt="admin@bootstrapmaster.com" />
<img src={require('../../../assets/img/login/slide2.jpg')} className="img-avatar" />
</div>
<div>
<img src={require('../../../assets/img/login/carousel3.jpeg')} className="img-avatar" alt="admin@bootstrapmaster.com" />
<img src={require('../../../assets/img/login/slide3.jpg')} className="img-avatar" />
</div>
</Slider>
switch (APP_MODE) {
case 'KIT':
break;
case 'IU':
break;
case 'ADW':
slider = <Slider {...settings} >
<div>
<img src={require('../../../assets/img/login/slide1.jpg')} className="img-avatar" alt="admin@bootstrapmaster.com" />
</div>
<div>
<img src={require('../../../assets/img/login/slide2.jpg')} className="img-avatar" alt="admin@bootstrapmaster.com" />
</div>
<div>
<img src={require('../../../assets/img/login/slide3.jpg')} className="img-avatar" alt="admin@bootstrapmaster.com" />
</div>
<div>
<img src={require('../../../assets/img/login/slide4.jpg')} className="img-avatar" alt="admin@bootstrapmaster.com" />
<img src={require('../../../assets/img/login/slide4.jpg')} className="img-avatar" />
</div>
</Slider>
break;
case 'NAWAKARA':
break;
}
return slider;
}
onChecked = (e) => {
this.setState({remember:e.target.checked})
};
render() {
const { name, password } = this.state;
const { name, password, remember } = this.state;
const u_group = window.localStorage.getItem('u_group')
if (u_group !== null) {
if (u_group === 'kominfo') {
this.props.history.push("/dashboard-kominfo");
}
else {
this.props.history.push("/dashboard");
}
}
return (
<div className="app flex-row align-items-center">
<Container>
@ -313,31 +245,6 @@ class Login extends Component {
</Alert>
<Row className="justify-content-center">
<Col md="7">
{/* <Slider {...settings}> */}
{/* <div>
<img src={require('../../../assets/img/login/slide1.jpg')} className="img-avatar" alt="admin@bootstrapmaster.com" />
</div>
<div>
<img src={require('../../../assets/img/login/slide2.jpg')} className="img-avatar" alt="admin@bootstrapmaster.com" />
</div>
<div>
<img src={require('../../../assets/img/login/slide3.jpg')} className="img-avatar" alt="admin@bootstrapmaster.com" />
</div>
<div>
<img src={require('../../../assets/img/login/slide4.jpg')} className="img-avatar" alt="admin@bootstrapmaster.com" />
</div> */}
{/* <div>
<img src={require('../../../assets/img/login/carousel1.jpeg')} className="img-avatar" alt="admin@bootstrapmaster.com" />
</div>
<div>
<img src={require('../../../assets/img/login/carousel2.jpeg')} className="img-avatar" alt="admin@bootstrapmaster.com" />
</div>
<div>
<img src={require('../../../assets/img/login/carousel3.jpeg')} className="img-avatar" alt="admin@bootstrapmaster.com" />
</div> */}
{/* </Slider> */}
{ this.getLoginSlider() }
</Col>
<Col md="5">
@ -348,12 +255,7 @@ class Login extends Component {
<Card className="p-4">
<CardBody>
<Form onSubmit={this.submitForm}>
{/* <h1><span style={{ color: '#4472C4' }}>OS</span><span style={{ color: '#ED7D31' }}>PRO</span></h1> */}
{/* <img style={{width:'100%'}} src={logo_login}/> */}
{ this.getLoginLogo() }
{/* <span style={{ color: '#000000', fontSize:'20px', fontWeight:'bold' }}>PROJECT MANAGEMENT</span> */}
<p className="text-muted">Sign In to your account</p>
<InputGroup className="mb-3">
<InputGroupAddon addonType="prepend">
@ -389,35 +291,25 @@ class Login extends Component {
/>
</InputGroup>
<Row>
<Col xs="6">
<Col xs="4">
{this.state.loader ? (
<Spin indicator={antIcon} />
) : (
<Button onClick={() => this.submitFormLogin()} color="primary" className="px-4" >Login</Button>
)}
</Col>
<Col xs="6" className="text-right">
<Col xs="8">
<Checkbox checked={this.state.remember} onChange={this.onChecked}>Remember me (7 days)</Checkbox>
</Col>
</Row>
<Row>
<Col className="text-right mt-5">
<Button color="link" className="px-0">Forgot password?</Button>
</Col>
</Row>
</Form>
</CardBody>
</Card>
{/* <Card className="text-white bg-primary py-5 d-md-down-none" style={{ width: '44%' }}>
<CardBody className="text-center">
<div>
<h2>Contact</h2>
<p>More information about {APP_NAME}.</p>
<br></br>
<br></br>
<br></br>
<Link to="#">
<Button color="primary" className="mt-3" active tabIndex={-1}>Contact!</Button>
</Link>
</div>
</CardBody>
</Card> */}
</CardGroup>
</div>
</Col>

Write Preview
Loading…
Cancel
Save