import React, { Component } from 'react'; import { Typography, AppBar, Tabs, Tab, TextField, Snackbar, Collapse, withStyles, Checkbox, InputAdornment, IconButton } from '@material-ui/core'; import Visibility from '@material-ui/icons/Visibility'; import VisibilityOff from '@material-ui/icons/VisibilityOff'; import MuiAlert from '@material-ui/lab/Alert'; import Images from '../assets/Images'; import api from '../api'; import Constant from '../library/Constant'; import RemoveIcon from '@material-ui/icons/Remove'; import AddIcon from '@material-ui/icons/Add'; import { titleCase } from '../library/Utils'; import * as R from 'ramda' import ImageUploader from 'react-images-upload'; const CustomCheckbox = withStyles({ root: { color: '#51c6ea', '&$checked': { color: '#51c6ea', }, }, checked: {}, })((props) => <Checkbox color="default" {...props} />); const Alert = withStyles({ })((props) => <MuiAlert elevation={6} variant="filled" {...props} />); export default class Profile extends Component { constructor(props) { super(props) this.state = { tab: 0, oldPassword: '', password: '', confirmPassword: '', errorOldPassword: false, errorPassword: false, errorConfirmPassword: false, 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.', company: [], listCompany: [], selectedIndex: 0, showPass: false, showPass2: false, showPass3: false, pictures: [], name: "", alert: false, tipeAlert: '', messageAlert: '' } this.onDrop = this.onDrop.bind(this); } componentDidMount() { this.getPerusahaan() this.getUser() } selectTab = (event, newEvent) => { this.setState({ tab: newEvent }) } handleChange(e) { let data = this.state this.setState({ ...data, [e.target.name]: e.target.value }) // console.log(e.target.name); if (e.target.name === "password") { this.setState({ errorPassword: false, msgPassword: 'Consists of 8 Characters with a Combination of Numbers.' }) } else if (e.target.name === "confirmPassword") { this.setState({ errorConfirmPassword: false, msgConfirmPassword: 'Consists of 8 Characters with a Combination of Numbers.' }) } else if (e.target.name === "oldPassword") { this.setState({ errorOldPassword: false, msgOldPassword: 'Consists of 8 Characters with a Combination of Numbers.' }) } } validasi() { if (this.state.oldPassword === "") { this.setState({ errorOldPassword: true, msgOldPassword: 'Old Password Cannot be Empty.' }) } else if (this.state.oldPassword.length < 8) { this.setState({ errorOldPassword: true, msgOldPassword: 'Old Password Minimum 8 Characters.' }) } else if (this.isEmail(this.state.oldPassword)) { this.setState({ errorOldPassword: true, msgOldPassword: 'Old Password Format Should Not Use Email.' }) } else if (!this.isRegex(this.state.oldPassword)) { this.setState({ errorOldPassword: true, msgOldPassword: 'Old Password Must be a Combination of Characters, Letters and Numbers.' }) } else if (this.state.password.trim() === "") { this.setState({ errorPassword: true, msgPassword: 'Password Cannot be Empty.' }) } else if (this.state.password.length < 8) { this.setState({ errorPassword: true, msgPassword: 'Password Minimum 8 Characters.' }) } else if (this.isEmail(this.state.password)) { this.setState({ errorPassword: true, msgPassword: 'Password Format Should Not Use Email.' }) } else if (!this.isRegex(this.state.password)) { this.setState({ errorPassword: true, msgPassword: 'Password Must be a Combination of Characters, Letters and Numbers.' }) } else if (this.state.confirmPassword.trim() === "") { this.setState({ errorConfirmPassword: true, msgConfirmPassword: 'Repeat Password Cannot be Empty.' }) } else if (this.state.password !== this.state.confirmPassword) { this.setState({ errorConfirmPassword: true, msgConfirmPassword: 'Password Does Not Match.' }) } else { this.confirmPassword() } } confirmPassword() { let body = { "old_password": this.state.oldPassword, "new_password": this.state.password, "confirm_password": this.state.confirmPassword } api.create().changePassword(body).then(response => { // console.log(response); if (response.data) { 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) setTimeout(() => { window.location.reload(); }, 1000); } else if (response.data.message === "Old Password is Not Correct") { this.setState({ errorOldPassword: true, msgOldPassword: 'Incorrect password.' }) } else { this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'warning' }, () => { if (response.data.message.includes("Someone Logged In")) { setTimeout(() => { localStorage.removeItem(Constant.TOKEN) window.location.reload(); }, 1000); } }) } } else { this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'error' }) } } else { this.setState({ alert: true, messageAlert: response.problem, tipeAlert: 'error' }) } }) } isRegex(value) { // const re = /^(?=.*[0-9])(?=.*[a-zA-Z])([a-zA-Z0-9]+)$/; const re = /^(?=.*[A-Za-z])(?=.*\d)(?=.*[@$!%*#?&])[A-Za-z\d@$!%*#?&]{1,}$/; return re.test(String(value)); } 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()); } getUser() { let userId = localStorage.getItem(Constant.USER) api.create().getDetailUser(userId).then((response) => { // console.log(response); if (response.data) { if (response.ok) { if (response.data.status === 'success') { this.setState({ company: response.data.data.company, photo: response.data.data.photo, name: response.data.data.fullname }) // console.log(response) } else { this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'warning' }, () => { if (response.data.message.includes("Someone Logged In")) { setTimeout(() => { localStorage.removeItem(Constant.TOKEN) window.location.reload(); }, 1000); } }) } } else { this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'error' }) } } else { this.setState({ alert: true, messageAlert: response.problem, tipeAlert: 'error' }) } }) } getPerusahaan() { api.create().getPerusahaanHierarki().then((response) => { // console.log(response); if (response.data) { if (response.ok) { if (response.data.status === 'success') { this.setState({ listCompany: response.data.data }) // console.log(response.data.data) } else { this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'warning' }, () => { if (response.data.message.includes("Someone Logged In")) { setTimeout(() => { localStorage.removeItem(Constant.TOKEN) window.location.reload(); }, 1000); } }) } } else { this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'error' }) } } else { this.setState({ alert: true, messageAlert: response.problem, tipeAlert: 'error' }) } }) } handleItemChecked(item) { let indexID = this.state.company.findIndex((val) => val === item.id) return indexID === -1 ? false : true } renderChildren = (item, pad) => { let padding = null if (pad !== undefined) { padding = pad } else { padding = 20 } return ( <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) ? null : 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> ) } handleCollapse(item) { let path = this.searchIt({ children: this.state.listCompany }, item.id) let listCompany = this.state.listCompany let arrayPath = [] if (path.length > 1) { arrayPath = path.split('-'); arrayPath = arrayPath.map((item) => { return item }) } else { arrayPath.push(path) } let pathSelect = null if (arrayPath.length === 1) { pathSelect = listCompany[arrayPath[0]] } else if (arrayPath.length === 2) { pathSelect = listCompany[arrayPath[0]].children[arrayPath[1]] } else if (arrayPath.length === 3) { pathSelect = listCompany[arrayPath[0]].children[arrayPath[1]].children[arrayPath[2]] } else if (arrayPath.length === 4) { pathSelect = listCompany[arrayPath[0]].children[arrayPath[1]].children[arrayPath[2]].children[arrayPath[3]] } else if (arrayPath.length === 5) { pathSelect = listCompany[arrayPath[0]].children[arrayPath[1]].children[arrayPath[2]].children[arrayPath[3]].children[arrayPath[4]] } else if (arrayPath.length === 6) { pathSelect = listCompany[arrayPath[0]].children[arrayPath[1]].children[arrayPath[2]].children[arrayPath[3]].children[arrayPath[4]].children[arrayPath[5]] } else if (arrayPath.length === 7) { pathSelect = listCompany[arrayPath[0]].children[arrayPath[1]].children[arrayPath[2]].children[arrayPath[3]].children[arrayPath[4]].children[arrayPath[5]].children[arrayPath[6]] } pathSelect.collapse = !pathSelect.collapse // console.log(pathSelect.collapse) this.setState({ listCompany }, () => console.log(pathSelect)) } searchIt = (node, search, path = '', position = 0) => { if (node.id && node.id === search) { return path !== '' ? `${path}-${position}` : position; } if (!node.children) { return false } const index = node.children.findIndex((x) => x.id && x.id === search); if (index >= 0) { return path !== '' ? `${path}-${index}` : index; } for (let i = 0; i < node.children.length; i++) { const result = this.searchIt(node.children[i], search, path !== '' ? `${path}-${i}` : i, i); if (result) { return result; } } return false; }; async onDrop(pictureFiles) { console.log(pictureFiles); this.setState({ pictures: pictureFiles }) // console.log(response); // console.log(pictureFiles); // console.log(pictureDataURLs); // this.setState({ // pictures: this.state.pictures.concat(pictureFiles), // }); } async uploadFoto() { let formData = new FormData() formData.append('file', this.state.pictures[0]) api.create().uploadFoto(formData).then(response => { // console.log(response) if (response.data) { if (response.ok) { if (response.data.status === "success") { this.setState({ uploadVisible: false }, () => { this.getUser() this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'success' }, () => { setTimeout(() => { window.location.reload() }, 1000); }) }) } else { this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'warning' }, () => { if (response.data.message.includes("Someone Logged In")) { setTimeout(() => { localStorage.removeItem(Constant.TOKEN) window.location.reload(); }, 1000); } }) } } else { this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'error' }) } } else { this.setState({ alert: true, messageAlert: response.problem, tipeAlert: 'error' }) } }) } closeAlert() { this.setState({ alert: false }) } render() { return ( <div style={{ height: this.props.height, backgroundColor: '#f8f8f8', marginBottom: 100, minHeight: 1000 }}> <Snackbar open={this.state.alert} autoHideDuration={6000} onClose={() => this.closeAlert()}> <Alert onClose={() => this.closeAlert()} severity={this.state.tipeAlert}> {this.state.messageAlert} </Alert> </Snackbar> <div className={"main-color"} style={{ height: 195, flex: 1, display: 'flex', alignItems: 'flex-end', padding: 20 }}> <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 })} > {/* <img src={Images.photo} /> */} <div style={{ height: 30, objectFit: 'contain', backgroundColor: '#019ce5', borderRadius: 4, display: 'flex', alignContent: 'center', justifyContent: 'center', paddingLeft: 10, paddingRight: 10 }}> <img src={Images.camera} /> <Typography style={{ color: '#ffffff', fontSize: 11, fontFamily: 'Nunito Sans, sans-serif', alignSelf: 'center', marginLeft: 5 }}>Change Picture</Typography> </div> </button> </div> </div> </div> <div> <AppBar position="static"> <Tabs indicatorColor="primary" value={this.state.tab} onChange={this.selectTab} aria-label="simple tabs example" style={{ backgroundColor: '#f8f8f8', borderColor: 'transparent' }}> <Tab label="PASSWORD" style={{ color: '#4b4b4b', fontSize: 11 }} /> <Tab label="AUTHORIZATION" style={{ color: '#4b4b4b', fontSize: 11 }} /> </Tabs> </AppBar> {this.state.tab === 0 ? <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' }}> <Typography style={{ fontSize: '13px', color: 'white', fontWeight: 'bold' }}>Password</Typography> </div> <div style={{ padding: 20, justifyContent: 'space-between' }}> <TextField style={{ width: '100%' }} inputProps={{ style: { fontSize: 11 } }} InputLabelProps={{ style: { fontSize: 11, color: '#7e8085' } }} id="filled-required" name={"oldPassword"} type={this.state.showPass ? 'text' : 'password'} label="Old Password" 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 }} inputProps={{ style: { fontSize: 11 } }} InputLabelProps={{ style: { fontSize: 11, color: '#7e8085' } }} id="filled-required" label="New Password" 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 }} inputProps={{ style: { fontSize: 11 } }} InputLabelProps={{ style: { fontSize: 11, color: '#7e8085' } }} id="filled-required" label="Confirm Password" 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 }}> <span style={{ color: 'white', fontSize: 11 }}>Save</span> </div> </button> </div> </div> </div> </form> : <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' }}> <Typography style={{ fontSize: '13px', color: 'white', fontWeight: 'bold' }}>Authorization</Typography> </div> <div style={{ padding: 20, overflow: 'scroll', height: '40vh' }}> {/* <div style={{ display: 'flex' }}> <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> </div> */} {this.state.listCompany.map((item, index) => { return ( <div> {/* <ul> <li> */} <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> </ul> */} </div> ) })} </div> </div> </div> } </div> {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} withPreview buttonStyles={this.state.pictures.length > 0 ? { display: 'none' } : null} buttonText={'Select Picture'} onChange={this.onDrop} imgExtension={['.jpg', '.gif', '.png', '.gif', '.jpeg']} maxFileSize={1000000} label={"Max file size: 1 Mb, accepted: jpg or png"} /> {this.state.pictures.length > 0 ? <div style={{ display: 'grid', margin: 20 }}> <div style={{ justifySelf: 'center' }}> <span className="main-color" style={{ color: '#fff', padding: 20, paddingBottom: 10, paddingTop: 10, borderRadius: 15, cursor: 'pointer' }} onClick={() => this.uploadFoto()}>Upload</span> </div> </div> : null } </div> </div> )} </div> ); } }