68 lines
1.5 KiB
JavaScript
68 lines
1.5 KiB
JavaScript
import { h, Component } from 'preact';
|
|
import isEmail from 'validator/lib/isEmail';
|
|
|
|
import store from '../store';
|
|
|
|
import Form from './Form.jsx';
|
|
import Input from './Input.jsx';
|
|
|
|
import { login } from '../actions/user';
|
|
import { hideLoginModal } from '../actions/ui';
|
|
|
|
export default class LoginForm extends Form {
|
|
constructor() {
|
|
super();
|
|
|
|
this.validation = {
|
|
email: {
|
|
required: true,
|
|
tests: [
|
|
[isEmail, 'Not a valid email'],
|
|
],
|
|
},
|
|
password: {
|
|
required: true,
|
|
},
|
|
};
|
|
|
|
this.state = {
|
|
className: ['login-form', 'modal', 'enter', 'animate'],
|
|
};
|
|
|
|
this.onSubmit = this.onSubmit.bind(this);
|
|
}
|
|
|
|
componentWillMount() {
|
|
this.unsubscribe = store.subscribe(() => this.forceUpdate());
|
|
}
|
|
|
|
componentWillUnmount() {
|
|
this.unsubscribe();
|
|
}
|
|
|
|
onSubmit(e) {
|
|
e.preventDefault();
|
|
|
|
if (!this.validate()) return;
|
|
|
|
store.dispatch(login(this.toJSON()));
|
|
}
|
|
|
|
render() {
|
|
const { ui } = store.getState();
|
|
|
|
return ui.showLoginModal ? (
|
|
<form
|
|
className={this.state.className.join(' ')}
|
|
onSubmit={this.onSubmit}
|
|
>
|
|
<button type="button" onClick={() => store.dispatch(hideLoginModal())}>Close</button>
|
|
<h1>Login</h1>
|
|
<Input ref={this.register('email')} type="text" name="email" placeholder="Email" />
|
|
<Input ref={this.register('password')} type="password" name="password" placeholder="Password" />
|
|
<button>Login</button>
|
|
</form>
|
|
) : null;
|
|
}
|
|
}
|