Finished functionally complete email confirmation workflow

src/components/App.jsx

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

src/components/Auth/Register.jsx

@@ -1,9 +1,10 @@
 import React, { Component } from "react";
 import { connect } from "react-redux";
-import { Container, Form, Header, Message  } from "semantic-ui-react";
+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>
 );

src/components/Auth/VerifyEmail.jsx

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