parent
415aea74a3
commit
83ddd34c7c
11 changed files with 274 additions and 37 deletions
@ -1,10 +1,18 @@ |
|||||||
import { |
import { |
||||||
SEND_REGISTER_REQUEST |
SEND_REGISTER_REQUEST, |
||||||
|
SEND_EMAIL_VERIFICATION_REQUEST |
||||||
} from "../../constants/auth.constants"; |
} from "../../constants/auth.constants"; |
||||||
|
|
||||||
export function sendRegisterRequest(postbody) { |
export function sendRegisterRequest(postbody) { |
||||||
return { |
return { |
||||||
type: SEND_REGISTER_REQUEST, |
type: SEND_REGISTER_REQUEST, |
||||||
data: postbody |
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 { takeLatest } from "redux-saga/effects"; |
||||||
import { SEND_REGISTER_REQUEST } from "../constants/auth.constants"; |
import { SEND_REGISTER_REQUEST, SEND_EMAIL_VERIFICATION_REQUEST } from "../constants/auth.constants"; |
||||||
import { registerUserFlow } from "./auth.sagas"; |
import { registerUserFlow, verifyEmailFlow } from "./auth.sagas"; |
||||||
|
|
||||||
export default function* rootSaga() { |
export default function* rootSaga() { |
||||||
yield takeLatest(SEND_REGISTER_REQUEST, registerUserFlow); |
yield takeLatest(SEND_REGISTER_REQUEST, registerUserFlow); |
||||||
|
yield takeLatest(SEND_EMAIL_VERIFICATION_REQUEST, verifyEmailFlow); |
||||||
} |
} |
||||||
|
Loading…
Reference in new issue