You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
136 lines
3.4 KiB
136 lines
3.4 KiB
7 years ago
|
import React, { Component } from "react";
|
||
|
import { connect } from "react-redux";
|
||
|
import { Container, Form, Header, Message } from "semantic-ui-react";
|
||
|
|
||
|
import {
|
||
|
clearAuthRequestError,
|
||
|
setFormEmail,
|
||
|
setFormPassword,
|
||
|
setFormPasswordConfirmation
|
||
|
} from "../../actions/auth/reducer.actions";
|
||
|
import { sendRegisterRequest } from "../../actions/auth/saga.actions";
|
||
|
import Error from "../Shared/Error";
|
||
|
|
||
|
class Register extends Component {
|
||
|
constructor(props) {
|
||
|
super(props);
|
||
|
this.props.dispatch(clearAuthRequestError());
|
||
|
}
|
||
|
|
||
|
changeEmail = event => {
|
||
|
this.props.dispatch(setFormEmail(event.target.value));
|
||
|
};
|
||
|
|
||
|
changePassword = event => {
|
||
|
this.props.dispatch(setFormPassword(event.target.value));
|
||
|
};
|
||
|
|
||
|
changePasswordConfirmation = event => {
|
||
|
this.props.dispatch(setFormPasswordConfirmation(event.target.value));
|
||
|
};
|
||
|
|
||
|
onSubmitRegistration = event => {
|
||
|
event.preventDefault();
|
||
|
const { dispatch, email, password, passwordConfirmation } = this.props;
|
||
|
dispatch(
|
||
|
sendRegisterRequest({
|
||
|
email,
|
||
|
password1: password,
|
||
|
password2: passwordConfirmation
|
||
|
})
|
||
|
);
|
||
|
};
|
||
|
|
||
|
render() {
|
||
|
const {
|
||
|
isSendingAuthRequest,
|
||
|
authRequestError,
|
||
|
authRequestSuccess,
|
||
|
email,
|
||
|
password,
|
||
|
passwordConfirmation
|
||
|
} = this.props;
|
||
|
return (
|
||
|
<RegisterView
|
||
|
isSendingAuthRequest={isSendingAuthRequest}
|
||
|
authRequestError={authRequestError}
|
||
|
authRequestSuccess={authRequestSuccess}
|
||
|
email={email}
|
||
|
password={password}
|
||
|
passwordConfirmation={passwordConfirmation}
|
||
|
changeEmail={this.changeEmail}
|
||
|
changePassword={this.changePassword}
|
||
|
changePasswordConfirmation={this.changePasswordConfirmation}
|
||
|
onSubmitRegistration={this.onSubmitRegistration}
|
||
|
/>
|
||
|
);
|
||
|
}
|
||
|
}
|
||
|
|
||
|
function mapStateToProps(state) {
|
||
|
return { ...state.auth };
|
||
|
}
|
||
|
|
||
|
/**
|
||
|
* Functional view component for Register logic
|
||
|
*/
|
||
|
const RegisterView = ({
|
||
|
isSendingAuthRequest,
|
||
|
authRequestError,
|
||
|
authRequestSuccess,
|
||
|
email,
|
||
|
password,
|
||
|
passwordConfirmation,
|
||
|
changeEmail,
|
||
|
changePassword,
|
||
|
changePasswordConfirmation,
|
||
|
onSubmitRegistration
|
||
|
}) => (
|
||
|
<Container>
|
||
|
<Header>Register</Header>
|
||
|
<Form
|
||
|
loading={isSendingAuthRequest}
|
||
|
onSubmit={onSubmitRegistration}
|
||
|
error={!!authRequestError}
|
||
|
success={!!authRequestSuccess}
|
||
|
>
|
||
|
<Form.Field>
|
||
|
<label>Email</label>
|
||
|
<input
|
||
|
placeholder="bob@gmail.com"
|
||
|
type="email"
|
||
|
value={email}
|
||
|
onChange={changeEmail}
|
||
|
/>
|
||
|
</Form.Field>
|
||
|
<Form.Field>
|
||
|
<label>Password</label>
|
||
|
<input
|
||
|
placeholder="••••••••"
|
||
|
type="password"
|
||
|
value={password}
|
||
|
onChange={changePassword}
|
||
|
/>
|
||
|
</Form.Field>
|
||
|
<Form.Field>
|
||
|
<label>Password Confirmation</label>
|
||
|
<input
|
||
|
placeholder="••••••••"
|
||
|
type="password"
|
||
|
value={passwordConfirmation}
|
||
|
onChange={changePasswordConfirmation}
|
||
|
/>
|
||
|
</Form.Field>
|
||
|
<Error header="Register failed!" error={authRequestError} />
|
||
|
<Message
|
||
|
success
|
||
|
header="Registration Sent"
|
||
|
content="A confirmation email has been sent to confirm your registration."
|
||
|
/>
|
||
|
<Form.Button>Submit</Form.Button>
|
||
|
</Form>
|
||
|
</Container>
|
||
|
);
|
||
|
|
||
|
export default connect(mapStateToProps)(Register);
|