Finished functionally complete client registration workflow

src/components/Auth/Login.jsx

@@ -0,0 +1,16 @@
+import React, { Component } from "react";
+import { Container } from "semantic-ui-react";
+
+class Login extends Component {
+  render() {
+    return <LoginView />;
+  }
+}
+
+const LoginView = () => (
+  <Container>
+    <p>Login</p>
+  </Container>
+);
+
+export default Login;

src/components/Auth/Register.jsx

@@ -0,0 +1,135 @@
+import React, { Component } from "react";
+import { connect } from "react-redux";
+import { Container, Form, Header, Message  } from "semantic-ui-react";
+
+import {
+  clearAuthRequestError,
+  setFormEmail,
+  setFormPassword,
+  setFormPasswordConfirmation
+} from "../../actions/auth/reducer.actions";
+import { sendRegisterRequest } from "../../actions/auth/saga.actions";
+import Error from "../Shared/Error";
+
+class Register extends Component {
+  constructor(props) {
+    super(props);
+    this.props.dispatch(clearAuthRequestError());
+  }
+
+  changeEmail = event => {
+    this.props.dispatch(setFormEmail(event.target.value));
+  };
+
+  changePassword = event => {
+    this.props.dispatch(setFormPassword(event.target.value));
+  };
+
+  changePasswordConfirmation = event => {
+    this.props.dispatch(setFormPasswordConfirmation(event.target.value));
+  };
+
+  onSubmitRegistration = event => {
+    event.preventDefault();
+    const { dispatch, email, password, passwordConfirmation } = this.props;
+    dispatch(
+      sendRegisterRequest({
+        email,
+        password1: password,
+        password2: passwordConfirmation
+      })
+    );
+  };
+
+  render() {
+    const {
+      isSendingAuthRequest,
+      authRequestError,
+      authRequestSuccess,
+      email,
+      password,
+      passwordConfirmation
+    } = this.props;
+    return (
+      <RegisterView
+        isSendingAuthRequest={isSendingAuthRequest}
+        authRequestError={authRequestError}
+        authRequestSuccess={authRequestSuccess}
+        email={email}
+        password={password}
+        passwordConfirmation={passwordConfirmation}
+        changeEmail={this.changeEmail}
+        changePassword={this.changePassword}
+        changePasswordConfirmation={this.changePasswordConfirmation}
+        onSubmitRegistration={this.onSubmitRegistration}
+      />
+    );
+  }
+}
+
+function mapStateToProps(state) {
+  return { ...state.auth };
+}
+
+/**
+ * Functional view component for Register logic
+ */
+const RegisterView = ({
+  isSendingAuthRequest,
+  authRequestError,
+  authRequestSuccess,
+  email,
+  password,
+  passwordConfirmation,
+  changeEmail,
+  changePassword,
+  changePasswordConfirmation,
+  onSubmitRegistration
+}) => (
+  <Container>
+    <Header>Register</Header>
+    <Form
+      loading={isSendingAuthRequest}
+      onSubmit={onSubmitRegistration}
+      error={!!authRequestError}
+      success={!!authRequestSuccess}
+    >
+      <Form.Field>
+        <label>Email</label>
+        <input
+          placeholder="bob@gmail.com"
+          type="email"
+          value={email}
+          onChange={changeEmail}
+        />
+      </Form.Field>
+      <Form.Field>
+        <label>Password</label>
+        <input
+          placeholder="••••••••"
+          type="password"
+          value={password}
+          onChange={changePassword}
+        />
+      </Form.Field>
+      <Form.Field>
+        <label>Password Confirmation</label>
+        <input
+          placeholder="••••••••"
+          type="password"
+          value={passwordConfirmation}
+          onChange={changePasswordConfirmation}
+        />
+      </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>
+    </Form>
+  </Container>
+);
+
+export default connect(mapStateToProps)(Register);