SHARE
TWEET

CreateUserDialog

a guest Aug 14th, 2019 104 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. import React, {
  2.     useEffect,
  3.     useState,
  4. } from 'react';
  5. import {
  6.     Modal,
  7.     ModalHeader,
  8.     ModalBody,
  9.     ModalFooter,
  10.     Container,
  11.     Button,
  12.     Input,
  13.     Form,
  14. } from 'reactstrap';
  15. import connect from 'react-redux/es/connect/connect';
  16. import {
  17.     createUser,
  18.     editUser,
  19.     getRoles,
  20. } from '../../redux/user/actions';
  21. import localization from '../../helpers/localizationHelper';
  22. import validatePassword from '../../helpers/usersHelper';
  23.  
  24. const CreateUserDialog = (props) => {
  25.     const [personalData, setPersonalData] = useState({
  26.         firstName: '',
  27.         lastName: '',
  28.         email: '',
  29.         role: '',
  30.         password: '',
  31.         confirmPassword: '',
  32.         passwordError: false,
  33.         passwordChanged: false,
  34.         roles: [],
  35.     });
  36.  
  37.     useEffect(() => {
  38.         const User = { ...personalData };
  39.         props.getRoles().then((res) => {
  40.             User.roles = res;
  41.             if (props.edit) {
  42.                 User.firstName = props.user.firstName;
  43.                 User.lastName = props.user.lastName;
  44.                 User.email = props.user.email;
  45.                 User.role = props.user.role;
  46.                 User.password = props.user.password;
  47.                 User.confirmPassword = props.user.password;
  48.             }
  49.             setPersonalData(User);
  50.         });
  51.     }, []);
  52.  
  53.     const handleError = errorExists => {
  54.         const User = { ...personalData };
  55.         User.passwordError = errorExists ;
  56.         setPersonalData(User);
  57.     };
  58.  
  59.     const handleEditUser = () => {
  60.         if (personalData.passwordChanged && personalData.password !== personalData.confirmPassword) {
  61.             handleError(true);
  62.             return;
  63.         }
  64.  
  65.         const user = {
  66.             _id: props.user._id,
  67.             firstName: personalData.firstName,
  68.             lastName: personalData.lastName,
  69.             email: personalData.email,
  70.             role: personalData.role,
  71.         };
  72.  
  73.         if (personalData.passwordChanged && personalData.password === personalData.confirmPassword) {
  74.             user.password = personalData.password;
  75.         }
  76.  
  77.         props.editUser(user);
  78.     };
  79.     const handleCreateUser = () => {
  80.         if (personalData.password === personalData.confirmPassword) {
  81.             const user = {
  82.                 firstName: personalData.firstName,
  83.                 lastName: personalData.lastName,
  84.                 email: personalData.email,
  85.                 role: personalData.role,
  86.                 password: personalData.password,
  87.             };
  88.             props.createUser(user);
  89.             props.handleCancel();
  90.         } else {
  91.             handleError(true);
  92.         }
  93.     };
  94.     const onPasswordChange = event => {
  95.         const User = { ...personalData };
  96.         const newPassword = event.target.value;
  97.         User.passwordError = newPassword !== personalData.password || !validatePassword(newPassword) || !validatePassword(newPassword.length);
  98.         User[event.target.id] = newPassword;
  99.         setPersonalData(User);
  100.     };
  101.  
  102.     const onInputChange = event => {
  103.         const User = { ...personalData };
  104.         User[event.target.id] = event.target.value;
  105.         setPersonalData(User);
  106.     };
  107.  
  108.     const {
  109.         opened,
  110.         handleCancel,
  111.     } = props;
  112.  
  113.     return (
  114.         <Container>
  115.             <Modal isOpen={opened}>
  116.                 <ModalHeader id="form-dialog-title">{localization.createUserDialog.user}</ModalHeader>
  117.                 <ModalBody>
  118.                     <Input
  119.                         autoFocus
  120.                         margin="dense"
  121.                         id="firstName"
  122.                         placeholder={localization.createUserDialog.firstName}
  123.                         type="text"
  124.                         required
  125.                         value={personalData.firstName}
  126.                         onChange={(e) => onInputChange(e)}
  127.                     />
  128.                     <Input
  129.                         margin="dense"
  130.                         id="lastName"
  131.                         placeholder={localization.createUserDialog.lastName}
  132.                         type="text"
  133.                         required
  134.                         value={personalData.lastName}
  135.                         onChange={(e) => onInputChange(e)}
  136.                     />
  137.                     <Input
  138.                         margin="dense"
  139.                         id="email"
  140.                         placeholder={localization.createUserDialog.email}
  141.                         type="email"
  142.                         required
  143.                         value={personalData.email}
  144.                         onChange={(e) => onInputChange(e)}
  145.                     />
  146.                     <Form>
  147.                         <Input type="select" value={personalData.role} id="role" onChange={(e) => onInputChange(e)}>
  148.                             {
  149.                                 Object.entries(personalData.roles)
  150.                                     .map(r => <option key={r[0]} value={r[0]}>{r[1]}</option>)
  151.                             }
  152.                         </Input>
  153.                     </Form>
  154.                     <Input
  155.                         margin="dense"
  156.                         id="password"
  157.                         placeholder={localization.createUserDialog.password}
  158.                         type="password"
  159.                         required
  160.                         value={personalData.password}
  161.                         onChange={(e) => onPasswordChange(e)}
  162.                     />
  163.                     <Input
  164.                         margin="dense"
  165.                         id="confirmPassword"
  166.                         placeholder={localization.createUserDialog.confirmPassword}
  167.                         type="password"
  168.                         required
  169.                         value={personalData.confirmPassword}
  170.                         onChange={(e) => onPasswordChange(e)}
  171.                     />
  172.                 </ModalBody>
  173.                 <ModalFooter>
  174.                     <Button onClick={handleCancel} color="primary">
  175.                         {localization.createUserDialog.cancel}
  176.                     </Button>
  177.                     <Button
  178.                         onClick={() => {
  179.                             if (props.edit) {
  180.                                 handleEditUser();
  181.                                 handleCancel();
  182.                             } else {
  183.                                 handleCreateUser();
  184.                             }
  185.                         }}
  186.                         color="primary"
  187.                         disabled={personalData.passwordError}
  188.                     >
  189.                         {localization.createUserDialog.ok}
  190.                     </Button>
  191.                 </ModalFooter>
  192.             </Modal>
  193.         </Container>
  194.     );
  195. };
  196.  
  197. export default connect((state) => ({
  198.     users: state.users,
  199. }), { createUser, editUser, getRoles })(CreateUserDialog);
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top