119 lines
3.6 KiB
TypeScript
119 lines
3.6 KiB
TypeScript
import React from 'react';
|
|
import { connect } from 'react-redux';
|
|
import { Form, Input, Button, Alert } from 'antd';
|
|
import { FormComponentProps } from 'antd/lib/form';
|
|
import { authActions } from 'modules/auth';
|
|
import { AppState } from 'store/reducers';
|
|
import PasswordFormItems from 'components/PasswordFormItems';
|
|
import './SignUp.less';
|
|
|
|
interface StateProps {
|
|
isCreatingUser: AppState['auth']['isCreatingUser'];
|
|
createUserError: AppState['auth']['createUserError'];
|
|
}
|
|
|
|
interface DispatchProps {
|
|
createUser: typeof authActions['createUser'];
|
|
}
|
|
|
|
type Props = StateProps & DispatchProps & FormComponentProps;
|
|
|
|
class SignUp extends React.Component<Props> {
|
|
render() {
|
|
const { isCreatingUser, createUserError } = this.props;
|
|
const { getFieldDecorator } = this.props.form;
|
|
|
|
return (
|
|
<div className="SignUp">
|
|
<div className="SignUp-container">
|
|
<Form className="SignUp-form" onSubmit={this.handleSubmit}>
|
|
<Form.Item className="SignUp-form-item" label="Display name">
|
|
{getFieldDecorator('name', {
|
|
rules: [{ required: true, message: 'Please add a display name' }],
|
|
})(
|
|
<Input
|
|
name="name"
|
|
placeholder="Non-unique name that others will see you as"
|
|
autoComplete="name"
|
|
/>,
|
|
)}
|
|
</Form.Item>
|
|
|
|
<Form.Item className="SignUp-form-item" label="Title">
|
|
{getFieldDecorator('title', {
|
|
rules: [{ required: true, message: 'Please add your title' }],
|
|
})(
|
|
<Input
|
|
name="title"
|
|
placeholder="A short description about you, e.g. Core Ethereum Developer"
|
|
/>,
|
|
)}
|
|
</Form.Item>
|
|
|
|
<Form.Item className="SignUp-form-item" label="Email address">
|
|
{getFieldDecorator('email', {
|
|
rules: [
|
|
{ type: 'email', message: 'Invalid email' },
|
|
{ required: true, message: 'Please enter your email' },
|
|
],
|
|
})(
|
|
<Input
|
|
name="email"
|
|
placeholder="We promise not to spam you or share your email"
|
|
autoComplete="username"
|
|
/>,
|
|
)}
|
|
</Form.Item>
|
|
|
|
<PasswordFormItems form={this.props.form} />
|
|
|
|
<div className="SignUp-form-controls">
|
|
<Button
|
|
type="primary"
|
|
htmlType="submit"
|
|
size="large"
|
|
block
|
|
loading={isCreatingUser}
|
|
>
|
|
Create account
|
|
</Button>
|
|
</div>
|
|
{createUserError && (
|
|
<Alert
|
|
type="error"
|
|
message={createUserError}
|
|
showIcon
|
|
closable
|
|
className="SignUp-form-alert"
|
|
/>
|
|
)}
|
|
</Form>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
private handleSubmit = (ev: React.FormEvent<HTMLFormElement>) => {
|
|
ev.preventDefault();
|
|
const { createUser } = this.props;
|
|
this.props.form.validateFieldsAndScroll((err: any, values: any) => {
|
|
if (!err) {
|
|
delete values.passwordConfirm;
|
|
createUser(values);
|
|
}
|
|
});
|
|
};
|
|
}
|
|
|
|
const FormWrappedSignUp = Form.create()(SignUp);
|
|
|
|
export default connect<StateProps, DispatchProps, {}, AppState>(
|
|
state => ({
|
|
isCreatingUser: state.auth.isCreatingUser,
|
|
createUserError: state.auth.createUserError,
|
|
}),
|
|
{
|
|
createUser: authActions.createUser,
|
|
},
|
|
)(FormWrappedSignUp);
|