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

default page

pull/1/head
wahyu 1 year ago
parent
b4bc7fd943
commit
414956bbd8
4 changed files with 688 additions and 588 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. 63
      src/views/Master/MasterRoles/DialogForm.js
  2. 468
      src/views/Master/MasterRoles/DialogMenuRoles.js
  3. 6
      src/views/Master/MasterRoles/index.js
  4. 739
      src/views/Pages/Login/Login.js

63
src/views/Master/MasterRoles/DialogForm.js
Unescape View File

@ -3,6 +3,19 @@ import { Modal, ModalHeader, ModalBody, ModalFooter, Row, Col } from 'reactstrap
import { Button, Form, FormGroup, Label, Input } from 'reactstrap'; import { Button, Form, FormGroup, Label, Input } from 'reactstrap';
import 'antd/dist/antd.css'; import 'antd/dist/antd.css';
import { withTranslation } from 'react-i18next'; import { withTranslation } from 'react-i18next';
import axios from 'axios';
import { Select } from 'antd';
import { MENU_SEARCH } from '../../../const/ApiConst.js';
const { Option } = Select
const token = window.localStorage.getItem('token');
const config = {
headers:
{
Authorization: `Bearer ${token}`,
"Content-type": `application/json`
}
};
class DialogForm extends Component { class DialogForm extends Component {
constructor(props) { constructor(props) {
@ -13,11 +26,14 @@ class DialogForm extends Component {
description: "", description: "",
openDialog: false, openDialog: false,
isParentClick: false, isParentClick: false,
menu: [],
selectedMenu: null
} }
} }
async componentDidMount() { async componentDidMount() {
this.props.showDialog(this.showDialog); this.props.showDialog(this.showDialog);
this.getAllMenu();
} }
async componentDidUpdate() { async componentDidUpdate() {
@ -27,19 +43,38 @@ class DialogForm extends Component {
this.setState({ this.setState({
id: dataEdit.id, id: dataEdit.id,
name: dataEdit.name, name: dataEdit.name,
description: dataEdit.description description: dataEdit.description,
selectedMenu: dataEdit.default_page
}) })
} else { } else {
this.setState({ this.setState({
id: 0, id: 0,
name: "", name: "",
description: "" description: "",
selectedMenu: null
}) })
} }
this.setState({ isParentClick: false }); this.setState({ isParentClick: false });
} }
} }
getAllMenu = async () => {
const payload = {
"paging": { "start": 0, "length": -1 },
"columns": [
{ "name": "name", "logic_operator": "ilike", "value": "", "operator": "AND" }
],
"joins": [],
"orders": { "columns": ["id"], "ascending": false }
}
const result = await axios
.post(MENU_SEARCH, payload, config)
.then(res => res)
.catch((error) => error.response);
if (result && result.data && result.data.code == 200) {
this.setState({ menu: result.data.data });
}
}
showDialog = () => { showDialog = () => {
this.setState({ isParentClick: true }); this.setState({ isParentClick: true });
@ -60,7 +95,8 @@ class DialogForm extends Component {
const { const {
id, id,
name, name,
description description,
selectedMenu
} = this.state } = this.state
let data = ''; let data = '';
@ -70,14 +106,16 @@ class DialogForm extends Component {
data = { data = {
id, id,
name, name,
description description,
selectedMenu
} }
this.props.closeDialog('save', data); this.props.closeDialog('save', data);
} else { } else {
data = { data = {
id, id,
name, name,
description description,
selectedMenu
} }
this.props.closeDialog('edit', data); this.props.closeDialog('edit', data);
} }
@ -113,6 +151,21 @@ class DialogForm extends Component {
<Input type="text" value={this.state.description} onChange={(e) => this.setState({ description: e.target.value })} placeholder={this.props.t('inputDescription')} /> <Input type="text" value={this.state.description} onChange={(e) => this.setState({ description: e.target.value })} placeholder={this.props.t('inputDescription')} />
</FormGroup> </FormGroup>
</Col> </Col>
<Col md={12}>
<FormGroup>
<Label>Default Page<span style={{ color: "red" }}>*</span></Label>
<Input type="select" value={this.state.selectedMenu} placeholder={"Select default page"}
onChange={(e) => {
this.setState({ selectedMenu: e.target.value });
}}>
{this.state.menu.map((item) => (
<option key={item.id} value={item.id}>
{item.name}
</option>
))}
</Input>
</FormGroup>
</Col>
</Row> </Row>
</Form> </Form>
) )

468
src/views/Master/MasterRoles/DialogMenuRoles.js
Unescape View File

@ -1,234 +1,234 @@
import React, { Component } from 'react' import React, { Component } from 'react'
import { Modal, ModalHeader, ModalBody, ModalFooter, Row, Col, Table } from 'reactstrap'; import { Modal, ModalHeader, ModalBody, ModalFooter, Row, Col, Table } from 'reactstrap';
import { Button, Form, FormGroup, Label, Input } from 'reactstrap'; import { Button, Form, FormGroup, Label, Input } from 'reactstrap';
import 'antd/dist/antd.css'; import 'antd/dist/antd.css';
import axios from 'axios'; import axios from 'axios';
import { MENU_SEARCH } from '../../../const/ApiConst.js'; import { MENU_SEARCH } from '../../../const/ApiConst.js';
import { withTranslation, WithTranslation } from 'react-i18next'; import { withTranslation, WithTranslation } from 'react-i18next';
const BASE_URL = "http://siopas.co.id/custom-php/api/geohr/"; const BASE_URL = "http://siopas.co.id/custom-php/api/geohr/";
const token = window.localStorage.getItem('token'); const token = window.localStorage.getItem('token');
const config = { const config = {
headers: headers:
{ {
Authorization: `Bearer ${token}`, Authorization: `Bearer ${token}`,
"Content-type": `application/json` "Content-type": `application/json`
} }
}; };
class DialogMenuRoles extends Component { class DialogMenuRoles extends Component {
constructor(props) { constructor(props) {
super(props) super(props)
this.state = { this.state = {
id: 0, id: 0,
name: "", name: "",
description: "", description: "",
openDialog: false, openDialog: false,
isParentClick: false, isParentClick: false,
menu: [], menu: [],
stateMenu: [], stateMenu: [],
allChecked: true, allChecked: true,
} }
} }
async componentDidMount() { async componentDidMount() {
this.props.showDialog(this.showDialog); this.props.showDialog(this.showDialog);
this.getAllMenu(); this.getAllMenu();
} }
async componentDidUpdate() { async componentDidUpdate() {
if (this.state.isParentClick === true) { if (this.state.isParentClick === true) {
const { idRoles } = this.props const { idRoles } = this.props
this.setStateMenu(true); this.setStateMenu(true);
this.setState({ isParentClick: false, id: idRoles }); this.setState({ isParentClick: false, id: idRoles });
} }
} }
showDialog = () => { showDialog = () => {
this.setState({ isParentClick: true }); this.setState({ isParentClick: true });
} }
getAllMenu = async () => { getAllMenu = async () => {
const payload = { const payload = {
"paging": { "start": 0, "length": -1 }, "paging": { "start": 0, "length": -1 },
"columns": [ "columns": [
{ "name": "name", "logic_operator": "ilike", "value": "", "operator": "AND" } { "name": "name", "logic_operator": "ilike", "value": "", "operator": "AND" }
], ],
"joins": [], "joins": [],
"orders": { "columns": ["id"], "ascending": false } "orders": { "columns": ["id"], "ascending": false }
} }
const result = await axios const result = await axios
.post(MENU_SEARCH, payload, config) .post(MENU_SEARCH, payload, config)
.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) {
this.setState({ menu: result.data.data }, () => { this.setState({ menu: result.data.data }, () => {
this.setStateMenu(false); this.setStateMenu(false);
}); });
} else { } else {
} }
} }
setStateMenu = edit => { setStateMenu = edit => {
const stateMenu = []; const stateMenu = [];
this.state.menu.map((val) => { this.state.menu.map((val) => {
stateMenu.push(false); stateMenu.push(false);
}) })
this.setState({ stateMenu: [] }, () => { this.setState({ stateMenu: [] }, () => {
this.setState({ stateMenu: stateMenu }, () => { this.setState({ stateMenu: stateMenu }, () => {
if (edit) { if (edit) {
this.checkMenuRoles(); this.checkMenuRoles();
} }
}) })
}) })
} }
checkMenuRoles = () => { checkMenuRoles = () => {
let copyStateMenu = [...this.state.stateMenu]; let copyStateMenu = [...this.state.stateMenu];
this.props.menuRoles.map((val, indexMenu) => { this.props.menuRoles.map((val, indexMenu) => {
let index = this.getIndexDataMenu(val.menu_id); let index = this.getIndexDataMenu(val.menu_id);
console.log("index true", val.menu_id); console.log("index true", val.menu_id);
if (index >= 0) { if (index >= 0) {
copyStateMenu[index] = true; copyStateMenu[index] = true;
} }
}) })
this.setState({ stateMenu: [] }, () => { this.setState({ stateMenu: [] }, () => {
let check = copyStateMenu.some(this.checkArray); let check = copyStateMenu.some(this.checkArray);
if (check === false) { if (check === false) {
this.setState({ allChecked: true, stateMenu: copyStateMenu }) this.setState({ allChecked: true, stateMenu: copyStateMenu })
} else { } else {
this.setState({ allChecked: false, stateMenu: copyStateMenu }) this.setState({ allChecked: false, stateMenu: copyStateMenu })
} }
}) })
} }
getIndexDataMenu = (id) => { getIndexDataMenu = (id) => {
let index = this.state.menu.findIndex(obj => obj.id === id); let index = this.state.menu.findIndex(obj => obj.id === id);
return index return index
} }
handleSave = () => { handleSave = () => {
const { const {
stateMenu, stateMenu,
menu, menu,
id id
} = this.state } = this.state
const arrayData = []; const arrayData = [];
menu.map((val, index) => { menu.map((val, index) => {
let data = { let data = {
roles_id: id, roles_id: id,
menu_id: val.id, menu_id: val.id,
checked: stateMenu[index] checked: stateMenu[index]
} }
arrayData.push(data); arrayData.push(data);
}) })
this.props.closeDialog('save', arrayData); this.props.closeDialog('save', arrayData);
this.setState({ id: 0 }); this.setState({ id: 0 });
} }
handleCancel = () => { handleCancel = () => {
this.props.closeDialog('cancel', 'none') this.props.closeDialog('cancel', 'none')
} }
handleChangeCheckbox = (checked, index) => { handleChangeCheckbox = (checked, index) => {
let copyStateMenu = [...this.state.stateMenu]; let copyStateMenu = [...this.state.stateMenu];
copyStateMenu[index] = checked; copyStateMenu[index] = checked;
console.log("cek uncek", copyStateMenu); console.log("cek uncek", copyStateMenu);
this.setState({ stateMenu: copyStateMenu }) this.setState({ stateMenu: copyStateMenu })
} }
renderForm = () => { renderForm = () => {
const { menu, stateMenu } = this.state const { menu, stateMenu } = this.state
return ( return (
menu.map((val, index) => { menu.map((val, index) => {
return ( return (
<tr key={index}> <tr key={index}>
<td>{val.name}</td> <td>{val.name}</td>
<td><input type="checkbox" onClick={(e) => this.handleChangeCheckbox(e.target.checked, index)} defaultChecked={stateMenu[index]} /></td> <td><input type="checkbox" onClick={(e) => this.handleChangeCheckbox(e.target.checked, index)} defaultChecked={stateMenu[index]} /></td>
</tr> </tr>
) )
}) })
) )
} }
checkArray = (val) => { checkArray = (val) => {
return val === false; return val === false;
} }
handleAllChecked = (checked) => { handleAllChecked = (checked) => {
this.setState({ allChecked: !this.state.allChecked }); this.setState({ allChecked: !this.state.allChecked });
if (checked === true) { if (checked === true) {
console.log("test 1") console.log("test 1")
let check = this.state.stateMenu.some(this.checkArray); let check = this.state.stateMenu.some(this.checkArray);
if (check) { if (check) {
const stateMenu = []; const stateMenu = [];
this.state.menu.map((val) => { this.state.menu.map((val) => {
stateMenu.push(true); stateMenu.push(true);
}) })
this.setState({ stateMenu: [] }, () => { this.setState({ stateMenu: [] }, () => {
this.setState({ stateMenu: stateMenu }); this.setState({ stateMenu: stateMenu });
}) })
} }
} else { } else {
console.log("test 1 2 3 ") console.log("test 1 2 3 ")
const stateMenu = []; const stateMenu = [];
this.state.menu.map((val) => { this.state.menu.map((val) => {
stateMenu.push(false); stateMenu.push(false);
}) })
this.setState({ stateMenu: [] }, () => { this.setState({ stateMenu: [] }, () => {
this.setState({ stateMenu: stateMenu }); this.setState({ stateMenu: stateMenu });
}) })
} }
} }
render() { render() {
return ( return (
<Modal scrollable={true} isOpen={this.props.openDialog} toggle={this.props.toggleDialog}> <Modal scrollable={true} isOpen={this.props.openDialog} toggle={this.props.toggleDialog}>
<ModalHeader toggle={this.props.closeDialog}>{this.props.t('menuRoles')}</ModalHeader> <ModalHeader toggle={this.props.closeDialog}>{this.props.t('menuRoles')}</ModalHeader>
<ModalBody> <ModalBody>
<Form> <Form>
<Table> <Table>
<thead> <thead>
<tr> <tr>
<th>Menu</th> <th>Menu</th>
<th> <th>
T/F T/F
</th> </th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
<td>All</td> <td>All</td>
<td><input type="checkbox" onChange={(e) => this.handleAllChecked(e.target.checked)} checked={this.state.allChecked} /></td> <td><input type="checkbox" onChange={(e) => this.handleAllChecked(e.target.checked)} checked={this.state.allChecked} /></td>
</tr> </tr>
{this.renderForm()} {this.renderForm()}
</tbody> </tbody>
</Table> </Table>
</Form> </Form>
</ModalBody> </ModalBody>
<ModalFooter> <ModalFooter>
<Button color="primary" onClick={() => this.handleSave()}>{this.props.t('save')}</Button>{' '} <Button color="primary" onClick={() => this.handleSave()}>{this.props.t('save')}</Button>{' '}
<Button color="secondary" onClick={() => this.handleCancel()}>{this.props.t('cancel')}</Button> <Button color="secondary" onClick={() => this.handleCancel()}>{this.props.t('cancel')}</Button>
</ModalFooter> </ModalFooter>
</Modal> </Modal>
) )
} }
} }
export default withTranslation()(DialogMenuRoles); export default withTranslation()(DialogMenuRoles);

6
src/views/Master/MasterRoles/index.js
Unescape View File

@ -179,7 +179,8 @@ class index extends Component {
const formData = { const formData = {
name: data.name, name: data.name,
description: data.description description: data.description,
default_page : data.selectedMenu
} }
const result = await axios.post(ROLE_ADD, formData, config) const result = await axios.post(ROLE_ADD, formData, config)
@ -198,7 +199,8 @@ class index extends Component {
editRole = async (data) => { editRole = async (data) => {
const formData = { const formData = {
name: data.name, name: data.name,
description: data.description description: data.description,
default_page: data.selectedMenu
} }
const url = ROLE_EDIT(data.id) const url = ROLE_EDIT(data.id)
const result = await axios.put(url, formData, config) const result = await axios.put(url, formData, config)

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

@ -1,347 +1,392 @@
import React, { Component } from 'react'; import React, { Component } from 'react';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import "slick-carousel/slick/slick.css"; 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 { Checkbox } from 'antd';
import { LoadingOutlined, EyeOutlined, EyeInvisibleOutlined } from '@ant-design/icons'; import { LoadingOutlined, EyeOutlined, EyeInvisibleOutlined } 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, ROLE_SEARCH } from '../../../const/ApiConst.js';
import { appConfig, reloadConstants } from '../../../const/MapConst.js'; import { appConfig, reloadConstants } from '../../../const/MapConst.js';
import { APP_NAME } from '../../../const/AppConst.js' import { APP_NAME } from '../../../const/AppConst.js'
import moment from "moment" import moment from "moment"
import axios from 'axios'; import axios from 'axios';
import { NotificationContainer, NotificationManager } from 'react-notifications'; import { NotificationContainer, NotificationManager } from 'react-notifications';
import logo_login_adw from '../../../assets/img/logo_adyawinsa.jpg' import logo_login_adw from '../../../assets/img/logo_adyawinsa.jpg'
import logo_login_kit from '../../../assets/img/logo_kit.png' import logo_login_kit from '../../../assets/img/logo_kit.png'
import logo_login_nawakara from '../../../assets/img/logo_nawakara.png' import logo_login_nawakara from '../../../assets/img/logo_nawakara.png'
import logo_login_si from '../../../assets/img/logo-surveyor-indonesia.png' 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: '',
remember: '', remember: '',
alertVisible: false, alertVisible: false,
alertMessage: '', alertMessage: '',
alertColor: 'success', alertColor: 'success',
validate: { validate: {
emailState: '', emailState: '',
}, },
loader: false, loader: false,
type: 'password' type: 'password',
} defaultPage: ''
this.handleChange = this.handleChange.bind(this); }
this.showHide = this.showHide.bind(this); this.handleChange = this.handleChange.bind(this);
} this.showHide = this.showHide.bind(this);
showHide(e) { }
e.preventDefault(); showHide(e) {
e.stopPropagation(); e.preventDefault();
this.setState({ e.stopPropagation();
type: this.state.type === 'input' ? 'password' : 'input' this.setState({
}) type: this.state.type === 'input' ? 'password' : 'input'
} })
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) => {
const { target } = event; handleChange = async (event) => {
const value = target.type === 'checkbox' ? target.checked : target.value; const { target } = event;
const { name } = target; const value = target.type === 'checkbox' ? target.checked : target.value;
await this.setState({ const { name } = target;
[name]: value, await this.setState({
}); [name]: value,
} });
}
getDataMenu = async (token, role_id) => {
const config = { getDataRole = 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 const payload = {
.get(url, config) "paging": { "start": 0, "length": -1 },
.then(res => res) "columns": [
.catch((error) => error.response); { "name": "id", "logic_operator": "=", "value": `${role_id}`, "operator": "AND" }
],
if (result && result.data && result.data.code == 200) { "joins": [
let resData = result.data.data {
window.localStorage.setItem('menu_login', JSON.stringify(resData)); "name": "m_menu",
this.setState({ loader: false }) "column_join": "default_page",
// custom redirect home after login "column_results": ["id", "name", "url"],
if (role_id == 28) { },
this.props.history.push("/dashboard-customer/58/63"); ],
} "orders": { "columns": ["id"], "ascending": false }
else { }
this.props.history.push("/dashboard");
} const result = await axios
} else { .post(ROLE_SEARCH, payload, config)
NotificationManager.error('Login Failed', 'Failed'); .then(res => res)
this.setState({ loader: false }) .catch((error) => error.response);
}
} if (result && result.data && result.data.code == 200) {
let resData = result.data.data
submitForm = (event) => { this.setState({defaultPage: resData[0].join_first_url})
event.preventDefault(); }
this.submitFormLogin(); }
}
getDataMenu = async (token, role_id) => {
submitFormLogin = async () => { const config = {
this.setState({ loader: true }) headers:
const { name, password, remember } = this.state {
Authorization: `Bearer ${token}`,
if (name === '') { "Content-type": `application/json`
NotificationManager.error('Please fill username', 'Login Failed!'); }
this.setState({ loader: false }) };
return false;
} let url = MENU_MANAGEMENT(role_id)
const result = await axios
if (password === '') { .get(url, config)
NotificationManager.error('Please fill password', 'Login Failed!'); .then(res => res)
this.setState({ loader: false }) .catch((error) => error.response);
return false;
} if (result && result.data && result.data.code == 200) {
let resData = result.data.data
let formData = { window.localStorage.setItem('menu_login', JSON.stringify(resData));
username: name, this.setState({ loader: false })
password, // custom redirect home after login
remember, if (role_id == 28) {
} this.props.history.push("/dashboard-customer/58/63");
}
const doLogin = await axios.post(USER_LOGIN_V2, formData) else {
.then(response => response) this.props.history.push("/dashboard");
.catch(error => { }
this.setState({ loader: false }); if (this.state.defaultPage) {
}); this.props.history.push(this.state.defaultPage);
} else if (role_id == 28) {
if (doLogin && doLogin.data && doLogin.data.code === 200) { this.props.history.push("/dashboard-customer/58/63");
const { access_token, data_user } = doLogin.data.data }
this.getDataMenu(access_token, data_user.role_id) else {
window.localStorage.setItem('isLogin', true); this.props.history.push("/dashboard");
window.localStorage.setItem('token', access_token); }
window.localStorage.setItem('user_id', data_user.id); } else {
window.localStorage.setItem('user_name', data_user.name); NotificationManager.error('Login Failed', 'Failed');
window.localStorage.setItem('role_id', data_user.role_id); this.setState({ loader: false })
} else { }
console.log("kode : ", doLogin.data.code); }
// NotificationManager.error('Cek username atau password anda!', 'Gagal Login!');
NotificationManager.error(doLogin.data.message, 'Login Failed!'); submitForm = (event) => {
this.setState({ loader: false }); event.preventDefault();
} this.submitFormLogin();
}
}
submitFormLogin = async () => {
getConfigAlert = async (token, user_id) => { this.setState({ loader: true })
const config = { const { name, password, remember } = this.state
headers:
{ if (name === '') {
Authorization: `Bearer ${token}`, NotificationManager.error('Please fill username', 'Login Failed!');
"Content-type": `application/json` this.setState({ loader: false })
} return false;
}; }
const payload = { if (password === '') {
"paging": { "start": 0, "length": -1 }, NotificationManager.error('Please fill password', 'Login Failed!');
"columns": [ this.setState({ loader: false })
{ "name": "user_id", "logic_operator": "=", "value": `${user_id}`, "operator": "AND" } return false;
], }
"joins": [],
"orders": { "columns": ["id"], "ascending": false } let formData = {
} username: name,
password,
const result = await axios remember,
.post(CALERTUSER_SEARCH, payload, config) }
.then(res => res)
.catch((error) => error.response); const doLogin = await axios.post(USER_LOGIN_V2, formData)
.then(response => response)
if (result && result.data && result.data.code == 200) { .catch(error => {
let resData = result.data.data this.setState({ loader: false });
let configAlert = [] });
resData.map((val, index) => {
configAlert.push(val.config_alert_id); if (doLogin && doLogin.data && doLogin.data.code === 200) {
}); const { access_token, data_user } = doLogin.data.data
window.localStorage.setItem('userConfigAlert', configAlert.join()); this.getDataRole(access_token, data_user.role_id)
} this.getDataMenu(access_token, data_user.role_id)
} window.localStorage.setItem('isLogin', true);
window.localStorage.setItem('token', access_token);
onShowAlert = (alertColor, alertMessage) => { window.localStorage.setItem('user_id', data_user.id);
this.setState({ alertVisible: true, alertColor: alertColor, alertMessage: alertMessage }, () => { window.localStorage.setItem('user_name', data_user.name);
window.setTimeout(() => { window.localStorage.setItem('role_id', data_user.role_id);
this.setState({ alertVisible: false }) } else {
}, 3000) console.log("kode : ", doLogin.data.code);
}); // NotificationManager.error('Cek username atau password anda!', 'Gagal Login!');
} NotificationManager.error(doLogin.data.message, 'Login Failed!');
this.setState({ loader: false });
getLoginLogo = () => { }
return <div style={{ textAlign: 'center' }}><img style={{ width: '100%' }} src={logo_login_adw} /></div>
} }
getLoginSlider = () => { getConfigAlert = async (token, user_id) => {
return <Slider {...settings} > const config = {
<div> headers:
<img src={require('../../../assets/img/login/slide1.jpg')} className="img-avatar" /> {
</div> Authorization: `Bearer ${token}`,
<div> "Content-type": `application/json`
<img src={require('../../../assets/img/login/slide2.jpg')} className="img-avatar" /> }
</div> };
<div>
<img src={require('../../../assets/img/login/slide3.jpg')} className="img-avatar" /> const payload = {
</div> "paging": { "start": 0, "length": -1 },
<div> "columns": [
<img src={require('../../../assets/img/login/slide4.jpg')} className="img-avatar" /> { "name": "user_id", "logic_operator": "=", "value": `${user_id}`, "operator": "AND" }
</div> ],
</Slider> "joins": [],
} "orders": { "columns": ["id"], "ascending": false }
}
onChecked = (e) => {
this.setState({ remember: e.target.checked }) const result = await axios
}; .post(CALERTUSER_SEARCH, payload, config)
.then(res => res)
render() { .catch((error) => error.response);
const { name, password, remember } = this.state;
const u_group = window.localStorage.getItem('u_group') if (result && result.data && result.data.code == 200) {
if (u_group !== null) { let resData = result.data.data
this.props.history.push("/dashboard"); let configAlert = []
} resData.map((val, index) => {
return ( configAlert.push(val.config_alert_id);
<div className="app flex-row align-items-center"> });
<Container> window.localStorage.setItem('userConfigAlert', configAlert.join());
<NotificationContainer /> }
}
<Alert color={this.state.alertColor} isOpen={this.state.alertVisible} >
{this.state.alertMessage} onShowAlert = (alertColor, alertMessage) => {
</Alert> this.setState({ alertVisible: true, alertColor: alertColor, alertMessage: alertMessage }, () => {
<Row className="justify-content-center"> window.setTimeout(() => {
<Col md="7"> this.setState({ alertVisible: false })
{this.getLoginSlider()} }, 3000)
</Col> });
<Col md="5"> }
<div style={{
boxShadow: '1px 1px 11px 1px rgba(221,211,211,0.75)' getLoginLogo = () => {
}}> return <div style={{ textAlign: 'center' }}><img style={{ width: '100%' }} src={logo_login_adw} /></div>
<CardGroup> }
<Card className="p-4">
<CardBody> getLoginSlider = () => {
<Form onSubmit={this.submitForm}> return <Slider {...settings} >
{this.getLoginLogo()} <div>
<p className="text-muted">Sign In to your account</p> <img src={require('../../../assets/img/login/slide1.jpg')} className="img-avatar" />
<InputGroup className="mb-3"> </div>
<InputGroupAddon addonType="prepend"> <div>
<InputGroupText> <img src={require('../../../assets/img/login/slide2.jpg')} className="img-avatar" />
<i className="icon-user"></i> </div>
</InputGroupText> <div>
</InputGroupAddon> <img src={require('../../../assets/img/login/slide3.jpg')} className="img-avatar" />
<Input </div>
type="text" <div>
name="name" <img src={require('../../../assets/img/login/slide4.jpg')} className="img-avatar" />
id="exampleName" </div>
placeholder="Username" </Slider>
value={name} }
onChange={(e) => {
this.setState({ name: e.target.value }) onChecked = (e) => {
}} this.setState({ remember: e.target.checked })
/> };
</InputGroup>
<InputGroup className="mb-4"> render() {
<InputGroupAddon addonType="prepend"> const { name, password, remember } = this.state;
<InputGroupText> const u_group = window.localStorage.getItem('u_group')
<i className="icon-lock"></i> if (u_group !== null) {
</InputGroupText> this.props.history.push("/dashboard");
</InputGroupAddon> }
<Input return (
type={this.state.type} <div className="app flex-row align-items-center">
name="password" <Container>
id="examplePassword" <NotificationContainer />
placeholder="********"
value={password} <Alert color={this.state.alertColor} isOpen={this.state.alertVisible} >
onChange={(e) => this.setState({ password: e.target.value })} {this.state.alertMessage}
/> </Alert>
<InputGroupAddon addonType="prepend"> <Row className="justify-content-center">
<InputGroupText <Col md="7">
onClick={this.showHide} {this.getLoginSlider()}
> </Col>
{this.state.type === 'input' ? <EyeOutlined /> : <EyeInvisibleOutlined />} <Col md="5">
<div style={{
</InputGroupText> boxShadow: '1px 1px 11px 1px rgba(221,211,211,0.75)'
</InputGroupAddon> }}>
<span className="password__show" ></span> <CardGroup>
</InputGroup> <Card className="p-4">
<Row> <CardBody>
<Col xs="8"> <Form onSubmit={this.submitForm}>
<Checkbox checked={this.state.remember} onChange={this.onChecked}>Remember me (7 days)</Checkbox> {this.getLoginLogo()}
</Col> <p className="text-muted">Sign In to your account</p>
<Col xs="4"> <InputGroup className="mb-3">
{this.state.loader ? ( <InputGroupAddon addonType="prepend">
<Spin indicator={antIcon} /> <InputGroupText>
) : ( <i className="icon-user"></i>
<Button onClick={() => this.submitFormLogin()} color="primary" className="px-4" >Login</Button> </InputGroupText>
)} </InputGroupAddon>
</Col> <Input
</Row> type="text"
<Row> name="name"
<Col className="text-right mt-5"> id="exampleName"
<Button color="link" className="px-0">Forgot password?</Button> placeholder="Username"
</Col> value={name}
</Row> onChange={(e) => {
</Form> this.setState({ name: e.target.value })
</CardBody> }}
</Card> />
</CardGroup> </InputGroup>
</div> <InputGroup className="mb-4">
</Col> <InputGroupAddon addonType="prepend">
</Row> <InputGroupText>
</Container> <i className="icon-lock"></i>
</div> </InputGroupText>
); </InputGroupAddon>
} <Input
} type={this.state.type}
name="password"
export default Login; id="examplePassword"
placeholder="********"
value={password}
onChange={(e) => this.setState({ password: e.target.value })}
/>
<InputGroupAddon addonType="prepend">
<InputGroupText
onClick={this.showHide}
>
{this.state.type === 'input' ? <EyeOutlined /> : <EyeInvisibleOutlined />}
</InputGroupText>
</InputGroupAddon>
<span className="password__show" ></span>
</InputGroup>
<Row>
<Col xs="8">
<Checkbox checked={this.state.remember} onChange={this.onChecked}>Remember me (7 days)</Checkbox>
</Col>
<Col xs="4">
{this.state.loader ? (
<Spin indicator={antIcon} />
) : (
<Button onClick={() => this.submitFormLogin()} color="primary" className="px-4" >Login</Button>
)}
</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