99 lines
2.8 KiB
JavaScript
99 lines
2.8 KiB
JavaScript
import React, { Component } from "react";
|
|
import { connect } from "react-redux";
|
|
import { Link, Redirect } from "react-router-dom";
|
|
import { Container, Form, Header, Message } from "semantic-ui-react";
|
|
|
|
import {
|
|
clearAuthRequestError,
|
|
clearAuthRequestSuccess,
|
|
setFormEmailVerification
|
|
} from "../../actions/auth/reducer.actions";
|
|
import { sendEmailVerificationRequest } from "../../actions/auth/saga.actions";
|
|
import Error from "../Shared/Error";
|
|
|
|
class VerifyEmail extends Component {
|
|
componentWillMount() {
|
|
const emailKey = this.props.match.params.emailKey;
|
|
this.props.dispatch(clearAuthRequestError());
|
|
this.props.dispatch(clearAuthRequestSuccess());
|
|
this.props.dispatch(setFormEmailVerification(emailKey));
|
|
if (emailKey) {
|
|
this.props.dispatch(sendEmailVerificationRequest({ emailKey }));
|
|
}
|
|
}
|
|
|
|
changeEmailKey = event => {
|
|
this.props.dispatch(setFormEmailVerification(event.target.value));
|
|
};
|
|
|
|
onSubmitEmailVerification = event => {
|
|
event.preventDefault();
|
|
const { dispatch, emailVerificationString } = this.props;
|
|
dispatch(
|
|
sendEmailVerificationRequest({ emailKey: emailVerificationString })
|
|
);
|
|
};
|
|
|
|
render() {
|
|
const {
|
|
isSendingAuthRequest,
|
|
authRequestError,
|
|
authRequestSuccess,
|
|
emailVerificationString,
|
|
userToken
|
|
} = this.props;
|
|
if (userToken) return <Redirect to={"/"} />;
|
|
return (
|
|
<VerifyEmailView
|
|
isSendingAuthRequest={isSendingAuthRequest}
|
|
authRequestError={authRequestError}
|
|
authRequestSuccess={authRequestSuccess}
|
|
emailVerificationString={emailVerificationString}
|
|
changeEmailKey={this.changeEmailKey}
|
|
onSubmitEmailVerification={this.onSubmitEmailVerification}
|
|
/>
|
|
);
|
|
}
|
|
}
|
|
|
|
function mapStateToProps(state) {
|
|
return { ...state.auth };
|
|
}
|
|
|
|
const VerifyEmailView = ({
|
|
isSendingAuthRequest,
|
|
authRequestError,
|
|
authRequestSuccess,
|
|
emailVerificationString,
|
|
changeEmailKey,
|
|
onSubmitEmailVerification
|
|
}) => (
|
|
<Container>
|
|
<Header>Verify Email</Header>
|
|
<Form
|
|
loading={isSendingAuthRequest}
|
|
onSubmit={onSubmitEmailVerification}
|
|
error={!!authRequestError}
|
|
success={!!authRequestSuccess}
|
|
>
|
|
<Form.Field>
|
|
<label>Email Verification Key</label>
|
|
<input
|
|
placeholder=""
|
|
type="text"
|
|
value={emailVerificationString}
|
|
onChange={changeEmailKey}
|
|
/>
|
|
</Form.Field>
|
|
<Error header="Email Verification failed!" error={authRequestError} />
|
|
<Message success>
|
|
<Message.Header>Email Verified!</Message.Header>
|
|
<p>Please proceed to <Link to="/auth/login">log in</Link>.</p>
|
|
</Message>
|
|
<Form.Button primary>Verify Email</Form.Button>
|
|
</Form>
|
|
</Container>
|
|
);
|
|
|
|
export default connect(mapStateToProps)(VerifyEmail);
|