parent
415aea74a3
commit
83ddd34c7c
11 changed files with 274 additions and 37 deletions
@ -1,10 +1,18 @@ |
||||
import { |
||||
SEND_REGISTER_REQUEST |
||||
SEND_REGISTER_REQUEST, |
||||
SEND_EMAIL_VERIFICATION_REQUEST |
||||
} from "../../constants/auth.constants"; |
||||
|
||||
export function sendRegisterRequest(postbody) { |
||||
return { |
||||
type: SEND_REGISTER_REQUEST, |
||||
data: postbody |
||||
} |
||||
}; |
||||
} |
||||
|
||||
export function sendEmailVerificationRequest(postbody) { |
||||
return { |
||||
type: SEND_EMAIL_VERIFICATION_REQUEST, |
||||
data: postbody |
||||
}; |
||||
} |
||||
|
@ -0,0 +1,97 @@ |
||||
import React, { Component } from "react"; |
||||
import { connect } from "react-redux"; |
||||
import { Link } from "react-router-dom"; |
||||
import { Container, Form, Header, Message } from "semantic-ui-react"; |
||||
|
||||
import { |
||||
clearEmailVerificationError, |
||||
clearEmailVerificationSuccess, |
||||
setFormEmailVerification |
||||
} from "../../actions/auth/reducer.actions"; |
||||
import { sendEmailVerificationRequest } from "../../actions/auth/saga.actions"; |
||||
import Error from "../Shared/Error"; |
||||
|
||||
class VerifyEmail extends Component { |
||||
constructor(props) { |
||||
super(props); |
||||
const emailKey = this.props.match.params.emailKey; |
||||
this.props.dispatch(clearEmailVerificationError()); |
||||
this.props.dispatch(clearEmailVerificationSuccess()); |
||||
this.props.dispatch(setFormEmailVerification(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, |
||||
emailVerificationRequestError, |
||||
emailVerificationRequestSuccess, |
||||
emailVerificationString |
||||
} = this.props; |
||||
return ( |
||||
<VerifyEmailView |
||||
isSendingAuthRequest={isSendingAuthRequest} |
||||
emailVerificationRequestError={emailVerificationRequestError} |
||||
emailVerificationRequestSuccess={emailVerificationRequestSuccess} |
||||
emailVerificationString={emailVerificationString} |
||||
changeEmailKey={this.changeEmailKey} |
||||
onSubmitEmailVerification={this.onSubmitEmailVerification} |
||||
/> |
||||
); |
||||
} |
||||
} |
||||
|
||||
function mapStateToProps(state) { |
||||
return { ...state.auth }; |
||||
} |
||||
|
||||
const VerifyEmailView = ({ |
||||
isSendingAuthRequest, |
||||
emailVerificationRequestError, |
||||
emailVerificationRequestSuccess, |
||||
emailVerificationString, |
||||
changeEmailKey, |
||||
onSubmitEmailVerification |
||||
}) => ( |
||||
<Container> |
||||
<Header>Verify Email</Header> |
||||
<Form |
||||
loading={isSendingAuthRequest} |
||||
onSubmit={onSubmitEmailVerification} |
||||
error={!!emailVerificationRequestError} |
||||
success={!!emailVerificationRequestSuccess} |
||||
> |
||||
<Form.Field> |
||||
<label>Email Verification Key</label> |
||||
<input |
||||
placeholder="" |
||||
type="text" |
||||
value={emailVerificationString} |
||||
onChange={changeEmailKey} |
||||
/> |
||||
</Form.Field> |
||||
<Error |
||||
header="Email Verification failed!" |
||||
error={emailVerificationRequestError} |
||||
/> |
||||
<Message success> |
||||
<Message.Header>Email Verified!</Message.Header> |
||||
<p>Please proceed to <Link to="/auth/login">log in</Link>.</p> |
||||
</Message> |
||||
<Form.Button>Verify Email</Form.Button> |
||||
</Form> |
||||
</Container> |
||||
); |
||||
|
||||
export default connect(mapStateToProps)(VerifyEmail); |
@ -1,7 +1,8 @@ |
||||
import { takeLatest } from "redux-saga/effects"; |
||||
import { SEND_REGISTER_REQUEST } from "../constants/auth.constants"; |
||||
import { registerUserFlow } from "./auth.sagas"; |
||||
import { SEND_REGISTER_REQUEST, SEND_EMAIL_VERIFICATION_REQUEST } from "../constants/auth.constants"; |
||||
import { registerUserFlow, verifyEmailFlow } from "./auth.sagas"; |
||||
|
||||
export default function* rootSaga() { |
||||
yield takeLatest(SEND_REGISTER_REQUEST, registerUserFlow); |
||||
yield takeLatest(SEND_EMAIL_VERIFICATION_REQUEST, verifyEmailFlow); |
||||
} |
||||
|
Loading…
Reference in new issue