[CORL-423] Rearrange client files and folder (#2352)

* chore: reorganize account

* chore: reorganize install

* chore: reorganize auth files

* chore: reorganize admin files

* fix: graphql naming

* chore: adapt account routing

src/core/client/auth/App/AccountCompletion/AccountCompletionContainer.tsx

@@ -4,11 +4,7 @@ import { Component } from "react";
 import { AccountCompletionContainer_auth as AuthData } from "coral-auth/__generated__/AccountCompletionContainer_auth.graphql";
 import { AccountCompletionContainer_viewer as UserData } from "coral-auth/__generated__/AccountCompletionContainer_viewer.graphql";
 import { AccountCompletionContainerLocal as Local } from "coral-auth/__generated__/AccountCompletionContainerLocal.graphql";
-import {
-  CompleteAccountMutation,
-  SetViewMutation,
-  withCompleteAccountMutation,
-} from "coral-auth/mutations";
+import { SetViewMutation } from "coral-auth/mutations";
 import {
   graphql,
   MutationProp,
@@ -17,6 +13,11 @@ import {
   withMutation,
 } from "coral-framework/lib/relay";
 
+import {
+  CompleteAccountMutation,
+  withCompleteAccountMutation,
+} from "./CompleteAccountMutation";
+
 interface Props {
   completeAccount: CompleteAccountMutation;
   setView: MutationProp<typeof SetViewMutation>;

src/core/client/auth/App/AccountCompletion/index.ts

@@ -0,0 +1,4 @@
+export {
+  default,
+  default as AccountCompletionContainer,
+} from "./AccountCompletionContainer";

src/core/client/auth/App/App.tsx

@@ -2,12 +2,14 @@ import React, { FunctionComponent } from "react";
 
 import { PropTypesOf } from "coral-framework/types";
 
-import AddEmailAddressContainer from "../views/addEmailAddress/containers/AddEmailAddressContainer";
-import CreatePasswordContainer from "../views/createPassword/containers/CreatePasswordContainer";
-import CreateUsernameContainer from "../views/createUsername/containers/CreateUsernameContainer";
-import ForgotPassword from "../views/forgotPassword/components/ForgotPassword";
-import SignInContainer from "../views/signIn/containers/SignInContainer";
-import SignUpContainer from "../views/signUp/containers/SignUpContainer";
+import AddEmailAddress from "../views/AddEmailAddress";
+import CreatePassword from "../views/CreatePassword";
+import CreateUsername from "../views/CreateUsername";
+import ForgotPassword from "../views/ForgotPassword";
+import SignInContainer from "../views/SignIn";
+import SignUpContainer from "../views/SignUp";
+import ViewRouter from "./ViewRouter";
+
 import "./App.css";
 
 export type View =
@@ -34,18 +36,21 @@ const renderView = (view: AppProps["view"], auth: AppProps["auth"]) => {
     case "FORGOT_PASSWORD":
       return <ForgotPassword />;
     case "CREATE_USERNAME":
-      return <CreateUsernameContainer />;
+      return <CreateUsername />;
     case "CREATE_PASSWORD":
-      return <CreatePasswordContainer />;
+      return <CreatePassword />;
     case "ADD_EMAIL_ADDRESS":
-      return <AddEmailAddressContainer />;
+      return <AddEmailAddress />;
     default:
       throw new Error(`Unknown view ${view}`);
   }
 };
 
 const App: FunctionComponent<AppProps> = ({ view, auth }) => (
-  <div>{renderView(view, auth)}</div>
+  <>
+    {process.env.NODE_ENV !== "test" && <ViewRouter />}
+    <div>{renderView(view, auth)}</div>
+  </>
 );
 
 export default App;

src/core/client/auth/App/AppContainer.tsx

@@ -10,8 +10,8 @@ import {
   withLocalStateContainer,
 } from "coral-framework/lib/relay";
 
-import App from "../components/App";
-import AccountCompletionContainer from "./AccountCompletionContainer";
+import AccountCompletionContainer from "./AccountCompletion";
+import App from "./App";
 
 interface Props {
   local: Local;

src/core/client/auth/App/AppQuery.tsx

@@ -3,7 +3,7 @@ import React, { Component } from "react";
 
 import { AppQuery as QueryTypes } from "coral-auth/__generated__/AppQuery.graphql";
 
-import AppContainer from "../containers/AppContainer";
+import AppContainer from "./AppContainer";
 
 export default class AppQuery extends Component {
   public render() {

src/core/client/auth/App/ViewRouter.tsx

@@ -6,10 +6,10 @@ import { parseQuery } from "coral-common/utils";
 import { useMutation } from "coral-framework/lib/relay";
 
 /**
- * ViewRouterContainer listens for changes to the location
+ * ViewRouter listens for changes to the location
  * parses the `?view=` and calls the `setView` mutation.
  */
-const ViewRouterContainer: FunctionComponent = () => {
+const ViewRouter: FunctionComponent = () => {
   const setView = useMutation(SetViewMutation);
   useEffect(() => {
     window.onpopstate = () => {
@@ -23,4 +23,4 @@ const ViewRouterContainer: FunctionComponent = () => {
   return null;
 };
 
-export default ViewRouterContainer;
+export default ViewRouter;

src/core/client/auth/App/__snapshots__/App.spec.tsx.snap

@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders sign in 1`] = `
+<React.Fragment>
+  <div>
+    <withContext(withMutation(withContext(createMutationContainer(withContext(createMutationContainer(withContext(withLocalStateContainer(Relay(SignInContainer)))))))))
+      auth={Object {}}
+    />
+  </div>
+</React.Fragment>
+`;

src/core/client/auth/App/index.ts

@@ -0,0 +1 @@
+export { default, default as AppQuery } from "./AppQuery";

src/core/client/auth/components/AutoHeight.tsx

@@ -3,10 +3,10 @@ import { Component } from "react";
 import resizePopup from "../dom/resizePopup";
 
 /**
- * A container that adapts the window height to the current body size
+ * This component adapts the window height to the current body size
  * when this is mounted or updated.
  */
-export default class AutoHeightContainer extends Component {
+export default class AutoHeight extends Component {
   private updateWindowSize() {
     window.requestAnimationFrame(() => setTimeout(resizePopup, 0));
   }

src/core/client/auth/components/__snapshots__/App.spec.tsx.snap

@@ -1,9 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`renders sign in 1`] = `
-<div>
-  <withContext(withMutation(withContext(createMutationContainer(withContext(createMutationContainer(withContext(withLocalStateContainer(Relay(SignInContainer)))))))))
-    auth={Object {}}
-  />
-</div>
-`;

src/core/client/auth/index.tsx

@@ -4,11 +4,10 @@ import ReactDOM from "react-dom";
 
 import { createManaged } from "coral-framework/lib/bootstrap";
 
-import ViewRouterContainer from "./containers/ViewRouterContainer";
+import App from "./App";
 import resizePopup from "./dom/resizePopup";
 import { initLocalState } from "./local";
 import localesData from "./locales";
-import AppQuery from "./queries/AppQuery";
 
 // Import css variables.
 import "coral-ui/theme/variables.css";
@@ -20,7 +19,7 @@ import "coral-ui/theme/variables.css";
  * are switched out or other resources being loaded that React has no influence
  * over.
  *
- * This works in addition to <AutoHeightContainer /> which
+ * This works in addition to <AutoHeight /> which
  * adapt popup height when React does an update.
  */
 function pollPopupHeight(interval: number = 100) {
@@ -41,10 +40,7 @@ async function main() {
 
   const Index: FunctionComponent = () => (
     <ManagedCoralContextProvider>
-      <>
-        <ViewRouterContainer />
-        <AppQuery />
-      </>
+      <App />
     </ManagedCoralContextProvider>
   );
 

src/core/client/auth/mutations/index.ts

@@ -1,21 +1 @@
 export { default as SetViewMutation } from "./SetViewMutation";
-export { withSignInMutation, SignInMutation } from "./SignInMutation";
-export {
-  withCompleteAccountMutation,
-  CompleteAccountMutation,
-} from "./CompleteAccountMutation";
-export { withSignUpMutation, SignUpMutation } from "./SignUpMutation";
-export {
-  withClearErrorMutation,
-  ClearErrorMutation,
-} from "./ClearErrorMutation";
-export { withSetEmailMutation, SetEmailMutation } from "./SetEmailMutation";
-export {
-  withSetUsernameMutation,
-  SetUsernameMutation,
-} from "./SetUsernameMutation";
-export {
-  withSetPasswordMutation,
-  SetPasswordMutation,
-} from "./SetPasswordMutation";
-export { default as ForgotPasswordMutation } from "./ForgotPasswordMutation";

src/core/client/auth/test/create.tsx

@@ -1,11 +1,11 @@
 import React from "react";
 
-import AppQuery from "coral-auth/queries/AppQuery";
+import App from "coral-auth/App";
 import {
   createTestRenderer,
   CreateTestRendererParams,
 } from "coral-framework/testHelpers";
 
 export default function create(params: CreateTestRendererParams) {
-  return createTestRenderer("auth", <AppQuery />, params);
+  return createTestRenderer("auth", <App />, params);
 }

src/core/client/auth/views/AddEmailAddress/AddEmailAddress.tsx

@@ -0,0 +1,118 @@
+import { FORM_ERROR } from "final-form";
+import { Localized } from "fluent-react/compat";
+import React, { Component } from "react";
+import { Form } from "react-final-form";
+
+import { Bar, Title } from "coral-auth/components//Header";
+import AutoHeight from "coral-auth/components/AutoHeight";
+import ConfirmEmailField from "coral-auth/components/ConfirmEmailField";
+import EmailField from "coral-auth/components/EmailField";
+import Main from "coral-auth/components/Main";
+import { OnSubmit } from "coral-framework/lib/form";
+import {
+  Button,
+  CallOut,
+  HorizontalGutter,
+  Icon,
+  Typography,
+} from "coral-ui/components";
+
+import { SetEmailMutation, withSetEmailMutation } from "./SetEmailMutation";
+import { ListItem, UnorderedList } from "./UnorderedList";
+
+interface FormProps {
+  email: string;
+}
+
+interface Props {
+  setEmail: SetEmailMutation;
+}
+
+class AddEmailAddressContainer extends Component<Props> {
+  private handleSubmit: OnSubmit<FormProps> = async (input, form) => {
+    try {
+      await this.props.setEmail({ email: input.email });
+      return form.reset();
+    } catch (error) {
+      return { [FORM_ERROR]: error.message };
+    }
+  };
+
+  public render() {
+    // tslint:disable-next-line:no-empty
+    return (
+      <div data-testid="addEmailAddress-container">
+        <Bar>
+          <Localized id="addEmailAddress-addEmailAddressHeader">
+            <Title>Add Email Address</Title>
+          </Localized>
+        </Bar>
+        <Main data-testid="addEmailAddress-main">
+          <Form onSubmit={this.handleSubmit}>
+            {({ handleSubmit, submitting, submitError }) => (
+              <form autoComplete="off" onSubmit={handleSubmit}>
+                <AutoHeight />
+                <HorizontalGutter size="oneAndAHalf">
+                  <Localized id="addEmailAddress-whatItIs">
+                    <Typography variant="bodyCopy">
+                      For your added security, we require users to add an email
+                      address to their accounts. Your email address will be used
+                      to:
+                    </Typography>
+                  </Localized>
+                  <UnorderedList>
+                    <ListItem icon={<Icon>done</Icon>}>
+                      <Localized id="addEmailAddress-receiveUpdates">
+                        <Typography container="div">
+                          Receive updates regarding any changes to your account
+                          (email address, username, password, etc.)
+                        </Typography>
+                      </Localized>
+                    </ListItem>
+                    <ListItem icon={<Icon>done</Icon>}>
+                      <Localized id="addEmailAddress-allowDownload">
+                        <Typography container="div">
+                          Allow you to download your comments.
+                        </Typography>
+                      </Localized>
+                    </ListItem>
+                    <ListItem icon={<Icon>done</Icon>}>
+                      <Localized id="addEmailAddress-sendNotifications">
+                        <Typography container="div">
+                          Send comment notifications that you have chosen to
+                          receive.
+                        </Typography>
+                      </Localized>
+                    </ListItem>
+                  </UnorderedList>
+                  {submitError && (
+                    <CallOut color="error" fullWidth>
+                      {submitError}
+                    </CallOut>
+                  )}
+                  <EmailField disabled={submitting} />
+                  <ConfirmEmailField disabled={submitting} />
+                  <Localized id="addEmailAddress-addEmailAddressButton">
+                    <Button
+                      variant="filled"
+                      color="primary"
+                      size="large"
+                      type="submit"
+                      fullWidth
+                      disabled={submitting}
+                    >
+                      Add Email Address
+                    </Button>
+                  </Localized>
+                </HorizontalGutter>
+              </form>
+            )}
+          </Form>
+        </Main>
+      </div>
+    );
+  }
+}
+
+const enhanced = withSetEmailMutation(AddEmailAddressContainer);
+export default enhanced;

src/core/client/auth/views/AddEmailAddress/index.ts

@@ -0,0 +1 @@
+export { default, default as AddEmailAddress } from "./AddEmailAddress";

src/core/client/auth/views/CreatePassword/CreatePassword.tsx

@@ -0,0 +1,90 @@
+import { FORM_ERROR } from "final-form";
+import { Localized } from "fluent-react/compat";
+import React, { Component } from "react";
+import { Form } from "react-final-form";
+
+import { Bar, Title } from "coral-auth/components//Header";
+import AutoHeight from "coral-auth/components/AutoHeight";
+import Main from "coral-auth/components/Main";
+import SetPasswordField from "coral-auth/components/SetPasswordField";
+import { OnSubmit } from "coral-framework/lib/form";
+import {
+  Button,
+  CallOut,
+  HorizontalGutter,
+  Typography,
+} from "coral-ui/components";
+
+import {
+  SetPasswordMutation,
+  withSetPasswordMutation,
+} from "./SetPasswordMutation";
+
+interface FormProps {
+  password: string;
+}
+
+interface Props {
+  setPassword: SetPasswordMutation;
+}
+
+class CreatePasswordContainer extends Component<Props> {
+  private handleSubmit: OnSubmit<FormProps> = async (input, form) => {
+    try {
+      await this.props.setPassword({ password: input.password });
+      return form.reset();
+    } catch (error) {
+      return { [FORM_ERROR]: error.message };
+    }
+  };
+
+  public render() {
+    return (
+      <div data-testid="createPassword-container">
+        <Bar>
+          <Localized id="createPassword-createPasswordHeader">
+            <Title>Create Password</Title>
+          </Localized>
+        </Bar>
+        <Main data-testid="createPassword-main">
+          <Form onSubmit={this.handleSubmit}>
+            {({ handleSubmit, submitting, submitError }) => (
+              <form autoComplete="off" onSubmit={handleSubmit}>
+                <AutoHeight />
+                <HorizontalGutter size="oneAndAHalf">
+                  <Localized id="createPassword-whatItIs">
+                    <Typography variant="bodyCopy">
+                      To protect against unauthorized changes to your account,
+                      we require users to create a password.
+                    </Typography>
+                  </Localized>
+                  {submitError && (
+                    <CallOut color="error" fullWidth>
+                      {submitError}
+                    </CallOut>
+                  )}
+                  <SetPasswordField disabled={submitting} />
+                  <Localized id="createPassword-createPasswordButton">
+                    <Button
+                      variant="filled"
+                      color="primary"
+                      size="large"
+                      type="submit"
+                      fullWidth
+                      disabled={submitting}
+                    >
+                      Create Password
+                    </Button>
+                  </Localized>
+                </HorizontalGutter>
+              </form>
+            )}
+          </Form>
+        </Main>
+      </div>
+    );
+  }
+}
+
+const enhanced = withSetPasswordMutation(CreatePasswordContainer);
+export default enhanced;

src/core/client/auth/views/CreatePassword/index.ts

@@ -0,0 +1 @@
+export { default, default as CreatePassword } from "./CreatePassword";

src/core/client/auth/views/CreateUsername/CreateUsername.tsx

@@ -0,0 +1,91 @@
+import { FORM_ERROR } from "final-form";
+import { Localized } from "fluent-react/compat";
+import React, { Component } from "react";
+import { Form } from "react-final-form";
+
+import { Bar, Title } from "coral-auth/components//Header";
+import AutoHeight from "coral-auth/components/AutoHeight";
+import Main from "coral-auth/components/Main";
+import UsernameField from "coral-auth/components/UsernameField";
+import { OnSubmit } from "coral-framework/lib/form";
+import {
+  Button,
+  CallOut,
+  HorizontalGutter,
+  Typography,
+} from "coral-ui/components";
+
+import {
+  SetUsernameMutation,
+  withSetUsernameMutation,
+} from "./SetUsernameMutation";
+
+interface FormProps {
+  username: string;
+}
+
+interface Props {
+  setUsername: SetUsernameMutation;
+}
+
+class CreateUsernameContainer extends Component<Props> {
+  private handleSubmit: OnSubmit<FormProps> = async (input, form) => {
+    try {
+      await this.props.setUsername({ username: input.username });
+      return form.reset();
+    } catch (error) {
+      return { [FORM_ERROR]: error.message };
+    }
+  };
+
+  public render() {
+    // tslint:disable-next-line:no-empty
+    return (
+      <div data-testid="createUsername-container">
+        <Bar>
+          <Localized id="createUsername-createUsernameHeader">
+            <Title>Create Username</Title>
+          </Localized>
+        </Bar>
+        <Main data-testid="createUsername-main">
+          <Form onSubmit={this.handleSubmit}>
+            {({ handleSubmit, submitting, submitError }) => (
+              <form autoComplete="off" onSubmit={handleSubmit}>
+                <AutoHeight />
+                <HorizontalGutter size="oneAndAHalf">
+                  <Localized id="createUsername-whatItIs">
+                    <Typography variant="bodyCopy">
+                      Your username is an identifier that will appear on all of
+                      your comments.
+                    </Typography>
+                  </Localized>
+                  {submitError && (
+                    <CallOut color="error" fullWidth>
+                      {submitError}
+                    </CallOut>
+                  )}
+                  <UsernameField disabled={submitting} />
+                  <Localized id="createUsername-createUsernameButton">
+                    <Button
+                      variant="filled"
+                      color="primary"
+                      size="large"
+                      type="submit"
+                      fullWidth
+                      disabled={submitting}
+                    >
+                      Create Username
+                    </Button>
+                  </Localized>
+                </HorizontalGutter>
+              </form>
+            )}
+          </Form>
+        </Main>
+      </div>
+    );
+  }
+}
+
+const enhanced = withSetUsernameMutation(CreateUsernameContainer);
+export default enhanced;

src/core/client/auth/views/CreateUsername/index.ts

@@ -0,0 +1 @@
+export { default, default as CreateUsername } from "./CreateUsername";

src/core/client/auth/views/ForgotPassword/ForgotPasswordForm.tsx

@@ -3,11 +3,11 @@ import { Localized } from "fluent-react/compat";
 import React, { FunctionComponent, useCallback } from "react";
 import { Field, Form } from "react-final-form";
 
+import AutoHeight from "coral-auth/components/AutoHeight";
 import { Bar, SubBar, Title } from "coral-auth/components/Header";
 import Main from "coral-auth/components/Main";
-import AutoHeightContainer from "coral-auth/containers/AutoHeightContainer";
 import { getViewURL } from "coral-auth/helpers";
-import { ForgotPasswordMutation, SetViewMutation } from "coral-auth/mutations";
+import { SetViewMutation } from "coral-auth/mutations";
 import { InvalidRequestError } from "coral-framework/lib/errors";
 import { useMutation } from "coral-framework/lib/relay";
 import {
@@ -28,6 +28,8 @@ import {
   ValidationMessage,
 } from "coral-ui/components";
 
+import ForgotPasswordMutation from "./ForgotPasswordMutation";
+
 interface FormProps {
   email: string;
 }
@@ -87,7 +89,7 @@ const ForgotPasswordForm: FunctionComponent<Props> = ({ onCheckEmail }) => {
         <Form onSubmit={onSubmit}>
           {({ handleSubmit, submitting, submitError }) => (
             <form autoComplete="off" onSubmit={handleSubmit}>
-              <AutoHeightContainer />
+              <AutoHeight />
               <HorizontalGutter size="full">
                 <Localized id="forgotPassword-enterEmailAndGetALink">
                   <Typography variant="bodyCopy">

src/core/client/auth/views/ForgotPassword/index.ts

@@ -0,0 +1 @@
+export { default, default as ForgotPassword } from "./ForgotPassword";

src/core/client/auth/views/SignIn/SignIn.tsx

@@ -1,10 +1,10 @@
 import { Localized } from "fluent-react/compat";
 import React, { FunctionComponent } from "react";
 
-import { Bar, SubBar, Subtitle, Title } from "coral-auth/components//Header";
+import AutoHeight from "coral-auth/components/AutoHeight";
+import { Bar, SubBar, Subtitle, Title } from "coral-auth/components/Header";
 import Main from "coral-auth/components/Main";
 import OrSeparator from "coral-auth/components/OrSeparator";
-import AutoHeightContainer from "coral-auth/containers/AutoHeightContainer";
 import { PropTypesOf } from "coral-framework/types";
 import {
   CallOut,
@@ -14,10 +14,10 @@ import {
   Typography,
 } from "coral-ui/components";
 
-import SignInWithEmailContainer from "../containers/SignInWithEmailContainer";
-import SignInWithFacebookContainer from "../containers/SignInWithFacebookContainer";
-import SignInWithGoogleContainer from "../containers/SignInWithGoogleContainer";
-import SignInWithOIDCContainer from "../containers/SignInWithOIDCContainer";
+import SignInWithEmailContainer from "./SignInWithEmailContainer";
+import SignInWithFacebookContainer from "./SignInWithFacebookContainer";
+import SignInWithGoogleContainer from "./SignInWithGoogleContainer";
+import SignInWithOIDCContainer from "./SignInWithOIDCContainer";
 
 export interface SignInForm {
   error: string | null;
@@ -46,7 +46,7 @@ const SignIn: FunctionComponent<SignInForm> = ({
     facebookEnabled || googleEnabled || oidcEnabled;
   return (
     <div data-testid="signIn-container">
-      <AutoHeightContainer />
+      <AutoHeight />
       <Localized
         id="signIn-signInToJoinHeader"
         title={<Title />}

src/core/client/auth/views/SignIn/SignInContainer.tsx

@@ -2,13 +2,8 @@ import React, { Component } from "react";
 
 import { SignInContainer_auth as AuthData } from "coral-auth/__generated__/SignInContainer_auth.graphql";
 import { SignInContainerLocal as LocalData } from "coral-auth/__generated__/SignInContainerLocal.graphql";
-import {
-  ClearErrorMutation,
-  SetViewMutation,
-  SignInMutation,
-  withClearErrorMutation,
-  withSignInMutation,
-} from "coral-auth/mutations";
+import { getViewURL } from "coral-auth/helpers";
+import { SetViewMutation } from "coral-auth/mutations";
 import {
   graphql,
   MutationProp,
@@ -17,8 +12,12 @@ import {
   withMutation,
 } from "coral-framework/lib/relay";
 
-import { getViewURL } from "coral-auth/helpers";
-import SignIn from "../components/SignIn";
+import {
+  ClearErrorMutation,
+  withClearErrorMutation,
+} from "./ClearErrorMutation";
+import SignIn from "./SignIn";
+import { SignInMutation, withSignInMutation } from "./SignInMutation";
 
 interface Props {
   local: LocalData;

src/core/client/auth/views/SignIn/SignInWithEmail.tsx

@@ -3,8 +3,8 @@ import { Localized } from "fluent-react/compat";
 import React, { FunctionComponent } from "react";
 import { Field, Form } from "react-final-form";
 
+import AutoHeight from "coral-auth/components/AutoHeight";
 import EmailField from "coral-auth/components/EmailField";
-import AutoHeightContainer from "coral-auth/containers/AutoHeightContainer";
 import { PasswordField } from "coral-framework/components";
 import { composeValidators, required } from "coral-framework/lib/validation";
 import {
@@ -36,7 +36,7 @@ const SignInWithEmail: FunctionComponent<SignInWithEmailForm> = props => {
     <Form onSubmit={props.onSubmit}>
       {({ handleSubmit, submitting, submitError }) => (
         <form autoComplete="off" onSubmit={handleSubmit}>
-          <AutoHeightContainer />
+          <AutoHeight />
           <HorizontalGutter size="full">
             {submitError && (
               <CallOut color="error" fullWidth>

src/core/client/auth/views/SignIn/SignInWithEmailContainer.tsx

@@ -1,17 +1,13 @@
 import { FORM_ERROR } from "final-form";
 import React, { Component } from "react";
 
-import {
-  SetViewMutation,
-  SignInMutation,
-  withSignInMutation,
-} from "coral-auth/mutations";
+import { SetViewMutation } from "coral-auth/mutations";
 import { MutationProp, withMutation } from "coral-framework/lib/relay";
 
 import { getViewURL } from "coral-auth/helpers";
-import SignInWithEmail, {
-  SignInWithEmailForm,
-} from "../components/SignInWithEmail";
+
+import { SignInMutation, withSignInMutation } from "./SignInMutation";
+import SignInWithEmail, { SignInWithEmailForm } from "./SignInWithEmail";
 
 interface SignInContainerProps {
   signIn: SignInMutation;

src/core/client/auth/views/SignIn/__snapshots__/SignIn.spec.tsx.snap

@@ -4,7 +4,7 @@ exports[`renders correctly 1`] = `
 <div
   data-testid="signIn-container"
 >
-  <AutoHeightContainer />
+  <AutoHeight />
   <Localized
     id="signIn-signInToJoinHeader"
     subtitle={<Subtitle />}
@@ -65,7 +65,7 @@ exports[`renders error 1`] = `
 <div
   data-testid="signIn-container"
 >
-  <AutoHeightContainer />
+  <AutoHeight />
   <Localized
     id="signIn-signInToJoinHeader"
     subtitle={<Subtitle />}
@@ -132,7 +132,7 @@ exports[`renders without email login 1`] = `
 <div
   data-testid="signIn-container"
 >
-  <AutoHeightContainer />
+  <AutoHeight />
   <Localized
     id="signIn-signInToJoinHeader"
     subtitle={<Subtitle />}

src/core/client/auth/views/SignIn/index.ts

@@ -0,0 +1 @@
+export { default, default as SignInContainer } from "./SignInContainer";

src/core/client/auth/views/SignUp/SignUp.tsx

@@ -2,9 +2,9 @@ import { Localized } from "fluent-react/compat";
 import React, { FunctionComponent } from "react";
 
 import { Bar, SubBar, Subtitle, Title } from "coral-auth/components//Header";
+import AutoHeight from "coral-auth/components/AutoHeight";
 import Main from "coral-auth/components/Main";
 import OrSeparator from "coral-auth/components/OrSeparator";
-import AutoHeightContainer from "coral-auth/containers/AutoHeightContainer";
 import { PropTypesOf } from "coral-framework/types";
 import {
   Flex,
@@ -13,10 +13,10 @@ import {
   Typography,
 } from "coral-ui/components";
 
-import SignUpWithEmailContainer from "../containers/SignUpWithEmailContainer";
-import SignUpWithFacebookContainer from "../containers/SignUpWithFacebookContainer";
-import SignUpWithGoogleContainer from "../containers/SignUpWithGoogleContainer";
-import SignUpWithOIDCContainer from "../containers/SignUpWithOIDCContainer";
+import SignUpWithEmailContainer from "./SignUpWithEmailContainer";
+import SignUpWithFacebookContainer from "./SignUpWithFacebookContainer";
+import SignUpWithGoogleContainer from "./SignUpWithGoogleContainer";
+import SignUpWithOIDCContainer from "./SignUpWithOIDCContainer";
 
 interface Props {
   onGotoSignIn: React.EventHandler<React.MouseEvent>;
@@ -43,7 +43,7 @@ const SignUp: FunctionComponent<Props> = ({
     facebookEnabled || googleEnabled || oidcEnabled;
   return (
     <div data-testid="signUp-container">
-      <AutoHeightContainer />
+      <AutoHeight />
       <Localized
         id="signUp-signUpToJoinHeader"
         title={<Title />}

src/core/client/auth/views/SignUp/SignUpContainer.tsx

@@ -10,7 +10,7 @@ import {
 } from "coral-framework/lib/relay";
 
 import { getViewURL } from "coral-auth/helpers";
-import SignUp from "../components/SignUp";
+import SignUp from "./SignUp";
 
 interface Props {
   auth: AuthData;

src/core/client/auth/views/SignUp/SignUpWithEmail.tsx

@@ -3,6 +3,7 @@ import * as React from "react";
 import { FunctionComponent } from "react";
 import { Form } from "react-final-form";
 
+import AutoHeight from "coral-auth/components/AutoHeight";
 import EmailField from "coral-auth/components/EmailField";
 import SetPasswordField from "coral-auth/components/SetPasswordField";
 import UsernameField from "coral-auth/components/UsernameField";
@@ -14,8 +15,6 @@ import {
   HorizontalGutter,
 } from "coral-ui/components";
 
-import AutoHeightContainer from "coral-auth/containers/AutoHeightContainer";
-
 interface FormProps {
   email: string;
   username: string;
@@ -32,7 +31,7 @@ const SignUp: FunctionComponent<Props> = props => {
     <Form onSubmit={props.onSubmit}>
       {({ handleSubmit, submitting, submitError }) => (
         <form autoComplete="off" onSubmit={handleSubmit}>
-          <AutoHeightContainer />
+          <AutoHeight />
           <HorizontalGutter size="full">
             {submitError && (
               <CallOut color="error" fullWidth>

src/core/client/auth/views/SignUp/SignUpWithEmailContainer.tsx

@@ -1,10 +1,11 @@
 import { FORM_ERROR } from "final-form";
 import React, { Component } from "react";
 
-import { SignUpMutation, withSignUpMutation } from "coral-auth/mutations";
 import { PropTypesOf } from "coral-framework/types";
 
-import SignUp from "../components/SignUpWithEmail";
+import SignUp from "./SignUpWithEmail";
+
+import { SignUpMutation, withSignUpMutation } from "./SignUpMutation";
 
 interface SignUpContainerProps {
   signUp: SignUpMutation;

src/core/client/auth/views/SignUp/__snapshots__/SignUp.spec.tsx.snap

@@ -4,7 +4,7 @@ exports[`renders correctly 1`] = `
 <div
   data-testid="signUp-container"
 >
-  <AutoHeightContainer />
+  <AutoHeight />
   <Localized
     id="signUp-signUpToJoinHeader"
     subtitle={<Subtitle />}
@@ -65,7 +65,7 @@ exports[`renders without email sign up 1`] = `
 <div
   data-testid="signUp-container"
 >
-  <AutoHeightContainer />
+  <AutoHeight />
   <Localized
     id="signUp-signUpToJoinHeader"
     subtitle={<Subtitle />}

src/core/client/auth/views/SignUp/index.ts

@@ -0,0 +1 @@
+export { default, default as SignUpContainer } from "./SignUpContainer";

src/core/client/auth/views/addEmailAddress/components/AddEmailAddress.tsx

@@ -1,103 +0,0 @@
-import { Localized } from "fluent-react/compat";
-import React, { FunctionComponent } from "react";
-import { Form } from "react-final-form";
-
-import { Bar, Title } from "coral-auth/components//Header";
-import ConfirmEmailField from "coral-auth/components/ConfirmEmailField";
-import EmailField from "coral-auth/components/EmailField";
-import Main from "coral-auth/components/Main";
-import AutoHeightContainer from "coral-auth/containers/AutoHeightContainer";
-import { OnSubmit } from "coral-framework/lib/form";
-import {
-  Button,
-  CallOut,
-  HorizontalGutter,
-  Icon,
-  Typography,
-} from "coral-ui/components";
-
-import { ListItem, UnorderedList } from "./UnorderedList";
-
-interface FormProps {
-  email: string;
-}
-
-export interface AddEmailAddressForm {
-  onSubmit: OnSubmit<FormProps>;
-}
-
-const AddEmailAddress: FunctionComponent<AddEmailAddressForm> = props => {
-  return (
-    <div data-testid="addEmailAddress-container">
-      <Bar>
-        <Localized id="addEmailAddress-addEmailAddressHeader">
-          <Title>Add Email Address</Title>
-        </Localized>
-      </Bar>
-      <Main data-testid="addEmailAddress-main">
-        <Form onSubmit={props.onSubmit}>
-          {({ handleSubmit, submitting, submitError }) => (
-            <form autoComplete="off" onSubmit={handleSubmit}>
-              <AutoHeightContainer />
-              <HorizontalGutter size="oneAndAHalf">
-                <Localized id="addEmailAddress-whatItIs">
-                  <Typography variant="bodyCopy">
-                    For your added security, we require users to add an email
-                    address to their accounts. Your email address will be used
-                    to:
-                  </Typography>
-                </Localized>
-                <UnorderedList>
-                  <ListItem icon={<Icon>done</Icon>}>
-                    <Localized id="addEmailAddress-receiveUpdates">
-                      <Typography container="div">
-                        Receive updates regarding any changes to your account
-                        (email address, username, password, etc.)
-                      </Typography>
-                    </Localized>
-                  </ListItem>
-                  <ListItem icon={<Icon>done</Icon>}>
-                    <Localized id="addEmailAddress-allowDownload">
-                      <Typography container="div">
-                        Allow you to download your comments.
-                      </Typography>
-                    </Localized>
-                  </ListItem>
-                  <ListItem icon={<Icon>done</Icon>}>
-                    <Localized id="addEmailAddress-sendNotifications">
-                      <Typography container="div">
-                        Send comment notifications that you have chosen to
-                        receive.
-                      </Typography>
-                    </Localized>
-                  </ListItem>
-                </UnorderedList>
-                {submitError && (
-                  <CallOut color="error" fullWidth>
-                    {submitError}
-                  </CallOut>
-                )}
-                <EmailField disabled={submitting} />
-                <ConfirmEmailField disabled={submitting} />
-                <Localized id="addEmailAddress-addEmailAddressButton">
-                  <Button
-                    variant="filled"
-                    color="primary"
-                    size="large"
-                    type="submit"
-                    fullWidth
-                    disabled={submitting}
-                  >
-                    Add Email Address
-                  </Button>
-                </Localized>
-              </HorizontalGutter>
-            </form>
-          )}
-        </Form>
-      </Main>
-    </div>
-  );
-};
-
-export default AddEmailAddress;

src/core/client/auth/views/addEmailAddress/containers/AddEmailAddressContainer.tsx

@@ -1,35 +0,0 @@
-import { FORM_ERROR } from "final-form";
-import React, { Component } from "react";
-
-import {
-  SetEmailMutation,
-  withSetEmailMutation,
-} from "coral-auth/mutations/SetEmailMutation";
-import { PropTypesOf } from "coral-framework/types";
-
-import AddEmailAddress from "../components/AddEmailAddress";
-
-interface Props {
-  setEmail: SetEmailMutation;
-}
-
-class AddEmailAddressContainer extends Component<Props> {
-  private handleSubmit: PropTypesOf<
-    typeof AddEmailAddress
-  >["onSubmit"] = async (input, form) => {
-    try {
-      await this.props.setEmail({ email: input.email });
-      return form.reset();
-    } catch (error) {
-      return { [FORM_ERROR]: error.message };
-    }
-  };
-
-  public render() {
-    // tslint:disable-next-line:no-empty
-    return <AddEmailAddress onSubmit={this.handleSubmit} />;
-  }
-}
-
-const enhanced = withSetEmailMutation(AddEmailAddressContainer);
-export default enhanced;

src/core/client/auth/views/createPassword/components/CreatePassword.tsx

@@ -1,73 +0,0 @@
-import { Localized } from "fluent-react/compat";
-import React, { FunctionComponent } from "react";
-import { Form } from "react-final-form";
-
-import { Bar, Title } from "coral-auth/components//Header";
-import Main from "coral-auth/components/Main";
-import AutoHeightContainer from "coral-auth/containers/AutoHeightContainer";
-import { OnSubmit } from "coral-framework/lib/form";
-import {
-  Button,
-  CallOut,
-  HorizontalGutter,
-  Typography,
-} from "coral-ui/components";
-
-import SetPasswordField from "coral-auth/components/SetPasswordField";
-
-interface FormProps {
-  password: string;
-}
-
-export interface CreatePasswordForm {
-  onSubmit: OnSubmit<FormProps>;
-}
-
-const CreatePassword: FunctionComponent<CreatePasswordForm> = props => {
-  return (
-    <div data-testid="createPassword-container">
-      <Bar>
-        <Localized id="createPassword-createPasswordHeader">
-          <Title>Create Password</Title>
-        </Localized>
-      </Bar>
-      <Main data-testid="createPassword-main">
-        <Form onSubmit={props.onSubmit}>
-          {({ handleSubmit, submitting, submitError }) => (
-            <form autoComplete="off" onSubmit={handleSubmit}>
-              <AutoHeightContainer />
-              <HorizontalGutter size="oneAndAHalf">
-                <Localized id="createPassword-whatItIs">
-                  <Typography variant="bodyCopy">
-                    To protect against unauthorized changes to your account, we
-                    require users to create a password.
-                  </Typography>
-                </Localized>
-                {submitError && (
-                  <CallOut color="error" fullWidth>
-                    {submitError}
-                  </CallOut>
-                )}
-                <SetPasswordField disabled={submitting} />
-                <Localized id="createPassword-createPasswordButton">
-                  <Button
-                    variant="filled"
-                    color="primary"
-                    size="large"
-                    type="submit"
-                    fullWidth
-                    disabled={submitting}
-                  >
-                    Create Password
-                  </Button>
-                </Localized>
-              </HorizontalGutter>
-            </form>
-          )}
-        </Form>
-      </Main>
-    </div>
-  );
-};
-
-export default CreatePassword;

src/core/client/auth/views/createPassword/containers/CreatePasswordContainer.tsx

@@ -1,35 +0,0 @@
-import { FORM_ERROR } from "final-form";
-import React, { Component } from "react";
-
-import {
-  SetPasswordMutation,
-  withSetPasswordMutation,
-} from "coral-auth/mutations/SetPasswordMutation";
-import { PropTypesOf } from "coral-framework/types";
-
-import CreatePassword from "../components/CreatePassword";
-
-interface Props {
-  setPassword: SetPasswordMutation;
-}
-
-class CreatePasswordContainer extends Component<Props> {
-  private handleSubmit: PropTypesOf<typeof CreatePassword>["onSubmit"] = async (
-    input,
-    form
-  ) => {
-    try {
-      await this.props.setPassword({ password: input.password });
-      return form.reset();
-    } catch (error) {
-      return { [FORM_ERROR]: error.message };
-    }
-  };
-
-  public render() {
-    return <CreatePassword onSubmit={this.handleSubmit} />;
-  }
-}
-
-const enhanced = withSetPasswordMutation(CreatePasswordContainer);
-export default enhanced;

src/core/client/auth/views/createUsername/components/CreateUsername.tsx

@@ -1,73 +0,0 @@
-import { Localized } from "fluent-react/compat";
-import React, { FunctionComponent } from "react";
-import { Form } from "react-final-form";
-
-import { Bar, Title } from "coral-auth/components//Header";
-import Main from "coral-auth/components/Main";
-import AutoHeightContainer from "coral-auth/containers/AutoHeightContainer";
-import { OnSubmit } from "coral-framework/lib/form";
-import {
-  Button,
-  CallOut,
-  HorizontalGutter,
-  Typography,
-} from "coral-ui/components";
-
-import UsernameField from "coral-auth/components/UsernameField";
-
-interface FormProps {
-  username: string;
-}
-
-export interface CreateUsernameForm {
-  onSubmit: OnSubmit<FormProps>;
-}
-
-const CreateUsername: FunctionComponent<CreateUsernameForm> = props => {
-  return (
-    <div data-testid="createUsername-container">
-      <Bar>
-        <Localized id="createUsername-createUsernameHeader">
-          <Title>Create Username</Title>
-        </Localized>
-      </Bar>
-      <Main data-testid="createUsername-main">
-        <Form onSubmit={props.onSubmit}>
-          {({ handleSubmit, submitting, submitError }) => (
-            <form autoComplete="off" onSubmit={handleSubmit}>
-              <AutoHeightContainer />
-              <HorizontalGutter size="oneAndAHalf">
-                <Localized id="createUsername-whatItIs">
-                  <Typography variant="bodyCopy">
-                    Your username is an identifier that will appear on all of
-                    your comments.
-                  </Typography>
-                </Localized>
-                {submitError && (
-                  <CallOut color="error" fullWidth>
-                    {submitError}
-                  </CallOut>
-                )}
-                <UsernameField disabled={submitting} />
-                <Localized id="createUsername-createUsernameButton">
-                  <Button
-                    variant="filled"
-                    color="primary"
-                    size="large"
-                    type="submit"
-                    fullWidth
-                    disabled={submitting}
-                  >
-                    Create Username
-                  </Button>
-                </Localized>
-              </HorizontalGutter>
-            </form>
-          )}
-        </Form>
-      </Main>
-    </div>
-  );
-};
-
-export default CreateUsername;

src/core/client/auth/views/createUsername/containers/CreateUsernameContainer.tsx

@@ -1,36 +0,0 @@
-import { FORM_ERROR } from "final-form";
-import React, { Component } from "react";
-
-import {
-  SetUsernameMutation,
-  withSetUsernameMutation,
-} from "coral-auth/mutations/SetUsernameMutation";
-import { PropTypesOf } from "coral-framework/types";
-
-import CreateUsername from "../components/CreateUsername";
-
-interface Props {
-  setUsername: SetUsernameMutation;
-}
-
-class CreateUsernameContainer extends Component<Props> {
-  private handleSubmit: PropTypesOf<typeof CreateUsername>["onSubmit"] = async (
-    input,
-    form
-  ) => {
-    try {
-      await this.props.setUsername({ username: input.username });
-      return form.reset();
-    } catch (error) {
-      return { [FORM_ERROR]: error.message };
-    }
-  };
-
-  public render() {
-    // tslint:disable-next-line:no-empty
-    return <CreateUsername onSubmit={this.handleSubmit} />;
-  }
-}
-
-const enhanced = withSetUsernameMutation(CreateUsernameContainer);
-export default enhanced;