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. 694
      src/views/Pages/Login/Login.js

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

@ -4,27 +4,28 @@ 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,
Card, Card,
CardBody, CardBody,
CardGroup, CardGroup,
Col, Col,
Container, Container,
Form, Form,
Input, Input,
InputGroup, InputGroup,
InputGroupAddon, InputGroupAddon,
InputGroupText, InputGroupText,
Row, Row,
UncontrolledAlert, UncontrolledAlert,
Alert, Alert,
Carousel, Carousel,
CarouselIndicators, CarouselIndicators,
CarouselCaption, CarouselCaption,
CarouselItem, CarouselItem,
CarouselControl CarouselControl
} from 'reactstrap'; } from 'reactstrap';
import { USER_LOGIN, USER_LOGIN_V2, CALERTUSER_SEARCH, MENU_MANAGEMENT, APP_MODE } from '../../../const/ApiConst.js'; import { USER_LOGIN, USER_LOGIN_V2, CALERTUSER_SEARCH, MENU_MANAGEMENT, APP_MODE } from '../../../const/ApiConst.js';
import { appConfig, reloadConstants } from '../../../const/MapConst.js'; import { appConfig, reloadConstants } from '../../../const/MapConst.js';
@ -41,391 +42,282 @@ import logo_login_si from '../../../assets/img/logo-surveyor-indonesia.png'
const antIcon = <LoadingOutlined style={{ fontSize: 24 }} spin />; const antIcon = <LoadingOutlined style={{ fontSize: 24 }} spin />;
const settings = { const settings = {
dots: true, dots: true,
infinite: true, infinite: true,
speed: 500, speed: 500,
arrows: false, arrows: false,
autoplay: true, autoplay: true,
slidesToShow: 1, slidesToShow: 1,
slidesToScroll: 1 slidesToScroll: 1
}; };
class Login extends Component { class Login extends Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.state = { this.state = {
name: '', name: '',
password: '', password: '',
alertVisible: false, remember: '',
alertMessage: '', alertVisible: false,
alertColor: 'success', // bootstrap color (success, danger, info, warning) alertMessage: '',
validate: { alertColor: 'success',
emailState: '', validate: {
}, emailState: '',
loader: false },
} loader: false
this.handleChange = this.handleChange.bind(this); }
} this.handleChange = this.handleChange.bind(this);
}
validateEmail(e) {
const emailRex = /^(([^<>()[\]\\.,;:\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,}))$/; validateEmail(e) {
const { validate } = this.state const emailRex = /^(([^<>()[\]\\.,;:\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 (emailRex.test(e.target.value)) { const { validate } = this.state
validate.emailState = 'has-success' if (emailRex.test(e.target.value)) {
} else { validate.emailState = 'has-success'
validate.emailState = 'has-danger' } else {
} validate.emailState = 'has-danger'
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; const { name } = target;
const { name } = target; await this.setState({
await this.setState({ [name]: value,
[name]: value, });
}); }
} getDataMenu = async (token, role_id) => {
const config = {
getDataMenu = async (token, role_id) => { headers:
const config = { {
headers: Authorization: `Bearer ${token}`,
{ "Content-type": `application/json`
Authorization: `Bearer ${token}`, }
"Content-type": `application/json` };
}
}; let url = MENU_MANAGEMENT(role_id)
const result = await axios
let url = MENU_MANAGEMENT(role_id) .get(url, config)
const result = await axios .then(res => res)
.get(url, config) .catch((error) => error.response);
.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));
if (result && result.data && result.data.code == 200) { this.setState({ loader: false })
let resData = result.data.data this.props.history.push("/dashboard");
} else {
window.localStorage.setItem('menu_login', JSON.stringify(resData)); NotificationManager.error('Login Failed', 'Failed');
this.setState({ loader: false }) this.setState({ loader: false })
this.props.history.push("/dashboard"); }
} else { }
NotificationManager.error('Login Failed', 'Failed');
this.setState({ loader: false }) submitForm = (event) => {
} event.preventDefault();
} this.submitFormLogin();
}
submitForm = (event) => { submitFormLogin = async () => {
event.preventDefault(); this.setState({ loader: true })
this.submitFormLogin(); const { name, password, remember } = this.state
}
if (name === '') {
submitFormLogin = async () => { NotificationManager.error('Please fill username', 'Login Failed!');
this.setState({ loader: true }) this.setState({ loader: false })
const { name, password } = this.state return false;
}
if (name === '') {
NotificationManager.error('Please fill username', 'Login Failed!'); if (password === '') {
this.setState({ loader: false }) NotificationManager.error('Please fill password', 'Login Failed!');
return false; this.setState({ loader: false })
} return false;
}
if (password === '') {
NotificationManager.error('Please fill password', 'Login Failed!'); let formData = {
this.setState({ loader: false }) username: name,
return false; password,
} remember,
}
let formData = {
username: name, const doLogin = await axios.post(USER_LOGIN_V2, formData)
password, .then(response => response)
} .catch(error => {
this.setState({loader: false});
const doLogin = await axios.post(USER_LOGIN_V2, formData) });
.then(response => response)
.catch(error => { if (doLogin && doLogin.data && doLogin.data.code === 200) {
console.log('test error', error) const { access_token, data_user } = doLogin.data.data
this.setState({loader: false}); this.getDataMenu(access_token, data_user.role_id)
}); window.localStorage.setItem('isLogin', true);
window.localStorage.setItem('token', access_token);
console.log('doLogin', doLogin); window.localStorage.setItem('user_id', data_user.id);
if (doLogin && doLogin.data && doLogin.data.code === 200) { window.localStorage.setItem('user_name', data_user.name);
const { access_token, data_user } = doLogin.data.data window.localStorage.setItem('role_id', data_user.role_id);
this.getDataMenu(access_token, data_user.role_id) } else {
window.localStorage.setItem('isLogin', true); NotificationManager.error('Cek username atau password anda!', 'Gagal Login!');
window.localStorage.setItem('token', access_token); this.setState({loader: false});
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); }
getConfigAlert = async (token, user_id) => {
const config = {
} else { headers:
NotificationManager.error('Cek username atau password anda!', 'Gagal Login!'); {
this.setState({loader: false}); Authorization: `Bearer ${token}`,
} "Content-type": `application/json`
}
};
}
const payload = {
"paging": { "start": 0, "length": -1 },
"columns": [
{ "name": "user_id", "logic_operator": "=", "value": `${user_id}`, "operator": "AND" }
],
"joins": [],
"orders": { "columns": ["id"], "ascending": false }
}
const result = await axios
getConfigAlert = async (token, user_id) => { .post(CALERTUSER_SEARCH, payload, config)
const config = { .then(res => res)
headers: .catch((error) => error.response);
{
Authorization: `Bearer ${token}`, if (result && result.data && result.data.code == 200) {
"Content-type": `application/json` let resData = result.data.data
} let configAlert = []
}; resData.map((val, index) => {
configAlert.push(val.config_alert_id);
const payload = { });
"paging": { "start": 0, "length": -1 }, window.localStorage.setItem('userConfigAlert', configAlert.join());
"columns": [ }
{ "name": "user_id", "logic_operator": "=", "value": `${user_id}`, "operator": "AND" } }
],
"joins": [], onShowAlert = (alertColor, alertMessage) => {
"orders": { "columns": ["id"], "ascending": false } this.setState({ alertVisible: true, alertColor: alertColor, alertMessage: alertMessage }, () => {
} window.setTimeout(() => {
this.setState({ alertVisible: false })
const result = await axios }, 3000)
.post(CALERTUSER_SEARCH, payload, config) });
.then(res => res) }
.catch((error) => error.response);
getLoginLogo = () => {
return <div style={{textAlign: 'center'}}><img style={{width:'100%'}} src={logo_login_adw}/></div>
}
if (result && result.data && result.data.code == 200) {
let resData = result.data.data getLoginSlider = () => {
let configAlert = [] return <Slider {...settings} >
resData.map((val, index) => { <div>
configAlert.push(val.config_alert_id); <img src={require('../../../assets/img/login/slide1.jpg')} className="img-avatar" />
}); </div>
window.localStorage.setItem('userConfigAlert', configAlert.join()); <div>
} <img src={require('../../../assets/img/login/slide2.jpg')} className="img-avatar" />
} </div>
<div>
onShowAlert = (alertColor, alertMessage) => { <img src={require('../../../assets/img/login/slide3.jpg')} className="img-avatar" />
this.setState({ alertVisible: true, alertColor: alertColor, alertMessage: alertMessage }, () => { </div>
window.setTimeout(() => { <div>
this.setState({ alertVisible: false }) <img src={require('../../../assets/img/login/slide4.jpg')} className="img-avatar" />
}, 3000) </div>
}); </Slider>
} }
onChecked = (e) => {
this.setState({remember:e.target.checked})
};
render() {
const { name, password, remember } = this.state;
getLoginLogo = () => { const u_group = window.localStorage.getItem('u_group')
let img = null; if (u_group !== null) {
switch (APP_MODE) { this.props.history.push("/dashboard");
case 'KIT': }
img = <div style={{textAlign: 'center'}}><img style={{width:'100%'}} src={logo_login_kit}/></div> return (
break; <div className="app flex-row align-items-center">
case 'ADW': <Container>
img = <div style={{textAlign: 'center'}}><img style={{width:'100%'}} src={logo_login_adw}/></div> <NotificationContainer />
break;
case 'NAWAKARA': <Alert color={this.state.alertColor} isOpen={this.state.alertVisible} >
img = <div style={{textAlign: 'center'}}><img style={{width:150, height: 150}} src={logo_login_nawakara}/></div> {this.state.alertMessage}
break; </Alert>
case 'IU': <Row className="justify-content-center">
img = <div style={{textAlign: 'center'}}><img style={{width:'100%'}} src={logo_login_si}/></div> <Col md="7">
break; { this.getLoginSlider() }
default: </Col>
img = null <Col md="5">
} <div style={{
return img; boxShadow: '1px 1px 11px 1px rgba(221,211,211,0.75)'
} }}>
<CardGroup>
getLoginSlider = () => { <Card className="p-4">
let slider = <Slider {...settings} > <CardBody>
<div> <Form onSubmit={this.submitForm}>
<img src={require('../../../assets/img/login/carousel1.jpeg')} className="img-avatar" alt="admin@bootstrapmaster.com" /> { this.getLoginLogo() }
</div> <p className="text-muted">Sign In to your account</p>
<div> <InputGroup className="mb-3">
<img src={require('../../../assets/img/login/carousel2.jpeg')} className="img-avatar" alt="admin@bootstrapmaster.com" /> <InputGroupAddon addonType="prepend">
</div> <InputGroupText>
<div> <i className="icon-user"></i>
<img src={require('../../../assets/img/login/carousel3.jpeg')} className="img-avatar" alt="admin@bootstrapmaster.com" /> </InputGroupText>
</div> </InputGroupAddon>
</Slider> <Input
type="text"
switch (APP_MODE) { name="name"
case 'KIT': id="exampleName"
break; placeholder="Username"
case 'IU': value={name}
break; onChange={(e) => {
case 'ADW': this.setState({ name: e.target.value })
slider = <Slider {...settings} > }}
<div> />
<img src={require('../../../assets/img/login/slide1.jpg')} className="img-avatar" alt="admin@bootstrapmaster.com" /> </InputGroup>
</div> <InputGroup className="mb-4">
<div> <InputGroupAddon addonType="prepend">
<img src={require('../../../assets/img/login/slide2.jpg')} className="img-avatar" alt="admin@bootstrapmaster.com" /> <InputGroupText>
</div> <i className="icon-lock"></i>
<div> </InputGroupText>
<img src={require('../../../assets/img/login/slide3.jpg')} className="img-avatar" alt="admin@bootstrapmaster.com" /> </InputGroupAddon>
</div>
<div> <Input
<img src={require('../../../assets/img/login/slide4.jpg')} className="img-avatar" alt="admin@bootstrapmaster.com" /> type="password"
</div> name="password"
</Slider> id="examplePassword"
break; placeholder="********"
case 'NAWAKARA': value={password}
break; onChange={(e) => this.setState({ password: e.target.value })}
} />
return slider; </InputGroup>
<Row>
} <Col xs="4">
{this.state.loader ? (
render() { <Spin indicator={antIcon} />
const { name, password } = this.state; ) : (
const u_group = window.localStorage.getItem('u_group') <Button onClick={() => this.submitFormLogin()} color="primary" className="px-4" >Login</Button>
if (u_group !== null) { )}
if (u_group === 'kominfo') { </Col>
this.props.history.push("/dashboard-kominfo"); <Col xs="8">
} <Checkbox checked={this.state.remember} onChange={this.onChecked}>Remember me (7 days)</Checkbox>
else { </Col>
this.props.history.push("/dashboard"); </Row>
} <Row>
} <Col className="text-right mt-5">
return ( <Button color="link" className="px-0">Forgot password?</Button>
<div className="app flex-row align-items-center"> </Col>
<Container> </Row>
<NotificationContainer /> </Form>
</CardBody>
<Alert color={this.state.alertColor} isOpen={this.state.alertVisible} > </Card>
{this.state.alertMessage} </CardGroup>
</Alert> </div>
<Row className="justify-content-center"> </Col>
<Col md="7"> </Row>
</Container>
{/* <Slider {...settings}> */} </div>
{/* <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">
<div style={{
boxShadow: '1px 1px 11px 1px rgba(221,211,211,0.75)'
}}>
<CardGroup>
<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">
<InputGroupText>
<i className="icon-user"></i>
</InputGroupText>
</InputGroupAddon>
<Input
type="text"
name="name"
id="exampleName"
placeholder="Username"
value={name}
onChange={(e) => {
this.setState({ name: e.target.value })
}}
/>
</InputGroup>
<InputGroup className="mb-4">
<InputGroupAddon addonType="prepend">
<InputGroupText>
<i className="icon-lock"></i>
</InputGroupText>
</InputGroupAddon>
<Input
type="password"
name="password"
id="examplePassword"
placeholder="********"
value={password}
onChange={(e) => this.setState({ password: e.target.value })}
/>
</InputGroup>
<Row>
<Col xs="6">
{this.state.loader ? (
<Spin indicator={antIcon} />
) : (
<Button onClick={() => this.submitFormLogin()} color="primary" className="px-4" >Login</Button>
)}
</Col>
<Col xs="6" className="text-right">
<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>
</Row>
</Container>
</div>
);
}
} }
export default Login; export default Login;

Write Preview
Loading…
Cancel
Save