CreateUserDialog

import React, {
    useEffect,
    useState,
} from 'react';
import {
    Modal,
    ModalHeader,
    ModalBody,
    ModalFooter,
    Container,
    Button,
    Input,
    Form,
} from 'reactstrap';
import connect from 'react-redux/es/connect/connect';
import {
    createUser,
    editUser,
    getRoles,
} from '../../redux/user/actions';
import localization from '../../helpers/localizationHelper';
import validatePassword from '../../helpers/usersHelper';

const CreateUserDialog = (props) => {
    const [personalData, setPersonalData] = useState({
        firstName: '',
        lastName: '',
        email: '',
        role: '',
        password: '',
        confirmPassword: '',
        passwordError: false,
        passwordChanged: false,
        roles: [],
    });

    useEffect(() => {
        const User = { ...personalData };
        props.getRoles().then((res) => {
            User.roles = res;
            if (props.edit) {
                User.firstName = props.user.firstName;
                User.lastName = props.user.lastName;
                User.email = props.user.email;
                User.role = props.user.role;
                User.password = props.user.password;
                User.confirmPassword = props.user.password;
            }
            setPersonalData(User);
        });
    }, []);

    const handleError = errorExists => {
        const User = { ...personalData };
        User.passwordError = errorExists ;
        setPersonalData(User);
    };

    const handleEditUser = () => {
        if (personalData.passwordChanged && personalData.password !== personalData.confirmPassword) {
            handleError(true);
            return;
        }

        const user = {
            _id: props.user._id,
            firstName: personalData.firstName,
            lastName: personalData.lastName,
            email: personalData.email,
            role: personalData.role,
        };

        if (personalData.passwordChanged && personalData.password === personalData.confirmPassword) {
            user.password = personalData.password;
        }

        props.editUser(user);
    };
    const handleCreateUser = () => {
        if (personalData.password === personalData.confirmPassword) {
            const user = {
                firstName: personalData.firstName,
                lastName: personalData.lastName,
                email: personalData.email,
                role: personalData.role,
                password: personalData.password,
            };
            props.createUser(user);
            props.handleCancel();
        } else {
            handleError(true);
        }
    };
    const onPasswordChange = event => {
        const User = { ...personalData };
        const newPassword = event.target.value;
        User.passwordError = newPassword !== personalData.password || !validatePassword(newPassword) || !validatePassword(newPassword.length);
        User[event.target.id] = newPassword;
        setPersonalData(User);
    };

    const onInputChange = event => {
        const User = { ...personalData };
        User[event.target.id] = event.target.value;
        setPersonalData(User);
    };

    const {
        opened,
        handleCancel,
    } = props;

    return (
        <Container>
            <Modal isOpen={opened}>
                <ModalHeader id="form-dialog-title">{localization.createUserDialog.user}</ModalHeader>
                <ModalBody>
                    <Input
                        autoFocus
                        margin="dense"
                        id="firstName"
                        placeholder={localization.createUserDialog.firstName}
                        type="text"
                        required
                        value={personalData.firstName}
                        onChange={(e) => onInputChange(e)}
                    />
                    <Input
                        margin="dense"
                        id="lastName"
                        placeholder={localization.createUserDialog.lastName}
                        type="text"
                        required
                        value={personalData.lastName}
                        onChange={(e) => onInputChange(e)}
                    />
                    <Input
                        margin="dense"
                        id="email"
                        placeholder={localization.createUserDialog.email}
                        type="email"
                        required
                        value={personalData.email}
                        onChange={(e) => onInputChange(e)}
                    />
                    <Form>
                        <Input type="select" value={personalData.role} id="role" onChange={(e) => onInputChange(e)}>
                            {
                                Object.entries(personalData.roles)
                                    .map(r => <option key={r[0]} value={r[0]}>{r[1]}</option>)
                            }
                        </Input>
                    </Form>
                    <Input
                        margin="dense"
                        id="password"
                        placeholder={localization.createUserDialog.password}
                        type="password"
                        required
                        value={personalData.password}
                        onChange={(e) => onPasswordChange(e)}
                    />
                    <Input
                        margin="dense"
                        id="confirmPassword"
                        placeholder={localization.createUserDialog.confirmPassword}
                        type="password"
                        required
                        value={personalData.confirmPassword}
                        onChange={(e) => onPasswordChange(e)}
                    />
                </ModalBody>
                <ModalFooter>
                    <Button onClick={handleCancel} color="primary">
                        {localization.createUserDialog.cancel}
                    </Button>
                    <Button
                        onClick={() => {
                            if (props.edit) {
                                handleEditUser();
                                handleCancel();
                            } else {
                                handleCreateUser();
                            }
                        }}
                        color="primary"
                        disabled={personalData.passwordError}
                    >
                        {localization.createUserDialog.ok}
                    </Button>
                </ModalFooter>
            </Modal>
        </Container>
    );
};

export default connect((state) => ({
    users: state.users,
}), { createUser, editUser, getRoles })(CreateUserDialog);