Merge branch 'master' of http://103.44.149.204/d.arizona/tia-dev into riri

src/assets/sass/app.css

 .main-color{
-  background-color: #1a2d3e !important;
+  background-color: #273b80 !important;
 }
 
 .sub-color{
@@ -7,7 +7,7 @@
 }
 
 .blue-color{
-  color: #1a2d3e !important;
+  color: #273b80 !important;
 }
 
 .btn-save{

src/container/Home.js

@@ -76,7 +76,7 @@ const useStyles = makeStyles((theme) => ({
       easing: theme.transitions.easing.sharp,
       duration: theme.transitions.duration.enteringScreen,
     }),
-    backgroundColor: '#1a2d3e'
+    backgroundColor: '#273b80'
   },
   topleftClose: {
     borderRight: 0,
@@ -91,7 +91,7 @@ const useStyles = makeStyles((theme) => ({
       width: theme.spacing(7) + 1,
     },
     paddingLeft: 15,
-    backgroundColor: '#1a2d3e'
+    backgroundColor: '#273b80'
   },
   drawerOpen: {
     width: drawerWidth,

src/container/MasterData/UnitBisnis.js

@@ -430,8 +430,8 @@ export default class UnitBisnis extends Component {
                     </Alert>
                 </Snackbar>
                 {this.state.visibleUnitBisnis === true ?
-                    <div>
-                        {this.state.load && (
+                    this.state.load && (
+                        <div>
                             <div style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between', paddingRight: 25, paddingLeft: 25, marginTop: -118 }}>
                                 <label style={{ color: 'white', fontSize: 16, alignSelf: 'center', width: '20%', }}>Master Data - Business Unit</label>
                                 <div style={{ color: 'white', width: '50%', height: 37, display: 'flex', backgroundColor: 'white', borderWidth: 2, alignItems: 'center', borderRadius: 6, paddingLeft: 5, paddingRight: 5, alignSelf: 'center' }}>
@@ -508,19 +508,18 @@ export default class UnitBisnis extends Component {
                                     <ReactTooltip border={true} id="create" place="bottom" type="light" effect="solid" />
                                 </div>
                             </div>
-                        )}
-                        <div style={{ padding: 25 }}>
-                            <MuiThemeProvider theme={getMuiTheme()}>
-                                <MUIDataTable
-                                    theme={getMuiTheme()}
-                                    data={this.state.dataTable}
-                                    columns={columns}
-                                    options={options}
-                                />
-                            </MuiThemeProvider>
-
+                            <div style={{ padding: 25 }}>
+                                <MuiThemeProvider theme={getMuiTheme()}>
+                                    <MUIDataTable
+                                        theme={getMuiTheme()}
+                                        data={this.state.dataTable}
+                                        columns={columns}
+                                        options={options}
+                                    />
+                                </MuiThemeProvider>
+                            </div>
                         </div>
-                    </div>
+                    )
                     :
                     <div>
                         <div style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between', paddingRight: 25, paddingLeft: 25, marginTop: -150 }}>

src/container/ResetPassword.js

@@ -11,192 +11,195 @@ const Alert = withStyles({
 })((props) => <MuiAlert elevation={6} variant="filled" {...props} />);
 
 class ResetPassword extends Component {
-    constructor(props) {
-        super(props)
-        this.state = {
-            password: '',
-            confirmPassword: '',
-            showPass: false,
-            showPass2: false,
-            errorPassword: false,
-            errorConfirmPassword: false,
-            msgPassword: 'Consists of 8 characters with a combination of numbers.',
-            msgConfirmPassword: 'Consists of 8 characters with a combination of numbers.',
-            userId: 0,
-            alert: false,
-            tipeAlert: '',
-            messageAlert: ''            
-        }
+  constructor(props) {
+    super(props)
+    this.state = {
+      password: '',
+      confirmPassword: '',
+      showPass: false,
+      showPass2: false,
+      errorPassword: false,
+      errorConfirmPassword: false,
+      msgPassword: 'Consists of 8 characters with a combination of numbers.',
+      msgConfirmPassword: 'Consists of 8 characters with a combination of numbers.',
+      userId: 0,
+      alert: false,
+      tipeAlert: '',
+      messageAlert: ''
     }
+  }
 
-    componentDidMount() {
-      console.log(this.props.match.params.id)
-      let userId = this.props.match.params.id
-      this.setState({userId})
-      this.checkExpiredLink(userId)
-      // console.log(this.props)
-    }
+  componentDidMount() {
+    console.log(this.props.match.params.id)
+    let userId = this.props.match.params.id
+    this.setState({ userId })
+    this.checkExpiredLink(userId)
+    // console.log(this.props)
+  }
 
-    checkExpiredLink(userId) {
-        api.create().isResetPassword(userId).then((response) => {
-            if (response.data) {
-                if (response.data.status == 'success') {
-                    // 
-                } else {
-                    this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'warning' })  
-                    this.props.history.push('/login')
-                }
-            } else {
-                this.setState({ alert: true, messageAlert: response.problem, tipeAlert: 'error' }) 
-            }
-        })
-    }
+  checkExpiredLink(userId) {
+    api.create().isResetPassword(userId).then((response) => {
+      if (response.data) {
+        if (response.data.status == 'success') {
+          // 
+        } else {
+          this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'warning' })
+          this.props.history.push('/login')
+        }
+      } 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));
-    }
+  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());
+  }
 
-    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());
+  validateReset() {
+    if (this.state.password.trim() == "") {
+      this.setState({ errorPassword: true, msgPassword: 'Password is required' })
+    } 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: 'Confirm password is required.' })
+    } else if (this.state.confirmPassword.length < 8) {
+      this.setState({ errorConfirmPassword: true, msgConfirmPassword: 'Confirm password minimum 8 characters.' })
+    } else if (this.isEmail(this.state.confirmPassword)) {
+      this.setState({ errorConfirmPassword: true, msgConfirmPassword: 'Password confirmation format should not use email.' })
+    } else if (!this.isRegex(this.state.confirmPassword)) {
+      this.setState({ errorConfirmPassword: true, msgConfirmPassword: 'Password confirmation must be a combination of characters, letters and numbers.' })
+    } else if (this.state.password !== this.state.confirmPassword) {
+      this.setState({ errorConfirmPassword: true, msgConfirmPassword: 'Confirmation password must match the password.' })
+    } else {
+      this.confirmPassword()
     }
+  }
 
-    validateReset() {
-        if (this.state.password.trim() == "") {
-            this.setState({ errorPassword: true, msgPassword: 'Password is required' })
-        } 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: 'Confirm password is required.' })
-        } else if (this.state.confirmPassword.length < 8) {
-            this.setState({ errorConfirmPassword: true, msgConfirmPassword: 'Confirm password minimum 8 characters.' })
-        } else if (this.isEmail(this.state.confirmPassword)) {
-            this.setState({ errorConfirmPassword: true, msgConfirmPassword: 'Password confirmation format should not use email.' })
-        } else if (!this.isRegex(this.state.confirmPassword)) {
-            this.setState({ errorConfirmPassword: true, msgConfirmPassword: 'Password confirmation must be a combination of characters, letters and numbers.' })
-        } else if (this.state.password !== this.state.confirmPassword) {
-            this.setState({ errorConfirmPassword: true, msgConfirmPassword: 'Confirmation password must match the password.' })
+  confirmPassword() {
+    let payload = {
+      "password": this.state.password,
+      "confirm_password": this.state.confirmPassword,
+      "user_id": this.state.userId
+    }
+    api.create().resetPassword(payload).then((response) => {
+      if (response.data) {
+        if (response.ok) {
+          if (response.data.status === 'success') {
+            this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'success' }, () => {
+              setTimeout(() => {
+                this.props.history.push('/login')
+              }, 1000);
+            })
+          } else {
+            this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'warning' })
+          }
         } else {
-            this.confirmPassword()
+          this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'error' })
         }
-    }
-
-    confirmPassword() {
-      let payload = {
-        "password": this.state.password,
-        "confirm_password": this.state.confirmPassword,
-        "user_id": this.state.userId  
+      } else {
+        this.setState({ alert: true, messageAlert: response.problem, tipeAlert: 'error' })
       }
-      api.create().resetPassword(payload).then((response) => {
-            if (response.data) {
-                if (response.ok) {
-                    if(response.data.status === 'success') {
-                        this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'success' }) 
-                        this.props.history.push('/login')
-                    } else {
-                        this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'warning' }) 
-                    }
-                } 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 })
-    }
+  closeAlert() {
+    this.setState({ alert: false })
+  }
 
-    handleChange(e) {
-      let data = this.state
-      this.setState({...data, [e.target.name] : e.target.value})
-      if (e.target.name == "password") {
-        this.setState({ errorPassword: false, msgPassword: 'Password consists of 8 characters with a combination of numbers.' })
-      } else if (e.target.name == "confirmPassword") {
-          this.setState({ errorConfirmPassword: false, msgConfirmPassword: 'Confirm Password consists of 8 characters with a combination of numbers.' })
-      }
+  handleChange(e) {
+    let data = this.state
+    this.setState({ ...data, [e.target.name]: e.target.value })
+    if (e.target.name == "password") {
+      this.setState({ errorPassword: false, msgPassword: 'Password consists of 8 characters with a combination of numbers.' })
+    } else if (e.target.name == "confirmPassword") {
+      this.setState({ errorConfirmPassword: false, msgConfirmPassword: 'Confirm Password consists of 8 characters with a combination of numbers.' })
     }
+  }
 
-    render() {
-        return (
-          <div style={{ flex: 1, display: 'flex', backgroundColor: '#152d40', height: '100vh', justifyContent: 'center', alignItems: 'center' }}>
-            <Snackbar open={this.state.alert} autoHideDuration={6000} onClose={() => this.closeAlert()}>
-                <Alert onClose={() => this.closeAlert()} severity={this.state.tipeAlert}>
-                    {this.state.messageAlert}
-                </Alert>
-            </Snackbar>
-              <div style={{padding: 56, display: 'flex', flexDirection: 'column', width: 378, height: 415, borderRadius: 12, boxShadow: '0 2 4 0 rgba(0, 0, 0, 0.2)', backgroundColor: '#ffffff', justifyContent: 'center', alignItems: 'center' }}>
-                <img src={Images.tia}/>
+  render() {
+    return (
+      <div style={{ flex: 1, display: 'flex', backgroundColor: '#152d40', height: '100vh', justifyContent: 'center', alignItems: 'center' }}>
+        <Snackbar open={this.state.alert} autoHideDuration={6000} onClose={() => this.closeAlert()}>
+          <Alert onClose={() => this.closeAlert()} severity={this.state.tipeAlert}>
+            {this.state.messageAlert}
+          </Alert>
+        </Snackbar>
+        <div style={{ padding: 56, display: 'flex', flexDirection: 'column', width: 378, height: 415, borderRadius: 12, boxShadow: '0 2 4 0 rgba(0, 0, 0, 0.2)', backgroundColor: '#ffffff', justifyContent: 'center', alignItems: 'center' }}>
+          <img src={Images.tia} />
 
-                <TextField
-                  label={<Typography style={{fontSize: 12, fontFamily: 'Nunito Sans, sans-serif'}}>New password *</Typography>}
-                  id="password"
-                  type={this.state.showPass ? 'text' : 'password'}
-                  name={"password"}
-                  value={this.state.password}
-                  onChange={(password) => {
-                    this.handleChange(password)
-                  }}
-                  variant="outlined"
-                  error={this.state.errorPassword}
-                  style={{ width: 250, height: 51, marginTop: 32 }}
-                  helperText={<Typography style={{fontSize: 9, marginTop: 4, fontFamily: 'Nunito Sans, sans-serif'}}>{this.state.msgPassword}</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
+            label={<Typography style={{ fontSize: 12, fontFamily: 'Nunito Sans, sans-serif' }}>New password *</Typography>}
+            id="password"
+            type={this.state.showPass ? 'text' : 'password'}
+            name={"password"}
+            value={this.state.password}
+            onChange={(password) => {
+              this.handleChange(password)
+            }}
+            variant="outlined"
+            error={this.state.errorPassword}
+            style={{ width: 250, height: 51, marginTop: 32 }}
+            helperText={<Typography style={{ fontSize: 9, marginTop: 4, fontFamily: 'Nunito Sans, sans-serif' }}>{this.state.msgPassword}</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
-                  label={<Typography style={{fontSize: 12, fontFamily: 'Nunito Sans, sans-serif'}}>Repeat New Password *</Typography>}
-                  id="confirmPassword"
-                  type={this.state.showPass2 ? 'text' : 'password'}
-                  name={"confirmPassword"}
-                  value={this.state.confirmPassword}
-                  onChange={(confirmPassword) => {
-                    this.handleChange(confirmPassword)
-                  }}
-                  variant="outlined"
-                  error={this.state.errorConfirmPassword}
-                  style={{ width: 250, height: 51, marginTop: 45 }}
-                  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({showPass2: !this.state.showPass2})}
-                      edge="end"
-                    >
-                      {this.state.showPass2 ? <Visibility style={{fontSize: 18}} /> : <VisibilityOff style={{fontSize: 18}} />}
-                    </IconButton>
-                    </InputAdornment>,
-                  }}
-                />
+          <TextField
+            label={<Typography style={{ fontSize: 12, fontFamily: 'Nunito Sans, sans-serif' }}>Repeat New Password *</Typography>}
+            id="confirmPassword"
+            type={this.state.showPass2 ? 'text' : 'password'}
+            name={"confirmPassword"}
+            value={this.state.confirmPassword}
+            onChange={(confirmPassword) => {
+              this.handleChange(confirmPassword)
+            }}
+            variant="outlined"
+            error={this.state.errorConfirmPassword}
+            style={{ width: 250, height: 51, marginTop: 45 }}
+            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({ showPass2: !this.state.showPass2 })}
+                  edge="end"
+                >
+                  {this.state.showPass2 ? <Visibility style={{ fontSize: 18 }} /> : <VisibilityOff style={{ fontSize: 18 }} />}
+                </IconButton>
+              </InputAdornment>,
+            }}
+          />
 
-                <Button name="submit" variant="contained" disabled={this.state.password.trim() == '' && this.state.confirmPassword.trim() == '' ? true : false} onClick={() => this.validateReset()} style={{ marginTop: 50,  width: '100%', height: 35, borderRadius: 4, color: this.state.password.trim() == '' && this.state.confirmPassword.trim() == '' ? '#4b4b4b' : '#fff', backgroundColor: this.state.password.trim() == '' && this.state.confirmPassword.trim() == '' ? '#d8d8d8' : '#51c6ea' }}>
-                  <Typography style={{fontSize: 12, fontFamily: 'Nunito Sans, sans-serif'}}>Reset Password</Typography>
-                </Button>
-              </div>
-          </div>
-        );
-      }
+          <Button name="submit" variant="contained" disabled={this.state.password.trim() == '' && this.state.confirmPassword.trim() == '' ? true : false} onClick={() => this.validateReset()} style={{ marginTop: 50, width: '100%', height: 35, borderRadius: 4, color: this.state.password.trim() == '' && this.state.confirmPassword.trim() == '' ? '#4b4b4b' : '#fff', backgroundColor: this.state.password.trim() == '' && this.state.confirmPassword.trim() == '' ? '#d8d8d8' : '#51c6ea' }}>
+            <Typography style={{ fontSize: 12, fontFamily: 'Nunito Sans, sans-serif' }}>Reset Password</Typography>
+          </Button>
+        </div>
+      </div>
+    );
+  }
 }
 
 export default ResetPassword;
\ No newline at end of file