From 3443101b760ecf568713f234b7fe4f56c1e61914 Mon Sep 17 00:00:00 2001 From: Muhammad Sulaiman Yusuf Date: Sun, 10 Jul 2022 02:43:18 +0700 Subject: [PATCH] implement remember me --- src/views/Pages/Login/Login.js | 694 ++++++++++++++------------------- 1 file changed, 293 insertions(+), 401 deletions(-) diff --git a/src/views/Pages/Login/Login.js b/src/views/Pages/Login/Login.js index 0bff4b6..d9022d6 100644 --- a/src/views/Pages/Login/Login.js +++ b/src/views/Pages/Login/Login.js @@ -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 = ; 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 =
- break; - case 'ADW': - img =
- break; - case 'NAWAKARA': - img =
- break; - case 'IU': - img =
- break; - default: - img = null - } - return img; - } - - getLoginSlider = () => { - let slider = -
- admin@bootstrapmaster.com -
-
- admin@bootstrapmaster.com -
-
- admin@bootstrapmaster.com -
- - - switch (APP_MODE) { - case 'KIT': - break; - case 'IU': - break; - case 'ADW': - slider = -
- admin@bootstrapmaster.com -
-
- admin@bootstrapmaster.com -
-
- admin@bootstrapmaster.com -
-
- admin@bootstrapmaster.com -
- - 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 ( -
- - - - - {this.state.alertMessage} - - - - - {/* */} - {/*
- admin@bootstrapmaster.com -
-
- admin@bootstrapmaster.com -
-
- admin@bootstrapmaster.com -
-
- admin@bootstrapmaster.com -
*/} - {/*
- admin@bootstrapmaster.com -
-
- admin@bootstrapmaster.com -
-
- admin@bootstrapmaster.com -
*/} - {/* */} - - { this.getLoginSlider() } - - -
- - - -
- {/*

OSPRO

*/} - {/* */} - - { this.getLoginLogo() } - - {/* PROJECT MANAGEMENT */} -

Sign In to your account

- - - - - - - { - this.setState({ name: e.target.value }) - }} - /> - - - - - - - - - this.setState({ password: e.target.value })} - /> - - - - {this.state.loader ? ( - - ) : ( - - )} - - - - - - -
- - - {/* - -
-

Contact

-

More information about {APP_NAME}.

-

-

-

- - - -
- - */} - -
- - - -
- ); - } + 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
+ } + + getLoginSlider = () => { + return +
+ +
+
+ +
+
+ +
+
+ +
+ + } + + 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 ( +
+ + + + + {this.state.alertMessage} + + + + { this.getLoginSlider() } + + +
+ + + +
+ { this.getLoginLogo() } +

Sign In to your account

+ + + + + + + { + this.setState({ name: e.target.value }) + }} + /> + + + + + + + + + this.setState({ password: e.target.value })} + /> + + + + {this.state.loader ? ( + + ) : ( + + )} + + + Remember me (7 days) + + + + + + + +
+ + + +
+ + + +
+ ); + } } export default Login;