Update: Add resend confirmation code button and refactored the application code

src/components/ConfirmationForm.js

@@ -1,18 +1,18 @@
 import React from "react";
 
 import {
-  ActionButton,
   ConfirmationCode,
   ResetButton,
-  ConfirmRegistrationForm as Confirmation,
+  ResendConfirmationCodeButton,
+  ConfirmRegistrationForm,
   SubmitButton,
 } from "react-serverless-auth";
 
 export default props => (
-  <Confirmation {...props}>
+  <ConfirmRegistrationForm {...props}>
     <ConfirmationCode />
-    <ActionButton>Request New Code</ActionButton>
+    <ResendConfirmationCodeButton formType={'registration'}>Resend Code</ResendConfirmationCodeButton>
     <SubmitButton>Confirm</SubmitButton>
     <ResetButton>Reset</ResetButton>
-  </Confirmation>
+  </ConfirmRegistrationForm>
 );

src/components/PasswordResetConfirmForm.js

@@ -5,7 +5,8 @@ import {
   Password,
   PasswordConfirmation,
   ResetButton,
-  PasswordResetConfirmForm ,
+  ResendConfirmationCodeButton,
+  PasswordResetConfirmForm,
   SubmitButton,
 } from "react-serverless-auth";
 
@@ -14,6 +15,7 @@ export default props => (
     <ConfirmationCode />
     <Password autoComplete={"new-password"}/>
     <PasswordConfirmation autoComplete={"new-password"}/>
+    <ResendConfirmationCodeButton formType={'passwordReset'}>Resend Code</ResendConfirmationCodeButton>
     <SubmitButton>Reset Password</SubmitButton>
     <ResetButton>Cancel</ResetButton>
   </PasswordResetConfirmForm>

src/components/index.js

@@ -1,23 +1,15 @@
 import ConfirmationForm from "./ConfirmationForm";
-import Home from "./Home";
 import NotFound from "./NotFound";
 import PasswordResetConfirmForm from "./PasswordResetConfirmForm";
 import PasswordResetRequestForm from "./PasswordResetRequestForm";
-import Private from "./Private";
-import Public from "./Public";
-import RouteWithRedirect from "./RouteWithRedirect";
 import SignInForm from "./SignInForm";
 import SignUpForm from "./SignUpForm";
 
 export {
   ConfirmationForm,
-  Home,
   NotFound,
   PasswordResetConfirmForm,
   PasswordResetRequestForm,
-  Private,
-  Public,
-  RouteWithRedirect,
   SignInForm,
   SignUpForm
 }

src/components/tests/ConfirmationForm.test.js

@@ -2,4 +2,4 @@ import React from "react";
 import { ConfirmationForm } from "..";
 import { testContainer } from "./shared-examples";
 
-describe("PasswordResetConfirmForm", () => testContainer(<ConfirmationForm />));
+describe("PasswordResetConfirmForm", () => testContainer(<ConfirmationForm noEmail={null} />));

src/components/tests/__snapshots__/ConfirmationForm.test.js.snap

@@ -1,51 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`PasswordResetConfirmForm renders without errors 1`] = `
-<form
-  className={undefined}
-  onSubmit={[Function]}
->
-  <div
-    className="messages"
-  >
-    <div
-      className="flash"
-    />
-  </div>
-  <div>
-    <label />
-    <div>
-      <input
-        name="code"
-        onBlur={[Function]}
-        onChange={[Function]}
-        onDragStart={[Function]}
-        onDrop={[Function]}
-        onFocus={[Function]}
-        placeholder="Confirmation Code"
-        type="text"
-        value=""
-      />
-    </div>
-  </div>
-  <button
-    onClick={undefined}
-    type="button"
-  >
-    Request New Code
-  </button>
-  <button
-    disabled={true}
-    type="submit"
-  >
-    Confirm
-  </button>
-  <button
-    disabled={true}
-    onClick={[Function]}
-    type="reset"
-  >
-    Reset
-  </button>
-</form>
-`;
+exports[`PasswordResetConfirmForm renders without errors 1`] = `null`;

src/components/tests/__snapshots__/PasswordResetConfirmationForm.test.js.snap

@@ -62,6 +62,13 @@ exports[`PasswordResetConfirmForm renders without errors 1`] = `
       />
     </div>
   </div>
+  <button
+    disabled={false}
+    onClick={[Function]}
+    type="button"
+  >
+    Resend Code
+  </button>
   <button
     disabled={true}
     type="submit"

src/index.js

@@ -2,25 +2,21 @@ import React from "react";
 import ReactDOM from "react-dom";
 import { Provider } from "react-redux";
 import { NavLink } from "react-router-dom";
-import { Switch, Route } from "react-router";
+import { Switch, Route, Redirect } from "react-router";
 import { ConnectedRouter } from "react-router-redux";
 
 import createHistory from "history/createBrowserHistory";
 import createStore from "./createStore";
 
 import registerServiceWorker from "./registerServiceWorker";
 
-import { Unauthenticated, SignOutLink, PasswordResetForm, authRoutes } from "react-serverless-auth";
+import { Unauthenticated, SignOutButton, PasswordResetForm, Protected, authRoutes } from "react-serverless-auth";
 
 import {
   ConfirmationForm,
-  Home,
   NotFound,
-  Private,
-  Public,
   PasswordResetRequestForm,
   PasswordResetConfirmForm,
-  RouteWithRedirect,
   SignInForm,
   SignUpForm,
 } from "./components";
@@ -30,6 +26,13 @@ import "./index.css";
 const history = createHistory();
 const store = createStore(history);
 
+const AuthRoute = ({ path, children }) => (
+  <Route path={path}>
+    <Unauthenticated component={<Redirect to={'/'} />} loadingComponent={'Loading...'}>{children}</Unauthenticated>
+  </Route>
+);
+
+registerServiceWorker();
 ReactDOM.render(
   <Provider store={store}>
     <ConnectedRouter history={history}>
@@ -40,28 +43,21 @@ ReactDOM.render(
           <NavLink to="/private">Private</NavLink>
           <Unauthenticated><NavLink to={authRoutes.signIn}>Sign In</NavLink></Unauthenticated>
           <Unauthenticated><NavLink to={authRoutes.register}>Sign Up</NavLink></Unauthenticated>
-          <SignOutLink className={"btn"}>Sign Out</SignOutLink>
+          <SignOutButton className={"btn"}>Sign Out</SignOutButton>
         </nav>
+
         <Switch>
-          <Route path={"/"} exact><Home /></Route>
-          <Route path={"/public"}><Public /></Route>
-          <Route path={"/private"}><Private /></Route>
-          <RouteWithRedirect to={"/"} path={authRoutes.signIn} component={SignInForm} />
-          <RouteWithRedirect to={"/"} path={authRoutes.register} component={SignUpForm} />
-          <RouteWithRedirect to={"/"} path={authRoutes.confirm} component={ConfirmationForm} />
-          <Route path={authRoutes.reset}>
-            <Unauthenticated component={NotFound}>
-              <PasswordResetForm
-                requestForm={PasswordResetRequestForm}
-                confirmationForm={PasswordResetConfirmForm}
-              />
-            </Unauthenticated>
-          </Route>
+          <Route path={"/"} exact><div>Home</div></Route>
+          <Route path={"/public"}><div>Public Content</div></Route>
+          <Route path={"/private"}><Protected component={SignInForm}><div>Private Content</div></Protected></Route>
+          <AuthRoute path={authRoutes.signIn}><SignInForm /></AuthRoute>
+          <AuthRoute path={authRoutes.register}><SignUpForm /></AuthRoute>
+          <AuthRoute path={authRoutes.confirm}><ConfirmationForm noEmail={<Redirect to={'/'} />}/></AuthRoute>
+          <AuthRoute path={authRoutes.reset}><PasswordResetForm requestForm={PasswordResetRequestForm} confirmationForm={PasswordResetConfirmForm} /></AuthRoute>
           <Route><NotFound /></Route>
         </Switch>
       </div>
     </ConnectedRouter>
   </Provider>,
   document.getElementById("root")
 );
-registerServiceWorker();