{"ast":null,"code":"import _regeneratorRuntime from\"C:/laragon/www/iot.mksolusi/DriverOPCDA/frontend/node_modules/babel-preset-react-app/node_modules/@babel/runtime/regenerator\";import _asyncToGenerator from\"C:/laragon/www/iot.mksolusi/DriverOPCDA/frontend/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/asyncToGenerator\";import _classCallCheck from\"C:/laragon/www/iot.mksolusi/DriverOPCDA/frontend/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/classCallCheck\";import _createClass from\"C:/laragon/www/iot.mksolusi/DriverOPCDA/frontend/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/createClass\";import _assertThisInitialized from\"C:/laragon/www/iot.mksolusi/DriverOPCDA/frontend/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/assertThisInitialized\";import _inherits from\"C:/laragon/www/iot.mksolusi/DriverOPCDA/frontend/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/inherits\";import _createSuper from\"C:/laragon/www/iot.mksolusi/DriverOPCDA/frontend/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/createSuper\";import React from\"react\";import{withStyles}from\"@material-ui/core/styles\";import{Grid,Box,MenuItem}from\"@material-ui/core\";import Button from\"@material-ui/core/Button\";import{withRouter}from\"react-router-dom\";import{ValidatorForm,TextValidator,SelectValidator}from\"react-material-ui-form-validator\";import axios from\"axios\";import{jsx as _jsx}from\"react/jsx-runtime\";import{jsxs as _jsxs}from\"react/jsx-runtime\";var useStyles=function useStyles(theme){return{root:{\"& .MuiTextField-root\":{margin:theme.spacing(1),width:\"90%\"}},gridColor:{background:\"white\"},button:{marginTop:theme.spacing(1),color:\"#ffffff\",background:theme.palette.success.main,\"&:hover\":{backgroundColor:theme.palette.success.dark,borderColor:theme.palette.success.light,boxShadow:\"none\"}},form:{background:\"white\"},textField:{width:\"100%\",marginTop:10},selectField:{width:\"100%\",marginTop:20}};};var UserFormAdd=/*#__PURE__*/function(_React$Component){_inherits(UserFormAdd,_React$Component);var _super=_createSuper(UserFormAdd);function UserFormAdd(props){var _this;_classCallCheck(this,UserFormAdd);_this=_super.call(this,props);_this.state={user:{email:\"\",username:\"\",name:\"\",avatar:\"\",roleid:\"\",password:\"\",repeatPassword:\"\"},roles:[]};_this.handleChange=function(event){var user=_this.state.user;user[event.target.name]=event.target.value;_this.setState({user:user});};_this.handleSubmit=/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee(){var user,paramInsert;return _regeneratorRuntime.wrap(function _callee$(_context){while(1){switch(_context.prev=_context.next){case 0:user=_this.state.user;paramInsert={Email:user.email,UserName:user.username,Name:user.name,Avatar:user.avatar,RoleId:user.roleid,Password:user.password};// save user data\n_context.next=4;return axios.post(process.env.REACT_APP_BASE_URL+\"/users\",paramInsert).then(function(res){var data=res.data;if(data.success){alert(data.message);_this.onSuccess();}else{alert(data.message);}});case 4:case\"end\":return _context.stop();}}},_callee);}));_this.onSuccess=_this.onSuccess.bind(_assertThisInitialized(_this));return _this;}_createClass(UserFormAdd,[{key:\"onSuccess\",value:function onSuccess(e){this.props.history.push(\"/users\");}},{key:\"componentDidMount\",value:function(){var _componentDidMount=_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee2(){var _this2=this;return _regeneratorRuntime.wrap(function _callee2$(_context2){while(1){switch(_context2.prev=_context2.next){case 0:_context2.next=2;return axios.get(process.env.REACT_APP_BASE_URL+\"/roles\").then(function(res){var roles=res.data.data;_this2.setState({roles:roles});});case 2:// custom validation password\nValidatorForm.addValidationRule(\"isPasswordMatch\",function(value){if(value!==_this2.state.user.password){return false;}return true;});// custom validation username\nValidatorForm.addValidationRule(\"userName\",function(value){var nameRegex=/^[A-z]{2,}[A-z0-9]{0,}$/;if(!value.match(nameRegex)){return false;}return true;});case 4:case\"end\":return _context2.stop();}}},_callee2);}));function componentDidMount(){return _componentDidMount.apply(this,arguments);}return componentDidMount;}()},{key:\"componentWillUnmount\",value:function componentWillUnmount(){// remove rule when it is not needed\nValidatorForm.removeValidationRule(\"isPasswordMatch\");ValidatorForm.removeValidationRule(\"userName\");}},{key:\"render\",value:function render(){var classes=this.props.classes;var user=this.state.user;return/*#__PURE__*/_jsx(Grid,{container:true,spacing:1,children:/*#__PURE__*/_jsx(Grid,{item:true,lg:5,xs:12,children:/*#__PURE__*/_jsx(Box,{p:3,boxShadow:3,className:classes.form,children:/*#__PURE__*/_jsxs(ValidatorForm,{ref:\"form\",onSubmit:this.handleSubmit,onError:function onError(errors){return console.log(errors);},children:[/*#__PURE__*/_jsx(TextValidator,{label:\"Email\",onChange:this.handleChange,name:\"email\",value:user.email,validators:[\"required\",\"isEmail\"],errorMessages:[\"this field is required\",\"email is not valid\"],className:classes.textField}),/*#__PURE__*/_jsx(TextValidator,{label:\"Username\",onChange:this.handleChange,name:\"username\",value:user.username,validators:[\"required\",\"userName\"],errorMessages:[\"this field is required\",\"Illegal Caracter in Username\"],className:classes.textField}),/*#__PURE__*/_jsx(TextValidator,{label:\"Full Name\",onChange:this.handleChange,name:\"name\",value:user.name,validators:[\"required\"],errorMessages:[\"this field is required\"],className:classes.textField}),/*#__PURE__*/_jsxs(SelectValidator,{id:\"demo-simple-select-helper\",value:user.roleid,onChange:this.handleChange,validators:[\"required\"],errorMessages:[\"this field is required\"],className:classes.selectField,name:\"roleid\",children:[/*#__PURE__*/_jsx(MenuItem,{value:\"\",children:/*#__PURE__*/_jsx(\"em\",{children:\"None\"})}),this.state.roles.map(function(role,i){return/*#__PURE__*/_jsx(MenuItem,{value:role.id,children:role.RoleName},role.id);})]}),/*#__PURE__*/_jsx(TextValidator,{label:\"Password\",onChange:this.handleChange,name:\"password\",type:\"password\",validators:[\"required\"],errorMessages:[\"this field is required\"],value:user.password,className:classes.textField}),/*#__PURE__*/_jsx(TextValidator,{label:\"Repeat password\",onChange:this.handleChange,name:\"repeatPassword\",type:\"password\",validators:[\"isPasswordMatch\",\"required\"],errorMessages:[\"password mismatch\",\"this field is required\"],value:user.repeatPassword,className:classes.textField}),/*#__PURE__*/_jsx(Button,{type:\"submit\",className:classes.button,children:\"Submit\"})]})})})});}}]);return UserFormAdd;}(React.Component);export 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","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","get","addValidationRule","nameRegex","match","removeValidationRule","classes","errors","console","log","map","role","i","id","RoleName","Component"],"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"}