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. 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 Slider from "react-slick";
import { Spin } from 'antd';
import { Checkbox } from 'antd';
import { LoadingOutlined } from '@ant-design/icons';
import {
Button,
Card,
CardBody,
CardGroup,
Col,
Container,
Form,
Input,
InputGroup,
InputGroupAddon,
InputGroupText,
Row,
UncontrolledAlert,
Alert,
Carousel,
CarouselIndicators,
CarouselCaption,
CarouselItem,
CarouselControl
Button,
Card,
CardBody,
CardGroup,
Col,
Container,
Form,
Input,
InputGroup,
InputGroupAddon,
InputGroupText,
Row,
UncontrolledAlert,
Alert,
Carousel,
CarouselIndicators,
CarouselCaption,
CarouselItem,
CarouselControl
} from 'reactstrap';
import { USER_LOGIN, USER_LOGIN_V2, CALERTUSER_SEARCH, MENU_MANAGEMENT, APP_MODE } from '../../../const/ApiConst.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 settings = {
dots: true,
infinite: true,
speed: 500,
arrows: false,
autoplay: true,
slidesToShow: 1,
slidesToScroll: 1
dots: true,
infinite: true,
speed: 500,
arrows: false,
autoplay: true,
slidesToShow: 1,
slidesToScroll: 1
};
class Login extends Component {
constructor(props) {
super(props);
this.state = {
name: '',
password: '',
alertVisible: false,
alertMessage: '',
alertColor: 'success', // bootstrap color (success, danger, info, warning)
validate: {
emailState: '',
},
loader: false
}
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,}))$/;
const { validate } = this.state
if (emailRex.test(e.target.value)) {
validate.emailState = 'has-success'
} else {
validate.emailState = 'has-danger'
}
this.setState({ validate })
}
handleChange = async (event) => {
const { target } = event;
const value = target.type === 'checkbox' ? target.checked : target.value;
const { name } = target;
await this.setState({
[name]: value,
});
}
getDataMenu = async (token, role_id) => {
const config = {
headers:
{
Authorization: `Bearer ${token}`,
"Content-type": `application/json`
}
};
let url = MENU_MANAGEMENT(role_id)
const result = await axios
.get(url, config)
.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");
} else {
NotificationManager.error('Login Failed', 'Failed');
this.setState({ loader: false })
}
}
submitForm = (event) => {
event.preventDefault();
this.submitFormLogin();
}
submitFormLogin = async () => {
this.setState({ loader: true })
const { name, password } = this.state
if (name === '') {
NotificationManager.error('Please fill username', 'Login Failed!');
this.setState({ loader: false })
return false;
}
if (password === '') {
NotificationManager.error('Please fill password', 'Login Failed!');
this.setState({ loader: false })
return false;
}
let formData = {
username: name,
password,
}
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)
window.localStorage.setItem('isLogin', true);
window.localStorage.setItem('token', access_token);
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:
{
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
.post(CALERTUSER_SEARCH, payload, config)
.then(res => res)
.catch((error) => error.response);
if (result && result.data && result.data.code == 200) {
let resData = result.data.data
let configAlert = []
resData.map((val, index) => {
configAlert.push(val.config_alert_id);
});
window.localStorage.setItem('userConfigAlert', configAlert.join());
}
}
onShowAlert = (alertColor, alertMessage) => {
this.setState({ alertVisible: true, alertColor: alertColor, alertMessage: alertMessage }, () => {
window.setTimeout(() => {
this.setState({ alertVisible: false })
}, 3000)
});
}
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;
}
getLoginSlider = () => {
let slider = <Slider {...settings} >
<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>
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" />
</div>
</Slider>
break;
case 'NAWAKARA':
break;
}
return slider;
}
render() {
const { name, password } = 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>
<NotificationContainer />
<Alert color={this.state.alertColor} isOpen={this.state.alertVisible} >
{this.state.alertMessage}
</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">
<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>
);
}
constructor(props) {
super(props);
this.state = {
name: '',
password: '',
remember: '',
alertVisible: false,
alertMessage: '',
alertColor: 'success',
validate: {
emailState: '',
},
loader: false
}
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,}))$/;
const { validate } = this.state
if (emailRex.test(e.target.value)) {
validate.emailState = 'has-success'
} else {
validate.emailState = 'has-danger'
}
this.setState({ validate })
}
handleChange = async (event) => {
const { target } = event;
const value = target.type === 'checkbox' ? target.checked : target.value;
const { name } = target;
await this.setState({
[name]: value,
});
}
getDataMenu = async (token, role_id) => {
const config = {
headers:
{
Authorization: `Bearer ${token}`,
"Content-type": `application/json`
}
};
let url = MENU_MANAGEMENT(role_id)
const result = await axios
.get(url, config)
.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");
} else {
NotificationManager.error('Login Failed', 'Failed');
this.setState({ loader: false })
}
}
submitForm = (event) => {
event.preventDefault();
this.submitFormLogin();
}
submitFormLogin = async () => {
this.setState({ loader: true })
const { name, password, remember } = this.state
if (name === '') {
NotificationManager.error('Please fill username', 'Login Failed!');
this.setState({ loader: false })
return false;
}
if (password === '') {
NotificationManager.error('Please fill password', 'Login Failed!');
this.setState({ loader: false })
return false;
}
let formData = {
username: name,
password,
remember,
}
const doLogin = await axios.post(USER_LOGIN_V2, formData)
.then(response => response)
.catch(error => {
this.setState({loader: false});
});
if (doLogin && doLogin.data && doLogin.data.code === 200) {
const { access_token, data_user } = doLogin.data.data
this.getDataMenu(access_token, data_user.role_id)
window.localStorage.setItem('isLogin', true);
window.localStorage.setItem('token', access_token);
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:
{
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
.post(CALERTUSER_SEARCH, payload, config)
.then(res => res)
.catch((error) => error.response);
if (result && result.data && result.data.code == 200) {
let resData = result.data.data
let configAlert = []
resData.map((val, index) => {
configAlert.push(val.config_alert_id);
});
window.localStorage.setItem('userConfigAlert', configAlert.join());
}
}
onShowAlert = (alertColor, alertMessage) => {
this.setState({ alertVisible: true, alertColor: alertColor, alertMessage: alertMessage }, () => {
window.setTimeout(() => {
this.setState({ alertVisible: false })
}, 3000)
});
}
getLoginLogo = () => {
return <div style={{textAlign: 'center'}}><img style={{width:'100%'}} src={logo_login_adw}/></div>
}
getLoginSlider = () => {
return <Slider {...settings} >
<div>
<img src={require('../../../assets/img/login/slide1.jpg')} className="img-avatar" />
</div>
<div>
<img src={require('../../../assets/img/login/slide2.jpg')} className="img-avatar" />
</div>
<div>
<img src={require('../../../assets/img/login/slide3.jpg')} className="img-avatar" />
</div>
<div>
<img src={require('../../../assets/img/login/slide4.jpg')} className="img-avatar" />
</div>
</Slider>
}
onChecked = (e) => {
this.setState({remember:e.target.checked})
};
render() {
const { name, password, remember } = this.state;
const u_group = window.localStorage.getItem('u_group')
if (u_group !== null) {
this.props.history.push("/dashboard");
}
return (
<div className="app flex-row align-items-center">
<Container>
<NotificationContainer />
<Alert color={this.state.alertColor} isOpen={this.state.alertVisible} >
{this.state.alertMessage}
</Alert>
<Row className="justify-content-center">
<Col md="7">
{ 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}>
{ this.getLoginLogo() }
<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="4">
{this.state.loader ? (
<Spin indicator={antIcon} />
) : (
<Button onClick={() => this.submitFormLogin()} color="primary" className="px-4" >Login</Button>
)}
</Col>
<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>
</CardGroup>
</div>
</Col>
</Row>
</Container>
</div>
);
}
}
export default Login;

Write Preview
Loading…
Cancel
Save