Profile.js 35.7 KB
Newer Older
Deni Rinaldi's avatar
Deni Rinaldi committed
1
import React, { Component } from 'react';
a.bairuha's avatar
a.bairuha committed
2
import { Typography, AppBar, Tabs, Tab, TextField, Snackbar, Collapse, withStyles, Checkbox, InputAdornment, IconButton } from '@material-ui/core';
3 4
import Visibility from '@material-ui/icons/Visibility';
import VisibilityOff from '@material-ui/icons/VisibilityOff';
a.bairuha's avatar
a.bairuha committed
5
import MuiAlert from '@material-ui/lab/Alert';
Deni Rinaldi's avatar
Deni Rinaldi committed
6
import Images from '../assets/Images';
7
import api from '../api';
Deni Rinaldi's avatar
Deni Rinaldi committed
8 9 10 11
import Constant from '../library/Constant';
import RemoveIcon from '@material-ui/icons/Remove';
import AddIcon from '@material-ui/icons/Add';
import { titleCase } from '../library/Utils';
d.arizona's avatar
d.arizona committed
12
import * as R from 'ramda'
13
import ImageUploader from 'react-images-upload';
Deni Rinaldi's avatar
Deni Rinaldi committed
14 15 16 17 18 19 20 21 22 23

const CustomCheckbox = withStyles({
    root: {
        color: '#51c6ea',
        '&$checked': {
            color: '#51c6ea',
        },
    },
    checked: {},
})((props) => <Checkbox color="default" {...props} />);
Deni Rinaldi's avatar
Deni Rinaldi committed
24

a.bairuha's avatar
a.bairuha committed
25 26 27
const Alert = withStyles({
})((props) => <MuiAlert elevation={6} variant="filled" {...props} />);

Deni Rinaldi's avatar
Deni Rinaldi committed
28
export default class Profile extends Component {
Deni Rinaldi's avatar
Deni Rinaldi committed
29
    constructor(props) {
Deni Rinaldi's avatar
Deni Rinaldi committed
30 31
        super(props)
        this.state = {
32 33 34 35 36 37 38
            tab: 0,
            oldPassword: '',
            password: '',
            confirmPassword: '',
            errorOldPassword: false,
            errorPassword: false,
            errorConfirmPassword: false,
EKSAD's avatar
EKSAD committed
39 40 41
            msgOldPassword: 'Consists of 8 Characters with a Combination of Numbers.',
            msgPassword: 'Consists of 8 Characters with a Combination of Numbers.',
            msgConfirmPassword: 'Consists of 8 Characters with a Combination of Numbers.',
Deni Rinaldi's avatar
Deni Rinaldi committed
42 43
            company: [],
            listCompany: [],
44 45 46 47 48
            selectedIndex: 0,
            showPass: false,
            showPass2: false,
            showPass3: false,
            pictures: [],
a.bairuha's avatar
a.bairuha committed
49 50 51 52
            name: "",
            alert: false,
            tipeAlert: '',
            messageAlert: ''
Deni Rinaldi's avatar
Deni Rinaldi committed
53
        }
54
        this.onDrop = this.onDrop.bind(this);
Deni Rinaldi's avatar
Deni Rinaldi committed
55
    }
Deni Rinaldi's avatar
Deni Rinaldi committed
56 57 58 59 60 61

    componentDidMount() {
        this.getPerusahaan()
        this.getUser()
    }

Deni Rinaldi's avatar
Deni Rinaldi committed
62 63
    selectTab = (event, newEvent) => {
        this.setState({ tab: newEvent })
Deni Rinaldi's avatar
Deni Rinaldi committed
64
    }
Deni Rinaldi's avatar
Deni Rinaldi committed
65

66 67 68
    handleChange(e) {
        let data = this.state
        this.setState({ ...data, [e.target.name]: e.target.value })
Deni Rinaldi's avatar
Deni Rinaldi committed
69
        // console.log(e.target.name);
Deni Rinaldi's avatar
Deni Rinaldi committed
70
        if (e.target.name === "password") {
EKSAD's avatar
EKSAD committed
71
            this.setState({ errorPassword: false, msgPassword: 'Consists of 8 Characters with a Combination of Numbers.' })
Deni Rinaldi's avatar
Deni Rinaldi committed
72
        } else if (e.target.name === "confirmPassword") {
EKSAD's avatar
EKSAD committed
73
            this.setState({ errorConfirmPassword: false, msgConfirmPassword: 'Consists of 8 Characters with a Combination of Numbers.' })
Deni Rinaldi's avatar
Deni Rinaldi committed
74
        } else if (e.target.name === "oldPassword") {
EKSAD's avatar
EKSAD committed
75
            this.setState({ errorOldPassword: false, msgOldPassword: 'Consists of 8 Characters with a Combination of Numbers.' })
76 77 78 79
        }
    }

    validasi() {
Deni Rinaldi's avatar
Deni Rinaldi committed
80
        if (this.state.oldPassword === "") {
EKSAD's avatar
EKSAD committed
81
            this.setState({ errorOldPassword: true, msgOldPassword: 'Old Password Cannot be Empty.' })
82
        } else if (this.state.oldPassword.length < 8) {
EKSAD's avatar
EKSAD committed
83
            this.setState({ errorOldPassword: true, msgOldPassword: 'Old Password Minimum 8 Characters.' })
84
        } else if (this.isEmail(this.state.oldPassword)) {
EKSAD's avatar
EKSAD committed
85
            this.setState({ errorOldPassword: true, msgOldPassword: 'Old Password Format Should Not Use Email.' })
86
        } else if (!this.isRegex(this.state.oldPassword)) {
EKSAD's avatar
EKSAD committed
87
            this.setState({ errorOldPassword: true, msgOldPassword: 'Old Password Must be a Combination of Characters, Letters and Numbers.' })
Deni Rinaldi's avatar
Deni Rinaldi committed
88
        } else if (this.state.password.trim() === "") {
Deni Rinaldi's avatar
Deni Rinaldi committed
89
            this.setState({ errorPassword: true, msgPassword: 'Password Cannot be Empty.' })
90
        } else if (this.state.password.length < 8) {
EKSAD's avatar
EKSAD committed
91
            this.setState({ errorPassword: true, msgPassword: 'Password Minimum 8 Characters.' })
92
        } else if (this.isEmail(this.state.password)) {
EKSAD's avatar
EKSAD committed
93
            this.setState({ errorPassword: true, msgPassword: 'Password Format Should Not Use Email.' })
94
        } else if (!this.isRegex(this.state.password)) {
EKSAD's avatar
EKSAD committed
95
            this.setState({ errorPassword: true, msgPassword: 'Password Must be a Combination of Characters, Letters and Numbers.' })
Deni Rinaldi's avatar
Deni Rinaldi committed
96
        } else if (this.state.confirmPassword.trim() === "") {
a.bairuha's avatar
a.bairuha committed
97
            this.setState({ errorConfirmPassword: true, msgConfirmPassword: 'Repeat Password Cannot be Empty.' })
98
        } else if (this.state.password !== this.state.confirmPassword) {
EKSAD's avatar
EKSAD committed
99
            this.setState({ errorConfirmPassword: true, msgConfirmPassword: 'Password Does Not Match.' })
100 101 102 103 104
        } else {
            this.confirmPassword()
        }
    }

Deni Rinaldi's avatar
Deni Rinaldi committed
105
    confirmPassword() {
106 107 108 109 110 111
        let body = {
            "old_password": this.state.oldPassword,
            "new_password": this.state.password,
            "confirm_password": this.state.confirmPassword
        }
        api.create().changePassword(body).then(response => {
Deni Rinaldi's avatar
Deni Rinaldi committed
112
            // console.log(response);
113
            if (response.data) {
a.bairuha's avatar
a.bairuha committed
114 115 116 117 118
                if (response.ok) {
                    if (response.data.status === "success") {
                        this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'success' })
                        this.setState({ oldPassword: "", password: "", confirmPassword: "" })
                        localStorage.removeItem(Constant.TOKEN)
a.bairuha's avatar
a.bairuha committed
119 120 121
                        setTimeout(() => {
                            window.location.reload();
                        }, 1000);
Deni Rinaldi's avatar
Deni Rinaldi committed
122 123
                    } else if (response.data.message === "Old Password is Not Correct") {
                        this.setState({ errorOldPassword: true, msgOldPassword: 'Incorrect password.' })
a.bairuha's avatar
a.bairuha committed
124
                    } else {
a.bairuha's avatar
a.bairuha committed
125
                        this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'warning' }, () => {
a.bairuha's avatar
a.bairuha committed
126
                            if (response.data.message.includes("Someone Logged In")) {
a.bairuha's avatar
a.bairuha committed
127 128 129 130 131 132
                                setTimeout(() => {
                                    localStorage.removeItem(Constant.TOKEN)
                                    window.location.reload();
                                }, 1000);
                            }
                        })
a.bairuha's avatar
a.bairuha committed
133 134 135
                    }
                } else {
                    this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'error' })
136
                }
a.bairuha's avatar
a.bairuha committed
137 138
            } else {
                this.setState({ alert: true, messageAlert: response.problem, tipeAlert: 'error' })
139 140 141 142 143 144
            }
        })
    }

    isRegex(value) {
        // const re = /^(?=.*[0-9])(?=.*[a-zA-Z])([a-zA-Z0-9]+)$/;
d.arizona's avatar
d.arizona committed
145 146 147
        const re = /^(?=.*[A-Za-z])(?=.*\d)(?=.*[@$!%*#?&])[A-Za-z\d@$!%*#?&]{1,}$/;
        return re.test(String(value));
        // return(value)
148 149 150 151 152 153 154
    }

    isEmail(email) {
        const re = /^(([^<>()\[\]\\.,;:\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,}))$/;
        return re.test(String(email).toLowerCase());
    }

Deni Rinaldi's avatar
Deni Rinaldi committed
155 156 157
    getUser() {
        let userId = localStorage.getItem(Constant.USER)
        api.create().getDetailUser(userId).then((response) => {
Deni Rinaldi's avatar
Deni Rinaldi committed
158
            // console.log(response);
a.bairuha's avatar
a.bairuha committed
159 160
            if (response.data) {
                if (response.ok) {
Deni Rinaldi's avatar
Deni Rinaldi committed
161
                    if (response.data.status === 'success') {
a.bairuha's avatar
a.bairuha committed
162
                        this.setState({ company: response.data.data.company, photo: response.data.data.photo, name: response.data.data.fullname })
Deni Rinaldi's avatar
Deni Rinaldi committed
163
                        // console.log(response)
a.bairuha's avatar
a.bairuha committed
164
                    } else {
a.bairuha's avatar
a.bairuha committed
165
                        this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'warning' }, () => {
a.bairuha's avatar
a.bairuha committed
166
                            if (response.data.message.includes("Someone Logged In")) {
a.bairuha's avatar
a.bairuha committed
167 168 169 170 171 172
                                setTimeout(() => {
                                    localStorage.removeItem(Constant.TOKEN)
                                    window.location.reload();
                                }, 1000);
                            }
                        })
a.bairuha's avatar
a.bairuha committed
173 174 175 176 177 178
                    }
                } else {
                    this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'error' })
                }
            } else {
                this.setState({ alert: true, messageAlert: response.problem, tipeAlert: 'error' })
Deni Rinaldi's avatar
Deni Rinaldi committed
179 180 181 182 183 184
            }
        })
    }

    getPerusahaan() {
        api.create().getPerusahaanHierarki().then((response) => {
Deni Rinaldi's avatar
Deni Rinaldi committed
185
            // console.log(response);
186
            if (response.data) {
a.bairuha's avatar
a.bairuha committed
187
                if (response.ok) {
Deni Rinaldi's avatar
Deni Rinaldi committed
188
                    if (response.data.status === 'success') {
a.bairuha's avatar
a.bairuha committed
189
                        this.setState({ listCompany: response.data.data })
Deni Rinaldi's avatar
Deni Rinaldi committed
190
                        // console.log(response.data.data)
a.bairuha's avatar
a.bairuha committed
191
                    } else {
a.bairuha's avatar
a.bairuha committed
192
                        this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'warning' }, () => {
a.bairuha's avatar
a.bairuha committed
193
                            if (response.data.message.includes("Someone Logged In")) {
a.bairuha's avatar
a.bairuha committed
194 195 196 197 198 199
                                setTimeout(() => {
                                    localStorage.removeItem(Constant.TOKEN)
                                    window.location.reload();
                                }, 1000);
                            }
                        })
a.bairuha's avatar
a.bairuha committed
200 201 202
                    }
                } else {
                    this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'error' })
203
                }
a.bairuha's avatar
a.bairuha committed
204 205
            } else {
                this.setState({ alert: true, messageAlert: response.problem, tipeAlert: 'error' })
Deni Rinaldi's avatar
Deni Rinaldi committed
206 207 208 209 210
            }
        })
    }

    handleItemChecked(item) {
Deni Rinaldi's avatar
Deni Rinaldi committed
211 212
        let indexID = this.state.company.findIndex((val) => val === item.id)
        return indexID === -1 ? false : true
Deni Rinaldi's avatar
Deni Rinaldi committed
213 214
    }

d.arizona's avatar
d.arizona committed
215 216 217 218 219 220 221 222
    renderChildren = (item, pad) => {
        let padding = null
        if (pad !== undefined) {
            padding = pad
        } else {
            padding = 20
        }
        return (
Deni Rinaldi's avatar
Deni Rinaldi committed
223 224 225 226 227 228 229 230 231
            <div>
                {item.children.length > 0 && (
                    <ul>
                        {item.children.map((data, index) => {
                            return (
                                // <li>
                                <Collapse key={index} timeout="auto" unmountOnExit in={item.collapse}>
                                    <div style={{ display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'flex-start', paddingLeft: R.isNil(data.children) ? (padding + 20) : padding }}>
                                        {R.isNil(data.children) ?
a.bairuha's avatar
a.bairuha committed
232 233
                                            null
                                            :
Deni Rinaldi's avatar
Deni Rinaldi committed
234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256
                                            data.children.length < 1 ?
                                                null
                                                :
                                                <span onClick={() => this.handleCollapse(data)} style={{ marginLeft: 7, marginRight: 2 }}>
                                                    {data.collapse ? <RemoveIcon color={'action'} fontSize={'small'} /> : <AddIcon color={'action'} fontSize={'small'} />}
                                                </span>
                                        }
                                        <span>
                                            <CustomCheckbox
                                                checked={this.handleItemChecked(data)}
                                                onChange={() => null}
                                            />
                                        </span>
                                        <Typography style={{ fontSize: 12 }}>{titleCase(data.company_name)}</Typography>
                                    </div>
                                    {!R.isNil(data.children) && this.renderChildren(data, padding + 20)}
                                </Collapse>
                                // </li>
                            )
                        })}
                    </ul>
                )}
            </div>
d.arizona's avatar
d.arizona committed
257 258 259 260
        )
    }

    handleCollapse(item) {
261
        let path = this.searchIt({ children: this.state.listCompany }, item.id)
d.arizona's avatar
d.arizona committed
262 263 264 265 266
        let listCompany = this.state.listCompany
        let arrayPath = []

        if (path.length > 1) {
            arrayPath = path.split('-');
267
            arrayPath = arrayPath.map((item) => { return item })
d.arizona's avatar
d.arizona committed
268 269 270 271 272
        } else {
            arrayPath.push(path)
        }

        let pathSelect = null
Deni Rinaldi's avatar
Deni Rinaldi committed
273
        if (arrayPath.length === 1) {
274
            pathSelect = listCompany[arrayPath[0]]
Deni Rinaldi's avatar
Deni Rinaldi committed
275
        } else if (arrayPath.length === 2) {
276
            pathSelect = listCompany[arrayPath[0]].children[arrayPath[1]]
Deni Rinaldi's avatar
Deni Rinaldi committed
277
        } else if (arrayPath.length === 3) {
278
            pathSelect = listCompany[arrayPath[0]].children[arrayPath[1]].children[arrayPath[2]]
Deni Rinaldi's avatar
Deni Rinaldi committed
279
        } else if (arrayPath.length === 4) {
280
            pathSelect = listCompany[arrayPath[0]].children[arrayPath[1]].children[arrayPath[2]].children[arrayPath[3]]
Deni Rinaldi's avatar
Deni Rinaldi committed
281
        } else if (arrayPath.length === 5) {
282
            pathSelect = listCompany[arrayPath[0]].children[arrayPath[1]].children[arrayPath[2]].children[arrayPath[3]].children[arrayPath[4]]
Deni Rinaldi's avatar
Deni Rinaldi committed
283
        } else if (arrayPath.length === 6) {
284
            pathSelect = listCompany[arrayPath[0]].children[arrayPath[1]].children[arrayPath[2]].children[arrayPath[3]].children[arrayPath[4]].children[arrayPath[5]]
Deni Rinaldi's avatar
Deni Rinaldi committed
285
        } else if (arrayPath.length === 7) {
286
            pathSelect = listCompany[arrayPath[0]].children[arrayPath[1]].children[arrayPath[2]].children[arrayPath[3]].children[arrayPath[4]].children[arrayPath[5]].children[arrayPath[6]]
d.arizona's avatar
d.arizona committed
287 288 289 290
        }

        pathSelect.collapse = !pathSelect.collapse
        // console.log(pathSelect.collapse)
291
        this.setState({ listCompany }, () => console.log(pathSelect))
d.arizona's avatar
d.arizona committed
292 293 294
    }

    searchIt = (node, search, path = '', position = 0) => {
295 296
        if (node.id && node.id === search) { return path !== '' ? `${path}-${position}` : position; }
        if (!node.children) { return false }
d.arizona's avatar
d.arizona committed
297
        const index = node.children.findIndex((x) => x.id && x.id === search);
d.arizona's avatar
d.arizona committed
298
        if (index >= 0) {
299
            return path !== '' ? `${path}-${index}` : index;
d.arizona's avatar
d.arizona committed
300
        }
d.arizona's avatar
d.arizona committed
301
        for (let i = 0; i < node.children.length; i++) {
302 303 304 305
            const result = this.searchIt(node.children[i], search, path !== '' ? `${path}-${i}` : i, i);
            if (result) {
                return result;
            }
d.arizona's avatar
d.arizona committed
306 307 308 309
        }
        return false;
    };

310
    async onDrop(pictureFiles) {
Deni Rinaldi's avatar
Deni Rinaldi committed
311 312
        console.log(pictureFiles);
        this.setState({ pictures: pictureFiles })
313 314 315 316 317 318 319 320
        // console.log(response);
        // console.log(pictureFiles);
        // console.log(pictureDataURLs);
        // this.setState({
        //     pictures: this.state.pictures.concat(pictureFiles),
        // });
    }

Deni Rinaldi's avatar
Deni Rinaldi committed
321
    async uploadFoto() {
Deni Rinaldi's avatar
Deni Rinaldi committed
322 323 324
        let formData = new FormData()
        formData.append('file', this.state.pictures[0])
        api.create().uploadFoto(formData).then(response => {
Deni Rinaldi's avatar
Deni Rinaldi committed
325
            // console.log(response)
Deni Rinaldi's avatar
Deni Rinaldi committed
326
            if (response.data) {
Deni Rinaldi's avatar
Deni Rinaldi committed
327
                if (response.ok) {
a.bairuha's avatar
a.bairuha committed
328 329 330
                    if (response.data.status === "success") {
                        this.setState({ uploadVisible: false }, () => {
                            this.getUser()
a.bairuha's avatar
a.bairuha committed
331 332 333 334 335
                            this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'success' }, () => {
                                setTimeout(() => {
                                    window.location.reload()
                                }, 1000);
                            })
a.bairuha's avatar
a.bairuha committed
336 337
                        })
                    } else {
a.bairuha's avatar
a.bairuha committed
338
                        this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'warning' }, () => {
a.bairuha's avatar
a.bairuha committed
339
                            if (response.data.message.includes("Someone Logged In")) {
a.bairuha's avatar
a.bairuha committed
340 341 342 343 344 345
                                setTimeout(() => {
                                    localStorage.removeItem(Constant.TOKEN)
                                    window.location.reload();
                                }, 1000);
                            }
                        })
a.bairuha's avatar
a.bairuha committed
346 347 348
                    }
                } else {
                    this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'error' })
Deni Rinaldi's avatar
Deni Rinaldi committed
349
                }
a.bairuha's avatar
a.bairuha committed
350 351
            } else {
                this.setState({ alert: true, messageAlert: response.problem, tipeAlert: 'error' })
Deni Rinaldi's avatar
Deni Rinaldi committed
352 353 354 355
            }
        })
    }

a.bairuha's avatar
a.bairuha committed
356
    closeAlert() {
Deni Rinaldi's avatar
Deni Rinaldi committed
357
        this.setState({ alert: false })
a.bairuha's avatar
a.bairuha committed
358 359
    }

Deni Rinaldi's avatar
Deni Rinaldi committed
360
    render() {
Deni Rinaldi's avatar
Deni Rinaldi committed
361
        return (
Deni Rinaldi's avatar
Deni Rinaldi committed
362
            <div style={{ height: this.props.height, backgroundColor: '#f8f8f8', marginBottom: 100, minHeight: 1000 }}>
a.bairuha's avatar
a.bairuha committed
363 364 365 366 367
                <Snackbar open={this.state.alert} autoHideDuration={6000} onClose={() => this.closeAlert()}>
                    <Alert onClose={() => this.closeAlert()} severity={this.state.tipeAlert}>
                        {this.state.messageAlert}
                    </Alert>
                </Snackbar>
Deni Rinaldi's avatar
Deni Rinaldi committed
368
                <div className={"main-color"} style={{ height: 195, flex: 1, display: 'flex', alignItems: 'flex-end', padding: 20 }}>
369 370 371 372 373 374 375 376 377 378 379 380 381 382 383 384 385
                    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', width: '100%' }}>
                        <div style={{ display: 'flex', alignItems: 'center' }}>
                            <div style={{ height: 72, width: 72, backgroundColor: 'white', borderRadius: 40, marginRight: 20 }}>
                                <img src={this.state.photo} style={{ width: 72, height: 72, borderRadius: 40 }} />
                            </div>
                            <Typography style={{ fontSize: '24px', color: 'white', fontWeight: 'bold' }}>{this.state.name}</Typography>
                        </div>
                        <div>
                            <button
                                style={{
                                    backgroundColor: 'transparent',
                                    cursor: 'pointer',
                                    borderColor: 'transparent',
                                }}
                                // onClick={() => console.log(tableMeta)}
                                onClick={() => this.setState({ uploadVisible: true })}
                            >
Deni Rinaldi's avatar
Deni Rinaldi committed
386
                                {/* <img src={Images.photo} /> */}
Deni Rinaldi's avatar
Deni Rinaldi committed
387
                                <div style={{ height: 30, objectFit: 'contain', backgroundColor: '#019ce5', borderRadius: 4, display: 'flex', alignContent: 'center', justifyContent: 'center', paddingLeft: 10, paddingRight: 10 }}>
Deni Rinaldi's avatar
Deni Rinaldi committed
388
                                    <img src={Images.camera} />
Deni Rinaldi's avatar
Deni Rinaldi committed
389
                                    <Typography style={{ color: '#ffffff', fontSize: 11, fontFamily: 'Nunito Sans, sans-serif', alignSelf: 'center', marginLeft: 5 }}>Change Picture</Typography>
Deni Rinaldi's avatar
Deni Rinaldi committed
390
                                </div>
391 392
                            </button>
                        </div>
Deni Rinaldi's avatar
Deni Rinaldi committed
393
                    </div>
Deni Rinaldi's avatar
Deni Rinaldi committed
394
                </div>
395

Deni Rinaldi's avatar
Deni Rinaldi committed
396 397 398
                <div>
                    <AppBar position="static">
                        <Tabs indicatorColor="primary" value={this.state.tab} onChange={this.selectTab} aria-label="simple tabs example" style={{ backgroundColor: '#f8f8f8', borderColor: 'transparent' }}>
Deni Rinaldi's avatar
Deni Rinaldi committed
399 400
                            <Tab label="PASSWORD" style={{ color: '#4b4b4b', fontSize: 11 }} />
                            <Tab label="AUTHORIZATION" style={{ color: '#4b4b4b', fontSize: 11 }} />
Deni Rinaldi's avatar
Deni Rinaldi committed
401 402
                        </Tabs>
                    </AppBar>
Deni Rinaldi's avatar
Deni Rinaldi committed
403
                    {this.state.tab === 0 ?
404 405 406 407 408 409 410
                        <form onSubmit={(e) => {
                            e.preventDefault()
                            this.validasi()
                        }}>
                            <div style={{ padding: 20, marginTop: 10, marginBottom: 100 }}>
                                <div style={{ width: 432, borderRadius: 6, boxShadow: '0 1px 4px 0 rgba(0, 0, 0, 0.25)' }}>
                                    <div style={{ width: '100%', height: 64, backgroundColor: '#354960', display: 'flex', paddingLeft: 20, borderTopLeftRadius: 6, borderTopRightRadius: 6, alignItems: 'center' }}>
Deni Rinaldi's avatar
Deni Rinaldi committed
411
                                        <Typography style={{ fontSize: '13px', color: 'white', fontWeight: 'bold' }}>Password</Typography>
412 413 414 415
                                    </div>
                                    <div style={{ padding: 20, justifyContent: 'space-between' }}>
                                        <TextField
                                            style={{ width: '100%' }}
Deni Rinaldi's avatar
Deni Rinaldi committed
416 417 418 419 420 421 422 423 424 425 426
                                            inputProps={{
                                                style: {
                                                    fontSize: 11
                                                }
                                            }}
                                            InputLabelProps={{
                                                style: {
                                                    fontSize: 11,
                                                    color: '#7e8085'
                                                }
                                            }}
427 428 429
                                            id="filled-required"
                                            name={"oldPassword"}
                                            type={this.state.showPass ? 'text' : 'password'}
Deni Rinaldi's avatar
Deni Rinaldi committed
430
                                            label="Old Password"
431 432 433 434 435 436 437 438 439 440 441 442 443 444 445 446 447 448 449 450 451 452
                                            value={this.state.oldPassword}
                                            variant="outlined"
                                            onChange={(password) => {
                                                this.handleChange(password)
                                            }}
                                            error={this.state.errorOldPassword}
                                            helperText={<Typography style={{ fontSize: 9, marginTop: 4, fontFamily: 'Nunito Sans, sans-serif' }}>{this.state.msgOldPassword}</Typography>}
                                            InputProps={{
                                                endAdornment: <InputAdornment position="end">
                                                    <IconButton
                                                        aria-label="toggle password visibility"
                                                        style={{ color: '#4b4b4b', opacity: 0.5 }}
                                                        onClick={() => this.setState({ showPass: !this.state.showPass })}
                                                        edge="end"
                                                    >
                                                        {this.state.showPass ? <Visibility style={{ fontSize: 18 }} /> : <VisibilityOff style={{ fontSize: 18 }} />}
                                                    </IconButton>
                                                </InputAdornment>,
                                            }}
                                        />
                                        <TextField
                                            style={{ width: '100%', marginTop: 20 }}
Deni Rinaldi's avatar
Deni Rinaldi committed
453 454 455 456 457 458 459 460 461 462 463
                                            inputProps={{
                                                style: {
                                                    fontSize: 11
                                                }
                                            }}
                                            InputLabelProps={{
                                                style: {
                                                    fontSize: 11,
                                                    color: '#7e8085'
                                                }
                                            }}
464
                                            id="filled-required"
Deni Rinaldi's avatar
Deni Rinaldi committed
465
                                            label="New Password"
466 467 468 469 470 471 472 473 474 475 476 477 478 479 480 481 482 483 484 485 486 487 488 489
                                            name={"password"}
                                            type={this.state.showPass2 ? 'text' : 'password'}
                                            value={this.state.password}
                                            onChange={(password) => {
                                                this.handleChange(password)
                                            }}
                                            error={this.state.errorPassword}
                                            helperText={<Typography style={{ fontSize: 9, marginTop: 4, fontFamily: 'Nunito Sans, sans-serif' }}>{this.state.msgPassword}</Typography>}
                                            variant="outlined"
                                            InputProps={{
                                                endAdornment: <InputAdornment position="end">
                                                    <IconButton
                                                        aria-label="toggle password visibility"
                                                        style={{ color: '#4b4b4b', opacity: 0.5 }}
                                                        onClick={() => this.setState({ showPass2: !this.state.showPass2 })}
                                                        edge="end"
                                                    >
                                                        {this.state.showPass2 ? <Visibility style={{ fontSize: 18 }} /> : <VisibilityOff style={{ fontSize: 18 }} />}
                                                    </IconButton>
                                                </InputAdornment>,
                                            }}
                                        />
                                        <TextField
                                            style={{ width: '100%', marginTop: 20 }}
Deni Rinaldi's avatar
Deni Rinaldi committed
490 491 492 493 494 495 496 497 498 499 500
                                            inputProps={{
                                                style: {
                                                    fontSize: 11
                                                }
                                            }}
                                            InputLabelProps={{
                                                style: {
                                                    fontSize: 11,
                                                    color: '#7e8085'
                                                }
                                            }}
501
                                            id="filled-required"
Deni Rinaldi's avatar
Deni Rinaldi committed
502
                                            label="Confirm Password"
503 504 505 506 507 508 509 510 511 512 513 514 515 516 517 518 519 520 521 522 523 524 525 526 527 528 529 530 531 532
                                            name={"confirmPassword"}
                                            type={this.state.showPass3 ? 'text' : 'password'}
                                            value={this.state.confirmPassword}
                                            onChange={(confirmPassword) => {
                                                this.handleChange(confirmPassword)
                                            }}
                                            variant="outlined"
                                            error={this.state.errorConfirmPassword}
                                            helperText={<Typography style={{ fontSize: 9, marginTop: 4, fontFamily: 'Nunito Sans, sans-serif' }}>{this.state.msgConfirmPassword}</Typography>}
                                            InputProps={{
                                                endAdornment: <InputAdornment position="end">
                                                    <IconButton
                                                        aria-label="toggle password visibility"
                                                        style={{ color: '#4b4b4b', opacity: 0.5 }}
                                                        onClick={() => this.setState({ showPass3: !this.state.showPass3 })}
                                                        edge="end"
                                                    >
                                                        {this.state.showPass3 ? <Visibility style={{ fontSize: 18 }} /> : <VisibilityOff style={{ fontSize: 18 }} />}
                                                    </IconButton>
                                                </InputAdornment>,
                                            }}
                                        />
                                    </div>
                                    <div style={{ width: '100%', backgroundColor: '#f5f5f5', height: 43, display: 'flex', justifyContent: 'flex-end', padding: 10, borderColor: 'rgba(0, 0, 0, 0.25)', borderWidth: .2, borderStyle: 'dotted' }}>
                                        <button
                                            type="submit"
                                            // onClick={() => this.validasi()}
                                            style={{}}
                                        >
                                            <div style={{ backgroundColor: '#354960', textAlign: 'center', height: 25, width: 64, borderRadius: 3 }}>
a.bairuha's avatar
a.bairuha committed
533
                                                <span style={{ color: 'white', fontSize: 11 }}>Save</span>
534 535 536
                                            </div>
                                        </button>
                                    </div>
Deni Rinaldi's avatar
Deni Rinaldi committed
537 538
                                </div>
                            </div>
539 540 541
                        </form>
                        :

Deni Rinaldi's avatar
Deni Rinaldi committed
542
                        <div style={{ padding: 20, marginTop: 10, marginBottom: 100 }}>
543 544
                            <div style={{ width: 432, borderRadius: 6, boxShadow: '0 1px 4px 0 rgba(0, 0, 0, 0.25)' }}>
                                <div style={{ width: '100%', height: 64, backgroundColor: '#354960', display: 'flex', paddingLeft: 20, borderTopLeftRadius: 6, borderTopRightRadius: 6, alignItems: 'center' }}>
Deni Rinaldi's avatar
Deni Rinaldi committed
545
                                    <Typography style={{ fontSize: '13px', color: 'white', fontWeight: 'bold' }}>Authorization</Typography>
Deni Rinaldi's avatar
Deni Rinaldi committed
546
                                </div>
Deni Rinaldi's avatar
Deni Rinaldi committed
547 548
                                <div style={{ padding: 20, overflow: 'scroll', height: '40vh' }}>
                                    {/* <div style={{ display: 'flex' }}>
549 550 551 552 553 554 555 556 557 558 559 560 561 562
                                        <img src={Images.check} style={{ marginRight: 10 }} />
                                        <Typography style={{ fontSize: 14, opacity: .5, color: '#4b4b4b' }}>Agro PersadaTriputra </Typography>
                                    </div>
                                    <div style={{ display: 'flex', marginTop: 20 }}>
                                        <img src={Images.check} style={{ marginRight: 10 }} />
                                        <Typography style={{ fontSize: 14, opacity: .5, color: '#4b4b4b' }}>Dharma Group</Typography>
                                    </div>
                                    <div style={{ display: 'flex', marginTop: 20, paddingLeft: 20 }}>
                                        <img src={Images.check} style={{ marginRight: 10 }} />
                                        <Typography style={{ fontSize: 14, opacity: .5, color: '#4b4b4b' }}>Dharma Polimetal</Typography>
                                    </div>
                                    <div style={{ display: 'flex', marginTop: 20, paddingLeft: 20 }}>
                                        <img src={Images.check} style={{ marginRight: 10 }} />
                                        <Typography style={{ fontSize: 14, opacity: .5, color: '#4b4b4b' }}>Dharma Poliplast</Typography>
Deni Rinaldi's avatar
Deni Rinaldi committed
563 564 565 566
                                    </div> */}
                                    {this.state.listCompany.map((item, index) => {
                                        return (
                                            <div>
d.arizona's avatar
d.arizona committed
567 568
                                                {/* <ul>
                                                    <li> */}
569 570 571 572 573 574 575 576 577 578 579 580 581 582
                                                <div style={{ display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'flex-start' }}>
                                                    {item.children.length > 0 && <span onClick={() => this.handleCollapse(item)} style={{ marginLeft: 7, marginRight: 2 }}>
                                                        {item.collapse ? <RemoveIcon color={'action'} fontSize={'small'} /> : <AddIcon color={'action'} fontSize={'small'} />}
                                                    </span>}
                                                    <span>
                                                        <CustomCheckbox
                                                            checked={this.handleItemChecked(item)}
                                                            onChange={() => null}
                                                        />
                                                    </span>
                                                    <Typography style={{ fontSize: 12 }}>{titleCase(item.company_name)}</Typography>
                                                </div>
                                                {!R.isNil(item.children) && this.renderChildren(item)}
                                                {/* </li>
d.arizona's avatar
d.arizona committed
583
                                                </ul> */}
Deni Rinaldi's avatar
Deni Rinaldi committed
584 585 586
                                            </div>
                                        )
                                    })}
Deni Rinaldi's avatar
Deni Rinaldi committed
587 588
                                </div>
                            </div>
Deni Rinaldi's avatar
Deni Rinaldi committed
589
                        </div>
Deni Rinaldi's avatar
Deni Rinaldi committed
590
                    }
Deni Rinaldi's avatar
Deni Rinaldi committed
591
                </div>
592 593 594 595 596 597 598 599 600 601 602 603 604 605 606 607 608 609 610 611 612
                {this.state.uploadVisible && (
                    <div className="test app-popup-show">
                        <div className="popup-content background-white border-radius" style={{ borderRadius: 8 }}>
                            <div className="popup-panel grid grid-2x main-color" style={{ height: 64, borderTopRightRadius: 8, borderTopLeftRadius: 8 }}>
                                <div className="col-1" style={{ maxWidth: "inherit", display: 'flex', alignItems: 'center' }}>
                                    <div className="popup-title">
                                        <span style={{ color: '#fff', fontSize: 16, fontWeight: 'bold' }}>Upload File</span>
                                    </div>
                                </div>
                                <div className="col-2 content-right" style={{ maxWidth: "inherit", alignSelf: 'center' }}>
                                    <button
                                        type="button"
                                        className="btn btn-circle btn-white"
                                        onClick={() => this.setState({ uploadVisible: false })}
                                    >
                                        <img src={Images.close} />
                                    </button>
                                </div>
                            </div>
                            <ImageUploader
                                withIcon={true}
Deni Rinaldi's avatar
Deni Rinaldi committed
613
                                withPreview
Deni Rinaldi's avatar
Deni Rinaldi committed
614 615
                                buttonStyles={this.state.pictures.length > 0 ? { display: 'none' } : null}
                                buttonText={'Select Picture'}
616 617
                                onChange={this.onDrop}
                                imgExtension={['.jpg', '.gif', '.png', '.gif', '.jpeg']}
Deni Rinaldi's avatar
Deni Rinaldi committed
618 619
                                maxFileSize={1000000}
                                label={"Max file size: 1 Mb, accepted: jpg or png"}
620
                            />
Deni Rinaldi's avatar
Deni Rinaldi committed
621 622 623 624
                            {this.state.pictures.length > 0 ?
                                <div style={{ display: 'grid', margin: 20 }}>
                                    <div style={{ justifySelf: 'center' }}>

Deni Rinaldi's avatar
Deni Rinaldi committed
625
                                        <span className="main-color" style={{ color: '#fff', padding: 20, paddingBottom: 10, paddingTop: 10, borderRadius: 15, cursor: 'pointer' }} onClick={() => this.uploadFoto()}>Upload</span>
Deni Rinaldi's avatar
Deni Rinaldi committed
626 627 628
                                    </div>
                                </div> : null
                            }
629 630 631
                        </div>
                    </div>
                )}
Deni Rinaldi's avatar
Deni Rinaldi committed
632
            </div>
633

Deni Rinaldi's avatar
Deni Rinaldi committed
634
        );
Deni Rinaldi's avatar
Deni Rinaldi committed
635
    }
Deni Rinaldi's avatar
Deni Rinaldi committed
636
}