{"ast":null,"code":"var _jsxFileName = \"C:\\\\laragon\\\\www\\\\iot.mksolusi\\\\DriverOPCDA\\\\frontend\\\\src\\\\components\\\\pages\\\\Users\\\\UserFormAdd.jsx\";\nimport React from \"react\";\nimport { withStyles } from \"@material-ui/core/styles\";\nimport { Grid, Box, MenuItem } from \"@material-ui/core\";\nimport Button from \"@material-ui/core/Button\";\nimport { withRouter } from \"react-router-dom\";\nimport { ValidatorForm, TextValidator, SelectValidator } from \"react-material-ui-form-validator\";\nimport axios from \"axios\";\nimport { jsxDEV as _jsxDEV } from \"react/jsx-dev-runtime\";\n\nconst useStyles = theme => ({\n  root: {\n    \"& .MuiTextField-root\": {\n      margin: theme.spacing(1),\n      width: \"90%\"\n    }\n  },\n  gridColor: {\n    background: \"white\"\n  },\n  button: {\n    marginTop: theme.spacing(1),\n    color: \"#ffffff\",\n    background: theme.palette.success.main,\n    \"&:hover\": {\n      backgroundColor: theme.palette.success.dark,\n      borderColor: theme.palette.success.light,\n      boxShadow: \"none\"\n    }\n  },\n  form: {\n    background: \"white\"\n  },\n  textField: {\n    width: \"100%\",\n    marginTop: 10\n  },\n  selectField: {\n    width: \"100%\",\n    marginTop: 20\n  }\n});\n\nclass UserFormAdd extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n      user: {\n        email: \"\",\n        username: \"\",\n        name: \"\",\n        avatar: \"\",\n        roleid: \"\",\n        password: \"\",\n        repeatPassword: \"\"\n      },\n      roles: []\n    };\n\n    this.handleChange = event => {\n      const {\n        user\n      } = this.state;\n      user[event.target.name] = event.target.value;\n      this.setState({\n        user\n      });\n    };\n\n    this.handleSubmit = async () => {\n      const {\n        user\n      } = this.state;\n      const paramInsert = {\n        Email: user.email,\n        UserName: user.username,\n        Name: user.name,\n        Avatar: user.avatar,\n        RoleId: user.roleid,\n        Password: user.password\n      }; // save user data\n\n      await axios.post(process.env.REACT_APP_BASE_URL + \"/users\", paramInsert).then(res => {\n        const data = res.data;\n\n        if (data.success) {\n          alert(data.message);\n          this.onSuccess();\n        } else {\n          alert(data.message);\n        }\n      });\n    };\n\n    this.onSuccess = this.onSuccess.bind(this);\n  }\n\n  onSuccess(e) {\n    this.props.history.push(\"/users\");\n  }\n\n  async componentDidMount() {\n    // get data roles\n    await axios.get(process.env.REACT_APP_BASE_URL + \"/roles\").then(res => {\n      const roles = res.data.data;\n      this.setState({\n        roles: roles\n      });\n    }); // custom validation password\n\n    ValidatorForm.addValidationRule(\"isPasswordMatch\", value => {\n      if (value !== this.state.user.password) {\n        return false;\n      }\n\n      return true;\n    }); // custom validation username\n\n    ValidatorForm.addValidationRule(\"userName\", value => {\n      const nameRegex = /^[A-z]{2,}[A-z0-9]{0,}$/;\n\n      if (!value.match(nameRegex)) {\n        return false;\n      }\n\n      return true;\n    });\n  }\n\n  componentWillUnmount() {\n    // remove rule when it is not needed\n    ValidatorForm.removeValidationRule(\"isPasswordMatch\");\n    ValidatorForm.removeValidationRule(\"userName\");\n  }\n\n  render() {\n    const {\n      classes\n    } = this.props;\n    const {\n      user\n    } = this.state;\n    return /*#__PURE__*/_jsxDEV(Grid, {\n      container: true,\n      spacing: 1,\n      children: /*#__PURE__*/_jsxDEV(Grid, {\n        item: true,\n        lg: 5,\n        xs: 12,\n        children: /*#__PURE__*/_jsxDEV(Box, {\n          p: 3,\n          boxShadow: 3,\n          className: classes.form,\n          children: /*#__PURE__*/_jsxDEV(ValidatorForm, {\n            ref: \"form\",\n            onSubmit: this.handleSubmit,\n            onError: errors => console.log(errors),\n            children: [/*#__PURE__*/_jsxDEV(TextValidator, {\n              label: \"Email\",\n              onChange: this.handleChange,\n              name: \"email\",\n              value: user.email,\n              validators: [\"required\", \"isEmail\"],\n              errorMessages: [\"this field is required\", \"email is not valid\"],\n              className: classes.textField\n            }, void 0, false, {\n              fileName: _jsxFileName,\n              lineNumber: 145,\n              columnNumber: 15\n            }, this), /*#__PURE__*/_jsxDEV(TextValidator, {\n              label: \"Username\",\n              onChange: this.handleChange,\n              name: \"username\",\n              value: user.username,\n              validators: [\"required\", \"userName\"],\n              errorMessages: [\"this field is required\", \"Illegal Caracter in Username\"],\n              className: classes.textField\n            }, void 0, false, {\n              fileName: _jsxFileName,\n              lineNumber: 154,\n              columnNumber: 15\n            }, this), /*#__PURE__*/_jsxDEV(TextValidator, {\n              label: \"Full Name\",\n              onChange: this.handleChange,\n              name: \"name\",\n              value: user.name,\n              validators: [\"required\"],\n              errorMessages: [\"this field is required\"],\n              className: classes.textField\n            }, void 0, false, {\n              fileName: _jsxFileName,\n              lineNumber: 167,\n              columnNumber: 15\n            }, this), /*#__PURE__*/_jsxDEV(SelectValidator, {\n              id: \"demo-simple-select-helper\",\n              value: user.roleid,\n              onChange: this.handleChange,\n              validators: [\"required\"],\n              errorMessages: [\"this field is required\"],\n              className: classes.selectField,\n              name: \"roleid\",\n              children: [/*#__PURE__*/_jsxDEV(MenuItem, {\n                value: \"\",\n                children: /*#__PURE__*/_jsxDEV(\"em\", {\n                  children: \"None\"\n                }, void 0, false, {\n                  fileName: _jsxFileName,\n                  lineNumber: 187,\n                  columnNumber: 19\n                }, this)\n              }, void 0, false, {\n                fileName: _jsxFileName,\n                lineNumber: 186,\n                columnNumber: 17\n              }, this), this.state.roles.map((role, i) => /*#__PURE__*/_jsxDEV(MenuItem, {\n                value: role.id,\n                children: role.RoleName\n              }, role.id, false, {\n                fileName: _jsxFileName,\n                lineNumber: 190,\n                columnNumber: 19\n              }, this))]\n            }, void 0, true, {\n              fileName: _jsxFileName,\n              lineNumber: 177,\n              columnNumber: 15\n            }, this), /*#__PURE__*/_jsxDEV(TextValidator, {\n              label: \"Password\",\n              onChange: this.handleChange,\n              name: \"password\",\n              type: \"password\",\n              validators: [\"required\"],\n              errorMessages: [\"this field is required\"],\n              value: user.password,\n              className: classes.textField\n            }, void 0, false, {\n              fileName: _jsxFileName,\n              lineNumber: 196,\n              columnNumber: 15\n            }, this), /*#__PURE__*/_jsxDEV(TextValidator, {\n              label: \"Repeat password\",\n              onChange: this.handleChange,\n              name: \"repeatPassword\",\n              type: \"password\",\n              validators: [\"isPasswordMatch\", \"required\"],\n              errorMessages: [\"password mismatch\", \"this field is required\"],\n              value: user.repeatPassword,\n              className: classes.textField\n            }, void 0, false, {\n              fileName: _jsxFileName,\n              lineNumber: 206,\n              columnNumber: 15\n            }, this), /*#__PURE__*/_jsxDEV(Button, {\n              type: \"submit\",\n              className: classes.button,\n              children: \"Submit\"\n            }, void 0, false, {\n              fileName: _jsxFileName,\n              lineNumber: 217,\n              columnNumber: 15\n            }, this)]\n          }, void 0, true, {\n            fileName: _jsxFileName,\n            lineNumber: 140,\n            columnNumber: 13\n          }, this)\n        }, void 0, false, {\n          fileName: _jsxFileName,\n          lineNumber: 139,\n          columnNumber: 11\n        }, this)\n      }, void 0, false, {\n        fileName: _jsxFileName,\n        lineNumber: 138,\n        columnNumber: 9\n      }, this)\n    }, void 0, false, {\n      fileName: _jsxFileName,\n      lineNumber: 137,\n      columnNumber: 7\n    }, this);\n  }\n\n}\n\nexport default withRouter(withStyles(useStyles)(UserFormAdd));","map":{"version":3,"sources":["C:/laragon/www/iot.mksolusi/DriverOPCDA/frontend/src/components/pages/Users/UserFormAdd.jsx"],"names":["React","withStyles","Grid","Box","MenuItem","Button","withRouter","ValidatorForm","TextValidator","SelectValidator","axios","useStyles","theme","root","margin","spacing","width","gridColor","background","button","marginTop","color","palette","success","main","backgroundColor","dark","borderColor","light","boxShadow","form","textField","selectField","UserFormAdd","Component","constructor","props","state","user","email","username","name","avatar","roleid","password","repeatPassword","roles","handleChange","event","target","value","setState","handleSubmit","paramInsert","Email","UserName","Name","Avatar","RoleId","Password","post","process","env","REACT_APP_BASE_URL","then","res","data","alert","message","onSuccess","bind","e","history","push","componentDidMount","get","addValidationRule","nameRegex","match","componentWillUnmount","removeValidationRule","render","classes","errors","console","log","map","role","i","id","RoleName"],"mappings":"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","sourcesContent":["import React from \"react\";\r\nimport { withStyles } from \"@material-ui/core/styles\";\r\nimport { Grid, Box, MenuItem } from \"@material-ui/core\";\r\nimport Button from \"@material-ui/core/Button\";\r\nimport {  withRouter } from \"react-router-dom\";\r\n\r\nimport {\r\n  ValidatorForm,\r\n  TextValidator,\r\n  SelectValidator,\r\n} from \"react-material-ui-form-validator\";\r\nimport axios from \"axios\";\r\n\r\nconst useStyles = (theme) => ({\r\n  root: {\r\n    \"& .MuiTextField-root\": {\r\n      margin: theme.spacing(1),\r\n      width: \"90%\",\r\n    },\r\n  },\r\n  gridColor: {\r\n    background: \"white\",\r\n  },\r\n  button: {\r\n    marginTop: theme.spacing(1),\r\n    color: \"#ffffff\",\r\n    background: theme.palette.success.main,\r\n    \"&:hover\": {\r\n      backgroundColor: theme.palette.success.dark,\r\n      borderColor: theme.palette.success.light,\r\n      boxShadow: \"none\",\r\n    },\r\n  },\r\n  form: {\r\n    background: \"white\",\r\n  },\r\n  textField: {\r\n    width: \"100%\",\r\n    marginTop: 10,\r\n  },\r\n  selectField: {\r\n    width: \"100%\",\r\n    marginTop: 20,\r\n  },\r\n});\r\nclass UserFormAdd extends React.Component {\r\n  constructor(props) {\r\n    super(props);\r\n    this.onSuccess = this.onSuccess.bind(this);\r\n  }\r\n  state = {\r\n    user: {\r\n      email: \"\",\r\n      username: \"\",\r\n      name: \"\",\r\n      avatar: \"\",\r\n      roleid: \"\",\r\n      password: \"\",\r\n      repeatPassword: \"\",\r\n    },\r\n    roles: [],\r\n  };\r\n\r\n  onSuccess(e) {\r\n    this.props.history.push(\"/users\");\r\n  }\r\n\r\n  handleChange = (event) => {\r\n    const { user } = this.state;\r\n    user[event.target.name] = event.target.value;\r\n    this.setState({ user });\r\n  };\r\n\r\n  handleSubmit = async () => {\r\n    const { user } = this.state;\r\n    const paramInsert = {\r\n      Email: user.email,\r\n      UserName: user.username,\r\n      Name: user.name,\r\n      Avatar: user.avatar,\r\n      RoleId: user.roleid,\r\n      Password: user.password,\r\n    };\r\n\r\n    // save user data\r\n    await axios\r\n      .post(process.env.REACT_APP_BASE_URL + \"/users\", paramInsert)\r\n      .then((res) => {\r\n        const data = res.data;\r\n        if (data.success) {\r\n          alert(data.message);\r\n          this.onSuccess()\r\n        } else {\r\n          alert(data.message);\r\n        }\r\n      });\r\n  };\r\n\r\n  async componentDidMount() {\r\n      \r\n    // get data roles\r\n    await axios.get(process.env.REACT_APP_BASE_URL + \"/roles\").then((res) => {\r\n      const roles = res.data.data;\r\n      this.setState({\r\n        roles: roles,\r\n      });\r\n    });\r\n\r\n    // custom validation password\r\n    ValidatorForm.addValidationRule(\"isPasswordMatch\", (value) => {\r\n      if (value !== this.state.user.password) {\r\n        return false;\r\n      }\r\n      return true;\r\n    });\r\n    // custom validation username\r\n    ValidatorForm.addValidationRule(\"userName\", (value) => {\r\n      const nameRegex = /^[A-z]{2,}[A-z0-9]{0,}$/;\r\n      if (!value.match(nameRegex)) {\r\n        return false;\r\n      }\r\n      return true;\r\n    });\r\n  }\r\n\r\n  componentWillUnmount() {\r\n    // remove rule when it is not needed\r\n    ValidatorForm.removeValidationRule(\"isPasswordMatch\");\r\n    ValidatorForm.removeValidationRule(\"userName\");\r\n  }\r\n\r\n  render() {\r\n    const { classes } = this.props;\r\n    const { user } = this.state;\r\n\r\n    return (\r\n      <Grid container spacing={1}>\r\n        <Grid item lg={5} xs={12}>\r\n          <Box p={3} boxShadow={3} className={classes.form}>\r\n            <ValidatorForm\r\n              ref=\"form\"\r\n              onSubmit={this.handleSubmit}\r\n              onError={(errors) => console.log(errors)}\r\n            >\r\n              <TextValidator\r\n                label=\"Email\"\r\n                onChange={this.handleChange}\r\n                name=\"email\"\r\n                value={user.email}\r\n                validators={[\"required\", \"isEmail\"]}\r\n                errorMessages={[\"this field is required\", \"email is not valid\"]}\r\n                className={classes.textField}\r\n              />\r\n              <TextValidator\r\n                label=\"Username\"\r\n                onChange={this.handleChange}\r\n                name=\"username\"\r\n                value={user.username}\r\n                validators={[\"required\", \"userName\"]}\r\n                errorMessages={[\r\n                  \"this field is required\",\r\n                  \"Illegal Caracter in Username\",\r\n                ]}\r\n                className={classes.textField}\r\n              />\r\n\r\n              <TextValidator\r\n                label=\"Full Name\"\r\n                onChange={this.handleChange}\r\n                name=\"name\"\r\n                value={user.name}\r\n                validators={[\"required\"]}\r\n                errorMessages={[\"this field is required\"]}\r\n                className={classes.textField}\r\n              />\r\n\r\n              <SelectValidator\r\n                id=\"demo-simple-select-helper\"\r\n                value={user.roleid}\r\n                onChange={this.handleChange}\r\n                validators={[\"required\"]}\r\n                errorMessages={[\"this field is required\"]}\r\n                className={classes.selectField}\r\n                name=\"roleid\"\r\n              >\r\n                <MenuItem value=\"\">\r\n                  <em>None</em>\r\n                </MenuItem>\r\n                {this.state.roles.map((role, i) => (\r\n                  <MenuItem key={role.id} value={role.id}>\r\n                    {role.RoleName}\r\n                  </MenuItem>\r\n                ))}\r\n              </SelectValidator>\r\n\r\n              <TextValidator\r\n                label=\"Password\"\r\n                onChange={this.handleChange}\r\n                name=\"password\"\r\n                type=\"password\"\r\n                validators={[\"required\"]}\r\n                errorMessages={[\"this field is required\"]}\r\n                value={user.password}\r\n                className={classes.textField}\r\n              />\r\n              <TextValidator\r\n                label=\"Repeat password\"\r\n                onChange={this.handleChange}\r\n                name=\"repeatPassword\"\r\n                type=\"password\"\r\n                validators={[\"isPasswordMatch\", \"required\"]}\r\n                errorMessages={[\"password mismatch\", \"this field is required\"]}\r\n                value={user.repeatPassword}\r\n                className={classes.textField}\r\n              />\r\n\r\n              <Button type=\"submit\" className={classes.button}>\r\n                Submit\r\n              </Button>\r\n            </ValidatorForm>\r\n          </Box>\r\n        </Grid>\r\n      </Grid>\r\n    );\r\n  }\r\n}\r\n \r\nexport default withRouter(withStyles(useStyles)(UserFormAdd));\r\n"]},"metadata":{},"sourceType":"module"}