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

Write Preview
Loading…
Cancel
Save