import React, { Component } from 'react';
import PropTypes from 'prop-types';
import Button from '@material-ui/core/Button';
import DialogTitle from '@material-ui/core/DialogTitle';
import Dialog from '@material-ui/core/Dialog';
import DialogActions from '@material-ui/core/DialogActions';
import DialogContent from '@material-ui/core/DialogContent';
import SnackbarContent from '@material-ui/core/SnackbarContent';
import ErrorIcon from '@material-ui/icons/Error';
import InputLabel from '@material-ui/core/InputLabel';
import Input from '@material-ui/core/Input';
import FormControl from '@material-ui/core/FormControl';
import FormHelperText from '@material-ui/core/FormHelperText';
import classes from "./login.scss";
export default class LoginModal extends Component {
static propTypes = {
visibility: PropTypes.bool,
error: PropTypes.object,
onCancel: PropTypes.func,
onSubmit: PropTypes.func,
};
static defaultProps = {
error: {},
onCancel: () => {},
onSubmit: () => {},
visibility: true,
}
constructor(props) {
super(props);
this.state = {
form: {
username: {
required: true,
pristine: true,
helperText: 'Field required',
value: '',
},
password: {
required: true,
pristine: true,
helperText: 'Field required',
value: '',
},
},
error: props.error,
};
}
/**
* set login modal's username and password to current state
* Required to login
*/
setCredentials = (name, e) => {
const { form } = this.state;
this.setState({
form: {
...form,
[name]: {
...form[name],
value: e.target.value,
pristine: false,
},
},
});
}
setUsername = (event) => {
this.setCredentials('username', event);
}
setPassword = (event) => {
this.setCredentials('password', event);
}
validateCredentials = (event) => {
const { form } = this.state;
// prevents default submit behavior
event.preventDefault();
this.setState({
form: Object.keys(form).reduce((acc, key) => ({
...acc,
...{ [key]: {...form[key], pristine: false } },
}), {}),
}, () => {
if (!Object.keys(form).some(id => !form[id])) {
this.submitCredentials();
}
});
}
submitCredentials = async () => {
const { form } = this.state;
const { onSubmit } = this.props;
await onSubmit(form.username.value, form.password.value);
// let's wait for API response and then set
// username and password filed to empty state
this.setState({
form: Object.keys(form).reduce((acc, key) => ({
...acc,
...{ [key]: {...form[key], value: "", pristine: true } },
}), {}),
});
}
renderErrorMessage(title, description) {
return (