tanner/caremyway-client
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Finished functionally complete email confirmation workflow

Browse Source
This commit is contained in:
Alexander Wong 2017-08-29 21:12:34 -06:00
parent 415aea74a3
commit 83ddd34c7c
11 changed files with 274 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
README.md
View File

@ -13,12 +13,12 @@ Now you can visit `localhost:3000` from your browser.
## Environment Variables
The environment variables are embedded during the build time. For more information, please refer to the [docs](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-custom-environment-variables.
The environment variables are embedded during the build time. For more information, please refer to the [docs](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-custom-environment-variables).
| Environment Variable | Default Value | Description |
| ------------------------- |:-------------------------:| -------------------:|
| `REACT_APP_API_ENDPOINT` | `"http://localhost:8000"` | Server API endpoint |
| `REACT_APP_REDUX_LOGGING` | `` | Set for Redux Log |
| `REACT_APP_REDUX_LOGGING` | ` ` | Set for Redux Log |
## Testing

80
src/actions/auth/reducer.actions.js
View File

@ -4,10 +4,15 @@ import {
CLEAR_AUTH_REQUEST_ERROR,
SET_AUTH_REQUEST_SUCCESS,
CLEAR_AUTH_REQUEST_SUCCESS,
SET_EMAIL_VERIFICATION_SUCCESS,
CLEAR_EMAIL_VERIFICATION_SUCCESS,
SET_EMAIL_VERIFICATION_ERROR,
CLEAR_EMAIL_VERIFICATION_ERROR,
SET_SELF_USER,
SET_FORM_EMAIL,
SET_FORM_PASSWORD,
SET_FORM_PASSWORD_CONFIRMATION
SET_FORM_PASSWORD_CONFIRMATION,
SET_FORM_EMAIL_VERIFICATION
} from "../../constants/auth.constants";
import { parseError } from "../common.actions";
@ -19,27 +24,27 @@ export function isSendingAuthRequest(sendingRequest) {
}
export function setAuthRequestError(exception) {
let rawError = parseError(exception);
if (rawError.email) {
rawError["Email"] = rawError.email;
delete rawError["email"];
let error = parseError(exception);
if (error.email) {
error["Email"] = error.email;
delete error["email"];
}
if (rawError.password1) {
rawError["Password"] = rawError.password1;
delete rawError["password1"];
if (error.password1) {
error["Password"] = error.password1;
delete error["password1"];
}
if (rawError.password2) {
rawError["Password Confirmation"] = rawError.password2;
delete rawError["password2"];
if (error.password2) {
error["Password Confirmation"] = error.password2;
delete error["password2"];
}
if (rawError.non_field_errors) {
rawError["Non Field Errors"] = rawError.non_field_errors;
delete rawError["non_field_errors"];
if (error.non_field_errors) {
error["Non Field Errors"] = error.non_field_errors;
delete error["non_field_errors"];
}
return {
type: SET_AUTH_REQUEST_ERROR,
data: parseError(exception)
data: error
};
}
@ -53,13 +58,49 @@ export function setAuthRequestSuccess(response) {
return {
type: SET_AUTH_REQUEST_SUCCESS,
data: response.detail || response
}
};
}
export function clearAuthRequestSuccess() {
return {
type: CLEAR_AUTH_REQUEST_SUCCESS
};
}
export function setEmailVerificationError(exception) {
let error = parseError(exception);
if (error.detail) {
error["Email"] = error.detail;
delete error["detail"];
}
if (error.key) {
error["Verification Key"] = error.key;
delete error["key"];
}
return {
type: SET_EMAIL_VERIFICATION_ERROR,
data: error
};
}
export function clearEmailVerificationError() {
return {
type: CLEAR_EMAIL_VERIFICATION_ERROR
};
}
export function setEmailVerificationSuccess(response) {
return {
type: SET_EMAIL_VERIFICATION_SUCCESS,
data: response.detail || response
};
}
export function clearEmailVerificationSuccess() {
return {
type: CLEAR_EMAIL_VERIFICATION_SUCCESS
};
}
export function setSelfUser(selfUser) {
@ -89,3 +130,10 @@ export function setFormPasswordConfirmation(passwordConfirmation) {
data: passwordConfirmation
};
}
export function setFormEmailVerification(emailKey) {
return {
type: SET_FORM_EMAIL_VERIFICATION,
data: emailKey
};
}

12
src/actions/auth/saga.actions.js
View File

@ -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
};
}

8
src/api/auth.api.js
View File

@ -15,3 +15,11 @@ export function registerUser(email, password1, password2) {
return Promise.resolve(response);
});
}
export function verifyEmail(emailKey) {
return post("/rest-auth/registration/verify-email/", {
key: emailKey
}).then(response => {
return Promise.resolve(response);
});
}

5
src/components/App.jsx
View File

@ -3,6 +3,7 @@ import { Route, Switch } from "react-router-dom";
import Login from "./Auth/Login";
import Register from "./Auth/Register";
import VerifyEmail from "./Auth/VerifyEmail";
import About from "./Static/About";
import Footer from "./Static/Footer";
import Home from "./Static/Home";
@ -26,6 +27,10 @@ class App extends Component {
<Route path="/about" component={About} />
<Route path="/auth/login" component={Login} />
<Route path="/auth/register" component={Register} />
<Route
path="/auth/verify-email/:emailKey"
component={VerifyEmail}
/>
<Route component={NoMatch} />
</Switch>
</div>

13
src/components/Auth/Register.jsx
View File

@ -4,6 +4,7 @@ import { Container, Form, Header, Message } from "semantic-ui-react";
import {
clearAuthRequestError,
clearAuthRequestSuccess,
setFormEmail,
setFormPassword,
setFormPasswordConfirmation
@ -15,6 +16,7 @@ class Register extends Component {
constructor(props) {
super(props);
this.props.dispatch(clearAuthRequestError());
this.props.dispatch(clearAuthRequestSuccess());
}
changeEmail = event => {
@ -122,12 +124,11 @@ const RegisterView = ({
/>
</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>
<Message success>
<Message.Header>Confirmation Email Sent!</Message.Header>
<p>Please check your email to confirm your registration.</p>
</Message>
<Form.Button>Register</Form.Button>
</Form>
</Container>
);

97
src/components/Auth/VerifyEmail.jsx Normal file
View File

@ -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);

8
src/constants/auth.constants.js
View File

@ -4,10 +4,18 @@ export const SET_AUTH_REQUEST_ERROR = "SET_AUTH_REQUEST_ERROR";
export const CLEAR_AUTH_REQUEST_ERROR = "CLEAR_AUTH_REQUEST_ERROR";
export const SET_AUTH_REQUEST_SUCCESS = "SET_AUTH_REQUEST_SUCCESS";
export const CLEAR_AUTH_REQUEST_SUCCESS = "CLEAR_AUTH_REQUEST_SUCCESS";
export const SET_EMAIL_VERIFICATION_SUCCESS = "SET_EMAIL_VERIFICATION_SUCCESS";
export const CLEAR_EMAIL_VERIFICATION_SUCCESS =
"CLEAR_EMAIL_VERIFICATION_SUCCESS";
export const SET_EMAIL_VERIFICATION_ERROR = "SET_EMAIL_VERIFICATION_ERROR";
export const CLEAR_EMAIL_VERIFICATION_ERROR = "CLEAR_EMAIL_VERIFICATION_ERROR";
export const SET_SELF_USER = "SET_SELF_USER";
export const SET_FORM_EMAIL = "SET_FORM_EMAIL";
export const SET_FORM_PASSWORD = "SET_FORM_PASSWORD";
export const SET_FORM_PASSWORD_CONFIRMATION = "SET_FORM_PASSWORD_CONFIRMATION";
export const SET_FORM_EMAIL_VERIFICATION = "SET_FORM_EMAIL_VERIFICATION";
// Saga Auth Action Constants
export const SEND_REGISTER_REQUEST = "SEND_REGISTER_REQUEST";
export const SEND_EMAIL_VERIFICATION_REQUEST =
"SEND_EMAIL_VERIFICATION_REQUEST";

37
src/reducers/authReducer.js
View File

@ -4,20 +4,28 @@ import {
CLEAR_AUTH_REQUEST_ERROR,
SET_AUTH_REQUEST_SUCCESS,
CLEAR_AUTH_REQUEST_SUCCESS,
SET_EMAIL_VERIFICATION_ERROR,
CLEAR_EMAIL_VERIFICATION_ERROR,
SET_EMAIL_VERIFICATION_SUCCESS,
CLEAR_EMAIL_VERIFICATION_SUCCESS,
SET_SELF_USER,
SET_FORM_EMAIL,
SET_FORM_PASSWORD,
SET_FORM_PASSWORD_CONFIRMATION
SET_FORM_PASSWORD_CONFIRMATION,
SET_FORM_EMAIL_VERIFICATION
} from "../constants/auth.constants";
const initialState = {
isSendingAuthRequest: false,
authRequestError: "",
authRequestSuccess: "",
emailVerificationRequestError: "",
emailVerificationRequestSuccess: "",
currentUser: {},
email: "",
password: "",
passwordConfirmation: ""
passwordConfirmation: "",
emailVerificationString: ""
};
function authReducer(state = initialState, action) {
@ -47,6 +55,26 @@ function authReducer(state = initialState, action) {
...state,
authRequestSuccess: ""
};
case SET_EMAIL_VERIFICATION_ERROR:
return {
...state,
emailVerificationRequestError: action.data
};
case CLEAR_EMAIL_VERIFICATION_ERROR:
return {
...state,
emailVerificationRequestError: ""
};
case SET_EMAIL_VERIFICATION_SUCCESS:
return {
...state,
emailVerificationRequestSuccess: action.data
};
case CLEAR_EMAIL_VERIFICATION_SUCCESS:
return {
...state,
emailVerificationRequestSuccess: ""
};
case SET_SELF_USER:
return {
...state,
@ -67,6 +95,11 @@ function authReducer(state = initialState, action) {
...state,
passwordConfirmation: action.data
};
case SET_FORM_EMAIL_VERIFICATION:
return {
...state,
emailVerificationString: action.data
};
default:
return state;
}

40
src/sagas/auth.sagas.js
View File

@ -3,17 +3,19 @@ import {
isSendingAuthRequest,
setAuthRequestError,
setAuthRequestSuccess,
setEmailVerificationError,
setEmailVerificationSuccess,
clearAuthRequestError,
clearEmailVerificationError,
clearAuthRequestSuccess,
clearEmailVerificationSuccess,
setFormEmail,
setFormPassword,
setFormPasswordConfirmation
setFormPasswordConfirmation,
setFormEmailVerification
} from "../actions/auth/reducer.actions";
import { registerUser } from "../api/auth.api";
import { registerUser, verifyEmail } from "../api/auth.api";
/**
* Saga for registering a new user.
* @param {*} postBody
*/
function* registerUserCall(postBody) {
yield effects.put(isSendingAuthRequest(true));
const { email, password1, password2 } = postBody;
@ -27,7 +29,22 @@ function* registerUserCall(postBody) {
}
}
function* verifyEmailCall(postBody) {
yield effects.put(isSendingAuthRequest(true));
const { emailKey } = postBody;
try {
return yield effects.call(verifyEmail, emailKey);
} catch (exception) {
yield effects.put(setEmailVerificationError(exception));
return false;
} finally {
yield effects.put(isSendingAuthRequest(false));
}
}
export function* registerUserFlow(request) {
yield effects.put(clearAuthRequestSuccess());
yield effects.put(clearAuthRequestError());
const wasSucessful = yield effects.call(registerUserCall, request.data);
if (wasSucessful) {
yield effects.put(setAuthRequestSuccess(wasSucessful));
@ -37,3 +54,14 @@ export function* registerUserFlow(request) {
yield effects.put(setFormPasswordConfirmation(""));
}
}
export function* verifyEmailFlow(request) {
yield effects.put(clearEmailVerificationSuccess());
yield effects.put(clearEmailVerificationError());
const wasSucessful = yield effects.call(verifyEmailCall, request.data);
if (wasSucessful) {
yield effects.put(setEmailVerificationSuccess(wasSucessful));
yield effects.put(clearEmailVerificationError());
yield effects.put(setFormEmailVerification(""));
}
}

5
src/sagas/index.js
View File

@ -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);
}