From 6df52aadbb4c09693cf9189191a4403820a5e4fa Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Wed, 8 Aug 2018 11:13:23 -0300
Subject: [PATCH 01/81] Adding auth to the watcher

---
 config/watcher.ts | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/config/watcher.ts b/config/watcher.ts
index 277ec34ec..55b11c4ce 100644
--- a/config/watcher.ts
+++ b/config/watcher.ts
@@ -19,6 +19,9 @@ const config: Config = {
         "core/client/stream/**/*.ts",
         "core/client/stream/**/*.tsx",
         "core/client/stream/**/*.graphql",
+        "core/client/auth/**/*.ts",
+        "core/client/auth/**/*.tsx",
+        "core/client/auth/**/*.graphql",
         "core/server/**/*.graphql",
       ],
       ignore: [

From 577629c65b4d9c73697543bcdeafce4ed3524c85 Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Wed, 8 Aug 2018 11:13:44 -0300
Subject: [PATCH 02/81] Adding auth target

---
 src/core/build/createWebpackConfig.ts         | 29 ++++++++++-----
 src/core/build/paths.ts                       |  5 +++
 src/core/client/auth/.babelrc.js              | 10 ++++++
 src/core/client/auth/components/App.tsx       | 10 ++++++
 .../client/auth/containers/AppContainer.tsx   | 10 ++++++
 src/core/client/auth/index.html               | 15 ++++++++
 src/core/client/auth/index.tsx                | 36 +++++++++++++++++++
 src/core/client/auth/locales.ts               |  9 +++++
 8 files changed, 116 insertions(+), 8 deletions(-)
 create mode 100644 src/core/client/auth/.babelrc.js
 create mode 100644 src/core/client/auth/components/App.tsx
 create mode 100644 src/core/client/auth/containers/AppContainer.tsx
 create mode 100644 src/core/client/auth/index.html
 create mode 100644 src/core/client/auth/index.tsx
 create mode 100644 src/core/client/auth/locales.ts

diff --git a/src/core/build/createWebpackConfig.ts b/src/core/build/createWebpackConfig.ts
index e14cb250a..7e1561234 100644
--- a/src/core/build/createWebpackConfig.ts
+++ b/src/core/build/createWebpackConfig.ts
@@ -407,29 +407,42 @@ export default function createWebpackConfig({
     /* Webpack config for our embed */
     {
       ...baseConfig,
-      entry: [
-        // No polyfills for the embed.
-        (isProduction && "") ||
-          require.resolve("react-dev-utils/webpackHotDevClient"),
-        paths.appEmbedIndex,
-        // Remove deactivated entries.
-      ].filter(s => s),
+      entry: {
+        embed: [
+          paths.appEmbedIndex,
+          (isProduction && "") ||
+            require.resolve("react-dev-utils/webpackHotDevClient"),
+        ],
+        auth: [
+          paths.appAuthIndex,
+          (isProduction && "") ||
+            require.resolve("react-dev-utils/webpackHotDevClient"),
+        ],
+      },
       output: {
         ...baseConfig.output,
         library: "Talk",
         // don't hash the embed, cache-busting must be completed by the requester
         // as this lives in a static template on the embed site.
-        filename: "assets/js/embed.js",
+        filename: "assets/js/[name].js",
       },
       plugins: [
         ...baseConfig.plugins!,
         // Generates an `stream.html` file with the <script> injected.
         new HtmlWebpackPlugin({
+          chunks: ["embed"],
           filename: "embed.html",
           template: paths.appEmbedHTML,
           inject: "head",
           ...htmlWebpackConfig,
         }),
+        new HtmlWebpackPlugin({
+          chunks: ["auth"],
+          filename: "auth.html",
+          template: paths.appAuthHTML,
+          inject: "head",
+          ...htmlWebpackConfig,
+        }),
         // Makes some environment variables available in index.html.
         // The public URL is available as %PUBLIC_URL% in index.html, e.g.:
         // <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
diff --git a/src/core/build/paths.ts b/src/core/build/paths.ts
index d76c8626d..8b67fe936 100644
--- a/src/core/build/paths.ts
+++ b/src/core/build/paths.ts
@@ -20,12 +20,17 @@ export default {
   appLocales: resolveSrc("locales"),
   appThemeVariables: resolveSrc("core/client/ui/theme/variables.ts"),
   appThemeVariablesCSS: resolveSrc("core/client/ui/theme/variables.css"),
+
   appStreamHTML: resolveSrc("core/client/stream/index.html"),
   appStreamLocalesTemplate: resolveSrc("core/client/stream/locales.ts"),
   appStreamIndex: resolveSrc("core/client/stream/index.tsx"),
+
   appEmbedIndex: resolveSrc("core/client/embed/index.ts"),
   appEmbedHTML: resolveSrc("core/client/embed/index.html"),
 
+  appAuthIndex: resolveSrc("core/client/auth/index.ts"),
+  appAuthHTML: resolveSrc("core/client/auth/index.html"),
+
   appDistStatic: resolveApp("dist/static"),
   appPublic: resolveApp("public"),
   appPackageJson: resolveApp("package.json"),
diff --git a/src/core/client/auth/.babelrc.js b/src/core/client/auth/.babelrc.js
new file mode 100644
index 000000000..11bf9a670
--- /dev/null
+++ b/src/core/client/auth/.babelrc.js
@@ -0,0 +1,10 @@
+const path = require("path");
+module.exports = {
+  extends: "../.babelrc.js",
+  plugins: [
+    [
+      "babel-plugin-relay",
+      { artifactDirectory: path.resolve(__dirname, "./__generated__") },
+    ],
+  ],
+};
diff --git a/src/core/client/auth/components/App.tsx b/src/core/client/auth/components/App.tsx
new file mode 100644
index 000000000..fab2115dd
--- /dev/null
+++ b/src/core/client/auth/components/App.tsx
@@ -0,0 +1,10 @@
+import * as React from "react";
+import { StatelessComponent } from "react";
+
+import { Flex } from "talk-ui/components";
+
+const App: StatelessComponent = () => {
+  return <Flex justifyContent="center">Holaaaaa</Flex>;
+};
+
+export default App;
diff --git a/src/core/client/auth/containers/AppContainer.tsx b/src/core/client/auth/containers/AppContainer.tsx
new file mode 100644
index 000000000..d1cf2e5b9
--- /dev/null
+++ b/src/core/client/auth/containers/AppContainer.tsx
@@ -0,0 +1,10 @@
+import * as React from "react";
+import { StatelessComponent } from "react";
+
+import App from "../components/App";
+
+const AppContainer: StatelessComponent = () => {
+  return <App />;
+};
+
+export default AppContainer;
diff --git a/src/core/client/auth/index.html b/src/core/client/auth/index.html
new file mode 100644
index 000000000..7de15b991
--- /dev/null
+++ b/src/core/client/auth/index.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <title>Talk - Auth</title>
+  <meta charset="utf-8">
+  <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
+  <meta name="viewport" content="width=device-width, user-scalable=no">
+</head>
+
+<body>
+  <div id="app"></div>
+</body>
+
+</html>
diff --git a/src/core/client/auth/index.tsx b/src/core/client/auth/index.tsx
new file mode 100644
index 000000000..a5aad64ba
--- /dev/null
+++ b/src/core/client/auth/index.tsx
@@ -0,0 +1,36 @@
+import React, { StatelessComponent } from "react";
+import ReactDOM from "react-dom";
+
+import {
+  createContext,
+  TalkContext,
+  TalkContextProvider,
+} from "talk-framework/lib/bootstrap";
+
+import AppContainer from "./containers/AppContainer";
+import { initLocalState } from "./local";
+import localesData from "./locales";
+
+// This is called when the context is first initialized.
+async function init(context: TalkContext) {
+  await initLocalState(context.relayEnvironment);
+}
+
+async function main() {
+  // Bootstrap our context.
+  const context = await createContext({
+    init,
+    localesData,
+    userLocales: navigator.languages,
+  });
+
+  const Index: StatelessComponent = () => (
+    <TalkContextProvider value={context}>
+      <AppContainer />
+    </TalkContextProvider>
+  );
+
+  ReactDOM.render(<Index />, document.getElementById("app"));
+}
+
+main();
diff --git a/src/core/client/auth/locales.ts b/src/core/client/auth/locales.ts
new file mode 100644
index 000000000..b9c9f16c7
--- /dev/null
+++ b/src/core/client/auth/locales.ts
@@ -0,0 +1,9 @@
+/**
+ * The actual content of this file is being generated by our `locales-loader`.
+ * Please check `./src/loaders` and the webpack config for more information.
+ *
+ * This file only represents the types that gets exported.
+ */
+
+import { LocalesData } from "talk-framework/lib/i18n";
+export default {} as LocalesData;

From 229569256ef16b5868e52d4b5d131217c50c4ba5 Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Wed, 8 Aug 2018 11:37:58 -0300
Subject: [PATCH 03/81] wio

---
 src/core/build/paths.ts                 | 2 +-
 src/core/client/auth/components/App.tsx | 2 +-
 src/core/client/auth/index.tsx          | 8 --------
 3 files changed, 2 insertions(+), 10 deletions(-)

diff --git a/src/core/build/paths.ts b/src/core/build/paths.ts
index 8b67fe936..680008813 100644
--- a/src/core/build/paths.ts
+++ b/src/core/build/paths.ts
@@ -28,7 +28,7 @@ export default {
   appEmbedIndex: resolveSrc("core/client/embed/index.ts"),
   appEmbedHTML: resolveSrc("core/client/embed/index.html"),
 
-  appAuthIndex: resolveSrc("core/client/auth/index.ts"),
+  appAuthIndex: resolveSrc("core/client/auth/index.tsx"),
   appAuthHTML: resolveSrc("core/client/auth/index.html"),
 
   appDistStatic: resolveApp("dist/static"),
diff --git a/src/core/client/auth/components/App.tsx b/src/core/client/auth/components/App.tsx
index fab2115dd..3e8c91e42 100644
--- a/src/core/client/auth/components/App.tsx
+++ b/src/core/client/auth/components/App.tsx
@@ -4,7 +4,7 @@ import { StatelessComponent } from "react";
 import { Flex } from "talk-ui/components";
 
 const App: StatelessComponent = () => {
-  return <Flex justifyContent="center">Holaaaaa</Flex>;
+  return <Flex justifyContent="center">Auth</Flex>;
 };
 
 export default App;
diff --git a/src/core/client/auth/index.tsx b/src/core/client/auth/index.tsx
index a5aad64ba..12bb6f8ea 100644
--- a/src/core/client/auth/index.tsx
+++ b/src/core/client/auth/index.tsx
@@ -3,23 +3,15 @@ import ReactDOM from "react-dom";
 
 import {
   createContext,
-  TalkContext,
   TalkContextProvider,
 } from "talk-framework/lib/bootstrap";
 
 import AppContainer from "./containers/AppContainer";
-import { initLocalState } from "./local";
 import localesData from "./locales";
 
-// This is called when the context is first initialized.
-async function init(context: TalkContext) {
-  await initLocalState(context.relayEnvironment);
-}
-
 async function main() {
   // Bootstrap our context.
   const context = await createContext({
-    init,
     localesData,
     userLocales: navigator.languages,
   });

From 2fb3ab2e8fadcc8498ca7b630b9bb218c76e9a58 Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Wed, 8 Aug 2018 11:42:09 -0300
Subject: [PATCH 04/81] Adding target config for auth

---
 src/core/build/createWebpackConfig.ts | 66 ++++++++++++++++++---------
 1 file changed, 45 insertions(+), 21 deletions(-)

diff --git a/src/core/build/createWebpackConfig.ts b/src/core/build/createWebpackConfig.ts
index 7e1561234..60bb6cbec 100644
--- a/src/core/build/createWebpackConfig.ts
+++ b/src/core/build/createWebpackConfig.ts
@@ -407,42 +407,29 @@ export default function createWebpackConfig({
     /* Webpack config for our embed */
     {
       ...baseConfig,
-      entry: {
-        embed: [
-          paths.appEmbedIndex,
-          (isProduction && "") ||
-            require.resolve("react-dev-utils/webpackHotDevClient"),
-        ],
-        auth: [
-          paths.appAuthIndex,
-          (isProduction && "") ||
-            require.resolve("react-dev-utils/webpackHotDevClient"),
-        ],
-      },
+      entry: [
+        // No polyfills for the embed.
+        (isProduction && "") ||
+          require.resolve("react-dev-utils/webpackHotDevClient"),
+        paths.appEmbedIndex,
+        // Remove deactivated entries.
+      ].filter(s => s),
       output: {
         ...baseConfig.output,
         library: "Talk",
         // don't hash the embed, cache-busting must be completed by the requester
         // as this lives in a static template on the embed site.
-        filename: "assets/js/[name].js",
+        filename: "assets/js/embed.js",
       },
       plugins: [
         ...baseConfig.plugins!,
         // Generates an `stream.html` file with the <script> injected.
         new HtmlWebpackPlugin({
-          chunks: ["embed"],
           filename: "embed.html",
           template: paths.appEmbedHTML,
           inject: "head",
           ...htmlWebpackConfig,
         }),
-        new HtmlWebpackPlugin({
-          chunks: ["auth"],
-          filename: "auth.html",
-          template: paths.appAuthHTML,
-          inject: "head",
-          ...htmlWebpackConfig,
-        }),
         // Makes some environment variables available in index.html.
         // The public URL is available as %PUBLIC_URL% in index.html, e.g.:
         // <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
@@ -456,5 +443,42 @@ export default function createWebpackConfig({
         }),
       ],
     },
+    /* Webpack config for our auth */
+    {
+      ...baseConfig,
+      entry: [
+        // No polyfills for the embed.
+        (isProduction && "") ||
+          require.resolve("react-dev-utils/webpackHotDevClient"),
+        paths.appAuthIndex,
+        // Remove deactivated entries.
+      ].filter(s => s),
+      output: {
+        ...baseConfig.output,
+        library: "Talk",
+        filename: "assets/js/auth.js",
+      },
+      plugins: [
+        ...baseConfig.plugins!,
+        // Generates an `stream.html` file with the <script> injected.
+        new HtmlWebpackPlugin({
+          filename: "auth.html",
+          template: paths.appAuthHTML,
+          inject: "head",
+          ...htmlWebpackConfig,
+        }),
+        // Makes some environment variables available in index.html.
+        // The public URL is available as %PUBLIC_URL% in index.html, e.g.:
+        // <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
+        // In development, this will be an empty string.
+        new InterpolateHtmlPlugin(env),
+        // Generate a manifest file which contains a mapping of all asset filenames
+        // to their corresponding output file so that tools can pick it up without
+        // having to parse `index.html`.
+        new ManifestPlugin({
+          fileName: "auth-manifest.json",
+        }),
+      ],
+    },
   ];
 }

From 2e6d326eb2dc835f8dde0631d31b1084fdd119ab Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Wed, 8 Aug 2018 12:04:37 -0300
Subject: [PATCH 05/81] First view - Join the conversation

---
 src/core/client/stream/components/Auth.tsx    | 45 +++++++++++++++++++
 src/core/client/stream/components/Stream.tsx  |  2 +
 .../stream/containers/AuthContainer.tsx       | 43 ++++++++++++++++++
 3 files changed, 90 insertions(+)
 create mode 100644 src/core/client/stream/components/Auth.tsx
 create mode 100644 src/core/client/stream/containers/AuthContainer.tsx

diff --git a/src/core/client/stream/components/Auth.tsx b/src/core/client/stream/components/Auth.tsx
new file mode 100644
index 000000000..04284be43
--- /dev/null
+++ b/src/core/client/stream/components/Auth.tsx
@@ -0,0 +1,45 @@
+import * as React from "react";
+import { StatelessComponent } from "react";
+
+import { Flex, Button, Popup, Typography } from "talk-ui/components";
+
+interface AuthProps {
+  open: boolean;
+  focus: boolean;
+  openPopup: () => void;
+  closePopup: () => void;
+  setFocus: (focus: boolean) => void;
+}
+
+const Auth: StatelessComponent<AuthProps> = props => {
+  return (
+    <div>
+      <Popup
+        href={"/static/js/src-core-client-ui-components-popup-popup.js"}
+        title="Coral Project"
+        features="menubar=0,resizable=0,width=500,height=550,top=200,left=500"
+        open={props.open}
+        focus={props.focus}
+        onFocus={() => props.setFocus(true)}
+        onBlur={() => props.setFocus(false)}
+        onClose={props.closePopup}
+      />
+      <Flex justifyContent="center">
+        <Typography>Join the conversation </Typography> |
+        <Button color="primary" onClick={props.openPopup} disabled={props.open}>
+          Sign In
+        </Button>
+        <Button
+          color="primary"
+          variant="outlined"
+          onClick={props.openPopup}
+          disabled={props.open}
+        >
+          Register
+        </Button>
+      </Flex>
+    </div>
+  );
+};
+
+export default Auth;
diff --git a/src/core/client/stream/components/Stream.tsx b/src/core/client/stream/components/Stream.tsx
index ef1ed5bda..b543ba125 100644
--- a/src/core/client/stream/components/Stream.tsx
+++ b/src/core/client/stream/components/Stream.tsx
@@ -7,6 +7,7 @@ import { Button, Flex } from "talk-ui/components";
 import CommentContainer from "../containers/CommentContainer";
 import PostCommentFormContainer from "../containers/PostCommentFormContainer";
 import ReplyListContainer from "../containers/ReplyListContainer";
+import AuthContainer from "../containers/AuthContainer";
 import * as styles from "./Stream.css";
 
 export interface StreamProps {
@@ -21,6 +22,7 @@ export interface StreamProps {
 const Stream: StatelessComponent<StreamProps> = props => {
   return (
     <div className={styles.root}>
+      <AuthContainer />
       <PostCommentFormContainer assetID={props.assetID} />
       <Flex
         direction="column"
diff --git a/src/core/client/stream/containers/AuthContainer.tsx b/src/core/client/stream/containers/AuthContainer.tsx
new file mode 100644
index 000000000..688d6627e
--- /dev/null
+++ b/src/core/client/stream/containers/AuthContainer.tsx
@@ -0,0 +1,43 @@
+import * as React from "react";
+
+import Auth from "../components/Auth";
+
+class AuthContainer extends React.Component {
+  state = {
+    open: false,
+    focus: false,
+  };
+
+  openPopup = () => {
+    this.setState({
+      open: true,
+    });
+  };
+
+  closePopup = () => {
+    this.setState({
+      open: false,
+    });
+  };
+
+  setFocus = (focus: boolean) => {
+    this.setState({
+      focus,
+    });
+  };
+
+  render() {
+    const { open, focus } = this.state;
+    return (
+      <Auth
+        open={open}
+        focus={focus}
+        openPopup={this.openPopup}
+        closePopup={this.closePopup}
+        setFocus={this.setFocus}
+      />
+    );
+  }
+}
+
+export default AuthContainer;

From 699b07ad089880b738737eddc2b37c9b9fcab034 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bel=C3=A9n=20Curcio?= <curciobelen@gmail.com>
Date: Thu, 9 Aug 2018 09:50:17 -0300
Subject: [PATCH 06/81] Ordering code, alerts

---
 src/core/client/stream/components/Auth.tsx          |  2 +-
 src/core/client/stream/components/Stream.tsx        |  2 +-
 src/core/client/stream/containers/AuthContainer.tsx | 10 +++++-----
 3 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/core/client/stream/components/Auth.tsx b/src/core/client/stream/components/Auth.tsx
index 04284be43..c922ef7ae 100644
--- a/src/core/client/stream/components/Auth.tsx
+++ b/src/core/client/stream/components/Auth.tsx
@@ -1,7 +1,7 @@
 import * as React from "react";
 import { StatelessComponent } from "react";
 
-import { Flex, Button, Popup, Typography } from "talk-ui/components";
+import { Button, Flex, Popup, Typography } from "talk-ui/components";
 
 interface AuthProps {
   open: boolean;
diff --git a/src/core/client/stream/components/Stream.tsx b/src/core/client/stream/components/Stream.tsx
index b543ba125..21f5a0fde 100644
--- a/src/core/client/stream/components/Stream.tsx
+++ b/src/core/client/stream/components/Stream.tsx
@@ -4,10 +4,10 @@ import { StatelessComponent } from "react";
 
 import { Button, Flex } from "talk-ui/components";
 
+import AuthContainer from "../containers/AuthContainer";
 import CommentContainer from "../containers/CommentContainer";
 import PostCommentFormContainer from "../containers/PostCommentFormContainer";
 import ReplyListContainer from "../containers/ReplyListContainer";
-import AuthContainer from "../containers/AuthContainer";
 import * as styles from "./Stream.css";
 
 export interface StreamProps {
diff --git a/src/core/client/stream/containers/AuthContainer.tsx b/src/core/client/stream/containers/AuthContainer.tsx
index 688d6627e..825e50493 100644
--- a/src/core/client/stream/containers/AuthContainer.tsx
+++ b/src/core/client/stream/containers/AuthContainer.tsx
@@ -3,30 +3,30 @@ import * as React from "react";
 import Auth from "../components/Auth";
 
 class AuthContainer extends React.Component {
-  state = {
+  public state = {
     open: false,
     focus: false,
   };
 
-  openPopup = () => {
+  public openPopup = () => {
     this.setState({
       open: true,
     });
   };
 
-  closePopup = () => {
+  public closePopup = () => {
     this.setState({
       open: false,
     });
   };
 
-  setFocus = (focus: boolean) => {
+  public setFocus = (focus: boolean) => {
     this.setState({
       focus,
     });
   };
 
-  render() {
+  public render() {
     const { open, focus } = this.state;
     return (
       <Auth

From 31835d2b7cfa81c2146a9561f63e88f834738f85 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bel=C3=A9n=20Curcio?= <curciobelen@gmail.com>
Date: Thu, 9 Aug 2018 10:04:12 -0300
Subject: [PATCH 07/81] Adding Button Underlined

---
 src/core/client/stream/components/Auth.css    |  3 +
 src/core/client/stream/components/Auth.tsx    | 15 +++-
 .../client/ui/components/Button/Button.css    | 70 +++++++++++++++++++
 .../client/ui/components/Button/Button.tsx    |  3 +-
 4 files changed, 87 insertions(+), 4 deletions(-)
 create mode 100644 src/core/client/stream/components/Auth.css

diff --git a/src/core/client/stream/components/Auth.css b/src/core/client/stream/components/Auth.css
new file mode 100644
index 000000000..aa42b9550
--- /dev/null
+++ b/src/core/client/stream/components/Auth.css
@@ -0,0 +1,3 @@
+.root {
+  padding: var(--spacing-unit) 0;
+}
diff --git a/src/core/client/stream/components/Auth.tsx b/src/core/client/stream/components/Auth.tsx
index c922ef7ae..168b30d8d 100644
--- a/src/core/client/stream/components/Auth.tsx
+++ b/src/core/client/stream/components/Auth.tsx
@@ -1,5 +1,6 @@
 import * as React from "react";
 import { StatelessComponent } from "react";
+import * as styles from "./Auth.css";
 
 import { Button, Flex, Popup, Typography } from "talk-ui/components";
 
@@ -24,12 +25,20 @@ const Auth: StatelessComponent<AuthProps> = props => {
         onBlur={() => props.setFocus(false)}
         onClose={props.closePopup}
       />
-      <Flex justifyContent="center">
-        <Typography>Join the conversation </Typography> |
-        <Button color="primary" onClick={props.openPopup} disabled={props.open}>
+      <Flex itemGutter className={styles.root}>
+        <Typography>Join the conversation </Typography>
+        <span>|</span>
+        <Button
+          size="small"
+          color="primary"
+          variant="underlined"
+          onClick={props.openPopup}
+          disabled={props.open}
+        >
           Sign In
         </Button>
         <Button
+          size="small"
           color="primary"
           variant="outlined"
           onClick={props.openPopup}
diff --git a/src/core/client/ui/components/Button/Button.css b/src/core/client/ui/components/Button/Button.css
index 3a0151ecc..d6153e530 100644
--- a/src/core/client/ui/components/Button/Button.css
+++ b/src/core/client/ui/components/Button/Button.css
@@ -280,3 +280,73 @@
     }
   }
 }
+
+.variantUnderlined {
+  padding-right: 0;
+  padding-left: 0;
+  border-radius: 0;
+
+  &.colorRegular {
+    color: var(--palette-grey-main);
+    border-bottom: 1px solid currentColor;
+  }
+  &.colorPrimary {
+    color: var(--palette-primary-main);
+    border-bottom: 1px solid currentColor;
+  }
+  &.colorError {
+    color: var(--palette-error-main);
+    border-bottom: 1px solid currentColor;
+  }
+  &.colorSuccess {
+    color: var(--palette-success-main);
+    border-bottom: 1px solid currentColor;
+  }
+
+  &:not(.disabled) {
+    &.colorRegular {
+      &.mouseHover {
+        color: var(--palette-grey-light);
+        border-bottom: 1px solid currentColor;
+      }
+      &:active,
+      &.active {
+        color: var(--palette-grey-lighter);
+        border-bottom: 1px solid currentColor;
+      }
+    }
+    &.colorPrimary {
+      &.mouseHover {
+        color: var(--palette-primary-light);
+        border-bottom: 1px solid currentColor;
+      }
+      &:active,
+      &.active {
+        color: var(--palette-primary-lighter);
+        border-bottom: 1px solid currentColor;
+      }
+    }
+    &.colorError {
+      &.mouseHover {
+        color: var(--palette-error-light);
+        border-bottom: 1px solid currentColor;
+      }
+      &:active,
+      &.active {
+        color: var(--palette-error-lighter);
+        border-bottom: 1px solid currentColor;
+      }
+    }
+    &.colorSuccess {
+      &.mouseHover {
+        color: var(--palette-success-light);
+        border-bottom: 1px solid currentColor;
+      }
+      &:active,
+      &.active {
+        color: var(--palette-success-lighter);
+        border-bottom: 1px solid currentColor;
+      }
+    }
+  }
+}
diff --git a/src/core/client/ui/components/Button/Button.tsx b/src/core/client/ui/components/Button/Button.tsx
index fe11b0dfc..c984c2c5e 100644
--- a/src/core/client/ui/components/Button/Button.tsx
+++ b/src/core/client/ui/components/Button/Button.tsx
@@ -28,7 +28,7 @@ interface InnerProps extends ButtonHTMLAttributes<HTMLButtonElement> {
   color?: "regular" | "primary" | "error" | "success";
 
   /** Variant of the button */
-  variant?: "regular" | "filled" | "outlined" | "ghost";
+  variant?: "regular" | "filled" | "outlined" | "ghost" | "underlined";
 
   /** If set renders a full width button */
   fullWidth?: boolean;
@@ -72,6 +72,7 @@ export class Button extends React.Component<InnerProps> {
       [classes.variantFilled]: variant === "filled",
       [classes.variantOutlined]: variant === "outlined",
       [classes.variantGhost]: variant === "ghost",
+      [classes.variantUnderlined]: variant === "underlined",
       [classes.fullWidth]: fullWidth,
       [classes.active]: active,
       [classes.disabled]: disabled,

From a99f907a7d6cdcc4f0503dd7f4f1a5bd2bd2fc40 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bel=C3=A9n=20Curcio?= <curciobelen@gmail.com>
Date: Thu, 9 Aug 2018 10:16:27 -0300
Subject: [PATCH 08/81] updated webpack config

---
 src/core/build/createWebpackConfig.ts | 122 ++++++++++++++------------
 1 file changed, 65 insertions(+), 57 deletions(-)

diff --git a/src/core/build/createWebpackConfig.ts b/src/core/build/createWebpackConfig.ts
index 60bb6cbec..ea6d4b196 100644
--- a/src/core/build/createWebpackConfig.ts
+++ b/src/core/build/createWebpackConfig.ts
@@ -80,6 +80,28 @@ export default function createWebpackConfig({
     },
   ];
 
+  const localesOptions = {
+    pathToLocales: paths.appLocales,
+
+    // Default locale if non could be negotiated.
+    defaultLocale: "en-US",
+
+    // Fallback locale if a translation was not found.
+    // If not set, will use the text that is already
+    // in the code base.
+    fallbackLocale: "en-US",
+
+    // Common fluent files are always included in the locale bundles.
+    commonFiles: ["framework.ftl", "common.ftl"],
+
+    // Locales that come with the main bundle. Others are loaded on demand.
+    bundled: ["en-US"],
+
+    // All available locales can be loadable on demand.
+    // To restrict available locales set:
+    // availableLocales: ["en-US"],
+  };
+
   const additionalPlugins = isProduction
     ? [
         // Minify the code.
@@ -214,29 +236,26 @@ export default function createWebpackConfig({
                 {
                   loader: "locales-loader",
                   options: {
-                    pathToLocales: paths.appLocales,
-
-                    // Default locale if non could be negotiated.
-                    defaultLocale: "en-US",
-
-                    // Fallback locale if a translation was not found.
-                    // If not set, will use the text that is already
-                    // in the code base.
-                    fallbackLocale: "en-US",
-
-                    // Common fluent files are always included in the locale bundles.
-                    commonFiles: ["framework.ftl", "common.ftl"],
-
-                    // Locales that come with the main bundle. Others are loaded on demand.
-                    bundled: ["en-US"],
-
+                    ...localesOptions,
                     // Target specifies the prefix for fluent files to be loaded.
                     // ${target}-xyz.ftl and ${†arget}.ftl are loaded into the locales.
                     target: "stream",
-
-                    // All available locales can be loadable on demand.
-                    // To restrict available locales set:
-                    // availableLocales: ["en-US"],
+                  },
+                },
+              ],
+            },
+            {
+              test: paths.appAuthLocalesTemplate,
+              use: [
+                // This is the locales loader that loads available locales
+                // from a particular target.
+                {
+                  loader: "locales-loader",
+                  options: {
+                    ...localesOptions,
+                    // Target specifies the prefix for fluent files to be loaded.
+                    // ${target}-xyz.ftl and ${†arget}.ftl are loaded into the locales.
+                    target: "auth",
                   },
                 },
               ],
@@ -380,6 +399,24 @@ export default function createWebpackConfig({
           paths.appStreamIndex,
           // Remove deactivated entries.
         ].filter(s => s),
+        auth: [
+          // We ship polyfills by default
+          paths.appPolyfill,
+          // Include an alternative client for WebpackDevServer. A client's job is to
+          // connect to WebpackDevServer by a socket and get notified about changes.
+          // When you save a file, the client will either apply hot updates (in case
+          // of CSS changes), or refresh the page (in case of JS changes). When you
+          // make a syntax error, this client will display a syntax error overlay.
+          // Note: instead of the default WebpackDevServer client, we use a custom one
+          // to bring better experience for Create React App users. You can replace
+          // the line below with these two lines if you prefer the stock client:
+          // require.resolve('webpack-dev-server/client') + '?/',
+          // require.resolve('webpack/hot/dev-server'),
+          (isProduction && "") ||
+            require.resolve("react-dev-utils/webpackHotDevClient"),
+          paths.appAuthIndex,
+          // Remove deactivated entries.
+        ].filter(s => s),
       },
       plugins: [
         ...baseConfig.plugins!,
@@ -391,6 +428,14 @@ export default function createWebpackConfig({
           inject: "body",
           ...htmlWebpackConfig,
         }),
+        // Generates an `auth.html` file with the <script> injected.
+        new HtmlWebpackPlugin({
+          filename: "auth.html",
+          template: paths.appAuthHTML,
+          chunks: ["auth"],
+          inject: "body",
+          ...htmlWebpackConfig,
+        }),
         // Makes some environment variables available in index.html.
         // The public URL is available as %PUBLIC_URL% in index.html, e.g.:
         // <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
@@ -443,42 +488,5 @@ export default function createWebpackConfig({
         }),
       ],
     },
-    /* Webpack config for our auth */
-    {
-      ...baseConfig,
-      entry: [
-        // No polyfills for the embed.
-        (isProduction && "") ||
-          require.resolve("react-dev-utils/webpackHotDevClient"),
-        paths.appAuthIndex,
-        // Remove deactivated entries.
-      ].filter(s => s),
-      output: {
-        ...baseConfig.output,
-        library: "Talk",
-        filename: "assets/js/auth.js",
-      },
-      plugins: [
-        ...baseConfig.plugins!,
-        // Generates an `stream.html` file with the <script> injected.
-        new HtmlWebpackPlugin({
-          filename: "auth.html",
-          template: paths.appAuthHTML,
-          inject: "head",
-          ...htmlWebpackConfig,
-        }),
-        // Makes some environment variables available in index.html.
-        // The public URL is available as %PUBLIC_URL% in index.html, e.g.:
-        // <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
-        // In development, this will be an empty string.
-        new InterpolateHtmlPlugin(env),
-        // Generate a manifest file which contains a mapping of all asset filenames
-        // to their corresponding output file so that tools can pick it up without
-        // having to parse `index.html`.
-        new ManifestPlugin({
-          fileName: "auth-manifest.json",
-        }),
-      ],
-    },
   ];
 }

From 74834149810169e6a21dcc8a1921f87782bb8e62 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bel=C3=A9n=20Curcio?= <curciobelen@gmail.com>
Date: Thu, 9 Aug 2018 10:40:59 -0300
Subject: [PATCH 09/81] Normal view

---
 src/core/client/stream/components/App.tsx                 | 8 +-------
 .../client/stream/components/UserBoxUnauthenticated.tsx   | 2 +-
 src/core/client/ui/components/TextField/TextField.tsx     | 4 ++++
 src/core/client/ui/components/Typography/Typography.tsx   | 2 ++
 4 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/core/client/stream/components/App.tsx b/src/core/client/stream/components/App.tsx
index 39272cb17..6dd7f0729 100644
--- a/src/core/client/stream/components/App.tsx
+++ b/src/core/client/stream/components/App.tsx
@@ -1,8 +1,6 @@
 import * as React from "react";
 import { StatelessComponent } from "react";
 
-import { Flex } from "talk-ui/components";
-
 import PermalinkViewQuery from "../queries/PermalinkViewQuery";
 import StreamQuery from "../queries/StreamQuery";
 
@@ -18,11 +16,7 @@ const App: StatelessComponent<AppProps> = props => {
   ) : (
     <StreamQuery />
   );
-  return (
-    <Flex justifyContent="center" className={styles.root}>
-      {view}
-    </Flex>
-  );
+  return <div className={styles.root}>{view}</div>;
 };
 
 export default App;
diff --git a/src/core/client/stream/components/UserBoxUnauthenticated.tsx b/src/core/client/stream/components/UserBoxUnauthenticated.tsx
index 51e1e11b7..9dbce544c 100644
--- a/src/core/client/stream/components/UserBoxUnauthenticated.tsx
+++ b/src/core/client/stream/components/UserBoxUnauthenticated.tsx
@@ -14,7 +14,7 @@ const UserBoxUnauthenticated: StatelessComponent<
   UserBoxUnauthenticatedProps
 > = props => {
   return (
-    <Flex>
+    <Flex itemGutter>
       <Localized id="comments-userBoxUnauthenticated-joinTheConversation">
         <Typography
           className={styles.joinText}
diff --git a/src/core/client/ui/components/TextField/TextField.tsx b/src/core/client/ui/components/TextField/TextField.tsx
index 0383192ce..c07e8b4a6 100644
--- a/src/core/client/ui/components/TextField/TextField.tsx
+++ b/src/core/client/ui/components/TextField/TextField.tsx
@@ -33,6 +33,10 @@ export interface TextFieldProps {
    * Placeholder
    */
   placeholder?: string;
+  /**
+   * readOnly
+   */
+  readOnly?: boolean;
 }
 
 const TextField: StatelessComponent<TextFieldProps> = props => {
diff --git a/src/core/client/ui/components/Typography/Typography.tsx b/src/core/client/ui/components/Typography/Typography.tsx
index a4ab393cc..40b9d92fe 100644
--- a/src/core/client/ui/components/Typography/Typography.tsx
+++ b/src/core/client/ui/components/Typography/Typography.tsx
@@ -14,6 +14,7 @@ type Variant =
   | "heading4"
   | "bodyCopy"
   | "bodyCopyBold"
+  | "inputLabel"
   | "timestamp";
 
 // Based on Typography Component of Material UI.
@@ -133,6 +134,7 @@ Typography.defaultProps = {
     bodyCopy: "p",
     bodyCopyBold: "p",
     timestamp: "span",
+    inputLabel: "label",
   },
   noWrap: false,
   paragraph: false,

From f3403d4223fe2be421f74a1e1fa6c8f187b15a02 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bel=C3=A9n=20Curcio?= <curciobelen@gmail.com>
Date: Thu, 9 Aug 2018 11:03:13 -0300
Subject: [PATCH 10/81] sign in view

---
 src/core/client/auth/components/App.tsx       | 18 +++----
 src/core/client/auth/components/SignIn.tsx    | 54 +++++++++++++++++++
 .../auth/containers/SignInContainer.tsx       | 10 ++++
 .../ui/components/FormField/FormField.css     |  5 ++
 .../ui/components/FormField/FormField.tsx     | 33 ++++++++++++
 .../client/ui/components/FormField/index.ts   |  1 +
 src/core/client/ui/components/index.ts        |  1 +
 7 files changed, 112 insertions(+), 10 deletions(-)
 create mode 100644 src/core/client/auth/components/SignIn.tsx
 create mode 100644 src/core/client/auth/containers/SignInContainer.tsx
 create mode 100644 src/core/client/ui/components/FormField/FormField.css
 create mode 100644 src/core/client/ui/components/FormField/FormField.tsx
 create mode 100644 src/core/client/ui/components/FormField/index.ts

diff --git a/src/core/client/auth/components/App.tsx b/src/core/client/auth/components/App.tsx
index 368c6d716..7bb681497 100644
--- a/src/core/client/auth/components/App.tsx
+++ b/src/core/client/auth/components/App.tsx
@@ -1,9 +1,6 @@
 import * as React from "react";
 import { StatelessComponent } from "react";
-
-import { Flex } from "talk-ui/components";
-
-import * as styles from "./App.css";
+import SignInContainer from "../containers/SignInContainer";
 
 export interface AppProps {
   // TODO: (cvle) Remove %future added value when we have Relay 1.6
@@ -11,12 +8,13 @@ export interface AppProps {
   view: "SIGN_UP" | "SIGN_IN" | "FORGOT_PASSWORD" | "%future added value";
 }
 
-const App: StatelessComponent<AppProps> = props => {
-  return (
-    <Flex justifyContent="center" className={styles.root}>
-      Current View: {props.view}
-    </Flex>
-  );
+const App: StatelessComponent<AppProps> = ({ view }) => {
+  switch (view) {
+    case "SIGN_IN":
+      return <SignInContainer />;
+    default:
+      return <SignInContainer />;
+  }
 };
 
 export default App;
diff --git a/src/core/client/auth/components/SignIn.tsx b/src/core/client/auth/components/SignIn.tsx
new file mode 100644
index 000000000..1e0db967e
--- /dev/null
+++ b/src/core/client/auth/components/SignIn.tsx
@@ -0,0 +1,54 @@
+import * as React from "react";
+import { StatelessComponent } from "react";
+
+import {
+  Button,
+  Flex,
+  FormField,
+  InputLabel,
+  TextField,
+  Typography,
+} from "talk-ui/components";
+
+const SignIn: StatelessComponent = props => {
+  return (
+    <Flex justifyContent="center">
+      <Flex itemGutter direction="column">
+        <Typography variant="heading1">
+          Sign up to join the conversation
+        </Typography>
+
+        <FormField>
+          <InputLabel>Email Address</InputLabel>
+          <TextField fullWidth />
+        </FormField>
+
+        <FormField>
+          <InputLabel>Username</InputLabel>
+          <Typography>
+            A unique identifier displayed on your comments. You may use “_” and
+            “.”
+          </Typography>
+          <TextField fullWidth />
+        </FormField>
+
+        <FormField>
+          <InputLabel>Password</InputLabel>
+          <Typography>Must be at least 8 characters</Typography>
+          <TextField fullWidth />
+        </FormField>
+
+        <FormField>
+          <InputLabel>Confirm Password</InputLabel>
+          <TextField fullWidth />
+        </FormField>
+
+        <Button variant="filled" color="primary" size="large" fullWidth>
+          Sign up and join the conversation
+        </Button>
+      </Flex>
+    </Flex>
+  );
+};
+
+export default SignIn;
diff --git a/src/core/client/auth/containers/SignInContainer.tsx b/src/core/client/auth/containers/SignInContainer.tsx
new file mode 100644
index 000000000..aabf4641d
--- /dev/null
+++ b/src/core/client/auth/containers/SignInContainer.tsx
@@ -0,0 +1,10 @@
+import * as React from "react";
+import { StatelessComponent } from "react";
+
+import SignIn from "../components/SignIn";
+
+const SignInContainer: StatelessComponent = () => {
+  return <SignIn />;
+};
+
+export default SignInContainer;
diff --git a/src/core/client/ui/components/FormField/FormField.css b/src/core/client/ui/components/FormField/FormField.css
new file mode 100644
index 000000000..c5096a4f2
--- /dev/null
+++ b/src/core/client/ui/components/FormField/FormField.css
@@ -0,0 +1,5 @@
+.root {
+  display: block;
+  margin-bottom: var(--spacing-unit);
+  width: 100%;
+}
diff --git a/src/core/client/ui/components/FormField/FormField.tsx b/src/core/client/ui/components/FormField/FormField.tsx
new file mode 100644
index 000000000..41c762785
--- /dev/null
+++ b/src/core/client/ui/components/FormField/FormField.tsx
@@ -0,0 +1,33 @@
+import cn from "classnames";
+import React, { ReactNode } from "react";
+import { StatelessComponent } from "react";
+
+import { withStyles } from "talk-ui/hocs";
+import Flex from "../Flex";
+
+import * as styles from "./FormField.css";
+
+interface InnerProps {
+  children: ReactNode;
+  classes: typeof styles;
+  id?: string;
+  className?: string;
+}
+
+const FormField: StatelessComponent<InnerProps> = props => {
+  const { classes, className, children, ...rest } = props;
+
+  return (
+    <Flex
+      direction="column"
+      itemGutter="half"
+      className={cn(classes.root, className)}
+      {...rest}
+    >
+      {children}
+    </Flex>
+  );
+};
+
+const enhanced = withStyles(styles)(FormField);
+export default enhanced;
diff --git a/src/core/client/ui/components/FormField/index.ts b/src/core/client/ui/components/FormField/index.ts
new file mode 100644
index 000000000..e2d6f74d4
--- /dev/null
+++ b/src/core/client/ui/components/FormField/index.ts
@@ -0,0 +1 @@
+export { default } from "./FormField";
diff --git a/src/core/client/ui/components/index.ts b/src/core/client/ui/components/index.ts
index 81d32ebf7..6b8e15d7f 100644
--- a/src/core/client/ui/components/index.ts
+++ b/src/core/client/ui/components/index.ts
@@ -14,3 +14,4 @@ export { default as TextField } from "./TextField";
 export { default as CallOut } from "./CallOut";
 export { default as ClickOutside } from "./ClickOutside";
 export { default as Popup } from "./Popup";
+export { default as FormField } from "./FormField";

From 361aab70854e44eb23c78497c23e14fdf210bd21 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bel=C3=A9n=20Curcio?= <curciobelen@gmail.com>
Date: Thu, 9 Aug 2018 11:43:32 -0300
Subject: [PATCH 11/81] Adding Formfield

---
 src/core/client/auth/components/SignIn.tsx    |  8 +++----
 .../ui/components/FormField/FormField.css     | 12 +++++++++-
 .../ui/components/FormField/FormField.tsx     | 24 +++++++++++++------
 .../ui/components/TextField/TextField.tsx     |  2 +-
 4 files changed, 33 insertions(+), 13 deletions(-)

diff --git a/src/core/client/auth/components/SignIn.tsx b/src/core/client/auth/components/SignIn.tsx
index 1e0db967e..f5f350e2b 100644
--- a/src/core/client/auth/components/SignIn.tsx
+++ b/src/core/client/auth/components/SignIn.tsx
@@ -20,7 +20,7 @@ const SignIn: StatelessComponent = props => {
 
         <FormField>
           <InputLabel>Email Address</InputLabel>
-          <TextField fullWidth />
+          <TextField />
         </FormField>
 
         <FormField>
@@ -29,18 +29,18 @@ const SignIn: StatelessComponent = props => {
             A unique identifier displayed on your comments. You may use “_” and
             “.”
           </Typography>
-          <TextField fullWidth />
+          <TextField />
         </FormField>
 
         <FormField>
           <InputLabel>Password</InputLabel>
           <Typography>Must be at least 8 characters</Typography>
-          <TextField fullWidth />
+          <TextField />
         </FormField>
 
         <FormField>
           <InputLabel>Confirm Password</InputLabel>
-          <TextField fullWidth />
+          <TextField />
         </FormField>
 
         <Button variant="filled" color="primary" size="large" fullWidth>
diff --git a/src/core/client/ui/components/FormField/FormField.css b/src/core/client/ui/components/FormField/FormField.css
index c5096a4f2..7d919365e 100644
--- a/src/core/client/ui/components/FormField/FormField.css
+++ b/src/core/client/ui/components/FormField/FormField.css
@@ -1,5 +1,15 @@
 .root {
-  display: block;
+  display: flex;
+  flex-direction: column;
   margin-bottom: var(--spacing-unit);
   width: 100%;
+  justify-content: space-between;
+
+  &.halfItemGutter > * {
+    margin-left: calc(0.5 * var(--spacing-unit)) !important;
+  }
+
+  &.itemGutter > * {
+    margin-top: var(--spacing-unit) !important;
+  }
 }
diff --git a/src/core/client/ui/components/FormField/FormField.tsx b/src/core/client/ui/components/FormField/FormField.tsx
index 41c762785..fe5b6dd7b 100644
--- a/src/core/client/ui/components/FormField/FormField.tsx
+++ b/src/core/client/ui/components/FormField/FormField.tsx
@@ -3,7 +3,6 @@ import React, { ReactNode } from "react";
 import { StatelessComponent } from "react";
 
 import { withStyles } from "talk-ui/hocs";
-import Flex from "../Flex";
 
 import * as styles from "./FormField.css";
 
@@ -12,22 +11,33 @@ interface InnerProps {
   classes: typeof styles;
   id?: string;
   className?: string;
+  itemGutter?: boolean | "half";
 }
 
 const FormField: StatelessComponent<InnerProps> = props => {
-  const { classes, className, children, ...rest } = props;
+  const { classes, className, children, itemGutter, ...rest } = props;
 
+  // TODO (bc): Use flex component once the extra div issue is solved.
   return (
-    <Flex
-      direction="column"
-      itemGutter="half"
-      className={cn(classes.root, className)}
+    <div
+      className={cn(
+        classes.root,
+        {
+          [classes.itemGutter]: itemGutter === true,
+          [classes.halfItemGutter]: itemGutter === "half",
+        },
+        className
+      )}
       {...rest}
     >
       {children}
-    </Flex>
+    </div>
   );
 };
 
+FormField.defaultProps = {
+  itemGutter: true,
+};
+
 const enhanced = withStyles(styles)(FormField);
 export default enhanced;
diff --git a/src/core/client/ui/components/TextField/TextField.tsx b/src/core/client/ui/components/TextField/TextField.tsx
index c07e8b4a6..e3771b2b6 100644
--- a/src/core/client/ui/components/TextField/TextField.tsx
+++ b/src/core/client/ui/components/TextField/TextField.tsx
@@ -72,7 +72,7 @@ const TextField: StatelessComponent<TextFieldProps> = props => {
 
 TextField.defaultProps = {
   color: "regular",
-  fullWidth: false,
+  fullWidth: true,
   placeholder: "",
 };
 

From 52ab434740bbac85fdea4410ec89ea6e007b5f81 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bel=C3=A9n=20Curcio?= <curciobelen@gmail.com>
Date: Thu, 9 Aug 2018 12:01:27 -0300
Subject: [PATCH 12/81] Adding SignIn View

---
 src/core/client/auth/components/App.tsx       |  4 +
 src/core/client/auth/components/SignIn.css    |  7 ++
 src/core/client/auth/components/SignIn.tsx    | 58 ++++++--------
 src/core/client/auth/components/SignUp.css    |  3 +
 src/core/client/auth/components/SignUp.tsx    | 53 +++++++++++++
 .../auth/containers/SignUpContainer.tsx       | 10 +++
 .../stream/containers/UserBoxContainer.tsx    |  2 +-
 .../ui/components/FormField/FormField.mdx     | 36 +++++++++
 src/docs/forms.mdx                            | 79 +++++++++++++------
 9 files changed, 193 insertions(+), 59 deletions(-)
 create mode 100644 src/core/client/auth/components/SignIn.css
 create mode 100644 src/core/client/auth/components/SignUp.css
 create mode 100644 src/core/client/auth/components/SignUp.tsx
 create mode 100644 src/core/client/auth/containers/SignUpContainer.tsx
 create mode 100644 src/core/client/ui/components/FormField/FormField.mdx

diff --git a/src/core/client/auth/components/App.tsx b/src/core/client/auth/components/App.tsx
index 7bb681497..7de209ae6 100644
--- a/src/core/client/auth/components/App.tsx
+++ b/src/core/client/auth/components/App.tsx
@@ -1,6 +1,8 @@
 import * as React from "react";
 import { StatelessComponent } from "react";
+
 import SignInContainer from "../containers/SignInContainer";
+import SignUpContainer from "../containers/SignUpContainer";
 
 export interface AppProps {
   // TODO: (cvle) Remove %future added value when we have Relay 1.6
@@ -10,6 +12,8 @@ export interface AppProps {
 
 const App: StatelessComponent<AppProps> = ({ view }) => {
   switch (view) {
+    case "SIGN_UP":
+      return <SignUpContainer />;
     case "SIGN_IN":
       return <SignInContainer />;
     default:
diff --git a/src/core/client/auth/components/SignIn.css b/src/core/client/auth/components/SignIn.css
new file mode 100644
index 000000000..9aff9cb83
--- /dev/null
+++ b/src/core/client/auth/components/SignIn.css
@@ -0,0 +1,7 @@
+.root {
+  width: 330px;
+}
+
+.forgotPassword {
+  text-align: right;
+}
diff --git a/src/core/client/auth/components/SignIn.tsx b/src/core/client/auth/components/SignIn.tsx
index f5f350e2b..97dfdb477 100644
--- a/src/core/client/auth/components/SignIn.tsx
+++ b/src/core/client/auth/components/SignIn.tsx
@@ -1,5 +1,6 @@
 import * as React from "react";
 import { StatelessComponent } from "react";
+import * as styles from "./SignIn.css";
 
 import {
   Button,
@@ -12,39 +13,30 @@ import {
 
 const SignIn: StatelessComponent = props => {
   return (
-    <Flex justifyContent="center">
-      <Flex itemGutter direction="column">
-        <Typography variant="heading1">
-          Sign up to join the conversation
-        </Typography>
-
-        <FormField>
-          <InputLabel>Email Address</InputLabel>
-          <TextField />
-        </FormField>
-
-        <FormField>
-          <InputLabel>Username</InputLabel>
-          <Typography>
-            A unique identifier displayed on your comments. You may use “_” and
-            “.”
-          </Typography>
-          <TextField />
-        </FormField>
-
-        <FormField>
-          <InputLabel>Password</InputLabel>
-          <Typography>Must be at least 8 characters</Typography>
-          <TextField />
-        </FormField>
-
-        <FormField>
-          <InputLabel>Confirm Password</InputLabel>
-          <TextField />
-        </FormField>
-
-        <Button variant="filled" color="primary" size="large" fullWidth>
-          Sign up and join the conversation
+    <Flex itemGutter direction="column" className={styles.root}>
+      <Typography variant="heading1" align="center">
+        Sign in to join the conversation
+      </Typography>
+      <FormField>
+        <InputLabel>Email Address</InputLabel>
+        <TextField />
+      </FormField>
+      <FormField>
+        <InputLabel>Password</InputLabel>
+        <TextField />
+        <span className={styles.forgotPassword}>
+          <Button variant="underlined" color="primary">
+            Forgot your password?
+          </Button>
+        </span>
+      </FormField>
+      <Button variant="filled" color="primary" size="large" fullWidth>
+        Sign in and join the conversation
+      </Button>
+      <Flex itemGutter="half" alignItems="center">
+        <Typography>Sign up and join the conversation</Typography>
+        <Button variant="underlined" size="small" color="primary">
+          Sign Up
         </Button>
       </Flex>
     </Flex>
diff --git a/src/core/client/auth/components/SignUp.css b/src/core/client/auth/components/SignUp.css
new file mode 100644
index 000000000..667e35b7a
--- /dev/null
+++ b/src/core/client/auth/components/SignUp.css
@@ -0,0 +1,3 @@
+.root {
+  width: 330px;
+}
diff --git a/src/core/client/auth/components/SignUp.tsx b/src/core/client/auth/components/SignUp.tsx
new file mode 100644
index 000000000..73a01ec63
--- /dev/null
+++ b/src/core/client/auth/components/SignUp.tsx
@@ -0,0 +1,53 @@
+import * as React from "react";
+import { StatelessComponent } from "react";
+import * as styles from "./SignIn.css";
+
+import {
+  Button,
+  Flex,
+  FormField,
+  InputLabel,
+  TextField,
+  Typography,
+} from "talk-ui/components";
+
+const SignUp: StatelessComponent = props => {
+  return (
+    <Flex itemGutter direction="column" className={styles.root}>
+      <Typography variant="heading1" align="center">
+        Sign up to join the conversation
+      </Typography>
+
+      <FormField>
+        <InputLabel>Email Address</InputLabel>
+        <TextField />
+      </FormField>
+
+      <FormField>
+        <InputLabel>Username</InputLabel>
+        <Typography>
+          A unique identifier displayed on your comments. You may use “_” and
+          “.”
+        </Typography>
+        <TextField />
+      </FormField>
+
+      <FormField>
+        <InputLabel>Password</InputLabel>
+        <Typography>Must be at least 8 characters</Typography>
+        <TextField />
+      </FormField>
+
+      <FormField>
+        <InputLabel>Confirm Password</InputLabel>
+        <TextField />
+      </FormField>
+
+      <Button variant="filled" color="primary" size="large" fullWidth>
+        Sign up and join the conversation
+      </Button>
+    </Flex>
+  );
+};
+
+export default SignUp;
diff --git a/src/core/client/auth/containers/SignUpContainer.tsx b/src/core/client/auth/containers/SignUpContainer.tsx
new file mode 100644
index 000000000..9db82383a
--- /dev/null
+++ b/src/core/client/auth/containers/SignUpContainer.tsx
@@ -0,0 +1,10 @@
+import * as React from "react";
+import { StatelessComponent } from "react";
+
+import SignUp from "../components/SignUp";
+
+const SignUpContainer: StatelessComponent = () => {
+  return <SignUp />;
+};
+
+export default SignUpContainer;
diff --git a/src/core/client/stream/containers/UserBoxContainer.tsx b/src/core/client/stream/containers/UserBoxContainer.tsx
index 359c93d97..176a28eea 100644
--- a/src/core/client/stream/containers/UserBoxContainer.tsx
+++ b/src/core/client/stream/containers/UserBoxContainer.tsx
@@ -37,7 +37,7 @@ export class UserBoxContainer extends Component<InnerProps> {
         <Popup
           href={`/auth.html?view=${view}`}
           title="Talk Auth"
-          features="menubar=0,resizable=0,width=500,height=550,top=200,left=500"
+          features="menubar=0,resizable=0,width=350,height=550,top=200,left=500"
           open={open}
           focus={focus}
           onFocus={this.handleFocus}
diff --git a/src/core/client/ui/components/FormField/FormField.mdx b/src/core/client/ui/components/FormField/FormField.mdx
new file mode 100644
index 000000000..3dc055085
--- /dev/null
+++ b/src/core/client/ui/components/FormField/FormField.mdx
@@ -0,0 +1,36 @@
+---
+name: FormField
+menu: UI Kit
+---
+
+import { Playground, PropsTable } from 'docz'
+import FormField from './FormField'
+import { InputLabel, ValidationMessage, TextField, Typography, Flex, Button} from '../core/client/ui/components'
+
+# Flex
+
+`FormField` is to be used with Form Components `flexbox`.
+
+## Justify content
+<Playground>
+  <FormField>
+  </FormField>
+</Playground>
+
+## Align items
+<Playground>
+  <Flex alignItems="center" itemGutter>
+    <Button variant="filled">Push Me</Button>
+    <Button variant="filled" size="small">Push Me</Button>
+    <Button variant="filled" size="large">Push Me</Button>
+  </Flex>
+</Playground>
+
+## Direction
+<Playground>
+  <Flex direction="column" itemGutter>
+    <Button variant="filled">Push Me</Button>
+    <Button variant="filled">Push Me</Button>
+    <Button variant="filled">Push Me</Button>
+  </Flex>
+</Playground>
diff --git a/src/docs/forms.mdx b/src/docs/forms.mdx
index 5667d6f78..b114cf7e1 100644
--- a/src/docs/forms.mdx
+++ b/src/docs/forms.mdx
@@ -16,37 +16,66 @@ import { InputLabel, ValidationMessage, TextField, Typography, Flex, Button} fro
 
 ## Simple Form
 <Playground>
-  <Flex itemGutter direction="column" style={{width:330}}>
+  <Flex>
     <Typography variant="heading1">Sign up to join the conversation</Typography>
-    <InputLabel>Email Address</InputLabel>
-    <TextField fullWidth/>
-    <InputLabel>Username</InputLabel>
-    <Typography>A unique identifier displayed on your comments. You may use “_” and “.”</Typography>
-    <TextField fullWidth/>
-    <InputLabel>Password</InputLabel>
-    <Typography>Must be at least 8 characters</Typography>
-    <TextField fullWidth/>
-    <InputLabel>Confirm Password</InputLabel>
-    <TextField fullWidth/>
-    <Button variant="filled" color="primary" size="large" fullWidth>Sign up and join the conversation</Button>
+
+    <FormField>
+      <InputLabel>Email Address</InputLabel>
+      <TextField/>
+    </FormField>
+
+    <FormField>
+      <InputLabel>Username</InputLabel>
+      <Typography>A unique identifier displayed on your comments. You may use “_” and “.”</Typography>
+      <TextField/>
+    </FormField>
+
+
+    <FormField>
+      <InputLabel>Password</InputLabel>
+      <Typography>Must be at least 8 characters</Typography>
+      <TextField/>
+    </FormField>
+
+    <FormField>
+      <InputLabel>Confirm Password</InputLabel>
+      <TextField/>
+    </FormField>
+
+    <Button variant="filled" color="primary" size="large" >Sign up and join the conversation</Button>
   </Flex>
 </Playground>
 
 ## Simple Form with error
+
 <Playground>
-  <Flex itemGutter direction="column" style={{width:330}}>
+  <Flex>
     <Typography variant="heading1">Sign up to join the conversation</Typography>
-    <InputLabel>Email Address</InputLabel>
-    <TextField fullWidth />
-    <InputLabel>Username</InputLabel>
-    <Typography>A unique identifier displayed on your comments. You may use “_” and “.”</Typography>
-    <TextField defaultValue="something.com" color="error" fullWidth/>
-    <ValidationMessage color="error" fullWidth>Invalid characters. Try again.</ValidationMessage>
-    <InputLabel>Password</InputLabel>
-    <Typography>Must be at least 8 characters</Typography>
-    <TextField fullWidth/>
-    <InputLabel>Confirm Password</InputLabel>
-    <TextField fullWidth/>
-    <Button variant="filled" color="primary" size="large" fullWidth>Sign up and join the conversation</Button>
+
+    <FormField>
+      <InputLabel>Email Address</InputLabel>
+      <TextField/>
+    </FormField>
+
+    <FormField>
+      <InputLabel defaultValue="something.com" color="error" >Username</InputLabel>
+      <Typography>A unique identifier displayed on your comments. You may use “_” and “.”</Typography>
+      <TextField/>
+      <ValidationMessage>Invalid characters. Try again.</ValidationMessage>
+    </FormField>
+
+
+    <FormField>
+      <InputLabel>Password</InputLabel>
+      <Typography>Must be at least 8 characters</Typography>
+      <TextField/>
+    </FormField>
+
+    <FormField>
+      <InputLabel>Confirm Password</InputLabel>
+      <TextField/>
+    </FormField>
+
+    <Button variant="filled" color="primary" size="large" >Sign up and join the conversation</Button>
   </Flex>
 </Playground>

From 0dfdea0e4e0ecdf221449a38921e701d728a93b2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bel=C3=A9n=20Curcio?= <curciobelen@gmail.com>
Date: Thu, 9 Aug 2018 13:17:45 -0300
Subject: [PATCH 13/81] Auth Views

---
 src/core/client/auth/components/App.tsx       | 13 +++-
 .../client/auth/components/ForgotPassword.css |  9 +++
 .../client/auth/components/ForgotPassword.tsx | 37 ++++++++++
 .../client/auth/components/ResetPassword.css  |  9 +++
 .../client/auth/components/ResetPassword.tsx  | 38 ++++++++++
 src/core/client/auth/components/SignIn.css    |  7 ++
 src/core/client/auth/components/SignIn.tsx    | 24 ++++---
 src/core/client/auth/components/SignUp.css    |  6 ++
 src/core/client/auth/components/SignUp.tsx    | 71 +++++++++++--------
 .../containers/ForgotPasswordContainer.tsx    | 10 +++
 .../containers/ResetPasswordContainer.tsx     | 10 +++
 .../stream/containers/UserBoxContainer.tsx    |  2 +-
 .../ui/components/TextField/TextField.css     |  2 +
 13 files changed, 198 insertions(+), 40 deletions(-)
 create mode 100644 src/core/client/auth/components/ForgotPassword.css
 create mode 100644 src/core/client/auth/components/ForgotPassword.tsx
 create mode 100644 src/core/client/auth/components/ResetPassword.css
 create mode 100644 src/core/client/auth/components/ResetPassword.tsx
 create mode 100644 src/core/client/auth/containers/ForgotPasswordContainer.tsx
 create mode 100644 src/core/client/auth/containers/ResetPasswordContainer.tsx

diff --git a/src/core/client/auth/components/App.tsx b/src/core/client/auth/components/App.tsx
index 7de209ae6..4fe34d3a1 100644
--- a/src/core/client/auth/components/App.tsx
+++ b/src/core/client/auth/components/App.tsx
@@ -1,13 +1,20 @@
 import * as React from "react";
 import { StatelessComponent } from "react";
 
+import ForgotPasswordContainer from "../containers/ForgotPasswordContainer";
+import ResetPasswordContainer from "../containers/ResetPasswordContainer";
 import SignInContainer from "../containers/SignInContainer";
 import SignUpContainer from "../containers/SignUpContainer";
 
 export interface AppProps {
   // TODO: (cvle) Remove %future added value when we have Relay 1.6
   // https://github.com/facebook/relay/commit/1e87e43add7667a494f7ff4cfa7f03f1ab8d81a2
-  view: "SIGN_UP" | "SIGN_IN" | "FORGOT_PASSWORD" | "%future added value";
+  view:
+    | "SIGN_UP"
+    | "SIGN_IN"
+    | "FORGOT_PASSWORD"
+    | "RESET_PASSWORD"
+    | "%future added value";
 }
 
 const App: StatelessComponent<AppProps> = ({ view }) => {
@@ -16,6 +23,10 @@ const App: StatelessComponent<AppProps> = ({ view }) => {
       return <SignUpContainer />;
     case "SIGN_IN":
       return <SignInContainer />;
+    case "FORGOT_PASSWORD":
+      return <ForgotPasswordContainer />;
+    case "RESET_PASSWORD":
+      return <ResetPasswordContainer />;
     default:
       return <SignInContainer />;
   }
diff --git a/src/core/client/auth/components/ForgotPassword.css b/src/core/client/auth/components/ForgotPassword.css
new file mode 100644
index 000000000..8489081c1
--- /dev/null
+++ b/src/core/client/auth/components/ForgotPassword.css
@@ -0,0 +1,9 @@
+.root {
+  width: 330px;
+  padding-top: calc(5 * var(--spacing-unit));
+}
+
+.footer {
+  padding-top: var(--spacing-unit);
+  width: 100%;
+}
diff --git a/src/core/client/auth/components/ForgotPassword.tsx b/src/core/client/auth/components/ForgotPassword.tsx
new file mode 100644
index 000000000..1c60ea9c6
--- /dev/null
+++ b/src/core/client/auth/components/ForgotPassword.tsx
@@ -0,0 +1,37 @@
+import * as React from "react";
+import { StatelessComponent } from "react";
+import * as styles from "./SignIn.css";
+
+import {
+  Button,
+  Flex,
+  FormField,
+  InputLabel,
+  TextField,
+  Typography,
+} from "talk-ui/components";
+
+const ForgotPassword: StatelessComponent = props => {
+  return (
+    <Flex itemGutter direction="column" className={styles.root}>
+      <Typography variant="heading1" align="center">
+        Forgot Password
+      </Typography>
+      <Typography variant="bodyCopy" align="center">
+        Enter your email address below and we will send you a link to reset your
+        password.
+      </Typography>
+      <FormField>
+        <InputLabel>Email Address</InputLabel>
+        <TextField />
+      </FormField>
+      <div className={styles.footer}>
+        <Button variant="filled" color="primary" size="large" fullWidth>
+          Send Email
+        </Button>
+      </div>
+    </Flex>
+  );
+};
+
+export default ForgotPassword;
diff --git a/src/core/client/auth/components/ResetPassword.css b/src/core/client/auth/components/ResetPassword.css
new file mode 100644
index 000000000..8489081c1
--- /dev/null
+++ b/src/core/client/auth/components/ResetPassword.css
@@ -0,0 +1,9 @@
+.root {
+  width: 330px;
+  padding-top: calc(5 * var(--spacing-unit));
+}
+
+.footer {
+  padding-top: var(--spacing-unit);
+  width: 100%;
+}
diff --git a/src/core/client/auth/components/ResetPassword.tsx b/src/core/client/auth/components/ResetPassword.tsx
new file mode 100644
index 000000000..5f000d091
--- /dev/null
+++ b/src/core/client/auth/components/ResetPassword.tsx
@@ -0,0 +1,38 @@
+import * as React from "react";
+import { StatelessComponent } from "react";
+import * as styles from "./SignIn.css";
+
+import {
+  Button,
+  Flex,
+  FormField,
+  InputLabel,
+  TextField,
+  Typography,
+} from "talk-ui/components";
+
+const ResetPassword: StatelessComponent = props => {
+  return (
+    <Flex itemGutter direction="column" className={styles.root}>
+      <Typography variant="heading1" align="center">
+        Reset Password
+      </Typography>
+      <FormField>
+        <InputLabel>Password</InputLabel>
+        <Typography>Must be at least 8 characters</Typography>
+        <TextField />
+      </FormField>
+      <FormField>
+        <InputLabel>Confirm Password</InputLabel>
+        <TextField />
+      </FormField>
+      <div className={styles.footer}>
+        <Button variant="filled" color="primary" size="large" fullWidth>
+          Reset Password
+        </Button>
+      </div>
+    </Flex>
+  );
+};
+
+export default ResetPassword;
diff --git a/src/core/client/auth/components/SignIn.css b/src/core/client/auth/components/SignIn.css
index 9aff9cb83..8110981fc 100644
--- a/src/core/client/auth/components/SignIn.css
+++ b/src/core/client/auth/components/SignIn.css
@@ -1,7 +1,14 @@
 .root {
   width: 330px;
+  padding-top: calc(5 * var(--spacing-unit));
 }
 
 .forgotPassword {
   text-align: right;
 }
+
+.footer,
+.subFooter {
+  padding-top: var(--spacing-unit);
+  width: 100%;
+}
diff --git a/src/core/client/auth/components/SignIn.tsx b/src/core/client/auth/components/SignIn.tsx
index 97dfdb477..9244aa2af 100644
--- a/src/core/client/auth/components/SignIn.tsx
+++ b/src/core/client/auth/components/SignIn.tsx
@@ -25,20 +25,26 @@ const SignIn: StatelessComponent = props => {
         <InputLabel>Password</InputLabel>
         <TextField />
         <span className={styles.forgotPassword}>
-          <Button variant="underlined" color="primary">
+          <Button variant="underlined" color="primary" size="small">
             Forgot your password?
           </Button>
         </span>
       </FormField>
-      <Button variant="filled" color="primary" size="large" fullWidth>
-        Sign in and join the conversation
-      </Button>
-      <Flex itemGutter="half" alignItems="center">
-        <Typography>Sign up and join the conversation</Typography>
-        <Button variant="underlined" size="small" color="primary">
-          Sign Up
+      <div className={styles.footer}>
+        <Button variant="filled" color="primary" size="large" fullWidth>
+          Sign in and join the conversation
         </Button>
-      </Flex>
+        <Flex
+          itemGutter="half"
+          justifyContent="center"
+          className={styles.subFooter}
+        >
+          <Typography>Don't have an account?</Typography>
+          <Button variant="underlined" size="small" color="primary">
+            Sign Up
+          </Button>
+        </Flex>
+      </div>
     </Flex>
   );
 };
diff --git a/src/core/client/auth/components/SignUp.css b/src/core/client/auth/components/SignUp.css
index 667e35b7a..2b939d10f 100644
--- a/src/core/client/auth/components/SignUp.css
+++ b/src/core/client/auth/components/SignUp.css
@@ -1,3 +1,9 @@
 .root {
   width: 330px;
 }
+
+.footer,
+.subFooter {
+  padding-top: var(--spacing-unit);
+  width: 100%;
+}
diff --git a/src/core/client/auth/components/SignUp.tsx b/src/core/client/auth/components/SignUp.tsx
index 73a01ec63..9473d2167 100644
--- a/src/core/client/auth/components/SignUp.tsx
+++ b/src/core/client/auth/components/SignUp.tsx
@@ -1,6 +1,6 @@
 import * as React from "react";
 import { StatelessComponent } from "react";
-import * as styles from "./SignIn.css";
+import * as styles from "./SignUp.css";
 
 import {
   Button,
@@ -14,38 +14,51 @@ import {
 const SignUp: StatelessComponent = props => {
   return (
     <Flex itemGutter direction="column" className={styles.root}>
-      <Typography variant="heading1" align="center">
-        Sign up to join the conversation
-      </Typography>
-
-      <FormField>
-        <InputLabel>Email Address</InputLabel>
-        <TextField />
-      </FormField>
-
-      <FormField>
-        <InputLabel>Username</InputLabel>
-        <Typography>
-          A unique identifier displayed on your comments. You may use “_” and
-          “.”
+      <Flex itemGutter direction="column">
+        <Typography variant="heading1" align="center">
+          Sign up to join the conversation
         </Typography>
-        <TextField />
-      </FormField>
 
-      <FormField>
-        <InputLabel>Password</InputLabel>
-        <Typography>Must be at least 8 characters</Typography>
-        <TextField />
-      </FormField>
+        <FormField>
+          <InputLabel>Email Address</InputLabel>
+          <TextField />
+        </FormField>
 
-      <FormField>
-        <InputLabel>Confirm Password</InputLabel>
-        <TextField />
-      </FormField>
+        <FormField>
+          <InputLabel>Username</InputLabel>
+          <Typography>
+            A unique identifier displayed on your comments. You may use “_” and
+            “.”
+          </Typography>
+          <TextField />
+        </FormField>
 
-      <Button variant="filled" color="primary" size="large" fullWidth>
-        Sign up and join the conversation
-      </Button>
+        <FormField>
+          <InputLabel>Password</InputLabel>
+          <Typography>Must be at least 8 characters</Typography>
+          <TextField />
+        </FormField>
+
+        <FormField>
+          <InputLabel>Confirm Password</InputLabel>
+          <TextField />
+        </FormField>
+      </Flex>
+      <div className={styles.footer}>
+        <Button variant="filled" color="primary" size="large" fullWidth>
+          Sign up and join the conversation
+        </Button>
+        <Flex
+          itemGutter="half"
+          justifyContent="center"
+          className={styles.subFooter}
+        >
+          <Typography>Already have an account?</Typography>
+          <Button variant="underlined" size="small" color="primary">
+            Sign In
+          </Button>
+        </Flex>
+      </div>
     </Flex>
   );
 };
diff --git a/src/core/client/auth/containers/ForgotPasswordContainer.tsx b/src/core/client/auth/containers/ForgotPasswordContainer.tsx
new file mode 100644
index 000000000..b364e7e9e
--- /dev/null
+++ b/src/core/client/auth/containers/ForgotPasswordContainer.tsx
@@ -0,0 +1,10 @@
+import * as React from "react";
+import { StatelessComponent } from "react";
+
+import ForgotPassword from "../components/ForgotPassword";
+
+const ForgotPasswordContainer: StatelessComponent = () => {
+  return <ForgotPassword />;
+};
+
+export default ForgotPasswordContainer;
diff --git a/src/core/client/auth/containers/ResetPasswordContainer.tsx b/src/core/client/auth/containers/ResetPasswordContainer.tsx
new file mode 100644
index 000000000..6dab0eef1
--- /dev/null
+++ b/src/core/client/auth/containers/ResetPasswordContainer.tsx
@@ -0,0 +1,10 @@
+import * as React from "react";
+import { StatelessComponent } from "react";
+
+import ResetPassword from "../components/ResetPassword";
+
+const ResetPasswordContainer: StatelessComponent = () => {
+  return <ResetPassword />;
+};
+
+export default ResetPasswordContainer;
diff --git a/src/core/client/stream/containers/UserBoxContainer.tsx b/src/core/client/stream/containers/UserBoxContainer.tsx
index 176a28eea..fca219660 100644
--- a/src/core/client/stream/containers/UserBoxContainer.tsx
+++ b/src/core/client/stream/containers/UserBoxContainer.tsx
@@ -37,7 +37,7 @@ export class UserBoxContainer extends Component<InnerProps> {
         <Popup
           href={`/auth.html?view=${view}`}
           title="Talk Auth"
-          features="menubar=0,resizable=0,width=350,height=550,top=200,left=500"
+          features="menubar=0,resizable=0,width=350,height=600,top=200,left=500"
           open={open}
           focus={focus}
           onFocus={this.handleFocus}
diff --git a/src/core/client/ui/components/TextField/TextField.css b/src/core/client/ui/components/TextField/TextField.css
index 335fc3734..954ce577e 100644
--- a/src/core/client/ui/components/TextField/TextField.css
+++ b/src/core/client/ui/components/TextField/TextField.css
@@ -5,6 +5,8 @@
   padding: calc(0.5 * var(--spacing-unit));
   box-sizing: border-box;
   border-radius: var(--round-corners);
+  height: 36px;
+  line-height: 36px;
 }
 
 .colorRegular {

From 5f4fbfc209224907c5a7aa451028dc440c438518 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bel=C3=A9n=20Curcio?= <curciobelen@gmail.com>
Date: Thu, 9 Aug 2018 15:03:27 -0300
Subject: [PATCH 14/81] latests

---
 src/core/client/auth/components/ForgotPassword.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/core/client/auth/components/ForgotPassword.tsx b/src/core/client/auth/components/ForgotPassword.tsx
index 1c60ea9c6..4c06dcbc4 100644
--- a/src/core/client/auth/components/ForgotPassword.tsx
+++ b/src/core/client/auth/components/ForgotPassword.tsx
@@ -17,7 +17,7 @@ const ForgotPassword: StatelessComponent = props => {
       <Typography variant="heading1" align="center">
         Forgot Password
       </Typography>
-      <Typography variant="bodyCopy" align="center">
+      <Typography variant="bodyCopy">
         Enter your email address below and we will send you a link to reset your
         password.
       </Typography>

From 22fa940ddb89ad90049c8f820facd86cb9ef6db7 Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Fri, 10 Aug 2018 12:11:32 -0300
Subject: [PATCH 15/81] Adding PoweredBy Component

---
 .../stream/components/PostCommentForm.tsx      |  3 ++-
 .../client/stream/components/PoweredBy.css     |  3 +++
 .../client/stream/components/PoweredBy.tsx     | 18 ++++++++++++++++++
 .../components/UserBoxUnauthenticated.tsx      |  2 +-
 4 files changed, 24 insertions(+), 2 deletions(-)
 create mode 100644 src/core/client/stream/components/PoweredBy.css
 create mode 100644 src/core/client/stream/components/PoweredBy.tsx

diff --git a/src/core/client/stream/components/PostCommentForm.tsx b/src/core/client/stream/components/PostCommentForm.tsx
index 72bc0ad70..656ec54f8 100644
--- a/src/core/client/stream/components/PostCommentForm.tsx
+++ b/src/core/client/stream/components/PostCommentForm.tsx
@@ -2,7 +2,7 @@ import { Localized } from "fluent-react/compat";
 import * as React from "react";
 import { StatelessComponent } from "react";
 import { Field, Form } from "react-final-form";
-
+import PoweredBy from "./PoweredBy";
 import { OnSubmit } from "talk-framework/lib/form";
 import { required } from "talk-framework/lib/validation";
 import { Button, Typography } from "talk-ui/components";
@@ -40,6 +40,7 @@ const PostCommentForm: StatelessComponent<PostCommentFormProps> = props => (
           )}
         </Field>
         <div className={styles.postButtonContainer}>
+          <PoweredBy />
           <Localized id="comments-postCommentForm-post">
             <Button color="primary" variant="filled" disabled={submitting}>
               Post
diff --git a/src/core/client/stream/components/PoweredBy.css b/src/core/client/stream/components/PoweredBy.css
new file mode 100644
index 000000000..25c884af5
--- /dev/null
+++ b/src/core/client/stream/components/PoweredBy.css
@@ -0,0 +1,3 @@
+.text {
+  font-size: calc(14rem / var(--rem-base));
+}
diff --git a/src/core/client/stream/components/PoweredBy.tsx b/src/core/client/stream/components/PoweredBy.tsx
new file mode 100644
index 000000000..4ae2f3c00
--- /dev/null
+++ b/src/core/client/stream/components/PoweredBy.tsx
@@ -0,0 +1,18 @@
+import React, { StatelessComponent } from "react";
+import { Flex, Typography } from "talk-ui/components";
+import * as styles from "./PoweredBy.css";
+
+const PoweredBy: StatelessComponent = props => {
+  return (
+    <Flex itemGutter="half">
+      <Typography className={styles.text} variant="bodyCopy">
+        Powered by
+      </Typography>
+      <Typography className={styles.text} variant="heading4">
+        The Coral Project
+      </Typography>
+    </Flex>
+  );
+};
+
+export default PoweredBy;
diff --git a/src/core/client/stream/components/UserBoxUnauthenticated.tsx b/src/core/client/stream/components/UserBoxUnauthenticated.tsx
index 323b0acf5..f1a8716ee 100644
--- a/src/core/client/stream/components/UserBoxUnauthenticated.tsx
+++ b/src/core/client/stream/components/UserBoxUnauthenticated.tsx
@@ -15,7 +15,7 @@ const UserBoxUnauthenticated: StatelessComponent<
   UserBoxUnauthenticatedProps
 > = props => {
   return (
-    <Flex>
+    <Flex itemGutter>
       <MatchMedia gteWidth="sm">
         <Localized id="comments-userBoxUnauthenticated-joinTheConversation">
           <Typography

From de5c37ebcf79290178714e45680a4b87bfbd057f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bel=C3=A9n=20Curcio?= <curciobelen@gmail.com>
Date: Sun, 12 Aug 2018 19:22:50 -0300
Subject: [PATCH 16/81] Stream Styling

---
 src/core/client/auth/components/SignUp.tsx    |  4 +-
 src/core/client/stream/components/App.tsx     |  1 -
 .../stream/components/PostCommentForm.css     |  7 ++-
 .../stream/components/PostCommentForm.tsx     | 22 ++++++++--
 .../components/UserBoxUnauthenticated.tsx     |  2 +-
 .../containers/PostCommentFormContainer.tsx   |  2 +-
 .../InputDescription/InputDescription.css     |  2 +
 .../InputDescription/InputDescription.mdx     | 36 ++++++++++++++++
 .../InputDescription/InputDescription.tsx     | 43 +++++++++++++++++++
 .../ui/components/InputDescription/index.ts   |  1 +
 src/core/client/ui/shared/typography.css      |  2 +-
 src/locales/de/stream.ftl                     |  2 +-
 src/locales/en-US/stream.ftl                  |  2 +-
 13 files changed, 113 insertions(+), 13 deletions(-)
 create mode 100644 src/core/client/ui/components/InputDescription/InputDescription.css
 create mode 100644 src/core/client/ui/components/InputDescription/InputDescription.mdx
 create mode 100644 src/core/client/ui/components/InputDescription/InputDescription.tsx
 create mode 100644 src/core/client/ui/components/InputDescription/index.ts

diff --git a/src/core/client/auth/components/SignUp.tsx b/src/core/client/auth/components/SignUp.tsx
index 44eaaf70f..49cce2aa1 100644
--- a/src/core/client/auth/components/SignUp.tsx
+++ b/src/core/client/auth/components/SignUp.tsx
@@ -32,7 +32,9 @@ const SignUp: StatelessComponent = props => {
         </FormField>
         <FormField>
           <InputLabel>Password</InputLabel>
-          <Typography>Must be at least 8 characters</Typography>
+          <Typography variant="inputDescription">
+            Must be at least 8 characters
+          </Typography>
           <TextField />
         </FormField>
         <FormField>
diff --git a/src/core/client/stream/components/App.tsx b/src/core/client/stream/components/App.tsx
index f5f4262f7..a09c49149 100644
--- a/src/core/client/stream/components/App.tsx
+++ b/src/core/client/stream/components/App.tsx
@@ -22,7 +22,6 @@ const App: StatelessComponent<AppProps> = props => {
       {view}
     </Flex>
   );
-  // return <div className={styles.root}>{view}</div>;
 };
 
 export default App;
diff --git a/src/core/client/stream/components/PostCommentForm.css b/src/core/client/stream/components/PostCommentForm.css
index e813f4ea7..7a8ffebee 100644
--- a/src/core/client/stream/components/PostCommentForm.css
+++ b/src/core/client/stream/components/PostCommentForm.css
@@ -1,15 +1,18 @@
 .root {
   width: 100%;
+  padding-bottom: var(--spacing-unit);
 }
 
 .textarea {
   composes: bodyCopy from "talk-ui/shared/typography.css";
-
   display: block;
-  height: 100px;
+  height: 150px;
   width: 100%;
   box-sizing: border-box;
   margin-bottom: var(--spacing-unit);
+  padding: var(--spacing-unit);
+  border-radius: var(--round-corners);
+  resize: vertical;
 }
 
 .postButtonContainer {
diff --git a/src/core/client/stream/components/PostCommentForm.tsx b/src/core/client/stream/components/PostCommentForm.tsx
index 72bc0ad70..c90c56b96 100644
--- a/src/core/client/stream/components/PostCommentForm.tsx
+++ b/src/core/client/stream/components/PostCommentForm.tsx
@@ -15,6 +15,7 @@ interface FormProps {
 
 export interface PostCommentFormProps {
   onSubmit: OnSubmit<FormProps>;
+  signedIn: boolean;
 }
 
 const PostCommentForm: StatelessComponent<PostCommentFormProps> = props => (
@@ -29,6 +30,7 @@ const PostCommentForm: StatelessComponent<PostCommentFormProps> = props => (
                 name={input.name}
                 onChange={input.onChange}
                 value={input.value}
+                placeholder="Post a comment"
               />
               {meta.touched &&
                 (meta.error || meta.submitError) && (
@@ -40,11 +42,23 @@ const PostCommentForm: StatelessComponent<PostCommentFormProps> = props => (
           )}
         </Field>
         <div className={styles.postButtonContainer}>
-          <Localized id="comments-postCommentForm-post">
-            <Button color="primary" variant="filled" disabled={submitting}>
-              Post
+          {props.signedIn ? (
+            <Localized id="comments-postCommentForm-submit">
+              <Button color="primary" variant="filled" disabled={submitting}>
+                Submit
+              </Button>
+            </Localized>
+          ) : (
+            <Button
+              color="primary"
+              variant="filled"
+              disabled
+              fullWidth
+              size="large"
+            >
+              Sign In and join the conversation
             </Button>
-          </Localized>
+          )}
         </div>
       </form>
     )}
diff --git a/src/core/client/stream/components/UserBoxUnauthenticated.tsx b/src/core/client/stream/components/UserBoxUnauthenticated.tsx
index 323b0acf5..f1a8716ee 100644
--- a/src/core/client/stream/components/UserBoxUnauthenticated.tsx
+++ b/src/core/client/stream/components/UserBoxUnauthenticated.tsx
@@ -15,7 +15,7 @@ const UserBoxUnauthenticated: StatelessComponent<
   UserBoxUnauthenticatedProps
 > = props => {
   return (
-    <Flex>
+    <Flex itemGutter>
       <MatchMedia gteWidth="sm">
         <Localized id="comments-userBoxUnauthenticated-joinTheConversation">
           <Typography
diff --git a/src/core/client/stream/containers/PostCommentFormContainer.tsx b/src/core/client/stream/containers/PostCommentFormContainer.tsx
index bf4ab8cf9..0a7e45ccb 100644
--- a/src/core/client/stream/containers/PostCommentFormContainer.tsx
+++ b/src/core/client/stream/containers/PostCommentFormContainer.tsx
@@ -31,7 +31,7 @@ class PostCommentFormContainer extends Component<InnerProps> {
     return undefined;
   };
   public render() {
-    return <PostCommentForm onSubmit={this.onSubmit} />;
+    return <PostCommentForm onSubmit={this.onSubmit} signedIn={false} />;
   }
 }
 
diff --git a/src/core/client/ui/components/InputDescription/InputDescription.css b/src/core/client/ui/components/InputDescription/InputDescription.css
new file mode 100644
index 000000000..c3a2af639
--- /dev/null
+++ b/src/core/client/ui/components/InputDescription/InputDescription.css
@@ -0,0 +1,2 @@
+.root {
+}
diff --git a/src/core/client/ui/components/InputDescription/InputDescription.mdx b/src/core/client/ui/components/InputDescription/InputDescription.mdx
new file mode 100644
index 000000000..3dc055085
--- /dev/null
+++ b/src/core/client/ui/components/InputDescription/InputDescription.mdx
@@ -0,0 +1,36 @@
+---
+name: FormField
+menu: UI Kit
+---
+
+import { Playground, PropsTable } from 'docz'
+import FormField from './FormField'
+import { InputLabel, ValidationMessage, TextField, Typography, Flex, Button} from '../core/client/ui/components'
+
+# Flex
+
+`FormField` is to be used with Form Components `flexbox`.
+
+## Justify content
+<Playground>
+  <FormField>
+  </FormField>
+</Playground>
+
+## Align items
+<Playground>
+  <Flex alignItems="center" itemGutter>
+    <Button variant="filled">Push Me</Button>
+    <Button variant="filled" size="small">Push Me</Button>
+    <Button variant="filled" size="large">Push Me</Button>
+  </Flex>
+</Playground>
+
+## Direction
+<Playground>
+  <Flex direction="column" itemGutter>
+    <Button variant="filled">Push Me</Button>
+    <Button variant="filled">Push Me</Button>
+    <Button variant="filled">Push Me</Button>
+  </Flex>
+</Playground>
diff --git a/src/core/client/ui/components/InputDescription/InputDescription.tsx b/src/core/client/ui/components/InputDescription/InputDescription.tsx
new file mode 100644
index 000000000..fe5b6dd7b
--- /dev/null
+++ b/src/core/client/ui/components/InputDescription/InputDescription.tsx
@@ -0,0 +1,43 @@
+import cn from "classnames";
+import React, { ReactNode } from "react";
+import { StatelessComponent } from "react";
+
+import { withStyles } from "talk-ui/hocs";
+
+import * as styles from "./FormField.css";
+
+interface InnerProps {
+  children: ReactNode;
+  classes: typeof styles;
+  id?: string;
+  className?: string;
+  itemGutter?: boolean | "half";
+}
+
+const FormField: StatelessComponent<InnerProps> = props => {
+  const { classes, className, children, itemGutter, ...rest } = props;
+
+  // TODO (bc): Use flex component once the extra div issue is solved.
+  return (
+    <div
+      className={cn(
+        classes.root,
+        {
+          [classes.itemGutter]: itemGutter === true,
+          [classes.halfItemGutter]: itemGutter === "half",
+        },
+        className
+      )}
+      {...rest}
+    >
+      {children}
+    </div>
+  );
+};
+
+FormField.defaultProps = {
+  itemGutter: true,
+};
+
+const enhanced = withStyles(styles)(FormField);
+export default enhanced;
diff --git a/src/core/client/ui/components/InputDescription/index.ts b/src/core/client/ui/components/InputDescription/index.ts
new file mode 100644
index 000000000..6fd0949a5
--- /dev/null
+++ b/src/core/client/ui/components/InputDescription/index.ts
@@ -0,0 +1 @@
+export { default } from "./InputDescription";
diff --git a/src/core/client/ui/shared/typography.css b/src/core/client/ui/shared/typography.css
index a4abd6426..c688bdf1a 100644
--- a/src/core/client/ui/shared/typography.css
+++ b/src/core/client/ui/shared/typography.css
@@ -161,7 +161,7 @@
 
 .inputDescription {
   font-size: calc(14rem / var(--rem-base));
-  font-weight: var(--font-weight-medium);
+  font-weight: var(--font-weight-regular);
   font-family: var(--font-family);
   line-height: calc(18em / 16);
   letter-spacing: calc(0.2em / 16);
diff --git a/src/locales/de/stream.ftl b/src/locales/de/stream.ftl
index c4eb3040a..6031e6c5d 100644
--- a/src/locales/de/stream.ftl
+++ b/src/locales/de/stream.ftl
@@ -2,6 +2,6 @@
 
 ## Comments Tab
 
-comments-postCommentForm-post = Posten
+comments-postCommentForm-submit = Posten
 comments-stream-loadMore = Mehr laden
 comments-replyList-showAll = Alle anzeigen
diff --git a/src/locales/en-US/stream.ftl b/src/locales/en-US/stream.ftl
index 01a2ed331..6e04fcc54 100644
--- a/src/locales/en-US/stream.ftl
+++ b/src/locales/en-US/stream.ftl
@@ -2,7 +2,7 @@
 
 ## Comments Tab
 
-comments-postCommentForm-post = Post
+comments-postCommentForm-submit = Submit
 comments-stream-loadMore = Load more
 comments-replyList-showAll = Show all
 

From 9e39a093fdb0990546a56999524d86420028d3d3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bel=C3=A9n=20Curcio?= <curciobelen@gmail.com>
Date: Sun, 12 Aug 2018 22:12:23 -0300
Subject: [PATCH 17/81] Adding UserBoxAuthenticated and using correct
 properties for the Flex Component

---
 .../components/UserBoxAuthenticated.css       |  3 ++
 .../components/UserBoxAuthenticated.tsx       | 51 +++++++++++++++++++
 .../UserBoxUnauthenticated.spec.1.tsx         | 16 ++++++
 .../stream/containers/UserBoxContainer.tsx    | 10 ++--
 src/core/client/ui/components/Flex/Flex.css   |  4 +-
 5 files changed, 78 insertions(+), 6 deletions(-)
 create mode 100644 src/core/client/stream/components/UserBoxAuthenticated.css
 create mode 100644 src/core/client/stream/components/UserBoxAuthenticated.tsx
 create mode 100644 src/core/client/stream/components/UserBoxUnauthenticated.spec.1.tsx

diff --git a/src/core/client/stream/components/UserBoxAuthenticated.css b/src/core/client/stream/components/UserBoxAuthenticated.css
new file mode 100644
index 000000000..272b33bdb
--- /dev/null
+++ b/src/core/client/stream/components/UserBoxAuthenticated.css
@@ -0,0 +1,3 @@
+.joinText {
+  margin-right: var(--spacing-unit);
+}
diff --git a/src/core/client/stream/components/UserBoxAuthenticated.tsx b/src/core/client/stream/components/UserBoxAuthenticated.tsx
new file mode 100644
index 000000000..d897dd205
--- /dev/null
+++ b/src/core/client/stream/components/UserBoxAuthenticated.tsx
@@ -0,0 +1,51 @@
+import { Localized } from "fluent-react/compat";
+import React, { StatelessComponent } from "react";
+
+import { Button, Flex, Typography } from "talk-ui/components";
+
+import MatchMedia from "talk-ui/components/MatchMedia";
+// import * as styles from "./UserBoxUnauthenticated.css";
+
+export interface UserBoxUnauthenticatedProps {
+  onSignOut: () => void;
+}
+
+const UserBoxAuthenticated: StatelessComponent<
+  UserBoxUnauthenticatedProps
+> = props => {
+  return (
+    <Flex itemGutter>
+      <Flex itemGutter="half">
+        <MatchMedia gteWidth="sm">
+          <Localized id="comments-userBoxAuthenticated-signedInAs">
+            <Typography variant="bodyCopy" component="span">
+              Signed in as
+            </Typography>
+          </Localized>
+          <Typography variant="bodyCopyBold" component="span">
+            okbel
+          </Typography>
+        </MatchMedia>
+      </Flex>
+      <Flex itemGutter="half">
+        <Localized id="comments-userBoxUnauthenticated-notYou">
+          <Typography variant="bodyCopy" component="span">
+            Not you?
+          </Typography>
+        </Localized>
+        <Localized id="comments-userBoxUnauthenticated-register">
+          <Button
+            color="primary"
+            size="small"
+            variant="underlined"
+            onClick={props.onSignOut}
+          >
+            Sign Out
+          </Button>
+        </Localized>
+      </Flex>
+    </Flex>
+  );
+};
+
+export default UserBoxAuthenticated;
diff --git a/src/core/client/stream/components/UserBoxUnauthenticated.spec.1.tsx b/src/core/client/stream/components/UserBoxUnauthenticated.spec.1.tsx
new file mode 100644
index 000000000..f9683c1e8
--- /dev/null
+++ b/src/core/client/stream/components/UserBoxUnauthenticated.spec.1.tsx
@@ -0,0 +1,16 @@
+import { shallow } from "enzyme";
+import { noop } from "lodash";
+import React from "react";
+
+import { PropTypesOf } from "talk-framework/types";
+
+import UserBoxUnauthenticated from "./UserBoxUnauthenticated";
+
+it("renders correctly", () => {
+  const props: PropTypesOf<typeof UserBoxUnauthenticated> = {
+    onSignIn: noop,
+    onRegister: noop,
+  };
+  const wrapper = shallow(<UserBoxUnauthenticated {...props} />);
+  expect(wrapper).toMatchSnapshot();
+});
diff --git a/src/core/client/stream/containers/UserBoxContainer.tsx b/src/core/client/stream/containers/UserBoxContainer.tsx
index fca219660..db68f5cb6 100644
--- a/src/core/client/stream/containers/UserBoxContainer.tsx
+++ b/src/core/client/stream/containers/UserBoxContainer.tsx
@@ -11,7 +11,8 @@ import {
 } from "talk-stream/mutations";
 import { Popup } from "talk-ui/components";
 
-import UserBoxUnauthenticated from "../components/UserBoxUnauthenticated";
+import UserBoxAuthenticated from "../components/UserBoxAuthenticated";
+// import UserBoxUnauthenticated from "../components/UserBoxUnauthenticated";
 
 interface InnerProps {
   local: Local;
@@ -23,7 +24,7 @@ export class UserBoxContainer extends Component<InnerProps> {
   private handleFocus = () => this.props.setAuthPopupState({ focus: true });
   private handleBlur = () => this.props.setAuthPopupState({ focus: false });
   private handleClose = () => this.props.setAuthPopupState({ open: false });
-  private handleSignIn = () => this.props.showAuthPopup({ view: "SIGN_IN" });
+  // private handleSignIn = () => this.props.showAuthPopup({ view: "SIGN_IN" });
   private handleRegister = () => this.props.showAuthPopup({ view: "SIGN_UP" });
 
   public render() {
@@ -44,10 +45,11 @@ export class UserBoxContainer extends Component<InnerProps> {
           onBlur={this.handleBlur}
           onClose={this.handleClose}
         />
-        <UserBoxUnauthenticated
+        <UserBoxAuthenticated onSignOut={this.handleRegister} />
+        {/* <UserBoxUnauthenticated
           onSignIn={this.handleSignIn}
           onRegister={this.handleRegister}
-        />
+        /> */}
       </>
     );
   }
diff --git a/src/core/client/ui/components/Flex/Flex.css b/src/core/client/ui/components/Flex/Flex.css
index 2e6914c7f..ea5bf810d 100644
--- a/src/core/client/ui/components/Flex/Flex.css
+++ b/src/core/client/ui/components/Flex/Flex.css
@@ -1,10 +1,10 @@
 .root {
-  width: 100%;
+  flex-grow: 1;
 }
 
 .flex {
   display: flex;
-  width: 100%;
+  flex-grow: 1;
 }
 
 .halfItemGutter {

From 5c2ac9ee751ebe17b7dda5f22d6480d0aa86e98a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bel=C3=A9n=20Curcio?= <curciobelen@gmail.com>
Date: Sun, 12 Aug 2018 22:17:05 -0300
Subject: [PATCH 18/81] Using correct properties for the Flex Component to
 support nexting Flex components

---
 src/core/client/ui/components/Flex/Flex.css | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/core/client/ui/components/Flex/Flex.css b/src/core/client/ui/components/Flex/Flex.css
index ea5bf810d..9fed320d3 100644
--- a/src/core/client/ui/components/Flex/Flex.css
+++ b/src/core/client/ui/components/Flex/Flex.css
@@ -1,10 +1,12 @@
 .root {
   flex-grow: 1;
+  max-width: 100%;
 }
 
 .flex {
   display: flex;
   flex-grow: 1;
+  max-width: 100%;
 }
 
 .halfItemGutter {

From ab4ca7f24c65f4f2823c9228906067e737206abc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bel=C3=A9n=20Curcio?= <curciobelen@gmail.com>
Date: Sun, 12 Aug 2018 22:52:03 -0300
Subject: [PATCH 19/81] Adding PoweredBy and more

---
 .../stream/components/PostCommentForm.css     |  9 +++++-
 .../stream/components/PostCommentForm.tsx     | 31 ++++++++++---------
 .../client/stream/components/PoweredBy.css    |  0
 .../client/stream/components/PoweredBy.tsx    | 13 ++++++++
 .../components/UserBoxAuthenticated.css       |  4 +--
 .../components/UserBoxAuthenticated.tsx       | 10 +++---
 .../stream/containers/UserBoxContainer.tsx    | 12 +++----
 src/core/client/ui/components/Flex/Flex.css   |  6 ++--
 8 files changed, 52 insertions(+), 33 deletions(-)
 create mode 100644 src/core/client/stream/components/PoweredBy.css
 create mode 100644 src/core/client/stream/components/PoweredBy.tsx

diff --git a/src/core/client/stream/components/PostCommentForm.css b/src/core/client/stream/components/PostCommentForm.css
index 7a8ffebee..954a4de74 100644
--- a/src/core/client/stream/components/PostCommentForm.css
+++ b/src/core/client/stream/components/PostCommentForm.css
@@ -17,5 +17,12 @@
 
 .postButtonContainer {
   display: flex;
-  justify-content: flex-end;
+
+  &:first-child {
+    flex-grow: 1;
+  }
+
+  &:last-child {
+    flex-grow: 0;
+  }
 }
diff --git a/src/core/client/stream/components/PostCommentForm.tsx b/src/core/client/stream/components/PostCommentForm.tsx
index c90c56b96..1f57246a7 100644
--- a/src/core/client/stream/components/PostCommentForm.tsx
+++ b/src/core/client/stream/components/PostCommentForm.tsx
@@ -5,8 +5,8 @@ import { Field, Form } from "react-final-form";
 
 import { OnSubmit } from "talk-framework/lib/form";
 import { required } from "talk-framework/lib/validation";
+import PoweredBy from "talk-stream/components/PoweredBy";
 import { Button, Typography } from "talk-ui/components";
-
 import * as styles from "./PostCommentForm.css";
 
 interface FormProps {
@@ -41,25 +41,26 @@ const PostCommentForm: StatelessComponent<PostCommentFormProps> = props => (
             </div>
           )}
         </Field>
-        <div className={styles.postButtonContainer}>
-          {props.signedIn ? (
+        {props.signedIn ? (
+          <div className={styles.postButtonContainer}>
+            <PoweredBy />
             <Localized id="comments-postCommentForm-submit">
               <Button color="primary" variant="filled" disabled={submitting}>
                 Submit
               </Button>
             </Localized>
-          ) : (
-            <Button
-              color="primary"
-              variant="filled"
-              disabled
-              fullWidth
-              size="large"
-            >
-              Sign In and join the conversation
-            </Button>
-          )}
-        </div>
+          </div>
+        ) : (
+          <Button
+            color="primary"
+            variant="filled"
+            disabled
+            fullWidth
+            size="large"
+          >
+            Sign In and join the conversation
+          </Button>
+        )}
       </form>
     )}
   </Form>
diff --git a/src/core/client/stream/components/PoweredBy.css b/src/core/client/stream/components/PoweredBy.css
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/core/client/stream/components/PoweredBy.tsx b/src/core/client/stream/components/PoweredBy.tsx
new file mode 100644
index 000000000..5991c837a
--- /dev/null
+++ b/src/core/client/stream/components/PoweredBy.tsx
@@ -0,0 +1,13 @@
+import React, { StatelessComponent } from "react";
+import { Flex, Typography } from "talk-ui/components";
+
+const PoweredBy: StatelessComponent = () => {
+  return (
+    <Flex itemGutter="half">
+      <Typography variant="bodyCopy">Powered by</Typography>
+      <Typography variant="heading4">The Coral Project</Typography>
+    </Flex>
+  );
+};
+
+export default PoweredBy;
diff --git a/src/core/client/stream/components/UserBoxAuthenticated.css b/src/core/client/stream/components/UserBoxAuthenticated.css
index 272b33bdb..a98581e23 100644
--- a/src/core/client/stream/components/UserBoxAuthenticated.css
+++ b/src/core/client/stream/components/UserBoxAuthenticated.css
@@ -1,3 +1,3 @@
-.joinText {
-  margin-right: var(--spacing-unit);
+.child {
+  width: initial;
 }
diff --git a/src/core/client/stream/components/UserBoxAuthenticated.tsx b/src/core/client/stream/components/UserBoxAuthenticated.tsx
index d897dd205..1b692ba9b 100644
--- a/src/core/client/stream/components/UserBoxAuthenticated.tsx
+++ b/src/core/client/stream/components/UserBoxAuthenticated.tsx
@@ -4,7 +4,7 @@ import React, { StatelessComponent } from "react";
 import { Button, Flex, Typography } from "talk-ui/components";
 
 import MatchMedia from "talk-ui/components/MatchMedia";
-// import * as styles from "./UserBoxUnauthenticated.css";
+import * as styles from "./UserBoxAuthenticated.css";
 
 export interface UserBoxUnauthenticatedProps {
   onSignOut: () => void;
@@ -15,7 +15,7 @@ const UserBoxAuthenticated: StatelessComponent<
 > = props => {
   return (
     <Flex itemGutter>
-      <Flex itemGutter="half">
+      <Flex itemGutter="half" className={styles.child}>
         <MatchMedia gteWidth="sm">
           <Localized id="comments-userBoxAuthenticated-signedInAs">
             <Typography variant="bodyCopy" component="span">
@@ -27,13 +27,13 @@ const UserBoxAuthenticated: StatelessComponent<
           </Typography>
         </MatchMedia>
       </Flex>
-      <Flex itemGutter="half">
-        <Localized id="comments-userBoxUnauthenticated-notYou">
+      <Flex itemGutter="half" className={styles.child}>
+        <Localized id="comments-userBoxAuthenticated-notYou">
           <Typography variant="bodyCopy" component="span">
             Not you?
           </Typography>
         </Localized>
-        <Localized id="comments-userBoxUnauthenticated-register">
+        <Localized id="comments-userBoxAuthenticated-signOut">
           <Button
             color="primary"
             size="small"
diff --git a/src/core/client/stream/containers/UserBoxContainer.tsx b/src/core/client/stream/containers/UserBoxContainer.tsx
index db68f5cb6..a1f2bb87b 100644
--- a/src/core/client/stream/containers/UserBoxContainer.tsx
+++ b/src/core/client/stream/containers/UserBoxContainer.tsx
@@ -11,8 +11,8 @@ import {
 } from "talk-stream/mutations";
 import { Popup } from "talk-ui/components";
 
-import UserBoxAuthenticated from "../components/UserBoxAuthenticated";
-// import UserBoxUnauthenticated from "../components/UserBoxUnauthenticated";
+// import UserBoxAuthenticated from "../components/UserBoxAuthenticated";
+import UserBoxUnauthenticated from "../components/UserBoxUnauthenticated";
 
 interface InnerProps {
   local: Local;
@@ -24,7 +24,7 @@ export class UserBoxContainer extends Component<InnerProps> {
   private handleFocus = () => this.props.setAuthPopupState({ focus: true });
   private handleBlur = () => this.props.setAuthPopupState({ focus: false });
   private handleClose = () => this.props.setAuthPopupState({ open: false });
-  // private handleSignIn = () => this.props.showAuthPopup({ view: "SIGN_IN" });
+  private handleSignIn = () => this.props.showAuthPopup({ view: "SIGN_IN" });
   private handleRegister = () => this.props.showAuthPopup({ view: "SIGN_UP" });
 
   public render() {
@@ -45,11 +45,11 @@ export class UserBoxContainer extends Component<InnerProps> {
           onBlur={this.handleBlur}
           onClose={this.handleClose}
         />
-        <UserBoxAuthenticated onSignOut={this.handleRegister} />
-        {/* <UserBoxUnauthenticated
+        {/* <UserBoxAuthenticated onSignOut={this.handleRegister} /> */}
+        <UserBoxUnauthenticated
           onSignIn={this.handleSignIn}
           onRegister={this.handleRegister}
-        /> */}
+        />
       </>
     );
   }
diff --git a/src/core/client/ui/components/Flex/Flex.css b/src/core/client/ui/components/Flex/Flex.css
index 9fed320d3..2e6914c7f 100644
--- a/src/core/client/ui/components/Flex/Flex.css
+++ b/src/core/client/ui/components/Flex/Flex.css
@@ -1,12 +1,10 @@
 .root {
-  flex-grow: 1;
-  max-width: 100%;
+  width: 100%;
 }
 
 .flex {
   display: flex;
-  flex-grow: 1;
-  max-width: 100%;
+  width: 100%;
 }
 
 .halfItemGutter {

From 8a7ea9cdef4a813cd2476c00023c455b19308d5a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bel=C3=A9n=20Curcio?= <curciobelen@gmail.com>
Date: Sun, 12 Aug 2018 23:08:23 -0300
Subject: [PATCH 20/81] First integration of forms

---
 src/core/client/auth/components/SignUp.tsx    | 123 +++++++++++-------
 .../auth/containers/SignUpContainer.tsx       |  35 ++++-
 .../ui/components/TextField/TextField.tsx     |   8 ++
 3 files changed, 113 insertions(+), 53 deletions(-)

diff --git a/src/core/client/auth/components/SignUp.tsx b/src/core/client/auth/components/SignUp.tsx
index 49cce2aa1..4428a8467 100644
--- a/src/core/client/auth/components/SignUp.tsx
+++ b/src/core/client/auth/components/SignUp.tsx
@@ -1,5 +1,8 @@
 import * as React from "react";
 import { StatelessComponent } from "react";
+import { Field, Form } from "react-final-form";
+import { OnSubmit } from "talk-framework/lib/form";
+import { required } from "talk-framework/lib/validation";
 import * as styles from "./SignUp.css";
 
 import {
@@ -11,53 +14,81 @@ import {
   Typography,
 } from "talk-ui/components";
 
-const SignUp: StatelessComponent = props => {
+interface FormProps {
+  email: string;
+  username: string;
+  password: string;
+  confirmPassword: string;
+}
+
+export interface SignUpForm {
+  onSubmit: OnSubmit<FormProps>;
+}
+
+const SignUp: StatelessComponent<SignUpForm> = props => {
   return (
-    <Flex itemGutter direction="column" className={styles.root}>
-      <Flex direction="column">
-        <Typography variant="heading1" align="center">
-          Sign up to join the conversation
-        </Typography>
-        <FormField>
-          <InputLabel>Email Address</InputLabel>
-          <TextField />
-        </FormField>
-        <FormField>
-          <InputLabel>Username</InputLabel>
-          <Typography variant="inputDescription">
-            A unique identifier displayed on your comments. You may use “_” and
-            “.”
-          </Typography>
-          <TextField />
-        </FormField>
-        <FormField>
-          <InputLabel>Password</InputLabel>
-          <Typography variant="inputDescription">
-            Must be at least 8 characters
-          </Typography>
-          <TextField />
-        </FormField>
-        <FormField>
-          <InputLabel>Confirm Password</InputLabel>
-          <TextField />
-        </FormField>
-      </Flex>
-      <div className={styles.footer}>
-        <Button variant="filled" color="primary" size="large" fullWidth>
-          Sign up and join the conversation
-        </Button>
-        <Flex
-          itemGutter="half"
-          justifyContent="center"
-          className={styles.subFooter}
-        >
-          <Typography>Already have an account?</Typography>
-          <Button variant="underlined" size="small" color="primary">
-            Sign In
-          </Button>
-        </Flex>
-      </div>
-    </Flex>
+    <Form onSubmit={props.onSubmit}>
+      {({ handleSubmit, submitting }) => (
+        <form autoComplete="off" onSubmit={handleSubmit}>
+          <Flex itemGutter direction="column" className={styles.root}>
+            <Flex direction="column">
+              <Typography variant="heading1" align="center">
+                Sign up to join the conversation
+              </Typography>
+
+              <Field name="email" validate={required}>
+                {({ input, meta }) => (
+                  <FormField>
+                    <InputLabel>Email Address</InputLabel>
+                    <TextField
+                      name={input.name}
+                      onChange={input.onChange}
+                      value={input.value}
+                      placeholder="Email Address"
+                    />
+                  </FormField>
+                )}
+              </Field>
+
+              <FormField>
+                <InputLabel>Username</InputLabel>
+                <Typography variant="inputDescription">
+                  A unique identifier displayed on your comments. You may use
+                  “_” and “.”
+                </Typography>
+                <TextField />
+              </FormField>
+              <FormField>
+                <InputLabel>Password</InputLabel>
+                <Typography variant="inputDescription">
+                  Must be at least 8 characters
+                </Typography>
+                <TextField />
+              </FormField>
+              <FormField>
+                <InputLabel>Confirm Password</InputLabel>
+                <TextField />
+              </FormField>
+            </Flex>
+            <div className={styles.footer}>
+              <Button variant="filled" color="primary" size="large" fullWidth>
+                Sign up and join the conversation
+              </Button>
+              <Flex
+                itemGutter="half"
+                justifyContent="center"
+                className={styles.subFooter}
+              >
+                <Typography>Already have an account?</Typography>
+                <Button variant="underlined" size="small" color="primary">
+                  Sign In
+                </Button>
+              </Flex>
+            </div>
+          </Flex>
+        </form>
+      )}
+    </Form>
   );
 };
 
diff --git a/src/core/client/auth/containers/SignUpContainer.tsx b/src/core/client/auth/containers/SignUpContainer.tsx
index 9db82383a..eac0f8d14 100644
--- a/src/core/client/auth/containers/SignUpContainer.tsx
+++ b/src/core/client/auth/containers/SignUpContainer.tsx
@@ -1,10 +1,31 @@
-import * as React from "react";
-import { StatelessComponent } from "react";
+import { BadUserInputError } from "talk-framework/lib/errors";
+import SignUp, { SignUpForm } from "../components/SignUp";
 
-import SignUp from "../components/SignUp";
+import React, { Component } from "react";
+import { SignUpMutation, withSignUpMutation } from "../mutations";
 
-const SignUpContainer: StatelessComponent = () => {
-  return <SignUp />;
-};
+interface SignUpContainerProps {
+  signUp: SignUpMutation;
+}
 
-export default SignUpContainer;
+class SignUpContainer extends Component<SignUpContainerProps> {
+  private onSubmit: SignUpForm["onSubmit"] = async (input, form) => {
+    try {
+      await this.props.signUp(input);
+      form.reset();
+    } catch (error) {
+      if (error instanceof BadUserInputError) {
+        return error.invalidArgsLocalized;
+      }
+      // tslint:disable-next-line:no-console
+      console.error(error);
+    }
+    return undefined;
+  };
+  public render() {
+    return <SignUp onSubmit={this.onSubmit} />;
+  }
+}
+
+const enhanced = withSignUpMutation(SignUpContainer);
+export default enhanced;
diff --git a/src/core/client/ui/components/TextField/TextField.tsx b/src/core/client/ui/components/TextField/TextField.tsx
index 391b3759a..756242ec3 100644
--- a/src/core/client/ui/components/TextField/TextField.tsx
+++ b/src/core/client/ui/components/TextField/TextField.tsx
@@ -37,6 +37,14 @@ export interface TextFieldProps {
    * Mark as readonly
    */
   readOnly?: boolean;
+  /**
+   * Name
+   */
+  name?: string;
+  /**
+   * onChange
+   */
+  onChange?: <T>(event: any) => void;
 }
 
 const TextField: StatelessComponent<TextFieldProps> = props => {

From 7e081bbf078f7e4ad1717ccf6218209af780d220 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bel=C3=A9n=20Curcio?= <curciobelen@gmail.com>
Date: Sun, 12 Aug 2018 23:48:49 -0300
Subject: [PATCH 21/81] Sign Up Form, Cross Validations for Username, Email,
 Password, and more added.

---
 src/core/client/auth/components/SignUp.tsx    | 124 +++++++++++++++---
 src/core/client/framework/lib/messages.tsx    |  24 ++++
 src/core/client/framework/lib/validation.tsx  |  40 +++++-
 .../ui/components/TextField/TextField.tsx     |   4 +
 4 files changed, 170 insertions(+), 22 deletions(-)

diff --git a/src/core/client/auth/components/SignUp.tsx b/src/core/client/auth/components/SignUp.tsx
index 4428a8467..d4c8a7d55 100644
--- a/src/core/client/auth/components/SignUp.tsx
+++ b/src/core/client/auth/components/SignUp.tsx
@@ -2,7 +2,14 @@ import * as React from "react";
 import { StatelessComponent } from "react";
 import { Field, Form } from "react-final-form";
 import { OnSubmit } from "talk-framework/lib/form";
-import { required } from "talk-framework/lib/validation";
+import {
+  composeValidators,
+  required,
+  validateEmail,
+  validateEqualPasswords,
+  validatePassword,
+  validateUsername,
+} from "talk-framework/lib/validation";
 import * as styles from "./SignUp.css";
 
 import {
@@ -12,6 +19,7 @@ import {
   InputLabel,
   TextField,
   Typography,
+  ValidationMessage,
 } from "talk-ui/components";
 
 interface FormProps {
@@ -36,7 +44,10 @@ const SignUp: StatelessComponent<SignUpForm> = props => {
                 Sign up to join the conversation
               </Typography>
 
-              <Field name="email" validate={required}>
+              <Field
+                name="email"
+                validate={composeValidators(required, validateEmail)}
+              >
                 {({ input, meta }) => (
                   <FormField>
                     <InputLabel>Email Address</InputLabel>
@@ -46,29 +57,100 @@ const SignUp: StatelessComponent<SignUpForm> = props => {
                       value={input.value}
                       placeholder="Email Address"
                     />
+                    {meta.touched &&
+                      (meta.error || meta.submitError) && (
+                        <ValidationMessage>
+                          {meta.error || meta.submitError}
+                        </ValidationMessage>
+                      )}
                   </FormField>
                 )}
               </Field>
 
-              <FormField>
-                <InputLabel>Username</InputLabel>
-                <Typography variant="inputDescription">
-                  A unique identifier displayed on your comments. You may use
-                  “_” and “.”
-                </Typography>
-                <TextField />
-              </FormField>
-              <FormField>
-                <InputLabel>Password</InputLabel>
-                <Typography variant="inputDescription">
-                  Must be at least 8 characters
-                </Typography>
-                <TextField />
-              </FormField>
-              <FormField>
-                <InputLabel>Confirm Password</InputLabel>
-                <TextField />
-              </FormField>
+              <Field
+                name="username"
+                validate={composeValidators(required, validateUsername)}
+              >
+                {({ input, meta }) => (
+                  <FormField>
+                    <InputLabel>Username</InputLabel>
+                    <Typography variant="inputDescription">
+                      A unique identifier displayed on your comments. You may
+                      use “_” and “.”
+                    </Typography>
+                    <TextField
+                      name={input.name}
+                      onChange={input.onChange}
+                      value={input.value}
+                      placeholder="Username"
+                    />
+                    {meta.touched &&
+                      (meta.error || meta.submitError) && (
+                        <ValidationMessage>
+                          {meta.error || meta.submitError}
+                        </ValidationMessage>
+                      )}
+                  </FormField>
+                )}
+              </Field>
+
+              <Field
+                name="password"
+                validate={composeValidators(required, validatePassword)}
+              >
+                {({ input, meta }) => (
+                  <FormField>
+                    <InputLabel>Password</InputLabel>
+                    <Typography variant="inputDescription">
+                      Must be at least 8 characters
+                    </Typography>
+                    <TextField
+                      name={input.name}
+                      onChange={input.onChange}
+                      value={input.value}
+                      placeholder="Password"
+                      type="password"
+                    />
+                    {meta.touched &&
+                      (meta.error || meta.submitError) && (
+                        <ValidationMessage>
+                          {meta.error || meta.submitError}
+                        </ValidationMessage>
+                      )}
+                  </FormField>
+                )}
+              </Field>
+
+              <Field
+                name="confirmPassword"
+                validate={composeValidators(
+                  required,
+                  validatePassword,
+                  validateEqualPasswords
+                )}
+              >
+                {({ input, meta }) => (
+                  <FormField>
+                    <InputLabel>Confirm Password</InputLabel>
+                    <Typography variant="inputDescription">
+                      Must be at least 8 characters
+                    </Typography>
+                    <TextField
+                      name={input.name}
+                      onChange={input.onChange}
+                      value={input.value}
+                      placeholder="Confirm Password"
+                      type="password"
+                    />
+                    {meta.touched &&
+                      (meta.error || meta.submitError) && (
+                        <ValidationMessage>
+                          {meta.error || meta.submitError}
+                        </ValidationMessage>
+                      )}
+                  </FormField>
+                )}
+              </Field>
             </Flex>
             <div className={styles.footer}>
               <Button variant="filled" color="primary" size="large" fullWidth>
diff --git a/src/core/client/framework/lib/messages.tsx b/src/core/client/framework/lib/messages.tsx
index 316cd6e8a..61c74aa4b 100644
--- a/src/core/client/framework/lib/messages.tsx
+++ b/src/core/client/framework/lib/messages.tsx
@@ -17,3 +17,27 @@ export const VALIDATION_TOO_SHORT = () => (
     <span>This field is too short.</span>
   </Localized>
 );
+
+export const INVALID_EMAIL = () => (
+  <Localized id="framework-validation-invalidEmail">
+    <span>Please enter a valid email address.</span>
+  </Localized>
+);
+
+export const INVALID_USERNAME = () => (
+  <Localized id="framework-validation-invalidUsername">
+    <span>Please enter a valid username.</span>
+  </Localized>
+);
+
+export const INVALID_PASSWORD = () => (
+  <Localized id="framework-validation-invalidUsername">
+    <span>Please enter a valid password.</span>
+  </Localized>
+);
+
+export const PASSWORDS_DO_NOT_MATCH = () => (
+  <Localized id="framework-validation-passwordsDoNotMatch">
+    <span>Passwords do not match. Try again.</span>
+  </Localized>
+);
diff --git a/src/core/client/framework/lib/validation.tsx b/src/core/client/framework/lib/validation.tsx
index 54f75a01c..87e8f855c 100644
--- a/src/core/client/framework/lib/validation.tsx
+++ b/src/core/client/framework/lib/validation.tsx
@@ -1,5 +1,11 @@
 import { ReactNode } from "react";
-import { VALIDATION_REQUIRED } from "./messages";
+import {
+  INVALID_EMAIL,
+  INVALID_PASSWORD,
+  INVALID_USERNAME,
+  PASSWORDS_DO_NOT_MATCH,
+  VALIDATION_REQUIRED,
+} from "./messages";
 
 type Validator<T, V> = (v: T, values: V) => ReactNode;
 
@@ -31,3 +37,35 @@ export function composeValidators<T = any, V = any>(
  * required is a Validator that checks that the value is truthy.
  */
 export const required = createValidator(v => !!v, VALIDATION_REQUIRED());
+
+/**
+ * validateEmail is a Validator that checks that the value is an email.
+ */
+export const validateEmail = createValidator(
+  v => /^.+@.+\..+$/.test(v),
+  INVALID_EMAIL()
+);
+
+/**
+ * validateUsername is a Validator that checks that the value is a valid username.
+ */
+export const validateUsername = createValidator(
+  v => /^[a-zA-Z0-9_.]+$/.test(v),
+  INVALID_USERNAME()
+);
+
+/**
+ * validateUsername is a Validator that checks that the value is a valid username.
+ */
+export const validatePassword = createValidator(
+  v => /^(?=.{8,}).*$/.test(v),
+  INVALID_PASSWORD()
+);
+
+/**s
+ * validateUsername is a Validator that checks that the value is a valid username.
+ */
+export const validateEqualPasswords = createValidator(
+  (v, values) => v === values.password,
+  PASSWORDS_DO_NOT_MATCH()
+);
diff --git a/src/core/client/ui/components/TextField/TextField.tsx b/src/core/client/ui/components/TextField/TextField.tsx
index 756242ec3..56894ba2f 100644
--- a/src/core/client/ui/components/TextField/TextField.tsx
+++ b/src/core/client/ui/components/TextField/TextField.tsx
@@ -41,6 +41,10 @@ export interface TextFieldProps {
    * Name
    */
   name?: string;
+  /**
+   * type
+   */
+  type?: string;
   /**
    * onChange
    */

From 4c86d842dd16601fba31c50fc17f7f51b2214034 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bel=C3=A9n=20Curcio?= <curciobelen@gmail.com>
Date: Mon, 13 Aug 2018 00:20:15 -0300
Subject: [PATCH 22/81] Validations for all forms: SIGN UP, SIGN IN, FORGOT
 PASSWORD, RESET PASSWORD

---
 .../client/auth/components/ForgotPassword.tsx |  76 +++++++---
 .../client/auth/components/ResetPassword.tsx  | 109 +++++++++++---
 src/core/client/auth/components/SignIn.tsx    | 142 +++++++++++++-----
 src/core/client/auth/components/SignUp.tsx    |   8 +-
 .../containers/ForgotPasswordContainer.tsx    |  12 +-
 .../containers/ResetPasswordContainer.tsx     |  12 +-
 .../auth/containers/SignInContainer.tsx       |  35 ++++-
 .../stream/containers/UserBoxContainer.tsx    |   4 +-
 8 files changed, 299 insertions(+), 99 deletions(-)

diff --git a/src/core/client/auth/components/ForgotPassword.tsx b/src/core/client/auth/components/ForgotPassword.tsx
index 4c06dcbc4..288887d7f 100644
--- a/src/core/client/auth/components/ForgotPassword.tsx
+++ b/src/core/client/auth/components/ForgotPassword.tsx
@@ -1,6 +1,11 @@
-import * as React from "react";
-import { StatelessComponent } from "react";
-import * as styles from "./SignIn.css";
+import React, { StatelessComponent } from "react";
+import { Field, Form } from "react-final-form";
+
+import {
+  composeValidators,
+  required,
+  validateEmail,
+} from "talk-framework/lib/validation";
 
 import {
   Button,
@@ -9,28 +14,57 @@ import {
   InputLabel,
   TextField,
   Typography,
+  ValidationMessage,
 } from "talk-ui/components";
 
+import * as styles from "./ForgotPassword.css";
+
 const ForgotPassword: StatelessComponent = props => {
   return (
-    <Flex itemGutter direction="column" className={styles.root}>
-      <Typography variant="heading1" align="center">
-        Forgot Password
-      </Typography>
-      <Typography variant="bodyCopy">
-        Enter your email address below and we will send you a link to reset your
-        password.
-      </Typography>
-      <FormField>
-        <InputLabel>Email Address</InputLabel>
-        <TextField />
-      </FormField>
-      <div className={styles.footer}>
-        <Button variant="filled" color="primary" size="large" fullWidth>
-          Send Email
-        </Button>
-      </div>
-    </Flex>
+    // TODO (bc) add functionality when Forgot Password is done on the backend
+    // tslint:disable-next-line:no-empty
+    <Form onSubmit={() => {}}>
+      {({ handleSubmit, submitting }) => (
+        <form autoComplete="off" onSubmit={handleSubmit}>
+          <Flex itemGutter direction="column" className={styles.root}>
+            <Typography variant="heading1" align="center">
+              Forgot Password
+            </Typography>
+            <Typography variant="bodyCopy">
+              Enter your email address below and we will send you a link to
+              reset your password.
+            </Typography>
+            <Field
+              name="email"
+              validate={composeValidators(required, validateEmail)}
+            >
+              {({ input, meta }) => (
+                <FormField>
+                  <InputLabel>Email Address</InputLabel>
+                  <TextField
+                    name={input.name}
+                    onChange={input.onChange}
+                    value={input.value}
+                    placeholder="Email Address"
+                  />
+                  {meta.touched &&
+                    (meta.error || meta.submitError) && (
+                      <ValidationMessage>
+                        {meta.error || meta.submitError}
+                      </ValidationMessage>
+                    )}
+                </FormField>
+              )}
+            </Field>
+            <div className={styles.footer}>
+              <Button variant="filled" color="primary" size="large" fullWidth>
+                Send Email
+              </Button>
+            </div>
+          </Flex>
+        </form>
+      )}
+    </Form>
   );
 };
 
diff --git a/src/core/client/auth/components/ResetPassword.tsx b/src/core/client/auth/components/ResetPassword.tsx
index 5f000d091..8500c07db 100644
--- a/src/core/client/auth/components/ResetPassword.tsx
+++ b/src/core/client/auth/components/ResetPassword.tsx
@@ -1,6 +1,12 @@
-import * as React from "react";
-import { StatelessComponent } from "react";
-import * as styles from "./SignIn.css";
+import React, { StatelessComponent } from "react";
+import { Field, Form } from "react-final-form";
+
+import {
+  composeValidators,
+  required,
+  validateEqualPasswords,
+  validatePassword,
+} from "talk-framework/lib/validation";
 
 import {
   Button,
@@ -9,29 +15,88 @@ import {
   InputLabel,
   TextField,
   Typography,
+  ValidationMessage,
 } from "talk-ui/components";
 
+import * as styles from "./ResetPassword.css";
+
 const ResetPassword: StatelessComponent = props => {
   return (
-    <Flex itemGutter direction="column" className={styles.root}>
-      <Typography variant="heading1" align="center">
-        Reset Password
-      </Typography>
-      <FormField>
-        <InputLabel>Password</InputLabel>
-        <Typography>Must be at least 8 characters</Typography>
-        <TextField />
-      </FormField>
-      <FormField>
-        <InputLabel>Confirm Password</InputLabel>
-        <TextField />
-      </FormField>
-      <div className={styles.footer}>
-        <Button variant="filled" color="primary" size="large" fullWidth>
-          Reset Password
-        </Button>
-      </div>
-    </Flex>
+    // TODO (bc) add functionality when Reset Password is done on the backend
+    // tslint:disable-next-line:no-empty
+    <Form onSubmit={() => {}}>
+      {({ handleSubmit, submitting }) => (
+        <form autoComplete="off" onSubmit={handleSubmit}>
+          <Flex itemGutter direction="column" className={styles.root}>
+            <Typography variant="heading1" align="center">
+              Reset Password
+            </Typography>
+            <Field
+              name="password"
+              validate={composeValidators(required, validatePassword)}
+            >
+              {({ input, meta }) => (
+                <FormField>
+                  <InputLabel>Password</InputLabel>
+                  <Typography variant="inputDescription">
+                    Must be at least 8 characters
+                  </Typography>
+                  <TextField
+                    name={input.name}
+                    onChange={input.onChange}
+                    value={input.value}
+                    placeholder="Password"
+                    type="password"
+                  />
+                  {meta.touched &&
+                    (meta.error || meta.submitError) && (
+                      <ValidationMessage>
+                        {meta.error || meta.submitError}
+                      </ValidationMessage>
+                    )}
+                </FormField>
+              )}
+            </Field>
+
+            <Field
+              name="confirmPassword"
+              validate={composeValidators(
+                required,
+                validatePassword,
+                validateEqualPasswords
+              )}
+            >
+              {({ input, meta }) => (
+                <FormField>
+                  <InputLabel>Confirm Password</InputLabel>
+                  <Typography variant="inputDescription">
+                    Must be at least 8 characters
+                  </Typography>
+                  <TextField
+                    name={input.name}
+                    onChange={input.onChange}
+                    value={input.value}
+                    placeholder="Confirm Password"
+                    type="password"
+                  />
+                  {meta.touched &&
+                    (meta.error || meta.submitError) && (
+                      <ValidationMessage>
+                        {meta.error || meta.submitError}
+                      </ValidationMessage>
+                    )}
+                </FormField>
+              )}
+            </Field>
+            <div className={styles.footer}>
+              <Button variant="filled" color="primary" size="large" fullWidth>
+                Reset Password
+              </Button>
+            </div>
+          </Flex>
+        </form>
+      )}
+    </Form>
   );
 };
 
diff --git a/src/core/client/auth/components/SignIn.tsx b/src/core/client/auth/components/SignIn.tsx
index 9244aa2af..042233df1 100644
--- a/src/core/client/auth/components/SignIn.tsx
+++ b/src/core/client/auth/components/SignIn.tsx
@@ -1,7 +1,16 @@
 import * as React from "react";
 import { StatelessComponent } from "react";
+import { Field, Form } from "react-final-form";
+import { OnSubmit } from "talk-framework/lib/form";
 import * as styles from "./SignIn.css";
 
+import {
+  composeValidators,
+  required,
+  validateEmail,
+  validatePassword,
+} from "talk-framework/lib/validation";
+
 import {
   Button,
   Flex,
@@ -9,43 +18,108 @@ import {
   InputLabel,
   TextField,
   Typography,
+  ValidationMessage,
 } from "talk-ui/components";
 
-const SignIn: StatelessComponent = props => {
+interface FormProps {
+  email: string;
+  password: string;
+}
+
+export interface SignInForm {
+  onSubmit: OnSubmit<FormProps>;
+}
+
+const SignIn: StatelessComponent<SignInForm> = props => {
   return (
-    <Flex itemGutter direction="column" className={styles.root}>
-      <Typography variant="heading1" align="center">
-        Sign in to join the conversation
-      </Typography>
-      <FormField>
-        <InputLabel>Email Address</InputLabel>
-        <TextField />
-      </FormField>
-      <FormField>
-        <InputLabel>Password</InputLabel>
-        <TextField />
-        <span className={styles.forgotPassword}>
-          <Button variant="underlined" color="primary" size="small">
-            Forgot your password?
-          </Button>
-        </span>
-      </FormField>
-      <div className={styles.footer}>
-        <Button variant="filled" color="primary" size="large" fullWidth>
-          Sign in and join the conversation
-        </Button>
-        <Flex
-          itemGutter="half"
-          justifyContent="center"
-          className={styles.subFooter}
-        >
-          <Typography>Don't have an account?</Typography>
-          <Button variant="underlined" size="small" color="primary">
-            Sign Up
-          </Button>
-        </Flex>
-      </div>
-    </Flex>
+    <Form onSubmit={props.onSubmit}>
+      {({ handleSubmit, submitting }) => (
+        <form autoComplete="off" onSubmit={handleSubmit}>
+          <Flex itemGutter direction="column" className={styles.root}>
+            <Typography variant="heading1" align="center">
+              Sign in to join the conversation
+            </Typography>
+
+            <Field
+              name="email"
+              validate={composeValidators(required, validateEmail)}
+            >
+              {({ input, meta }) => (
+                <FormField>
+                  <InputLabel>Email Address</InputLabel>
+                  <TextField
+                    name={input.name}
+                    onChange={input.onChange}
+                    value={input.value}
+                    placeholder="Email Address"
+                  />
+                  {meta.touched &&
+                    (meta.error || meta.submitError) && (
+                      <ValidationMessage>
+                        {meta.error || meta.submitError}
+                      </ValidationMessage>
+                    )}
+                </FormField>
+              )}
+            </Field>
+
+            <Field
+              name="password"
+              validate={composeValidators(required, validatePassword)}
+            >
+              {({ input, meta }) => (
+                <FormField>
+                  <InputLabel>Password</InputLabel>
+                  <Typography variant="inputDescription">
+                    Must be at least 8 characters
+                  </Typography>
+                  <TextField
+                    name={input.name}
+                    onChange={input.onChange}
+                    value={input.value}
+                    placeholder="Password"
+                    type="password"
+                  />
+                  {meta.touched &&
+                    (meta.error || meta.submitError) && (
+                      <ValidationMessage>
+                        {meta.error || meta.submitError}
+                      </ValidationMessage>
+                    )}
+                  <span className={styles.forgotPassword}>
+                    <Button variant="underlined" color="primary" size="small">
+                      Forgot your password?
+                    </Button>
+                  </span>
+                </FormField>
+              )}
+            </Field>
+
+            <div className={styles.footer}>
+              <Button
+                variant="filled"
+                color="primary"
+                size="large"
+                fullWidth
+                type="submit"
+              >
+                Sign in and join the conversation
+              </Button>
+              <Flex
+                itemGutter="half"
+                justifyContent="center"
+                className={styles.subFooter}
+              >
+                <Typography>Don't have an account?</Typography>
+                <Button variant="underlined" size="small" color="primary">
+                  Sign Up
+                </Button>
+              </Flex>
+            </div>
+          </Flex>
+        </form>
+      )}
+    </Form>
   );
 };
 
diff --git a/src/core/client/auth/components/SignUp.tsx b/src/core/client/auth/components/SignUp.tsx
index d4c8a7d55..64d632f74 100644
--- a/src/core/client/auth/components/SignUp.tsx
+++ b/src/core/client/auth/components/SignUp.tsx
@@ -153,7 +153,13 @@ const SignUp: StatelessComponent<SignUpForm> = props => {
               </Field>
             </Flex>
             <div className={styles.footer}>
-              <Button variant="filled" color="primary" size="large" fullWidth>
+              <Button
+                variant="filled"
+                color="primary"
+                size="large"
+                fullWidth
+                type="submit"
+              >
                 Sign up and join the conversation
               </Button>
               <Flex
diff --git a/src/core/client/auth/containers/ForgotPasswordContainer.tsx b/src/core/client/auth/containers/ForgotPasswordContainer.tsx
index b364e7e9e..2d5c1481e 100644
--- a/src/core/client/auth/containers/ForgotPasswordContainer.tsx
+++ b/src/core/client/auth/containers/ForgotPasswordContainer.tsx
@@ -1,10 +1,10 @@
-import * as React from "react";
-import { StatelessComponent } from "react";
-
+import React, { Component } from "react";
 import ForgotPassword from "../components/ForgotPassword";
 
-const ForgotPasswordContainer: StatelessComponent = () => {
-  return <ForgotPassword />;
-};
+class ForgotPasswordContainer extends Component {
+  public render() {
+    return <ForgotPassword />;
+  }
+}
 
 export default ForgotPasswordContainer;
diff --git a/src/core/client/auth/containers/ResetPasswordContainer.tsx b/src/core/client/auth/containers/ResetPasswordContainer.tsx
index 6dab0eef1..ae5006eb0 100644
--- a/src/core/client/auth/containers/ResetPasswordContainer.tsx
+++ b/src/core/client/auth/containers/ResetPasswordContainer.tsx
@@ -1,10 +1,10 @@
-import * as React from "react";
-import { StatelessComponent } from "react";
-
+import React, { Component } from "react";
 import ResetPassword from "../components/ResetPassword";
 
-const ResetPasswordContainer: StatelessComponent = () => {
-  return <ResetPassword />;
-};
+class ResetPasswordContainer extends Component {
+  public render() {
+    return <ResetPassword />;
+  }
+}
 
 export default ResetPasswordContainer;
diff --git a/src/core/client/auth/containers/SignInContainer.tsx b/src/core/client/auth/containers/SignInContainer.tsx
index aabf4641d..fa4fa2d80 100644
--- a/src/core/client/auth/containers/SignInContainer.tsx
+++ b/src/core/client/auth/containers/SignInContainer.tsx
@@ -1,10 +1,31 @@
-import * as React from "react";
-import { StatelessComponent } from "react";
+import { BadUserInputError } from "talk-framework/lib/errors";
+import SignIn, { SignInForm } from "../components/SignIn";
 
-import SignIn from "../components/SignIn";
+import React, { Component } from "react";
+import { SignInMutation, withSignInMutation } from "../mutations";
 
-const SignInContainer: StatelessComponent = () => {
-  return <SignIn />;
-};
+interface SignInContainerProps {
+  signIn: SignInMutation;
+}
 
-export default SignInContainer;
+class SignInContainer extends Component<SignInContainerProps> {
+  private onSubmit: SignInForm["onSubmit"] = async (input, form) => {
+    try {
+      await this.props.signIn(input);
+      form.reset();
+    } catch (error) {
+      if (error instanceof BadUserInputError) {
+        return error.invalidArgsLocalized;
+      }
+      // tslint:disable-next-line:no-console
+      console.error(error);
+    }
+    return undefined;
+  };
+  public render() {
+    return <SignIn onSubmit={this.onSubmit} />;
+  }
+}
+
+const enhanced = withSignInMutation(SignInContainer);
+export default enhanced;
diff --git a/src/core/client/stream/containers/UserBoxContainer.tsx b/src/core/client/stream/containers/UserBoxContainer.tsx
index a1f2bb87b..b719902cd 100644
--- a/src/core/client/stream/containers/UserBoxContainer.tsx
+++ b/src/core/client/stream/containers/UserBoxContainer.tsx
@@ -38,14 +38,14 @@ export class UserBoxContainer extends Component<InnerProps> {
         <Popup
           href={`/auth.html?view=${view}`}
           title="Talk Auth"
-          features="menubar=0,resizable=0,width=350,height=600,top=200,left=500"
+          features="menubar=0,resizable=0,width=350,height=720,top=200,left=500"
           open={open}
           focus={focus}
           onFocus={this.handleFocus}
           onBlur={this.handleBlur}
           onClose={this.handleClose}
         />
-        {/* <UserBoxAuthenticated onSignOut={this.handleRegister} /> */}
+        {/* <UserBoxAuthenticated onSignOut={this.handleSignOut} /> */}
         <UserBoxUnauthenticated
           onSignIn={this.handleSignIn}
           onRegister={this.handleRegister}

From 4688f170e4899ba778c8dfb26714dd0c5b0689da Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Mon, 13 Aug 2018 12:13:00 -0300
Subject: [PATCH 23/81] updated snapshots

---
 .../UserBoxUnauthenticated.spec.tsx.snap      |  5 +-
 .../UserBoxContainer.spec.tsx.snap            |  2 +-
 .../test/__snapshots__/loadMore.spec.tsx.snap | 62 +++++++++----------
 .../__snapshots__/permalinkView.spec.tsx.snap | 31 +++++-----
 ...permalinkViewCommentNotFound.spec.tsx.snap | 31 +++++-----
 .../__snapshots__/renderReplies.spec.tsx.snap | 31 +++++-----
 .../__snapshots__/renderStream.spec.tsx.snap  | 31 +++++-----
 .../showAllReplies.spec.tsx.snap              | 62 +++++++++----------
 .../__snapshots__/TextField.spec.tsx.snap     |  2 +-
 9 files changed, 118 insertions(+), 139 deletions(-)

diff --git a/src/core/client/stream/components/__snapshots__/UserBoxUnauthenticated.spec.tsx.snap b/src/core/client/stream/components/__snapshots__/UserBoxUnauthenticated.spec.tsx.snap
index 9cf950ec6..2021b7c31 100644
--- a/src/core/client/stream/components/__snapshots__/UserBoxUnauthenticated.spec.tsx.snap
+++ b/src/core/client/stream/components/__snapshots__/UserBoxUnauthenticated.spec.tsx.snap
@@ -1,7 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders correctly 1`] = `
-<withPropsOnChange(Flex)>
+<withPropsOnChange(Flex)
+  itemGutter={true}
+>
   <MatchMediaWithContext
     gteWidth="sm"
   >
@@ -30,6 +32,7 @@ exports[`renders correctly 1`] = `
       color="primary"
       onClick={[Function]}
       size="small"
+      variant="underlined"
     >
       Sign in
     </withPropsOnChange(Button)>
diff --git a/src/core/client/stream/containers/__snapshots__/UserBoxContainer.spec.tsx.snap b/src/core/client/stream/containers/__snapshots__/UserBoxContainer.spec.tsx.snap
index c1fdd3d4c..d9c77ba58 100644
--- a/src/core/client/stream/containers/__snapshots__/UserBoxContainer.spec.tsx.snap
+++ b/src/core/client/stream/containers/__snapshots__/UserBoxContainer.spec.tsx.snap
@@ -3,7 +3,7 @@
 exports[`renders correctly 1`] = `
 <React.Fragment>
   <Popup
-    features="menubar=0,resizable=0,width=500,height=550,top=200,left=500"
+    features="menubar=0,resizable=0,width=350,height=600,top=200,left=500"
     focus={false}
     href="/auth.html?view=SIGN_IN"
     onBlur={[Function]}
diff --git a/src/core/client/stream/test/__snapshots__/loadMore.spec.tsx.snap b/src/core/client/stream/test/__snapshots__/loadMore.spec.tsx.snap
index d3310dc45..1c653ce93 100644
--- a/src/core/client/stream/test/__snapshots__/loadMore.spec.tsx.snap
+++ b/src/core/client/stream/test/__snapshots__/loadMore.spec.tsx.snap
@@ -17,10 +17,10 @@ exports[`loads more comments 1`] = `
           className="Flex-root"
         >
           <div
-            className="Flex-flex Flex-wrap Flex-alignCenter"
+            className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignCenter"
           >
             <button
-              className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantRegular"
+              className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantUnderlined"
               onBlur={[Function]}
               onClick={[Function]}
               onFocus={[Function]}
@@ -55,25 +55,22 @@ exports[`loads more comments 1`] = `
               className="PostCommentForm-textarea"
               name="body"
               onChange={[Function]}
+              placeholder="Post a comment"
               value=""
             />
           </div>
-          <div
-            className="PostCommentForm-postButtonContainer"
+          <button
+            className="BaseButton-root Button-root Button-sizeLarge Button-colorPrimary Button-variantFilled Button-fullWidth Button-disabled"
+            disabled={true}
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseDown={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            onTouchEnd={[Function]}
           >
-            <button
-              className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled"
-              disabled={false}
-              onBlur={[Function]}
-              onFocus={[Function]}
-              onMouseDown={[Function]}
-              onMouseOut={[Function]}
-              onMouseOver={[Function]}
-              onTouchEnd={[Function]}
-            >
-              Post
-            </button>
-          </div>
+            Sign In and join the conversation
+          </button>
         </form>
         <div
           aria-live="polite"
@@ -232,10 +229,10 @@ exports[`renders comment stream 1`] = `
           className="Flex-root"
         >
           <div
-            className="Flex-flex Flex-wrap Flex-alignCenter"
+            className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignCenter"
           >
             <button
-              className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantRegular"
+              className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantUnderlined"
               onBlur={[Function]}
               onClick={[Function]}
               onFocus={[Function]}
@@ -270,25 +267,22 @@ exports[`renders comment stream 1`] = `
               className="PostCommentForm-textarea"
               name="body"
               onChange={[Function]}
+              placeholder="Post a comment"
               value=""
             />
           </div>
-          <div
-            className="PostCommentForm-postButtonContainer"
+          <button
+            className="BaseButton-root Button-root Button-sizeLarge Button-colorPrimary Button-variantFilled Button-fullWidth Button-disabled"
+            disabled={true}
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseDown={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            onTouchEnd={[Function]}
           >
-            <button
-              className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled"
-              disabled={false}
-              onBlur={[Function]}
-              onFocus={[Function]}
-              onMouseDown={[Function]}
-              onMouseOut={[Function]}
-              onMouseOver={[Function]}
-              onTouchEnd={[Function]}
-            >
-              Post
-            </button>
-          </div>
+            Sign In and join the conversation
+          </button>
         </form>
         <div
           aria-live="polite"
diff --git a/src/core/client/stream/test/__snapshots__/permalinkView.spec.tsx.snap b/src/core/client/stream/test/__snapshots__/permalinkView.spec.tsx.snap
index 38f7f0b8f..666eaa2a2 100644
--- a/src/core/client/stream/test/__snapshots__/permalinkView.spec.tsx.snap
+++ b/src/core/client/stream/test/__snapshots__/permalinkView.spec.tsx.snap
@@ -88,10 +88,10 @@ exports[`show all comments 1`] = `
           className="Flex-root"
         >
           <div
-            className="Flex-flex Flex-wrap Flex-alignCenter"
+            className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignCenter"
           >
             <button
-              className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantRegular"
+              className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantUnderlined"
               onBlur={[Function]}
               onClick={[Function]}
               onFocus={[Function]}
@@ -126,25 +126,22 @@ exports[`show all comments 1`] = `
               className="PostCommentForm-textarea"
               name="body"
               onChange={[Function]}
+              placeholder="Post a comment"
               value=""
             />
           </div>
-          <div
-            className="PostCommentForm-postButtonContainer"
+          <button
+            className="BaseButton-root Button-root Button-sizeLarge Button-colorPrimary Button-variantFilled Button-fullWidth Button-disabled"
+            disabled={true}
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseDown={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            onTouchEnd={[Function]}
           >
-            <button
-              className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled"
-              disabled={false}
-              onBlur={[Function]}
-              onFocus={[Function]}
-              onMouseDown={[Function]}
-              onMouseOut={[Function]}
-              onMouseOver={[Function]}
-              onTouchEnd={[Function]}
-            >
-              Post
-            </button>
-          </div>
+            Sign In and join the conversation
+          </button>
         </form>
         <div
           aria-live="polite"
diff --git a/src/core/client/stream/test/__snapshots__/permalinkViewCommentNotFound.spec.tsx.snap b/src/core/client/stream/test/__snapshots__/permalinkViewCommentNotFound.spec.tsx.snap
index 20124a5e6..18a0352be 100644
--- a/src/core/client/stream/test/__snapshots__/permalinkViewCommentNotFound.spec.tsx.snap
+++ b/src/core/client/stream/test/__snapshots__/permalinkViewCommentNotFound.spec.tsx.snap
@@ -52,10 +52,10 @@ exports[`show all comments 1`] = `
           className="Flex-root"
         >
           <div
-            className="Flex-flex Flex-wrap Flex-alignCenter"
+            className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignCenter"
           >
             <button
-              className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantRegular"
+              className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantUnderlined"
               onBlur={[Function]}
               onClick={[Function]}
               onFocus={[Function]}
@@ -90,25 +90,22 @@ exports[`show all comments 1`] = `
               className="PostCommentForm-textarea"
               name="body"
               onChange={[Function]}
+              placeholder="Post a comment"
               value=""
             />
           </div>
-          <div
-            className="PostCommentForm-postButtonContainer"
+          <button
+            className="BaseButton-root Button-root Button-sizeLarge Button-colorPrimary Button-variantFilled Button-fullWidth Button-disabled"
+            disabled={true}
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseDown={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            onTouchEnd={[Function]}
           >
-            <button
-              className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled"
-              disabled={false}
-              onBlur={[Function]}
-              onFocus={[Function]}
-              onMouseDown={[Function]}
-              onMouseOut={[Function]}
-              onMouseOver={[Function]}
-              onTouchEnd={[Function]}
-            >
-              Post
-            </button>
-          </div>
+            Sign In and join the conversation
+          </button>
         </form>
         <div
           aria-live="polite"
diff --git a/src/core/client/stream/test/__snapshots__/renderReplies.spec.tsx.snap b/src/core/client/stream/test/__snapshots__/renderReplies.spec.tsx.snap
index 009bbce70..5134fd802 100644
--- a/src/core/client/stream/test/__snapshots__/renderReplies.spec.tsx.snap
+++ b/src/core/client/stream/test/__snapshots__/renderReplies.spec.tsx.snap
@@ -17,10 +17,10 @@ exports[`renders comment stream 1`] = `
           className="Flex-root"
         >
           <div
-            className="Flex-flex Flex-wrap Flex-alignCenter"
+            className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignCenter"
           >
             <button
-              className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantRegular"
+              className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantUnderlined"
               onBlur={[Function]}
               onClick={[Function]}
               onFocus={[Function]}
@@ -55,25 +55,22 @@ exports[`renders comment stream 1`] = `
               className="PostCommentForm-textarea"
               name="body"
               onChange={[Function]}
+              placeholder="Post a comment"
               value=""
             />
           </div>
-          <div
-            className="PostCommentForm-postButtonContainer"
+          <button
+            className="BaseButton-root Button-root Button-sizeLarge Button-colorPrimary Button-variantFilled Button-fullWidth Button-disabled"
+            disabled={true}
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseDown={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            onTouchEnd={[Function]}
           >
-            <button
-              className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled"
-              disabled={false}
-              onBlur={[Function]}
-              onFocus={[Function]}
-              onMouseDown={[Function]}
-              onMouseOut={[Function]}
-              onMouseOver={[Function]}
-              onTouchEnd={[Function]}
-            >
-              Post
-            </button>
-          </div>
+            Sign In and join the conversation
+          </button>
         </form>
         <div
           aria-live="polite"
diff --git a/src/core/client/stream/test/__snapshots__/renderStream.spec.tsx.snap b/src/core/client/stream/test/__snapshots__/renderStream.spec.tsx.snap
index f46ff9b5e..7ce338f55 100644
--- a/src/core/client/stream/test/__snapshots__/renderStream.spec.tsx.snap
+++ b/src/core/client/stream/test/__snapshots__/renderStream.spec.tsx.snap
@@ -17,10 +17,10 @@ exports[`renders comment stream 1`] = `
           className="Flex-root"
         >
           <div
-            className="Flex-flex Flex-wrap Flex-alignCenter"
+            className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignCenter"
           >
             <button
-              className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantRegular"
+              className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantUnderlined"
               onBlur={[Function]}
               onClick={[Function]}
               onFocus={[Function]}
@@ -55,25 +55,22 @@ exports[`renders comment stream 1`] = `
               className="PostCommentForm-textarea"
               name="body"
               onChange={[Function]}
+              placeholder="Post a comment"
               value=""
             />
           </div>
-          <div
-            className="PostCommentForm-postButtonContainer"
+          <button
+            className="BaseButton-root Button-root Button-sizeLarge Button-colorPrimary Button-variantFilled Button-fullWidth Button-disabled"
+            disabled={true}
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseDown={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            onTouchEnd={[Function]}
           >
-            <button
-              className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled"
-              disabled={false}
-              onBlur={[Function]}
-              onFocus={[Function]}
-              onMouseDown={[Function]}
-              onMouseOut={[Function]}
-              onMouseOver={[Function]}
-              onTouchEnd={[Function]}
-            >
-              Post
-            </button>
-          </div>
+            Sign In and join the conversation
+          </button>
         </form>
         <div
           aria-live="polite"
diff --git a/src/core/client/stream/test/__snapshots__/showAllReplies.spec.tsx.snap b/src/core/client/stream/test/__snapshots__/showAllReplies.spec.tsx.snap
index d010daaf3..27a76add0 100644
--- a/src/core/client/stream/test/__snapshots__/showAllReplies.spec.tsx.snap
+++ b/src/core/client/stream/test/__snapshots__/showAllReplies.spec.tsx.snap
@@ -17,10 +17,10 @@ exports[`renders comment stream 1`] = `
           className="Flex-root"
         >
           <div
-            className="Flex-flex Flex-wrap Flex-alignCenter"
+            className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignCenter"
           >
             <button
-              className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantRegular"
+              className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantUnderlined"
               onBlur={[Function]}
               onClick={[Function]}
               onFocus={[Function]}
@@ -55,25 +55,22 @@ exports[`renders comment stream 1`] = `
               className="PostCommentForm-textarea"
               name="body"
               onChange={[Function]}
+              placeholder="Post a comment"
               value=""
             />
           </div>
-          <div
-            className="PostCommentForm-postButtonContainer"
+          <button
+            className="BaseButton-root Button-root Button-sizeLarge Button-colorPrimary Button-variantFilled Button-fullWidth Button-disabled"
+            disabled={true}
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseDown={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            onTouchEnd={[Function]}
           >
-            <button
-              className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled"
-              disabled={false}
-              onBlur={[Function]}
-              onFocus={[Function]}
-              onMouseDown={[Function]}
-              onMouseOut={[Function]}
-              onMouseOver={[Function]}
-              onTouchEnd={[Function]}
-            >
-              Post
-            </button>
-          </div>
+            Sign In and join the conversation
+          </button>
         </form>
         <div
           aria-live="polite"
@@ -212,10 +209,10 @@ exports[`show all replies 1`] = `
           className="Flex-root"
         >
           <div
-            className="Flex-flex Flex-wrap Flex-alignCenter"
+            className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignCenter"
           >
             <button
-              className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantRegular"
+              className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantUnderlined"
               onBlur={[Function]}
               onClick={[Function]}
               onFocus={[Function]}
@@ -250,25 +247,22 @@ exports[`show all replies 1`] = `
               className="PostCommentForm-textarea"
               name="body"
               onChange={[Function]}
+              placeholder="Post a comment"
               value=""
             />
           </div>
-          <div
-            className="PostCommentForm-postButtonContainer"
+          <button
+            className="BaseButton-root Button-root Button-sizeLarge Button-colorPrimary Button-variantFilled Button-fullWidth Button-disabled"
+            disabled={true}
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseDown={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            onTouchEnd={[Function]}
           >
-            <button
-              className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled"
-              disabled={false}
-              onBlur={[Function]}
-              onFocus={[Function]}
-              onMouseDown={[Function]}
-              onMouseOut={[Function]}
-              onMouseOver={[Function]}
-              onTouchEnd={[Function]}
-            >
-              Post
-            </button>
-          </div>
+            Sign In and join the conversation
+          </button>
         </form>
         <div
           aria-live="polite"
diff --git a/src/core/client/ui/components/TextField/__snapshots__/TextField.spec.tsx.snap b/src/core/client/ui/components/TextField/__snapshots__/TextField.spec.tsx.snap
index a277de918..45486b121 100644
--- a/src/core/client/ui/components/TextField/__snapshots__/TextField.spec.tsx.snap
+++ b/src/core/client/ui/components/TextField/__snapshots__/TextField.spec.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`renders correctly 1`] = `
 <input
-  className="TextField-root TextField-colorRegular custom"
+  className="TextField-root TextField-colorRegular TextField-fullWidth custom"
   defaultValue="Hello World"
   placeholder=""
 />

From 6648dfe492b4859518b2a6283354028b4cc20a29 Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Mon, 13 Aug 2018 12:59:53 -0300
Subject: [PATCH 24/81] Adding InputDescription Component

---
 src/core/client/auth/components/SignUp.tsx    | 15 +++----
 .../stream/components/PostCommentForm.tsx     |  8 ++--
 .../client/stream/components/PoweredBy.css    |  3 --
 .../InputDescription/InputDescription.mdx     | 26 ++----------
 .../InputDescription/InputDescription.tsx     | 41 +++++--------------
 src/core/client/ui/components/index.ts        |  1 +
 src/core/client/ui/shared/typography.css      |  8 ++--
 7 files changed, 31 insertions(+), 71 deletions(-)
 delete mode 100644 src/core/client/stream/components/PoweredBy.css

diff --git a/src/core/client/auth/components/SignUp.tsx b/src/core/client/auth/components/SignUp.tsx
index d4c8a7d55..76f7d952a 100644
--- a/src/core/client/auth/components/SignUp.tsx
+++ b/src/core/client/auth/components/SignUp.tsx
@@ -16,6 +16,7 @@ import {
   Button,
   Flex,
   FormField,
+  InputDescription,
   InputLabel,
   TextField,
   Typography,
@@ -36,7 +37,7 @@ export interface SignUpForm {
 const SignUp: StatelessComponent<SignUpForm> = props => {
   return (
     <Form onSubmit={props.onSubmit}>
-      {({ handleSubmit, submitting }) => (
+      {({ handleSubmit, submitting, invalid }) => (
         <form autoComplete="off" onSubmit={handleSubmit}>
           <Flex itemGutter direction="column" className={styles.root}>
             <Flex direction="column">
@@ -74,10 +75,10 @@ const SignUp: StatelessComponent<SignUpForm> = props => {
                 {({ input, meta }) => (
                   <FormField>
                     <InputLabel>Username</InputLabel>
-                    <Typography variant="inputDescription">
+                    <InputDescription>
                       A unique identifier displayed on your comments. You may
                       use “_” and “.”
-                    </Typography>
+                    </InputDescription>
                     <TextField
                       name={input.name}
                       onChange={input.onChange}
@@ -101,9 +102,9 @@ const SignUp: StatelessComponent<SignUpForm> = props => {
                 {({ input, meta }) => (
                   <FormField>
                     <InputLabel>Password</InputLabel>
-                    <Typography variant="inputDescription">
+                    <InputDescription>
                       Must be at least 8 characters
-                    </Typography>
+                    </InputDescription>
                     <TextField
                       name={input.name}
                       onChange={input.onChange}
@@ -132,9 +133,9 @@ const SignUp: StatelessComponent<SignUpForm> = props => {
                 {({ input, meta }) => (
                   <FormField>
                     <InputLabel>Confirm Password</InputLabel>
-                    <Typography variant="inputDescription">
+                    <InputDescription>
                       Must be at least 8 characters
-                    </Typography>
+                    </InputDescription>
                     <TextField
                       name={input.name}
                       onChange={input.onChange}
diff --git a/src/core/client/stream/components/PostCommentForm.tsx b/src/core/client/stream/components/PostCommentForm.tsx
index 2cb9b6561..2efb47786 100644
--- a/src/core/client/stream/components/PostCommentForm.tsx
+++ b/src/core/client/stream/components/PostCommentForm.tsx
@@ -1,13 +1,11 @@
 import { Localized } from "fluent-react/compat";
-import * as React from "react";
-import { StatelessComponent } from "react";
+import React, { StatelessComponent } from "react";
 import { Field, Form } from "react-final-form";
-import PoweredBy from "./PoweredBy";
 import { OnSubmit } from "talk-framework/lib/form";
 import { required } from "talk-framework/lib/validation";
-import PoweredBy from "talk-stream/components/PoweredBy";
 import { Button, Typography } from "talk-ui/components";
 import * as styles from "./PostCommentForm.css";
+import PoweredBy from "./PoweredBy";
 
 interface FormProps {
   body: string;
@@ -58,7 +56,7 @@ const PostCommentForm: StatelessComponent<PostCommentFormProps> = props => (
             fullWidth
             size="large"
           >
-            Sign In and join the conversation
+            Sign in and join the conversation
           </Button>
         )}
       </form>
diff --git a/src/core/client/stream/components/PoweredBy.css b/src/core/client/stream/components/PoweredBy.css
deleted file mode 100644
index 25c884af5..000000000
--- a/src/core/client/stream/components/PoweredBy.css
+++ /dev/null
@@ -1,3 +0,0 @@
-.text {
-  font-size: calc(14rem / var(--rem-base));
-}
diff --git a/src/core/client/ui/components/InputDescription/InputDescription.mdx b/src/core/client/ui/components/InputDescription/InputDescription.mdx
index 3dc055085..c27a460be 100644
--- a/src/core/client/ui/components/InputDescription/InputDescription.mdx
+++ b/src/core/client/ui/components/InputDescription/InputDescription.mdx
@@ -1,36 +1,18 @@
 ---
-name: FormField
+name: InputDescription
 menu: UI Kit
 ---
 
 import { Playground, PropsTable } from 'docz'
-import FormField from './FormField'
-import { InputLabel, ValidationMessage, TextField, Typography, Flex, Button} from '../core/client/ui/components'
+import { InputDescription } from '../core/client/ui/components'
 
 # Flex
 
-`FormField` is to be used with Form Components `flexbox`.
-
-## Justify content
-<Playground>
-  <FormField>
-  </FormField>
-</Playground>
+`InputDescription` is to be used with Form Components.
 
 ## Align items
 <Playground>
   <Flex alignItems="center" itemGutter>
-    <Button variant="filled">Push Me</Button>
-    <Button variant="filled" size="small">Push Me</Button>
-    <Button variant="filled" size="large">Push Me</Button>
-  </Flex>
-</Playground>
-
-## Direction
-<Playground>
-  <Flex direction="column" itemGutter>
-    <Button variant="filled">Push Me</Button>
-    <Button variant="filled">Push Me</Button>
-    <Button variant="filled">Push Me</Button>
+    <InputDescription>This is a description</Button>
   </Flex>
 </Playground>
diff --git a/src/core/client/ui/components/InputDescription/InputDescription.tsx b/src/core/client/ui/components/InputDescription/InputDescription.tsx
index fe5b6dd7b..d36d5fe7a 100644
--- a/src/core/client/ui/components/InputDescription/InputDescription.tsx
+++ b/src/core/client/ui/components/InputDescription/InputDescription.tsx
@@ -1,43 +1,24 @@
-import cn from "classnames";
-import React, { ReactNode } from "react";
-import { StatelessComponent } from "react";
+import React, { ReactNode, StatelessComponent } from "react";
+import { Typography } from "talk-ui/components";
 
-import { withStyles } from "talk-ui/hocs";
-
-import * as styles from "./FormField.css";
-
-interface InnerProps {
+interface InputDescriptionProps {
   children: ReactNode;
-  classes: typeof styles;
   id?: string;
   className?: string;
-  itemGutter?: boolean | "half";
 }
 
-const FormField: StatelessComponent<InnerProps> = props => {
-  const { classes, className, children, itemGutter, ...rest } = props;
-
-  // TODO (bc): Use flex component once the extra div issue is solved.
+const InputDescription: StatelessComponent<InputDescriptionProps> = props => {
+  const { className, children, ...rest } = props;
   return (
-    <div
-      className={cn(
-        classes.root,
-        {
-          [classes.itemGutter]: itemGutter === true,
-          [classes.halfItemGutter]: itemGutter === "half",
-        },
-        className
-      )}
+    <Typography
+      variant="inputDescription"
+      color="textSecondary"
+      className={className}
       {...rest}
     >
       {children}
-    </div>
+    </Typography>
   );
 };
 
-FormField.defaultProps = {
-  itemGutter: true,
-};
-
-const enhanced = withStyles(styles)(FormField);
-export default enhanced;
+export default InputDescription;
diff --git a/src/core/client/ui/components/index.ts b/src/core/client/ui/components/index.ts
index 6b8e15d7f..76efab87c 100644
--- a/src/core/client/ui/components/index.ts
+++ b/src/core/client/ui/components/index.ts
@@ -15,3 +15,4 @@ export { default as CallOut } from "./CallOut";
 export { default as ClickOutside } from "./ClickOutside";
 export { default as Popup } from "./Popup";
 export { default as FormField } from "./FormField";
+export { default as InputDescription } from "./InputDescription";
diff --git a/src/core/client/ui/shared/typography.css b/src/core/client/ui/shared/typography.css
index 990004923..ba367cc44 100644
--- a/src/core/client/ui/shared/typography.css
+++ b/src/core/client/ui/shared/typography.css
@@ -137,9 +137,9 @@
   color: var(--palette-common-black);
   font-family: var(--font-family-sans-serif);
   font-weight: var(--font-weight-medium);
-  font-size: calc(16rem / var(--rem-base));
-  line-height: calc(16em / 16);
-  letter-spacing: calc(-0.1em / 16);
+  font-size: calc(14rem / var(--rem-base));
+  line-height: calc(20em / 16);
+  letter-spacing: calc(0.2em / 16);
 }
 
 .inputText {
@@ -163,7 +163,7 @@
 .inputDescription {
   font-size: calc(14rem / var(--rem-base));
   font-weight: var(--font-weight-regular);
-  font-family: var(--font-family);
+  font-family: var(--font-family-sans-serif);
   line-height: calc(18em / 16);
   letter-spacing: calc(0.2em / 16);
   color: var(--palette-text-secondary);

From b4480f4bf7a8dccf027fa23c213d836a1ec2af51 Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Mon, 13 Aug 2018 13:25:51 -0300
Subject: [PATCH 25/81] Adding SignUp Form Functionality

---
 src/core/client/auth/components/SignIn.tsx    | 139 +++++++++++++-----
 src/core/client/auth/components/SignUp.tsx    |   2 +-
 .../auth/containers/SignInContainer.tsx       |  35 ++++-
 3 files changed, 131 insertions(+), 45 deletions(-)

diff --git a/src/core/client/auth/components/SignIn.tsx b/src/core/client/auth/components/SignIn.tsx
index 9244aa2af..f1b94b61e 100644
--- a/src/core/client/auth/components/SignIn.tsx
+++ b/src/core/client/auth/components/SignIn.tsx
@@ -1,6 +1,13 @@
-import * as React from "react";
-import { StatelessComponent } from "react";
-import * as styles from "./SignIn.css";
+import React, { StatelessComponent } from "react";
+import { Field, Form } from "react-final-form";
+import { OnSubmit } from "talk-framework/lib/form";
+
+import {
+  composeValidators,
+  required,
+  validateEmail,
+  validatePassword,
+} from "talk-framework/lib/validation";
 
 import {
   Button,
@@ -9,43 +16,101 @@ import {
   InputLabel,
   TextField,
   Typography,
+  ValidationMessage,
 } from "talk-ui/components";
 
-const SignIn: StatelessComponent = props => {
+import * as styles from "./SignIn.css";
+
+interface FormProps {
+  email: string;
+  password: string;
+}
+
+export interface SignInForm {
+  onSubmit: OnSubmit<FormProps>;
+}
+
+const SignIn: StatelessComponent<SignInForm> = props => {
   return (
-    <Flex itemGutter direction="column" className={styles.root}>
-      <Typography variant="heading1" align="center">
-        Sign in to join the conversation
-      </Typography>
-      <FormField>
-        <InputLabel>Email Address</InputLabel>
-        <TextField />
-      </FormField>
-      <FormField>
-        <InputLabel>Password</InputLabel>
-        <TextField />
-        <span className={styles.forgotPassword}>
-          <Button variant="underlined" color="primary" size="small">
-            Forgot your password?
-          </Button>
-        </span>
-      </FormField>
-      <div className={styles.footer}>
-        <Button variant="filled" color="primary" size="large" fullWidth>
-          Sign in and join the conversation
-        </Button>
-        <Flex
-          itemGutter="half"
-          justifyContent="center"
-          className={styles.subFooter}
-        >
-          <Typography>Don't have an account?</Typography>
-          <Button variant="underlined" size="small" color="primary">
-            Sign Up
-          </Button>
-        </Flex>
-      </div>
-    </Flex>
+    <Form onSubmit={props.onSubmit}>
+      {({ handleSubmit, submitting }) => (
+        <form autoComplete="off" onSubmit={handleSubmit}>
+          <Flex itemGutter direction="column" className={styles.root}>
+            <Typography variant="heading1" align="center">
+              Sign in to join the conversation
+            </Typography>
+
+            <Field
+              name="email"
+              validate={composeValidators(required, validateEmail)}
+            >
+              {({ input, meta }) => (
+                <FormField>
+                  <InputLabel>Email Address</InputLabel>
+                  <TextField
+                    name={input.name}
+                    onChange={input.onChange}
+                    value={input.value}
+                    placeholder="Email Address"
+                  />
+                  {meta.touched &&
+                    (meta.error || meta.submitError) && (
+                      <ValidationMessage>
+                        {meta.error || meta.submitError}
+                      </ValidationMessage>
+                    )}
+                </FormField>
+              )}
+            </Field>
+
+            <Field
+              name="password"
+              validate={composeValidators(required, validatePassword)}
+            >
+              {({ input, meta }) => (
+                <FormField>
+                  <InputLabel>Password</InputLabel>
+                  <TextField
+                    name={input.name}
+                    onChange={input.onChange}
+                    value={input.value}
+                    placeholder="Password"
+                    type="password"
+                  />
+                  {meta.touched &&
+                    (meta.error || meta.submitError) && (
+                      <ValidationMessage>
+                        {meta.error || meta.submitError}
+                      </ValidationMessage>
+                    )}
+                  <span className={styles.forgotPassword}>
+                    <Button variant="underlined" color="primary" size="small">
+                      Forgot your password?
+                    </Button>
+                  </span>
+                </FormField>
+              )}
+            </Field>
+
+            <div className={styles.footer}>
+              <Button variant="filled" color="primary" size="large" fullWidth>
+                Sign in and join the conversation
+              </Button>
+              <Flex
+                itemGutter="half"
+                justifyContent="center"
+                className={styles.subFooter}
+              >
+                <Typography>Don't have an account?</Typography>
+                <Button variant="underlined" size="small" color="primary">
+                  Sign Up
+                </Button>
+              </Flex>
+            </div>
+          </Flex>
+        </form>
+      )}
+    </Form>
   );
 };
 
diff --git a/src/core/client/auth/components/SignUp.tsx b/src/core/client/auth/components/SignUp.tsx
index 76f7d952a..7924ff5e2 100644
--- a/src/core/client/auth/components/SignUp.tsx
+++ b/src/core/client/auth/components/SignUp.tsx
@@ -37,7 +37,7 @@ export interface SignUpForm {
 const SignUp: StatelessComponent<SignUpForm> = props => {
   return (
     <Form onSubmit={props.onSubmit}>
-      {({ handleSubmit, submitting, invalid }) => (
+      {({ handleSubmit, submitting }) => (
         <form autoComplete="off" onSubmit={handleSubmit}>
           <Flex itemGutter direction="column" className={styles.root}>
             <Flex direction="column">
diff --git a/src/core/client/auth/containers/SignInContainer.tsx b/src/core/client/auth/containers/SignInContainer.tsx
index aabf4641d..fa4fa2d80 100644
--- a/src/core/client/auth/containers/SignInContainer.tsx
+++ b/src/core/client/auth/containers/SignInContainer.tsx
@@ -1,10 +1,31 @@
-import * as React from "react";
-import { StatelessComponent } from "react";
+import { BadUserInputError } from "talk-framework/lib/errors";
+import SignIn, { SignInForm } from "../components/SignIn";
 
-import SignIn from "../components/SignIn";
+import React, { Component } from "react";
+import { SignInMutation, withSignInMutation } from "../mutations";
 
-const SignInContainer: StatelessComponent = () => {
-  return <SignIn />;
-};
+interface SignInContainerProps {
+  signIn: SignInMutation;
+}
 
-export default SignInContainer;
+class SignInContainer extends Component<SignInContainerProps> {
+  private onSubmit: SignInForm["onSubmit"] = async (input, form) => {
+    try {
+      await this.props.signIn(input);
+      form.reset();
+    } catch (error) {
+      if (error instanceof BadUserInputError) {
+        return error.invalidArgsLocalized;
+      }
+      // tslint:disable-next-line:no-console
+      console.error(error);
+    }
+    return undefined;
+  };
+  public render() {
+    return <SignIn onSubmit={this.onSubmit} />;
+  }
+}
+
+const enhanced = withSignInMutation(SignInContainer);
+export default enhanced;

From a94e56d45fb2766a7f22f8927b302c0feaa94623 Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Mon, 13 Aug 2018 13:37:18 -0300
Subject: [PATCH 26/81] Adding form validations for Forgot Password,
 ResetPassword, and more

---
 .../client/auth/components/ForgotPassword.tsx |  82 ++++++++----
 .../client/auth/components/ResetPassword.tsx  | 118 ++++++++++++++----
 .../containers/ForgotPasswordContainer.tsx    |  13 +-
 .../containers/ResetPasswordContainer.tsx     |  13 +-
 4 files changed, 171 insertions(+), 55 deletions(-)

diff --git a/src/core/client/auth/components/ForgotPassword.tsx b/src/core/client/auth/components/ForgotPassword.tsx
index 4c06dcbc4..e99230c9e 100644
--- a/src/core/client/auth/components/ForgotPassword.tsx
+++ b/src/core/client/auth/components/ForgotPassword.tsx
@@ -1,7 +1,14 @@
-import * as React from "react";
-import { StatelessComponent } from "react";
+import React, { StatelessComponent } from "react";
+import { Field, Form } from "react-final-form";
+import { OnSubmit } from "talk-framework/lib/form";
 import * as styles from "./SignIn.css";
 
+import {
+  composeValidators,
+  required,
+  validateEmail,
+} from "talk-framework/lib/validation";
+
 import {
   Button,
   Flex,
@@ -9,28 +16,61 @@ import {
   InputLabel,
   TextField,
   Typography,
+  ValidationMessage,
 } from "talk-ui/components";
 
-const ForgotPassword: StatelessComponent = props => {
+interface FormProps {
+  email: string;
+}
+
+export interface ForgotPasswordForm {
+  onSubmit: OnSubmit<FormProps>;
+}
+
+const ForgotPassword: StatelessComponent<ForgotPasswordForm> = props => {
   return (
-    <Flex itemGutter direction="column" className={styles.root}>
-      <Typography variant="heading1" align="center">
-        Forgot Password
-      </Typography>
-      <Typography variant="bodyCopy">
-        Enter your email address below and we will send you a link to reset your
-        password.
-      </Typography>
-      <FormField>
-        <InputLabel>Email Address</InputLabel>
-        <TextField />
-      </FormField>
-      <div className={styles.footer}>
-        <Button variant="filled" color="primary" size="large" fullWidth>
-          Send Email
-        </Button>
-      </div>
-    </Flex>
+    <Form onSubmit={props.onSubmit}>
+      {({ handleSubmit }) => (
+        <form autoComplete="off" onSubmit={handleSubmit}>
+          <Flex itemGutter direction="column" className={styles.root}>
+            <Typography variant="heading1" align="center">
+              Forgot Password
+            </Typography>
+            <Typography variant="bodyCopy">
+              Enter your email address below and we will send you a link to
+              reset your password.
+            </Typography>
+            <Field
+              name="email"
+              validate={composeValidators(required, validateEmail)}
+            >
+              {({ input, meta }) => (
+                <FormField>
+                  <InputLabel>Email Address</InputLabel>
+                  <TextField
+                    name={input.name}
+                    onChange={input.onChange}
+                    value={input.value}
+                    placeholder="Email Address"
+                  />
+                  {meta.touched &&
+                    (meta.error || meta.submitError) && (
+                      <ValidationMessage>
+                        {meta.error || meta.submitError}
+                      </ValidationMessage>
+                    )}
+                </FormField>
+              )}
+            </Field>
+            <div className={styles.footer}>
+              <Button variant="filled" color="primary" size="large" fullWidth>
+                Send Email
+              </Button>
+            </div>
+          </Flex>
+        </form>
+      )}
+    </Form>
   );
 };
 
diff --git a/src/core/client/auth/components/ResetPassword.tsx b/src/core/client/auth/components/ResetPassword.tsx
index 5f000d091..3ca37cf80 100644
--- a/src/core/client/auth/components/ResetPassword.tsx
+++ b/src/core/client/auth/components/ResetPassword.tsx
@@ -1,37 +1,111 @@
-import * as React from "react";
-import { StatelessComponent } from "react";
+import React, { StatelessComponent } from "react";
+import { Field, Form } from "react-final-form";
+import { OnSubmit } from "talk-framework/lib/form";
 import * as styles from "./SignIn.css";
 
+import {
+  composeValidators,
+  required,
+  validateEqualPasswords,
+  validatePassword,
+} from "talk-framework/lib/validation";
+
 import {
   Button,
   Flex,
   FormField,
+  InputDescription,
   InputLabel,
   TextField,
   Typography,
+  ValidationMessage,
 } from "talk-ui/components";
 
-const ResetPassword: StatelessComponent = props => {
+interface FormProps {
+  password: string;
+  confirmPassword: string;
+}
+
+export interface ResetPasswordForm {
+  onSubmit: OnSubmit<FormProps>;
+}
+
+const ResetPassword: StatelessComponent<ResetPasswordForm> = props => {
   return (
-    <Flex itemGutter direction="column" className={styles.root}>
-      <Typography variant="heading1" align="center">
-        Reset Password
-      </Typography>
-      <FormField>
-        <InputLabel>Password</InputLabel>
-        <Typography>Must be at least 8 characters</Typography>
-        <TextField />
-      </FormField>
-      <FormField>
-        <InputLabel>Confirm Password</InputLabel>
-        <TextField />
-      </FormField>
-      <div className={styles.footer}>
-        <Button variant="filled" color="primary" size="large" fullWidth>
-          Reset Password
-        </Button>
-      </div>
-    </Flex>
+    <Form onSubmit={props.onSubmit}>
+      {({ handleSubmit }) => (
+        <form autoComplete="off" onSubmit={handleSubmit}>
+          <Flex itemGutter direction="column" className={styles.root}>
+            <Typography variant="heading1" align="center">
+              Reset Password
+            </Typography>
+            <Field
+              name="password"
+              validate={composeValidators(required, validatePassword)}
+            >
+              {({ input, meta }) => (
+                <FormField>
+                  <InputLabel>Password</InputLabel>
+                  <InputDescription>
+                    Must be at least 8 characters
+                  </InputDescription>
+                  <TextField
+                    name={input.name}
+                    onChange={input.onChange}
+                    value={input.value}
+                    placeholder="Password"
+                    type="password"
+                  />
+                  {meta.touched &&
+                    (meta.error || meta.submitError) && (
+                      <ValidationMessage>
+                        {meta.error || meta.submitError}
+                      </ValidationMessage>
+                    )}
+                </FormField>
+              )}
+            </Field>
+
+            <Field
+              name="confirmPassword"
+              validate={composeValidators(
+                required,
+                validatePassword,
+                validateEqualPasswords
+              )}
+            >
+              {({ input, meta }) => (
+                <FormField>
+                  <InputLabel>Confirm Password</InputLabel>
+                  <InputDescription>
+                    Must be at least 8 characters
+                  </InputDescription>
+                  <TextField
+                    name={input.name}
+                    onChange={input.onChange}
+                    value={input.value}
+                    placeholder="Confirm Password"
+                    type="password"
+                  />
+                  {meta.touched &&
+                    (meta.error || meta.submitError) && (
+                      <ValidationMessage>
+                        {meta.error || meta.submitError}
+                      </ValidationMessage>
+                    )}
+                </FormField>
+              )}
+            </Field>
+
+            <div className={styles.footer}>
+              <Button variant="filled" color="primary" size="large" fullWidth>
+                Reset Password
+              </Button>
+            </div>
+          </Flex>
+        </form>
+      )}
+    </Form>
   );
 };
 
diff --git a/src/core/client/auth/containers/ForgotPasswordContainer.tsx b/src/core/client/auth/containers/ForgotPasswordContainer.tsx
index b364e7e9e..37b842160 100644
--- a/src/core/client/auth/containers/ForgotPasswordContainer.tsx
+++ b/src/core/client/auth/containers/ForgotPasswordContainer.tsx
@@ -1,10 +1,11 @@
-import * as React from "react";
-import { StatelessComponent } from "react";
-
+import React, { Component } from "react";
 import ForgotPassword from "../components/ForgotPassword";
 
-const ForgotPasswordContainer: StatelessComponent = () => {
-  return <ForgotPassword />;
-};
+class ForgotPasswordContainer extends Component {
+  public render() {
+    // tslint:disable-next-line:no-empty
+    return <ForgotPassword onSubmit={() => {}} />;
+  }
+}
 
 export default ForgotPasswordContainer;
diff --git a/src/core/client/auth/containers/ResetPasswordContainer.tsx b/src/core/client/auth/containers/ResetPasswordContainer.tsx
index 6dab0eef1..cfca96d9d 100644
--- a/src/core/client/auth/containers/ResetPasswordContainer.tsx
+++ b/src/core/client/auth/containers/ResetPasswordContainer.tsx
@@ -1,10 +1,11 @@
-import * as React from "react";
-import { StatelessComponent } from "react";
-
+import React, { Component } from "react";
 import ResetPassword from "../components/ResetPassword";
 
-const ResetPasswordContainer: StatelessComponent = () => {
-  return <ResetPassword />;
-};
+class ResetPasswordContainer extends Component {
+  public render() {
+    // tslint:disable-next-line:no-empty
+    return <ResetPassword onSubmit={() => {}} />;
+  }
+}
 
 export default ResetPasswordContainer;

From c40e5c58b205be83f84cc50fedb5195b68413787 Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Mon, 13 Aug 2018 13:52:18 -0300
Subject: [PATCH 27/81] Adding inner routing between views

---
 src/core/client/auth/components/SignIn.tsx    | 23 +++++++++++++++----
 src/core/client/auth/components/SignUp.tsx    | 14 ++++++++---
 .../auth/containers/SignInContainer.tsx       | 22 ++++++++++++++----
 .../auth/containers/SignUpContainer.tsx       | 21 +++++++++++++----
 4 files changed, 63 insertions(+), 17 deletions(-)

diff --git a/src/core/client/auth/components/SignIn.tsx b/src/core/client/auth/components/SignIn.tsx
index f1b94b61e..f0e88fdd4 100644
--- a/src/core/client/auth/components/SignIn.tsx
+++ b/src/core/client/auth/components/SignIn.tsx
@@ -1,14 +1,12 @@
 import React, { StatelessComponent } from "react";
 import { Field, Form } from "react-final-form";
 import { OnSubmit } from "talk-framework/lib/form";
-
 import {
   composeValidators,
   required,
   validateEmail,
   validatePassword,
 } from "talk-framework/lib/validation";
-
 import {
   Button,
   Flex,
@@ -18,7 +16,7 @@ import {
   Typography,
   ValidationMessage,
 } from "talk-ui/components";
-
+import { View } from "../containers/SignInContainer";
 import * as styles from "./SignIn.css";
 
 interface FormProps {
@@ -28,6 +26,7 @@ interface FormProps {
 
 export interface SignInForm {
   onSubmit: OnSubmit<FormProps>;
+  setView: (view: View) => void;
 }
 
 const SignIn: StatelessComponent<SignInForm> = props => {
@@ -84,7 +83,14 @@ const SignIn: StatelessComponent<SignInForm> = props => {
                       </ValidationMessage>
                     )}
                   <span className={styles.forgotPassword}>
-                    <Button variant="underlined" color="primary" size="small">
+                    <Button
+                      variant="underlined"
+                      color="primary"
+                      size="small"
+                      onClick={() => {
+                        props.setView("FORGOT_PASSWORD");
+                      }}
+                    >
                       Forgot your password?
                     </Button>
                   </span>
@@ -102,7 +108,14 @@ const SignIn: StatelessComponent<SignInForm> = props => {
                 className={styles.subFooter}
               >
                 <Typography>Don't have an account?</Typography>
-                <Button variant="underlined" size="small" color="primary">
+                <Button
+                  variant="underlined"
+                  size="small"
+                  color="primary"
+                  onClick={() => {
+                    props.setView("SIGN_UP");
+                  }}
+                >
                   Sign Up
                 </Button>
               </Flex>
diff --git a/src/core/client/auth/components/SignUp.tsx b/src/core/client/auth/components/SignUp.tsx
index 7924ff5e2..5e4b913e6 100644
--- a/src/core/client/auth/components/SignUp.tsx
+++ b/src/core/client/auth/components/SignUp.tsx
@@ -10,8 +10,6 @@ import {
   validatePassword,
   validateUsername,
 } from "talk-framework/lib/validation";
-import * as styles from "./SignUp.css";
-
 import {
   Button,
   Flex,
@@ -22,6 +20,8 @@ import {
   Typography,
   ValidationMessage,
 } from "talk-ui/components";
+import { View } from "../containers/SignUpContainer";
+import * as styles from "./SignUp.css";
 
 interface FormProps {
   email: string;
@@ -32,6 +32,7 @@ interface FormProps {
 
 export interface SignUpForm {
   onSubmit: OnSubmit<FormProps>;
+  setView: (view: View) => void;
 }
 
 const SignUp: StatelessComponent<SignUpForm> = props => {
@@ -163,7 +164,14 @@ const SignUp: StatelessComponent<SignUpForm> = props => {
                 className={styles.subFooter}
               >
                 <Typography>Already have an account?</Typography>
-                <Button variant="underlined" size="small" color="primary">
+                <Button
+                  variant="underlined"
+                  size="small"
+                  color="primary"
+                  onClick={() => {
+                    props.setView("SIGN_IN");
+                  }}
+                >
                   Sign In
                 </Button>
               </Flex>
diff --git a/src/core/client/auth/containers/SignInContainer.tsx b/src/core/client/auth/containers/SignInContainer.tsx
index fa4fa2d80..3b9892dbe 100644
--- a/src/core/client/auth/containers/SignInContainer.tsx
+++ b/src/core/client/auth/containers/SignInContainer.tsx
@@ -1,14 +1,26 @@
+import React, { Component } from "react";
 import { BadUserInputError } from "talk-framework/lib/errors";
 import SignIn, { SignInForm } from "../components/SignIn";
-
-import React, { Component } from "react";
-import { SignInMutation, withSignInMutation } from "../mutations";
+import {
+  SetViewMutation,
+  SignInMutation,
+  withSetViewMutation,
+  withSignInMutation,
+} from "../mutations";
 
 interface SignInContainerProps {
   signIn: SignInMutation;
+  setView: SetViewMutation;
 }
 
+export type View = "SIGN_UP" | "FORGOT_PASSWORD";
+
 class SignInContainer extends Component<SignInContainerProps> {
+  private setView = (view: View) => {
+    this.props.setView({
+      view,
+    });
+  };
   private onSubmit: SignInForm["onSubmit"] = async (input, form) => {
     try {
       await this.props.signIn(input);
@@ -23,9 +35,9 @@ class SignInContainer extends Component<SignInContainerProps> {
     return undefined;
   };
   public render() {
-    return <SignIn onSubmit={this.onSubmit} />;
+    return <SignIn onSubmit={this.onSubmit} setView={this.setView} />;
   }
 }
 
-const enhanced = withSignInMutation(SignInContainer);
+const enhanced = withSetViewMutation(withSignInMutation(SignInContainer));
 export default enhanced;
diff --git a/src/core/client/auth/containers/SignUpContainer.tsx b/src/core/client/auth/containers/SignUpContainer.tsx
index eac0f8d14..6cbe4bf02 100644
--- a/src/core/client/auth/containers/SignUpContainer.tsx
+++ b/src/core/client/auth/containers/SignUpContainer.tsx
@@ -1,14 +1,27 @@
+import React, { Component } from "react";
 import { BadUserInputError } from "talk-framework/lib/errors";
 import SignUp, { SignUpForm } from "../components/SignUp";
 
-import React, { Component } from "react";
-import { SignUpMutation, withSignUpMutation } from "../mutations";
+import {
+  SetViewMutation,
+  SignUpMutation,
+  withSetViewMutation,
+  withSignUpMutation,
+} from "../mutations";
 
 interface SignUpContainerProps {
   signUp: SignUpMutation;
+  setView: SetViewMutation;
 }
 
+export type View = "SIGN_IN";
+
 class SignUpContainer extends Component<SignUpContainerProps> {
+  private setView = (view: View) => {
+    this.props.setView({
+      view,
+    });
+  };
   private onSubmit: SignUpForm["onSubmit"] = async (input, form) => {
     try {
       await this.props.signUp(input);
@@ -23,9 +36,9 @@ class SignUpContainer extends Component<SignUpContainerProps> {
     return undefined;
   };
   public render() {
-    return <SignUp onSubmit={this.onSubmit} />;
+    return <SignUp onSubmit={this.onSubmit} setView={this.setView} />;
   }
 }
 
-const enhanced = withSignUpMutation(SignUpContainer);
+const enhanced = withSetViewMutation(withSignUpMutation(SignUpContainer));
 export default enhanced;

From 7c5ff1bcb121e7179177ea183ed48cb97bea4009 Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Tue, 14 Aug 2018 13:11:35 -0300
Subject: [PATCH 28/81] Able to Sign In

---
 src/core/client/stream/components/Stream.tsx  |  5 +++-
 .../components/UserBoxAuthenticated.tsx       |  4 ++-
 .../stream/containers/StreamContainer.tsx     |  3 ++
 .../stream/containers/UserBoxContainer.tsx    | 28 +++++++++++++++++--
 .../client/stream/queries/StreamQuery.tsx     |  8 +++++-
 5 files changed, 42 insertions(+), 6 deletions(-)

diff --git a/src/core/client/stream/components/Stream.tsx b/src/core/client/stream/components/Stream.tsx
index 7f1ea183c..f171acb86 100644
--- a/src/core/client/stream/components/Stream.tsx
+++ b/src/core/client/stream/components/Stream.tsx
@@ -10,6 +10,8 @@ import ReplyListContainer from "../containers/ReplyListContainer";
 import UserBoxContainer from "../containers/UserBoxContainer";
 import * as styles from "./Stream.css";
 
+import { User } from "../containers/UserBoxContainer";
+
 export interface StreamProps {
   assetID: string;
   isClosed?: boolean;
@@ -17,12 +19,13 @@ export interface StreamProps {
   onLoadMore?: () => void;
   hasMore?: boolean;
   disableLoadMore?: boolean;
+  user: User | null;
 }
 
 const Stream: StatelessComponent<StreamProps> = props => {
   return (
     <Flex className={styles.root} direction="column" itemGutter>
-      <UserBoxContainer />
+      <UserBoxContainer user={props.user} />
       <PostCommentFormContainer assetID={props.assetID} />
       <Flex
         direction="column"
diff --git a/src/core/client/stream/components/UserBoxAuthenticated.tsx b/src/core/client/stream/components/UserBoxAuthenticated.tsx
index 1b692ba9b..daa8fcb35 100644
--- a/src/core/client/stream/components/UserBoxAuthenticated.tsx
+++ b/src/core/client/stream/components/UserBoxAuthenticated.tsx
@@ -4,10 +4,12 @@ import React, { StatelessComponent } from "react";
 import { Button, Flex, Typography } from "talk-ui/components";
 
 import MatchMedia from "talk-ui/components/MatchMedia";
+import { User } from "../containers/UserBoxContainer";
 import * as styles from "./UserBoxAuthenticated.css";
 
 export interface UserBoxUnauthenticatedProps {
   onSignOut: () => void;
+  user: User;
 }
 
 const UserBoxAuthenticated: StatelessComponent<
@@ -23,7 +25,7 @@ const UserBoxAuthenticated: StatelessComponent<
             </Typography>
           </Localized>
           <Typography variant="bodyCopyBold" component="span">
-            okbel
+            {props.user.username}
           </Typography>
         </MatchMedia>
       </Flex>
diff --git a/src/core/client/stream/containers/StreamContainer.tsx b/src/core/client/stream/containers/StreamContainer.tsx
index d81319deb..1a185c902 100644
--- a/src/core/client/stream/containers/StreamContainer.tsx
+++ b/src/core/client/stream/containers/StreamContainer.tsx
@@ -10,9 +10,11 @@ import {
 } from "talk-stream/__generated__/StreamContainerPaginationQuery.graphql";
 
 import Stream from "../components/Stream";
+import { User } from "../containers/UserBoxContainer";
 
 interface InnerProps {
   asset: Data;
+  user: User | null;
   relay: RelayPaginationProp;
 }
 
@@ -31,6 +33,7 @@ export class StreamContainer extends React.Component<InnerProps> {
         onLoadMore={this.loadMore}
         hasMore={this.props.relay.hasMore()}
         disableLoadMore={this.state.disableLoadMore}
+        user={this.props.user}
       />
     );
   }
diff --git a/src/core/client/stream/containers/UserBoxContainer.tsx b/src/core/client/stream/containers/UserBoxContainer.tsx
index a1f2bb87b..b9896e97b 100644
--- a/src/core/client/stream/containers/UserBoxContainer.tsx
+++ b/src/core/client/stream/containers/UserBoxContainer.tsx
@@ -1,6 +1,5 @@
 import * as React from "react";
 import { Component } from "react";
-
 import { graphql, withLocalStateContainer } from "talk-framework/lib/relay";
 import { UserBoxContainerLocal as Local } from "talk-stream/__generated__/UserBoxContainerLocal.graphql";
 import {
@@ -11,11 +10,26 @@ import {
 } from "talk-stream/mutations";
 import { Popup } from "talk-ui/components";
 
-// import UserBoxAuthenticated from "../components/UserBoxAuthenticated";
+import UserBoxAuthenticated from "../components/UserBoxAuthenticated";
 import UserBoxUnauthenticated from "../components/UserBoxUnauthenticated";
 
+export type USER_ROLE =
+  | "ADMIN"
+  | "COMMENTER"
+  | "MODERATOR"
+  | "STAFF"
+  | "%future added value";
+
+export interface User {
+  id?: string;
+  username?: string | null;
+  displayName?: string | null;
+  role?: USER_ROLE;
+}
+
 interface InnerProps {
   local: Local;
+  user: User | null;
   showAuthPopup: ShowAuthPopupMutation;
   setAuthPopupState: SetAuthPopupStateMutation;
 }
@@ -32,7 +46,15 @@ export class UserBoxContainer extends Component<InnerProps> {
       local: {
         authPopup: { open, focus, view },
       },
+      user,
     } = this.props;
+
+    if (user) {
+      return (
+        <UserBoxAuthenticated onSignOut={this.handleRegister} user={user} />
+      );
+    }
+
     return (
       <>
         <Popup
@@ -45,7 +67,6 @@ export class UserBoxContainer extends Component<InnerProps> {
           onBlur={this.handleBlur}
           onClose={this.handleClose}
         />
-        {/* <UserBoxAuthenticated onSignOut={this.handleRegister} /> */}
         <UserBoxUnauthenticated
           onSignIn={this.handleSignIn}
           onRegister={this.handleRegister}
@@ -71,4 +92,5 @@ const enhanced = withSetAuthPopupStateMutation(
   )
 );
 
+// TODO: (bc) Add fragment here if composing is doable.
 export default enhanced;
diff --git a/src/core/client/stream/queries/StreamQuery.tsx b/src/core/client/stream/queries/StreamQuery.tsx
index 40d57387e..f5df60cbe 100644
--- a/src/core/client/stream/queries/StreamQuery.tsx
+++ b/src/core/client/stream/queries/StreamQuery.tsx
@@ -24,7 +24,7 @@ export const render = ({ error, props }: ReadyState<StreamQueryResponse>) => {
     return <div>{error.message}</div>;
   }
   if (props) {
-    return <StreamContainer asset={props.asset} />;
+    return <StreamContainer asset={props.asset} user={props.me} />;
   }
   return <div>Loading</div>;
 };
@@ -38,6 +38,12 @@ const StreamQuery: StatelessComponent<InnerProps> = ({
         asset(id: $assetID) {
           ...StreamContainer_asset
         }
+        me {
+          id
+          username
+          displayName
+          role
+        }
       }
     `}
     variables={{

From 8e9ac0748e98efc0d7f0b9c1ff467e9fe6112e0a Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Wed, 15 Aug 2018 12:05:38 -0300
Subject: [PATCH 29/81] Working signin and comment

---
 src/core/client/stream/components/Stream.tsx              | 5 ++++-
 .../client/stream/containers/PostCommentFormContainer.tsx | 8 +++++++-
 src/core/client/stream/queries/StreamQuery.tsx            | 2 ++
 3 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/src/core/client/stream/components/Stream.tsx b/src/core/client/stream/components/Stream.tsx
index f171acb86..3d113df44 100644
--- a/src/core/client/stream/components/Stream.tsx
+++ b/src/core/client/stream/components/Stream.tsx
@@ -26,7 +26,10 @@ const Stream: StatelessComponent<StreamProps> = props => {
   return (
     <Flex className={styles.root} direction="column" itemGutter>
       <UserBoxContainer user={props.user} />
-      <PostCommentFormContainer assetID={props.assetID} />
+      <PostCommentFormContainer
+        assetID={props.assetID}
+        signedIn={!!props.user}
+      />
       <Flex
         direction="column"
         id="talk-comments-stream-log"
diff --git a/src/core/client/stream/containers/PostCommentFormContainer.tsx b/src/core/client/stream/containers/PostCommentFormContainer.tsx
index 0a7e45ccb..c88aaf43c 100644
--- a/src/core/client/stream/containers/PostCommentFormContainer.tsx
+++ b/src/core/client/stream/containers/PostCommentFormContainer.tsx
@@ -11,6 +11,7 @@ import { CreateCommentMutation, withCreateCommentMutation } from "../mutations";
 interface InnerProps {
   createComment: CreateCommentMutation;
   assetID: string;
+  signedIn: boolean;
 }
 
 class PostCommentFormContainer extends Component<InnerProps> {
@@ -31,7 +32,12 @@ class PostCommentFormContainer extends Component<InnerProps> {
     return undefined;
   };
   public render() {
-    return <PostCommentForm onSubmit={this.onSubmit} signedIn={false} />;
+    return (
+      <PostCommentForm
+        onSubmit={this.onSubmit}
+        signedIn={this.props.signedIn}
+      />
+    );
   }
 }
 
diff --git a/src/core/client/stream/queries/StreamQuery.tsx b/src/core/client/stream/queries/StreamQuery.tsx
index f5df60cbe..f6ad272bb 100644
--- a/src/core/client/stream/queries/StreamQuery.tsx
+++ b/src/core/client/stream/queries/StreamQuery.tsx
@@ -23,9 +23,11 @@ export const render = ({ error, props }: ReadyState<StreamQueryResponse>) => {
   if (error) {
     return <div>{error.message}</div>;
   }
+
   if (props) {
     return <StreamContainer asset={props.asset} user={props.me} />;
   }
+
   return <div>Loading</div>;
 };
 

From 551ce1521c24b879aca51aac0d9304aca96c57f7 Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Wed, 15 Aug 2018 13:12:19 -0300
Subject: [PATCH 30/81] Progress

---
 .../client/auth/mutations/SignOffMutation.ts  | 14 +++++++++
 src/core/client/auth/mutations/index.ts       |  1 +
 src/core/client/framework/lib/rest.ts         |  2 +-
 src/core/client/framework/rest/index.ts       |  1 +
 src/core/client/framework/rest/signOff.ts     |  7 +++++
 .../components/UserBoxAuthenticated.tsx       |  2 +-
 .../components/UserBoxUnauthenticated.tsx     |  1 +
 .../UserBoxAuthenticatedContainer.tsx         | 29 +++++++++++++++++++
 .../stream/containers/UserBoxContainer.tsx    |  4 +--
 9 files changed, 57 insertions(+), 4 deletions(-)
 create mode 100644 src/core/client/auth/mutations/SignOffMutation.ts
 create mode 100644 src/core/client/framework/rest/signOff.ts
 create mode 100644 src/core/client/stream/containers/UserBoxAuthenticatedContainer.tsx

diff --git a/src/core/client/auth/mutations/SignOffMutation.ts b/src/core/client/auth/mutations/SignOffMutation.ts
new file mode 100644
index 000000000..68ab26d0d
--- /dev/null
+++ b/src/core/client/auth/mutations/SignOffMutation.ts
@@ -0,0 +1,14 @@
+import { Environment } from "relay-runtime";
+
+import { TalkContext } from "talk-framework/lib/bootstrap";
+import { createMutationContainer } from "talk-framework/lib/relay";
+import { signOff } from "talk-framework/rest";
+
+export async function commit(
+  environment: Environment,
+  { rest, postMessage }: TalkContext
+) {
+  signOff(rest);
+}
+
+export const withSignOffMutation = createMutationContainer("signOff", commit);
diff --git a/src/core/client/auth/mutations/index.ts b/src/core/client/auth/mutations/index.ts
index 46e02df95..f6fe1b2f7 100644
--- a/src/core/client/auth/mutations/index.ts
+++ b/src/core/client/auth/mutations/index.ts
@@ -1,3 +1,4 @@
 export { withSetViewMutation, SetViewMutation } from "./SetViewMutation";
 export { withSignInMutation, SignInMutation } from "./SignInMutation";
 export { withSignUpMutation, SignUpMutation } from "./SignUpMutation";
+export { withSignOffMutation } from "./SignOffMutation";
diff --git a/src/core/client/framework/lib/rest.ts b/src/core/client/framework/lib/rest.ts
index 6ba52b958..790465798 100644
--- a/src/core/client/framework/lib/rest.ts
+++ b/src/core/client/framework/lib/rest.ts
@@ -32,7 +32,7 @@ const handleResp = (res: Response) => {
   }
 };
 
-type PartialRequestInit = Overwrite<Partial<RequestInit>, { body: any }>;
+type PartialRequestInit = Overwrite<Partial<RequestInit>, { body?: any }>;
 
 export class RestClient {
   public readonly uri: string;
diff --git a/src/core/client/framework/rest/index.ts b/src/core/client/framework/rest/index.ts
index 0b3032bb5..7216d255f 100644
--- a/src/core/client/framework/rest/index.ts
+++ b/src/core/client/framework/rest/index.ts
@@ -1,2 +1,3 @@
 export { default as signIn, SignInInput } from "./signIn";
 export { default as signUp, SignUpInput } from "./signUp";
+export { default as signOff } from "./signOff";
diff --git a/src/core/client/framework/rest/signOff.ts b/src/core/client/framework/rest/signOff.ts
new file mode 100644
index 000000000..5a1904d7c
--- /dev/null
+++ b/src/core/client/framework/rest/signOff.ts
@@ -0,0 +1,7 @@
+import { RestClient } from "../lib/rest";
+
+export default function signOff(rest: RestClient) {
+  return rest.fetch("/tenant/auth/local", {
+    method: "DELETE",
+  });
+}
diff --git a/src/core/client/stream/components/UserBoxAuthenticated.tsx b/src/core/client/stream/components/UserBoxAuthenticated.tsx
index daa8fcb35..27e6e4965 100644
--- a/src/core/client/stream/components/UserBoxAuthenticated.tsx
+++ b/src/core/client/stream/components/UserBoxAuthenticated.tsx
@@ -16,7 +16,7 @@ const UserBoxAuthenticated: StatelessComponent<
   UserBoxUnauthenticatedProps
 > = props => {
   return (
-    <Flex itemGutter>
+    <Flex itemGutter="half">
       <Flex itemGutter="half" className={styles.child}>
         <MatchMedia gteWidth="sm">
           <Localized id="comments-userBoxAuthenticated-signedInAs">
diff --git a/src/core/client/stream/components/UserBoxUnauthenticated.tsx b/src/core/client/stream/components/UserBoxUnauthenticated.tsx
index f1a8716ee..0a81149bc 100644
--- a/src/core/client/stream/components/UserBoxUnauthenticated.tsx
+++ b/src/core/client/stream/components/UserBoxUnauthenticated.tsx
@@ -9,6 +9,7 @@ import * as styles from "./UserBoxUnauthenticated.css";
 export interface UserBoxUnauthenticatedProps {
   onSignIn: () => void;
   onRegister: () => void;
+  onSignOff: () => void;
 }
 
 const UserBoxUnauthenticated: StatelessComponent<
diff --git a/src/core/client/stream/containers/UserBoxAuthenticatedContainer.tsx b/src/core/client/stream/containers/UserBoxAuthenticatedContainer.tsx
new file mode 100644
index 000000000..f1de51853
--- /dev/null
+++ b/src/core/client/stream/containers/UserBoxAuthenticatedContainer.tsx
@@ -0,0 +1,29 @@
+import React, { Component } from "react";
+import UserBoxUnauthenticated from "talk-stream/components/UserBoxUnauthenticated";
+import { withSignOffMutation } from "../../auth/mutations";
+
+interface SignInContainerProps {
+  onSignIn: () => void;
+  onRegister: () => void;
+  signOff: () => void;
+}
+
+export type View = "SIGN_UP" | "FORGOT_PASSWORD";
+
+class UserBoxUnauthenticatedContainer extends Component<SignInContainerProps> {
+  private signOff = () => {
+    this.props.signOff();
+  };
+  public render() {
+    return (
+      <UserBoxUnauthenticated
+        onSignOff={this.signOff}
+        onRegister={this.props.onRegister}
+        onSignIn={this.props.onSignIn}
+      />
+    );
+  }
+}
+
+const enhanced = withSignOffMutation(UserBoxUnauthenticatedContainer);
+export default enhanced;
diff --git a/src/core/client/stream/containers/UserBoxContainer.tsx b/src/core/client/stream/containers/UserBoxContainer.tsx
index b9896e97b..68845a3e3 100644
--- a/src/core/client/stream/containers/UserBoxContainer.tsx
+++ b/src/core/client/stream/containers/UserBoxContainer.tsx
@@ -11,7 +11,7 @@ import {
 import { Popup } from "talk-ui/components";
 
 import UserBoxAuthenticated from "../components/UserBoxAuthenticated";
-import UserBoxUnauthenticated from "../components/UserBoxUnauthenticated";
+import UserBoxAuthenticatedContainer from "../containers/UserBoxAuthenticatedContainer";
 
 export type USER_ROLE =
   | "ADMIN"
@@ -67,7 +67,7 @@ export class UserBoxContainer extends Component<InnerProps> {
           onBlur={this.handleBlur}
           onClose={this.handleClose}
         />
-        <UserBoxUnauthenticated
+        <UserBoxAuthenticatedContainer
           onSignIn={this.handleSignIn}
           onRegister={this.handleRegister}
         />

From e704c6d96833858f84100d572faebcbc774f62d7 Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Thu, 16 Aug 2018 12:02:09 -0300
Subject: [PATCH 31/81] SignOff Mutation

---
 .../client/auth/mutations/SignOffMutation.ts  | 14 +++++++--
 src/core/client/auth/mutations/index.ts       |  2 +-
 src/core/client/framework/rest/index.ts       |  2 +-
 src/core/client/framework/rest/signOff.ts     | 10 +++++--
 .../components/UserBoxAuthenticated.tsx       |  8 ++---
 .../components/UserBoxUnauthenticated.tsx     |  1 -
 .../UserBoxAuthenticatedContainer.tsx         | 30 ++++++++-----------
 .../stream/containers/UserBoxContainer.tsx    |  8 ++---
 8 files changed, 42 insertions(+), 33 deletions(-)

diff --git a/src/core/client/auth/mutations/SignOffMutation.ts b/src/core/client/auth/mutations/SignOffMutation.ts
index 68ab26d0d..b926960df 100644
--- a/src/core/client/auth/mutations/SignOffMutation.ts
+++ b/src/core/client/auth/mutations/SignOffMutation.ts
@@ -2,13 +2,23 @@ import { Environment } from "relay-runtime";
 
 import { TalkContext } from "talk-framework/lib/bootstrap";
 import { createMutationContainer } from "talk-framework/lib/relay";
-import { signOff } from "talk-framework/rest";
+import { signOff, SignOffInput } from "talk-framework/rest";
+
+export type SignOffMutation = (input: SignOffInput) => Promise<void>;
 
 export async function commit(
   environment: Environment,
+  input: SignOffInput,
   { rest, postMessage }: TalkContext
 ) {
-  signOff(rest);
+  try {
+    await signOff(rest, input);
+    console.log("signing off");
+    // postMessage.send("setAuthToken", result.token, window.opener);
+    // window.close();
+  } catch (err) {
+    // postMessage.send("authError", err.toString(), window.opener);
+  }
 }
 
 export const withSignOffMutation = createMutationContainer("signOff", commit);
diff --git a/src/core/client/auth/mutations/index.ts b/src/core/client/auth/mutations/index.ts
index f6fe1b2f7..e83f7aabf 100644
--- a/src/core/client/auth/mutations/index.ts
+++ b/src/core/client/auth/mutations/index.ts
@@ -1,4 +1,4 @@
 export { withSetViewMutation, SetViewMutation } from "./SetViewMutation";
 export { withSignInMutation, SignInMutation } from "./SignInMutation";
 export { withSignUpMutation, SignUpMutation } from "./SignUpMutation";
-export { withSignOffMutation } from "./SignOffMutation";
+export { withSignOffMutation, SignOffMutation } from "./SignOffMutation";
diff --git a/src/core/client/framework/rest/index.ts b/src/core/client/framework/rest/index.ts
index 7216d255f..97437ed10 100644
--- a/src/core/client/framework/rest/index.ts
+++ b/src/core/client/framework/rest/index.ts
@@ -1,3 +1,3 @@
 export { default as signIn, SignInInput } from "./signIn";
 export { default as signUp, SignUpInput } from "./signUp";
-export { default as signOff } from "./signOff";
+export { default as signOff, SignOffInput } from "./signOff";
diff --git a/src/core/client/framework/rest/signOff.ts b/src/core/client/framework/rest/signOff.ts
index 5a1904d7c..6072f3ba9 100644
--- a/src/core/client/framework/rest/signOff.ts
+++ b/src/core/client/framework/rest/signOff.ts
@@ -1,7 +1,13 @@
 import { RestClient } from "../lib/rest";
 
-export default function signOff(rest: RestClient) {
-  return rest.fetch("/tenant/auth/local", {
+// tslint:disable-next-line:no-empty-interface
+export interface SignOffInput {}
+
+// tslint:disable-next-line:no-empty-interface
+export interface SignOffResponse {}
+
+export default function signOff(rest: RestClient, input: SignOffInput) {
+  return rest.fetch<SignOffResponse>("/tenant/auth/local", {
     method: "DELETE",
   });
 }
diff --git a/src/core/client/stream/components/UserBoxAuthenticated.tsx b/src/core/client/stream/components/UserBoxAuthenticated.tsx
index 27e6e4965..dc58ebafa 100644
--- a/src/core/client/stream/components/UserBoxAuthenticated.tsx
+++ b/src/core/client/stream/components/UserBoxAuthenticated.tsx
@@ -7,13 +7,13 @@ import MatchMedia from "talk-ui/components/MatchMedia";
 import { User } from "../containers/UserBoxContainer";
 import * as styles from "./UserBoxAuthenticated.css";
 
-export interface UserBoxUnauthenticatedProps {
-  onSignOut: () => void;
+export interface UserBoxAuthenticatedProps {
+  onSignOff: () => void;
   user: User;
 }
 
 const UserBoxAuthenticated: StatelessComponent<
-  UserBoxUnauthenticatedProps
+  UserBoxAuthenticatedProps
 > = props => {
   return (
     <Flex itemGutter="half">
@@ -40,7 +40,7 @@ const UserBoxAuthenticated: StatelessComponent<
             color="primary"
             size="small"
             variant="underlined"
-            onClick={props.onSignOut}
+            onClick={props.onSignOff}
           >
             Sign Out
           </Button>
diff --git a/src/core/client/stream/components/UserBoxUnauthenticated.tsx b/src/core/client/stream/components/UserBoxUnauthenticated.tsx
index 0a81149bc..f1a8716ee 100644
--- a/src/core/client/stream/components/UserBoxUnauthenticated.tsx
+++ b/src/core/client/stream/components/UserBoxUnauthenticated.tsx
@@ -9,7 +9,6 @@ import * as styles from "./UserBoxUnauthenticated.css";
 export interface UserBoxUnauthenticatedProps {
   onSignIn: () => void;
   onRegister: () => void;
-  onSignOff: () => void;
 }
 
 const UserBoxUnauthenticated: StatelessComponent<
diff --git a/src/core/client/stream/containers/UserBoxAuthenticatedContainer.tsx b/src/core/client/stream/containers/UserBoxAuthenticatedContainer.tsx
index f1de51853..54b36ecbf 100644
--- a/src/core/client/stream/containers/UserBoxAuthenticatedContainer.tsx
+++ b/src/core/client/stream/containers/UserBoxAuthenticatedContainer.tsx
@@ -1,29 +1,25 @@
 import React, { Component } from "react";
-import UserBoxUnauthenticated from "talk-stream/components/UserBoxUnauthenticated";
-import { withSignOffMutation } from "../../auth/mutations";
+import UserBoxAuthenticated from "talk-stream/components/UserBoxAuthenticated";
+import { SignOffMutation, withSignOffMutation } from "../../auth/mutations";
+import { User } from "../containers/UserBoxContainer";
 
-interface SignInContainerProps {
-  onSignIn: () => void;
-  onRegister: () => void;
-  signOff: () => void;
+interface UserBoxAuthenticatedProps {
+  signOff: SignOffMutation;
+  user: User;
 }
 
-export type View = "SIGN_UP" | "FORGOT_PASSWORD";
-
-class UserBoxUnauthenticatedContainer extends Component<SignInContainerProps> {
-  private signOff = () => {
-    this.props.signOff();
+class UserBoxAuthenticatedContainer extends Component<
+  UserBoxAuthenticatedProps
+> {
+  private onSignOff = () => {
+    this.props.signOff({});
   };
   public render() {
     return (
-      <UserBoxUnauthenticated
-        onSignOff={this.signOff}
-        onRegister={this.props.onRegister}
-        onSignIn={this.props.onSignIn}
-      />
+      <UserBoxAuthenticated onSignOff={this.onSignOff} user={this.props.user} />
     );
   }
 }
 
-const enhanced = withSignOffMutation(UserBoxUnauthenticatedContainer);
+const enhanced = withSignOffMutation(UserBoxAuthenticatedContainer);
 export default enhanced;
diff --git a/src/core/client/stream/containers/UserBoxContainer.tsx b/src/core/client/stream/containers/UserBoxContainer.tsx
index 68845a3e3..0a9d72561 100644
--- a/src/core/client/stream/containers/UserBoxContainer.tsx
+++ b/src/core/client/stream/containers/UserBoxContainer.tsx
@@ -10,7 +10,7 @@ import {
 } from "talk-stream/mutations";
 import { Popup } from "talk-ui/components";
 
-import UserBoxAuthenticated from "../components/UserBoxAuthenticated";
+import UserBoxUnauthenticated from "talk-stream/components/UserBoxUnauthenticated";
 import UserBoxAuthenticatedContainer from "../containers/UserBoxAuthenticatedContainer";
 
 export type USER_ROLE =
@@ -50,9 +50,7 @@ export class UserBoxContainer extends Component<InnerProps> {
     } = this.props;
 
     if (user) {
-      return (
-        <UserBoxAuthenticated onSignOut={this.handleRegister} user={user} />
-      );
+      return <UserBoxAuthenticatedContainer user={user} />;
     }
 
     return (
@@ -67,7 +65,7 @@ export class UserBoxContainer extends Component<InnerProps> {
           onBlur={this.handleBlur}
           onClose={this.handleClose}
         />
-        <UserBoxAuthenticatedContainer
+        <UserBoxUnauthenticated
           onSignIn={this.handleSignIn}
           onRegister={this.handleRegister}
         />

From a48bcc3076795d6787edd0fa27e0cc703781062e Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Thu, 16 Aug 2018 12:20:56 -0300
Subject: [PATCH 32/81] Hitting the delete route and deleting the token

---
 src/core/client/auth/mutations/SignOffMutation.ts | 14 +++++---------
 src/core/client/framework/lib/rest.ts             | 13 +++++++------
 src/core/server/app/router.ts                     |  5 +++++
 3 files changed, 17 insertions(+), 15 deletions(-)

diff --git a/src/core/client/auth/mutations/SignOffMutation.ts b/src/core/client/auth/mutations/SignOffMutation.ts
index b926960df..dcaadfd8f 100644
--- a/src/core/client/auth/mutations/SignOffMutation.ts
+++ b/src/core/client/auth/mutations/SignOffMutation.ts
@@ -9,16 +9,12 @@ export type SignOffMutation = (input: SignOffInput) => Promise<void>;
 export async function commit(
   environment: Environment,
   input: SignOffInput,
-  { rest, postMessage }: TalkContext
+  { rest, localStorage }: TalkContext
 ) {
-  try {
-    await signOff(rest, input);
-    console.log("signing off");
-    // postMessage.send("setAuthToken", result.token, window.opener);
-    // window.close();
-  } catch (err) {
-    // postMessage.send("authError", err.toString(), window.opener);
-  }
+  await signOff(rest, input);
+  // tslint:disable-next-line:no-console
+  console.log("Signing off");
+  localStorage.removeItem("authToken");
 }
 
 export const withSignOffMutation = createMutationContainer("signOff", commit);
diff --git a/src/core/client/framework/lib/rest.ts b/src/core/client/framework/lib/rest.ts
index 790465798..9548febea 100644
--- a/src/core/client/framework/lib/rest.ts
+++ b/src/core/client/framework/lib/rest.ts
@@ -19,12 +19,13 @@ const buildOptions = (inputOptions: RequestInit = {}) => {
 
 const handleResp = (res: Response) => {
   if (res.status > 399) {
-    return res.json().then((err: any) => {
-      // TODO: sync error handling with server.
-      const message = err.message || err.error || res.status;
-      const error = new Error(message);
-      throw error;
-    });
+    return res.text();
+    // TODO (bc): sync error handling with server.
+    // return res.json().then((err: any) => {
+    //   const message = err.message || err.error || res.status;
+    //   const error = new Error(message);
+    //   throw error;
+    // });
   } else if (res.status === 204) {
     return res.text();
   } else {
diff --git a/src/core/server/app/router.ts b/src/core/server/app/router.ts
index 6c06f8848..75b195ab3 100644
--- a/src/core/server/app/router.ts
+++ b/src/core/server/app/router.ts
@@ -69,11 +69,16 @@ function createNewAuthRouter(app: AppOptions, options: RouterOptions) {
     express.json(),
     wrapAuthn(options.passport, app.signingConfig, "local")
   );
+
+  // TODO (bc) - add delete user serverside
+  router.delete("/local", express.json());
+
   router.post(
     "/local/signup",
     express.json(),
     signupHandler({ db: app.mongo, signingConfig: app.signingConfig })
   );
+
   router.post("/sso", wrapAuthn(options.passport, app.signingConfig, "sso"));
   router.get("/oidc", wrapAuthn(options.passport, app.signingConfig, "oidc"));
   router.get(

From ecb82cf9a914a980fcecf015b6b687106f6e4d73 Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Thu, 16 Aug 2018 12:41:21 -0300
Subject: [PATCH 33/81] Working type submit for forms - Button Component

---
 src/core/client/auth/components/SignIn.tsx           |  8 +++++++-
 .../client/ui/components/BaseButton/BaseButton.tsx   | 12 +++++++++---
 src/core/client/ui/components/Button/Button.tsx      |  6 ++++++
 3 files changed, 22 insertions(+), 4 deletions(-)

diff --git a/src/core/client/auth/components/SignIn.tsx b/src/core/client/auth/components/SignIn.tsx
index f0e88fdd4..5785ea2e9 100644
--- a/src/core/client/auth/components/SignIn.tsx
+++ b/src/core/client/auth/components/SignIn.tsx
@@ -99,7 +99,13 @@ const SignIn: StatelessComponent<SignInForm> = props => {
             </Field>
 
             <div className={styles.footer}>
-              <Button variant="filled" color="primary" size="large" fullWidth>
+              <Button
+                variant="filled"
+                color="primary"
+                size="large"
+                fullWidth
+                type="submit"
+              >
                 Sign in and join the conversation
               </Button>
               <Flex
diff --git a/src/core/client/ui/components/BaseButton/BaseButton.tsx b/src/core/client/ui/components/BaseButton/BaseButton.tsx
index a92a28d50..b9a95a1ee 100644
--- a/src/core/client/ui/components/BaseButton/BaseButton.tsx
+++ b/src/core/client/ui/components/BaseButton/BaseButton.tsx
@@ -32,6 +32,8 @@ interface InnerProps extends ButtonHTMLAttributes<HTMLButtonElement> {
 
   /** Internal: Forwarded Ref */
   forwardRef?: Ref<HTMLButtonElement>;
+
+  type?: "submit" | "reset" | "button";
 }
 
 /**
@@ -45,15 +47,17 @@ const BaseButton: StatelessComponent<InnerProps> = ({
   keyboardFocus,
   mouseHover,
   forwardRef,
-  type: typeProp,
+  type,
   ...rest
 }) => {
+  console.log("type", type, "Basebutton");
+
   let Element = "button";
+
   if (anchor) {
     Element = "a";
   }
 
-  let type = typeProp;
   if (anchor && type) {
     // tslint:disable:next-line: no-console
     console.warn(
@@ -69,7 +73,9 @@ const BaseButton: StatelessComponent<InnerProps> = ({
     [classes.mouseHover]: mouseHover,
   });
 
-  return <Element {...rest} className={rootClassName} ref={forwardRef} />;
+  return (
+    <Element {...rest} className={rootClassName} ref={forwardRef} type={type} />
+  );
 };
 
 const enhanced = withForwardRef(
diff --git a/src/core/client/ui/components/Button/Button.tsx b/src/core/client/ui/components/Button/Button.tsx
index c984c2c5e..e466049dd 100644
--- a/src/core/client/ui/components/Button/Button.tsx
+++ b/src/core/client/ui/components/Button/Button.tsx
@@ -36,6 +36,8 @@ interface InnerProps extends ButtonHTMLAttributes<HTMLButtonElement> {
   /** If set renders active state e.g. to implement toggle buttons */
   active?: boolean;
 
+  type?: "submit" | "reset" | "button";
+
   /** Internal: Forwarded Ref */
   forwardRef?: Ref<HTMLButtonElement>;
 }
@@ -57,9 +59,12 @@ export class Button extends React.Component<InnerProps> {
       disabled,
       forwardRef,
       variant,
+      type,
       ...rest
     } = this.props;
 
+    console.log("type", type, "---------");
+
     const rootClassName = cn(classes.root, className, {
       [classes.sizeRegular]: size === "regular",
       [classes.sizeSmall]: size === "small",
@@ -84,6 +89,7 @@ export class Button extends React.Component<InnerProps> {
         classes={pick(classes, "keyboardFocus", "mouseHover")}
         disabled={disabled}
         forwardRef={forwardRef}
+        type={type}
         {...rest}
       />
     );

From e4ebb2553fa737945dffde044c97e8f2b9db36ab Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Thu, 16 Aug 2018 13:14:47 -0300
Subject: [PATCH 34/81] Handling error messages

---
 src/core/client/auth/components/SignIn.tsx    |  3 ++
 src/core/client/auth/components/SignUp.tsx    | 11 ++++++-
 .../auth/containers/SignInContainer.tsx       | 25 +++++++++++++---
 .../auth/containers/SignUpContainer.tsx       | 23 +++++++++++++--
 src/core/client/framework/lib/rest.ts         | 29 ++++++++++---------
 .../ui/components/BaseButton/BaseButton.tsx   |  2 --
 .../client/ui/components/Button/Button.tsx    |  2 --
 7 files changed, 69 insertions(+), 26 deletions(-)

diff --git a/src/core/client/auth/components/SignIn.tsx b/src/core/client/auth/components/SignIn.tsx
index 5785ea2e9..1934d03a8 100644
--- a/src/core/client/auth/components/SignIn.tsx
+++ b/src/core/client/auth/components/SignIn.tsx
@@ -9,6 +9,7 @@ import {
 } from "talk-framework/lib/validation";
 import {
   Button,
+  CallOut,
   Flex,
   FormField,
   InputLabel,
@@ -27,6 +28,7 @@ interface FormProps {
 export interface SignInForm {
   onSubmit: OnSubmit<FormProps>;
   setView: (view: View) => void;
+  errorMessage: string;
 }
 
 const SignIn: StatelessComponent<SignInForm> = props => {
@@ -34,6 +36,7 @@ const SignIn: StatelessComponent<SignInForm> = props => {
     <Form onSubmit={props.onSubmit}>
       {({ handleSubmit, submitting }) => (
         <form autoComplete="off" onSubmit={handleSubmit}>
+          {props.errorMessage && <CallOut>{props.errorMessage}</CallOut>}
           <Flex itemGutter direction="column" className={styles.root}>
             <Typography variant="heading1" align="center">
               Sign in to join the conversation
diff --git a/src/core/client/auth/components/SignUp.tsx b/src/core/client/auth/components/SignUp.tsx
index 5e4b913e6..071d1affc 100644
--- a/src/core/client/auth/components/SignUp.tsx
+++ b/src/core/client/auth/components/SignUp.tsx
@@ -12,6 +12,7 @@ import {
 } from "talk-framework/lib/validation";
 import {
   Button,
+  CallOut,
   Flex,
   FormField,
   InputDescription,
@@ -33,11 +34,13 @@ interface FormProps {
 export interface SignUpForm {
   onSubmit: OnSubmit<FormProps>;
   setView: (view: View) => void;
+  errorMessage: string;
 }
 
 const SignUp: StatelessComponent<SignUpForm> = props => {
   return (
     <Form onSubmit={props.onSubmit}>
+      {props.errorMessage && <CallOut>{props.errorMessage}</CallOut>}
       {({ handleSubmit, submitting }) => (
         <form autoComplete="off" onSubmit={handleSubmit}>
           <Flex itemGutter direction="column" className={styles.root}>
@@ -155,7 +158,13 @@ const SignUp: StatelessComponent<SignUpForm> = props => {
               </Field>
             </Flex>
             <div className={styles.footer}>
-              <Button variant="filled" color="primary" size="large" fullWidth>
+              <Button
+                variant="filled"
+                color="primary"
+                size="large"
+                fullWidth
+                type="submit"
+              >
                 Sign up and join the conversation
               </Button>
               <Flex
diff --git a/src/core/client/auth/containers/SignInContainer.tsx b/src/core/client/auth/containers/SignInContainer.tsx
index 3b9892dbe..62a94c94c 100644
--- a/src/core/client/auth/containers/SignInContainer.tsx
+++ b/src/core/client/auth/containers/SignInContainer.tsx
@@ -13,9 +13,17 @@ interface SignInContainerProps {
   setView: SetViewMutation;
 }
 
+interface SignUpContainerState {
+  errorMessage: string;
+}
+
 export type View = "SIGN_UP" | "FORGOT_PASSWORD";
 
-class SignInContainer extends Component<SignInContainerProps> {
+class SignInContainer extends Component<
+  SignInContainerProps,
+  SignUpContainerState
+> {
+  public state = { errorMessage: "" };
   private setView = (view: View) => {
     this.props.setView({
       view,
@@ -23,19 +31,28 @@ class SignInContainer extends Component<SignInContainerProps> {
   };
   private onSubmit: SignInForm["onSubmit"] = async (input, form) => {
     try {
-      await this.props.signIn(input);
-      form.reset();
+      const res = await this.props.signIn(input);
+      console.log(res);
+      // form.reset();
     } catch (error) {
       if (error instanceof BadUserInputError) {
         return error.invalidArgsLocalized;
       }
+      console.log(error);
+      this.setState({ errorMessage: `Error: ${error}` });
       // tslint:disable-next-line:no-console
       console.error(error);
     }
     return undefined;
   };
   public render() {
-    return <SignIn onSubmit={this.onSubmit} setView={this.setView} />;
+    return (
+      <SignIn
+        onSubmit={this.onSubmit}
+        setView={this.setView}
+        errorMessage={this.state.errorMessage}
+      />
+    );
   }
 }
 
diff --git a/src/core/client/auth/containers/SignUpContainer.tsx b/src/core/client/auth/containers/SignUpContainer.tsx
index 6cbe4bf02..299bc5c91 100644
--- a/src/core/client/auth/containers/SignUpContainer.tsx
+++ b/src/core/client/auth/containers/SignUpContainer.tsx
@@ -14,9 +14,17 @@ interface SignUpContainerProps {
   setView: SetViewMutation;
 }
 
+interface SignUpContainerState {
+  errorMessage: string;
+}
+
 export type View = "SIGN_IN";
 
-class SignUpContainer extends Component<SignUpContainerProps> {
+class SignUpContainer extends Component<
+  SignUpContainerProps,
+  SignUpContainerState
+> {
+  public state = { errorMessage: "" };
   private setView = (view: View) => {
     this.props.setView({
       view,
@@ -24,19 +32,28 @@ class SignUpContainer extends Component<SignUpContainerProps> {
   };
   private onSubmit: SignUpForm["onSubmit"] = async (input, form) => {
     try {
-      await this.props.signUp(input);
+      const res = await this.props.signUp(input);
+      console.log("response", res);
       form.reset();
     } catch (error) {
+      console.log("error", error);
       if (error instanceof BadUserInputError) {
         return error.invalidArgsLocalized;
       }
+      this.setState({ errorMessage: `Something ${error}` });
       // tslint:disable-next-line:no-console
       console.error(error);
     }
     return undefined;
   };
   public render() {
-    return <SignUp onSubmit={this.onSubmit} setView={this.setView} />;
+    return (
+      <SignUp
+        onSubmit={this.onSubmit}
+        setView={this.setView}
+        errorMessage={this.state.errorMessage}
+      />
+    );
   }
 }
 
diff --git a/src/core/client/framework/lib/rest.ts b/src/core/client/framework/lib/rest.ts
index 9548febea..975c7e282 100644
--- a/src/core/client/framework/lib/rest.ts
+++ b/src/core/client/framework/lib/rest.ts
@@ -17,20 +17,17 @@ const buildOptions = (inputOptions: RequestInit = {}) => {
   return options;
 };
 
-const handleResp = (res: Response) => {
-  if (res.status > 399) {
-    return res.text();
-    // TODO (bc): sync error handling with server.
-    // return res.json().then((err: any) => {
-    //   const message = err.message || err.error || res.status;
-    //   const error = new Error(message);
-    //   throw error;
-    // });
-  } else if (res.status === 204) {
-    return res.text();
-  } else {
-    return res.json();
+const handleResp = async (res: Response) => {
+  if (!res.ok) {
+    const response = await res.json();
+    throw new Error(response.error);
   }
+
+  if (res.status === 204) {
+    return res.text();
+  }
+
+  return res.json();
 };
 
 type PartialRequestInit = Overwrite<Partial<RequestInit>, { body?: any }>;
@@ -53,6 +50,10 @@ export class RestClient {
         },
       });
     }
-    return fetch(`${this.uri}${path}`, buildOptions(opts)).then(handleResp);
+    return fetch(`${this.uri}${path}`, buildOptions(opts))
+      .then(handleResp)
+      .catch(err => {
+        throw Error(err);
+      });
   }
 }
diff --git a/src/core/client/ui/components/BaseButton/BaseButton.tsx b/src/core/client/ui/components/BaseButton/BaseButton.tsx
index b9a95a1ee..8dfa8575b 100644
--- a/src/core/client/ui/components/BaseButton/BaseButton.tsx
+++ b/src/core/client/ui/components/BaseButton/BaseButton.tsx
@@ -50,8 +50,6 @@ const BaseButton: StatelessComponent<InnerProps> = ({
   type,
   ...rest
 }) => {
-  console.log("type", type, "Basebutton");
-
   let Element = "button";
 
   if (anchor) {
diff --git a/src/core/client/ui/components/Button/Button.tsx b/src/core/client/ui/components/Button/Button.tsx
index e466049dd..424b8bbe5 100644
--- a/src/core/client/ui/components/Button/Button.tsx
+++ b/src/core/client/ui/components/Button/Button.tsx
@@ -63,8 +63,6 @@ export class Button extends React.Component<InnerProps> {
       ...rest
     } = this.props;
 
-    console.log("type", type, "---------");
-
     const rootClassName = cn(classes.root, className, {
       [classes.sizeRegular]: size === "regular",
       [classes.sizeSmall]: size === "small",

From 94ad23ce9bf9361e8b66e67d470aa2748e0dec07 Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Thu, 16 Aug 2018 16:21:52 -0300
Subject: [PATCH 35/81] Working validation from the server using CallOuts

---
 src/core/client/auth/components/SignIn.tsx        | 10 +++++++---
 src/core/client/auth/components/SignUp.tsx        | 10 +++++++---
 .../client/auth/containers/SignInContainer.tsx    | 15 +++++++--------
 .../client/auth/containers/SignUpContainer.tsx    | 12 +++++-------
 src/core/client/auth/mutations/SignInMutation.ts  |  1 +
 src/core/client/auth/mutations/SignOffMutation.ts | 12 ++++++++----
 src/core/client/auth/mutations/SignUpMutation.ts  |  1 +
 .../client/framework/lib/errors/exceptionError.ts |  4 ++++
 src/core/client/framework/lib/errors/index.ts     |  2 ++
 src/core/client/framework/lib/rest.ts             | 14 ++++++++------
 10 files changed, 50 insertions(+), 31 deletions(-)
 create mode 100644 src/core/client/framework/lib/errors/exceptionError.ts

diff --git a/src/core/client/auth/components/SignIn.tsx b/src/core/client/auth/components/SignIn.tsx
index 1934d03a8..24f2cb2f3 100644
--- a/src/core/client/auth/components/SignIn.tsx
+++ b/src/core/client/auth/components/SignIn.tsx
@@ -28,20 +28,24 @@ interface FormProps {
 export interface SignInForm {
   onSubmit: OnSubmit<FormProps>;
   setView: (view: View) => void;
-  errorMessage: string;
+  error: string | null;
 }
 
 const SignIn: StatelessComponent<SignInForm> = props => {
+  console.log(props);
   return (
     <Form onSubmit={props.onSubmit}>
       {({ handleSubmit, submitting }) => (
         <form autoComplete="off" onSubmit={handleSubmit}>
-          {props.errorMessage && <CallOut>{props.errorMessage}</CallOut>}
           <Flex itemGutter direction="column" className={styles.root}>
             <Typography variant="heading1" align="center">
               Sign in to join the conversation
             </Typography>
-
+            {props.error && (
+              <CallOut color="error" fullWidth>
+                {props.error}
+              </CallOut>
+            )}
             <Field
               name="email"
               validate={composeValidators(required, validateEmail)}
diff --git a/src/core/client/auth/components/SignUp.tsx b/src/core/client/auth/components/SignUp.tsx
index 071d1affc..6fcfc5426 100644
--- a/src/core/client/auth/components/SignUp.tsx
+++ b/src/core/client/auth/components/SignUp.tsx
@@ -34,13 +34,13 @@ interface FormProps {
 export interface SignUpForm {
   onSubmit: OnSubmit<FormProps>;
   setView: (view: View) => void;
-  errorMessage: string;
+  error: string | null;
 }
 
 const SignUp: StatelessComponent<SignUpForm> = props => {
   return (
     <Form onSubmit={props.onSubmit}>
-      {props.errorMessage && <CallOut>{props.errorMessage}</CallOut>}
+      {!!props.error && <CallOut>{props.error}</CallOut>}
       {({ handleSubmit, submitting }) => (
         <form autoComplete="off" onSubmit={handleSubmit}>
           <Flex itemGutter direction="column" className={styles.root}>
@@ -48,7 +48,11 @@ const SignUp: StatelessComponent<SignUpForm> = props => {
               <Typography variant="heading1" align="center">
                 Sign up to join the conversation
               </Typography>
-
+              {props.error && (
+                <CallOut color="error" fullWidth>
+                  {props.error}
+                </CallOut>
+              )}
               <Field
                 name="email"
                 validate={composeValidators(required, validateEmail)}
diff --git a/src/core/client/auth/containers/SignInContainer.tsx b/src/core/client/auth/containers/SignInContainer.tsx
index 62a94c94c..5902fe372 100644
--- a/src/core/client/auth/containers/SignInContainer.tsx
+++ b/src/core/client/auth/containers/SignInContainer.tsx
@@ -1,5 +1,6 @@
 import React, { Component } from "react";
 import { BadUserInputError } from "talk-framework/lib/errors";
+
 import SignIn, { SignInForm } from "../components/SignIn";
 import {
   SetViewMutation,
@@ -14,7 +15,7 @@ interface SignInContainerProps {
 }
 
 interface SignUpContainerState {
-  errorMessage: string;
+  error: string | null;
 }
 
 export type View = "SIGN_UP" | "FORGOT_PASSWORD";
@@ -23,7 +24,7 @@ class SignInContainer extends Component<
   SignInContainerProps,
   SignUpContainerState
 > {
-  public state = { errorMessage: "" };
+  public state = { error: null };
   private setView = (view: View) => {
     this.props.setView({
       view,
@@ -31,15 +32,13 @@ class SignInContainer extends Component<
   };
   private onSubmit: SignInForm["onSubmit"] = async (input, form) => {
     try {
-      const res = await this.props.signIn(input);
-      console.log(res);
-      // form.reset();
+      await this.props.signIn(input);
+      form.reset();
     } catch (error) {
+      this.setState({ error: error.message });
       if (error instanceof BadUserInputError) {
         return error.invalidArgsLocalized;
       }
-      console.log(error);
-      this.setState({ errorMessage: `Error: ${error}` });
       // tslint:disable-next-line:no-console
       console.error(error);
     }
@@ -50,7 +49,7 @@ class SignInContainer extends Component<
       <SignIn
         onSubmit={this.onSubmit}
         setView={this.setView}
-        errorMessage={this.state.errorMessage}
+        error={this.state.error}
       />
     );
   }
diff --git a/src/core/client/auth/containers/SignUpContainer.tsx b/src/core/client/auth/containers/SignUpContainer.tsx
index 299bc5c91..1a9f91a46 100644
--- a/src/core/client/auth/containers/SignUpContainer.tsx
+++ b/src/core/client/auth/containers/SignUpContainer.tsx
@@ -15,7 +15,7 @@ interface SignUpContainerProps {
 }
 
 interface SignUpContainerState {
-  errorMessage: string;
+  error: string | null;
 }
 
 export type View = "SIGN_IN";
@@ -24,7 +24,7 @@ class SignUpContainer extends Component<
   SignUpContainerProps,
   SignUpContainerState
 > {
-  public state = { errorMessage: "" };
+  public state = { error: "" };
   private setView = (view: View) => {
     this.props.setView({
       view,
@@ -32,15 +32,13 @@ class SignUpContainer extends Component<
   };
   private onSubmit: SignUpForm["onSubmit"] = async (input, form) => {
     try {
-      const res = await this.props.signUp(input);
-      console.log("response", res);
+      await this.props.signUp(input);
       form.reset();
     } catch (error) {
-      console.log("error", error);
+      this.setState({ error: error.message });
       if (error instanceof BadUserInputError) {
         return error.invalidArgsLocalized;
       }
-      this.setState({ errorMessage: `Something ${error}` });
       // tslint:disable-next-line:no-console
       console.error(error);
     }
@@ -51,7 +49,7 @@ class SignUpContainer extends Component<
       <SignUp
         onSubmit={this.onSubmit}
         setView={this.setView}
-        errorMessage={this.state.errorMessage}
+        error={this.state.error}
       />
     );
   }
diff --git a/src/core/client/auth/mutations/SignInMutation.ts b/src/core/client/auth/mutations/SignInMutation.ts
index 6a88b9313..16fbf52d4 100644
--- a/src/core/client/auth/mutations/SignInMutation.ts
+++ b/src/core/client/auth/mutations/SignInMutation.ts
@@ -17,6 +17,7 @@ export async function commit(
     window.close();
   } catch (err) {
     postMessage.send("authError", err.toString(), window.opener);
+    throw Error(err.message);
   }
 }
 
diff --git a/src/core/client/auth/mutations/SignOffMutation.ts b/src/core/client/auth/mutations/SignOffMutation.ts
index dcaadfd8f..01aa38cf0 100644
--- a/src/core/client/auth/mutations/SignOffMutation.ts
+++ b/src/core/client/auth/mutations/SignOffMutation.ts
@@ -11,10 +11,14 @@ export async function commit(
   input: SignOffInput,
   { rest, localStorage }: TalkContext
 ) {
-  await signOff(rest, input);
-  // tslint:disable-next-line:no-console
-  console.log("Signing off");
-  localStorage.removeItem("authToken");
+  try {
+    await signOff(rest, input);
+    localStorage.removeItem("authToken");
+  } catch (error) {
+    localStorage.removeItem("authToken");
+    // tslint:disable-next-line:no-console
+    console.error("error", error);
+  }
 }
 
 export const withSignOffMutation = createMutationContainer("signOff", commit);
diff --git a/src/core/client/auth/mutations/SignUpMutation.ts b/src/core/client/auth/mutations/SignUpMutation.ts
index 68beaeae2..76e6442c2 100644
--- a/src/core/client/auth/mutations/SignUpMutation.ts
+++ b/src/core/client/auth/mutations/SignUpMutation.ts
@@ -17,6 +17,7 @@ export async function commit(
     window.close();
   } catch (err) {
     postMessage.send("authError", err.toString(), window.opener);
+    throw Error(err.toString());
   }
 }
 
diff --git a/src/core/client/framework/lib/errors/exceptionError.ts b/src/core/client/framework/lib/errors/exceptionError.ts
new file mode 100644
index 000000000..16e79eaa6
--- /dev/null
+++ b/src/core/client/framework/lib/errors/exceptionError.ts
@@ -0,0 +1,4 @@
+export interface ExceptionError {
+  message: string;
+  stack: string;
+}
diff --git a/src/core/client/framework/lib/errors/index.ts b/src/core/client/framework/lib/errors/index.ts
index 85539f649..2d58d8d08 100644
--- a/src/core/client/framework/lib/errors/index.ts
+++ b/src/core/client/framework/lib/errors/index.ts
@@ -2,4 +2,6 @@ export { default as NetworkError } from "./networkError";
 export { default as UnknownServerError } from "./unknownServerError";
 export { default as BadUserInputError } from "./badUserInputError";
 export { default as GraphQLError } from "./graphqlError";
+export { default as ExceptionError } from "./exceptionError";
+
 export * from "./graphqlError";
diff --git a/src/core/client/framework/lib/rest.ts b/src/core/client/framework/lib/rest.ts
index 975c7e282..b071aedb4 100644
--- a/src/core/client/framework/lib/rest.ts
+++ b/src/core/client/framework/lib/rest.ts
@@ -18,6 +18,11 @@ const buildOptions = (inputOptions: RequestInit = {}) => {
 };
 
 const handleResp = async (res: Response) => {
+  if (res.status === 404) {
+    const response = await res.text();
+    throw new Error(response);
+  }
+
   if (!res.ok) {
     const response = await res.json();
     throw new Error(response.error);
@@ -41,7 +46,7 @@ export class RestClient {
     this.tokenGetter = tokenGetter;
   }
 
-  public fetch<T>(path: string, options: PartialRequestInit): Promise<T> {
+  public async fetch<T>(path: string, options: PartialRequestInit): Promise<T> {
     let opts = options;
     if (this.tokenGetter) {
       opts = merge({}, options, {
@@ -50,10 +55,7 @@ export class RestClient {
         },
       });
     }
-    return fetch(`${this.uri}${path}`, buildOptions(opts))
-      .then(handleResp)
-      .catch(err => {
-        throw Error(err);
-      });
+    const response = await fetch(`${this.uri}${path}`, buildOptions(opts));
+    return handleResp(response);
   }
 }

From 6e1b9c99ac56756592a8040d65377ed3f57232b7 Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Thu, 16 Aug 2018 16:24:49 -0300
Subject: [PATCH 36/81] Working validation from the server using CallOuts

---
 src/core/client/auth/components/SignUp.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/core/client/auth/components/SignUp.tsx b/src/core/client/auth/components/SignUp.tsx
index 6fcfc5426..c1454fb16 100644
--- a/src/core/client/auth/components/SignUp.tsx
+++ b/src/core/client/auth/components/SignUp.tsx
@@ -40,7 +40,6 @@ export interface SignUpForm {
 const SignUp: StatelessComponent<SignUpForm> = props => {
   return (
     <Form onSubmit={props.onSubmit}>
-      {!!props.error && <CallOut>{props.error}</CallOut>}
       {({ handleSubmit, submitting }) => (
         <form autoComplete="off" onSubmit={handleSubmit}>
           <Flex itemGutter direction="column" className={styles.root}>

From d1e938112e5df7d49dba8153db5e4da9b7c3d747 Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Fri, 17 Aug 2018 09:06:00 -0300
Subject: [PATCH 37/81] Adding Spinner Component to UI and some corrections to
 the docs

---
 .../ui/components/FormField/FormField.mdx     | 32 +++------
 .../InputDescription/InputDescription.mdx     |  6 +-
 .../client/ui/components/Spinner/Spinner.css  | 68 +++++++++++++++++++
 .../client/ui/components/Spinner/Spinner.mdx  | 15 ++++
 .../client/ui/components/Spinner/Spinner.tsx  | 46 +++++++++++++
 .../client/ui/components/Spinner/index.ts     |  1 +
 src/core/client/ui/components/index.ts        |  1 +
 src/docs/forms.mdx                            | 19 +++---
 8 files changed, 151 insertions(+), 37 deletions(-)
 create mode 100644 src/core/client/ui/components/Spinner/Spinner.css
 create mode 100644 src/core/client/ui/components/Spinner/Spinner.mdx
 create mode 100644 src/core/client/ui/components/Spinner/Spinner.tsx
 create mode 100644 src/core/client/ui/components/Spinner/index.ts

diff --git a/src/core/client/ui/components/FormField/FormField.mdx b/src/core/client/ui/components/FormField/FormField.mdx
index 3dc055085..cfd503953 100644
--- a/src/core/client/ui/components/FormField/FormField.mdx
+++ b/src/core/client/ui/components/FormField/FormField.mdx
@@ -5,32 +5,18 @@ menu: UI Kit
 
 import { Playground, PropsTable } from 'docz'
 import FormField from './FormField'
-import { InputLabel, ValidationMessage, TextField, Typography, Flex, Button} from '../core/client/ui/components'
 
-# Flex
+# FormField
 
-`FormField` is to be used with Form Components `flexbox`.
+`FormField` is to be used with Form Components: `InputLabel`, `InputDescription`, `TextField`, `ValidationMessage`, etc.
+FormField manages the gutters between inner elements. It's a form field wrapper of the `Flex` Component.
 
 ## Justify content
 <Playground>
-  <FormField>
-  </FormField>
-</Playground>
-
-## Align items
-<Playground>
-  <Flex alignItems="center" itemGutter>
-    <Button variant="filled">Push Me</Button>
-    <Button variant="filled" size="small">Push Me</Button>
-    <Button variant="filled" size="large">Push Me</Button>
-  </Flex>
-</Playground>
-
-## Direction
-<Playground>
-  <Flex direction="column" itemGutter>
-    <Button variant="filled">Push Me</Button>
-    <Button variant="filled">Push Me</Button>
-    <Button variant="filled">Push Me</Button>
-  </Flex>
+    <FormField>
+      <InputLabel defaultValue="something.com" color="error" >Username</InputLabel>
+      <InputDescription>A unique identifier displayed on your comments. You may use “_” and “.”</InputDescription>
+      <TextField/>
+      <ValidationMessage>Invalid characters. Try again.</ValidationMessage>
+    </FormField>
 </Playground>
diff --git a/src/core/client/ui/components/InputDescription/InputDescription.mdx b/src/core/client/ui/components/InputDescription/InputDescription.mdx
index c27a460be..7a68cc49f 100644
--- a/src/core/client/ui/components/InputDescription/InputDescription.mdx
+++ b/src/core/client/ui/components/InputDescription/InputDescription.mdx
@@ -4,7 +4,7 @@ menu: UI Kit
 ---
 
 import { Playground, PropsTable } from 'docz'
-import { InputDescription } from '../core/client/ui/components'
+import InputDescription from './InputDescription'
 
 # Flex
 
@@ -12,7 +12,5 @@ import { InputDescription } from '../core/client/ui/components'
 
 ## Align items
 <Playground>
-  <Flex alignItems="center" itemGutter>
-    <InputDescription>This is a description</Button>
-  </Flex>
+  <InputDescription>This is a description</InputDescription>
 </Playground>
diff --git a/src/core/client/ui/components/Spinner/Spinner.css b/src/core/client/ui/components/Spinner/Spinner.css
new file mode 100644
index 000000000..5dd6c6acf
--- /dev/null
+++ b/src/core/client/ui/components/Spinner/Spinner.css
@@ -0,0 +1,68 @@
+.root {
+  display: block;
+  text-align: center;
+}
+
+.spinner {
+  animation: rotator 1.4s linear infinite;
+}
+
+@keyframes rotator {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(270deg);
+  }
+}
+
+.path {
+  stroke: var(--palette-primary-main);
+  stroke-dasharray: 187;
+  stroke-dashoffset: 0;
+  transform-origin: center;
+  animation: dash 1.4s ease-in-out infinite, colors 5.6s ease-in-out infinite;
+}
+
+@keyframes colors {
+  0% {
+    stroke: var(--palette-primary-main);
+  }
+  100% {
+    stroke: var(--palette-primary-light);
+  }
+}
+
+@keyframes dash {
+  0% {
+    stroke-dashoffset: 187;
+  }
+  50% {
+    stroke-dashoffset: 46.75;
+    transform: rotate(135deg);
+  }
+  100% {
+    stroke-dashoffset: 187;
+    transform: rotate(450deg);
+  }
+}
+
+@keyframes fullRotator {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+/* Hack for IE and Edge as they don't support css animations on SVG elements. */
+_:-ms-lang(x),
+.path {
+  stroke-dasharray: 160;
+}
+
+_:-ms-lang(x),
+.spinner {
+  animation: fullRotator 1.4s linear infinite;
+}
diff --git a/src/core/client/ui/components/Spinner/Spinner.mdx b/src/core/client/ui/components/Spinner/Spinner.mdx
new file mode 100644
index 000000000..66ef80309
--- /dev/null
+++ b/src/core/client/ui/components/Spinner/Spinner.mdx
@@ -0,0 +1,15 @@
+---
+name: Spinner
+menu: UI Kit
+---
+
+import { Playground } from "docz"
+import Spinner from "./Spinner"
+
+# Spinner
+
+## Basic usage
+
+<Playground>
+  <Spinner />
+</Playground>
diff --git a/src/core/client/ui/components/Spinner/Spinner.tsx b/src/core/client/ui/components/Spinner/Spinner.tsx
new file mode 100644
index 000000000..2edb5e029
--- /dev/null
+++ b/src/core/client/ui/components/Spinner/Spinner.tsx
@@ -0,0 +1,46 @@
+import cn from "classnames";
+import React, { StatelessComponent } from "react";
+import { withStyles } from "talk-ui/hocs";
+import * as styles from "./Spinner.css";
+
+export interface SpinnerProps {
+  /**
+   * Convenient prop to override the root styling.
+   */
+  className?: string;
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: typeof styles;
+}
+
+const Spinner: StatelessComponent<SpinnerProps> = props => {
+  const { className, classes } = props;
+
+  const rootClassName = cn(classes.root, className);
+
+  return (
+    <div className={rootClassName}>
+      <svg
+        className={styles.spinner}
+        width="40px"
+        height="40px"
+        viewBox="0 0 66 66"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <circle
+          className={styles.path}
+          fill="none"
+          strokeWidth="6"
+          strokeLinecap="round"
+          cx="33"
+          cy="33"
+          r="30"
+        />
+      </svg>
+    </div>
+  );
+};
+
+const enhanced = withStyles(styles)(Spinner);
+export default enhanced;
diff --git a/src/core/client/ui/components/Spinner/index.ts b/src/core/client/ui/components/Spinner/index.ts
new file mode 100644
index 000000000..66d1096a0
--- /dev/null
+++ b/src/core/client/ui/components/Spinner/index.ts
@@ -0,0 +1 @@
+export { default } from "./Spinner";
diff --git a/src/core/client/ui/components/index.ts b/src/core/client/ui/components/index.ts
index 76efab87c..52ebe6a79 100644
--- a/src/core/client/ui/components/index.ts
+++ b/src/core/client/ui/components/index.ts
@@ -16,3 +16,4 @@ export { default as ClickOutside } from "./ClickOutside";
 export { default as Popup } from "./Popup";
 export { default as FormField } from "./FormField";
 export { default as InputDescription } from "./InputDescription";
+export { default as Spinner } from "./Spinner";
diff --git a/src/docs/forms.mdx b/src/docs/forms.mdx
index b114cf7e1..547d33701 100644
--- a/src/docs/forms.mdx
+++ b/src/docs/forms.mdx
@@ -10,13 +10,13 @@ Let's build some forms! We will use the following compoenents `InputLabel`, `Typ
 ### Examples
 
 import { Playground, PropsTable } from 'docz'
-import { InputLabel, ValidationMessage, TextField, Typography, Flex, Button} from '../core/client/ui/components'
+import { InputLabel, ValidationMessage, TextField, InputDescription, Flex, Button, FormField, Typography } from '../core/client/ui/components'
 
 # InputLabel
 
 ## Simple Form
 <Playground>
-  <Flex>
+  <Flex itemGutter direction="column">
     <Typography variant="heading1">Sign up to join the conversation</Typography>
 
     <FormField>
@@ -26,14 +26,13 @@ import { InputLabel, ValidationMessage, TextField, Typography, Flex, Button} fro
 
     <FormField>
       <InputLabel>Username</InputLabel>
-      <Typography>A unique identifier displayed on your comments. You may use “_” and “.”</Typography>
+      <InputDescription>A unique identifier displayed on your comments. You may use “_” and “.”</InputDescription>
       <TextField/>
     </FormField>
 
-
     <FormField>
       <InputLabel>Password</InputLabel>
-      <Typography>Must be at least 8 characters</Typography>
+      <InputDescription>Must be at least 8 characters</InputDescription>
       <TextField/>
     </FormField>
 
@@ -42,14 +41,14 @@ import { InputLabel, ValidationMessage, TextField, Typography, Flex, Button} fro
       <TextField/>
     </FormField>
 
-    <Button variant="filled" color="primary" size="large" >Sign up and join the conversation</Button>
+    <Button variant="filled" color="primary" size="large" fullWidth>Sign up and join the conversation</Button>
   </Flex>
 </Playground>
 
 ## Simple Form with error
 
 <Playground>
-  <Flex>
+  <Flex itemGutter direction="column">
     <Typography variant="heading1">Sign up to join the conversation</Typography>
 
     <FormField>
@@ -59,7 +58,7 @@ import { InputLabel, ValidationMessage, TextField, Typography, Flex, Button} fro
 
     <FormField>
       <InputLabel defaultValue="something.com" color="error" >Username</InputLabel>
-      <Typography>A unique identifier displayed on your comments. You may use “_” and “.”</Typography>
+      <InputDescription>A unique identifier displayed on your comments. You may use “_” and “.”</InputDescription>
       <TextField/>
       <ValidationMessage>Invalid characters. Try again.</ValidationMessage>
     </FormField>
@@ -67,7 +66,7 @@ import { InputLabel, ValidationMessage, TextField, Typography, Flex, Button} fro
 
     <FormField>
       <InputLabel>Password</InputLabel>
-      <Typography>Must be at least 8 characters</Typography>
+      <InputDescription>Must be at least 8 characters</InputDescription>
       <TextField/>
     </FormField>
 
@@ -76,6 +75,6 @@ import { InputLabel, ValidationMessage, TextField, Typography, Flex, Button} fro
       <TextField/>
     </FormField>
 
-    <Button variant="filled" color="primary" size="large" >Sign up and join the conversation</Button>
+    <Button variant="filled" color="primary" size="large" fullWidth>Sign up and join the conversation</Button>
   </Flex>
 </Playground>

From e1dc50a494f3c36de9b2a037489c122391963469 Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Fri, 17 Aug 2018 09:18:02 -0300
Subject: [PATCH 38/81] Updated docs

---
 src/docs/forms.mdx | 39 +++++++++++++++++++++++++++++++++++----
 1 file changed, 35 insertions(+), 4 deletions(-)

diff --git a/src/docs/forms.mdx b/src/docs/forms.mdx
index 547d33701..2fe5dc191 100644
--- a/src/docs/forms.mdx
+++ b/src/docs/forms.mdx
@@ -10,9 +10,7 @@ Let's build some forms! We will use the following compoenents `InputLabel`, `Typ
 ### Examples
 
 import { Playground, PropsTable } from 'docz'
-import { InputLabel, ValidationMessage, TextField, InputDescription, Flex, Button, FormField, Typography } from '../core/client/ui/components'
-
-# InputLabel
+import { InputLabel, CallOut, ValidationMessage, TextField, InputDescription, Flex, Button, FormField, Typography } from '../core/client/ui/components'
 
 ## Simple Form
 <Playground>
@@ -57,13 +55,46 @@ import { InputLabel, ValidationMessage, TextField, InputDescription, Flex, Butto
     </FormField>
 
     <FormField>
-      <InputLabel defaultValue="something.com" color="error" >Username</InputLabel>
+      <InputLabel defaultValue="something.com">Username</InputLabel>
       <InputDescription>A unique identifier displayed on your comments. You may use “_” and “.”</InputDescription>
       <TextField/>
       <ValidationMessage>Invalid characters. Try again.</ValidationMessage>
     </FormField>
 
 
+    <FormField>
+      <InputLabel>Password</InputLabel>
+      <InputDescription>Must be at least 8 characters</InputDescription>
+      <TextField/>
+    </FormField>
+
+    <FormField>
+      <InputLabel>Confirm Password</InputLabel>
+      <TextField/>
+    </FormField>
+
+    <Button variant="filled" color="primary" size="large" fullWidth>Sign up and join the conversation</Button>
+  </Flex>
+</Playground>
+
+## Simple Form with CallOut
+
+<Playground>
+  <Flex itemGutter direction="column">
+    <Typography variant="heading1">Sign up to join the conversation</Typography>
+    <CallOut color="error" fullWidth>The email address or password you entered is incorrect. Try again</CallOut>
+    <FormField>
+      <InputLabel>Email Address</InputLabel>
+      <TextField/>
+    </FormField>
+
+    <FormField>
+      <InputLabel defaultValue="something.com">Username</InputLabel>
+      <InputDescription>A unique identifier displayed on your comments. You may use “_” and “.”</InputDescription>
+      <TextField/>
+    </FormField>
+
+
     <FormField>
       <InputLabel>Password</InputLabel>
       <InputDescription>Must be at least 8 characters</InputDescription>

From 63d43caa2399424bc202e2c8b7cda940c45c846d Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Fri, 17 Aug 2018 09:25:13 -0300
Subject: [PATCH 39/81] Adding test for FormField, InputDescription and Spinner

---
 .../components/FormField/FormField.spec.tsx   | 26 ++++++++++++++++
 .../__snapshots__/FormField.spec.tsx.snap     | 30 +++++++++++++++++++
 .../InputDescription.spec.tsx                 | 11 +++++++
 .../InputDescription.spec.tsx.snap            |  9 ++++++
 .../ui/components/Spinner/Spinner.spec.tsx    |  9 ++++++
 .../__snapshots__/Spinner.spec.tsx.snap       | 25 ++++++++++++++++
 6 files changed, 110 insertions(+)
 create mode 100644 src/core/client/ui/components/FormField/FormField.spec.tsx
 create mode 100644 src/core/client/ui/components/FormField/__snapshots__/FormField.spec.tsx.snap
 create mode 100644 src/core/client/ui/components/InputDescription/InputDescription.spec.tsx
 create mode 100644 src/core/client/ui/components/InputDescription/__snapshots__/InputDescription.spec.tsx.snap
 create mode 100644 src/core/client/ui/components/Spinner/Spinner.spec.tsx
 create mode 100644 src/core/client/ui/components/Spinner/__snapshots__/Spinner.spec.tsx.snap

diff --git a/src/core/client/ui/components/FormField/FormField.spec.tsx b/src/core/client/ui/components/FormField/FormField.spec.tsx
new file mode 100644
index 000000000..ec94aa250
--- /dev/null
+++ b/src/core/client/ui/components/FormField/FormField.spec.tsx
@@ -0,0 +1,26 @@
+import React from "react";
+import TestRenderer from "react-test-renderer";
+
+import FormField from "../FormField";
+
+import { InputDescription, InputLabel, TextField } from "../../components";
+
+it("renders correctly", () => {
+  const renderer = TestRenderer.create(
+    <FormField>Form Components should go here</FormField>
+  );
+  expect(renderer.toJSON()).toMatchSnapshot();
+});
+
+it("works with multiple form components", () => {
+  const renderer = TestRenderer.create(
+    <FormField>
+      <InputLabel>Username</InputLabel>
+      <InputDescription>
+        A unique identifier displayed on your comments. You may use “_” and “.”
+      </InputDescription>
+      <TextField />
+    </FormField>
+  );
+  expect(renderer.toJSON()).toMatchSnapshot();
+});
diff --git a/src/core/client/ui/components/FormField/__snapshots__/FormField.spec.tsx.snap b/src/core/client/ui/components/FormField/__snapshots__/FormField.spec.tsx.snap
new file mode 100644
index 000000000..36cb45582
--- /dev/null
+++ b/src/core/client/ui/components/FormField/__snapshots__/FormField.spec.tsx.snap
@@ -0,0 +1,30 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders correctly 1`] = `
+<div
+  className="FormField-root FormField-itemGutter"
+>
+  Form Components should go here
+</div>
+`;
+
+exports[`works with multiple form components 1`] = `
+<div
+  className="FormField-root FormField-itemGutter"
+>
+  <label
+    className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+  >
+    Username
+  </label>
+  <p
+    className="Typography-root Typography-inputDescription Typography-colorTextSecondary"
+  >
+    A unique identifier displayed on your comments. You may use “_” and “.”
+  </p>
+  <input
+    className="TextField-root TextField-colorRegular TextField-fullWidth"
+    placeholder=""
+  />
+</div>
+`;
diff --git a/src/core/client/ui/components/InputDescription/InputDescription.spec.tsx b/src/core/client/ui/components/InputDescription/InputDescription.spec.tsx
new file mode 100644
index 000000000..25987bf3d
--- /dev/null
+++ b/src/core/client/ui/components/InputDescription/InputDescription.spec.tsx
@@ -0,0 +1,11 @@
+import React from "react";
+import TestRenderer from "react-test-renderer";
+
+import InputDescription from "../InputDescription";
+
+it("renders correctly", () => {
+  const renderer = TestRenderer.create(
+    <InputDescription>Form Components should go here</InputDescription>
+  );
+  expect(renderer.toJSON()).toMatchSnapshot();
+});
diff --git a/src/core/client/ui/components/InputDescription/__snapshots__/InputDescription.spec.tsx.snap b/src/core/client/ui/components/InputDescription/__snapshots__/InputDescription.spec.tsx.snap
new file mode 100644
index 000000000..90078c59e
--- /dev/null
+++ b/src/core/client/ui/components/InputDescription/__snapshots__/InputDescription.spec.tsx.snap
@@ -0,0 +1,9 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders correctly 1`] = `
+<p
+  className="Typography-root Typography-inputDescription Typography-colorTextSecondary"
+>
+  Form Components should go here
+</p>
+`;
diff --git a/src/core/client/ui/components/Spinner/Spinner.spec.tsx b/src/core/client/ui/components/Spinner/Spinner.spec.tsx
new file mode 100644
index 000000000..05521bf86
--- /dev/null
+++ b/src/core/client/ui/components/Spinner/Spinner.spec.tsx
@@ -0,0 +1,9 @@
+import React from "react";
+import TestRenderer from "react-test-renderer";
+
+import Spinner from "../Spinner";
+
+it("renders correctly", () => {
+  const renderer = TestRenderer.create(<Spinner />);
+  expect(renderer.toJSON()).toMatchSnapshot();
+});
diff --git a/src/core/client/ui/components/Spinner/__snapshots__/Spinner.spec.tsx.snap b/src/core/client/ui/components/Spinner/__snapshots__/Spinner.spec.tsx.snap
new file mode 100644
index 000000000..c5103e9e6
--- /dev/null
+++ b/src/core/client/ui/components/Spinner/__snapshots__/Spinner.spec.tsx.snap
@@ -0,0 +1,25 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders correctly 1`] = `
+<div
+  className="Spinner-root"
+>
+  <svg
+    className="Spinner-spinner"
+    height="40px"
+    viewBox="0 0 66 66"
+    width="40px"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <circle
+      className="Spinner-path"
+      cx="33"
+      cy="33"
+      fill="none"
+      r="30"
+      strokeLinecap="round"
+      strokeWidth="6"
+    />
+  </svg>
+</div>
+`;

From 071cf1ce1d2614c365ebcbd285a5d1eb6cddc937 Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Fri, 17 Aug 2018 10:49:50 -0300
Subject: [PATCH 40/81] User signedIn enters the stream

---
 src/core/client/stream/queries/StreamQuery.tsx | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/core/client/stream/queries/StreamQuery.tsx b/src/core/client/stream/queries/StreamQuery.tsx
index f6ad272bb..f3083da0e 100644
--- a/src/core/client/stream/queries/StreamQuery.tsx
+++ b/src/core/client/stream/queries/StreamQuery.tsx
@@ -1,5 +1,4 @@
 import * as React from "react";
-import { StatelessComponent } from "react";
 import { ReadyState } from "react-relay";
 
 import {
@@ -14,6 +13,7 @@ import {
 import { StreamQueryLocal as Local } from "talk-stream/__generated__/StreamQueryLocal.graphql";
 
 import StreamContainer from "../containers/StreamContainer";
+import { StatelessComponent } from "enzyme";
 
 interface InnerProps {
   local: Local;
@@ -25,6 +25,7 @@ export const render = ({ error, props }: ReadyState<StreamQueryResponse>) => {
   }
 
   if (props) {
+    console.log(props);
     return <StreamContainer asset={props.asset} user={props.me} />;
   }
 
@@ -32,7 +33,7 @@ export const render = ({ error, props }: ReadyState<StreamQueryResponse>) => {
 };
 
 const StreamQuery: StatelessComponent<InnerProps> = ({
-  local: { assetID },
+  local: { assetID, authToken },
 }) => (
   <QueryRenderer<StreamQueryVariables, StreamQueryResponse>
     query={graphql`
@@ -40,7 +41,7 @@ const StreamQuery: StatelessComponent<InnerProps> = ({
         asset(id: $assetID) {
           ...StreamContainer_asset
         }
-        me {
+        me @include(if: $signedIn) {
           id
           username
           displayName
@@ -50,6 +51,7 @@ const StreamQuery: StatelessComponent<InnerProps> = ({
     `}
     variables={{
       assetID,
+      signedIn: !!authToken,
     }}
     render={render}
   />
@@ -59,6 +61,7 @@ const enhanced = withLocalStateContainer<Local>(
   graphql`
     fragment StreamQueryLocal on Local {
       assetID
+      authToken
     }
   `
 )(StreamQuery);

From 310f2502120ed102da4bc1d133d09300fc00f9f0 Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Fri, 17 Aug 2018 11:40:31 -0300
Subject: [PATCH 41/81] Updated tests and latest changes

---
 .../client/auth/mutations/SignOffMutation.ts  | 28 +++++++++++--------
 .../__snapshots__/Stream.spec.tsx.snap        |  3 ++
 .../stream/queries/PermalinkViewQuery.tsx     |  3 +-
 .../client/stream/queries/StreamQuery.tsx     |  4 +--
 .../PermalinkViewQuery.spec.tsx.snap          |  6 +---
 .../test/__snapshots__/loadMore.spec.tsx.snap | 11 ++++++--
 .../__snapshots__/permalinkView.spec.tsx.snap |  6 +++-
 .../permalinkViewAssetNotFound.spec.tsx.snap  |  1 +
 ...permalinkViewCommentNotFound.spec.tsx.snap |  6 +++-
 .../__snapshots__/renderReplies.spec.tsx.snap |  5 +++-
 .../__snapshots__/renderStream.spec.tsx.snap  |  5 +++-
 .../showAllReplies.spec.tsx.snap              | 11 ++++++--
 .../__snapshots__/BaseButton.spec.tsx.snap    |  2 ++
 .../ui/components/TextField/TextField.tsx     |  1 -
 14 files changed, 64 insertions(+), 28 deletions(-)

diff --git a/src/core/client/auth/mutations/SignOffMutation.ts b/src/core/client/auth/mutations/SignOffMutation.ts
index 01aa38cf0..2f34b73fe 100644
--- a/src/core/client/auth/mutations/SignOffMutation.ts
+++ b/src/core/client/auth/mutations/SignOffMutation.ts
@@ -1,24 +1,30 @@
-import { Environment } from "relay-runtime";
-
+import { LOCAL_ID } from "talk-framework/lib/relay/withLocalStateContainer";
 import { TalkContext } from "talk-framework/lib/bootstrap";
 import { createMutationContainer } from "talk-framework/lib/relay";
-import { signOff, SignOffInput } from "talk-framework/rest";
+import { SignOffInput } from "talk-framework/rest";
+import { commitLocalUpdate, Environment } from "relay-runtime";
 
 export type SignOffMutation = (input: SignOffInput) => Promise<void>;
 
 export async function commit(
   environment: Environment,
   input: SignOffInput,
-  { rest, localStorage }: TalkContext
+  { localStorage }: TalkContext
 ) {
-  try {
-    await signOff(rest, input);
+  return commitLocalUpdate(environment, store => {
+    const record = store.get(LOCAL_ID)!;
+    record.setValue("", "authToken");
     localStorage.removeItem("authToken");
-  } catch (error) {
-    localStorage.removeItem("authToken");
-    // tslint:disable-next-line:no-console
-    console.error("error", error);
-  }
+
+    // Force gc to trigger.
+    environment
+      .retain({
+        dataID: "tmp",
+        node: { selections: [] },
+        variables: {},
+      })
+      .dispose();
+  });
 }
 
 export const withSignOffMutation = createMutationContainer("signOff", commit);
diff --git a/src/core/client/stream/components/__snapshots__/Stream.spec.tsx.snap b/src/core/client/stream/components/__snapshots__/Stream.spec.tsx.snap
index 84cb64ea1..01026fb09 100644
--- a/src/core/client/stream/components/__snapshots__/Stream.spec.tsx.snap
+++ b/src/core/client/stream/components/__snapshots__/Stream.spec.tsx.snap
@@ -9,6 +9,7 @@ exports[`renders correctly 1`] = `
   <withContext(createMutationContainer(withContext(createMutationContainer(withContext(withLocalStateContainer(UserBoxContainer)))))) />
   <withContext(createMutationContainer(PostCommentFormContainer))
     assetID="asset-id"
+    signedIn={false}
   />
   <withPropsOnChange(Flex)
     aria-live="polite"
@@ -70,6 +71,7 @@ exports[`when there is more disables load more button 1`] = `
   <withContext(createMutationContainer(withContext(createMutationContainer(withContext(withLocalStateContainer(UserBoxContainer)))))) />
   <withContext(createMutationContainer(PostCommentFormContainer))
     assetID="asset-id"
+    signedIn={false}
   />
   <withPropsOnChange(Flex)
     aria-live="polite"
@@ -145,6 +147,7 @@ exports[`when there is more renders a load more button 1`] = `
   <withContext(createMutationContainer(withContext(createMutationContainer(withContext(withLocalStateContainer(UserBoxContainer)))))) />
   <withContext(createMutationContainer(PostCommentFormContainer))
     assetID="asset-id"
+    signedIn={false}
   />
   <withPropsOnChange(Flex)
     aria-live="polite"
diff --git a/src/core/client/stream/queries/PermalinkViewQuery.tsx b/src/core/client/stream/queries/PermalinkViewQuery.tsx
index 854bd5e73..9c4493423 100644
--- a/src/core/client/stream/queries/PermalinkViewQuery.tsx
+++ b/src/core/client/stream/queries/PermalinkViewQuery.tsx
@@ -14,6 +14,7 @@ import {
 import { PermalinkViewQueryLocal as Local } from "talk-stream/__generated__/PermalinkViewQueryLocal.graphql";
 
 import PermalinkViewContainer from "../containers/PermalinkViewContainer";
+import { Spinner } from "talk-ui/components";
 
 interface InnerProps {
   local: Local;
@@ -29,7 +30,7 @@ export const render = ({
   if (props) {
     return <PermalinkViewContainer comment={props.comment} />;
   }
-  return <div>Loading</div>;
+  return <Spinner />;
 };
 
 const PermalinkViewQuery: StatelessComponent<InnerProps> = ({
diff --git a/src/core/client/stream/queries/StreamQuery.tsx b/src/core/client/stream/queries/StreamQuery.tsx
index f3083da0e..9d03c0d49 100644
--- a/src/core/client/stream/queries/StreamQuery.tsx
+++ b/src/core/client/stream/queries/StreamQuery.tsx
@@ -14,6 +14,7 @@ import { StreamQueryLocal as Local } from "talk-stream/__generated__/StreamQuery
 
 import StreamContainer from "../containers/StreamContainer";
 import { StatelessComponent } from "enzyme";
+import { Spinner } from "talk-ui/components";
 
 interface InnerProps {
   local: Local;
@@ -25,11 +26,10 @@ export const render = ({ error, props }: ReadyState<StreamQueryResponse>) => {
   }
 
   if (props) {
-    console.log(props);
     return <StreamContainer asset={props.asset} user={props.me} />;
   }
 
-  return <div>Loading</div>;
+  return <Spinner />;
 };
 
 const StreamQuery: StatelessComponent<InnerProps> = ({
diff --git a/src/core/client/stream/queries/__snapshots__/PermalinkViewQuery.spec.tsx.snap b/src/core/client/stream/queries/__snapshots__/PermalinkViewQuery.spec.tsx.snap
index ef1057221..b7d371bd9 100644
--- a/src/core/client/stream/queries/__snapshots__/PermalinkViewQuery.spec.tsx.snap
+++ b/src/core/client/stream/queries/__snapshots__/PermalinkViewQuery.spec.tsx.snap
@@ -6,11 +6,7 @@ exports[`renders error 1`] = `
 </div>
 `;
 
-exports[`renders loading 1`] = `
-<div>
-  Loading
-</div>
-`;
+exports[`renders loading 1`] = `<withPropsOnChange(Spinner) />`;
 
 exports[`renders permalink view container 1`] = `
 <withContext(withContext(createMutationContainer(Relay(PermalinkViewContainer))))
diff --git a/src/core/client/stream/test/__snapshots__/loadMore.spec.tsx.snap b/src/core/client/stream/test/__snapshots__/loadMore.spec.tsx.snap
index 1c653ce93..29631dfac 100644
--- a/src/core/client/stream/test/__snapshots__/loadMore.spec.tsx.snap
+++ b/src/core/client/stream/test/__snapshots__/loadMore.spec.tsx.snap
@@ -28,6 +28,7 @@ exports[`loads more comments 1`] = `
               onMouseOut={[Function]}
               onMouseOver={[Function]}
               onTouchEnd={[Function]}
+              type="button"
             >
               Sign in
             </button>
@@ -40,6 +41,7 @@ exports[`loads more comments 1`] = `
               onMouseOut={[Function]}
               onMouseOver={[Function]}
               onTouchEnd={[Function]}
+              type="button"
             >
               Register
             </button>
@@ -68,8 +70,9 @@ exports[`loads more comments 1`] = `
             onMouseOut={[Function]}
             onMouseOver={[Function]}
             onTouchEnd={[Function]}
+            type="button"
           >
-            Sign In and join the conversation
+            Sign in and join the conversation
           </button>
         </form>
         <div
@@ -240,6 +243,7 @@ exports[`renders comment stream 1`] = `
               onMouseOut={[Function]}
               onMouseOver={[Function]}
               onTouchEnd={[Function]}
+              type="button"
             >
               Sign in
             </button>
@@ -252,6 +256,7 @@ exports[`renders comment stream 1`] = `
               onMouseOut={[Function]}
               onMouseOver={[Function]}
               onTouchEnd={[Function]}
+              type="button"
             >
               Register
             </button>
@@ -280,8 +285,9 @@ exports[`renders comment stream 1`] = `
             onMouseOut={[Function]}
             onMouseOver={[Function]}
             onTouchEnd={[Function]}
+            type="button"
           >
-            Sign In and join the conversation
+            Sign in and join the conversation
           </button>
         </form>
         <div
@@ -387,6 +393,7 @@ exports[`renders comment stream 1`] = `
               onMouseOut={[Function]}
               onMouseOver={[Function]}
               onTouchEnd={[Function]}
+              type="button"
             >
               Load More
             </button>
diff --git a/src/core/client/stream/test/__snapshots__/permalinkView.spec.tsx.snap b/src/core/client/stream/test/__snapshots__/permalinkView.spec.tsx.snap
index 666eaa2a2..9a449985f 100644
--- a/src/core/client/stream/test/__snapshots__/permalinkView.spec.tsx.snap
+++ b/src/core/client/stream/test/__snapshots__/permalinkView.spec.tsx.snap
@@ -22,6 +22,7 @@ exports[`renders permalink view 1`] = `
         onMouseOver={[Function]}
         onTouchEnd={[Function]}
         target="_parent"
+        type="button"
       >
         Show all Comments
       </a>
@@ -99,6 +100,7 @@ exports[`show all comments 1`] = `
               onMouseOut={[Function]}
               onMouseOver={[Function]}
               onTouchEnd={[Function]}
+              type="button"
             >
               Sign in
             </button>
@@ -111,6 +113,7 @@ exports[`show all comments 1`] = `
               onMouseOut={[Function]}
               onMouseOver={[Function]}
               onTouchEnd={[Function]}
+              type="button"
             >
               Register
             </button>
@@ -139,8 +142,9 @@ exports[`show all comments 1`] = `
             onMouseOut={[Function]}
             onMouseOver={[Function]}
             onTouchEnd={[Function]}
+            type="button"
           >
-            Sign In and join the conversation
+            Sign in and join the conversation
           </button>
         </form>
         <div
diff --git a/src/core/client/stream/test/__snapshots__/permalinkViewAssetNotFound.spec.tsx.snap b/src/core/client/stream/test/__snapshots__/permalinkViewAssetNotFound.spec.tsx.snap
index 949a40e0c..16f5c0b99 100644
--- a/src/core/client/stream/test/__snapshots__/permalinkViewAssetNotFound.spec.tsx.snap
+++ b/src/core/client/stream/test/__snapshots__/permalinkViewAssetNotFound.spec.tsx.snap
@@ -22,6 +22,7 @@ exports[`renders permalink view with unknown asset 1`] = `
         onMouseOver={[Function]}
         onTouchEnd={[Function]}
         target="_parent"
+        type="button"
       >
         Show all Comments
       </a>
diff --git a/src/core/client/stream/test/__snapshots__/permalinkViewCommentNotFound.spec.tsx.snap b/src/core/client/stream/test/__snapshots__/permalinkViewCommentNotFound.spec.tsx.snap
index 18a0352be..b6f816dbc 100644
--- a/src/core/client/stream/test/__snapshots__/permalinkViewCommentNotFound.spec.tsx.snap
+++ b/src/core/client/stream/test/__snapshots__/permalinkViewCommentNotFound.spec.tsx.snap
@@ -22,6 +22,7 @@ exports[`renders permalink view with unknown comment 1`] = `
         onMouseOver={[Function]}
         onTouchEnd={[Function]}
         target="_parent"
+        type="button"
       >
         Show all Comments
       </a>
@@ -63,6 +64,7 @@ exports[`show all comments 1`] = `
               onMouseOut={[Function]}
               onMouseOver={[Function]}
               onTouchEnd={[Function]}
+              type="button"
             >
               Sign in
             </button>
@@ -75,6 +77,7 @@ exports[`show all comments 1`] = `
               onMouseOut={[Function]}
               onMouseOver={[Function]}
               onTouchEnd={[Function]}
+              type="button"
             >
               Register
             </button>
@@ -103,8 +106,9 @@ exports[`show all comments 1`] = `
             onMouseOut={[Function]}
             onMouseOver={[Function]}
             onTouchEnd={[Function]}
+            type="button"
           >
-            Sign In and join the conversation
+            Sign in and join the conversation
           </button>
         </form>
         <div
diff --git a/src/core/client/stream/test/__snapshots__/renderReplies.spec.tsx.snap b/src/core/client/stream/test/__snapshots__/renderReplies.spec.tsx.snap
index 5134fd802..6ff0be849 100644
--- a/src/core/client/stream/test/__snapshots__/renderReplies.spec.tsx.snap
+++ b/src/core/client/stream/test/__snapshots__/renderReplies.spec.tsx.snap
@@ -28,6 +28,7 @@ exports[`renders comment stream 1`] = `
               onMouseOut={[Function]}
               onMouseOver={[Function]}
               onTouchEnd={[Function]}
+              type="button"
             >
               Sign in
             </button>
@@ -40,6 +41,7 @@ exports[`renders comment stream 1`] = `
               onMouseOut={[Function]}
               onMouseOver={[Function]}
               onTouchEnd={[Function]}
+              type="button"
             >
               Register
             </button>
@@ -68,8 +70,9 @@ exports[`renders comment stream 1`] = `
             onMouseOut={[Function]}
             onMouseOver={[Function]}
             onTouchEnd={[Function]}
+            type="button"
           >
-            Sign In and join the conversation
+            Sign in and join the conversation
           </button>
         </form>
         <div
diff --git a/src/core/client/stream/test/__snapshots__/renderStream.spec.tsx.snap b/src/core/client/stream/test/__snapshots__/renderStream.spec.tsx.snap
index 7ce338f55..d3d07bb71 100644
--- a/src/core/client/stream/test/__snapshots__/renderStream.spec.tsx.snap
+++ b/src/core/client/stream/test/__snapshots__/renderStream.spec.tsx.snap
@@ -28,6 +28,7 @@ exports[`renders comment stream 1`] = `
               onMouseOut={[Function]}
               onMouseOver={[Function]}
               onTouchEnd={[Function]}
+              type="button"
             >
               Sign in
             </button>
@@ -40,6 +41,7 @@ exports[`renders comment stream 1`] = `
               onMouseOut={[Function]}
               onMouseOver={[Function]}
               onTouchEnd={[Function]}
+              type="button"
             >
               Register
             </button>
@@ -68,8 +70,9 @@ exports[`renders comment stream 1`] = `
             onMouseOut={[Function]}
             onMouseOver={[Function]}
             onTouchEnd={[Function]}
+            type="button"
           >
-            Sign In and join the conversation
+            Sign in and join the conversation
           </button>
         </form>
         <div
diff --git a/src/core/client/stream/test/__snapshots__/showAllReplies.spec.tsx.snap b/src/core/client/stream/test/__snapshots__/showAllReplies.spec.tsx.snap
index 27a76add0..63af12a8a 100644
--- a/src/core/client/stream/test/__snapshots__/showAllReplies.spec.tsx.snap
+++ b/src/core/client/stream/test/__snapshots__/showAllReplies.spec.tsx.snap
@@ -28,6 +28,7 @@ exports[`renders comment stream 1`] = `
               onMouseOut={[Function]}
               onMouseOver={[Function]}
               onTouchEnd={[Function]}
+              type="button"
             >
               Sign in
             </button>
@@ -40,6 +41,7 @@ exports[`renders comment stream 1`] = `
               onMouseOut={[Function]}
               onMouseOver={[Function]}
               onTouchEnd={[Function]}
+              type="button"
             >
               Register
             </button>
@@ -68,8 +70,9 @@ exports[`renders comment stream 1`] = `
             onMouseOut={[Function]}
             onMouseOver={[Function]}
             onTouchEnd={[Function]}
+            type="button"
           >
-            Sign In and join the conversation
+            Sign in and join the conversation
           </button>
         </form>
         <div
@@ -176,6 +179,7 @@ exports[`renders comment stream 1`] = `
                         onMouseOut={[Function]}
                         onMouseOver={[Function]}
                         onTouchEnd={[Function]}
+                        type="button"
                       >
                         Show All Replies
                       </button>
@@ -220,6 +224,7 @@ exports[`show all replies 1`] = `
               onMouseOut={[Function]}
               onMouseOver={[Function]}
               onTouchEnd={[Function]}
+              type="button"
             >
               Sign in
             </button>
@@ -232,6 +237,7 @@ exports[`show all replies 1`] = `
               onMouseOut={[Function]}
               onMouseOver={[Function]}
               onTouchEnd={[Function]}
+              type="button"
             >
               Register
             </button>
@@ -260,8 +266,9 @@ exports[`show all replies 1`] = `
             onMouseOut={[Function]}
             onMouseOver={[Function]}
             onTouchEnd={[Function]}
+            type="button"
           >
-            Sign In and join the conversation
+            Sign in and join the conversation
           </button>
         </form>
         <div
diff --git a/src/core/client/ui/components/BaseButton/__snapshots__/BaseButton.spec.tsx.snap b/src/core/client/ui/components/BaseButton/__snapshots__/BaseButton.spec.tsx.snap
index c6fd97a78..84b67f69c 100644
--- a/src/core/client/ui/components/BaseButton/__snapshots__/BaseButton.spec.tsx.snap
+++ b/src/core/client/ui/components/BaseButton/__snapshots__/BaseButton.spec.tsx.snap
@@ -9,6 +9,7 @@ exports[`renders as anchor 1`] = `
   onMouseOut={[Function]}
   onMouseOver={[Function]}
   onTouchEnd={[Function]}
+  type="button"
 >
   Push Me
 </a>
@@ -23,6 +24,7 @@ exports[`renders correctly 1`] = `
   onMouseOut={[Function]}
   onMouseOver={[Function]}
   onTouchEnd={[Function]}
+  type="button"
 >
   Push Me
 </button>
diff --git a/src/core/client/ui/components/TextField/TextField.tsx b/src/core/client/ui/components/TextField/TextField.tsx
index 56894ba2f..05b1f7bc6 100644
--- a/src/core/client/ui/components/TextField/TextField.tsx
+++ b/src/core/client/ui/components/TextField/TextField.tsx
@@ -84,7 +84,6 @@ const TextField: StatelessComponent<TextFieldProps> = props => {
 
 TextField.defaultProps = {
   color: "regular",
-  fullWidth: true,
   placeholder: "",
 };
 

From fb2af720ed65cc05cc4f45e1bab7a9a47203e8a6 Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Fri, 17 Aug 2018 11:45:57 -0300
Subject: [PATCH 42/81] Tests updated

---
 .../stream/queries/__snapshots__/StreamQuery.spec.tsx.snap  | 6 +-----
 .../FormField/__snapshots__/FormField.spec.tsx.snap         | 2 +-
 .../TextField/__snapshots__/TextField.spec.tsx.snap         | 2 +-
 3 files changed, 3 insertions(+), 7 deletions(-)

diff --git a/src/core/client/stream/queries/__snapshots__/StreamQuery.spec.tsx.snap b/src/core/client/stream/queries/__snapshots__/StreamQuery.spec.tsx.snap
index 317eb3f4a..cd2a53005 100644
--- a/src/core/client/stream/queries/__snapshots__/StreamQuery.spec.tsx.snap
+++ b/src/core/client/stream/queries/__snapshots__/StreamQuery.spec.tsx.snap
@@ -6,11 +6,7 @@ exports[`renders error 1`] = `
 </div>
 `;
 
-exports[`renders loading 1`] = `
-<div>
-  Loading
-</div>
-`;
+exports[`renders loading 1`] = `<withPropsOnChange(Spinner) />`;
 
 exports[`renders stream container 1`] = `
 <Relay(StreamContainer)
diff --git a/src/core/client/ui/components/FormField/__snapshots__/FormField.spec.tsx.snap b/src/core/client/ui/components/FormField/__snapshots__/FormField.spec.tsx.snap
index 36cb45582..728f3a77c 100644
--- a/src/core/client/ui/components/FormField/__snapshots__/FormField.spec.tsx.snap
+++ b/src/core/client/ui/components/FormField/__snapshots__/FormField.spec.tsx.snap
@@ -23,7 +23,7 @@ exports[`works with multiple form components 1`] = `
     A unique identifier displayed on your comments. You may use “_” and “.”
   </p>
   <input
-    className="TextField-root TextField-colorRegular TextField-fullWidth"
+    className="TextField-root TextField-colorRegular"
     placeholder=""
   />
 </div>
diff --git a/src/core/client/ui/components/TextField/__snapshots__/TextField.spec.tsx.snap b/src/core/client/ui/components/TextField/__snapshots__/TextField.spec.tsx.snap
index 45486b121..a277de918 100644
--- a/src/core/client/ui/components/TextField/__snapshots__/TextField.spec.tsx.snap
+++ b/src/core/client/ui/components/TextField/__snapshots__/TextField.spec.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`renders correctly 1`] = `
 <input
-  className="TextField-root TextField-colorRegular TextField-fullWidth custom"
+  className="TextField-root TextField-colorRegular custom"
   defaultValue="Hello World"
   placeholder=""
 />

From 1c135a9ccb6b5cb11ea5f3769058697a3802a7fa Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Fri, 17 Aug 2018 12:02:07 -0300
Subject: [PATCH 43/81] Adding variable to the scope and contemplating
 undefined from the BE

---
 src/core/client/stream/components/Stream.tsx           | 2 +-
 src/core/client/stream/containers/StreamContainer.tsx  | 2 +-
 src/core/client/stream/containers/UserBoxContainer.tsx | 2 +-
 src/core/client/stream/queries/StreamQuery.tsx         | 2 +-
 4 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/core/client/stream/components/Stream.tsx b/src/core/client/stream/components/Stream.tsx
index 3d113df44..a74435585 100644
--- a/src/core/client/stream/components/Stream.tsx
+++ b/src/core/client/stream/components/Stream.tsx
@@ -19,7 +19,7 @@ export interface StreamProps {
   onLoadMore?: () => void;
   hasMore?: boolean;
   disableLoadMore?: boolean;
-  user: User | null;
+  user: User | null | undefined;
 }
 
 const Stream: StatelessComponent<StreamProps> = props => {
diff --git a/src/core/client/stream/containers/StreamContainer.tsx b/src/core/client/stream/containers/StreamContainer.tsx
index 1a185c902..4df5afaf5 100644
--- a/src/core/client/stream/containers/StreamContainer.tsx
+++ b/src/core/client/stream/containers/StreamContainer.tsx
@@ -14,7 +14,7 @@ import { User } from "../containers/UserBoxContainer";
 
 interface InnerProps {
   asset: Data;
-  user: User | null;
+  user: User | null | undefined;
   relay: RelayPaginationProp;
 }
 
diff --git a/src/core/client/stream/containers/UserBoxContainer.tsx b/src/core/client/stream/containers/UserBoxContainer.tsx
index 0a9d72561..51b09e914 100644
--- a/src/core/client/stream/containers/UserBoxContainer.tsx
+++ b/src/core/client/stream/containers/UserBoxContainer.tsx
@@ -29,7 +29,7 @@ export interface User {
 
 interface InnerProps {
   local: Local;
-  user: User | null;
+  user: User | null | undefined;
   showAuthPopup: ShowAuthPopupMutation;
   setAuthPopupState: SetAuthPopupStateMutation;
 }
diff --git a/src/core/client/stream/queries/StreamQuery.tsx b/src/core/client/stream/queries/StreamQuery.tsx
index 9d03c0d49..abcab7787 100644
--- a/src/core/client/stream/queries/StreamQuery.tsx
+++ b/src/core/client/stream/queries/StreamQuery.tsx
@@ -37,7 +37,7 @@ const StreamQuery: StatelessComponent<InnerProps> = ({
 }) => (
   <QueryRenderer<StreamQueryVariables, StreamQueryResponse>
     query={graphql`
-      query StreamQuery($assetID: ID!) {
+      query StreamQuery($assetID: ID!, $signedIn: Boolean!) {
         asset(id: $assetID) {
           ...StreamContainer_asset
         }

From fe3f6e8d41d8e2144f4d96fd18d5702420a7011f Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Fri, 17 Aug 2018 12:10:09 -0300
Subject: [PATCH 44/81] Missing console.log

---
 src/core/client/auth/components/SignIn.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/core/client/auth/components/SignIn.tsx b/src/core/client/auth/components/SignIn.tsx
index 24f2cb2f3..98b0d6e70 100644
--- a/src/core/client/auth/components/SignIn.tsx
+++ b/src/core/client/auth/components/SignIn.tsx
@@ -32,7 +32,6 @@ export interface SignInForm {
 }
 
 const SignIn: StatelessComponent<SignInForm> = props => {
-  console.log(props);
   return (
     <Form onSubmit={props.onSubmit}>
       {({ handleSubmit, submitting }) => (

From 348ce99828aab391b48a4e2a1436034604fb97d8 Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Fri, 17 Aug 2018 12:17:22 -0300
Subject: [PATCH 45/81] TSLint imports ordered

---
 src/core/client/auth/mutations/SignOffMutation.ts     | 4 ++--
 src/core/client/stream/queries/PermalinkViewQuery.tsx | 2 +-
 src/core/client/stream/queries/StreamQuery.tsx        | 7 ++-----
 3 files changed, 5 insertions(+), 8 deletions(-)

diff --git a/src/core/client/auth/mutations/SignOffMutation.ts b/src/core/client/auth/mutations/SignOffMutation.ts
index 2f34b73fe..5a1bf5939 100644
--- a/src/core/client/auth/mutations/SignOffMutation.ts
+++ b/src/core/client/auth/mutations/SignOffMutation.ts
@@ -1,8 +1,8 @@
-import { LOCAL_ID } from "talk-framework/lib/relay/withLocalStateContainer";
+import { commitLocalUpdate, Environment } from "relay-runtime";
 import { TalkContext } from "talk-framework/lib/bootstrap";
 import { createMutationContainer } from "talk-framework/lib/relay";
+import { LOCAL_ID } from "talk-framework/lib/relay/withLocalStateContainer";
 import { SignOffInput } from "talk-framework/rest";
-import { commitLocalUpdate, Environment } from "relay-runtime";
 
 export type SignOffMutation = (input: SignOffInput) => Promise<void>;
 
diff --git a/src/core/client/stream/queries/PermalinkViewQuery.tsx b/src/core/client/stream/queries/PermalinkViewQuery.tsx
index 9c4493423..3a9b22f71 100644
--- a/src/core/client/stream/queries/PermalinkViewQuery.tsx
+++ b/src/core/client/stream/queries/PermalinkViewQuery.tsx
@@ -13,8 +13,8 @@ import {
 } from "talk-stream/__generated__/PermalinkViewQuery.graphql";
 import { PermalinkViewQueryLocal as Local } from "talk-stream/__generated__/PermalinkViewQueryLocal.graphql";
 
-import PermalinkViewContainer from "../containers/PermalinkViewContainer";
 import { Spinner } from "talk-ui/components";
+import PermalinkViewContainer from "../containers/PermalinkViewContainer";
 
 interface InnerProps {
   local: Local;
diff --git a/src/core/client/stream/queries/StreamQuery.tsx b/src/core/client/stream/queries/StreamQuery.tsx
index abcab7787..78c118cdd 100644
--- a/src/core/client/stream/queries/StreamQuery.tsx
+++ b/src/core/client/stream/queries/StreamQuery.tsx
@@ -1,6 +1,5 @@
-import * as React from "react";
+import React, { StatelessComponent } from "react";
 import { ReadyState } from "react-relay";
-
 import {
   graphql,
   QueryRenderer,
@@ -11,10 +10,8 @@ import {
   StreamQueryVariables,
 } from "talk-stream/__generated__/StreamQuery.graphql";
 import { StreamQueryLocal as Local } from "talk-stream/__generated__/StreamQueryLocal.graphql";
-
-import StreamContainer from "../containers/StreamContainer";
-import { StatelessComponent } from "enzyme";
 import { Spinner } from "talk-ui/components";
+import StreamContainer from "../containers/StreamContainer";
 
 interface InnerProps {
   local: Local;

From 5aad008261f7ab7f283fd17021586c69de2d64a3 Mon Sep 17 00:00:00 2001
From: Wyatt Johnson <wyattjoh@gmail.com>
Date: Tue, 21 Aug 2018 14:22:04 -0600
Subject: [PATCH 46/81] feat: added token blacklisting

---
 src/core/server/app/handlers/auth/local.ts    | 42 +++++++++++++++-
 .../server/app/middleware/passport/index.ts   | 48 +++++++++++++++++++
 .../server/app/middleware/passport/jwt.ts     | 42 ++++++++++++++--
 src/core/server/app/router.ts                 | 15 ++++--
 4 files changed, 136 insertions(+), 11 deletions(-)

diff --git a/src/core/server/app/handlers/auth/local.ts b/src/core/server/app/handlers/auth/local.ts
index 48daf4c32..25688d25a 100644
--- a/src/core/server/app/handlers/auth/local.ts
+++ b/src/core/server/app/handlers/auth/local.ts
@@ -1,8 +1,12 @@
 import { RequestHandler } from "express";
+import { Redis } from "ioredis";
 import Joi from "joi";
 import { Db } from "mongodb";
 
-import { handleSuccessfulLogin } from "talk-server/app/middleware/passport";
+import {
+  handleLogout,
+  handleSuccessfulLogin,
+} from "talk-server/app/middleware/passport";
 import { JWTSigningConfig } from "talk-server/app/middleware/passport/jwt";
 import { validate } from "talk-server/app/request/body";
 import { GQLUSER_ROLE } from "talk-server/graph/tenant/schema/__generated__/types";
@@ -74,3 +78,39 @@ export const signupHandler = (options: SignupOptions): RequestHandler => async (
     return next(err);
   }
 };
+
+export interface LogoutOptions {
+  redis: Redis;
+}
+
+export const logoutHandler = (options: LogoutOptions): RequestHandler => async (
+  req: Request,
+  res,
+  next
+) => {
+  try {
+    // TODO: rate limit based on the IP address and user agent.
+
+    // Tenant is guaranteed at this point.
+    const tenant = req.tenant!;
+
+    // Check to ensure that the local integration has been enabled.
+    if (!tenant.auth.integrations.local.enabled) {
+      // TODO: replace with better error.
+      return next(new Error("integration is disabled"));
+    }
+
+    // Get the user on the request.
+    const user = req.user;
+    if (!user) {
+      return next(
+        new Error("cannot logout when there is no user on the request")
+      );
+    }
+
+    // Delegate to the logout handler.
+    return handleLogout(options.redis, req, res);
+  } catch (err) {
+    return next(err);
+  }
+};
diff --git a/src/core/server/app/middleware/passport/index.ts b/src/core/server/app/middleware/passport/index.ts
index ae1a3406f..b5f06ba03 100644
--- a/src/core/server/app/middleware/passport/index.ts
+++ b/src/core/server/app/middleware/passport/index.ts
@@ -1,10 +1,15 @@
 import { NextFunction, RequestHandler, Response } from "express";
+import { Redis } from "ioredis";
+import Joi from "joi";
+import jwt from "jsonwebtoken";
 import { Db } from "mongodb";
 import passport, { Authenticator } from "passport";
 
 import { Config } from "talk-common/config";
 import {
+  blacklistJWT,
   createJWTStrategy,
+  extractJWTFromRequest,
   JWTSigningConfig,
   SigningTokenOptions,
   signTokenString,
@@ -12,6 +17,7 @@ import {
 import { createLocalStrategy } from "talk-server/app/middleware/passport/local";
 import { createOIDCStrategy } from "talk-server/app/middleware/passport/oidc";
 import { createSSOStrategy } from "talk-server/app/middleware/passport/sso";
+import { validate } from "talk-server/app/request/body";
 import { User } from "talk-server/models/user";
 import TenantCache from "talk-server/services/tenant/cache";
 import { Request } from "talk-server/types/express";
@@ -25,6 +31,7 @@ export type VerifyCallback = (
 export interface PassportOptions {
   config: Config;
   mongo: Db;
+  redis: Redis;
   signingConfig: JWTSigningConfig;
   tenantCache: TenantCache;
 }
@@ -50,6 +57,47 @@ export function createPassport(
   return auth;
 }
 
+interface LogoutToken {
+  jti: string;
+  exp: number;
+}
+
+const LogoutTokenSchema = Joi.object().keys({
+  jti: Joi.string(),
+  exp: Joi.number(),
+});
+
+export async function handleLogout(redis: Redis, req: Request, res: Response) {
+  // Extract the token from the request.
+  const token = extractJWTFromRequest(req);
+  if (!token) {
+    // TODO: (wyattjoh) return a better error.
+    throw new Error("logout requires a token on the request, none was found");
+  }
+
+  // Decode the token.
+  const decoded = jwt.decode(token, {});
+  if (!decoded) {
+    // TODO: (wyattjoh) return a better error.
+    throw new Error(
+      "logout requires a token on the request, token was invalid"
+    );
+  }
+
+  // Grab the JTI from the decoded token.
+  const { jti, exp }: LogoutToken = validate(LogoutTokenSchema, decoded);
+
+  // Compute the number of seconds that the token will be valid for.
+  const validFor = exp - Date.now() / 1000;
+  if (validFor > 0) {
+    // Invalidate the token, the expiry is in the future and it needs to be
+    // blacklisted.
+    await blacklistJWT(redis, jti, validFor);
+  }
+
+  return res.sendStatus(204);
+}
+
 export async function handleSuccessfulLogin(
   user: User,
   signingConfig: JWTSigningConfig,
diff --git a/src/core/server/app/middleware/passport/jwt.ts b/src/core/server/app/middleware/passport/jwt.ts
index da4d0be11..257b67d1c 100644
--- a/src/core/server/app/middleware/passport/jwt.ts
+++ b/src/core/server/app/middleware/passport/jwt.ts
@@ -1,8 +1,9 @@
+import { Redis } from "ioredis";
 import jwt, { SignOptions } from "jsonwebtoken";
-import uuid from "uuid";
-
 import { Db } from "mongodb";
 import { Strategy } from "passport-strategy";
+import uuid from "uuid";
+
 import { Config } from "talk-common/config";
 import { retrieveUser, User } from "talk-server/models/user";
 import { Request } from "talk-server/types/express";
@@ -38,6 +39,31 @@ export function extractJWTFromRequest(req: Request) {
   return null;
 }
 
+function generateJTIBlacklistKey(jti: string) {
+  // jtib: JTI Blacklist namespace.
+  return `jtib:${jti}`;
+}
+
+export async function blacklistJWT(
+  redis: Redis,
+  jti: string,
+  validFor: number
+) {
+  await redis.setex(
+    generateJTIBlacklistKey(jti),
+    Math.ceil(validFor),
+    Date.now()
+  );
+}
+
+export async function checkBlacklistJWT(redis: Redis, jti: string) {
+  const expiredAtString = await redis.get(generateJTIBlacklistKey(jti));
+  if (expiredAtString) {
+    // TODO: (wyattjoh) return a better error.
+    throw new Error("JWT exists in blacklist");
+  }
+}
+
 export enum AsymmetricSigningAlgorithm {
   RS256 = "RS256",
   RS384 = "RS384",
@@ -139,6 +165,7 @@ export interface JWTToken {
 export interface JWTStrategyOptions {
   signingConfig: JWTSigningConfig;
   mongo: Db;
+  redis: Redis;
 }
 
 export class JWTStrategy extends Strategy {
@@ -146,12 +173,14 @@ export class JWTStrategy extends Strategy {
 
   private signingConfig: JWTSigningConfig;
   private mongo: Db;
+  private redis: Redis;
 
-  constructor({ signingConfig, mongo }: JWTStrategyOptions) {
+  constructor({ signingConfig, mongo, redis }: JWTStrategyOptions) {
     super();
 
     this.signingConfig = signingConfig;
     this.mongo = mongo;
+    this.redis = redis;
   }
 
   public authenticate(req: Request) {
@@ -179,13 +208,16 @@ export class JWTStrategy extends Strategy {
         // Use the algorithm specified in the configuration.
         algorithms: [this.signingConfig.algorithm],
       },
-      async (err: Error | undefined, { sub }: JWTToken) => {
+      async (err: Error | undefined, { jti, sub }: JWTToken) => {
         if (err) {
           return this.fail(err, 401);
         }
 
         try {
-          // Find the user.
+          // Check to see if the token has been blacklisted.
+          await checkBlacklistJWT(this.redis, jti);
+
+          // Find the user referenced by the token.
           const user = await retrieveUser(this.mongo, tenant.id, sub);
 
           // Return them! The user may be null, but that's ok here.
diff --git a/src/core/server/app/router.ts b/src/core/server/app/router.ts
index 75b195ab3..c298a40aa 100644
--- a/src/core/server/app/router.ts
+++ b/src/core/server/app/router.ts
@@ -1,7 +1,10 @@
 import express from "express";
 import passport from "passport";
 
-import { signupHandler } from "talk-server/app/handlers/auth/local";
+import {
+  logoutHandler,
+  signupHandler,
+} from "talk-server/app/handlers/auth/local";
 import { streamHandler } from "talk-server/app/handlers/embed/stream";
 import { apiErrorHandler } from "talk-server/app/middleware/error";
 import { errorLogger } from "talk-server/app/middleware/logging";
@@ -64,15 +67,17 @@ function createNewAuthRouter(app: AppOptions, options: RouterOptions) {
   const router = express.Router();
 
   // Mount the passport routes.
+  router.delete(
+    "/",
+    options.passport.authenticate("jwt", { session: false }),
+    logoutHandler({ redis: app.redis })
+  );
+
   router.post(
     "/local",
     express.json(),
     wrapAuthn(options.passport, app.signingConfig, "local")
   );
-
-  // TODO (bc) - add delete user serverside
-  router.delete("/local", express.json());
-
   router.post(
     "/local/signup",
     express.json(),

From bace76decc9f63a516b40b183e9332cce52eae45 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bel=C3=A9n=20Curcio?= <curciobelen@gmail.com>
Date: Tue, 21 Aug 2018 22:47:39 -0300
Subject: [PATCH 47/81] changes

---
 src/core/client/auth/components/App.css       |  1 +
 .../client/auth/components/ForgotPassword.css |  6 ---
 .../client/auth/components/ForgotPassword.tsx | 10 ++---
 .../client/auth/components/ResetPassword.css  |  6 ---
 .../client/auth/components/ResetPassword.tsx  | 10 ++---
 src/core/client/auth/components/SignIn.css    |  1 -
 src/core/client/auth/components/SignIn.tsx    |  2 +-
 src/core/client/auth/components/SignUp.css    |  1 -
 src/core/client/auth/components/SignUp.tsx    |  2 +-
 .../client/auth/mutations/SignInMutation.ts   |  2 +-
 .../client/auth/mutations/SignUpMutation.ts   |  2 +-
 .../framework/lib/errors/exceptionError.ts    |  4 --
 src/core/client/framework/lib/errors/index.ts |  1 -
 src/core/client/framework/lib/rest.ts         |  2 +
 src/core/client/stream/components/Auth.css    | 14 -------
 .../client/ui/components/Spinner/Spinner.css  |  5 ---
 .../client/ui/components/Spinner/Spinner.tsx  | 38 +++++++++----------
 .../ui/components/TextField/TextField.tsx     |  9 +++--
 18 files changed, 38 insertions(+), 78 deletions(-)
 delete mode 100644 src/core/client/framework/lib/errors/exceptionError.ts
 delete mode 100644 src/core/client/stream/components/Auth.css

diff --git a/src/core/client/auth/components/App.css b/src/core/client/auth/components/App.css
index 3f61a7cae..dadd4d308 100644
--- a/src/core/client/auth/components/App.css
+++ b/src/core/client/auth/components/App.css
@@ -12,4 +12,5 @@
 
 .root {
   width: 100%;
+  padding-top: calc(5 * var(--spacing-unit));
 }
diff --git a/src/core/client/auth/components/ForgotPassword.css b/src/core/client/auth/components/ForgotPassword.css
index 8489081c1..667e35b7a 100644
--- a/src/core/client/auth/components/ForgotPassword.css
+++ b/src/core/client/auth/components/ForgotPassword.css
@@ -1,9 +1,3 @@
 .root {
   width: 330px;
-  padding-top: calc(5 * var(--spacing-unit));
-}
-
-.footer {
-  padding-top: var(--spacing-unit);
-  width: 100%;
 }
diff --git a/src/core/client/auth/components/ForgotPassword.tsx b/src/core/client/auth/components/ForgotPassword.tsx
index e99230c9e..eb198aa0e 100644
--- a/src/core/client/auth/components/ForgotPassword.tsx
+++ b/src/core/client/auth/components/ForgotPassword.tsx
@@ -32,7 +32,7 @@ const ForgotPassword: StatelessComponent<ForgotPasswordForm> = props => {
     <Form onSubmit={props.onSubmit}>
       {({ handleSubmit }) => (
         <form autoComplete="off" onSubmit={handleSubmit}>
-          <Flex itemGutter direction="column" className={styles.root}>
+          <Flex itemGutter="double" direction="column" className={styles.root}>
             <Typography variant="heading1" align="center">
               Forgot Password
             </Typography>
@@ -62,11 +62,9 @@ const ForgotPassword: StatelessComponent<ForgotPasswordForm> = props => {
                 </FormField>
               )}
             </Field>
-            <div className={styles.footer}>
-              <Button variant="filled" color="primary" size="large" fullWidth>
-                Send Email
-              </Button>
-            </div>
+            <Button variant="filled" color="primary" size="large" fullWidth>
+              Send Email
+            </Button>
           </Flex>
         </form>
       )}
diff --git a/src/core/client/auth/components/ResetPassword.css b/src/core/client/auth/components/ResetPassword.css
index 8489081c1..667e35b7a 100644
--- a/src/core/client/auth/components/ResetPassword.css
+++ b/src/core/client/auth/components/ResetPassword.css
@@ -1,9 +1,3 @@
 .root {
   width: 330px;
-  padding-top: calc(5 * var(--spacing-unit));
-}
-
-.footer {
-  padding-top: var(--spacing-unit);
-  width: 100%;
 }
diff --git a/src/core/client/auth/components/ResetPassword.tsx b/src/core/client/auth/components/ResetPassword.tsx
index a108d5e39..e58553e85 100644
--- a/src/core/client/auth/components/ResetPassword.tsx
+++ b/src/core/client/auth/components/ResetPassword.tsx
@@ -35,7 +35,7 @@ const ResetPassword: StatelessComponent<ResetPasswordForm> = props => {
     <Form onSubmit={props.onSubmit}>
       {({ handleSubmit }) => (
         <form autoComplete="off" onSubmit={handleSubmit}>
-          <Flex itemGutter direction="column" className={styles.root}>
+          <Flex itemGutter="double" direction="column" className={styles.root}>
             <Typography variant="heading1" align="center">
               Reset Password
             </Typography>
@@ -96,11 +96,9 @@ const ResetPassword: StatelessComponent<ResetPasswordForm> = props => {
                 </FormField>
               )}
             </Field>
-            <div className={styles.footer}>
-              <Button variant="filled" color="primary" size="large" fullWidth>
-                Reset Password
-              </Button>
-            </div>
+            <Button variant="filled" color="primary" size="large" fullWidth>
+              Reset Password
+            </Button>
           </Flex>
         </form>
       )}
diff --git a/src/core/client/auth/components/SignIn.css b/src/core/client/auth/components/SignIn.css
index 8110981fc..47bd21255 100644
--- a/src/core/client/auth/components/SignIn.css
+++ b/src/core/client/auth/components/SignIn.css
@@ -1,6 +1,5 @@
 .root {
   width: 330px;
-  padding-top: calc(5 * var(--spacing-unit));
 }
 
 .forgotPassword {
diff --git a/src/core/client/auth/components/SignIn.tsx b/src/core/client/auth/components/SignIn.tsx
index db73e76bd..0c9191a5a 100644
--- a/src/core/client/auth/components/SignIn.tsx
+++ b/src/core/client/auth/components/SignIn.tsx
@@ -38,7 +38,7 @@ const SignIn: StatelessComponent<SignInForm> = props => {
     <Form onSubmit={props.onSubmit}>
       {({ handleSubmit, submitting }) => (
         <form autoComplete="off" onSubmit={handleSubmit}>
-          <Flex itemGutter direction="column" className={styles.root}>
+          <Flex itemGutter="double" direction="column" className={styles.root}>
             <Typography variant="heading1" align="center">
               Sign in to join the conversation
             </Typography>
diff --git a/src/core/client/auth/components/SignUp.css b/src/core/client/auth/components/SignUp.css
index 2b939d10f..1003a63c7 100644
--- a/src/core/client/auth/components/SignUp.css
+++ b/src/core/client/auth/components/SignUp.css
@@ -2,7 +2,6 @@
   width: 330px;
 }
 
-.footer,
 .subFooter {
   padding-top: var(--spacing-unit);
   width: 100%;
diff --git a/src/core/client/auth/components/SignUp.tsx b/src/core/client/auth/components/SignUp.tsx
index c1454fb16..b80837a1d 100644
--- a/src/core/client/auth/components/SignUp.tsx
+++ b/src/core/client/auth/components/SignUp.tsx
@@ -42,7 +42,7 @@ const SignUp: StatelessComponent<SignUpForm> = props => {
     <Form onSubmit={props.onSubmit}>
       {({ handleSubmit, submitting }) => (
         <form autoComplete="off" onSubmit={handleSubmit}>
-          <Flex itemGutter direction="column" className={styles.root}>
+          <Flex itemGutter="double" direction="column" className={styles.root}>
             <Flex direction="column">
               <Typography variant="heading1" align="center">
                 Sign up to join the conversation
diff --git a/src/core/client/auth/mutations/SignInMutation.ts b/src/core/client/auth/mutations/SignInMutation.ts
index 16fbf52d4..de02a33f5 100644
--- a/src/core/client/auth/mutations/SignInMutation.ts
+++ b/src/core/client/auth/mutations/SignInMutation.ts
@@ -17,7 +17,7 @@ export async function commit(
     window.close();
   } catch (err) {
     postMessage.send("authError", err.toString(), window.opener);
-    throw Error(err.message);
+    throw err;
   }
 }
 
diff --git a/src/core/client/auth/mutations/SignUpMutation.ts b/src/core/client/auth/mutations/SignUpMutation.ts
index 76e6442c2..f5afbaa77 100644
--- a/src/core/client/auth/mutations/SignUpMutation.ts
+++ b/src/core/client/auth/mutations/SignUpMutation.ts
@@ -17,7 +17,7 @@ export async function commit(
     window.close();
   } catch (err) {
     postMessage.send("authError", err.toString(), window.opener);
-    throw Error(err.toString());
+    throw err;
   }
 }
 
diff --git a/src/core/client/framework/lib/errors/exceptionError.ts b/src/core/client/framework/lib/errors/exceptionError.ts
deleted file mode 100644
index 16e79eaa6..000000000
--- a/src/core/client/framework/lib/errors/exceptionError.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export interface ExceptionError {
-  message: string;
-  stack: string;
-}
diff --git a/src/core/client/framework/lib/errors/index.ts b/src/core/client/framework/lib/errors/index.ts
index 2d58d8d08..8372f3429 100644
--- a/src/core/client/framework/lib/errors/index.ts
+++ b/src/core/client/framework/lib/errors/index.ts
@@ -2,6 +2,5 @@ export { default as NetworkError } from "./networkError";
 export { default as UnknownServerError } from "./unknownServerError";
 export { default as BadUserInputError } from "./badUserInputError";
 export { default as GraphQLError } from "./graphqlError";
-export { default as ExceptionError } from "./exceptionError";
 
 export * from "./graphqlError";
diff --git a/src/core/client/framework/lib/rest.ts b/src/core/client/framework/lib/rest.ts
index b071aedb4..9808a4555 100644
--- a/src/core/client/framework/lib/rest.ts
+++ b/src/core/client/framework/lib/rest.ts
@@ -17,6 +17,8 @@ const buildOptions = (inputOptions: RequestInit = {}) => {
   return options;
 };
 
+// TODO (bc): Wrap response errors into error objects once server errors have been defined
+
 const handleResp = async (res: Response) => {
   if (res.status === 404) {
     const response = await res.text();
diff --git a/src/core/client/stream/components/Auth.css b/src/core/client/stream/components/Auth.css
deleted file mode 100644
index 35aeadf26..000000000
--- a/src/core/client/stream/components/Auth.css
+++ /dev/null
@@ -1,14 +0,0 @@
-.root {
-  padding: var(--spacing-unit);
-  color: var(--palette-text-primary);
-}
-
-.text {
-  padding-right: calc(0.5 * var(--spacing-unit));
-  line-height: 1px;
-}
-
-.horizontalSeparator {
-  font-size: 1.3em;
-  color: var(--palette-text-primary);
-}
diff --git a/src/core/client/ui/components/Spinner/Spinner.css b/src/core/client/ui/components/Spinner/Spinner.css
index 5dd6c6acf..4115e48a1 100644
--- a/src/core/client/ui/components/Spinner/Spinner.css
+++ b/src/core/client/ui/components/Spinner/Spinner.css
@@ -1,8 +1,3 @@
-.root {
-  display: block;
-  text-align: center;
-}
-
 .spinner {
   animation: rotator 1.4s linear infinite;
 }
diff --git a/src/core/client/ui/components/Spinner/Spinner.tsx b/src/core/client/ui/components/Spinner/Spinner.tsx
index 2edb5e029..1531a8caf 100644
--- a/src/core/client/ui/components/Spinner/Spinner.tsx
+++ b/src/core/client/ui/components/Spinner/Spinner.tsx
@@ -17,28 +17,26 @@ export interface SpinnerProps {
 const Spinner: StatelessComponent<SpinnerProps> = props => {
   const { className, classes } = props;
 
-  const rootClassName = cn(classes.root, className);
+  const rootClassName = cn(classes.spinner, className);
 
   return (
-    <div className={rootClassName}>
-      <svg
-        className={styles.spinner}
-        width="40px"
-        height="40px"
-        viewBox="0 0 66 66"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <circle
-          className={styles.path}
-          fill="none"
-          strokeWidth="6"
-          strokeLinecap="round"
-          cx="33"
-          cy="33"
-          r="30"
-        />
-      </svg>
-    </div>
+    <svg
+      className={rootClassName}
+      width="40px"
+      height="40px"
+      viewBox="0 0 66 66"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <circle
+        className={styles.path}
+        fill="none"
+        strokeWidth="6"
+        strokeLinecap="round"
+        cx="33"
+        cy="33"
+        r="30"
+      />
+    </svg>
   );
 };
 
diff --git a/src/core/client/ui/components/TextField/TextField.tsx b/src/core/client/ui/components/TextField/TextField.tsx
index 05b1f7bc6..46d223ff3 100644
--- a/src/core/client/ui/components/TextField/TextField.tsx
+++ b/src/core/client/ui/components/TextField/TextField.tsx
@@ -1,5 +1,5 @@
 import cn from "classnames";
-import React from "react";
+import React, { ChangeEvent, EventHandler } from "react";
 import { StatelessComponent } from "react";
 import { withStyles } from "talk-ui/hocs";
 import * as styles from "./TextField.css";
@@ -42,13 +42,13 @@ export interface TextFieldProps {
    */
   name?: string;
   /**
-   * type
+   * type: Here we only allow text type values
    */
-  type?: string;
+  type?: "email" | "number" | "password" | "search" | "tel" | "text" | "url";
   /**
    * onChange
    */
-  onChange?: <T>(event: any) => void;
+  onChange?: EventHandler<ChangeEvent<HTMLInputElement>>;
 }
 
 const TextField: StatelessComponent<TextFieldProps> = props => {
@@ -85,6 +85,7 @@ const TextField: StatelessComponent<TextFieldProps> = props => {
 TextField.defaultProps = {
   color: "regular",
   placeholder: "",
+  type: "text",
 };
 
 const enhanced = withStyles(styles)(TextField);

From 94a42fc57f6c8b38775b65226d661db2925cc35e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bel=C3=A9n=20Curcio?= <curciobelen@gmail.com>
Date: Wed, 22 Aug 2018 09:23:02 -0300
Subject: [PATCH 48/81] changes

---
 src/core/client/ui/components/FormField/FormField.mdx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/core/client/ui/components/FormField/FormField.mdx b/src/core/client/ui/components/FormField/FormField.mdx
index cfd503953..aedf67752 100644
--- a/src/core/client/ui/components/FormField/FormField.mdx
+++ b/src/core/client/ui/components/FormField/FormField.mdx
@@ -4,7 +4,7 @@ menu: UI Kit
 ---
 
 import { Playground, PropsTable } from 'docz'
-import FormField from './FormField'
+import { InputLabel, ValidationMessage, TextField, InputDescription, FormField } from '../core/client/ui/components'
 
 # FormField
 

From e9db68269b93b5e4552b4cb32c748fd0aa52f3cf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bel=C3=A9n=20Curcio?= <curciobelen@gmail.com>
Date: Wed, 22 Aug 2018 09:41:41 -0300
Subject: [PATCH 49/81] Adding styling in the main auth App

---
 src/core/client/auth/components/App.tsx       | 28 +++++++++++--------
 src/core/client/auth/components/SignIn.tsx    | 13 ++++-----
 src/core/client/auth/components/SignUp.tsx    | 16 ++++-------
 .../auth/containers/SignInContainer.tsx       |  5 +++-
 .../auth/containers/SignUpContainer.tsx       |  3 +-
 5 files changed, 33 insertions(+), 32 deletions(-)

diff --git a/src/core/client/auth/components/App.tsx b/src/core/client/auth/components/App.tsx
index 4fe34d3a1..f2537db83 100644
--- a/src/core/client/auth/components/App.tsx
+++ b/src/core/client/auth/components/App.tsx
@@ -1,23 +1,25 @@
-import * as React from "react";
-import { StatelessComponent } from "react";
+import React, { StatelessComponent } from "react";
+import * as styles from "./App.css";
 
 import ForgotPasswordContainer from "../containers/ForgotPasswordContainer";
 import ResetPasswordContainer from "../containers/ResetPasswordContainer";
 import SignInContainer from "../containers/SignInContainer";
 import SignUpContainer from "../containers/SignUpContainer";
 
+// TODO: (cvle) Remove %future added value when we have Relay 1.6
+// https://github.com/facebook/relay/commit/1e87e43add7667a494f7ff4cfa7f03f1ab8d81a2
+export type View =
+  | "SIGN_UP"
+  | "SIGN_IN"
+  | "FORGOT_PASSWORD"
+  | "RESET_PASSWORD"
+  | "%future added value";
+
 export interface AppProps {
-  // TODO: (cvle) Remove %future added value when we have Relay 1.6
-  // https://github.com/facebook/relay/commit/1e87e43add7667a494f7ff4cfa7f03f1ab8d81a2
-  view:
-    | "SIGN_UP"
-    | "SIGN_IN"
-    | "FORGOT_PASSWORD"
-    | "RESET_PASSWORD"
-    | "%future added value";
+  view: View;
 }
 
-const App: StatelessComponent<AppProps> = ({ view }) => {
+const renderView = (view: View) => {
   switch (view) {
     case "SIGN_UP":
       return <SignUpContainer />;
@@ -32,4 +34,8 @@ const App: StatelessComponent<AppProps> = ({ view }) => {
   }
 };
 
+const App: StatelessComponent<AppProps> = ({ view }) => (
+  <div className={styles.root}>{renderView(view)}</div>
+);
+
 export default App;
diff --git a/src/core/client/auth/components/SignIn.tsx b/src/core/client/auth/components/SignIn.tsx
index 0c9191a5a..940f2c3ec 100644
--- a/src/core/client/auth/components/SignIn.tsx
+++ b/src/core/client/auth/components/SignIn.tsx
@@ -19,7 +19,7 @@ import {
   Typography,
   ValidationMessage,
 } from "talk-ui/components";
-import { View } from "../containers/SignInContainer";
+
 import * as styles from "./SignIn.css";
 
 interface FormProps {
@@ -29,7 +29,8 @@ interface FormProps {
 
 export interface SignInForm {
   onSubmit: OnSubmit<FormProps>;
-  setView: (view: View) => void;
+  goToSignUp: () => void;
+  goToForgotPassword: () => void;
   error: string | null;
 }
 
@@ -95,9 +96,7 @@ const SignIn: StatelessComponent<SignInForm> = props => {
                       variant="underlined"
                       color="primary"
                       size="small"
-                      onClick={() => {
-                        props.setView("FORGOT_PASSWORD");
-                      }}
+                      onClick={props.goToForgotPassword}
                     >
                       Forgot your password?
                     </Button>
@@ -126,9 +125,7 @@ const SignIn: StatelessComponent<SignInForm> = props => {
                   variant="underlined"
                   size="small"
                   color="primary"
-                  onClick={() => {
-                    props.setView("SIGN_UP");
-                  }}
+                  onClick={props.goToSignUp}
                 >
                   Sign Up
                 </Button>
diff --git a/src/core/client/auth/components/SignUp.tsx b/src/core/client/auth/components/SignUp.tsx
index b80837a1d..169a06864 100644
--- a/src/core/client/auth/components/SignUp.tsx
+++ b/src/core/client/auth/components/SignUp.tsx
@@ -21,7 +21,7 @@ import {
   Typography,
   ValidationMessage,
 } from "talk-ui/components";
-import { View } from "../containers/SignUpContainer";
+
 import * as styles from "./SignUp.css";
 
 interface FormProps {
@@ -33,7 +33,7 @@ interface FormProps {
 
 export interface SignUpForm {
   onSubmit: OnSubmit<FormProps>;
-  setView: (view: View) => void;
+  goToSignIn: () => void;
   error: string | null;
 }
 
@@ -160,7 +160,7 @@ const SignUp: StatelessComponent<SignUpForm> = props => {
                 )}
               </Field>
             </Flex>
-            <div className={styles.footer}>
+            <div>
               <Button
                 variant="filled"
                 color="primary"
@@ -170,19 +170,13 @@ const SignUp: StatelessComponent<SignUpForm> = props => {
               >
                 Sign up and join the conversation
               </Button>
-              <Flex
-                itemGutter="half"
-                justifyContent="center"
-                className={styles.subFooter}
-              >
+              <Flex itemGutter="half" justifyContent="center">
                 <Typography>Already have an account?</Typography>
                 <Button
                   variant="underlined"
                   size="small"
                   color="primary"
-                  onClick={() => {
-                    props.setView("SIGN_IN");
-                  }}
+                  onClick={props.goToSignIn}
                 >
                   Sign In
                 </Button>
diff --git a/src/core/client/auth/containers/SignInContainer.tsx b/src/core/client/auth/containers/SignInContainer.tsx
index 5902fe372..3c3d16f89 100644
--- a/src/core/client/auth/containers/SignInContainer.tsx
+++ b/src/core/client/auth/containers/SignInContainer.tsx
@@ -44,11 +44,14 @@ class SignInContainer extends Component<
     }
     return undefined;
   };
+  private goToForgotPassword = () => this.setView("FORGOT_PASSWORD");
+  private goToSignUp = () => this.setView("SIGN_UP");
   public render() {
     return (
       <SignIn
         onSubmit={this.onSubmit}
-        setView={this.setView}
+        goToForgotPassword={this.goToForgotPassword}
+        goToSignUp={this.goToSignUp}
         error={this.state.error}
       />
     );
diff --git a/src/core/client/auth/containers/SignUpContainer.tsx b/src/core/client/auth/containers/SignUpContainer.tsx
index 1a9f91a46..776dc2f32 100644
--- a/src/core/client/auth/containers/SignUpContainer.tsx
+++ b/src/core/client/auth/containers/SignUpContainer.tsx
@@ -44,11 +44,12 @@ class SignUpContainer extends Component<
     }
     return undefined;
   };
+  private goToSignIn = () => this.setView("SIGN_IN");
   public render() {
     return (
       <SignUp
         onSubmit={this.onSubmit}
-        setView={this.setView}
+        goToSignIn={this.goToSignIn}
         error={this.state.error}
       />
     );

From 7b5a87207b9fe0c97d6b83bf78bb25f206ba1ede Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bel=C3=A9n=20Curcio?= <curciobelen@gmail.com>
Date: Wed, 22 Aug 2018 09:48:06 -0300
Subject: [PATCH 50/81] removing input from user signOff

---
 src/core/client/auth/components/SignIn.css                | 6 ------
 src/core/client/auth/components/SignIn.tsx                | 8 ++------
 src/core/client/auth/mutations/SignOffMutation.ts         | 4 +---
 src/core/client/framework/rest/index.ts                   | 2 +-
 src/core/client/framework/rest/signOff.ts                 | 5 +----
 .../stream/containers/UserBoxAuthenticatedContainer.tsx   | 2 +-
 6 files changed, 6 insertions(+), 21 deletions(-)

diff --git a/src/core/client/auth/components/SignIn.css b/src/core/client/auth/components/SignIn.css
index 47bd21255..9aff9cb83 100644
--- a/src/core/client/auth/components/SignIn.css
+++ b/src/core/client/auth/components/SignIn.css
@@ -5,9 +5,3 @@
 .forgotPassword {
   text-align: right;
 }
-
-.footer,
-.subFooter {
-  padding-top: var(--spacing-unit);
-  width: 100%;
-}
diff --git a/src/core/client/auth/components/SignIn.tsx b/src/core/client/auth/components/SignIn.tsx
index 940f2c3ec..1abb35faf 100644
--- a/src/core/client/auth/components/SignIn.tsx
+++ b/src/core/client/auth/components/SignIn.tsx
@@ -105,7 +105,7 @@ const SignIn: StatelessComponent<SignInForm> = props => {
               )}
             </Field>
 
-            <div className={styles.footer}>
+            <div>
               <Button
                 variant="filled"
                 color="primary"
@@ -115,11 +115,7 @@ const SignIn: StatelessComponent<SignInForm> = props => {
               >
                 Sign in and join the conversation
               </Button>
-              <Flex
-                itemGutter="half"
-                justifyContent="center"
-                className={styles.subFooter}
-              >
+              <Flex itemGutter="half" justifyContent="center">
                 <Typography>Don't have an account?</Typography>
                 <Button
                   variant="underlined"
diff --git a/src/core/client/auth/mutations/SignOffMutation.ts b/src/core/client/auth/mutations/SignOffMutation.ts
index 5a1bf5939..d406631c4 100644
--- a/src/core/client/auth/mutations/SignOffMutation.ts
+++ b/src/core/client/auth/mutations/SignOffMutation.ts
@@ -2,13 +2,11 @@ import { commitLocalUpdate, Environment } from "relay-runtime";
 import { TalkContext } from "talk-framework/lib/bootstrap";
 import { createMutationContainer } from "talk-framework/lib/relay";
 import { LOCAL_ID } from "talk-framework/lib/relay/withLocalStateContainer";
-import { SignOffInput } from "talk-framework/rest";
 
-export type SignOffMutation = (input: SignOffInput) => Promise<void>;
+export type SignOffMutation = () => Promise<void>;
 
 export async function commit(
   environment: Environment,
-  input: SignOffInput,
   { localStorage }: TalkContext
 ) {
   return commitLocalUpdate(environment, store => {
diff --git a/src/core/client/framework/rest/index.ts b/src/core/client/framework/rest/index.ts
index 97437ed10..7216d255f 100644
--- a/src/core/client/framework/rest/index.ts
+++ b/src/core/client/framework/rest/index.ts
@@ -1,3 +1,3 @@
 export { default as signIn, SignInInput } from "./signIn";
 export { default as signUp, SignUpInput } from "./signUp";
-export { default as signOff, SignOffInput } from "./signOff";
+export { default as signOff } from "./signOff";
diff --git a/src/core/client/framework/rest/signOff.ts b/src/core/client/framework/rest/signOff.ts
index 6072f3ba9..d181bd280 100644
--- a/src/core/client/framework/rest/signOff.ts
+++ b/src/core/client/framework/rest/signOff.ts
@@ -1,12 +1,9 @@
 import { RestClient } from "../lib/rest";
 
-// tslint:disable-next-line:no-empty-interface
-export interface SignOffInput {}
-
 // tslint:disable-next-line:no-empty-interface
 export interface SignOffResponse {}
 
-export default function signOff(rest: RestClient, input: SignOffInput) {
+export default function signOff(rest: RestClient) {
   return rest.fetch<SignOffResponse>("/tenant/auth/local", {
     method: "DELETE",
   });
diff --git a/src/core/client/stream/containers/UserBoxAuthenticatedContainer.tsx b/src/core/client/stream/containers/UserBoxAuthenticatedContainer.tsx
index 54b36ecbf..53fd7c8cc 100644
--- a/src/core/client/stream/containers/UserBoxAuthenticatedContainer.tsx
+++ b/src/core/client/stream/containers/UserBoxAuthenticatedContainer.tsx
@@ -12,7 +12,7 @@ class UserBoxAuthenticatedContainer extends Component<
   UserBoxAuthenticatedProps
 > {
   private onSignOff = () => {
-    this.props.signOff({});
+    this.props.signOff();
   };
   public render() {
     return (

From 6fa28d6410f88d533382722f476cca025c9293fd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bel=C3=A9n=20Curcio?= <curciobelen@gmail.com>
Date: Wed, 22 Aug 2018 10:06:50 -0300
Subject: [PATCH 51/81] Errors handled by the forms

---
 src/core/client/auth/components/SignIn.tsx    |  9 ++++----
 src/core/client/auth/components/SignUp.tsx    |  9 ++++----
 .../auth/containers/SignInContainer.tsx       | 15 +++----------
 .../auth/containers/SignUpContainer.tsx       | 21 ++++---------------
 4 files changed, 17 insertions(+), 37 deletions(-)

diff --git a/src/core/client/auth/components/SignIn.tsx b/src/core/client/auth/components/SignIn.tsx
index 1abb35faf..6c06d4e9f 100644
--- a/src/core/client/auth/components/SignIn.tsx
+++ b/src/core/client/auth/components/SignIn.tsx
@@ -31,23 +31,24 @@ export interface SignInForm {
   onSubmit: OnSubmit<FormProps>;
   goToSignUp: () => void;
   goToForgotPassword: () => void;
-  error: string | null;
 }
 
 const SignIn: StatelessComponent<SignInForm> = props => {
   return (
     <Form onSubmit={props.onSubmit}>
-      {({ handleSubmit, submitting }) => (
+      {({ handleSubmit, submitting, submitError }) => (
         <form autoComplete="off" onSubmit={handleSubmit}>
           <Flex itemGutter="double" direction="column" className={styles.root}>
             <Typography variant="heading1" align="center">
               Sign in to join the conversation
             </Typography>
-            {props.error && (
+
+            {submitError && (
               <CallOut color="error" fullWidth>
-                {props.error}
+                {submitError}
               </CallOut>
             )}
+
             <Field
               name="email"
               validate={composeValidators(required, validateEmail)}
diff --git a/src/core/client/auth/components/SignUp.tsx b/src/core/client/auth/components/SignUp.tsx
index 169a06864..1d551355f 100644
--- a/src/core/client/auth/components/SignUp.tsx
+++ b/src/core/client/auth/components/SignUp.tsx
@@ -34,24 +34,25 @@ interface FormProps {
 export interface SignUpForm {
   onSubmit: OnSubmit<FormProps>;
   goToSignIn: () => void;
-  error: string | null;
 }
 
 const SignUp: StatelessComponent<SignUpForm> = props => {
   return (
     <Form onSubmit={props.onSubmit}>
-      {({ handleSubmit, submitting }) => (
+      {({ handleSubmit, submitError }) => (
         <form autoComplete="off" onSubmit={handleSubmit}>
           <Flex itemGutter="double" direction="column" className={styles.root}>
             <Flex direction="column">
               <Typography variant="heading1" align="center">
                 Sign up to join the conversation
               </Typography>
-              {props.error && (
+
+              {submitError && (
                 <CallOut color="error" fullWidth>
-                  {props.error}
+                  {submitError}
                 </CallOut>
               )}
+
               <Field
                 name="email"
                 validate={composeValidators(required, validateEmail)}
diff --git a/src/core/client/auth/containers/SignInContainer.tsx b/src/core/client/auth/containers/SignInContainer.tsx
index 3c3d16f89..54077c2e7 100644
--- a/src/core/client/auth/containers/SignInContainer.tsx
+++ b/src/core/client/auth/containers/SignInContainer.tsx
@@ -1,6 +1,5 @@
+import { FORM_ERROR } from "final-form";
 import React, { Component } from "react";
-import { BadUserInputError } from "talk-framework/lib/errors";
-
 import SignIn, { SignInForm } from "../components/SignIn";
 import {
   SetViewMutation,
@@ -24,7 +23,6 @@ class SignInContainer extends Component<
   SignInContainerProps,
   SignUpContainerState
 > {
-  public state = { error: null };
   private setView = (view: View) => {
     this.props.setView({
       view,
@@ -33,16 +31,10 @@ class SignInContainer extends Component<
   private onSubmit: SignInForm["onSubmit"] = async (input, form) => {
     try {
       await this.props.signIn(input);
-      form.reset();
+      return form.reset();
     } catch (error) {
-      this.setState({ error: error.message });
-      if (error instanceof BadUserInputError) {
-        return error.invalidArgsLocalized;
-      }
-      // tslint:disable-next-line:no-console
-      console.error(error);
+      return { [FORM_ERROR]: error.message };
     }
-    return undefined;
   };
   private goToForgotPassword = () => this.setView("FORGOT_PASSWORD");
   private goToSignUp = () => this.setView("SIGN_UP");
@@ -52,7 +44,6 @@ class SignInContainer extends Component<
         onSubmit={this.onSubmit}
         goToForgotPassword={this.goToForgotPassword}
         goToSignUp={this.goToSignUp}
-        error={this.state.error}
       />
     );
   }
diff --git a/src/core/client/auth/containers/SignUpContainer.tsx b/src/core/client/auth/containers/SignUpContainer.tsx
index 776dc2f32..f18115557 100644
--- a/src/core/client/auth/containers/SignUpContainer.tsx
+++ b/src/core/client/auth/containers/SignUpContainer.tsx
@@ -1,5 +1,5 @@
+import { FORM_ERROR } from "final-form";
 import React, { Component } from "react";
-import { BadUserInputError } from "talk-framework/lib/errors";
 import SignUp, { SignUpForm } from "../components/SignUp";
 
 import {
@@ -24,7 +24,6 @@ class SignUpContainer extends Component<
   SignUpContainerProps,
   SignUpContainerState
 > {
-  public state = { error: "" };
   private setView = (view: View) => {
     this.props.setView({
       view,
@@ -32,27 +31,15 @@ class SignUpContainer extends Component<
   };
   private onSubmit: SignUpForm["onSubmit"] = async (input, form) => {
     try {
-      await this.props.signUp(input);
+      return await this.props.signUp(input);
       form.reset();
     } catch (error) {
-      this.setState({ error: error.message });
-      if (error instanceof BadUserInputError) {
-        return error.invalidArgsLocalized;
-      }
-      // tslint:disable-next-line:no-console
-      console.error(error);
+      return { [FORM_ERROR]: error.message };
     }
-    return undefined;
   };
   private goToSignIn = () => this.setView("SIGN_IN");
   public render() {
-    return (
-      <SignUp
-        onSubmit={this.onSubmit}
-        goToSignIn={this.goToSignIn}
-        error={this.state.error}
-      />
-    );
+    return <SignUp onSubmit={this.onSubmit} goToSignIn={this.goToSignIn} />;
   }
 }
 

From 21cad87ffdf280969277b7167697c020da1e7544 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bel=C3=A9n=20Curcio?= <curciobelen@gmail.com>
Date: Wed, 22 Aug 2018 10:11:37 -0300
Subject: [PATCH 52/81] Updated snapshots

---
 .../UserBoxContainer.spec.tsx.snap            |  2 +-
 .../__snapshots__/FormField.spec.tsx.snap     |  1 +
 .../__snapshots__/Spinner.spec.tsx.snap       | 36 +++++++++----------
 .../__snapshots__/TextField.spec.tsx.snap     |  1 +
 4 files changed, 19 insertions(+), 21 deletions(-)

diff --git a/src/core/client/stream/containers/__snapshots__/UserBoxContainer.spec.tsx.snap b/src/core/client/stream/containers/__snapshots__/UserBoxContainer.spec.tsx.snap
index d9c77ba58..80834ae74 100644
--- a/src/core/client/stream/containers/__snapshots__/UserBoxContainer.spec.tsx.snap
+++ b/src/core/client/stream/containers/__snapshots__/UserBoxContainer.spec.tsx.snap
@@ -3,7 +3,7 @@
 exports[`renders correctly 1`] = `
 <React.Fragment>
   <Popup
-    features="menubar=0,resizable=0,width=350,height=600,top=200,left=500"
+    features="menubar=0,resizable=0,width=350,height=720,top=200,left=500"
     focus={false}
     href="/auth.html?view=SIGN_IN"
     onBlur={[Function]}
diff --git a/src/core/client/ui/components/FormField/__snapshots__/FormField.spec.tsx.snap b/src/core/client/ui/components/FormField/__snapshots__/FormField.spec.tsx.snap
index 728f3a77c..ddbd6c222 100644
--- a/src/core/client/ui/components/FormField/__snapshots__/FormField.spec.tsx.snap
+++ b/src/core/client/ui/components/FormField/__snapshots__/FormField.spec.tsx.snap
@@ -25,6 +25,7 @@ exports[`works with multiple form components 1`] = `
   <input
     className="TextField-root TextField-colorRegular"
     placeholder=""
+    type="text"
   />
 </div>
 `;
diff --git a/src/core/client/ui/components/Spinner/__snapshots__/Spinner.spec.tsx.snap b/src/core/client/ui/components/Spinner/__snapshots__/Spinner.spec.tsx.snap
index c5103e9e6..cd6f511b5 100644
--- a/src/core/client/ui/components/Spinner/__snapshots__/Spinner.spec.tsx.snap
+++ b/src/core/client/ui/components/Spinner/__snapshots__/Spinner.spec.tsx.snap
@@ -1,25 +1,21 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders correctly 1`] = `
-<div
-  className="Spinner-root"
+<svg
+  className="Spinner-spinner"
+  height="40px"
+  viewBox="0 0 66 66"
+  width="40px"
+  xmlns="http://www.w3.org/2000/svg"
 >
-  <svg
-    className="Spinner-spinner"
-    height="40px"
-    viewBox="0 0 66 66"
-    width="40px"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <circle
-      className="Spinner-path"
-      cx="33"
-      cy="33"
-      fill="none"
-      r="30"
-      strokeLinecap="round"
-      strokeWidth="6"
-    />
-  </svg>
-</div>
+  <circle
+    className="Spinner-path"
+    cx="33"
+    cy="33"
+    fill="none"
+    r="30"
+    strokeLinecap="round"
+    strokeWidth="6"
+  />
+</svg>
 `;
diff --git a/src/core/client/ui/components/TextField/__snapshots__/TextField.spec.tsx.snap b/src/core/client/ui/components/TextField/__snapshots__/TextField.spec.tsx.snap
index a277de918..59ea7abbe 100644
--- a/src/core/client/ui/components/TextField/__snapshots__/TextField.spec.tsx.snap
+++ b/src/core/client/ui/components/TextField/__snapshots__/TextField.spec.tsx.snap
@@ -5,5 +5,6 @@ exports[`renders correctly 1`] = `
   className="TextField-root TextField-colorRegular custom"
   defaultValue="Hello World"
   placeholder=""
+  type="text"
 />
 `;

From 89749926c690942a78bf451876a14587cd5be053 Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Wed, 22 Aug 2018 19:29:25 +0200
Subject: [PATCH 53/81] Auto adapt height of popup

---
 package-lock.json                             | 132 +++++++++---------
 src/core/client/auth/components/App.css       |   5 +-
 .../client/auth/components/ForgotPassword.css |   1 -
 .../client/auth/components/ResetPassword.css  |   1 -
 src/core/client/auth/components/SignIn.css    |   1 -
 src/core/client/auth/components/SignIn.tsx    |   2 +
 src/core/client/auth/components/SignUp.css    |   1 -
 src/core/client/auth/components/SignUp.tsx    |   2 +
 .../auth/containers/AutoHeightContainer.tsx   |  36 +++++
 .../stream/containers/UserBoxContainer.tsx    |   2 +-
 10 files changed, 110 insertions(+), 73 deletions(-)
 create mode 100644 src/core/client/auth/containers/AutoHeightContainer.tsx

diff --git a/package-lock.json b/package-lock.json
index a08665dc8..02a251edd 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10167,24 +10167,24 @@
       "dependencies": {
         "abbrev": {
           "version": "1.1.1",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.1.1.tgz",
           "integrity": "sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q==",
           "optional": true
         },
         "ansi-regex": {
           "version": "2.1.1",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz",
           "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8="
         },
         "aproba": {
           "version": "1.2.0",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/aproba/-/aproba-1.2.0.tgz",
           "integrity": "sha512-Y9J6ZjXtoYh8RnXVCMOU/ttDmk1aBjunq9vO0ta5x85WDQiQfUF9sIPBITdbiiIVcBo03Hi3jMxigBtsddlXRw==",
           "optional": true
         },
         "are-we-there-yet": {
           "version": "1.1.4",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/are-we-there-yet/-/are-we-there-yet-1.1.4.tgz",
           "integrity": "sha1-u13KOCu5TwXhUZQ3PRb9O6HKEQ0=",
           "optional": true,
           "requires": {
@@ -10194,12 +10194,12 @@
         },
         "balanced-match": {
           "version": "1.0.0",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz",
           "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c="
         },
         "brace-expansion": {
           "version": "1.1.11",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
           "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
           "requires": {
             "balanced-match": "^1.0.0",
@@ -10208,34 +10208,34 @@
         },
         "chownr": {
           "version": "1.0.1",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/chownr/-/chownr-1.0.1.tgz",
           "integrity": "sha1-4qdQQqlVGQi+vSW4Uj1fl2nXkYE=",
           "optional": true
         },
         "code-point-at": {
           "version": "1.1.0",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/code-point-at/-/code-point-at-1.1.0.tgz",
           "integrity": "sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c="
         },
         "concat-map": {
           "version": "0.0.1",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
           "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s="
         },
         "console-control-strings": {
           "version": "1.1.0",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/console-control-strings/-/console-control-strings-1.1.0.tgz",
           "integrity": "sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4="
         },
         "core-util-is": {
           "version": "1.0.2",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.2.tgz",
           "integrity": "sha1-tf1UIgqivFq1eqtxQMlAdUUDwac=",
           "optional": true
         },
         "debug": {
           "version": "2.6.9",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
           "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
           "optional": true,
           "requires": {
@@ -10244,25 +10244,25 @@
         },
         "deep-extend": {
           "version": "0.5.1",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/deep-extend/-/deep-extend-0.5.1.tgz",
           "integrity": "sha512-N8vBdOa+DF7zkRrDCsaOXoCs/E2fJfx9B9MrKnnSiHNh4ws7eSys6YQE4KvT1cecKmOASYQBhbKjeuDD9lT81w==",
           "optional": true
         },
         "delegates": {
           "version": "1.0.0",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/delegates/-/delegates-1.0.0.tgz",
           "integrity": "sha1-hMbhWbgZBP3KWaDvRM2HDTElD5o=",
           "optional": true
         },
         "detect-libc": {
           "version": "1.0.3",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-1.0.3.tgz",
           "integrity": "sha1-+hN8S9aY7fVc1c0CrFWfkaTEups=",
           "optional": true
         },
         "fs-minipass": {
           "version": "1.2.5",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/fs-minipass/-/fs-minipass-1.2.5.tgz",
           "integrity": "sha512-JhBl0skXjUPCFH7x6x61gQxrKyXsxB5gcgePLZCwfyCGGsTISMoIeObbrvVeP6Xmyaudw4TT43qV2Gz+iyd2oQ==",
           "optional": true,
           "requires": {
@@ -10271,13 +10271,13 @@
         },
         "fs.realpath": {
           "version": "1.0.0",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
           "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8=",
           "optional": true
         },
         "gauge": {
           "version": "2.7.4",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/gauge/-/gauge-2.7.4.tgz",
           "integrity": "sha1-LANAXHU4w51+s3sxcCLjJfsBi/c=",
           "optional": true,
           "requires": {
@@ -10293,7 +10293,7 @@
         },
         "glob": {
           "version": "7.1.2",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.2.tgz",
           "integrity": "sha512-MJTUg1kjuLeQCJ+ccE4Vpa6kKVXkPYJ2mOCQyUuKLcLQsdrMCpBPUi8qVE6+YuaJkozeA9NusTAw3hLr8Xe5EQ==",
           "optional": true,
           "requires": {
@@ -10307,13 +10307,13 @@
         },
         "has-unicode": {
           "version": "2.0.1",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/has-unicode/-/has-unicode-2.0.1.tgz",
           "integrity": "sha1-4Ob+aijPUROIVeCG0Wkedx3iqLk=",
           "optional": true
         },
         "iconv-lite": {
           "version": "0.4.21",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.21.tgz",
           "integrity": "sha512-En5V9za5mBt2oUA03WGD3TwDv0MKAruqsuxstbMUZaj9W9k/m1CV/9py3l0L5kw9Bln8fdHQmzHSYtvpvTLpKw==",
           "optional": true,
           "requires": {
@@ -10322,7 +10322,7 @@
         },
         "ignore-walk": {
           "version": "3.0.1",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/ignore-walk/-/ignore-walk-3.0.1.tgz",
           "integrity": "sha512-DTVlMx3IYPe0/JJcYP7Gxg7ttZZu3IInhuEhbchuqneY9wWe5Ojy2mXLBaQFUQmo0AW2r3qG7m1mg86js+gnlQ==",
           "optional": true,
           "requires": {
@@ -10331,7 +10331,7 @@
         },
         "inflight": {
           "version": "1.0.6",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
           "integrity": "sha1-Sb1jMdfQLQwJvJEKEHW6gWW1bfk=",
           "optional": true,
           "requires": {
@@ -10341,18 +10341,18 @@
         },
         "inherits": {
           "version": "2.0.3",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz",
           "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4="
         },
         "ini": {
           "version": "1.3.5",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.5.tgz",
           "integrity": "sha512-RZY5huIKCMRWDUqZlEi72f/lmXKMvuszcMBduliQ3nnWbx9X/ZBQO7DijMEYS9EhHBb2qacRUMtC7svLwe0lcw==",
           "optional": true
         },
         "is-fullwidth-code-point": {
           "version": "1.0.0",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-1.0.0.tgz",
           "integrity": "sha1-754xOG8DGn8NZDr4L95QxFfvAMs=",
           "requires": {
             "number-is-nan": "^1.0.0"
@@ -10360,13 +10360,13 @@
         },
         "isarray": {
           "version": "1.0.0",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
           "integrity": "sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=",
           "optional": true
         },
         "minimatch": {
           "version": "3.0.4",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz",
           "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==",
           "requires": {
             "brace-expansion": "^1.1.7"
@@ -10374,12 +10374,12 @@
         },
         "minimist": {
           "version": "0.0.8",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz",
           "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0="
         },
         "minipass": {
           "version": "2.2.4",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/minipass/-/minipass-2.2.4.tgz",
           "integrity": "sha512-hzXIWWet/BzWhYs2b+u7dRHlruXhwdgvlTMDKC6Cb1U7ps6Ac6yQlR39xsbjWJE377YTCtKwIXIpJ5oP+j5y8g==",
           "requires": {
             "safe-buffer": "^5.1.1",
@@ -10388,7 +10388,7 @@
         },
         "minizlib": {
           "version": "1.1.0",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/minizlib/-/minizlib-1.1.0.tgz",
           "integrity": "sha512-4T6Ur/GctZ27nHfpt9THOdRZNgyJ9FZchYO1ceg5S8Q3DNLCKYy44nCZzgCJgcvx2UM8czmqak5BCxJMrq37lA==",
           "optional": true,
           "requires": {
@@ -10397,7 +10397,7 @@
         },
         "mkdirp": {
           "version": "0.5.1",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz",
           "integrity": "sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=",
           "requires": {
             "minimist": "0.0.8"
@@ -10405,13 +10405,13 @@
         },
         "ms": {
           "version": "2.0.0",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
           "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=",
           "optional": true
         },
         "needle": {
           "version": "2.2.0",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/needle/-/needle-2.2.0.tgz",
           "integrity": "sha512-eFagy6c+TYayorXw/qtAdSvaUpEbBsDwDyxYFgLZ0lTojfH7K+OdBqAF7TAFwDokJaGpubpSGG0wO3iC0XPi8w==",
           "optional": true,
           "requires": {
@@ -10422,7 +10422,7 @@
         },
         "node-pre-gyp": {
           "version": "0.10.0",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/node-pre-gyp/-/node-pre-gyp-0.10.0.tgz",
           "integrity": "sha512-G7kEonQLRbcA/mOoFoxvlMrw6Q6dPf92+t/l0DFSMuSlDoWaI9JWIyPwK0jyE1bph//CUEL65/Fz1m2vJbmjQQ==",
           "optional": true,
           "requires": {
@@ -10440,7 +10440,7 @@
         },
         "nopt": {
           "version": "4.0.1",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/nopt/-/nopt-4.0.1.tgz",
           "integrity": "sha1-0NRoWv1UFRk8jHUFYC0NF81kR00=",
           "optional": true,
           "requires": {
@@ -10450,13 +10450,13 @@
         },
         "npm-bundled": {
           "version": "1.0.3",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/npm-bundled/-/npm-bundled-1.0.3.tgz",
           "integrity": "sha512-ByQ3oJ/5ETLyglU2+8dBObvhfWXX8dtPZDMePCahptliFX2iIuhyEszyFk401PZUNQH20vvdW5MLjJxkwU80Ow==",
           "optional": true
         },
         "npm-packlist": {
           "version": "1.1.10",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/npm-packlist/-/npm-packlist-1.1.10.tgz",
           "integrity": "sha512-AQC0Dyhzn4EiYEfIUjCdMl0JJ61I2ER9ukf/sLxJUcZHfo+VyEfz2rMJgLZSS1v30OxPQe1cN0LZA1xbcaVfWA==",
           "optional": true,
           "requires": {
@@ -10466,7 +10466,7 @@
         },
         "npmlog": {
           "version": "4.1.2",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/npmlog/-/npmlog-4.1.2.tgz",
           "integrity": "sha512-2uUqazuKlTaSI/dC8AzicUck7+IrEaOnN/e0jd3Xtt1KcGpwx30v50mL7oPyr/h9bL3E4aZccVwpwP+5W9Vjkg==",
           "optional": true,
           "requires": {
@@ -10478,18 +10478,18 @@
         },
         "number-is-nan": {
           "version": "1.0.1",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/number-is-nan/-/number-is-nan-1.0.1.tgz",
           "integrity": "sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0="
         },
         "object-assign": {
           "version": "4.1.1",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
           "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=",
           "optional": true
         },
         "once": {
           "version": "1.4.0",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
           "integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=",
           "requires": {
             "wrappy": "1"
@@ -10497,19 +10497,19 @@
         },
         "os-homedir": {
           "version": "1.0.2",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/os-homedir/-/os-homedir-1.0.2.tgz",
           "integrity": "sha1-/7xJiDNuDoM94MFox+8VISGqf7M=",
           "optional": true
         },
         "os-tmpdir": {
           "version": "1.0.2",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/os-tmpdir/-/os-tmpdir-1.0.2.tgz",
           "integrity": "sha1-u+Z0BseaqFxc/sdm/lc0VV36EnQ=",
           "optional": true
         },
         "osenv": {
           "version": "0.1.5",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/osenv/-/osenv-0.1.5.tgz",
           "integrity": "sha512-0CWcCECdMVc2Rw3U5w9ZjqX6ga6ubk1xDVKxtBQPK7wis/0F2r9T6k4ydGYhecl7YUBxBVxhL5oisPsNxAPe2g==",
           "optional": true,
           "requires": {
@@ -10519,19 +10519,19 @@
         },
         "path-is-absolute": {
           "version": "1.0.1",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
           "integrity": "sha1-F0uSaHNVNP+8es5r9TpanhtcX18=",
           "optional": true
         },
         "process-nextick-args": {
           "version": "2.0.0",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.0.tgz",
           "integrity": "sha512-MtEC1TqN0EU5nephaJ4rAtThHtC86dNN9qCuEhtshvpVBkAW5ZO7BASN9REnF9eoXGcRub+pFuKEpOHE+HbEMw==",
           "optional": true
         },
         "rc": {
           "version": "1.2.7",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/rc/-/rc-1.2.7.tgz",
           "integrity": "sha512-LdLD8xD4zzLsAT5xyushXDNscEjB7+2ulnl8+r1pnESlYtlJtVSoCMBGr30eDRJ3+2Gq89jK9P9e4tCEH1+ywA==",
           "optional": true,
           "requires": {
@@ -10543,7 +10543,7 @@
           "dependencies": {
             "minimist": {
               "version": "1.2.0",
-              "resolved": false,
+              "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
               "integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=",
               "optional": true
             }
@@ -10551,7 +10551,7 @@
         },
         "readable-stream": {
           "version": "2.3.6",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.6.tgz",
           "integrity": "sha512-tQtKA9WIAhBF3+VLAseyMqZeBjW0AHJoxOtYqSUZNJxauErmLbVm2FW1y+J/YA9dUrAC39ITejlZWhVIwawkKw==",
           "optional": true,
           "requires": {
@@ -10566,7 +10566,7 @@
         },
         "rimraf": {
           "version": "2.6.2",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.6.2.tgz",
           "integrity": "sha512-lreewLK/BlghmxtfH36YYVg1i8IAce4TI7oao75I1g245+6BctqTVQiBP3YUJ9C6DQOXJmkYR9X9fCLtCOJc5w==",
           "optional": true,
           "requires": {
@@ -10575,42 +10575,42 @@
         },
         "safe-buffer": {
           "version": "5.1.1",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.1.tgz",
           "integrity": "sha512-kKvNJn6Mm93gAczWVJg7wH+wGYWNrDHdWvpUmHyEsgCtIwwo3bqPtV4tR5tuPaUhTOo/kvhVwd8XwwOllGYkbg=="
         },
         "safer-buffer": {
           "version": "2.1.2",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
           "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
           "optional": true
         },
         "sax": {
           "version": "1.2.4",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/sax/-/sax-1.2.4.tgz",
           "integrity": "sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==",
           "optional": true
         },
         "semver": {
           "version": "5.5.0",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/semver/-/semver-5.5.0.tgz",
           "integrity": "sha512-4SJ3dm0WAwWy/NVeioZh5AntkdJoWKxHxcmyP622fOkgHa4z3R0TdBJICINyaSDE6uNwVc8gZr+ZinwZAH4xIA==",
           "optional": true
         },
         "set-blocking": {
           "version": "2.0.0",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/set-blocking/-/set-blocking-2.0.0.tgz",
           "integrity": "sha1-BF+XgtARrppoA93TgrJDkrPYkPc=",
           "optional": true
         },
         "signal-exit": {
           "version": "3.0.2",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.2.tgz",
           "integrity": "sha1-tf3AjxKH6hF4Yo5BXiUTK3NkbG0=",
           "optional": true
         },
         "string-width": {
           "version": "1.0.2",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz",
           "integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=",
           "requires": {
             "code-point-at": "^1.0.0",
@@ -10620,7 +10620,7 @@
         },
         "string_decoder": {
           "version": "1.1.1",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
           "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
           "optional": true,
           "requires": {
@@ -10629,7 +10629,7 @@
         },
         "strip-ansi": {
           "version": "3.0.1",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
           "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=",
           "requires": {
             "ansi-regex": "^2.0.0"
@@ -10637,13 +10637,13 @@
         },
         "strip-json-comments": {
           "version": "2.0.1",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-2.0.1.tgz",
           "integrity": "sha1-PFMZQukIwml8DsNEhYwobHygpgo=",
           "optional": true
         },
         "tar": {
           "version": "4.4.1",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/tar/-/tar-4.4.1.tgz",
           "integrity": "sha512-O+v1r9yN4tOsvl90p5HAP4AEqbYhx4036AGMm075fH9F8Qwi3oJ+v4u50FkT/KkvywNGtwkk0zRI+8eYm1X/xg==",
           "optional": true,
           "requires": {
@@ -10658,13 +10658,13 @@
         },
         "util-deprecate": {
           "version": "1.0.2",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
           "integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=",
           "optional": true
         },
         "wide-align": {
           "version": "1.1.2",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/wide-align/-/wide-align-1.1.2.tgz",
           "integrity": "sha512-ijDLlyQ7s6x1JgCLur53osjm/UXUYD9+0PbYKrBsYisYXzCxN+HC3mYDNy/dWdmf3AwqwU3CXwDCvsNgGK1S0w==",
           "optional": true,
           "requires": {
@@ -10673,12 +10673,12 @@
         },
         "wrappy": {
           "version": "1.0.2",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
           "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8="
         },
         "yallist": {
           "version": "3.0.2",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.0.2.tgz",
           "integrity": "sha1-hFK0u36Dx8GI2AQcGoN8dz1ti7k="
         }
       }
diff --git a/src/core/client/auth/components/App.css b/src/core/client/auth/components/App.css
index dadd4d308..99be430a5 100644
--- a/src/core/client/auth/components/App.css
+++ b/src/core/client/auth/components/App.css
@@ -1,7 +1,7 @@
 /* Here we add global stylings for body and document */
 :global {
   body {
-    margin: "0";
+    margin: 0;
 
     /* Support for all WebKit browsers. */
     -webkit-font-smoothing: antialiased;
@@ -12,5 +12,6 @@
 
 .root {
   width: 100%;
-  padding-top: calc(5 * var(--spacing-unit));
+  padding: var(--spacing-unit);
+  box-sizing: border-box;
 }
diff --git a/src/core/client/auth/components/ForgotPassword.css b/src/core/client/auth/components/ForgotPassword.css
index 667e35b7a..c3a2af639 100644
--- a/src/core/client/auth/components/ForgotPassword.css
+++ b/src/core/client/auth/components/ForgotPassword.css
@@ -1,3 +1,2 @@
 .root {
-  width: 330px;
 }
diff --git a/src/core/client/auth/components/ResetPassword.css b/src/core/client/auth/components/ResetPassword.css
index 667e35b7a..c3a2af639 100644
--- a/src/core/client/auth/components/ResetPassword.css
+++ b/src/core/client/auth/components/ResetPassword.css
@@ -1,3 +1,2 @@
 .root {
-  width: 330px;
 }
diff --git a/src/core/client/auth/components/SignIn.css b/src/core/client/auth/components/SignIn.css
index 9aff9cb83..55699399e 100644
--- a/src/core/client/auth/components/SignIn.css
+++ b/src/core/client/auth/components/SignIn.css
@@ -1,5 +1,4 @@
 .root {
-  width: 330px;
 }
 
 .forgotPassword {
diff --git a/src/core/client/auth/components/SignIn.tsx b/src/core/client/auth/components/SignIn.tsx
index 6c06d4e9f..406891a84 100644
--- a/src/core/client/auth/components/SignIn.tsx
+++ b/src/core/client/auth/components/SignIn.tsx
@@ -20,6 +20,7 @@ import {
   ValidationMessage,
 } from "talk-ui/components";
 
+import AutoHeightContainer from "../containers/AutoHeightContainer";
 import * as styles from "./SignIn.css";
 
 interface FormProps {
@@ -38,6 +39,7 @@ const SignIn: StatelessComponent<SignInForm> = props => {
     <Form onSubmit={props.onSubmit}>
       {({ handleSubmit, submitting, submitError }) => (
         <form autoComplete="off" onSubmit={handleSubmit}>
+          <AutoHeightContainer />
           <Flex itemGutter="double" direction="column" className={styles.root}>
             <Typography variant="heading1" align="center">
               Sign in to join the conversation
diff --git a/src/core/client/auth/components/SignUp.css b/src/core/client/auth/components/SignUp.css
index 1003a63c7..ecd1df9ff 100644
--- a/src/core/client/auth/components/SignUp.css
+++ b/src/core/client/auth/components/SignUp.css
@@ -1,5 +1,4 @@
 .root {
-  width: 330px;
 }
 
 .subFooter {
diff --git a/src/core/client/auth/components/SignUp.tsx b/src/core/client/auth/components/SignUp.tsx
index 1d551355f..3b01e7609 100644
--- a/src/core/client/auth/components/SignUp.tsx
+++ b/src/core/client/auth/components/SignUp.tsx
@@ -22,6 +22,7 @@ import {
   ValidationMessage,
 } from "talk-ui/components";
 
+import AutoHeightContainer from "../containers/AutoHeightContainer";
 import * as styles from "./SignUp.css";
 
 interface FormProps {
@@ -41,6 +42,7 @@ const SignUp: StatelessComponent<SignUpForm> = props => {
     <Form onSubmit={props.onSubmit}>
       {({ handleSubmit, submitError }) => (
         <form autoComplete="off" onSubmit={handleSubmit}>
+          <AutoHeightContainer />
           <Flex itemGutter="double" direction="column" className={styles.root}>
             <Flex direction="column">
               <Typography variant="heading1" align="center">
diff --git a/src/core/client/auth/containers/AutoHeightContainer.tsx b/src/core/client/auth/containers/AutoHeightContainer.tsx
new file mode 100644
index 000000000..e1eceff38
--- /dev/null
+++ b/src/core/client/auth/containers/AutoHeightContainer.tsx
@@ -0,0 +1,36 @@
+import { Component } from "react";
+
+/**
+ * A container that adapts the window height to the current body size
+ * when this is mounted or updated.
+ */
+export default class AutoHeightContainer extends Component {
+  private timeout: any = null;
+
+  private updateWindowSizeCallback = () => {
+    clearTimeout(this.timeout);
+    this.timeout = setTimeout(() => {
+      const innerHeight = window.document.body.offsetHeight;
+      window.resizeTo(
+        window.outerWidth,
+        innerHeight + window.outerHeight - window.innerHeight
+      );
+    }, 0);
+  };
+
+  private updateWindowSize() {
+    window.requestAnimationFrame(this.updateWindowSizeCallback);
+  }
+
+  public componentDidMount() {
+    this.updateWindowSize();
+  }
+
+  public componentDidUpdate() {
+    this.updateWindowSize();
+  }
+
+  public render() {
+    return null;
+  }
+}
diff --git a/src/core/client/stream/containers/UserBoxContainer.tsx b/src/core/client/stream/containers/UserBoxContainer.tsx
index f3cad8a23..23b388f7a 100644
--- a/src/core/client/stream/containers/UserBoxContainer.tsx
+++ b/src/core/client/stream/containers/UserBoxContainer.tsx
@@ -58,7 +58,7 @@ export class UserBoxContainer extends Component<InnerProps> {
         <Popup
           href={`/auth.html?view=${view}`}
           title="Talk Auth"
-          features="menubar=0,resizable=0,width=350,height=720,top=200,left=500"
+          features="menubar=0,resizable=0,width=350,height=395,top=200,left=500"
           open={open}
           focus={focus}
           onFocus={this.handleFocus}

From 0455293c0bf6e83800b9db23cf334d2d5e75c517 Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Wed, 22 Aug 2018 19:31:44 +0200
Subject: [PATCH 54/81] Also add AutoHeightContainer to the password forms

---
 src/core/client/auth/components/ForgotPassword.tsx | 3 +++
 src/core/client/auth/components/ResetPassword.tsx  | 3 +++
 2 files changed, 6 insertions(+)

diff --git a/src/core/client/auth/components/ForgotPassword.tsx b/src/core/client/auth/components/ForgotPassword.tsx
index eb198aa0e..68707eea2 100644
--- a/src/core/client/auth/components/ForgotPassword.tsx
+++ b/src/core/client/auth/components/ForgotPassword.tsx
@@ -19,6 +19,8 @@ import {
   ValidationMessage,
 } from "talk-ui/components";
 
+import AutoHeightContainer from "../containers/AutoHeightContainer";
+
 interface FormProps {
   email: string;
 }
@@ -32,6 +34,7 @@ const ForgotPassword: StatelessComponent<ForgotPasswordForm> = props => {
     <Form onSubmit={props.onSubmit}>
       {({ handleSubmit }) => (
         <form autoComplete="off" onSubmit={handleSubmit}>
+          <AutoHeightContainer />
           <Flex itemGutter="double" direction="column" className={styles.root}>
             <Typography variant="heading1" align="center">
               Forgot Password
diff --git a/src/core/client/auth/components/ResetPassword.tsx b/src/core/client/auth/components/ResetPassword.tsx
index e58553e85..b459bf460 100644
--- a/src/core/client/auth/components/ResetPassword.tsx
+++ b/src/core/client/auth/components/ResetPassword.tsx
@@ -21,6 +21,8 @@ import {
   ValidationMessage,
 } from "talk-ui/components";
 
+import AutoHeightContainer from "../containers/AutoHeightContainer";
+
 interface FormProps {
   password: string;
   confirmPassword: string;
@@ -35,6 +37,7 @@ const ResetPassword: StatelessComponent<ResetPasswordForm> = props => {
     <Form onSubmit={props.onSubmit}>
       {({ handleSubmit }) => (
         <form autoComplete="off" onSubmit={handleSubmit}>
+          <AutoHeightContainer />
           <Flex itemGutter="double" direction="column" className={styles.root}>
             <Typography variant="heading1" align="center">
               Reset Password

From 5501ee78324a8610f7e8721eb15b89df89d22a50 Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Thu, 23 Aug 2018 08:55:16 +0200
Subject: [PATCH 55/81] Simplify signOff rest

---
 src/core/client/framework/lib/rest.ts     | 5 ++++-
 src/core/client/framework/rest/signOff.ts | 5 +----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/core/client/framework/lib/rest.ts b/src/core/client/framework/lib/rest.ts
index 9808a4555..c08e3c995 100644
--- a/src/core/client/framework/lib/rest.ts
+++ b/src/core/client/framework/lib/rest.ts
@@ -48,7 +48,10 @@ export class RestClient {
     this.tokenGetter = tokenGetter;
   }
 
-  public async fetch<T>(path: string, options: PartialRequestInit): Promise<T> {
+  public async fetch<T = {}>(
+    path: string,
+    options: PartialRequestInit
+  ): Promise<T> {
     let opts = options;
     if (this.tokenGetter) {
       opts = merge({}, options, {
diff --git a/src/core/client/framework/rest/signOff.ts b/src/core/client/framework/rest/signOff.ts
index d181bd280..5a1904d7c 100644
--- a/src/core/client/framework/rest/signOff.ts
+++ b/src/core/client/framework/rest/signOff.ts
@@ -1,10 +1,7 @@
 import { RestClient } from "../lib/rest";
 
-// tslint:disable-next-line:no-empty-interface
-export interface SignOffResponse {}
-
 export default function signOff(rest: RestClient) {
-  return rest.fetch<SignOffResponse>("/tenant/auth/local", {
+  return rest.fetch("/tenant/auth/local", {
     method: "DELETE",
   });
 }

From 65a212b531603103fc8cf8f205315c1a640edf16 Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Fri, 24 Aug 2018 11:17:09 +0200
Subject: [PATCH 56/81] Fix UserBox

---
 .../client/auth/mutations/SignOffMutation.ts  | 28 --------
 src/core/client/auth/mutations/index.ts       |  1 -
 .../framework/mutations/SignOutMutation.ts    | 14 ++++
 src/core/client/framework/mutations/index.ts  |  1 +
 src/core/client/framework/rest/index.ts       |  2 +-
 src/core/client/framework/rest/signOff.ts     |  7 --
 src/core/client/framework/rest/signOut.ts     |  7 ++
 .../components/UserBoxAuthenticated.tsx       |  9 ++-
 .../UserBoxUnauthenticated.spec.1.tsx         | 16 -----
 .../UserBoxAuthenticatedContainer.tsx         | 25 -------
 .../containers/UserBoxContainer.spec.tsx      |  3 +
 .../stream/containers/UserBoxContainer.tsx    | 71 +++++++++++--------
 12 files changed, 70 insertions(+), 114 deletions(-)
 delete mode 100644 src/core/client/auth/mutations/SignOffMutation.ts
 create mode 100644 src/core/client/framework/mutations/SignOutMutation.ts
 delete mode 100644 src/core/client/framework/rest/signOff.ts
 create mode 100644 src/core/client/framework/rest/signOut.ts
 delete mode 100644 src/core/client/stream/components/UserBoxUnauthenticated.spec.1.tsx
 delete mode 100644 src/core/client/stream/containers/UserBoxAuthenticatedContainer.tsx

diff --git a/src/core/client/auth/mutations/SignOffMutation.ts b/src/core/client/auth/mutations/SignOffMutation.ts
deleted file mode 100644
index d406631c4..000000000
--- a/src/core/client/auth/mutations/SignOffMutation.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-import { commitLocalUpdate, Environment } from "relay-runtime";
-import { TalkContext } from "talk-framework/lib/bootstrap";
-import { createMutationContainer } from "talk-framework/lib/relay";
-import { LOCAL_ID } from "talk-framework/lib/relay/withLocalStateContainer";
-
-export type SignOffMutation = () => Promise<void>;
-
-export async function commit(
-  environment: Environment,
-  { localStorage }: TalkContext
-) {
-  return commitLocalUpdate(environment, store => {
-    const record = store.get(LOCAL_ID)!;
-    record.setValue("", "authToken");
-    localStorage.removeItem("authToken");
-
-    // Force gc to trigger.
-    environment
-      .retain({
-        dataID: "tmp",
-        node: { selections: [] },
-        variables: {},
-      })
-      .dispose();
-  });
-}
-
-export const withSignOffMutation = createMutationContainer("signOff", commit);
diff --git a/src/core/client/auth/mutations/index.ts b/src/core/client/auth/mutations/index.ts
index e83f7aabf..46e02df95 100644
--- a/src/core/client/auth/mutations/index.ts
+++ b/src/core/client/auth/mutations/index.ts
@@ -1,4 +1,3 @@
 export { withSetViewMutation, SetViewMutation } from "./SetViewMutation";
 export { withSignInMutation, SignInMutation } from "./SignInMutation";
 export { withSignUpMutation, SignUpMutation } from "./SignUpMutation";
-export { withSignOffMutation, SignOffMutation } from "./SignOffMutation";
diff --git a/src/core/client/framework/mutations/SignOutMutation.ts b/src/core/client/framework/mutations/SignOutMutation.ts
new file mode 100644
index 000000000..41d2a987c
--- /dev/null
+++ b/src/core/client/framework/mutations/SignOutMutation.ts
@@ -0,0 +1,14 @@
+import { Environment } from "relay-runtime";
+import { TalkContext } from "talk-framework/lib/bootstrap";
+import { createMutationContainer } from "talk-framework/lib/relay";
+import signOut from "../rest/signOut";
+import { commit as setAuthToken } from "./SetAuthTokenMutation";
+
+export type SignOutMutation = () => Promise<void>;
+
+export async function commit(environment: Environment, ctx: TalkContext) {
+  await setAuthToken(environment, { authToken: "" }, ctx);
+  await signOut(ctx.rest);
+}
+
+export const withSignOutMutation = createMutationContainer("signOut", commit);
diff --git a/src/core/client/framework/mutations/index.ts b/src/core/client/framework/mutations/index.ts
index 21875e6d8..b128402e6 100644
--- a/src/core/client/framework/mutations/index.ts
+++ b/src/core/client/framework/mutations/index.ts
@@ -3,3 +3,4 @@ export {
   SetAuthTokenMutation,
   SetAuthTokenInput,
 } from "./SetAuthTokenMutation";
+export { withSignOutMutation, SignOutMutation } from "./SignOutMutation";
diff --git a/src/core/client/framework/rest/index.ts b/src/core/client/framework/rest/index.ts
index 7216d255f..b50cbdbe9 100644
--- a/src/core/client/framework/rest/index.ts
+++ b/src/core/client/framework/rest/index.ts
@@ -1,3 +1,3 @@
 export { default as signIn, SignInInput } from "./signIn";
 export { default as signUp, SignUpInput } from "./signUp";
-export { default as signOff } from "./signOff";
+export { default as signOut } from "./signOut";
diff --git a/src/core/client/framework/rest/signOff.ts b/src/core/client/framework/rest/signOff.ts
deleted file mode 100644
index 5a1904d7c..000000000
--- a/src/core/client/framework/rest/signOff.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import { RestClient } from "../lib/rest";
-
-export default function signOff(rest: RestClient) {
-  return rest.fetch("/tenant/auth/local", {
-    method: "DELETE",
-  });
-}
diff --git a/src/core/client/framework/rest/signOut.ts b/src/core/client/framework/rest/signOut.ts
new file mode 100644
index 000000000..0df1be920
--- /dev/null
+++ b/src/core/client/framework/rest/signOut.ts
@@ -0,0 +1,7 @@
+import { RestClient } from "../lib/rest";
+
+export default function signOut(rest: RestClient) {
+  return rest.fetch("/tenant/auth", {
+    method: "DELETE",
+  });
+}
diff --git a/src/core/client/stream/components/UserBoxAuthenticated.tsx b/src/core/client/stream/components/UserBoxAuthenticated.tsx
index dc58ebafa..f271d80b7 100644
--- a/src/core/client/stream/components/UserBoxAuthenticated.tsx
+++ b/src/core/client/stream/components/UserBoxAuthenticated.tsx
@@ -4,12 +4,11 @@ import React, { StatelessComponent } from "react";
 import { Button, Flex, Typography } from "talk-ui/components";
 
 import MatchMedia from "talk-ui/components/MatchMedia";
-import { User } from "../containers/UserBoxContainer";
 import * as styles from "./UserBoxAuthenticated.css";
 
 export interface UserBoxAuthenticatedProps {
-  onSignOff: () => void;
-  user: User;
+  onSignOut: () => void;
+  username: string;
 }
 
 const UserBoxAuthenticated: StatelessComponent<
@@ -25,7 +24,7 @@ const UserBoxAuthenticated: StatelessComponent<
             </Typography>
           </Localized>
           <Typography variant="bodyCopyBold" component="span">
-            {props.user.username}
+            {props.username}
           </Typography>
         </MatchMedia>
       </Flex>
@@ -40,7 +39,7 @@ const UserBoxAuthenticated: StatelessComponent<
             color="primary"
             size="small"
             variant="underlined"
-            onClick={props.onSignOff}
+            onClick={props.onSignOut}
           >
             Sign Out
           </Button>
diff --git a/src/core/client/stream/components/UserBoxUnauthenticated.spec.1.tsx b/src/core/client/stream/components/UserBoxUnauthenticated.spec.1.tsx
deleted file mode 100644
index f9683c1e8..000000000
--- a/src/core/client/stream/components/UserBoxUnauthenticated.spec.1.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import { shallow } from "enzyme";
-import { noop } from "lodash";
-import React from "react";
-
-import { PropTypesOf } from "talk-framework/types";
-
-import UserBoxUnauthenticated from "./UserBoxUnauthenticated";
-
-it("renders correctly", () => {
-  const props: PropTypesOf<typeof UserBoxUnauthenticated> = {
-    onSignIn: noop,
-    onRegister: noop,
-  };
-  const wrapper = shallow(<UserBoxUnauthenticated {...props} />);
-  expect(wrapper).toMatchSnapshot();
-});
diff --git a/src/core/client/stream/containers/UserBoxAuthenticatedContainer.tsx b/src/core/client/stream/containers/UserBoxAuthenticatedContainer.tsx
deleted file mode 100644
index 53fd7c8cc..000000000
--- a/src/core/client/stream/containers/UserBoxAuthenticatedContainer.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import React, { Component } from "react";
-import UserBoxAuthenticated from "talk-stream/components/UserBoxAuthenticated";
-import { SignOffMutation, withSignOffMutation } from "../../auth/mutations";
-import { User } from "../containers/UserBoxContainer";
-
-interface UserBoxAuthenticatedProps {
-  signOff: SignOffMutation;
-  user: User;
-}
-
-class UserBoxAuthenticatedContainer extends Component<
-  UserBoxAuthenticatedProps
-> {
-  private onSignOff = () => {
-    this.props.signOff();
-  };
-  public render() {
-    return (
-      <UserBoxAuthenticated onSignOff={this.onSignOff} user={this.props.user} />
-    );
-  }
-}
-
-const enhanced = withSignOffMutation(UserBoxAuthenticatedContainer);
-export default enhanced;
diff --git a/src/core/client/stream/containers/UserBoxContainer.spec.tsx b/src/core/client/stream/containers/UserBoxContainer.spec.tsx
index 122b4e987..d40d0878a 100644
--- a/src/core/client/stream/containers/UserBoxContainer.spec.tsx
+++ b/src/core/client/stream/containers/UserBoxContainer.spec.tsx
@@ -14,10 +14,13 @@ it("renders correctly", () => {
         view: "SIGN_IN",
       },
     },
+    user: null,
     // tslint:disable-next-line:no-empty
     showAuthPopup: async () => {},
     // tslint:disable-next-line:no-empty
     setAuthPopupState: async () => {},
+    // tslint:disable-next-line:no-empty
+    signOut: async () => {},
   };
   const wrapper = shallow(<UserBoxContainer {...props} />);
   expect(wrapper).toMatchSnapshot();
diff --git a/src/core/client/stream/containers/UserBoxContainer.tsx b/src/core/client/stream/containers/UserBoxContainer.tsx
index 23b388f7a..0ebad7cd9 100644
--- a/src/core/client/stream/containers/UserBoxContainer.tsx
+++ b/src/core/client/stream/containers/UserBoxContainer.tsx
@@ -1,6 +1,11 @@
 import * as React from "react";
 import { Component } from "react";
-import { graphql, withLocalStateContainer } from "talk-framework/lib/relay";
+import {
+  graphql,
+  withFragmentContainer,
+  withLocalStateContainer,
+} from "talk-framework/lib/relay";
+import { UserBoxContainer_user as UserData } from "talk-stream/__generated__/UserBoxContainer_user.graphql";
 import { UserBoxContainerLocal as Local } from "talk-stream/__generated__/UserBoxContainerLocal.graphql";
 import {
   SetAuthPopupStateMutation,
@@ -8,30 +13,18 @@ import {
   withSetAuthPopupStateMutation,
   withShowAuthPopupMutation,
 } from "talk-stream/mutations";
+import { SignOutMutation, withSignOutMutation } from "talk-framework/mutations";
 import { Popup } from "talk-ui/components";
 
 import UserBoxUnauthenticated from "talk-stream/components/UserBoxUnauthenticated";
-import UserBoxAuthenticatedContainer from "../containers/UserBoxAuthenticatedContainer";
-
-export type USER_ROLE =
-  | "ADMIN"
-  | "COMMENTER"
-  | "MODERATOR"
-  | "STAFF"
-  | "%future added value";
-
-export interface User {
-  id?: string;
-  username?: string | null;
-  displayName?: string | null;
-  role?: USER_ROLE;
-}
+import UserBoxAuthenticated from "../components/UserBoxAuthenticated";
 
 interface InnerProps {
   local: Local;
-  user: User | null | undefined;
+  user: UserData | null;
   showAuthPopup: ShowAuthPopupMutation;
   setAuthPopupState: SetAuthPopupStateMutation;
+  signOut: SignOutMutation;
 }
 
 export class UserBoxContainer extends Component<InnerProps> {
@@ -47,10 +40,17 @@ export class UserBoxContainer extends Component<InnerProps> {
         authPopup: { open, focus, view },
       },
       user,
+      signOut,
     } = this.props;
 
     if (user) {
-      return <UserBoxAuthenticatedContainer user={user} />;
+      return (
+        <UserBoxAuthenticated
+          onSignOut={signOut}
+          // TODO: why nullable?
+          username={user.username!}
+        />
+      );
     }
 
     return (
@@ -74,21 +74,30 @@ export class UserBoxContainer extends Component<InnerProps> {
   }
 }
 
-const enhanced = withSetAuthPopupStateMutation(
-  withShowAuthPopupMutation(
-    withLocalStateContainer<Local>(
-      graphql`
-        fragment UserBoxContainerLocal on Local {
-          authPopup {
-            open
-            focus
-            view
+const enhanced = withSignOutMutation(
+  withSetAuthPopupStateMutation(
+    withShowAuthPopupMutation(
+      withLocalStateContainer<Local>(
+        graphql`
+          fragment UserBoxContainerLocal on Local {
+            authPopup {
+              open
+              focus
+              view
+            }
           }
-        }
-      `
-    )(UserBoxContainer)
+        `
+      )(
+        withFragmentContainer<{ user: UserData | null }>({
+          user: graphql`
+            fragment UserBoxContainer_user on User {
+              username
+            }
+          `,
+        })(UserBoxContainer)
+      )
+    )
   )
 );
 
-// TODO: (bc) Add fragment here if composing is doable.
 export default enhanced;

From d8b5b00adc017a70c0acdd4a227553942b162fed Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Fri, 24 Aug 2018 14:11:09 +0200
Subject: [PATCH 57/81] Fix fragments and queries

---
 .../framework/lib/bootstrap/createContext.tsx |  2 +-
 .../mutations/SetAuthTokenMutation.ts         |  2 ++
 .../framework/mutations/SignOutMutation.ts    |  8 +++--
 .../stream/components/PostCommentForm.tsx     | 34 +++++++------------
 src/core/client/stream/components/Stream.tsx  |  9 ++---
 .../containers/PostCommentFormContainer.tsx   |  8 +----
 .../stream/containers/StreamContainer.tsx     | 15 +++++---
 .../stream/containers/UserBoxContainer.tsx    |  5 +--
 .../client/stream/local/initLocalState.ts     |  3 ++
 src/core/client/stream/local/local.graphql    |  4 +++
 .../client/stream/queries/StreamQuery.tsx     | 18 +++++-----
 .../server/graph/tenant/schema/schema.graphql |  6 +++-
 12 files changed, 59 insertions(+), 55 deletions(-)

diff --git a/src/core/client/framework/lib/bootstrap/createContext.tsx b/src/core/client/framework/lib/bootstrap/createContext.tsx
index 07b69d945..e9f6dec89 100644
--- a/src/core/client/framework/lib/bootstrap/createContext.tsx
+++ b/src/core/client/framework/lib/bootstrap/createContext.tsx
@@ -114,7 +114,7 @@ export default async function createContext({
     pym,
     eventEmitter,
     registerClickFarAway,
-    rest: new RestClient("/api"),
+    rest: new RestClient("/api", tokenGetter),
     postMessage: new PostMessageService(),
     localStorage: createLocalStorage(),
     sessionStorage: createSessionStorage(),
diff --git a/src/core/client/framework/mutations/SetAuthTokenMutation.ts b/src/core/client/framework/mutations/SetAuthTokenMutation.ts
index 223bc4054..90e520155 100644
--- a/src/core/client/framework/mutations/SetAuthTokenMutation.ts
+++ b/src/core/client/framework/mutations/SetAuthTokenMutation.ts
@@ -23,6 +23,8 @@ export async function commit(
     } else {
       localStorage.removeItem("authToken");
     }
+    // Increment auth revision to indicate a change in auth state.
+    record.setValue(record.getValue("authRevision") + 1, "authRevision");
 
     // Force gc to trigger.
     environment
diff --git a/src/core/client/framework/mutations/SignOutMutation.ts b/src/core/client/framework/mutations/SignOutMutation.ts
index 41d2a987c..2f170e32e 100644
--- a/src/core/client/framework/mutations/SignOutMutation.ts
+++ b/src/core/client/framework/mutations/SignOutMutation.ts
@@ -6,9 +6,13 @@ import { commit as setAuthToken } from "./SetAuthTokenMutation";
 
 export type SignOutMutation = () => Promise<void>;
 
-export async function commit(environment: Environment, ctx: TalkContext) {
-  await setAuthToken(environment, { authToken: "" }, ctx);
+export async function commit(
+  environment: Environment,
+  input: undefined,
+  ctx: TalkContext
+) {
   await signOut(ctx.rest);
+  await setAuthToken(environment, { authToken: "" }, ctx);
 }
 
 export const withSignOutMutation = createMutationContainer("signOut", commit);
diff --git a/src/core/client/stream/components/PostCommentForm.tsx b/src/core/client/stream/components/PostCommentForm.tsx
index 2efb47786..5493519f5 100644
--- a/src/core/client/stream/components/PostCommentForm.tsx
+++ b/src/core/client/stream/components/PostCommentForm.tsx
@@ -13,7 +13,6 @@ interface FormProps {
 
 export interface PostCommentFormProps {
   onSubmit: OnSubmit<FormProps>;
-  signedIn: boolean;
 }
 
 const PostCommentForm: StatelessComponent<PostCommentFormProps> = props => (
@@ -39,26 +38,19 @@ const PostCommentForm: StatelessComponent<PostCommentFormProps> = props => (
             </div>
           )}
         </Field>
-        {props.signedIn ? (
-          <div className={styles.postButtonContainer}>
-            <PoweredBy />
-            <Localized id="comments-postCommentForm-submit">
-              <Button color="primary" variant="filled" disabled={submitting}>
-                Submit
-              </Button>
-            </Localized>
-          </div>
-        ) : (
-          <Button
-            color="primary"
-            variant="filled"
-            disabled
-            fullWidth
-            size="large"
-          >
-            Sign in and join the conversation
-          </Button>
-        )}
+        <div className={styles.postButtonContainer}>
+          <PoweredBy />
+          <Localized id="comments-postCommentForm-submit">
+            <Button
+              color="primary"
+              variant="filled"
+              disabled={submitting}
+              type="submit"
+            >
+              Submit
+            </Button>
+          </Localized>
+        </div>
       </form>
     )}
   </Form>
diff --git a/src/core/client/stream/components/Stream.tsx b/src/core/client/stream/components/Stream.tsx
index a74435585..01f584d33 100644
--- a/src/core/client/stream/components/Stream.tsx
+++ b/src/core/client/stream/components/Stream.tsx
@@ -10,8 +10,6 @@ import ReplyListContainer from "../containers/ReplyListContainer";
 import UserBoxContainer from "../containers/UserBoxContainer";
 import * as styles from "./Stream.css";
 
-import { User } from "../containers/UserBoxContainer";
-
 export interface StreamProps {
   assetID: string;
   isClosed?: boolean;
@@ -19,17 +17,14 @@ export interface StreamProps {
   onLoadMore?: () => void;
   hasMore?: boolean;
   disableLoadMore?: boolean;
-  user: User | null | undefined;
+  user: {} | null;
 }
 
 const Stream: StatelessComponent<StreamProps> = props => {
   return (
     <Flex className={styles.root} direction="column" itemGutter>
       <UserBoxContainer user={props.user} />
-      <PostCommentFormContainer
-        assetID={props.assetID}
-        signedIn={!!props.user}
-      />
+      <PostCommentFormContainer assetID={props.assetID} />
       <Flex
         direction="column"
         id="talk-comments-stream-log"
diff --git a/src/core/client/stream/containers/PostCommentFormContainer.tsx b/src/core/client/stream/containers/PostCommentFormContainer.tsx
index c88aaf43c..bf4ab8cf9 100644
--- a/src/core/client/stream/containers/PostCommentFormContainer.tsx
+++ b/src/core/client/stream/containers/PostCommentFormContainer.tsx
@@ -11,7 +11,6 @@ import { CreateCommentMutation, withCreateCommentMutation } from "../mutations";
 interface InnerProps {
   createComment: CreateCommentMutation;
   assetID: string;
-  signedIn: boolean;
 }
 
 class PostCommentFormContainer extends Component<InnerProps> {
@@ -32,12 +31,7 @@ class PostCommentFormContainer extends Component<InnerProps> {
     return undefined;
   };
   public render() {
-    return (
-      <PostCommentForm
-        onSubmit={this.onSubmit}
-        signedIn={this.props.signedIn}
-      />
-    );
+    return <PostCommentForm onSubmit={this.onSubmit} />;
   }
 }
 
diff --git a/src/core/client/stream/containers/StreamContainer.tsx b/src/core/client/stream/containers/StreamContainer.tsx
index 4df5afaf5..d629c35d1 100644
--- a/src/core/client/stream/containers/StreamContainer.tsx
+++ b/src/core/client/stream/containers/StreamContainer.tsx
@@ -3,18 +3,18 @@ import { graphql, RelayPaginationProp } from "react-relay";
 
 import { withPaginationContainer } from "talk-framework/lib/relay";
 import { PropTypesOf } from "talk-framework/types";
-import { StreamContainer_asset as Data } from "talk-stream/__generated__/StreamContainer_asset.graphql";
+import { StreamContainer_asset as AssetData } from "talk-stream/__generated__/StreamContainer_asset.graphql";
+import { StreamContainer_user as UserData } from "talk-stream/__generated__/StreamContainer_user.graphql";
 import {
   COMMENT_SORT,
   StreamContainerPaginationQueryVariables,
 } from "talk-stream/__generated__/StreamContainerPaginationQuery.graphql";
 
 import Stream from "../components/Stream";
-import { User } from "../containers/UserBoxContainer";
 
 interface InnerProps {
-  asset: Data;
-  user: User | null | undefined;
+  asset: AssetData;
+  user: UserData | null;
   relay: RelayPaginationProp;
 }
 
@@ -64,7 +64,7 @@ interface FragmentVariables {
 }
 
 const enhanced = withPaginationContainer<
-  { asset: Data },
+  { asset: AssetData; user: UserData | null },
   InnerProps,
   FragmentVariables,
   StreamContainerPaginationQueryVariables
@@ -91,6 +91,11 @@ const enhanced = withPaginationContainer<
         }
       }
     `,
+    user: graphql`
+      fragment StreamContainer_user on User {
+        ...UserBoxContainer_user
+      }
+    `,
   },
   {
     direction: "forward",
diff --git a/src/core/client/stream/containers/UserBoxContainer.tsx b/src/core/client/stream/containers/UserBoxContainer.tsx
index 0ebad7cd9..cc05e3872 100644
--- a/src/core/client/stream/containers/UserBoxContainer.tsx
+++ b/src/core/client/stream/containers/UserBoxContainer.tsx
@@ -1,22 +1,23 @@
 import * as React from "react";
 import { Component } from "react";
+
 import {
   graphql,
   withFragmentContainer,
   withLocalStateContainer,
 } from "talk-framework/lib/relay";
+import { SignOutMutation, withSignOutMutation } from "talk-framework/mutations";
 import { UserBoxContainer_user as UserData } from "talk-stream/__generated__/UserBoxContainer_user.graphql";
 import { UserBoxContainerLocal as Local } from "talk-stream/__generated__/UserBoxContainerLocal.graphql";
+import UserBoxUnauthenticated from "talk-stream/components/UserBoxUnauthenticated";
 import {
   SetAuthPopupStateMutation,
   ShowAuthPopupMutation,
   withSetAuthPopupStateMutation,
   withShowAuthPopupMutation,
 } from "talk-stream/mutations";
-import { SignOutMutation, withSignOutMutation } from "talk-framework/mutations";
 import { Popup } from "talk-ui/components";
 
-import UserBoxUnauthenticated from "talk-stream/components/UserBoxUnauthenticated";
 import UserBoxAuthenticated from "../components/UserBoxAuthenticated";
 
 interface InnerProps {
diff --git a/src/core/client/stream/local/initLocalState.ts b/src/core/client/stream/local/initLocalState.ts
index 171c52294..81ba25702 100644
--- a/src/core/client/stream/local/initLocalState.ts
+++ b/src/core/client/stream/local/initLocalState.ts
@@ -33,6 +33,9 @@ export default async function initLocalState(
     // Set auth token
     localRecord.setValue(localStorage.getItem("authToken") || "", "authToken");
 
+    // Set initial auth revision, this is increment whenenver auth state might have changed.
+    localRecord.setValue(0, "authRevision");
+
     // Parse query params
     const query = qs.parse(location.search);
 
diff --git a/src/core/client/stream/local/local.graphql b/src/core/client/stream/local/local.graphql
index 37426b867..9c2585ebf 100644
--- a/src/core/client/stream/local/local.graphql
+++ b/src/core/client/stream/local/local.graphql
@@ -22,6 +22,10 @@ type Local {
   commentID: String
   authPopup: AuthPopup!
   authToken: String
+  # Used to invalidate the `me` endpoint.
+  # This is incremented whenever the auth status
+  # might have changed.
+  authRevision: Int!
 }
 
 extend type Query {
diff --git a/src/core/client/stream/queries/StreamQuery.tsx b/src/core/client/stream/queries/StreamQuery.tsx
index 78c118cdd..41d262428 100644
--- a/src/core/client/stream/queries/StreamQuery.tsx
+++ b/src/core/client/stream/queries/StreamQuery.tsx
@@ -30,25 +30,25 @@ export const render = ({ error, props }: ReadyState<StreamQueryResponse>) => {
 };
 
 const StreamQuery: StatelessComponent<InnerProps> = ({
-  local: { assetID, authToken },
+  local: { assetID, authRevision },
 }) => (
   <QueryRenderer<StreamQueryVariables, StreamQueryResponse>
     query={graphql`
-      query StreamQuery($assetID: ID!, $signedIn: Boolean!) {
+      query StreamQuery($assetID: ID!, $authRevision: Int!) {
         asset(id: $assetID) {
           ...StreamContainer_asset
         }
-        me @include(if: $signedIn) {
-          id
-          username
-          displayName
-          role
+        # authRevision is increment every time auth state has changed.
+        # This is basically a cache invalidation and causes relay
+        # to automatically update this query.
+        me(clientAuthRevision: $authRevision) {
+          ...StreamContainer_user
         }
       }
     `}
     variables={{
       assetID,
-      signedIn: !!authToken,
+      authRevision,
     }}
     render={render}
   />
@@ -58,7 +58,7 @@ const enhanced = withLocalStateContainer<Local>(
   graphql`
     fragment StreamQueryLocal on Local {
       assetID
-      authToken
+      authRevision
     }
   `
 )(StreamQuery);
diff --git a/src/core/server/graph/tenant/schema/schema.graphql b/src/core/server/graph/tenant/schema/schema.graphql
index 1c96051bd..d51f4be16 100644
--- a/src/core/server/graph/tenant/schema/schema.graphql
+++ b/src/core/server/graph/tenant/schema/schema.graphql
@@ -769,8 +769,12 @@ type Query {
 
   """
   me is the current logged in User.
+
+  clientAuthRevision is an implementation detail that is only
+  used on the client to invalidate the cache.
+  TODO: This should move to a client side directive if this becomes possible.
   """
-  me: User
+  me(clientAuthRevision: Int): User
 
   """
   settings is the Settings for a given Tenant.

From 53cc69ac1f6ff481a0da06ae16828dc70e908f39 Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Fri, 24 Aug 2018 15:30:47 +0200
Subject: [PATCH 58/81] Fix formfield imports

---
 src/core/client/ui/components/FormField/FormField.mdx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/core/client/ui/components/FormField/FormField.mdx b/src/core/client/ui/components/FormField/FormField.mdx
index aedf67752..055bc30f8 100644
--- a/src/core/client/ui/components/FormField/FormField.mdx
+++ b/src/core/client/ui/components/FormField/FormField.mdx
@@ -4,7 +4,7 @@ menu: UI Kit
 ---
 
 import { Playground, PropsTable } from 'docz'
-import { InputLabel, ValidationMessage, TextField, InputDescription, FormField } from '../core/client/ui/components'
+import { InputLabel, ValidationMessage, TextField, InputDescription, FormField } from '../'
 
 # FormField
 

From 130c7bac626641f4e508c58c1b7cd5c32ba23ea7 Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Fri, 24 Aug 2018 15:38:12 +0200
Subject: [PATCH 59/81] Fix formfield by using Flex

---
 .../ui/components/FormField/FormField.css     | 11 -------
 .../ui/components/FormField/FormField.mdx     |  2 +-
 .../ui/components/FormField/FormField.tsx     | 17 ++++------
 src/docs/forms.mdx                            | 32 +++++++++----------
 4 files changed, 23 insertions(+), 39 deletions(-)

diff --git a/src/core/client/ui/components/FormField/FormField.css b/src/core/client/ui/components/FormField/FormField.css
index b1521ed5d..88de80d08 100644
--- a/src/core/client/ui/components/FormField/FormField.css
+++ b/src/core/client/ui/components/FormField/FormField.css
@@ -1,14 +1,3 @@
 .root {
-  display: flex;
-  flex-direction: column;
   width: 100%;
-  justify-content: space-between;
-
-  &.halfItemGutter > * {
-    margin-left: calc(0.5 * var(--spacing-unit)) !important;
-  }
-
-  &.itemGutter > * {
-    margin-top: var(--spacing-unit) !important;
-  }
 }
diff --git a/src/core/client/ui/components/FormField/FormField.mdx b/src/core/client/ui/components/FormField/FormField.mdx
index 055bc30f8..6005da178 100644
--- a/src/core/client/ui/components/FormField/FormField.mdx
+++ b/src/core/client/ui/components/FormField/FormField.mdx
@@ -16,7 +16,7 @@ FormField manages the gutters between inner elements. It's a form field wrapper
     <FormField>
       <InputLabel defaultValue="something.com" color="error" >Username</InputLabel>
       <InputDescription>A unique identifier displayed on your comments. You may use “_” and “.”</InputDescription>
-      <TextField/>
+      <TextField fullWidth />
       <ValidationMessage>Invalid characters. Try again.</ValidationMessage>
     </FormField>
 </Playground>
diff --git a/src/core/client/ui/components/FormField/FormField.tsx b/src/core/client/ui/components/FormField/FormField.tsx
index fe5b6dd7b..be9c78554 100644
--- a/src/core/client/ui/components/FormField/FormField.tsx
+++ b/src/core/client/ui/components/FormField/FormField.tsx
@@ -4,6 +4,7 @@ import { StatelessComponent } from "react";
 
 import { withStyles } from "talk-ui/hocs";
 
+import Flex from "../Flex";
 import * as styles from "./FormField.css";
 
 interface InnerProps {
@@ -17,21 +18,15 @@ interface InnerProps {
 const FormField: StatelessComponent<InnerProps> = props => {
   const { classes, className, children, itemGutter, ...rest } = props;
 
-  // TODO (bc): Use flex component once the extra div issue is solved.
   return (
-    <div
-      className={cn(
-        classes.root,
-        {
-          [classes.itemGutter]: itemGutter === true,
-          [classes.halfItemGutter]: itemGutter === "half",
-        },
-        className
-      )}
+    <Flex
+      direction="column"
+      className={cn(classes.root, className)}
+      itemGutter="half"
       {...rest}
     >
       {children}
-    </div>
+    </Flex>
   );
 };
 
diff --git a/src/docs/forms.mdx b/src/docs/forms.mdx
index 2fe5dc191..cfd1ab523 100644
--- a/src/docs/forms.mdx
+++ b/src/docs/forms.mdx
@@ -14,29 +14,29 @@ import { InputLabel, CallOut, ValidationMessage, TextField, InputDescription, Fl
 
 ## Simple Form
 <Playground>
-  <Flex itemGutter direction="column">
+  <Flex itemGutter="double" direction="column">
     <Typography variant="heading1">Sign up to join the conversation</Typography>
 
     <FormField>
       <InputLabel>Email Address</InputLabel>
-      <TextField/>
+      <TextField fullWidth />
     </FormField>
 
     <FormField>
       <InputLabel>Username</InputLabel>
       <InputDescription>A unique identifier displayed on your comments. You may use “_” and “.”</InputDescription>
-      <TextField/>
+      <TextField fullWidth />
     </FormField>
 
     <FormField>
       <InputLabel>Password</InputLabel>
       <InputDescription>Must be at least 8 characters</InputDescription>
-      <TextField/>
+      <TextField fullWidth />
     </FormField>
 
     <FormField>
       <InputLabel>Confirm Password</InputLabel>
-      <TextField/>
+      <TextField fullWidth />
     </FormField>
 
     <Button variant="filled" color="primary" size="large" fullWidth>Sign up and join the conversation</Button>
@@ -46,31 +46,31 @@ import { InputLabel, CallOut, ValidationMessage, TextField, InputDescription, Fl
 ## Simple Form with error
 
 <Playground>
-  <Flex itemGutter direction="column">
+  <Flex itemGutter="double" direction="column">
     <Typography variant="heading1">Sign up to join the conversation</Typography>
 
     <FormField>
       <InputLabel>Email Address</InputLabel>
-      <TextField/>
+      <TextField fullWidth />
     </FormField>
 
     <FormField>
       <InputLabel defaultValue="something.com">Username</InputLabel>
       <InputDescription>A unique identifier displayed on your comments. You may use “_” and “.”</InputDescription>
-      <TextField/>
-      <ValidationMessage>Invalid characters. Try again.</ValidationMessage>
+      <TextField fullWidth/>
+      <ValidationMessage fullWidth>Invalid characters. Try again.</ValidationMessage>
     </FormField>
 
 
     <FormField>
       <InputLabel>Password</InputLabel>
       <InputDescription>Must be at least 8 characters</InputDescription>
-      <TextField/>
+      <TextField fullWidth/>
     </FormField>
 
     <FormField>
       <InputLabel>Confirm Password</InputLabel>
-      <TextField/>
+      <TextField fullWidth/>
     </FormField>
 
     <Button variant="filled" color="primary" size="large" fullWidth>Sign up and join the conversation</Button>
@@ -80,30 +80,30 @@ import { InputLabel, CallOut, ValidationMessage, TextField, InputDescription, Fl
 ## Simple Form with CallOut
 
 <Playground>
-  <Flex itemGutter direction="column">
+  <Flex itemGutter="double" direction="column">
     <Typography variant="heading1">Sign up to join the conversation</Typography>
     <CallOut color="error" fullWidth>The email address or password you entered is incorrect. Try again</CallOut>
     <FormField>
       <InputLabel>Email Address</InputLabel>
-      <TextField/>
+      <TextField fullWidth/>
     </FormField>
 
     <FormField>
       <InputLabel defaultValue="something.com">Username</InputLabel>
       <InputDescription>A unique identifier displayed on your comments. You may use “_” and “.”</InputDescription>
-      <TextField/>
+      <TextField fullWidth/>
     </FormField>
 
 
     <FormField>
       <InputLabel>Password</InputLabel>
       <InputDescription>Must be at least 8 characters</InputDescription>
-      <TextField/>
+      <TextField fullWidth/>
     </FormField>
 
     <FormField>
       <InputLabel>Confirm Password</InputLabel>
-      <TextField/>
+      <TextField fullWidth/>
     </FormField>
 
     <Button variant="filled" color="primary" size="large" fullWidth>Sign up and join the conversation</Button>

From c419ee5ad1d821d58261fe64bccf6410c9d11072 Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Fri, 24 Aug 2018 15:39:25 +0200
Subject: [PATCH 60/81] Allo all htmlattribtues

---
 src/core/client/ui/components/FormField/FormField.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/core/client/ui/components/FormField/FormField.tsx b/src/core/client/ui/components/FormField/FormField.tsx
index be9c78554..c5ed095ad 100644
--- a/src/core/client/ui/components/FormField/FormField.tsx
+++ b/src/core/client/ui/components/FormField/FormField.tsx
@@ -1,5 +1,5 @@
 import cn from "classnames";
-import React, { ReactNode } from "react";
+import React, { HTMLAttributes, ReactNode } from "react";
 import { StatelessComponent } from "react";
 
 import { withStyles } from "talk-ui/hocs";
@@ -7,7 +7,7 @@ import { withStyles } from "talk-ui/hocs";
 import Flex from "../Flex";
 import * as styles from "./FormField.css";
 
-interface InnerProps {
+interface InnerProps extends HTMLAttributes<any> {
   children: ReactNode;
   classes: typeof styles;
   id?: string;

From b2b9b20efba64af622b951f8a6b049e3c5b4f281 Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Fri, 24 Aug 2018 15:40:20 +0200
Subject: [PATCH 61/81] Revert and fix props

---
 src/core/client/ui/components/FormField/FormField.tsx | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/src/core/client/ui/components/FormField/FormField.tsx b/src/core/client/ui/components/FormField/FormField.tsx
index c5ed095ad..251d215bd 100644
--- a/src/core/client/ui/components/FormField/FormField.tsx
+++ b/src/core/client/ui/components/FormField/FormField.tsx
@@ -7,23 +7,21 @@ import { withStyles } from "talk-ui/hocs";
 import Flex from "../Flex";
 import * as styles from "./FormField.css";
 
-interface InnerProps extends HTMLAttributes<any> {
+interface InnerProps {
   children: ReactNode;
   classes: typeof styles;
   id?: string;
   className?: string;
-  itemGutter?: boolean | "half";
 }
 
 const FormField: StatelessComponent<InnerProps> = props => {
-  const { classes, className, children, itemGutter, ...rest } = props;
+  const { classes, className, children } = props;
 
   return (
     <Flex
       direction="column"
       className={cn(classes.root, className)}
       itemGutter="half"
-      {...rest}
     >
       {children}
     </Flex>

From eab8f0e18b427a499e9feee74be8ff7c711484eb Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Fri, 24 Aug 2018 15:40:34 +0200
Subject: [PATCH 62/81] Fix props

---
 src/core/client/ui/components/FormField/FormField.tsx | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/src/core/client/ui/components/FormField/FormField.tsx b/src/core/client/ui/components/FormField/FormField.tsx
index 251d215bd..8310faeb9 100644
--- a/src/core/client/ui/components/FormField/FormField.tsx
+++ b/src/core/client/ui/components/FormField/FormField.tsx
@@ -28,9 +28,5 @@ const FormField: StatelessComponent<InnerProps> = props => {
   );
 };
 
-FormField.defaultProps = {
-  itemGutter: true,
-};
-
 const enhanced = withStyles(styles)(FormField);
 export default enhanced;

From 10df1de98e9e988ff03557aa3b7f55c2adf915c4 Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Fri, 24 Aug 2018 15:41:20 +0200
Subject: [PATCH 63/81] Pass rest of props

---
 src/core/client/ui/components/FormField/FormField.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/core/client/ui/components/FormField/FormField.tsx b/src/core/client/ui/components/FormField/FormField.tsx
index 8310faeb9..40d2a0d61 100644
--- a/src/core/client/ui/components/FormField/FormField.tsx
+++ b/src/core/client/ui/components/FormField/FormField.tsx
@@ -15,13 +15,14 @@ interface InnerProps {
 }
 
 const FormField: StatelessComponent<InnerProps> = props => {
-  const { classes, className, children } = props;
+  const { classes, className, children, ...rest } = props;
 
   return (
     <Flex
       direction="column"
       className={cn(classes.root, className)}
       itemGutter="half"
+      {...rest}
     >
       {children}
     </Flex>

From 3dc3e1435af0ab33e0b3055f2914cda915ae968e Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Fri, 24 Aug 2018 19:11:56 +0200
Subject: [PATCH 64/81] Use HorizontalGutter component, simplify Flex

---
 .../stream/components/Comment/Username.tsx    |  2 +-
 .../stream/components/PermalinkView.tsx       |  8 +--
 .../stream/components/PostCommentForm.css     |  2 -
 .../stream/components/PostCommentForm.tsx     | 72 ++++++++++---------
 .../client/stream/components/PoweredBy.tsx    | 14 ++--
 .../client/stream/components/ReplyList.tsx    |  8 +--
 src/core/client/stream/components/Stream.tsx  | 22 +++---
 .../components/UserBoxAuthenticated.tsx       | 47 +++++-------
 .../components/UserBoxUnauthenticated.tsx     |  4 +-
 src/core/client/stream/index.tsx              |  4 +-
 .../client/ui/components/Button/Button.mdx    |  8 +--
 .../client/ui/components/CallOut/CallOut.mdx  |  6 +-
 src/core/client/ui/components/Flex/Flex.css   |  6 +-
 src/core/client/ui/components/Flex/Flex.tsx   | 37 +++++++---
 .../ui/components/FormField/FormField.tsx     | 11 ++-
 .../HorizontalGutter/HorizontalGutter.css     | 27 +++++++
 .../HorizontalGutter/HorizontalGutter.mdx     | 42 +++++++++++
 .../HorizontalGutter/HorizontalGutter.tsx     | 37 ++++++++++
 .../ui/components/HorizontalGutter/index.ts   |  1 +
 .../ui/components/InputLabel/InputLabel.mdx   |  6 +-
 .../ui/components/TextField/TextField.mdx     |  6 +-
 .../ui/components/ToggleShow/ToogleShow.mdx   |  6 +-
 .../ui/components/Typography/Typography.mdx   | 14 ++--
 .../ui/components/Typography/Typography.tsx   | 26 ++++---
 .../ValidationMessage/ValidationMessage.mdx   |  6 +-
 .../ValidationMessage/ValidationMessage.tsx   |  5 +-
 src/core/client/ui/components/index.ts        |  1 +
 src/locales/en-US/stream.ftl                  |  6 ++
 28 files changed, 286 insertions(+), 148 deletions(-)
 create mode 100644 src/core/client/ui/components/HorizontalGutter/HorizontalGutter.css
 create mode 100644 src/core/client/ui/components/HorizontalGutter/HorizontalGutter.mdx
 create mode 100644 src/core/client/ui/components/HorizontalGutter/HorizontalGutter.tsx
 create mode 100644 src/core/client/ui/components/HorizontalGutter/index.ts

diff --git a/src/core/client/stream/components/Comment/Username.tsx b/src/core/client/stream/components/Comment/Username.tsx
index f19c23024..728944ea2 100644
--- a/src/core/client/stream/components/Comment/Username.tsx
+++ b/src/core/client/stream/components/Comment/Username.tsx
@@ -16,7 +16,7 @@ const Username: StatelessComponent<UsernameProps> = props => {
         <Typography
           variant={matches ? "heading2" : "heading3"}
           className={styles.root}
-          component="span"
+          container="span"
         >
           {props.children}
         </Typography>
diff --git a/src/core/client/stream/components/PermalinkView.tsx b/src/core/client/stream/components/PermalinkView.tsx
index 4d3035b8d..362efa562 100644
--- a/src/core/client/stream/components/PermalinkView.tsx
+++ b/src/core/client/stream/components/PermalinkView.tsx
@@ -1,7 +1,7 @@
 import { Localized } from "fluent-react/compat";
 import React, { MouseEvent, StatelessComponent } from "react";
 
-import { Button, Flex, Typography } from "talk-ui/components";
+import { Button, Typography } from "talk-ui/components";
 
 import CommentContainer from "../containers/CommentContainer";
 import * as styles from "./PermalinkView.css";
@@ -41,11 +41,7 @@ const PermalinkView: StatelessComponent<PermalinkViewProps> = ({
           <Typography>Comment not found</Typography>
         </Localized>
       )}
-      {comment && (
-        <Flex direction="column">
-          <CommentContainer data={comment} />
-        </Flex>
-      )}
+      {comment && <CommentContainer data={comment} />}
     </div>
   );
 };
diff --git a/src/core/client/stream/components/PostCommentForm.css b/src/core/client/stream/components/PostCommentForm.css
index 954a4de74..6c6c47b29 100644
--- a/src/core/client/stream/components/PostCommentForm.css
+++ b/src/core/client/stream/components/PostCommentForm.css
@@ -1,6 +1,5 @@
 .root {
   width: 100%;
-  padding-bottom: var(--spacing-unit);
 }
 
 .textarea {
@@ -9,7 +8,6 @@
   height: 150px;
   width: 100%;
   box-sizing: border-box;
-  margin-bottom: var(--spacing-unit);
   padding: var(--spacing-unit);
   border-radius: var(--round-corners);
   resize: vertical;
diff --git a/src/core/client/stream/components/PostCommentForm.tsx b/src/core/client/stream/components/PostCommentForm.tsx
index 5493519f5..36e7d8be4 100644
--- a/src/core/client/stream/components/PostCommentForm.tsx
+++ b/src/core/client/stream/components/PostCommentForm.tsx
@@ -3,7 +3,7 @@ import React, { StatelessComponent } from "react";
 import { Field, Form } from "react-final-form";
 import { OnSubmit } from "talk-framework/lib/form";
 import { required } from "talk-framework/lib/validation";
-import { Button, Typography } from "talk-ui/components";
+import { Button, Flex, HorizontalGutter, Typography } from "talk-ui/components";
 import * as styles from "./PostCommentForm.css";
 import PoweredBy from "./PoweredBy";
 
@@ -19,38 +19,44 @@ const PostCommentForm: StatelessComponent<PostCommentFormProps> = props => (
   <Form onSubmit={props.onSubmit}>
     {({ handleSubmit, submitting }) => (
       <form autoComplete="off" onSubmit={handleSubmit} className={styles.root}>
-        <Field name="body" validate={required}>
-          {({ input, meta }) => (
-            <div>
-              <textarea
-                className={styles.textarea}
-                name={input.name}
-                onChange={input.onChange}
-                value={input.value}
-                placeholder="Post a comment"
-              />
-              {meta.touched &&
-                (meta.error || meta.submitError) && (
-                  <Typography align="right" color="error" gutterBottom>
-                    {meta.error || meta.submitError}
-                  </Typography>
-                )}
-            </div>
-          )}
-        </Field>
-        <div className={styles.postButtonContainer}>
-          <PoweredBy />
-          <Localized id="comments-postCommentForm-submit">
-            <Button
-              color="primary"
-              variant="filled"
-              disabled={submitting}
-              type="submit"
-            >
-              Submit
-            </Button>
-          </Localized>
-        </div>
+        <HorizontalGutter size="half">
+          <Field name="body" validate={required}>
+            {({ input, meta }) => (
+              <div style={{ width: "100%" }}>
+                <textarea
+                  className={styles.textarea}
+                  name={input.name}
+                  onChange={input.onChange}
+                  value={input.value}
+                  placeholder="Post a comment"
+                />
+                {meta.touched &&
+                  (meta.error || meta.submitError) && (
+                    <Typography align="right" color="error" gutterBottom>
+                      {meta.error || meta.submitError}
+                    </Typography>
+                  )}
+              </div>
+            )}
+          </Field>
+          <Flex
+            direction="row"
+            justifyContent="space-between"
+            alignItems="flex-start"
+          >
+            <PoweredBy />
+            <Localized id="comments-postCommentForm-submit">
+              <Button
+                color="primary"
+                variant="filled"
+                disabled={submitting}
+                type="submit"
+              >
+                Submit
+              </Button>
+            </Localized>
+          </Flex>
+        </HorizontalGutter>
       </form>
     )}
   </Form>
diff --git a/src/core/client/stream/components/PoweredBy.tsx b/src/core/client/stream/components/PoweredBy.tsx
index 5991c837a..ce2eb5563 100644
--- a/src/core/client/stream/components/PoweredBy.tsx
+++ b/src/core/client/stream/components/PoweredBy.tsx
@@ -1,12 +1,16 @@
 import React, { StatelessComponent } from "react";
-import { Flex, Typography } from "talk-ui/components";
+import { Typography } from "talk-ui/components";
 
 const PoweredBy: StatelessComponent = () => {
   return (
-    <Flex itemGutter="half">
-      <Typography variant="bodyCopy">Powered by</Typography>
-      <Typography variant="heading4">The Coral Project</Typography>
-    </Flex>
+    <div>
+      <Typography variant="inputDescription" container="span">
+        Powered by
+      </Typography>{" "}
+      <Typography variant="heading4" container="span">
+        The Coral Project
+      </Typography>
+    </div>
   );
 };
 
diff --git a/src/core/client/stream/components/ReplyList.tsx b/src/core/client/stream/components/ReplyList.tsx
index 6f4380769..c35e0c32c 100644
--- a/src/core/client/stream/components/ReplyList.tsx
+++ b/src/core/client/stream/components/ReplyList.tsx
@@ -2,7 +2,7 @@ import { Localized } from "fluent-react/compat";
 import * as React from "react";
 import { StatelessComponent } from "react";
 
-import { Button, Flex } from "talk-ui/components";
+import { Button, HorizontalGutter } from "talk-ui/components";
 
 import CommentContainer from "../containers/CommentContainer";
 import Indent from "./Indent";
@@ -18,11 +18,9 @@ export interface ReplyListProps {
 const ReplyList: StatelessComponent<ReplyListProps> = props => {
   return (
     <Indent>
-      <Flex
-        direction="column"
+      <HorizontalGutter
         id={`talk-comments-replyList-log--${props.commentID}`}
         role="log"
-        itemGutter
       >
         {props.comments.map(comment => (
           <CommentContainer key={comment.id} data={comment} />
@@ -41,7 +39,7 @@ const ReplyList: StatelessComponent<ReplyListProps> = props => {
             </Button>
           </Localized>
         )}
-      </Flex>
+      </HorizontalGutter>
     </Indent>
   );
 };
diff --git a/src/core/client/stream/components/Stream.tsx b/src/core/client/stream/components/Stream.tsx
index 01f584d33..49a2f2cef 100644
--- a/src/core/client/stream/components/Stream.tsx
+++ b/src/core/client/stream/components/Stream.tsx
@@ -2,7 +2,7 @@ import { Localized } from "fluent-react/compat";
 import * as React from "react";
 import { StatelessComponent } from "react";
 
-import { Button, Flex } from "talk-ui/components";
+import { Button, HorizontalGutter } from "talk-ui/components";
 
 import CommentContainer from "../containers/CommentContainer";
 import PostCommentFormContainer from "../containers/PostCommentFormContainer";
@@ -22,21 +22,21 @@ export interface StreamProps {
 
 const Stream: StatelessComponent<StreamProps> = props => {
   return (
-    <Flex className={styles.root} direction="column" itemGutter>
-      <UserBoxContainer user={props.user} />
-      <PostCommentFormContainer assetID={props.assetID} />
-      <Flex
-        direction="column"
+    <HorizontalGutter className={styles.root}>
+      <HorizontalGutter size="half">
+        <UserBoxContainer user={props.user} />
+        <PostCommentFormContainer assetID={props.assetID} />
+      </HorizontalGutter>
+      <HorizontalGutter
         id="talk-comments-stream-log"
         role="log"
         aria-live="polite"
-        itemGutter
       >
         {props.comments.map(comment => (
-          <Flex direction="column" key={comment.id} itemGutter>
+          <HorizontalGutter key={comment.id}>
             <CommentContainer data={comment} />
             <ReplyListContainer comment={comment} />
-          </Flex>
+          </HorizontalGutter>
         ))}
         {props.hasMore && (
           <Localized id="comments-stream-loadMore">
@@ -52,8 +52,8 @@ const Stream: StatelessComponent<StreamProps> = props => {
             </Button>
           </Localized>
         )}
-      </Flex>
-    </Flex>
+      </HorizontalGutter>
+    </HorizontalGutter>
   );
 };
 
diff --git a/src/core/client/stream/components/UserBoxAuthenticated.tsx b/src/core/client/stream/components/UserBoxAuthenticated.tsx
index f271d80b7..0ed1dc483 100644
--- a/src/core/client/stream/components/UserBoxAuthenticated.tsx
+++ b/src/core/client/stream/components/UserBoxAuthenticated.tsx
@@ -3,9 +3,6 @@ import React, { StatelessComponent } from "react";
 
 import { Button, Flex, Typography } from "talk-ui/components";
 
-import MatchMedia from "talk-ui/components/MatchMedia";
-import * as styles from "./UserBoxAuthenticated.css";
-
 export interface UserBoxAuthenticatedProps {
   onSignOut: () => void;
   username: string;
@@ -15,36 +12,30 @@ const UserBoxAuthenticated: StatelessComponent<
   UserBoxAuthenticatedProps
 > = props => {
   return (
-    <Flex itemGutter="half">
-      <Flex itemGutter="half" className={styles.child}>
-        <MatchMedia gteWidth="sm">
-          <Localized id="comments-userBoxAuthenticated-signedInAs">
-            <Typography variant="bodyCopy" component="span">
-              Signed in as
-            </Typography>
-          </Localized>
-          <Typography variant="bodyCopyBold" component="span">
-            {props.username}
-          </Typography>
-        </MatchMedia>
-      </Flex>
-      <Flex itemGutter="half" className={styles.child}>
-        <Localized id="comments-userBoxAuthenticated-notYou">
-          <Typography variant="bodyCopy" component="span">
-            Not you?
-          </Typography>
-        </Localized>
-        <Localized id="comments-userBoxAuthenticated-signOut">
+    <Flex itemGutter="half" wrap>
+      <Localized
+        id="comments-userBoxAuthenticated-signedInAs"
+        username={<Typography variant="bodyCopyBold" container="span" />}
+      >
+        <Typography variant="bodyCopy" container="div">
+          {"Signed in as <username>Username</username>."}
+        </Typography>
+      </Localized>
+      <Localized
+        id="comments-userBoxAuthenticated-notYou"
+        button={
           <Button
             color="primary"
             size="small"
             variant="underlined"
             onClick={props.onSignOut}
-          >
-            Sign Out
-          </Button>
-        </Localized>
-      </Flex>
+          />
+        }
+      >
+        <Typography variant="bodyCopy" container={<Flex inline wrap />}>
+          {"Not you? <button>Sign Out</button>"}
+        </Typography>
+      </Localized>
     </Flex>
   );
 };
diff --git a/src/core/client/stream/components/UserBoxUnauthenticated.tsx b/src/core/client/stream/components/UserBoxUnauthenticated.tsx
index f1a8716ee..f184f76f6 100644
--- a/src/core/client/stream/components/UserBoxUnauthenticated.tsx
+++ b/src/core/client/stream/components/UserBoxUnauthenticated.tsx
@@ -21,12 +21,12 @@ const UserBoxUnauthenticated: StatelessComponent<
           <Typography
             className={styles.joinText}
             variant="bodyCopyBold"
-            component="span"
+            container="span"
           >
             Join the conversation
           </Typography>
         </Localized>
-        <Typography variant="bodyCopyBold" component="span">
+        <Typography variant="bodyCopyBold" container="span">
           |
         </Typography>
       </MatchMedia>
diff --git a/src/core/client/stream/index.tsx b/src/core/client/stream/index.tsx
index 0f88bdf08..31fade961 100644
--- a/src/core/client/stream/index.tsx
+++ b/src/core/client/stream/index.tsx
@@ -40,9 +40,7 @@ async function main() {
   });
 
   const Index: StatelessComponent = () => (
-    <TalkContextProvider
-      value={{ ...context, mediaQueryValues: { width: 640 } }}
-    >
+    <TalkContextProvider value={context}>
       <AppContainer />
     </TalkContextProvider>
   );
diff --git a/src/core/client/ui/components/Button/Button.mdx b/src/core/client/ui/components/Button/Button.mdx
index 4c4a15659..f6d85b6fc 100644
--- a/src/core/client/ui/components/Button/Button.mdx
+++ b/src/core/client/ui/components/Button/Button.mdx
@@ -13,7 +13,7 @@ import Flex from '../Flex'
 
 ## Regular Button
 <Playground>
-  <Flex itemGutter>
+  <Flex itemGutter wrap>
     <Button>Push Me</Button>
     <Button size="small">Push Me</Button>
     <Button size="large">Push Me</Button>
@@ -29,7 +29,7 @@ import Flex from '../Flex'
 
 ## Filled Button
 <Playground>
-  <Flex itemGutter>
+  <Flex itemGutter wrap>
     <Button variant="filled">Push Me</Button>
     <Button variant="filled" size="small">Push Me</Button>
     <Button variant="filled" size="large">Push Me</Button>
@@ -45,7 +45,7 @@ import Flex from '../Flex'
 
 ## Outlined Button
 <Playground>
-  <Flex itemGutter>
+  <Flex itemGutter wrap>
     <Button variant="outlined">Push Me</Button>
     <Button variant="outlined" size="small">Push Me</Button>
     <Button variant="outlined" size="large">Push Me</Button>
@@ -61,7 +61,7 @@ import Flex from '../Flex'
 
 ## Ghost Button
 <Playground>
-  <Flex itemGutter>
+  <Flex itemGutter wrap>
     <Button variant="ghost">Push Me</Button>
     <Button variant="ghost" size="small">Push Me</Button>
     <Button variant="ghost" size="large">Push Me</Button>
diff --git a/src/core/client/ui/components/CallOut/CallOut.mdx b/src/core/client/ui/components/CallOut/CallOut.mdx
index b3977a56a..fb71ea7ee 100644
--- a/src/core/client/ui/components/CallOut/CallOut.mdx
+++ b/src/core/client/ui/components/CallOut/CallOut.mdx
@@ -5,19 +5,19 @@ menu: UI Kit
 
 import { Playground, PropsTable } from 'docz'
 import CallOut from './CallOut'
-import Flex from '../Flex'
+import HorizontalGutter from '../HorizontalGutter'
 
 # CallOut
 
 ## Basic Use
 <Playground>
-  <Flex itemGutter direction="column">
+  <HorizontalGutter>
     <CallOut>This is a component for a callout. Any text that you are wanting to draw attention to such as community guidelines, announcements, etc. can be placed in something like a callout box. The color of the callout box can be customized according your own needs.</CallOut>
     <CallOut color="primary">This is a component for a callout. Any text that you are wanting to draw attention to such as community guidelines, announcements, etc. can be placed in something like a callout box. The color of the callout box can be customized according your own needs.</CallOut>
     <CallOut color="error">This is a component for a callout. Any text that you are wanting to draw attention to such as community guidelines, announcements, etc. can be placed in something like a callout box. The color of the callout box can be customized according your own needs.</CallOut>
     <CallOut color="error">The email address or password you entered is incorrect. Try again</CallOut>
     <CallOut color="error" fullWidth>The email address or password you entered is incorrect. Try again</CallOut>
-  </Flex>
+  </HorizontalGutter>
 </Playground>
 
 
diff --git a/src/core/client/ui/components/Flex/Flex.css b/src/core/client/ui/components/Flex/Flex.css
index 2e6914c7f..26c744a11 100644
--- a/src/core/client/ui/components/Flex/Flex.css
+++ b/src/core/client/ui/components/Flex/Flex.css
@@ -1,10 +1,12 @@
 .root {
-  width: 100%;
 }
 
 .flex {
   display: flex;
-  width: 100%;
+}
+
+.inline {
+  width: auto;
 }
 
 .halfItemGutter {
diff --git a/src/core/client/ui/components/Flex/Flex.tsx b/src/core/client/ui/components/Flex/Flex.tsx
index bf66f9084..2fde17254 100644
--- a/src/core/client/ui/components/Flex/Flex.tsx
+++ b/src/core/client/ui/components/Flex/Flex.tsx
@@ -28,6 +28,7 @@ interface InnerProps {
   itemGutter?: boolean | "half" | "double";
   className?: string;
   wrap?: boolean | "reverse";
+  inline?: boolean;
 
   /** Internal: Forwarded Ref */
   forwardRef?: Ref<HTMLDivElement>;
@@ -44,6 +45,7 @@ const Flex: StatelessComponent<InnerProps> = props => {
     wrap,
     forwardRef,
     children,
+    inline,
     ...rest
   } = props;
 
@@ -77,21 +79,40 @@ const Flex: StatelessComponent<InnerProps> = props => {
     classObject[(classes as any)[`direction${pascalCase(direction)}`]] = true;
   }
 
-  const rootClassNames: string = cn(classes.root, className);
+  const rootClassNames: string = cn(classes.root, className, {
+    [classes.inline]: inline === true,
+  });
   const flexClassNames: string = cn(classes.flex, classObject);
 
-  // The first div is required to support nested `Flex` components with itemGutters.
+  // text nodes can't be modified with css, so replace them with spans.
+  // Readd spaces at the beginning or end of text nodes because
+  // flex removes it.
+  const content = React.Children.map(children, child => {
+    if (typeof child === "string") {
+      return <span>{child.replace(/^ +| +$/g, "\xa0")}</span>;
+    }
+    return child;
+  });
+
+  if (wrap && itemGutter) {
+    // The first div is required to support nested `Flex` components with itemGutters.
+    return (
+      <div ref={forwardRef} className={rootClassNames} {...rest}>
+        <div className={flexClassNames}>{content}</div>
+      </div>
+    );
+  }
   return (
-    <div ref={forwardRef} className={rootClassNames} {...rest}>
-      <div className={flexClassNames}>{children}</div>
+    <div
+      ref={forwardRef}
+      className={cn(rootClassNames, flexClassNames)}
+      {...rest}
+    >
+      {content}
     </div>
   );
 };
 
-Flex.defaultProps = {
-  wrap: true,
-};
-
 const enhanced = withForwardRef(withStyles(styles)(Flex));
 export default enhanced;
 export type FlexProps = PropTypesOf<typeof enhanced>;
diff --git a/src/core/client/ui/components/FormField/FormField.tsx b/src/core/client/ui/components/FormField/FormField.tsx
index 40d2a0d61..64dab3140 100644
--- a/src/core/client/ui/components/FormField/FormField.tsx
+++ b/src/core/client/ui/components/FormField/FormField.tsx
@@ -1,10 +1,10 @@
 import cn from "classnames";
-import React, { HTMLAttributes, ReactNode } from "react";
+import React, { ReactNode } from "react";
 import { StatelessComponent } from "react";
 
 import { withStyles } from "talk-ui/hocs";
 
-import Flex from "../Flex";
+import HorizontalGutter from "../HorizontalGutter";
 import * as styles from "./FormField.css";
 
 interface InnerProps {
@@ -18,14 +18,13 @@ const FormField: StatelessComponent<InnerProps> = props => {
   const { classes, className, children, ...rest } = props;
 
   return (
-    <Flex
-      direction="column"
+    <HorizontalGutter
       className={cn(classes.root, className)}
-      itemGutter="half"
+      size="half"
       {...rest}
     >
       {children}
-    </Flex>
+    </HorizontalGutter>
   );
 };
 
diff --git a/src/core/client/ui/components/HorizontalGutter/HorizontalGutter.css b/src/core/client/ui/components/HorizontalGutter/HorizontalGutter.css
new file mode 100644
index 000000000..aa588d983
--- /dev/null
+++ b/src/core/client/ui/components/HorizontalGutter/HorizontalGutter.css
@@ -0,0 +1,27 @@
+.root {
+}
+
+.half {
+  & > * {
+    margin: 0 0 calc(0.5 * var(--spacing-unit)) 0 !important;
+  }
+  & > *:last-child {
+    margin: 0 !important;
+  }
+}
+.full {
+  & > * {
+    margin: 0 0 var(--spacing-unit) 0 !important;
+  }
+  & > *:last-child {
+    margin: 0 !important;
+  }
+}
+.double {
+  & > * {
+    margin: 0 0 calc(2 * var(--spacing-unit)) 0 !important;
+  }
+  & > *:last-child {
+    margin: 0 !important;
+  }
+}
diff --git a/src/core/client/ui/components/HorizontalGutter/HorizontalGutter.mdx b/src/core/client/ui/components/HorizontalGutter/HorizontalGutter.mdx
new file mode 100644
index 000000000..0ce220c50
--- /dev/null
+++ b/src/core/client/ui/components/HorizontalGutter/HorizontalGutter.mdx
@@ -0,0 +1,42 @@
+---
+name: HorizontalGutter
+menu: UI Kit
+---
+
+import { Playground } from "docz"
+import HorizontalGutter from "./HorizontalGutter"
+import Button from "../Button"
+
+# Spinner
+
+## Usage
+
+### Full gutter
+
+<Playground>
+  <HorizontalGutter>
+    <div style={{backgroundColor: "grey", height: "30px"}} />
+    <div style={{backgroundColor: "grey", height: "30px"}} />
+    <div style={{backgroundColor: "grey", height: "30px"}} />
+  </HorizontalGutter>
+</Playground>
+
+### Half gutter
+
+<Playground>
+  <HorizontalGutter size="half">
+    <div style={{backgroundColor: "grey", height: "30px"}} />
+    <div style={{backgroundColor: "grey", height: "30px"}} />
+    <div style={{backgroundColor: "grey", height: "30px"}} />
+  </HorizontalGutter>
+</Playground>
+
+### Double gutter
+
+<Playground>
+  <HorizontalGutter size="double">
+    <div style={{backgroundColor: "grey", height: "30px"}} />
+    <div style={{backgroundColor: "grey", height: "30px"}} />
+    <div style={{backgroundColor: "grey", height: "30px"}} />
+  </HorizontalGutter>
+</Playground>
diff --git a/src/core/client/ui/components/HorizontalGutter/HorizontalGutter.tsx b/src/core/client/ui/components/HorizontalGutter/HorizontalGutter.tsx
new file mode 100644
index 000000000..5594bd415
--- /dev/null
+++ b/src/core/client/ui/components/HorizontalGutter/HorizontalGutter.tsx
@@ -0,0 +1,37 @@
+import cn from "classnames";
+import React, { HTMLAttributes, Ref, StatelessComponent } from "react";
+
+import { withForwardRef, withStyles } from "talk-ui/hocs";
+import { PropTypesOf } from "talk-ui/types";
+
+import * as styles from "./HorizontalGutter.css";
+
+interface InnerProps extends HTMLAttributes<HTMLSpanElement> {
+  /**
+   * This prop can be used to add custom classnames.
+   * It is handled by the `withStyles `HOC.
+   */
+  classes: typeof styles;
+
+  size?: "half" | "full" | "double";
+
+  /** The name of the HorizontalGutter to render */
+  children?: React.ReactNode;
+
+  /** Internal: Forwarded Ref */
+  forwardRef?: Ref<HTMLDivElement>;
+}
+
+const HorizontalGutter: StatelessComponent<InnerProps> = props => {
+  const { classes, className, size, forwardRef, ...rest } = props;
+  const rootClassName = cn(classes.root, className, classes[size!]);
+  return <div className={rootClassName} {...rest} ref={forwardRef} />;
+};
+
+HorizontalGutter.defaultProps = {
+  size: "full",
+};
+
+const enhanced = withForwardRef(withStyles(styles)(HorizontalGutter));
+export type HorizontalGutterProps = PropTypesOf<typeof enhanced>;
+export default enhanced;
diff --git a/src/core/client/ui/components/HorizontalGutter/index.ts b/src/core/client/ui/components/HorizontalGutter/index.ts
new file mode 100644
index 000000000..74ebbbd3c
--- /dev/null
+++ b/src/core/client/ui/components/HorizontalGutter/index.ts
@@ -0,0 +1 @@
+export { default, HorizontalGutterProps } from "./HorizontalGutter";
diff --git a/src/core/client/ui/components/InputLabel/InputLabel.mdx b/src/core/client/ui/components/InputLabel/InputLabel.mdx
index 8d7721ba7..57b5156cb 100644
--- a/src/core/client/ui/components/InputLabel/InputLabel.mdx
+++ b/src/core/client/ui/components/InputLabel/InputLabel.mdx
@@ -5,15 +5,15 @@ menu: UI Kit
 
 import { Playground, PropsTable } from 'docz'
 import InputLabel from './InputLabel.tsx'
-import Flex from '../Flex'
+import HorizontalGutter from '../HorizontalGutter'
 
 # InputLabel
 
 ## Basic Use
 <Playground>
-  <Flex itemGutter direction="column">
+  <HorizontalGutter>
     <InputLabel>Well... Hello there.</InputLabel>
-  </Flex>
+  </HorizontalGutter>
 </Playground>
 
 
diff --git a/src/core/client/ui/components/TextField/TextField.mdx b/src/core/client/ui/components/TextField/TextField.mdx
index 7fee8bea9..9f19747f4 100644
--- a/src/core/client/ui/components/TextField/TextField.mdx
+++ b/src/core/client/ui/components/TextField/TextField.mdx
@@ -5,16 +5,16 @@ menu: UI Kit
 
 import { Playground, PropsTable } from 'docz'
 import TextField from './TextField.tsx'
-import Flex from '../Flex'
+import HorizontalGutter from '../HorizontalGutter'
 
 # TextField
 
 ## Basic Use
 <Playground>
-  <Flex itemGutter direction="column">
+  <HorizontalGutter>
     <TextField placeholder="This is a placeholder" />
     <TextField defaultValue="This is an input field" />
     <TextField color="error" defaultValue="A TextField with an error" />
     <TextField color="error" defaultValue="A TextField with an error" fullWidth/>
-  </Flex>
+  </HorizontalGutter>
 </Playground>
diff --git a/src/core/client/ui/components/ToggleShow/ToogleShow.mdx b/src/core/client/ui/components/ToggleShow/ToogleShow.mdx
index 05ab31e56..3a7fcdbda 100644
--- a/src/core/client/ui/components/ToggleShow/ToogleShow.mdx
+++ b/src/core/client/ui/components/ToggleShow/ToogleShow.mdx
@@ -6,7 +6,7 @@ menu: UI Kit
 import { Playground } from 'docz'
 import ToggleShow from './ToggleShow'
 import Button from '../Button'
-import Flex from '../Flex'
+import HorizontalGutter from '../HorizontalGutter'
 
 # ToggleShow
 A render props component to manage visible state.
@@ -15,12 +15,12 @@ A render props component to manage visible state.
 <Playground>
   <ToggleShow>
     {({ toggleShow, show }) => (
-      <Flex itemGutter direction="column">
+      <HorizontalGutter>
         {show && <div>Hello World!</div>}
         <Button onClick={toggleShow} variant="filled" color="primary">
           Toggle Show
         </Button>
-      </Flex>
+      </HorizontalGutter>
     )}
   </ToggleShow>
 </Playground>
diff --git a/src/core/client/ui/components/Typography/Typography.mdx b/src/core/client/ui/components/Typography/Typography.mdx
index f30f8e6c2..8f265fdfa 100644
--- a/src/core/client/ui/components/Typography/Typography.mdx
+++ b/src/core/client/ui/components/Typography/Typography.mdx
@@ -5,13 +5,13 @@ menu: UI Kit
 
 import { Playground } from 'docz'
 import Typography from './Typography'
-import Flex from '../Flex'
+import HorizontalGutter from '../HorizontalGutter'
 
 # Typography
 
 ## Basic Use
 <Playground>
-  <Flex itemGutter direction="column">
+  <HorizontalGutter>
     <Typography variant="heading1">Heading1</Typography>
     <Typography variant="heading2">Heading2</Typography>
     <Typography variant="heading3">Heading3</Typography>
@@ -19,28 +19,28 @@ import Flex from '../Flex'
     <Typography variant="bodyCopy">BodyCopy</Typography>
     <Typography variant="bodyCopyBold">bodyCopyBold</Typography>
     <Typography variant="timestamp">timestamp</Typography>
-  </Flex>
+  </HorizontalGutter>
 </Playground>
 
 ## Using different colors
 <Playground>
-  <Flex itemGutter direction="column">
+  <HorizontalGutter>
     <Typography color="textPrimary">textPrimary</Typography>
     <Typography color="textSecondary">textSecondary</Typography>
     <Typography color="success">success</Typography>
     <Typography color="error">error</Typography>
-  </Flex>
+  </HorizontalGutter>
 </Playground>
 
 ## Set align
 <Playground>
-  <Flex itemGutter direction="column" alignItems="stretch" style={{width: "200px"}}>
+  <HorizontalGutter style={{width: "200px"}}>
     <Typography align="left">left</Typography>
     <Typography align="center">center</Typography>
     <Typography align="right">right</Typography>
     <Typography align="justify"> No hay nadie que ame el dolor mismo, que lo busque, lo encuentre y lo
   quiera, simplemente porque es el dolor.</Typography>
-  </Flex>
+  </HorizontalGutter>
 </Playground>
 
 ## Cut off long text
diff --git a/src/core/client/ui/components/Typography/Typography.tsx b/src/core/client/ui/components/Typography/Typography.tsx
index 92474adec..a6912f04c 100644
--- a/src/core/client/ui/components/Typography/Typography.tsx
+++ b/src/core/client/ui/components/Typography/Typography.tsx
@@ -29,7 +29,7 @@ interface InnerProps extends HTMLAttributes<any> {
   /**
    * The content of the component.
    */
-  children: ReactNode;
+  children?: ReactNode;
   /**
    * Override or extend the styles applied to the component.
    */
@@ -49,11 +49,11 @@ interface InnerProps extends HTMLAttributes<any> {
     | "error"
     | "success";
   /**
-   * The component used for the root node.
-   * Either a string to use a DOM element or a component.
+   * The container used for the root node.
+   * Either a string to use a DOM element, a component, or an element.
    * By default, it maps the variant to a good default headline component.
    */
-  component?: React.ComponentType<any> | string;
+  container?: React.ReactElement<any> | React.ComponentType<any> | string;
   /**
    * If `true`, the text will have a bottom margin.
    */
@@ -87,7 +87,7 @@ const Typography: StatelessComponent<InnerProps> = props => {
     classes,
     className,
     color,
-    component,
+    container,
     gutterBottom,
     headlineMapping,
     noWrap,
@@ -117,10 +117,20 @@ const Typography: StatelessComponent<InnerProps> = props => {
     className
   );
 
-  const Component =
-    component || (paragraph ? "p" : headlineMapping![variant!]) || "span";
+  const Container =
+    container || (paragraph ? "p" : headlineMapping![variant!]) || "span";
 
-  return <Component ref={forwardRef} className={rootClassName} {...rest} />;
+  const innerProps = {
+    ref: forwardRef,
+    className: rootClassName,
+    ...rest,
+  };
+
+  if (React.isValidElement<any>(Container)) {
+    return React.cloneElement(Container, innerProps);
+  } else {
+    return <Container {...innerProps} />;
+  }
 };
 
 Typography.defaultProps = {
diff --git a/src/core/client/ui/components/ValidationMessage/ValidationMessage.mdx b/src/core/client/ui/components/ValidationMessage/ValidationMessage.mdx
index 35537e098..c8e7b11ad 100644
--- a/src/core/client/ui/components/ValidationMessage/ValidationMessage.mdx
+++ b/src/core/client/ui/components/ValidationMessage/ValidationMessage.mdx
@@ -5,16 +5,16 @@ menu: UI Kit
 
 import { Playground } from 'docz'
 import ValidationMessage from './ValidationMessage.tsx'
-import Flex from '../Flex'
+import HorizontalGutter from '../HorizontalGutter'
 
 # ValidationMessage
 
 ## Basic Use
 <Playground>
-  <Flex itemGutter direction="column">
+  <HorizontalGutter>
     <ValidationMessage>Invalid characters. Try again</ValidationMessage>
     <ValidationMessage fullWidth>Account with this email address already exists. Try another email. </ValidationMessage>
-  </Flex>
+  </HorizontalGutter>
 </Playground>
 
 
diff --git a/src/core/client/ui/components/ValidationMessage/ValidationMessage.tsx b/src/core/client/ui/components/ValidationMessage/ValidationMessage.tsx
index f4c5406f7..0cc781560 100644
--- a/src/core/client/ui/components/ValidationMessage/ValidationMessage.tsx
+++ b/src/core/client/ui/components/ValidationMessage/ValidationMessage.tsx
@@ -1,7 +1,8 @@
 import cn from "classnames";
-import React from "react";
-import { ReactNode, StatelessComponent } from "react";
+import React, { ReactNode, StatelessComponent } from "react";
+
 import { withStyles } from "talk-ui/hocs";
+
 import Icon from "../Icon";
 import * as styles from "./ValidationMessage.css";
 
diff --git a/src/core/client/ui/components/index.ts b/src/core/client/ui/components/index.ts
index 52ebe6a79..5c29b3f1a 100644
--- a/src/core/client/ui/components/index.ts
+++ b/src/core/client/ui/components/index.ts
@@ -17,3 +17,4 @@ export { default as Popup } from "./Popup";
 export { default as FormField } from "./FormField";
 export { default as InputDescription } from "./InputDescription";
 export { default as Spinner } from "./Spinner";
+export { default as HorizontalGutter } from "./HorizontalGutter";
diff --git a/src/locales/en-US/stream.ftl b/src/locales/en-US/stream.ftl
index 6e04fcc54..4b7be9a5e 100644
--- a/src/locales/en-US/stream.ftl
+++ b/src/locales/en-US/stream.ftl
@@ -15,3 +15,9 @@ comments-permalinkView-commentNotFound = Comment not found
 comments-userBoxUnauthenticated-joinTheConversation = Join the conversation
 comments-userBoxUnauthenticated-signIn = Sign in
 comments-userBoxUnauthenticated-register = Register
+
+comments-userBoxAuthenticated-signedInAs =
+  Signed in as <username>Username</username>.
+
+comments-userBoxAuthenticated-notYou =
+  Not you? <button>Sign Out</button>

From 9cef7044c72bc7883ccfcb5d2e7f561dd23bdeff Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Mon, 27 Aug 2018 14:11:15 +0200
Subject: [PATCH 65/81] Design improvements

---
 .../stream/components/Comment/Comment.css     |  1 -
 .../PermalinkButton/PermalinkPopover.css      |  1 -
 .../stream/components/PostCommentForm.css     | 13 ++----------
 .../stream/components/PostCommentForm.tsx     |  6 +++---
 .../stream/components/PostCommentFormFake.css | 13 ++++++++++++
 .../stream/components/PostCommentFormFake.tsx | 21 +++++++++++++++++++
 .../client/stream/components/PoweredBy.tsx    | 15 ++++++++++---
 src/core/client/stream/components/Stream.tsx  |  9 ++++++--
 .../components/UserBoxAuthenticated.tsx       | 12 ++++++++---
 .../components/UserBoxUnauthenticated.tsx     |  2 +-
 .../ui/components/BaseButton/BaseButton.css   |  1 +
 .../client/ui/components/Button/Button.css    | 14 ++-----------
 src/core/client/ui/components/Flex/Flex.css   |  4 ----
 src/core/client/ui/components/Flex/Flex.tsx   | 18 +++-------------
 .../ui/components/FormField/FormField.css     |  1 -
 src/locales/en-US/stream.ftl                  |  2 +-
 16 files changed, 75 insertions(+), 58 deletions(-)
 create mode 100644 src/core/client/stream/components/PostCommentFormFake.css
 create mode 100644 src/core/client/stream/components/PostCommentFormFake.tsx

diff --git a/src/core/client/stream/components/Comment/Comment.css b/src/core/client/stream/components/Comment/Comment.css
index 5c0f67095..821be5613 100644
--- a/src/core/client/stream/components/Comment/Comment.css
+++ b/src/core/client/stream/components/Comment/Comment.css
@@ -1,5 +1,4 @@
 .root {
-  width: 100%;
 }
 .footer {
   margin-top: var(--spacing-unit);
diff --git a/src/core/client/stream/components/PermalinkButton/PermalinkPopover.css b/src/core/client/stream/components/PermalinkButton/PermalinkPopover.css
index c2afa31b2..3fad6d3be 100644
--- a/src/core/client/stream/components/PermalinkButton/PermalinkPopover.css
+++ b/src/core/client/stream/components/PermalinkButton/PermalinkPopover.css
@@ -1,5 +1,4 @@
 .root {
-  width: 100%;
 }
 
 .textField {
diff --git a/src/core/client/stream/components/PostCommentForm.css b/src/core/client/stream/components/PostCommentForm.css
index 6c6c47b29..8c35347ff 100644
--- a/src/core/client/stream/components/PostCommentForm.css
+++ b/src/core/client/stream/components/PostCommentForm.css
@@ -1,5 +1,4 @@
 .root {
-  width: 100%;
 }
 
 .textarea {
@@ -13,14 +12,6 @@
   resize: vertical;
 }
 
-.postButtonContainer {
-  display: flex;
-
-  &:first-child {
-    flex-grow: 1;
-  }
-
-  &:last-child {
-    flex-grow: 0;
-  }
+.poweredBy {
+  margin-top: calc(-0.5 * var(--spacing-unit));
 }
diff --git a/src/core/client/stream/components/PostCommentForm.tsx b/src/core/client/stream/components/PostCommentForm.tsx
index 36e7d8be4..3eab2ddd8 100644
--- a/src/core/client/stream/components/PostCommentForm.tsx
+++ b/src/core/client/stream/components/PostCommentForm.tsx
@@ -19,10 +19,10 @@ const PostCommentForm: StatelessComponent<PostCommentFormProps> = props => (
   <Form onSubmit={props.onSubmit}>
     {({ handleSubmit, submitting }) => (
       <form autoComplete="off" onSubmit={handleSubmit} className={styles.root}>
-        <HorizontalGutter size="half">
+        <HorizontalGutter>
           <Field name="body" validate={required}>
             {({ input, meta }) => (
-              <div style={{ width: "100%" }}>
+              <div>
                 <textarea
                   className={styles.textarea}
                   name={input.name}
@@ -44,7 +44,7 @@ const PostCommentForm: StatelessComponent<PostCommentFormProps> = props => (
             justifyContent="space-between"
             alignItems="flex-start"
           >
-            <PoweredBy />
+            <PoweredBy className={styles.poweredBy} />
             <Localized id="comments-postCommentForm-submit">
               <Button
                 color="primary"
diff --git a/src/core/client/stream/components/PostCommentFormFake.css b/src/core/client/stream/components/PostCommentFormFake.css
new file mode 100644
index 000000000..775481fb4
--- /dev/null
+++ b/src/core/client/stream/components/PostCommentFormFake.css
@@ -0,0 +1,13 @@
+.root {
+}
+
+.textarea {
+  composes: bodyCopy from "talk-ui/shared/typography.css";
+  display: block;
+  height: 150px;
+  width: 100%;
+  box-sizing: border-box;
+  padding: var(--spacing-unit);
+  border-radius: var(--round-corners);
+  resize: vertical;
+}
diff --git a/src/core/client/stream/components/PostCommentFormFake.tsx b/src/core/client/stream/components/PostCommentFormFake.tsx
new file mode 100644
index 000000000..923955708
--- /dev/null
+++ b/src/core/client/stream/components/PostCommentFormFake.tsx
@@ -0,0 +1,21 @@
+import { Localized } from "fluent-react/compat";
+import React, { StatelessComponent } from "react";
+import { Button, HorizontalGutter } from "talk-ui/components";
+import * as styles from "./PostCommentFormFake.css";
+
+const PostCommentFormFake: StatelessComponent = props => (
+  <HorizontalGutter className={styles.root}>
+    <textarea
+      className={styles.textarea}
+      placeholder="Post a comment"
+      disabled
+    />
+    <Localized id="comments-PostCommentFormFake-signInAndJoin">
+      <Button color="primary" variant="filled" disabled type="submit" fullWidth>
+        Sign in and join the conversation
+      </Button>
+    </Localized>
+  </HorizontalGutter>
+);
+
+export default PostCommentFormFake;
diff --git a/src/core/client/stream/components/PoweredBy.tsx b/src/core/client/stream/components/PoweredBy.tsx
index ce2eb5563..b507bc61b 100644
--- a/src/core/client/stream/components/PoweredBy.tsx
+++ b/src/core/client/stream/components/PoweredBy.tsx
@@ -1,10 +1,19 @@
+import cn from "classnames";
 import React, { StatelessComponent } from "react";
 import { Typography } from "talk-ui/components";
 
-const PoweredBy: StatelessComponent = () => {
+interface Props {
+  className: string;
+}
+
+const PoweredBy: StatelessComponent<Props> = props => {
   return (
-    <div>
-      <Typography variant="inputDescription" container="span">
+    <div className={cn(props.className)}>
+      <Typography
+        variant="inputDescription"
+        container="span"
+        color="textSecondary"
+      >
         Powered by
       </Typography>{" "}
       <Typography variant="heading4" container="span">
diff --git a/src/core/client/stream/components/Stream.tsx b/src/core/client/stream/components/Stream.tsx
index 49a2f2cef..884157e36 100644
--- a/src/core/client/stream/components/Stream.tsx
+++ b/src/core/client/stream/components/Stream.tsx
@@ -8,6 +8,7 @@ import CommentContainer from "../containers/CommentContainer";
 import PostCommentFormContainer from "../containers/PostCommentFormContainer";
 import ReplyListContainer from "../containers/ReplyListContainer";
 import UserBoxContainer from "../containers/UserBoxContainer";
+import PostCommentFormFake from "./PostCommentFormFake";
 import * as styles from "./Stream.css";
 
 export interface StreamProps {
@@ -22,10 +23,14 @@ export interface StreamProps {
 
 const Stream: StatelessComponent<StreamProps> = props => {
   return (
-    <HorizontalGutter className={styles.root}>
+    <HorizontalGutter className={styles.root} size="double">
       <HorizontalGutter size="half">
         <UserBoxContainer user={props.user} />
-        <PostCommentFormContainer assetID={props.assetID} />
+        {props.user ? (
+          <PostCommentFormContainer assetID={props.assetID} />
+        ) : (
+          <PostCommentFormFake />
+        )}
       </HorizontalGutter>
       <HorizontalGutter
         id="talk-comments-stream-log"
diff --git a/src/core/client/stream/components/UserBoxAuthenticated.tsx b/src/core/client/stream/components/UserBoxAuthenticated.tsx
index 0ed1dc483..410b143c0 100644
--- a/src/core/client/stream/components/UserBoxAuthenticated.tsx
+++ b/src/core/client/stream/components/UserBoxAuthenticated.tsx
@@ -11,14 +11,20 @@ export interface UserBoxAuthenticatedProps {
 const UserBoxAuthenticated: StatelessComponent<
   UserBoxAuthenticatedProps
 > = props => {
+  const Username = () => (
+    <Typography variant="bodyCopyBold" container="span">
+      {props.username}
+    </Typography>
+  );
+
   return (
     <Flex itemGutter="half" wrap>
       <Localized
         id="comments-userBoxAuthenticated-signedInAs"
-        username={<Typography variant="bodyCopyBold" container="span" />}
+        username={<Username />}
       >
         <Typography variant="bodyCopy" container="div">
-          {"Signed in as <username>Username</username>."}
+          {"Signed in as <username />."}
         </Typography>
       </Localized>
       <Localized
@@ -32,7 +38,7 @@ const UserBoxAuthenticated: StatelessComponent<
           />
         }
       >
-        <Typography variant="bodyCopy" container={<Flex inline wrap />}>
+        <Typography variant="bodyCopy" container={Flex}>
           {"Not you? <button>Sign Out</button>"}
         </Typography>
       </Localized>
diff --git a/src/core/client/stream/components/UserBoxUnauthenticated.tsx b/src/core/client/stream/components/UserBoxUnauthenticated.tsx
index f184f76f6..8eec09e9e 100644
--- a/src/core/client/stream/components/UserBoxUnauthenticated.tsx
+++ b/src/core/client/stream/components/UserBoxUnauthenticated.tsx
@@ -15,7 +15,7 @@ const UserBoxUnauthenticated: StatelessComponent<
   UserBoxUnauthenticatedProps
 > = props => {
   return (
-    <Flex itemGutter>
+    <Flex itemGutter alignItems="center">
       <MatchMedia gteWidth="sm">
         <Localized id="comments-userBoxUnauthenticated-joinTheConversation">
           <Typography
diff --git a/src/core/client/ui/components/BaseButton/BaseButton.css b/src/core/client/ui/components/BaseButton/BaseButton.css
index 14b111258..a20ff333a 100644
--- a/src/core/client/ui/components/BaseButton/BaseButton.css
+++ b/src/core/client/ui/components/BaseButton/BaseButton.css
@@ -1,5 +1,6 @@
 .root {
   composes: buttonReset from "talk-ui/shared/buttonReset.css";
+  text-transform: capitalize;
 }
 
 .keyboardFocus {
diff --git a/src/core/client/ui/components/Button/Button.css b/src/core/client/ui/components/Button/Button.css
index 5ab16bc6d..bf569174f 100644
--- a/src/core/client/ui/components/Button/Button.css
+++ b/src/core/client/ui/components/Button/Button.css
@@ -287,67 +287,57 @@
   padding-right: 0;
   padding-left: 0;
   border-radius: 0;
+  border-bottom: 1px solid currentColor;
+  padding: 0;
 
   &.colorRegular {
     color: var(--palette-grey-main);
-    border-bottom: 1px solid currentColor;
   }
   &.colorPrimary {
     color: var(--palette-primary-main);
-    border-bottom: 1px solid currentColor;
   }
   &.colorError {
     color: var(--palette-error-main);
-    border-bottom: 1px solid currentColor;
   }
   &.colorSuccess {
     color: var(--palette-success-main);
-    border-bottom: 1px solid currentColor;
   }
 
   &:not(.disabled) {
     &.colorRegular {
       &.mouseHover {
         color: var(--palette-grey-light);
-        border-bottom: 1px solid currentColor;
       }
       &:active,
       &.active {
         color: var(--palette-grey-lighter);
-        border-bottom: 1px solid currentColor;
       }
     }
     &.colorPrimary {
       &.mouseHover {
         color: var(--palette-primary-light);
-        border-bottom: 1px solid currentColor;
       }
       &:active,
       &.active {
         color: var(--palette-primary-lighter);
-        border-bottom: 1px solid currentColor;
       }
     }
     &.colorError {
       &.mouseHover {
         color: var(--palette-error-light);
-        border-bottom: 1px solid currentColor;
       }
       &:active,
       &.active {
         color: var(--palette-error-lighter);
-        border-bottom: 1px solid currentColor;
       }
     }
     &.colorSuccess {
       &.mouseHover {
         color: var(--palette-success-light);
-        border-bottom: 1px solid currentColor;
       }
       &:active,
       &.active {
         color: var(--palette-success-lighter);
-        border-bottom: 1px solid currentColor;
       }
     }
   }
diff --git a/src/core/client/ui/components/Flex/Flex.css b/src/core/client/ui/components/Flex/Flex.css
index 26c744a11..9f20d8414 100644
--- a/src/core/client/ui/components/Flex/Flex.css
+++ b/src/core/client/ui/components/Flex/Flex.css
@@ -5,10 +5,6 @@
   display: flex;
 }
 
-.inline {
-  width: auto;
-}
-
 .halfItemGutter {
   & > * {
     margin: 0 calc(0.5 * var(--spacing-unit)) 0 0 !important;
diff --git a/src/core/client/ui/components/Flex/Flex.tsx b/src/core/client/ui/components/Flex/Flex.tsx
index 2fde17254..1d2dd932a 100644
--- a/src/core/client/ui/components/Flex/Flex.tsx
+++ b/src/core/client/ui/components/Flex/Flex.tsx
@@ -28,7 +28,6 @@ interface InnerProps {
   itemGutter?: boolean | "half" | "double";
   className?: string;
   wrap?: boolean | "reverse";
-  inline?: boolean;
 
   /** Internal: Forwarded Ref */
   forwardRef?: Ref<HTMLDivElement>;
@@ -45,16 +44,9 @@ const Flex: StatelessComponent<InnerProps> = props => {
     wrap,
     forwardRef,
     children,
-    inline,
     ...rest
   } = props;
 
-  let alignItemsWithDefault = alignItems;
-  if (!alignItems) {
-    alignItemsWithDefault =
-      direction && direction.startsWith("column") ? "flex-start" : "center";
-  }
-
   const classObject: Record<string, boolean> = {
     [classes.itemGutter]: itemGutter === true,
     [classes.halfItemGutter]: itemGutter === "half",
@@ -69,19 +61,15 @@ const Flex: StatelessComponent<InnerProps> = props => {
     ] = true;
   }
 
-  if (alignItemsWithDefault) {
-    classObject[
-      (classes as any)[`align${pascalCase(alignItemsWithDefault)}`]
-    ] = true;
+  if (alignItems) {
+    classObject[(classes as any)[`align${pascalCase(alignItems)}`]] = true;
   }
 
   if (direction) {
     classObject[(classes as any)[`direction${pascalCase(direction)}`]] = true;
   }
 
-  const rootClassNames: string = cn(classes.root, className, {
-    [classes.inline]: inline === true,
-  });
+  const rootClassNames: string = cn(classes.root, className);
   const flexClassNames: string = cn(classes.flex, classObject);
 
   // text nodes can't be modified with css, so replace them with spans.
diff --git a/src/core/client/ui/components/FormField/FormField.css b/src/core/client/ui/components/FormField/FormField.css
index 88de80d08..c3a2af639 100644
--- a/src/core/client/ui/components/FormField/FormField.css
+++ b/src/core/client/ui/components/FormField/FormField.css
@@ -1,3 +1,2 @@
 .root {
-  width: 100%;
 }
diff --git a/src/locales/en-US/stream.ftl b/src/locales/en-US/stream.ftl
index 4b7be9a5e..35a8cd34e 100644
--- a/src/locales/en-US/stream.ftl
+++ b/src/locales/en-US/stream.ftl
@@ -17,7 +17,7 @@ comments-userBoxUnauthenticated-signIn = Sign in
 comments-userBoxUnauthenticated-register = Register
 
 comments-userBoxAuthenticated-signedInAs =
-  Signed in as <username>Username</username>.
+  Signed in as <username />.
 
 comments-userBoxAuthenticated-notYou =
   Not you? <button>Sign Out</button>

From d1d993d0b7a1e1b97034870c0f3f4369dd464de4 Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Mon, 27 Aug 2018 14:33:31 +0200
Subject: [PATCH 66/81] Updated fluent

---
 package-lock.json                             | 27 ++++++++++++----
 package.json                                  |  4 +--
 .../framework/lib/bootstrap/TalkContext.tsx   |  8 ++---
 .../framework/lib/bootstrap/createContext.tsx |  6 ++--
 src/core/client/framework/lib/i18n.ts         | 32 ++++++++++---------
 .../components/UserBoxAuthenticated.tsx       |  2 +-
 src/locales/en-US/stream.ftl                  |  2 +-
 src/types/fluent.d.ts                         | 10 +++---
 8 files changed, 53 insertions(+), 38 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 02a251edd..a86945926 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -5681,6 +5681,12 @@
         "ylru": "^1.2.0"
       }
     },
+    "cached-iterable": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/cached-iterable/-/cached-iterable-0.2.1.tgz",
+      "integrity": "sha512-8zAVjMjdn/S/QXJaOnqsko0+ZJzXT2Dum2u9TMGg5YR9fxONPrUjuO9VYqnb1AoldXeYVAcNJLgT5Q8WaIJSgA==",
+      "dev": true
+    },
     "call-me-maybe": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/call-me-maybe/-/call-me-maybe-1.0.1.tgz",
@@ -9943,9 +9949,9 @@
       "integrity": "sha1-A5/fI/iCPkQMOPMnfm/vEXQhWzA="
     },
     "fluent": {
-      "version": "0.6.4",
-      "resolved": "https://registry.npmjs.org/fluent/-/fluent-0.6.4.tgz",
-      "integrity": "sha512-EXfMJmnGbUgaIC1myIzDk5akAF6+1JrI7KVnNCba2ou7WCKc/2CWa8QshfhImVtettOvEs0z0UVdMrS6zX7pxA==",
+      "version": "0.8.0",
+      "resolved": "https://registry.npmjs.org/fluent/-/fluent-0.8.0.tgz",
+      "integrity": "sha512-bZfthhubEH1lKgGIi0fIDeNkZrfEOu3MrLbi284LdxNG+9Q5gq2KsuoocumqNPStVtWo3S3/1p8RIqd34u3Mzw==",
       "dev": true
     },
     "fluent-intl-polyfill": {
@@ -9964,15 +9970,22 @@
       "dev": true
     },
     "fluent-react": {
-      "version": "0.7.0",
-      "resolved": "https://registry.npmjs.org/fluent-react/-/fluent-react-0.7.0.tgz",
-      "integrity": "sha512-XgAG06hcVW6oQu3NqLB4KACFBDC9broXG4XDP2xqmj+/DPmZlhHMMD73tFz1mBxCs1pLeojmsYdgyl8l6fF4SA==",
+      "version": "0.8.0",
+      "resolved": "https://registry.npmjs.org/fluent-react/-/fluent-react-0.8.0.tgz",
+      "integrity": "sha512-mO8iPb+muWopEDcbNgb66kr6Tl9tPjRpguDaez9W0xU1hiJ9fQ6EfdCxCUQOYsnVnbruLJqxaRsExSRrCamLCg==",
       "dev": true,
       "requires": {
-        "fluent": "^0.4.0 || ^0.6.0",
+        "cached-iterable": "^0.2.1",
+        "fluent-sequence": "^0.2.0",
         "prop-types": "^15.6.0"
       }
     },
+    "fluent-sequence": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/fluent-sequence/-/fluent-sequence-0.2.0.tgz",
+      "integrity": "sha512-t8fc4rHvzO9Yk8otP8LkTqWo6mzjdemooQcnHlDrNzrYAnwsSbVFIlthnkzK2pLsRnO9Ybmw4lXOYUx+fAIyJw==",
+      "dev": true
+    },
     "flush-write-stream": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/flush-write-stream/-/flush-write-stream-1.0.3.tgz",
diff --git a/package.json b/package.json
index 5c2f34d7d..32146395e 100644
--- a/package.json
+++ b/package.json
@@ -151,10 +151,10 @@
     "eventemitter2": "^5.0.1",
     "final-form": "^4.8.1",
     "flat": "^4.1.0",
-    "fluent": "^0.6.4",
+    "fluent": "^0.8.0",
     "fluent-intl-polyfill": "^0.1.0",
     "fluent-langneg": "^0.1.0",
-    "fluent-react": "^0.7.0",
+    "fluent-react": "^0.8.0",
     "graphql-playground-middleware-express": "^1.7.2",
     "graphql-schema-typescript": "^1.2.1",
     "gulp": "^4.0.0",
diff --git a/src/core/client/framework/lib/bootstrap/TalkContext.tsx b/src/core/client/framework/lib/bootstrap/TalkContext.tsx
index 6c0d8f41d..a77a14576 100644
--- a/src/core/client/framework/lib/bootstrap/TalkContext.tsx
+++ b/src/core/client/framework/lib/bootstrap/TalkContext.tsx
@@ -1,5 +1,5 @@
 import { LocalizationProvider } from "fluent-react/compat";
-import { MessageContext } from "fluent/compat";
+import { FluentBundle } from "fluent/compat";
 import { Child as PymChild } from "pym.js";
 import React, { StatelessComponent } from "react";
 import { MediaQueryMatchers } from "react-responsive";
@@ -15,8 +15,8 @@ export interface TalkContext {
   /** relayEnvironment for our relay framework. */
   relayEnvironment: Environment;
 
-  /** localMessages for our i18n framework. */
-  localeMessages: MessageContext[];
+  /** localeBundles for our i18n framework. */
+  localeBundles: FluentBundle[];
 
   /** formatter for timeago. */
   timeagoFormatter?: Formatter;
@@ -61,7 +61,7 @@ export const TalkContextProvider: StatelessComponent<{
   value: TalkContext;
 }> = ({ value, children }) => (
   <Provider value={value}>
-    <LocalizationProvider messages={value.localeMessages}>
+    <LocalizationProvider bundles={value.localeBundles}>
       <UIContext.Provider
         value={{
           timeagoFormatter: value.timeagoFormatter,
diff --git a/src/core/client/framework/lib/bootstrap/createContext.tsx b/src/core/client/framework/lib/bootstrap/createContext.tsx
index e9f6dec89..325c2e54e 100644
--- a/src/core/client/framework/lib/bootstrap/createContext.tsx
+++ b/src/core/client/framework/lib/bootstrap/createContext.tsx
@@ -14,7 +14,7 @@ import {
 import { RestClient } from "talk-framework/lib/rest";
 import { ClickFarAwayRegister } from "talk-ui/components/ClickOutside";
 
-import { generateMessages, LocalesData, negotiateLanguages } from "../i18n";
+import { generateBundles, LocalesData, negotiateLanguages } from "../i18n";
 import { createFetch, TokenGetter } from "../network";
 import { PostMessageService } from "../postMessage";
 import { TalkContext } from "./TalkContext";
@@ -104,12 +104,12 @@ export default async function createContext({
     console.log(`Negotiated locales ${JSON.stringify(locales)}`);
   }
 
-  const localeMessages = await generateMessages(locales, localesData);
+  const localeBundles = await generateBundles(locales, localesData);
 
   // Assemble context.
   const context = {
     relayEnvironment,
-    localeMessages,
+    localeBundles,
     timeagoFormatter,
     pym,
     eventEmitter,
diff --git a/src/core/client/framework/lib/i18n.ts b/src/core/client/framework/lib/i18n.ts
index d5afcd0b6..de76266d4 100644
--- a/src/core/client/framework/lib/i18n.ts
+++ b/src/core/client/framework/lib/i18n.ts
@@ -1,6 +1,6 @@
 import "fluent-intl-polyfill/compat";
 import { negotiateLanguages as negotiate } from "fluent-langneg/compat";
-import { MessageContext } from "fluent/compat";
+import { FluentBundle } from "fluent/compat";
 
 export interface BundledLocales {
   [locale: string]: string;
@@ -47,18 +47,20 @@ export function negotiateLanguages(
 }
 
 // Don't warn in production.
-let decorateWarnMissing = (cx: MessageContext) => cx;
+let decorateWarnMissing = (bundle: FluentBundle) => bundle;
 
 // Warn about missing locales if we are not in production.
 if (process.env.NODE_ENV !== "production") {
   decorateWarnMissing = (() => {
     const warnings: string[] = [];
-    return (cx: MessageContext) => {
-      const original = cx.hasMessage;
-      cx.hasMessage = (id: string) => {
-        const result = original.apply(cx, [id]);
+    return (bundle: FluentBundle) => {
+      const original = bundle.hasMessage;
+      bundle.hasMessage = (id: string) => {
+        const result = original.apply(bundle, [id]);
         if (!result) {
-          const warn = `${cx.locales} translation for key "${id}" not found`;
+          const warn = `${
+            bundle.locales
+          } translation for key "${id}" not found`;
           if (!warnings.includes(warn)) {
             // tslint:disable:next-line: no-console
             console.warn(warn);
@@ -67,7 +69,7 @@ if (process.env.NODE_ENV !== "production") {
         }
         return result;
       };
-      return cx;
+      return bundle;
     };
   })();
 }
@@ -79,21 +81,21 @@ if (process.env.NODE_ENV !== "production") {
  *
  * Use it in conjunction with `negotiateLanguages`.
  */
-export async function generateMessages(
+export async function generateBundles(
   locales: ReadonlyArray<string>,
   data: LocalesData
-): Promise<MessageContext[]> {
+): Promise<FluentBundle[]> {
   const promises = [];
 
   for (const locale of locales) {
-    const cx = new MessageContext(locale);
+    const bundle = new FluentBundle(locale);
     if (locale in data.bundled) {
-      cx.addMessages(data.bundled[locale]);
-      promises.push(decorateWarnMissing(cx));
+      bundle.addMessages(data.bundled[locale]);
+      promises.push(decorateWarnMissing(bundle));
     } else if (locale in data.loadables) {
       const content = await data.loadables[locale]();
-      cx.addMessages(content);
-      promises.push(decorateWarnMissing(cx));
+      bundle.addMessages(content);
+      promises.push(decorateWarnMissing(bundle));
     } else {
       throw Error(`Locale ${locale} not available`);
     }
diff --git a/src/core/client/stream/components/UserBoxAuthenticated.tsx b/src/core/client/stream/components/UserBoxAuthenticated.tsx
index 410b143c0..94ed90ac6 100644
--- a/src/core/client/stream/components/UserBoxAuthenticated.tsx
+++ b/src/core/client/stream/components/UserBoxAuthenticated.tsx
@@ -24,7 +24,7 @@ const UserBoxAuthenticated: StatelessComponent<
         username={<Username />}
       >
         <Typography variant="bodyCopy" container="div">
-          {"Signed in as <username />."}
+          {"Signed in as <username></username>."}
         </Typography>
       </Localized>
       <Localized
diff --git a/src/locales/en-US/stream.ftl b/src/locales/en-US/stream.ftl
index 35a8cd34e..a6aed78a7 100644
--- a/src/locales/en-US/stream.ftl
+++ b/src/locales/en-US/stream.ftl
@@ -17,7 +17,7 @@ comments-userBoxUnauthenticated-signIn = Sign in
 comments-userBoxUnauthenticated-register = Register
 
 comments-userBoxAuthenticated-signedInAs =
-  Signed in as <username />.
+  Signed in as <username></username>.
 
 comments-userBoxAuthenticated-notYou =
   Not you? <button>Sign Out</button>
diff --git a/src/types/fluent.d.ts b/src/types/fluent.d.ts
index 4e41c3fae..b64509258 100644
--- a/src/types/fluent.d.ts
+++ b/src/types/fluent.d.ts
@@ -2,11 +2,11 @@
 declare module "*.ftl";
 
 declare module "fluent-react/compat" {
-  import { MessageContext } from "fluent/compat";
+  import { FluentBundle } from "fluent/compat";
   import { ComponentType } from "react";
 
   export interface LocalizationProviderProps {
-    messages: MessageContext[];
+    bundles: FluentBundle[];
   }
   export const LocalizationProvider: ComponentType<LocalizationProviderProps>;
 
@@ -30,14 +30,14 @@ declare module "fluent-langneg/compat" {
 }
 
 declare module "fluent/compat" {
-  export interface MessageContextOptions {
+  export interface FluentBundleOptions {
     functions: { [key: string]: (...args: any[]) => string };
     useIsolating: boolean;
     transform: ((s: string) => string);
   }
 
-  export class MessageContext {
-    constructor(locales: string, options?: MessageContext);
+  export class FluentBundle {
+    constructor(locales: string, options?: FluentBundleOptions);
     public locales: string[];
     public readonly messages: Iterator<[string, any]>;
     public hasMessage(id: string): boolean;

From b7208cfa44bbd1a98739dc0ef8a4e686a73e3031 Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Mon, 27 Aug 2018 14:39:18 +0200
Subject: [PATCH 67/81] Fix typography merge conflict

---
 src/core/client/ui/shared/typography.css | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/core/client/ui/shared/typography.css b/src/core/client/ui/shared/typography.css
index ba367cc44..7f99ddf39 100644
--- a/src/core/client/ui/shared/typography.css
+++ b/src/core/client/ui/shared/typography.css
@@ -137,9 +137,9 @@
   color: var(--palette-common-black);
   font-family: var(--font-family-sans-serif);
   font-weight: var(--font-weight-medium);
-  font-size: calc(14rem / var(--rem-base));
-  line-height: calc(20em / 16);
-  letter-spacing: calc(0.2em / 16);
+  font-size: calc(16rem / var(--rem-base));
+  line-height: calc(16em / 16);
+  letter-spacing: calc(-0.1em / 16);
 }
 
 .inputText {

From 39edec79cbf8f84565e9125133ac600909b26a6e Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Mon, 27 Aug 2018 15:51:59 +0200
Subject: [PATCH 68/81] Adapt SignIn

---
 src/core/client/auth/components/App.css       |   3 +-
 .../client/auth/components/ForgotPassword.tsx |   3 +-
 .../client/auth/components/ResetPassword.tsx  |   3 +-
 src/core/client/auth/components/SignIn.css    |   6 -
 src/core/client/auth/components/SignIn.tsx    | 132 ++++++++++--------
 src/core/client/auth/components/SignUp.tsx    |   4 +-
 .../auth/containers/SignInContainer.tsx       |  25 +---
 .../auth/containers/SignUpContainer.tsx       |  20 +--
 src/core/client/ui/shared/typography.css      |  14 +-
 src/locales/en-US/auth.ftl                    |  19 +++
 10 files changed, 118 insertions(+), 111 deletions(-)
 delete mode 100644 src/core/client/auth/components/SignIn.css
 create mode 100644 src/locales/en-US/auth.ftl

diff --git a/src/core/client/auth/components/App.css b/src/core/client/auth/components/App.css
index 99be430a5..c36dceb31 100644
--- a/src/core/client/auth/components/App.css
+++ b/src/core/client/auth/components/App.css
@@ -12,6 +12,7 @@
 
 .root {
   width: 100%;
-  padding: var(--spacing-unit);
+  padding: var(--spacing-unit) var(--spacing-unit) calc(2 * var(--spacing-unit))
+    var(--spacing-unit);
   box-sizing: border-box;
 }
diff --git a/src/core/client/auth/components/ForgotPassword.tsx b/src/core/client/auth/components/ForgotPassword.tsx
index 68707eea2..49b1be188 100644
--- a/src/core/client/auth/components/ForgotPassword.tsx
+++ b/src/core/client/auth/components/ForgotPassword.tsx
@@ -1,7 +1,6 @@
 import React, { StatelessComponent } from "react";
 import { Field, Form } from "react-final-form";
 import { OnSubmit } from "talk-framework/lib/form";
-import * as styles from "./SignIn.css";
 
 import {
   composeValidators,
@@ -35,7 +34,7 @@ const ForgotPassword: StatelessComponent<ForgotPasswordForm> = props => {
       {({ handleSubmit }) => (
         <form autoComplete="off" onSubmit={handleSubmit}>
           <AutoHeightContainer />
-          <Flex itemGutter="double" direction="column" className={styles.root}>
+          <Flex itemGutter="double" direction="column">
             <Typography variant="heading1" align="center">
               Forgot Password
             </Typography>
diff --git a/src/core/client/auth/components/ResetPassword.tsx b/src/core/client/auth/components/ResetPassword.tsx
index b459bf460..c16139cdd 100644
--- a/src/core/client/auth/components/ResetPassword.tsx
+++ b/src/core/client/auth/components/ResetPassword.tsx
@@ -1,7 +1,6 @@
 import React, { StatelessComponent } from "react";
 import { Field, Form } from "react-final-form";
 import { OnSubmit } from "talk-framework/lib/form";
-import * as styles from "./SignIn.css";
 
 import {
   composeValidators,
@@ -38,7 +37,7 @@ const ResetPassword: StatelessComponent<ResetPasswordForm> = props => {
       {({ handleSubmit }) => (
         <form autoComplete="off" onSubmit={handleSubmit}>
           <AutoHeightContainer />
-          <Flex itemGutter="double" direction="column" className={styles.root}>
+          <Flex itemGutter="double" direction="column">
             <Typography variant="heading1" align="center">
               Reset Password
             </Typography>
diff --git a/src/core/client/auth/components/SignIn.css b/src/core/client/auth/components/SignIn.css
deleted file mode 100644
index 55699399e..000000000
--- a/src/core/client/auth/components/SignIn.css
+++ /dev/null
@@ -1,6 +0,0 @@
-.root {
-}
-
-.forgotPassword {
-  text-align: right;
-}
diff --git a/src/core/client/auth/components/SignIn.tsx b/src/core/client/auth/components/SignIn.tsx
index 406891a84..46dc0a910 100644
--- a/src/core/client/auth/components/SignIn.tsx
+++ b/src/core/client/auth/components/SignIn.tsx
@@ -1,3 +1,4 @@
+import { Localized } from "fluent-react/compat";
 import React, { StatelessComponent } from "react";
 import { Field, Form } from "react-final-form";
 import { OnSubmit } from "talk-framework/lib/form";
@@ -6,7 +7,6 @@ import {
   composeValidators,
   required,
   validateEmail,
-  validatePassword,
 } from "talk-framework/lib/validation";
 
 import {
@@ -14,6 +14,7 @@ import {
   CallOut,
   Flex,
   FormField,
+  HorizontalGutter,
   InputLabel,
   TextField,
   Typography,
@@ -21,7 +22,6 @@ import {
 } from "talk-ui/components";
 
 import AutoHeightContainer from "../containers/AutoHeightContainer";
-import * as styles from "./SignIn.css";
 
 interface FormProps {
   email: string;
@@ -30,8 +30,8 @@ interface FormProps {
 
 export interface SignInForm {
   onSubmit: OnSubmit<FormProps>;
-  goToSignUp: () => void;
-  goToForgotPassword: () => void;
+  onGotoSignUp: () => void;
+  onGotoForgotPassword: () => void;
 }
 
 const SignIn: StatelessComponent<SignInForm> = props => {
@@ -40,10 +40,12 @@ const SignIn: StatelessComponent<SignInForm> = props => {
       {({ handleSubmit, submitting, submitError }) => (
         <form autoComplete="off" onSubmit={handleSubmit}>
           <AutoHeightContainer />
-          <Flex itemGutter="double" direction="column" className={styles.root}>
-            <Typography variant="heading1" align="center">
-              Sign in to join the conversation
-            </Typography>
+          <HorizontalGutter size="double">
+            <Localized id="signIn-signInToJoinHeader">
+              <Typography variant="heading1" align="center">
+                Sign in to join the conversation
+              </Typography>
+            </Localized>
 
             {submitError && (
               <CallOut color="error" fullWidth>
@@ -57,16 +59,24 @@ const SignIn: StatelessComponent<SignInForm> = props => {
             >
               {({ input, meta }) => (
                 <FormField>
-                  <InputLabel>Email Address</InputLabel>
-                  <TextField
-                    name={input.name}
-                    onChange={input.onChange}
-                    value={input.value}
-                    placeholder="Email Address"
-                  />
+                  <Localized id="signIn-emailAddressLabel">
+                    <InputLabel>Email Address</InputLabel>
+                  </Localized>
+                  <Localized
+                    id="signIn-emailAddressTextfield"
+                    attrs={{ placeholder: true }}
+                  >
+                    <TextField
+                      name={input.name}
+                      onChange={input.onChange}
+                      value={input.value}
+                      placeholder="Email Address"
+                      fullWidth
+                    />
+                  </Localized>
                   {meta.touched &&
                     (meta.error || meta.submitError) && (
-                      <ValidationMessage>
+                      <ValidationMessage fullWidth>
                         {meta.error || meta.submitError}
                       </ValidationMessage>
                     )}
@@ -74,63 +84,75 @@ const SignIn: StatelessComponent<SignInForm> = props => {
               )}
             </Field>
 
-            <Field
-              name="password"
-              validate={composeValidators(required, validatePassword)}
-            >
+            <Field name="password" validate={composeValidators(required)}>
               {({ input, meta }) => (
                 <FormField>
-                  <InputLabel>Password</InputLabel>
-                  <TextField
-                    name={input.name}
-                    onChange={input.onChange}
-                    value={input.value}
-                    placeholder="Password"
-                    type="password"
-                  />
+                  <Localized id="signIn-passwordLabel">
+                    <InputLabel>Password</InputLabel>
+                  </Localized>
+                  <Localized
+                    id="signIn-passwordTextfield"
+                    attrs={{ placeholder: true }}
+                  >
+                    <TextField
+                      name={input.name}
+                      onChange={input.onChange}
+                      value={input.value}
+                      placeholder="Password"
+                      type="password"
+                      fullWidth
+                    />
+                  </Localized>
                   {meta.touched &&
                     (meta.error || meta.submitError) && (
-                      <ValidationMessage>
+                      <ValidationMessage fullWidth>
                         {meta.error || meta.submitError}
                       </ValidationMessage>
                     )}
-                  <span className={styles.forgotPassword}>
-                    <Button
-                      variant="underlined"
-                      color="primary"
-                      size="small"
-                      onClick={props.goToForgotPassword}
-                    >
-                      Forgot your password?
-                    </Button>
-                  </span>
+                  <Flex justifyContent="flex-end">
+                    <Localized id="signIn-forgotYourPassword">
+                      <Button
+                        variant="underlined"
+                        color="primary"
+                        size="small"
+                        onClick={props.onGotoForgotPassword}
+                      >
+                        Forgot your password?
+                      </Button>
+                    </Localized>
+                  </Flex>
                 </FormField>
               )}
             </Field>
-
-            <div>
+            <Localized id="signIn-signInAndJoinButton">
               <Button
                 variant="filled"
                 color="primary"
                 size="large"
-                fullWidth
                 type="submit"
+                fullWidth
               >
                 Sign in and join the conversation
               </Button>
-              <Flex itemGutter="half" justifyContent="center">
-                <Typography>Don't have an account?</Typography>
-                <Button
-                  variant="underlined"
-                  size="small"
-                  color="primary"
-                  onClick={props.goToSignUp}
-                >
-                  Sign Up
-                </Button>
-              </Flex>
-            </div>
-          </Flex>
+            </Localized>
+            <Flex justifyContent="center">
+              <Localized
+                id="signIn-noAccountSignUp"
+                button={
+                  <Button
+                    variant="underlined"
+                    size="small"
+                    color="primary"
+                    onClick={props.onGotoSignUp}
+                  />
+                }
+              >
+                <Typography variant="bodyCopy" container={Flex}>
+                  {"Don't have an account? <button>Sign Up</button>"}
+                </Typography>
+              </Localized>
+            </Flex>
+          </HorizontalGutter>
         </form>
       )}
     </Form>
diff --git a/src/core/client/auth/components/SignUp.tsx b/src/core/client/auth/components/SignUp.tsx
index 3b01e7609..42ec23610 100644
--- a/src/core/client/auth/components/SignUp.tsx
+++ b/src/core/client/auth/components/SignUp.tsx
@@ -34,7 +34,7 @@ interface FormProps {
 
 export interface SignUpForm {
   onSubmit: OnSubmit<FormProps>;
-  goToSignIn: () => void;
+  onGotoSignIn: () => void;
 }
 
 const SignUp: StatelessComponent<SignUpForm> = props => {
@@ -179,7 +179,7 @@ const SignUp: StatelessComponent<SignUpForm> = props => {
                   variant="underlined"
                   size="small"
                   color="primary"
-                  onClick={props.goToSignIn}
+                  onClick={props.onGotoSignIn}
                 >
                   Sign In
                 </Button>
diff --git a/src/core/client/auth/containers/SignInContainer.tsx b/src/core/client/auth/containers/SignInContainer.tsx
index 54077c2e7..fe2b87949 100644
--- a/src/core/client/auth/containers/SignInContainer.tsx
+++ b/src/core/client/auth/containers/SignInContainer.tsx
@@ -13,21 +13,7 @@ interface SignInContainerProps {
   setView: SetViewMutation;
 }
 
-interface SignUpContainerState {
-  error: string | null;
-}
-
-export type View = "SIGN_UP" | "FORGOT_PASSWORD";
-
-class SignInContainer extends Component<
-  SignInContainerProps,
-  SignUpContainerState
-> {
-  private setView = (view: View) => {
-    this.props.setView({
-      view,
-    });
-  };
+class SignInContainer extends Component<SignInContainerProps> {
   private onSubmit: SignInForm["onSubmit"] = async (input, form) => {
     try {
       await this.props.signIn(input);
@@ -36,14 +22,15 @@ class SignInContainer extends Component<
       return { [FORM_ERROR]: error.message };
     }
   };
-  private goToForgotPassword = () => this.setView("FORGOT_PASSWORD");
-  private goToSignUp = () => this.setView("SIGN_UP");
+  private goToForgotPassword = () =>
+    this.props.setView({ view: "FORGOT_PASSWORD" });
+  private goToSignUp = () => this.props.setView({ view: "SIGN_UP" });
   public render() {
     return (
       <SignIn
         onSubmit={this.onSubmit}
-        goToForgotPassword={this.goToForgotPassword}
-        goToSignUp={this.goToSignUp}
+        onGotoForgotPassword={this.goToForgotPassword}
+        onGotoSignUp={this.goToSignUp}
       />
     );
   }
diff --git a/src/core/client/auth/containers/SignUpContainer.tsx b/src/core/client/auth/containers/SignUpContainer.tsx
index f18115557..8be2d84ed 100644
--- a/src/core/client/auth/containers/SignUpContainer.tsx
+++ b/src/core/client/auth/containers/SignUpContainer.tsx
@@ -14,21 +14,7 @@ interface SignUpContainerProps {
   setView: SetViewMutation;
 }
 
-interface SignUpContainerState {
-  error: string | null;
-}
-
-export type View = "SIGN_IN";
-
-class SignUpContainer extends Component<
-  SignUpContainerProps,
-  SignUpContainerState
-> {
-  private setView = (view: View) => {
-    this.props.setView({
-      view,
-    });
-  };
+class SignUpContainer extends Component<SignUpContainerProps> {
   private onSubmit: SignUpForm["onSubmit"] = async (input, form) => {
     try {
       return await this.props.signUp(input);
@@ -37,9 +23,9 @@ class SignUpContainer extends Component<
       return { [FORM_ERROR]: error.message };
     }
   };
-  private goToSignIn = () => this.setView("SIGN_IN");
+  private goToSignIn = () => this.props.setView({ view: "SIGN_IN" });
   public render() {
-    return <SignUp onSubmit={this.onSubmit} goToSignIn={this.goToSignIn} />;
+    return <SignUp onSubmit={this.onSubmit} onGotoSignIn={this.goToSignIn} />;
   }
 }
 
diff --git a/src/core/client/ui/shared/typography.css b/src/core/client/ui/shared/typography.css
index 7f99ddf39..3cd3a2c01 100644
--- a/src/core/client/ui/shared/typography.css
+++ b/src/core/client/ui/shared/typography.css
@@ -1,7 +1,7 @@
 @font-face {
   font-family: "Source Sans Pro";
   font-style: normal;
-  font-display: swap;
+  font-display: block;
   font-weight: 300;
   src: local("Source Sans Pro Light "), local("Source Sans Pro-Light"),
     url("typeface-source-sans-pro/files/source-sans-pro-latin-300.woff2")
@@ -13,7 +13,7 @@
 @font-face {
   font-family: "Source Sans Pro";
   font-style: normal;
-  font-display: swap;
+  font-display: block;
   font-weight: 400;
   src: local("Source Sans Pro Regular italic"),
     local("Source Sans Pro-Regularitalic"),
@@ -26,7 +26,7 @@
 @font-face {
   font-family: "Source Sans Pro";
   font-style: normal;
-  font-display: swap;
+  font-display: block;
   font-weight: 600;
   src: local("Source Sans Pro SemiBold italic"),
     local("Source Sans Pro-SemiBolditalic"),
@@ -39,7 +39,7 @@
 @font-face {
   font-family: "Manuale";
   font-style: normal;
-  font-display: swap;
+  font-display: block;
   font-weight: 400;
   src: local("Manuale Regular "), local("Manuale-Regular"),
     url("typeface-manuale/files/manuale-latin-400.woff2") format("woff2"),
@@ -49,7 +49,7 @@
 @font-face {
   font-family: "Manuale";
   font-style: normal;
-  font-display: swap;
+  font-display: block;
   font-weight: 600;
   src: local("Manuale SemiBold "), local("Manuale-SemiBold"),
     url("typeface-manuale/files/manuale-latin-600.woff2") format("woff2"),
@@ -60,7 +60,7 @@
   font-size: calc(24rem / var(--rem-base));
   font-weight: var(--font-weight-medium);
   font-family: var(--font-family-serif);
-  line-height: calc(32em / 24);
+  line-height: calc(26em / 24);
   letter-spacing: calc(0.2em / 24);
   color: var(--palette-text-primary);
 }
@@ -69,7 +69,7 @@
   font-size: calc(20rem / var(--rem-base));
   font-weight: var(--font-weight-medium);
   font-family: var(--font-family-serif);
-  line-height: calc(24em / 20);
+  line-height: calc(22em / 20);
   letter-spacing: calc(0.2em / 20);
   color: var(--palette-text-primary);
 }
diff --git a/src/locales/en-US/auth.ftl b/src/locales/en-US/auth.ftl
new file mode 100644
index 000000000..87e1649ae
--- /dev/null
+++ b/src/locales/en-US/auth.ftl
@@ -0,0 +1,19 @@
+### Localization for the Auth Popup
+
+## Sign In
+
+signIn-signInToJoinHeader = Sign in to join the conversation
+
+signIn-signInAndJoinButton = Sign in and join the conversation
+
+signIn-emailAddressLabel = Email Address
+signIn-emailAddressTextfield =
+  .placeholder = Email Address
+
+signIn-passwordLabel = Password
+signIn-passwordTextfield =
+  .placeholder = Password
+
+signIn-forgotYourPassword = Forgot your password?
+
+signIn-noAccountSignUp = Don't have an account? <button>Sign Up</button>

From 5a26b319d8e867820605d22a95cf1fc9f346d730 Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Mon, 27 Aug 2018 16:49:58 +0200
Subject: [PATCH 69/81] Adapt sign up plus validation and translations

---
 src/core/client/auth/components/SignIn.tsx    |   2 +-
 src/core/client/auth/components/SignUp.css    |   7 -
 src/core/client/auth/components/SignUp.tsx    | 223 ++++++++++--------
 .../framework/lib/errors/badUserInputError.ts |   5 +-
 src/core/client/framework/lib/messages.tsx    |  28 ++-
 src/core/client/framework/lib/validation.tsx  |  41 +++-
 src/locales/en-US/auth.ftl                    |  28 ++-
 src/locales/en-US/framework.ftl               |   7 +
 8 files changed, 218 insertions(+), 123 deletions(-)
 delete mode 100644 src/core/client/auth/components/SignUp.css

diff --git a/src/core/client/auth/components/SignIn.tsx b/src/core/client/auth/components/SignIn.tsx
index 46dc0a910..12d2d8585 100644
--- a/src/core/client/auth/components/SignIn.tsx
+++ b/src/core/client/auth/components/SignIn.tsx
@@ -63,7 +63,7 @@ const SignIn: StatelessComponent<SignInForm> = props => {
                     <InputLabel>Email Address</InputLabel>
                   </Localized>
                   <Localized
-                    id="signIn-emailAddressTextfield"
+                    id="signIn-emailAddressTextField"
                     attrs={{ placeholder: true }}
                   >
                     <TextField
diff --git a/src/core/client/auth/components/SignUp.css b/src/core/client/auth/components/SignUp.css
deleted file mode 100644
index ecd1df9ff..000000000
--- a/src/core/client/auth/components/SignUp.css
+++ /dev/null
@@ -1,7 +0,0 @@
-.root {
-}
-
-.subFooter {
-  padding-top: var(--spacing-unit);
-  width: 100%;
-}
diff --git a/src/core/client/auth/components/SignUp.tsx b/src/core/client/auth/components/SignUp.tsx
index 42ec23610..cd511dd42 100644
--- a/src/core/client/auth/components/SignUp.tsx
+++ b/src/core/client/auth/components/SignUp.tsx
@@ -1,3 +1,4 @@
+import { Localized } from "fluent-react/compat";
 import * as React from "react";
 import { StatelessComponent } from "react";
 import { Field, Form } from "react-final-form";
@@ -15,6 +16,7 @@ import {
   CallOut,
   Flex,
   FormField,
+  HorizontalGutter,
   InputDescription,
   InputLabel,
   TextField,
@@ -23,7 +25,6 @@ import {
 } from "talk-ui/components";
 
 import AutoHeightContainer from "../containers/AutoHeightContainer";
-import * as styles from "./SignUp.css";
 
 interface FormProps {
   email: string;
@@ -43,127 +44,151 @@ const SignUp: StatelessComponent<SignUpForm> = props => {
       {({ handleSubmit, submitError }) => (
         <form autoComplete="off" onSubmit={handleSubmit}>
           <AutoHeightContainer />
-          <Flex itemGutter="double" direction="column" className={styles.root}>
-            <Flex direction="column">
+          <HorizontalGutter size="double">
+            <Localized id="signUp-signUpToJoinHeader">
               <Typography variant="heading1" align="center">
                 Sign up to join the conversation
               </Typography>
-
-              {submitError && (
-                <CallOut color="error" fullWidth>
-                  {submitError}
-                </CallOut>
-              )}
-
-              <Field
-                name="email"
-                validate={composeValidators(required, validateEmail)}
-              >
-                {({ input, meta }) => (
-                  <FormField>
+            </Localized>
+            {submitError && (
+              <CallOut color="error" fullWidth>
+                {submitError}
+              </CallOut>
+            )}
+            <Field
+              name="email"
+              validate={composeValidators(required, validateEmail)}
+            >
+              {({ input, meta }) => (
+                <FormField>
+                  <Localized id="signUp-emailAddressLabel">
                     <InputLabel>Email Address</InputLabel>
+                  </Localized>
+                  <Localized
+                    id="signUp-emailAddressTextField"
+                    attrs={{ placeholder: true }}
+                  >
                     <TextField
                       name={input.name}
                       onChange={input.onChange}
                       value={input.value}
                       placeholder="Email Address"
+                      fullWidth
                     />
-                    {meta.touched &&
-                      (meta.error || meta.submitError) && (
-                        <ValidationMessage>
-                          {meta.error || meta.submitError}
-                        </ValidationMessage>
-                      )}
-                  </FormField>
-                )}
-              </Field>
-
-              <Field
-                name="username"
-                validate={composeValidators(required, validateUsername)}
-              >
-                {({ input, meta }) => (
-                  <FormField>
+                  </Localized>
+                  {meta.touched &&
+                    (meta.error || meta.submitError) && (
+                      <ValidationMessage fullWidth>
+                        {meta.error || meta.submitError}
+                      </ValidationMessage>
+                    )}
+                </FormField>
+              )}
+            </Field>
+            <Field
+              name="username"
+              validate={composeValidators(required, validateUsername)}
+            >
+              {({ input, meta }) => (
+                <FormField>
+                  <Localized id="signUp-usernameLabel">
                     <InputLabel>Username</InputLabel>
+                  </Localized>
+                  <Localized id="signUp-usernameDescription">
                     <InputDescription>
                       A unique identifier displayed on your comments. You may
                       use “_” and “.”
                     </InputDescription>
+                  </Localized>
+                  <Localized
+                    id="signUp-usernameTextField"
+                    attrs={{ placeholder: true }}
+                  >
                     <TextField
                       name={input.name}
                       onChange={input.onChange}
                       value={input.value}
                       placeholder="Username"
+                      fullWidth
                     />
-                    {meta.touched &&
-                      (meta.error || meta.submitError) && (
-                        <ValidationMessage>
-                          {meta.error || meta.submitError}
-                        </ValidationMessage>
-                      )}
-                  </FormField>
-                )}
-              </Field>
-
-              <Field
-                name="password"
-                validate={composeValidators(required, validatePassword)}
-              >
-                {({ input, meta }) => (
-                  <FormField>
+                  </Localized>
+                  {meta.touched &&
+                    (meta.error || meta.submitError) && (
+                      <ValidationMessage fullWidth>
+                        {meta.error || meta.submitError}
+                      </ValidationMessage>
+                    )}
+                </FormField>
+              )}
+            </Field>
+            <Field
+              name="password"
+              validate={composeValidators(required, validatePassword)}
+            >
+              {({ input, meta }) => (
+                <FormField>
+                  <Localized id="signUp-passwordLabel">
                     <InputLabel>Password</InputLabel>
+                  </Localized>
+                  <Localized id="signUp-passwordDescription" $minLength={8}>
                     <InputDescription>
-                      Must be at least 8 characters
+                      {"Must be at least {$minLength} characters"}
                     </InputDescription>
+                  </Localized>
+                  <Localized
+                    id="signUp-passwordTextField"
+                    attrs={{ placeholder: true }}
+                  >
                     <TextField
                       name={input.name}
                       onChange={input.onChange}
                       value={input.value}
                       placeholder="Password"
                       type="password"
+                      fullWidth
                     />
-                    {meta.touched &&
-                      (meta.error || meta.submitError) && (
-                        <ValidationMessage>
-                          {meta.error || meta.submitError}
-                        </ValidationMessage>
-                      )}
-                  </FormField>
-                )}
-              </Field>
-
-              <Field
-                name="confirmPassword"
-                validate={composeValidators(
-                  required,
-                  validatePassword,
-                  validateEqualPasswords
-                )}
-              >
-                {({ input, meta }) => (
-                  <FormField>
+                  </Localized>
+                  {meta.touched &&
+                    (meta.error || meta.submitError) && (
+                      <ValidationMessage fullWidth>
+                        {meta.error || meta.submitError}
+                      </ValidationMessage>
+                    )}
+                </FormField>
+              )}
+            </Field>
+            <Field
+              name="confirmPassword"
+              validate={composeValidators(required, validateEqualPasswords)}
+            >
+              {({ input, meta }) => (
+                <FormField>
+                  <Localized id="signUp-confirmPasswordLabel">
                     <InputLabel>Confirm Password</InputLabel>
-                    <InputDescription>
-                      Must be at least 8 characters
-                    </InputDescription>
+                  </Localized>
+                  <Localized
+                    id="signUp-confirmPasswordTextField"
+                    attrs={{ placeholder: true }}
+                  >
                     <TextField
                       name={input.name}
                       onChange={input.onChange}
                       value={input.value}
                       placeholder="Confirm Password"
                       type="password"
+                      fullWidth
                     />
-                    {meta.touched &&
-                      (meta.error || meta.submitError) && (
-                        <ValidationMessage>
-                          {meta.error || meta.submitError}
-                        </ValidationMessage>
-                      )}
-                  </FormField>
-                )}
-              </Field>
-            </Flex>
-            <div>
+                  </Localized>
+                  {meta.touched &&
+                    (meta.error || meta.submitError) && (
+                      <ValidationMessage fullWidth>
+                        {meta.error || meta.submitError}
+                      </ValidationMessage>
+                    )}
+                </FormField>
+              )}
+            </Field>
+            <Localized id="signUp-signUpAndJoinButton">
               <Button
                 variant="filled"
                 color="primary"
@@ -173,19 +198,25 @@ const SignUp: StatelessComponent<SignUpForm> = props => {
               >
                 Sign up and join the conversation
               </Button>
-              <Flex itemGutter="half" justifyContent="center">
-                <Typography>Already have an account?</Typography>
-                <Button
-                  variant="underlined"
-                  size="small"
-                  color="primary"
-                  onClick={props.onGotoSignIn}
-                >
-                  Sign In
-                </Button>
-              </Flex>
-            </div>
-          </Flex>
+            </Localized>
+            <Flex justifyContent="center">
+              <Localized
+                id="signUp-accountAvailableSignIn"
+                button={
+                  <Button
+                    variant="underlined"
+                    size="small"
+                    color="primary"
+                    onClick={props.onGotoSignIn}
+                  />
+                }
+              >
+                <Typography variant="bodyCopy" container={Flex}>
+                  {"Already have an account? <button>Sign In </button>"}
+                </Typography>
+              </Localized>
+            </Flex>
+          </HorizontalGutter>
         </form>
       )}
     </Form>
diff --git a/src/core/client/framework/lib/errors/badUserInputError.ts b/src/core/client/framework/lib/errors/badUserInputError.ts
index aa5d127af..e1674ae06 100644
--- a/src/core/client/framework/lib/errors/badUserInputError.ts
+++ b/src/core/client/framework/lib/errors/badUserInputError.ts
@@ -1,12 +1,12 @@
 import { mapValues, once } from "lodash";
 import { ReactNode } from "react";
-import { VALIDATION_REQUIRED, VALIDATION_TOO_SHORT } from "../messages";
+import { VALIDATION_REQUIRED } from "../messages";
 
 /**
  * ValidationError represents all possible string values
  * that is responded by the server.
  */
-type ValidationError = "TOO_SHORT";
+type ValidationError = "REQUIRED";
 
 /**
  * InvalidArgsMap as responded by the server.
@@ -36,7 +36,6 @@ interface BadUserInputExtension {
  * Map server `ValidationError` to a translation message.
  */
 const validationMap = {
-  TOO_SHORT: VALIDATION_TOO_SHORT,
   REQUIRED: VALIDATION_REQUIRED,
 };
 
diff --git a/src/core/client/framework/lib/messages.tsx b/src/core/client/framework/lib/messages.tsx
index 61c74aa4b..28beed2f4 100644
--- a/src/core/client/framework/lib/messages.tsx
+++ b/src/core/client/framework/lib/messages.tsx
@@ -12,9 +12,9 @@ export const VALIDATION_REQUIRED = () => (
   </Localized>
 );
 
-export const VALIDATION_TOO_SHORT = () => (
+export const VALIDATION_TOO_SHORT = (minLength: number) => (
   <Localized id="framework-validation-tooShort">
-    <span>This field is too short.</span>
+    <span>{"This field must contain at least {$minLength} characters."}</span>
   </Localized>
 );
 
@@ -24,15 +24,27 @@ export const INVALID_EMAIL = () => (
   </Localized>
 );
 
-export const INVALID_USERNAME = () => (
-  <Localized id="framework-validation-invalidUsername">
-    <span>Please enter a valid username.</span>
+export const INVALID_CHARACTERS = () => (
+  <Localized id="framework-validation-invalidCharacters">
+    <span>Invalid characters. Try again.</span>
   </Localized>
 );
 
-export const INVALID_PASSWORD = () => (
-  <Localized id="framework-validation-invalidUsername">
-    <span>Please enter a valid password.</span>
+export const USERNAME_TOO_SHORT = (minLength: number) => (
+  <Localized id="framework-validation-usernameTooShort" $minLength={minLength}>
+    <span>{"Usernames must contain at least {$minLength} characters."}</span>
+  </Localized>
+);
+
+export const USERNAME_TOO_LONG = (maxLength: number) => (
+  <Localized id="framework-validation-usernameTooLong" $maxLength={maxLength}>
+    <span>{"Usernames cannot be longer than {$maxLength} characters."}</span>
+  </Localized>
+);
+
+export const PASSWORD_TOO_SHORT = (minLength: number) => (
+  <Localized id="framework-validation-passwordTooShort" $minLength={minLength}>
+    <span>{"Password must contain at least {$minLength} characters."}</span>
   </Localized>
 );
 
diff --git a/src/core/client/framework/lib/validation.tsx b/src/core/client/framework/lib/validation.tsx
index 87e8f855c..6634e9fde 100644
--- a/src/core/client/framework/lib/validation.tsx
+++ b/src/core/client/framework/lib/validation.tsx
@@ -1,9 +1,11 @@
 import { ReactNode } from "react";
 import {
+  INVALID_CHARACTERS,
   INVALID_EMAIL,
-  INVALID_PASSWORD,
-  INVALID_USERNAME,
+  PASSWORD_TOO_SHORT,
   PASSWORDS_DO_NOT_MATCH,
+  USERNAME_TOO_LONG,
+  USERNAME_TOO_SHORT,
   VALIDATION_REQUIRED,
 } from "./messages";
 
@@ -47,19 +49,44 @@ export const validateEmail = createValidator(
 );
 
 /**
- * validateUsername is a Validator that checks that the value is a valid username.
+ * validateUsernameCharacters is a Validator that checks that the username only contains valid characters.
  */
-export const validateUsername = createValidator(
+export const validateUsernameCharacters = createValidator(
   v => /^[a-zA-Z0-9_.]+$/.test(v),
-  INVALID_USERNAME()
+  INVALID_CHARACTERS()
+);
+
+/**
+ * validateUsernameMinLength is a Validator that checks that the username has a min length of characters
+ */
+export const validateUsernameMinLength = createValidator(
+  v => v.length >= 3,
+  USERNAME_TOO_SHORT(3)
+);
+
+/**
+ * validateUsernameMaxLength is a Validator that checks that the username has a max length of characters
+ */
+export const validateUsernameMaxLength = createValidator(
+  v => v.length <= 20,
+  USERNAME_TOO_LONG(20)
+);
+
+/**
+ * validateUsername is a Validator that checks that the username is valid.
+ */
+export const validateUsername = composeValidators(
+  validateUsernameCharacters,
+  validateUsernameMinLength,
+  validateUsernameMaxLength
 );
 
 /**
  * validateUsername is a Validator that checks that the value is a valid username.
  */
 export const validatePassword = createValidator(
-  v => /^(?=.{8,}).*$/.test(v),
-  INVALID_PASSWORD()
+  v => v.length >= 8,
+  PASSWORD_TOO_SHORT(8)
 );
 
 /**s
diff --git a/src/locales/en-US/auth.ftl b/src/locales/en-US/auth.ftl
index 87e1649ae..9b8bb1d80 100644
--- a/src/locales/en-US/auth.ftl
+++ b/src/locales/en-US/auth.ftl
@@ -7,7 +7,7 @@ signIn-signInToJoinHeader = Sign in to join the conversation
 signIn-signInAndJoinButton = Sign in and join the conversation
 
 signIn-emailAddressLabel = Email Address
-signIn-emailAddressTextfield =
+signIn-emailAddressTextField =
   .placeholder = Email Address
 
 signIn-passwordLabel = Password
@@ -17,3 +17,29 @@ signIn-passwordTextfield =
 signIn-forgotYourPassword = Forgot your password?
 
 signIn-noAccountSignUp = Don't have an account? <button>Sign Up</button>
+
+## Sign Up
+
+signUp-signUpToJoinHeader = Sign up to join the conversation
+
+signUp-signUpAndJoinButton = Sign up and join the conversation
+
+signUp-emailAddressLabel = Email Address
+signUp-emailAddressTextField
+  .placeholder = Email Address
+
+signUp-usernameLabel = Username
+signUp-usernameDescription = A unique identifier displayed on your comments. You may use “_” and “.”
+signUp-usernameTextField
+  .placeholder = Username
+
+signUp-passwordLabel = Password
+signUp-passwordDescription = Must be at least {$minLength} characters
+signUp-passwordTextField
+  .placeholder = Password
+
+signUp-confirmPasswordLabel = Confirm Password
+signUp-confirmPasswordTextField
+  .placeholder = Confirm Password
+
+signUp-accountAvailableSignIn = Already have an account? <button>Sign In</button>
diff --git a/src/locales/en-US/framework.ftl b/src/locales/en-US/framework.ftl
index 555637497..42e6d2751 100644
--- a/src/locales/en-US/framework.ftl
+++ b/src/locales/en-US/framework.ftl
@@ -5,6 +5,13 @@
 ## Validation
 
 framework-validation-required = This field is required.
+framework-validation-tooShort = The field must contain at least {$minLength} characters.
+framework-validation-passwordTooShort = Password must contain at least {$minLength} characters.
+framework-validation-usernameTooShort = Username must contain at least {$minLength} characters.
+framework-validation-usernameTooLong = Usernames cannot be longer than {$maxLength} characters.
+framework-validation-invalidCharacters = Invalid characters. Try again.
+framework-validation-invalidEmail = Please enter a valid email address.
+framework-validation-passwordsDoNotMatch = Passwords do not match. Try again.
 
 framework-timeago-time =
   { $value }

From 9bea53911f176305d5c4fb8c2031cc4dad682786 Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Mon, 27 Aug 2018 17:15:20 +0200
Subject: [PATCH 70/81] Adapt Forgot and Reset Password

---
 .../client/auth/components/ForgotPassword.css |  2 -
 .../client/auth/components/ForgotPassword.tsx | 63 ++++++++----
 .../client/auth/components/ResetPassword.css  |  2 -
 .../client/auth/components/ResetPassword.tsx  | 99 ++++++++++++-------
 src/core/client/auth/components/SignIn.tsx    |  2 +-
 src/core/client/auth/local/local.graphql      |  1 +
 .../client/auth/mutations/SetViewMutation.ts  |  2 +-
 src/locales/en-US/auth.ftl                    | 37 ++++++-
 8 files changed, 139 insertions(+), 69 deletions(-)
 delete mode 100644 src/core/client/auth/components/ForgotPassword.css
 delete mode 100644 src/core/client/auth/components/ResetPassword.css

diff --git a/src/core/client/auth/components/ForgotPassword.css b/src/core/client/auth/components/ForgotPassword.css
deleted file mode 100644
index c3a2af639..000000000
--- a/src/core/client/auth/components/ForgotPassword.css
+++ /dev/null
@@ -1,2 +0,0 @@
-.root {
-}
diff --git a/src/core/client/auth/components/ForgotPassword.tsx b/src/core/client/auth/components/ForgotPassword.tsx
index 49b1be188..794acebfa 100644
--- a/src/core/client/auth/components/ForgotPassword.tsx
+++ b/src/core/client/auth/components/ForgotPassword.tsx
@@ -1,3 +1,4 @@
+import { Localized } from "fluent-react/compat";
 import React, { StatelessComponent } from "react";
 import { Field, Form } from "react-final-form";
 import { OnSubmit } from "talk-framework/lib/form";
@@ -10,8 +11,9 @@ import {
 
 import {
   Button,
-  Flex,
+  CallOut,
   FormField,
+  HorizontalGutter,
   InputLabel,
   TextField,
   Typography,
@@ -31,30 +33,47 @@ export interface ForgotPasswordForm {
 const ForgotPassword: StatelessComponent<ForgotPasswordForm> = props => {
   return (
     <Form onSubmit={props.onSubmit}>
-      {({ handleSubmit }) => (
+      {({ handleSubmit, submitError }) => (
         <form autoComplete="off" onSubmit={handleSubmit}>
           <AutoHeightContainer />
-          <Flex itemGutter="double" direction="column">
-            <Typography variant="heading1" align="center">
-              Forgot Password
-            </Typography>
-            <Typography variant="bodyCopy">
-              Enter your email address below and we will send you a link to
-              reset your password.
-            </Typography>
+          <HorizontalGutter size="double">
+            <Localized id="forgotPassword-forgotPasswordHeader">
+              <Typography variant="heading1" align="center">
+                Forgot Password
+              </Typography>
+            </Localized>
+            <Localized id="forgotPassword-enterEmailAndGetALink">
+              <Typography variant="bodyCopy">
+                Enter your email address below and we will send you a link to
+                reset your password.
+              </Typography>
+            </Localized>
+            {submitError && (
+              <CallOut color="error" fullWidth>
+                {submitError}
+              </CallOut>
+            )}
             <Field
               name="email"
               validate={composeValidators(required, validateEmail)}
             >
               {({ input, meta }) => (
                 <FormField>
-                  <InputLabel>Email Address</InputLabel>
-                  <TextField
-                    name={input.name}
-                    onChange={input.onChange}
-                    value={input.value}
-                    placeholder="Email Address"
-                  />
+                  <Localized id="forgotPassword-emailAddressLabel">
+                    <InputLabel>Email Address</InputLabel>
+                  </Localized>
+                  <Localized
+                    id="forgotPassword-emailAddressTextField"
+                    attrs={{ placeholder: true }}
+                  >
+                    <TextField
+                      name={input.name}
+                      onChange={input.onChange}
+                      value={input.value}
+                      placeholder="Email Address"
+                      fullWidth
+                    />
+                  </Localized>
                   {meta.touched &&
                     (meta.error || meta.submitError) && (
                       <ValidationMessage>
@@ -64,10 +83,12 @@ const ForgotPassword: StatelessComponent<ForgotPasswordForm> = props => {
                 </FormField>
               )}
             </Field>
-            <Button variant="filled" color="primary" size="large" fullWidth>
-              Send Email
-            </Button>
-          </Flex>
+            <Localized id="forgotPassword-sendEmailButton">
+              <Button variant="filled" color="primary" size="large" fullWidth>
+                Send Email
+              </Button>
+            </Localized>
+          </HorizontalGutter>
         </form>
       )}
     </Form>
diff --git a/src/core/client/auth/components/ResetPassword.css b/src/core/client/auth/components/ResetPassword.css
deleted file mode 100644
index c3a2af639..000000000
--- a/src/core/client/auth/components/ResetPassword.css
+++ /dev/null
@@ -1,2 +0,0 @@
-.root {
-}
diff --git a/src/core/client/auth/components/ResetPassword.tsx b/src/core/client/auth/components/ResetPassword.tsx
index c16139cdd..dadf210db 100644
--- a/src/core/client/auth/components/ResetPassword.tsx
+++ b/src/core/client/auth/components/ResetPassword.tsx
@@ -1,3 +1,4 @@
+import { Localized } from "fluent-react/compat";
 import React, { StatelessComponent } from "react";
 import { Field, Form } from "react-final-form";
 import { OnSubmit } from "talk-framework/lib/form";
@@ -11,8 +12,9 @@ import {
 
 import {
   Button,
-  Flex,
+  CallOut,
   FormField,
+  HorizontalGutter,
   InputDescription,
   InputLabel,
   TextField,
@@ -34,30 +36,50 @@ export interface ResetPasswordForm {
 const ResetPassword: StatelessComponent<ResetPasswordForm> = props => {
   return (
     <Form onSubmit={props.onSubmit}>
-      {({ handleSubmit }) => (
+      {({ handleSubmit, submitError }) => (
         <form autoComplete="off" onSubmit={handleSubmit}>
           <AutoHeightContainer />
-          <Flex itemGutter="double" direction="column">
-            <Typography variant="heading1" align="center">
-              Reset Password
-            </Typography>
+          <HorizontalGutter size="double">
+            <Localized id="resetPassword-resetPasswordHeader">
+              <Typography variant="heading1" align="center">
+                Reset Password
+              </Typography>
+            </Localized>
+            {submitError && (
+              <CallOut color="error" fullWidth>
+                {submitError}
+              </CallOut>
+            )}
             <Field
               name="password"
               validate={composeValidators(required, validatePassword)}
             >
               {({ input, meta }) => (
                 <FormField>
-                  <InputLabel>Password</InputLabel>
-                  <InputDescription>
-                    Must be at least 8 characters
-                  </InputDescription>
-                  <TextField
-                    name={input.name}
-                    onChange={input.onChange}
-                    value={input.value}
-                    placeholder="Password"
-                    type="password"
-                  />
+                  <Localized id="resetPassword-passwordLabel">
+                    <InputLabel>Password</InputLabel>
+                  </Localized>
+                  <Localized
+                    id="resetPassword-passwordDescription"
+                    $minLength={8}
+                  >
+                    <InputDescription>
+                      {"Must be at least {$minLength} characters"}
+                    </InputDescription>
+                  </Localized>
+                  <Localized
+                    id="resetPassword-passwordTextField"
+                    attrs={{ placeholder: true }}
+                  >
+                    <TextField
+                      name={input.name}
+                      onChange={input.onChange}
+                      value={input.value}
+                      placeholder="Password"
+                      type="password"
+                      fullWidth
+                    />
+                  </Localized>
                   {meta.touched &&
                     (meta.error || meta.submitError) && (
                       <ValidationMessage>
@@ -70,25 +92,26 @@ const ResetPassword: StatelessComponent<ResetPasswordForm> = props => {
 
             <Field
               name="confirmPassword"
-              validate={composeValidators(
-                required,
-                validatePassword,
-                validateEqualPasswords
-              )}
+              validate={composeValidators(required, validateEqualPasswords)}
             >
               {({ input, meta }) => (
                 <FormField>
-                  <InputLabel>Confirm Password</InputLabel>
-                  <InputDescription>
-                    Must be at least 8 characters
-                  </InputDescription>
-                  <TextField
-                    name={input.name}
-                    onChange={input.onChange}
-                    value={input.value}
-                    placeholder="Confirm Password"
-                    type="password"
-                  />
+                  <Localized id="resetPassword-confirmPasswordLabel">
+                    <InputLabel>Confirm Password</InputLabel>
+                  </Localized>
+                  <Localized
+                    id="resetPassword-confirmPasswordTextField"
+                    attrs={{ placeholder: true }}
+                  >
+                    <TextField
+                      name={input.name}
+                      onChange={input.onChange}
+                      value={input.value}
+                      placeholder="Confirm Password"
+                      type="password"
+                      fullWidth
+                    />
+                  </Localized>
                   {meta.touched &&
                     (meta.error || meta.submitError) && (
                       <ValidationMessage>
@@ -98,10 +121,12 @@ const ResetPassword: StatelessComponent<ResetPasswordForm> = props => {
                 </FormField>
               )}
             </Field>
-            <Button variant="filled" color="primary" size="large" fullWidth>
-              Reset Password
-            </Button>
-          </Flex>
+            <Localized id="resetPassword-resetPasswordButton">
+              <Button variant="filled" color="primary" size="large" fullWidth>
+                Reset Password
+              </Button>
+            </Localized>
+          </HorizontalGutter>
         </form>
       )}
     </Form>
diff --git a/src/core/client/auth/components/SignIn.tsx b/src/core/client/auth/components/SignIn.tsx
index 12d2d8585..c1058365e 100644
--- a/src/core/client/auth/components/SignIn.tsx
+++ b/src/core/client/auth/components/SignIn.tsx
@@ -91,7 +91,7 @@ const SignIn: StatelessComponent<SignInForm> = props => {
                     <InputLabel>Password</InputLabel>
                   </Localized>
                   <Localized
-                    id="signIn-passwordTextfield"
+                    id="signIn-passwordTextField"
                     attrs={{ placeholder: true }}
                   >
                     <TextField
diff --git a/src/core/client/auth/local/local.graphql b/src/core/client/auth/local/local.graphql
index c536037d3..54c52fb90 100644
--- a/src/core/client/auth/local/local.graphql
+++ b/src/core/client/auth/local/local.graphql
@@ -2,6 +2,7 @@ enum View {
   SIGN_UP
   SIGN_IN
   FORGOT_PASSWORD
+  RESET_PASSWORD
 }
 
 type Local {
diff --git a/src/core/client/auth/mutations/SetViewMutation.ts b/src/core/client/auth/mutations/SetViewMutation.ts
index c5bb851fd..df95f18e1 100644
--- a/src/core/client/auth/mutations/SetViewMutation.ts
+++ b/src/core/client/auth/mutations/SetViewMutation.ts
@@ -6,7 +6,7 @@ import { LOCAL_ID } from "talk-framework/lib/relay/withLocalStateContainer";
 
 export interface SetViewInput {
   // TODO: replace with generated typescript types.
-  view: "SIGN_IN" | "SIGN_UP" | "FORGOT_PASSWORD";
+  view: "SIGN_IN" | "SIGN_UP" | "FORGOT_PASSWORD" | "RESET_PASSWORD";
 }
 
 export type SetViewMutation = (input: SetViewInput) => Promise<void>;
diff --git a/src/locales/en-US/auth.ftl b/src/locales/en-US/auth.ftl
index 9b8bb1d80..236530dd6 100644
--- a/src/locales/en-US/auth.ftl
+++ b/src/locales/en-US/auth.ftl
@@ -11,7 +11,7 @@ signIn-emailAddressTextField =
   .placeholder = Email Address
 
 signIn-passwordLabel = Password
-signIn-passwordTextfield =
+signIn-passwordTextField =
   .placeholder = Password
 
 signIn-forgotYourPassword = Forgot your password?
@@ -25,21 +25,48 @@ signUp-signUpToJoinHeader = Sign up to join the conversation
 signUp-signUpAndJoinButton = Sign up and join the conversation
 
 signUp-emailAddressLabel = Email Address
-signUp-emailAddressTextField
+signUp-emailAddressTextField =
   .placeholder = Email Address
 
 signUp-usernameLabel = Username
 signUp-usernameDescription = A unique identifier displayed on your comments. You may use “_” and “.”
-signUp-usernameTextField
+signUp-usernameTextField =
   .placeholder = Username
 
 signUp-passwordLabel = Password
 signUp-passwordDescription = Must be at least {$minLength} characters
-signUp-passwordTextField
+signUp-passwordTextField =
   .placeholder = Password
 
 signUp-confirmPasswordLabel = Confirm Password
-signUp-confirmPasswordTextField
+signUp-confirmPasswordTextField =
   .placeholder = Confirm Password
 
 signUp-accountAvailableSignIn = Already have an account? <button>Sign In</button>
+
+## Forgot Password
+
+forgotPassword-forgotPasswordHeader = Forgot Password
+forgotPassword-enterEmailAndGetALink =
+  Enter your email address below and we will send you a link to
+  reset your password.
+
+forgotPassword-sendEmailButton = Send Email
+
+forgotPassword-emailAddressLabel = Email Address
+forgotPassword-emailAddressTextField =
+  .placeholder = Email Address
+
+## Reset Password
+
+resetPassword-resetPasswordHeader = Reset Password
+resetPassword-resetPasswordButton = Reset Password
+
+resetPassword-passwordLabel = Password
+resetPassword-passwordDescription = Must be at least {$minLength} characters
+resetPassword-passwordTextField =
+  .placeholder = Password
+
+resetPassword-confirmPasswordLabel = Confirm Password
+resetPassword-confirmPasswordTextField =
+  .placeholder = Confirm Password

From f57773393a28a5b0490480a822f03b48537af680 Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Mon, 27 Aug 2018 17:36:15 +0200
Subject: [PATCH 71/81] Better popup size when loading fonts

---
 .../client/auth/containers/AutoHeightContainer.tsx |  8 +++-----
 src/core/client/auth/dom/resizePopup.ts            |  7 +++++++
 src/core/client/auth/index.tsx                     | 14 ++++++++++++++
 3 files changed, 24 insertions(+), 5 deletions(-)
 create mode 100644 src/core/client/auth/dom/resizePopup.ts

diff --git a/src/core/client/auth/containers/AutoHeightContainer.tsx b/src/core/client/auth/containers/AutoHeightContainer.tsx
index e1eceff38..615e8fdc9 100644
--- a/src/core/client/auth/containers/AutoHeightContainer.tsx
+++ b/src/core/client/auth/containers/AutoHeightContainer.tsx
@@ -1,5 +1,7 @@
 import { Component } from "react";
 
+import resizePopup from "../dom/resizePopup";
+
 /**
  * A container that adapts the window height to the current body size
  * when this is mounted or updated.
@@ -10,11 +12,7 @@ export default class AutoHeightContainer extends Component {
   private updateWindowSizeCallback = () => {
     clearTimeout(this.timeout);
     this.timeout = setTimeout(() => {
-      const innerHeight = window.document.body.offsetHeight;
-      window.resizeTo(
-        window.outerWidth,
-        innerHeight + window.outerHeight - window.innerHeight
-      );
+      resizePopup();
     }, 0);
   };
 
diff --git a/src/core/client/auth/dom/resizePopup.ts b/src/core/client/auth/dom/resizePopup.ts
new file mode 100644
index 000000000..fb89cfa24
--- /dev/null
+++ b/src/core/client/auth/dom/resizePopup.ts
@@ -0,0 +1,7 @@
+export default function resizePopup() {
+  const innerHeight = window.document.body.offsetHeight;
+  window.resizeTo(
+    window.outerWidth,
+    innerHeight + window.outerHeight - window.innerHeight
+  );
+}
diff --git a/src/core/client/auth/index.tsx b/src/core/client/auth/index.tsx
index 44970a3fa..1239fb1e9 100644
--- a/src/core/client/auth/index.tsx
+++ b/src/core/client/auth/index.tsx
@@ -9,9 +9,23 @@ import {
 } from "talk-framework/lib/bootstrap";
 
 import AppContainer from "./containers/AppContainer";
+import resizePopup from "./dom/resizePopup";
 import { initLocalState } from "./local";
 import localesData from "./locales";
 
+/**
+ * If fonts api is available, resize popup once
+ * fonts are loaded!
+ */
+if ((document as any).fonts) {
+  setTimeout(
+    requestAnimationFrame(() => () =>
+      (document as any).fonts.ready.then(resizePopup)
+    ),
+    50
+  );
+}
+
 // This is called when the context is first initialized.
 async function init({ relayEnvironment }: TalkContext) {
   await initLocalState(relayEnvironment);

From 5a87e6abc6377ab3b9275b0f1cd62e2adf6756b3 Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Mon, 27 Aug 2018 17:36:43 +0200
Subject: [PATCH 72/81] Give more time for render

---
 src/core/client/auth/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/core/client/auth/index.tsx b/src/core/client/auth/index.tsx
index 1239fb1e9..27001dcf9 100644
--- a/src/core/client/auth/index.tsx
+++ b/src/core/client/auth/index.tsx
@@ -22,7 +22,7 @@ if ((document as any).fonts) {
     requestAnimationFrame(() => () =>
       (document as any).fonts.ready.then(resizePopup)
     ),
-    50
+    100
   );
 }
 

From 123bbf6e6533f7d45eaf803679dce589ec894ccc Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Mon, 27 Aug 2018 17:37:32 +0200
Subject: [PATCH 73/81] Give more more time

---
 src/core/client/auth/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/core/client/auth/index.tsx b/src/core/client/auth/index.tsx
index 27001dcf9..230095234 100644
--- a/src/core/client/auth/index.tsx
+++ b/src/core/client/auth/index.tsx
@@ -22,7 +22,7 @@ if ((document as any).fonts) {
     requestAnimationFrame(() => () =>
       (document as any).fonts.ready.then(resizePopup)
     ),
-    100
+    200
   );
 }
 

From 17563824fd4cb4d89771c802aba6019059f09b59 Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Mon, 27 Aug 2018 18:17:09 +0200
Subject: [PATCH 74/81] Use polling

---
 src/core/client/auth/dom/resizePopup.ts | 12 +++++++++++-
 src/core/client/auth/index.tsx          | 25 ++++++++++++++++---------
 2 files changed, 27 insertions(+), 10 deletions(-)

diff --git a/src/core/client/auth/dom/resizePopup.ts b/src/core/client/auth/dom/resizePopup.ts
index fb89cfa24..d9fc1ce6d 100644
--- a/src/core/client/auth/dom/resizePopup.ts
+++ b/src/core/client/auth/dom/resizePopup.ts
@@ -1,7 +1,17 @@
-export default function resizePopup() {
+function resizePopup() {
   const innerHeight = window.document.body.offsetHeight;
   window.resizeTo(
     window.outerWidth,
     innerHeight + window.outerHeight - window.innerHeight
   );
 }
+
+let resizedAlready = false;
+export default function resizeOncePerFrame() {
+  if (resizedAlready) {
+    return;
+  }
+  resizedAlready = true;
+  requestAnimationFrame(() => setTimeout(() => (resizedAlready = false), 0));
+  resizePopup();
+}
diff --git a/src/core/client/auth/index.tsx b/src/core/client/auth/index.tsx
index 230095234..b30487719 100644
--- a/src/core/client/auth/index.tsx
+++ b/src/core/client/auth/index.tsx
@@ -14,16 +14,22 @@ import { initLocalState } from "./local";
 import localesData from "./locales";
 
 /**
- * If fonts api is available, resize popup once
- * fonts are loaded!
+ * Adapt popup height to current content every 100ms.
+ *
+ * The goal is to smooth out height inconsistensies  e.g. when fonts
+ * are switched out or other resources being loaded that React has no influence
+ * over.
+ *
+ * This works in addition to <AutoHeightContainer /> which
+ * adapt popup height when React does an update.
  */
-if ((document as any).fonts) {
-  setTimeout(
-    requestAnimationFrame(() => () =>
-      (document as any).fonts.ready.then(resizePopup)
-    ),
-    200
-  );
+function pollPopupHeight(interval: number = 100) {
+  setTimeout(() => {
+    window.requestAnimationFrame(() => {
+      resizePopup();
+      pollPopupHeight(interval);
+    });
+  }, interval);
 }
 
 // This is called when the context is first initialized.
@@ -46,6 +52,7 @@ async function main() {
   );
 
   ReactDOM.render(<Index />, document.getElementById("app"));
+  pollPopupHeight();
 }
 
 main();

From 5381b75a490376e893484eb20ec36e9f7942fe37 Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Mon, 27 Aug 2018 20:50:46 +0200
Subject: [PATCH 75/81] Update snapshots

---
 .../__snapshots__/TopBar.spec.tsx.snap        |  20 +---
 .../__snapshots__/ReplyList.spec.tsx.snap     |  18 +--
 .../__snapshots__/Stream.spec.tsx.snap        | 108 ++++++++----------
 .../UserBoxUnauthenticated.spec.tsx.snap      |   5 +-
 .../UserBoxContainer.spec.tsx.snap            |   2 +-
 .../__snapshots__/initLocalState.spec.ts.snap |   1 +
 .../client/ui/components/Flex/Flex.spec.tsx   |   2 +-
 .../Flex/__snapshots__/Flex.spec.tsx.snap     |  60 ++++------
 .../__snapshots__/FormField.spec.tsx.snap     |   4 +-
 9 files changed, 90 insertions(+), 130 deletions(-)

diff --git a/src/core/client/stream/components/Comment/__snapshots__/TopBar.spec.tsx.snap b/src/core/client/stream/components/Comment/__snapshots__/TopBar.spec.tsx.snap
index 2e6694137..9ce1f79c5 100644
--- a/src/core/client/stream/components/Comment/__snapshots__/TopBar.spec.tsx.snap
+++ b/src/core/client/stream/components/Comment/__snapshots__/TopBar.spec.tsx.snap
@@ -2,28 +2,20 @@
 
 exports[`renders correctly on big screens 1`] = `
 <div
-  className="Flex-root TopBar-root"
+  className="Flex-root TopBar-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
 >
-  <div
-    className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignBaseline Flex-directionRow"
-  >
-    <div>
-      Hello World
-    </div>
+  <div>
+    Hello World
   </div>
 </div>
 `;
 
 exports[`renders correctly on small screens 1`] = `
 <div
-  className="Flex-root TopBar-root"
+  className="Flex-root TopBar-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
 >
-  <div
-    className="Flex-flex Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
-  >
-    <div>
-      Hello World
-    </div>
+  <div>
+    Hello World
   </div>
 </div>
 `;
diff --git a/src/core/client/stream/components/__snapshots__/ReplyList.spec.tsx.snap b/src/core/client/stream/components/__snapshots__/ReplyList.spec.tsx.snap
index 3ff2461f0..8e8929149 100644
--- a/src/core/client/stream/components/__snapshots__/ReplyList.spec.tsx.snap
+++ b/src/core/client/stream/components/__snapshots__/ReplyList.spec.tsx.snap
@@ -2,10 +2,8 @@
 
 exports[`renders correctly 1`] = `
 <Indent>
-  <withPropsOnChange(Flex)
-    direction="column"
+  <withPropsOnChange(HorizontalGutter)
     id="talk-comments-replyList-log--comment-id"
-    itemGutter={true}
     role="log"
   >
     <Relay(CommentContainer)
@@ -24,16 +22,14 @@ exports[`renders correctly 1`] = `
       }
       key="comment-2"
     />
-  </withPropsOnChange(Flex)>
+  </withPropsOnChange(HorizontalGutter)>
 </Indent>
 `;
 
 exports[`when there is more disables load more button 1`] = `
 <Indent>
-  <withPropsOnChange(Flex)
-    direction="column"
+  <withPropsOnChange(HorizontalGutter)
     id="talk-comments-replyList-log--comment-id"
-    itemGutter={true}
     role="log"
   >
     <Relay(CommentContainer)
@@ -66,16 +62,14 @@ exports[`when there is more disables load more button 1`] = `
         Show All Replies
       </withPropsOnChange(Button)>
     </Localized>
-  </withPropsOnChange(Flex)>
+  </withPropsOnChange(HorizontalGutter)>
 </Indent>
 `;
 
 exports[`when there is more renders a load more button 1`] = `
 <Indent>
-  <withPropsOnChange(Flex)
-    direction="column"
+  <withPropsOnChange(HorizontalGutter)
     id="talk-comments-replyList-log--comment-id"
-    itemGutter={true}
     role="log"
   >
     <Relay(CommentContainer)
@@ -108,6 +102,6 @@ exports[`when there is more renders a load more button 1`] = `
         Show All Replies
       </withPropsOnChange(Button)>
     </Localized>
-  </withPropsOnChange(Flex)>
+  </withPropsOnChange(HorizontalGutter)>
 </Indent>
 `;
diff --git a/src/core/client/stream/components/__snapshots__/Stream.spec.tsx.snap b/src/core/client/stream/components/__snapshots__/Stream.spec.tsx.snap
index 01026fb09..c7b0d358f 100644
--- a/src/core/client/stream/components/__snapshots__/Stream.spec.tsx.snap
+++ b/src/core/client/stream/components/__snapshots__/Stream.spec.tsx.snap
@@ -1,26 +1,22 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders correctly 1`] = `
-<withPropsOnChange(Flex)
+<withPropsOnChange(HorizontalGutter)
   className="Stream-root"
-  direction="column"
-  itemGutter={true}
+  size="double"
 >
-  <withContext(createMutationContainer(withContext(createMutationContainer(withContext(withLocalStateContainer(UserBoxContainer)))))) />
-  <withContext(createMutationContainer(PostCommentFormContainer))
-    assetID="asset-id"
-    signedIn={false}
-  />
-  <withPropsOnChange(Flex)
+  <withPropsOnChange(HorizontalGutter)
+    size="half"
+  >
+    <withContext(createMutationContainer(withContext(createMutationContainer(withContext(createMutationContainer(withContext(withLocalStateContainer(Relay(UserBoxContainer))))))))) />
+    <PostCommentFormFake />
+  </withPropsOnChange(HorizontalGutter)>
+  <withPropsOnChange(HorizontalGutter)
     aria-live="polite"
-    direction="column"
     id="talk-comments-stream-log"
-    itemGutter={true}
     role="log"
   >
-    <withPropsOnChange(Flex)
-      direction="column"
-      itemGutter={true}
+    <withPropsOnChange(HorizontalGutter)
       key="comment-1"
     >
       <Relay(CommentContainer)
@@ -37,10 +33,8 @@ exports[`renders correctly 1`] = `
           }
         }
       />
-    </withPropsOnChange(Flex)>
-    <withPropsOnChange(Flex)
-      direction="column"
-      itemGutter={true}
+    </withPropsOnChange(HorizontalGutter)>
+    <withPropsOnChange(HorizontalGutter)
       key="comment-2"
     >
       <Relay(CommentContainer)
@@ -57,32 +51,28 @@ exports[`renders correctly 1`] = `
           }
         }
       />
-    </withPropsOnChange(Flex)>
-  </withPropsOnChange(Flex)>
-</withPropsOnChange(Flex)>
+    </withPropsOnChange(HorizontalGutter)>
+  </withPropsOnChange(HorizontalGutter)>
+</withPropsOnChange(HorizontalGutter)>
 `;
 
 exports[`when there is more disables load more button 1`] = `
-<withPropsOnChange(Flex)
+<withPropsOnChange(HorizontalGutter)
   className="Stream-root"
-  direction="column"
-  itemGutter={true}
+  size="double"
 >
-  <withContext(createMutationContainer(withContext(createMutationContainer(withContext(withLocalStateContainer(UserBoxContainer)))))) />
-  <withContext(createMutationContainer(PostCommentFormContainer))
-    assetID="asset-id"
-    signedIn={false}
-  />
-  <withPropsOnChange(Flex)
+  <withPropsOnChange(HorizontalGutter)
+    size="half"
+  >
+    <withContext(createMutationContainer(withContext(createMutationContainer(withContext(createMutationContainer(withContext(withLocalStateContainer(Relay(UserBoxContainer))))))))) />
+    <PostCommentFormFake />
+  </withPropsOnChange(HorizontalGutter)>
+  <withPropsOnChange(HorizontalGutter)
     aria-live="polite"
-    direction="column"
     id="talk-comments-stream-log"
-    itemGutter={true}
     role="log"
   >
-    <withPropsOnChange(Flex)
-      direction="column"
-      itemGutter={true}
+    <withPropsOnChange(HorizontalGutter)
       key="comment-1"
     >
       <Relay(CommentContainer)
@@ -99,10 +89,8 @@ exports[`when there is more disables load more button 1`] = `
           }
         }
       />
-    </withPropsOnChange(Flex)>
-    <withPropsOnChange(Flex)
-      direction="column"
-      itemGutter={true}
+    </withPropsOnChange(HorizontalGutter)>
+    <withPropsOnChange(HorizontalGutter)
       key="comment-2"
     >
       <Relay(CommentContainer)
@@ -119,7 +107,7 @@ exports[`when there is more disables load more button 1`] = `
           }
         }
       />
-    </withPropsOnChange(Flex)>
+    </withPropsOnChange(HorizontalGutter)>
     <Localized
       id="comments-stream-loadMore"
     >
@@ -134,31 +122,27 @@ exports[`when there is more disables load more button 1`] = `
         Load More
       </withPropsOnChange(Button)>
     </Localized>
-  </withPropsOnChange(Flex)>
-</withPropsOnChange(Flex)>
+  </withPropsOnChange(HorizontalGutter)>
+</withPropsOnChange(HorizontalGutter)>
 `;
 
 exports[`when there is more renders a load more button 1`] = `
-<withPropsOnChange(Flex)
+<withPropsOnChange(HorizontalGutter)
   className="Stream-root"
-  direction="column"
-  itemGutter={true}
+  size="double"
 >
-  <withContext(createMutationContainer(withContext(createMutationContainer(withContext(withLocalStateContainer(UserBoxContainer)))))) />
-  <withContext(createMutationContainer(PostCommentFormContainer))
-    assetID="asset-id"
-    signedIn={false}
-  />
-  <withPropsOnChange(Flex)
+  <withPropsOnChange(HorizontalGutter)
+    size="half"
+  >
+    <withContext(createMutationContainer(withContext(createMutationContainer(withContext(createMutationContainer(withContext(withLocalStateContainer(Relay(UserBoxContainer))))))))) />
+    <PostCommentFormFake />
+  </withPropsOnChange(HorizontalGutter)>
+  <withPropsOnChange(HorizontalGutter)
     aria-live="polite"
-    direction="column"
     id="talk-comments-stream-log"
-    itemGutter={true}
     role="log"
   >
-    <withPropsOnChange(Flex)
-      direction="column"
-      itemGutter={true}
+    <withPropsOnChange(HorizontalGutter)
       key="comment-1"
     >
       <Relay(CommentContainer)
@@ -175,10 +159,8 @@ exports[`when there is more renders a load more button 1`] = `
           }
         }
       />
-    </withPropsOnChange(Flex)>
-    <withPropsOnChange(Flex)
-      direction="column"
-      itemGutter={true}
+    </withPropsOnChange(HorizontalGutter)>
+    <withPropsOnChange(HorizontalGutter)
       key="comment-2"
     >
       <Relay(CommentContainer)
@@ -195,7 +177,7 @@ exports[`when there is more renders a load more button 1`] = `
           }
         }
       />
-    </withPropsOnChange(Flex)>
+    </withPropsOnChange(HorizontalGutter)>
     <Localized
       id="comments-stream-loadMore"
     >
@@ -210,6 +192,6 @@ exports[`when there is more renders a load more button 1`] = `
         Load More
       </withPropsOnChange(Button)>
     </Localized>
-  </withPropsOnChange(Flex)>
-</withPropsOnChange(Flex)>
+  </withPropsOnChange(HorizontalGutter)>
+</withPropsOnChange(HorizontalGutter)>
 `;
diff --git a/src/core/client/stream/components/__snapshots__/UserBoxUnauthenticated.spec.tsx.snap b/src/core/client/stream/components/__snapshots__/UserBoxUnauthenticated.spec.tsx.snap
index 2021b7c31..492657d72 100644
--- a/src/core/client/stream/components/__snapshots__/UserBoxUnauthenticated.spec.tsx.snap
+++ b/src/core/client/stream/components/__snapshots__/UserBoxUnauthenticated.spec.tsx.snap
@@ -2,6 +2,7 @@
 
 exports[`renders correctly 1`] = `
 <withPropsOnChange(Flex)
+  alignItems="center"
   itemGutter={true}
 >
   <MatchMediaWithContext
@@ -12,14 +13,14 @@ exports[`renders correctly 1`] = `
     >
       <withPropsOnChange(Typography)
         className="UserBoxUnauthenticated-joinText"
-        component="span"
+        container="span"
         variant="bodyCopyBold"
       >
         Join the conversation
       </withPropsOnChange(Typography)>
     </Localized>
     <withPropsOnChange(Typography)
-      component="span"
+      container="span"
       variant="bodyCopyBold"
     >
       |
diff --git a/src/core/client/stream/containers/__snapshots__/UserBoxContainer.spec.tsx.snap b/src/core/client/stream/containers/__snapshots__/UserBoxContainer.spec.tsx.snap
index 80834ae74..3c650a5af 100644
--- a/src/core/client/stream/containers/__snapshots__/UserBoxContainer.spec.tsx.snap
+++ b/src/core/client/stream/containers/__snapshots__/UserBoxContainer.spec.tsx.snap
@@ -3,7 +3,7 @@
 exports[`renders correctly 1`] = `
 <React.Fragment>
   <Popup
-    features="menubar=0,resizable=0,width=350,height=720,top=200,left=500"
+    features="menubar=0,resizable=0,width=350,height=395,top=200,left=500"
     focus={false}
     href="/auth.html?view=SIGN_IN"
     onBlur={[Function]}
diff --git a/src/core/client/stream/local/__snapshots__/initLocalState.spec.ts.snap b/src/core/client/stream/local/__snapshots__/initLocalState.spec.ts.snap
index c8dda11c7..b95cc19ce 100644
--- a/src/core/client/stream/local/__snapshots__/initLocalState.spec.ts.snap
+++ b/src/core/client/stream/local/__snapshots__/initLocalState.spec.ts.snap
@@ -13,6 +13,7 @@ exports[`init local state 1`] = `
     \\"__id\\": \\"client:root.local\\",
     \\"__typename\\": \\"Local\\",
     \\"authToken\\": \\"\\",
+    \\"authRevision\\": 0,
     \\"network\\": {
       \\"__ref\\": \\"client:root.local.network\\"
     },
diff --git a/src/core/client/ui/components/Flex/Flex.spec.tsx b/src/core/client/ui/components/Flex/Flex.spec.tsx
index 5c68f0de0..eaa7cf0b6 100644
--- a/src/core/client/ui/components/Flex/Flex.spec.tsx
+++ b/src/core/client/ui/components/Flex/Flex.spec.tsx
@@ -55,7 +55,7 @@ it("renders with item gutter", () => {
   expect(renderer.toJSON()).toMatchSnapshot();
 });
 
-it("renders with halfe item gutter", () => {
+it("renders with half item gutter", () => {
   const props: PropTypesOf<typeof Flex> = {
     itemGutter: "half",
   };
diff --git a/src/core/client/ui/components/Flex/__snapshots__/Flex.spec.tsx.snap b/src/core/client/ui/components/Flex/__snapshots__/Flex.spec.tsx.snap
index d96f60ebd..b4b24209e 100644
--- a/src/core/client/ui/components/Flex/__snapshots__/Flex.spec.tsx.snap
+++ b/src/core/client/ui/components/Flex/__snapshots__/Flex.spec.tsx.snap
@@ -2,70 +2,60 @@
 
 exports[`renders correctly 1`] = `
 <div
-  className="Flex-root"
+  className="Flex-root Flex-flex Flex-justifyCenter Flex-alignCenter Flex-directionRow"
 >
-  <div
-    className="Flex-flex Flex-wrap Flex-justifyCenter Flex-alignCenter Flex-directionRow"
-  >
-    <div>
-      Hello World
-    </div>
+  <div>
+    Hello World
+  </div>
+</div>
+`;
+
+exports[`renders with half item gutter 1`] = `
+<div
+  className="Flex-root Flex-flex Flex-halfItemGutter"
+>
+  <div>
+    Hello World
   </div>
 </div>
 `;
 
 exports[`renders with halfe item gutter 1`] = `
 <div
-  className="Flex-root"
+  className="Flex-root Flex-flex Flex-halfItemGutter"
 >
-  <div
-    className="Flex-flex Flex-halfItemGutter Flex-wrap Flex-alignCenter"
-  >
-    <div>
-      Hello World
-    </div>
+  <div>
+    Hello World
   </div>
 </div>
 `;
 
 exports[`renders with item gutter 1`] = `
 <div
-  className="Flex-root"
+  className="Flex-root Flex-flex Flex-itemGutter"
 >
-  <div
-    className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignCenter"
-  >
-    <div>
-      Hello World
-    </div>
+  <div>
+    Hello World
   </div>
 </div>
 `;
 
 exports[`renders with wrap 1`] = `
 <div
-  className="Flex-root"
+  className="Flex-root Flex-flex Flex-wrap"
 >
-  <div
-    className="Flex-flex Flex-wrap Flex-alignCenter"
-  >
-    <div>
-      Hello World
-    </div>
+  <div>
+    Hello World
   </div>
 </div>
 `;
 
 exports[`renders with wrap reverse 1`] = `
 <div
-  className="Flex-root"
+  className="Flex-root Flex-flex Flex-wrapReverse"
 >
-  <div
-    className="Flex-flex Flex-wrapReverse Flex-alignCenter"
-  >
-    <div>
-      Hello World
-    </div>
+  <div>
+    Hello World
   </div>
 </div>
 `;
diff --git a/src/core/client/ui/components/FormField/__snapshots__/FormField.spec.tsx.snap b/src/core/client/ui/components/FormField/__snapshots__/FormField.spec.tsx.snap
index ddbd6c222..874adc015 100644
--- a/src/core/client/ui/components/FormField/__snapshots__/FormField.spec.tsx.snap
+++ b/src/core/client/ui/components/FormField/__snapshots__/FormField.spec.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`renders correctly 1`] = `
 <div
-  className="FormField-root FormField-itemGutter"
+  className="HorizontalGutter-root FormField-root HorizontalGutter-half"
 >
   Form Components should go here
 </div>
@@ -10,7 +10,7 @@ exports[`renders correctly 1`] = `
 
 exports[`works with multiple form components 1`] = `
 <div
-  className="FormField-root FormField-itemGutter"
+  className="HorizontalGutter-root FormField-root HorizontalGutter-half"
 >
   <label
     className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"

From 334c8933c95a9fa965868064b3c18da440d8f923 Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Mon, 27 Aug 2018 21:02:43 +0200
Subject: [PATCH 76/81] Update snapshots

---
 .../test/__snapshots__/loadMore.spec.tsx.snap | 622 ++++++++----------
 .../__snapshots__/permalinkView.spec.tsx.snap | 288 ++++----
 .../permalinkViewAssetNotFound.spec.tsx.snap  |  48 +-
 ...permalinkViewCommentNotFound.spec.tsx.snap | 238 +++----
 .../__snapshots__/renderReplies.spec.tsx.snap | 374 +++++------
 .../__snapshots__/renderStream.spec.tsx.snap  | 252 +++----
 .../showAllReplies.spec.tsx.snap              | 598 ++++++++---------
 src/core/client/stream/test/loadMore.spec.tsx |  10 +-
 .../client/stream/test/permalinkView.spec.tsx |  10 +-
 .../test/permalinkViewAssetNotFound.spec.tsx  |  10 +-
 .../permalinkViewCommentNotFound.spec.tsx     |  10 +-
 .../client/stream/test/renderReplies.spec.tsx |  10 +-
 .../client/stream/test/renderStream.spec.tsx  |  10 +-
 .../stream/test/showAllReplies.spec.tsx       |  10 +-
 14 files changed, 1121 insertions(+), 1369 deletions(-)

diff --git a/src/core/client/stream/test/__snapshots__/loadMore.spec.tsx.snap b/src/core/client/stream/test/__snapshots__/loadMore.spec.tsx.snap
index 29631dfac..4c5ee4a94 100644
--- a/src/core/client/stream/test/__snapshots__/loadMore.spec.tsx.snap
+++ b/src/core/client/stream/test/__snapshots__/loadMore.spec.tsx.snap
@@ -2,212 +2,170 @@
 
 exports[`loads more comments 1`] = `
 <div
-  className="Flex-root App-root"
+  className="Flex-root App-root Flex-flex Flex-justifyCenter"
 >
   <div
-    className="Flex-flex Flex-wrap Flex-justifyCenter Flex-alignCenter"
+    className="HorizontalGutter-root Stream-root HorizontalGutter-double"
   >
     <div
-      className="Flex-root Stream-root"
+      className="HorizontalGutter-root HorizontalGutter-half"
     >
       <div
-        className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
+        className="Flex-root Flex-flex Flex-itemGutter Flex-alignCenter"
+      >
+        <button
+          className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantUnderlined"
+          onBlur={[Function]}
+          onClick={[Function]}
+          onFocus={[Function]}
+          onMouseDown={[Function]}
+          onMouseOut={[Function]}
+          onMouseOver={[Function]}
+          onTouchEnd={[Function]}
+          type="button"
+        >
+          Sign in
+        </button>
+        <button
+          className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantOutlined"
+          onBlur={[Function]}
+          onClick={[Function]}
+          onFocus={[Function]}
+          onMouseDown={[Function]}
+          onMouseOut={[Function]}
+          onMouseOver={[Function]}
+          onTouchEnd={[Function]}
+          type="button"
+        >
+          Register
+        </button>
+      </div>
+      <div
+        className="HorizontalGutter-root PostCommentFormFake-root HorizontalGutter-full"
+      >
+        <textarea
+          className="PostCommentFormFake-textarea"
+          disabled={true}
+          placeholder="Post a comment"
+        />
+        <button
+          className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled Button-fullWidth Button-disabled"
+          disabled={true}
+          onBlur={[Function]}
+          onFocus={[Function]}
+          onMouseDown={[Function]}
+          onMouseOut={[Function]}
+          onMouseOver={[Function]}
+          onTouchEnd={[Function]}
+          type="submit"
+        >
+          Sign in and join the conversation
+        </button>
+      </div>
+    </div>
+    <div
+      aria-live="polite"
+      className="HorizontalGutter-root HorizontalGutter-full"
+      id="talk-comments-stream-log"
+      role="log"
+    >
+      <div
+        className="HorizontalGutter-root HorizontalGutter-full"
       >
         <div
-          className="Flex-root"
+          className="Comment-root"
+          role="article"
         >
           <div
-            className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignCenter"
+            className="Flex-root TopBar-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
           >
-            <button
-              className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantUnderlined"
-              onBlur={[Function]}
-              onClick={[Function]}
-              onFocus={[Function]}
-              onMouseDown={[Function]}
-              onMouseOut={[Function]}
-              onMouseOver={[Function]}
-              onTouchEnd={[Function]}
-              type="button"
+            <span
+              className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
             >
-              Sign in
-            </button>
-            <button
-              className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantOutlined"
-              onBlur={[Function]}
-              onClick={[Function]}
-              onFocus={[Function]}
-              onMouseDown={[Function]}
-              onMouseOut={[Function]}
-              onMouseOver={[Function]}
-              onTouchEnd={[Function]}
-              type="button"
+              Markus
+            </span>
+            <time
+              className="Timestamp-root RelativeTime-root"
+              dateTime="2018-07-06T18:24:00.000Z"
+              title="2018-07-06T18:24:00.000Z"
             >
-              Register
-            </button>
+              2018-07-06T18:24:00.000Z
+            </time>
           </div>
+          <p
+            className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
+          >
+            Joining Too
+          </p>
+          <div
+            className="Comment-footer"
+          />
         </div>
-        <form
-          autoComplete="off"
-          className="PostCommentForm-root"
-          onSubmit={[Function]}
-        >
-          <div>
-            <textarea
-              className="PostCommentForm-textarea"
-              name="body"
-              onChange={[Function]}
-              placeholder="Post a comment"
-              value=""
-            />
-          </div>
-          <button
-            className="BaseButton-root Button-root Button-sizeLarge Button-colorPrimary Button-variantFilled Button-fullWidth Button-disabled"
-            disabled={true}
-            onBlur={[Function]}
-            onFocus={[Function]}
-            onMouseDown={[Function]}
-            onMouseOut={[Function]}
-            onMouseOver={[Function]}
-            onTouchEnd={[Function]}
-            type="button"
-          >
-            Sign in and join the conversation
-          </button>
-        </form>
+      </div>
+      <div
+        className="HorizontalGutter-root HorizontalGutter-full"
+      >
         <div
-          aria-live="polite"
-          className="Flex-root"
-          id="talk-comments-stream-log"
-          role="log"
+          className="Comment-root"
+          role="article"
         >
           <div
-            className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
+            className="Flex-root TopBar-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
           >
-            <div
-              className="Flex-root"
+            <span
+              className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
             >
-              <div
-                className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
-              >
-                <div
-                  className="Comment-root"
-                  role="article"
-                >
-                  <div
-                    className="Flex-root TopBar-root"
-                  >
-                    <div
-                      className="Flex-flex Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
-                    >
-                      <span
-                        className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
-                      >
-                        Markus
-                      </span>
-                      <time
-                        className="Timestamp-root RelativeTime-root"
-                        dateTime="2018-07-06T18:24:00.000Z"
-                        title="2018-07-06T18:24:00.000Z"
-                      >
-                        2018-07-06T18:24:00.000Z
-                      </time>
-                    </div>
-                  </div>
-                  <p
-                    className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
-                  >
-                    Joining Too
-                  </p>
-                  <div
-                    className="Comment-footer"
-                  />
-                </div>
-              </div>
-            </div>
-            <div
-              className="Flex-root"
+              Lukas
+            </span>
+            <time
+              className="Timestamp-root RelativeTime-root"
+              dateTime="2018-07-06T18:20:00.000Z"
+              title="2018-07-06T18:20:00.000Z"
             >
-              <div
-                className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
-              >
-                <div
-                  className="Comment-root"
-                  role="article"
-                >
-                  <div
-                    className="Flex-root TopBar-root"
-                  >
-                    <div
-                      className="Flex-flex Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
-                    >
-                      <span
-                        className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
-                      >
-                        Lukas
-                      </span>
-                      <time
-                        className="Timestamp-root RelativeTime-root"
-                        dateTime="2018-07-06T18:20:00.000Z"
-                        title="2018-07-06T18:20:00.000Z"
-                      >
-                        2018-07-06T18:20:00.000Z
-                      </time>
-                    </div>
-                  </div>
-                  <p
-                    className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
-                  >
-                    What's up?
-                  </p>
-                  <div
-                    className="Comment-footer"
-                  />
-                </div>
-              </div>
-            </div>
-            <div
-              className="Flex-root"
-            >
-              <div
-                className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
-              >
-                <div
-                  className="Comment-root"
-                  role="article"
-                >
-                  <div
-                    className="Flex-root TopBar-root"
-                  >
-                    <div
-                      className="Flex-flex Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
-                    >
-                      <span
-                        className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
-                      >
-                        Isabelle
-                      </span>
-                      <time
-                        className="Timestamp-root RelativeTime-root"
-                        dateTime="2018-07-06T18:14:00.000Z"
-                        title="2018-07-06T18:14:00.000Z"
-                      >
-                        2018-07-06T18:14:00.000Z
-                      </time>
-                    </div>
-                  </div>
-                  <p
-                    className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
-                  >
-                    Hey!
-                  </p>
-                  <div
-                    className="Comment-footer"
-                  />
-                </div>
-              </div>
-            </div>
+              2018-07-06T18:20:00.000Z
+            </time>
           </div>
+          <p
+            className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
+          >
+            What's up?
+          </p>
+          <div
+            className="Comment-footer"
+          />
+        </div>
+      </div>
+      <div
+        className="HorizontalGutter-root HorizontalGutter-full"
+      >
+        <div
+          className="Comment-root"
+          role="article"
+        >
+          <div
+            className="Flex-root TopBar-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+          >
+            <span
+              className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+            >
+              Isabelle
+            </span>
+            <time
+              className="Timestamp-root RelativeTime-root"
+              dateTime="2018-07-06T18:14:00.000Z"
+              title="2018-07-06T18:14:00.000Z"
+            >
+              2018-07-06T18:14:00.000Z
+            </time>
+          </div>
+          <p
+            className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
+          >
+            Hey!
+          </p>
+          <div
+            className="Comment-footer"
+          />
         </div>
       </div>
     </div>
@@ -217,189 +175,155 @@ exports[`loads more comments 1`] = `
 
 exports[`renders comment stream 1`] = `
 <div
-  className="Flex-root App-root"
+  className="Flex-root App-root Flex-flex Flex-justifyCenter"
 >
   <div
-    className="Flex-flex Flex-wrap Flex-justifyCenter Flex-alignCenter"
+    className="HorizontalGutter-root Stream-root HorizontalGutter-double"
   >
     <div
-      className="Flex-root Stream-root"
+      className="HorizontalGutter-root HorizontalGutter-half"
     >
       <div
-        className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
+        className="Flex-root Flex-flex Flex-itemGutter Flex-alignCenter"
+      >
+        <button
+          className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantUnderlined"
+          onBlur={[Function]}
+          onClick={[Function]}
+          onFocus={[Function]}
+          onMouseDown={[Function]}
+          onMouseOut={[Function]}
+          onMouseOver={[Function]}
+          onTouchEnd={[Function]}
+          type="button"
+        >
+          Sign in
+        </button>
+        <button
+          className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantOutlined"
+          onBlur={[Function]}
+          onClick={[Function]}
+          onFocus={[Function]}
+          onMouseDown={[Function]}
+          onMouseOut={[Function]}
+          onMouseOver={[Function]}
+          onTouchEnd={[Function]}
+          type="button"
+        >
+          Register
+        </button>
+      </div>
+      <div
+        className="HorizontalGutter-root PostCommentFormFake-root HorizontalGutter-full"
+      >
+        <textarea
+          className="PostCommentFormFake-textarea"
+          disabled={true}
+          placeholder="Post a comment"
+        />
+        <button
+          className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled Button-fullWidth Button-disabled"
+          disabled={true}
+          onBlur={[Function]}
+          onFocus={[Function]}
+          onMouseDown={[Function]}
+          onMouseOut={[Function]}
+          onMouseOver={[Function]}
+          onTouchEnd={[Function]}
+          type="submit"
+        >
+          Sign in and join the conversation
+        </button>
+      </div>
+    </div>
+    <div
+      aria-live="polite"
+      className="HorizontalGutter-root HorizontalGutter-full"
+      id="talk-comments-stream-log"
+      role="log"
+    >
+      <div
+        className="HorizontalGutter-root HorizontalGutter-full"
       >
         <div
-          className="Flex-root"
+          className="Comment-root"
+          role="article"
         >
           <div
-            className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignCenter"
+            className="Flex-root TopBar-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
           >
-            <button
-              className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantUnderlined"
-              onBlur={[Function]}
-              onClick={[Function]}
-              onFocus={[Function]}
-              onMouseDown={[Function]}
-              onMouseOut={[Function]}
-              onMouseOver={[Function]}
-              onTouchEnd={[Function]}
-              type="button"
+            <span
+              className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
             >
-              Sign in
-            </button>
-            <button
-              className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantOutlined"
-              onBlur={[Function]}
-              onClick={[Function]}
-              onFocus={[Function]}
-              onMouseDown={[Function]}
-              onMouseOut={[Function]}
-              onMouseOver={[Function]}
-              onTouchEnd={[Function]}
-              type="button"
+              Markus
+            </span>
+            <time
+              className="Timestamp-root RelativeTime-root"
+              dateTime="2018-07-06T18:24:00.000Z"
+              title="2018-07-06T18:24:00.000Z"
             >
-              Register
-            </button>
+              2018-07-06T18:24:00.000Z
+            </time>
           </div>
-        </div>
-        <form
-          autoComplete="off"
-          className="PostCommentForm-root"
-          onSubmit={[Function]}
-        >
-          <div>
-            <textarea
-              className="PostCommentForm-textarea"
-              name="body"
-              onChange={[Function]}
-              placeholder="Post a comment"
-              value=""
-            />
-          </div>
-          <button
-            className="BaseButton-root Button-root Button-sizeLarge Button-colorPrimary Button-variantFilled Button-fullWidth Button-disabled"
-            disabled={true}
-            onBlur={[Function]}
-            onFocus={[Function]}
-            onMouseDown={[Function]}
-            onMouseOut={[Function]}
-            onMouseOver={[Function]}
-            onTouchEnd={[Function]}
-            type="button"
+          <p
+            className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
           >
-            Sign in and join the conversation
-          </button>
-        </form>
-        <div
-          aria-live="polite"
-          className="Flex-root"
-          id="talk-comments-stream-log"
-          role="log"
-        >
+            Joining Too
+          </p>
           <div
-            className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
-          >
-            <div
-              className="Flex-root"
-            >
-              <div
-                className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
-              >
-                <div
-                  className="Comment-root"
-                  role="article"
-                >
-                  <div
-                    className="Flex-root TopBar-root"
-                  >
-                    <div
-                      className="Flex-flex Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
-                    >
-                      <span
-                        className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
-                      >
-                        Markus
-                      </span>
-                      <time
-                        className="Timestamp-root RelativeTime-root"
-                        dateTime="2018-07-06T18:24:00.000Z"
-                        title="2018-07-06T18:24:00.000Z"
-                      >
-                        2018-07-06T18:24:00.000Z
-                      </time>
-                    </div>
-                  </div>
-                  <p
-                    className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
-                  >
-                    Joining Too
-                  </p>
-                  <div
-                    className="Comment-footer"
-                  />
-                </div>
-              </div>
-            </div>
-            <div
-              className="Flex-root"
-            >
-              <div
-                className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
-              >
-                <div
-                  className="Comment-root"
-                  role="article"
-                >
-                  <div
-                    className="Flex-root TopBar-root"
-                  >
-                    <div
-                      className="Flex-flex Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
-                    >
-                      <span
-                        className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
-                      >
-                        Lukas
-                      </span>
-                      <time
-                        className="Timestamp-root RelativeTime-root"
-                        dateTime="2018-07-06T18:20:00.000Z"
-                        title="2018-07-06T18:20:00.000Z"
-                      >
-                        2018-07-06T18:20:00.000Z
-                      </time>
-                    </div>
-                  </div>
-                  <p
-                    className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
-                  >
-                    What's up?
-                  </p>
-                  <div
-                    className="Comment-footer"
-                  />
-                </div>
-              </div>
-            </div>
-            <button
-              aria-controls="talk-comments-stream-log"
-              className="BaseButton-root Button-root Button-sizeRegular Button-colorRegular Button-variantOutlined Button-fullWidth"
-              disabled={false}
-              id="talk-comments-stream-loadMore"
-              onBlur={[Function]}
-              onClick={[Function]}
-              onFocus={[Function]}
-              onMouseDown={[Function]}
-              onMouseOut={[Function]}
-              onMouseOver={[Function]}
-              onTouchEnd={[Function]}
-              type="button"
-            >
-              Load More
-            </button>
-          </div>
+            className="Comment-footer"
+          />
         </div>
       </div>
+      <div
+        className="HorizontalGutter-root HorizontalGutter-full"
+      >
+        <div
+          className="Comment-root"
+          role="article"
+        >
+          <div
+            className="Flex-root TopBar-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+          >
+            <span
+              className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+            >
+              Lukas
+            </span>
+            <time
+              className="Timestamp-root RelativeTime-root"
+              dateTime="2018-07-06T18:20:00.000Z"
+              title="2018-07-06T18:20:00.000Z"
+            >
+              2018-07-06T18:20:00.000Z
+            </time>
+          </div>
+          <p
+            className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
+          >
+            What's up?
+          </p>
+          <div
+            className="Comment-footer"
+          />
+        </div>
+      </div>
+      <button
+        aria-controls="talk-comments-stream-log"
+        className="BaseButton-root Button-root Button-sizeRegular Button-colorRegular Button-variantOutlined Button-fullWidth"
+        disabled={false}
+        id="talk-comments-stream-loadMore"
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onMouseDown={[Function]}
+        onMouseOut={[Function]}
+        onMouseOver={[Function]}
+        onTouchEnd={[Function]}
+        type="button"
+      >
+        Load More
+      </button>
     </div>
   </div>
 </div>
diff --git a/src/core/client/stream/test/__snapshots__/permalinkView.spec.tsx.snap b/src/core/client/stream/test/__snapshots__/permalinkView.spec.tsx.snap
index 9a449985f..524244383 100644
--- a/src/core/client/stream/test/__snapshots__/permalinkView.spec.tsx.snap
+++ b/src/core/client/stream/test/__snapshots__/permalinkView.spec.tsx.snap
@@ -2,71 +2,55 @@
 
 exports[`renders permalink view 1`] = `
 <div
-  className="Flex-root App-root"
+  className="Flex-root App-root Flex-flex Flex-justifyCenter"
 >
   <div
-    className="Flex-flex Flex-wrap Flex-justifyCenter Flex-alignCenter"
+    className="PermalinkView-root"
   >
-    <div
-      className="PermalinkView-root"
+    <a
+      className="BaseButton-root Button-root PermalinkView-button Button-sizeRegular Button-colorPrimary Button-variantOutlined Button-fullWidth"
+      href="http://localhost/"
+      id="talk-comments-permalinkView-showAllComments"
+      onBlur={[Function]}
+      onClick={[Function]}
+      onFocus={[Function]}
+      onMouseDown={[Function]}
+      onMouseOut={[Function]}
+      onMouseOver={[Function]}
+      onTouchEnd={[Function]}
+      target="_parent"
+      type="button"
+    >
+      Show all Comments
+    </a>
+    <div
+      className="Comment-root"
+      role="article"
     >
-      <a
-        className="BaseButton-root Button-root PermalinkView-button Button-sizeRegular Button-colorPrimary Button-variantOutlined Button-fullWidth"
-        href="http://localhost/"
-        id="talk-comments-permalinkView-showAllComments"
-        onBlur={[Function]}
-        onClick={[Function]}
-        onFocus={[Function]}
-        onMouseDown={[Function]}
-        onMouseOut={[Function]}
-        onMouseOver={[Function]}
-        onTouchEnd={[Function]}
-        target="_parent"
-        type="button"
-      >
-        Show all Comments
-      </a>
       <div
-        className="Flex-root"
+        className="Flex-root TopBar-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
       >
-        <div
-          className="Flex-flex Flex-wrap Flex-alignFlexStart Flex-directionColumn"
+        <span
+          className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
         >
-          <div
-            className="Comment-root"
-            role="article"
-          >
-            <div
-              className="Flex-root TopBar-root"
-            >
-              <div
-                className="Flex-flex Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
-              >
-                <span
-                  className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
-                >
-                  Markus
-                </span>
-                <time
-                  className="Timestamp-root RelativeTime-root"
-                  dateTime="2018-07-06T18:24:00.000Z"
-                  title="2018-07-06T18:24:00.000Z"
-                >
-                  2018-07-06T18:24:00.000Z
-                </time>
-              </div>
-            </div>
-            <p
-              className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
-            >
-              Joining Too
-            </p>
-            <div
-              className="Comment-footer"
-            />
-          </div>
-        </div>
+          Markus
+        </span>
+        <time
+          className="Timestamp-root RelativeTime-root"
+          dateTime="2018-07-06T18:24:00.000Z"
+          title="2018-07-06T18:24:00.000Z"
+        >
+          2018-07-06T18:24:00.000Z
+        </time>
       </div>
+      <p
+        className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
+      >
+        Joining Too
+      </p>
+      <div
+        className="Comment-footer"
+      />
     </div>
   </div>
 </div>
@@ -74,130 +58,104 @@ exports[`renders permalink view 1`] = `
 
 exports[`show all comments 1`] = `
 <div
-  className="Flex-root App-root"
+  className="Flex-root App-root Flex-flex Flex-justifyCenter"
 >
   <div
-    className="Flex-flex Flex-wrap Flex-justifyCenter Flex-alignCenter"
+    className="HorizontalGutter-root Stream-root HorizontalGutter-double"
   >
     <div
-      className="Flex-root Stream-root"
+      className="HorizontalGutter-root HorizontalGutter-half"
     >
       <div
-        className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
+        className="Flex-root Flex-flex Flex-itemGutter Flex-alignCenter"
+      >
+        <button
+          className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantUnderlined"
+          onBlur={[Function]}
+          onClick={[Function]}
+          onFocus={[Function]}
+          onMouseDown={[Function]}
+          onMouseOut={[Function]}
+          onMouseOver={[Function]}
+          onTouchEnd={[Function]}
+          type="button"
+        >
+          Sign in
+        </button>
+        <button
+          className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantOutlined"
+          onBlur={[Function]}
+          onClick={[Function]}
+          onFocus={[Function]}
+          onMouseDown={[Function]}
+          onMouseOut={[Function]}
+          onMouseOver={[Function]}
+          onTouchEnd={[Function]}
+          type="button"
+        >
+          Register
+        </button>
+      </div>
+      <div
+        className="HorizontalGutter-root PostCommentFormFake-root HorizontalGutter-full"
+      >
+        <textarea
+          className="PostCommentFormFake-textarea"
+          disabled={true}
+          placeholder="Post a comment"
+        />
+        <button
+          className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled Button-fullWidth Button-disabled"
+          disabled={true}
+          onBlur={[Function]}
+          onFocus={[Function]}
+          onMouseDown={[Function]}
+          onMouseOut={[Function]}
+          onMouseOver={[Function]}
+          onTouchEnd={[Function]}
+          type="submit"
+        >
+          Sign in and join the conversation
+        </button>
+      </div>
+    </div>
+    <div
+      aria-live="polite"
+      className="HorizontalGutter-root HorizontalGutter-full"
+      id="talk-comments-stream-log"
+      role="log"
+    >
+      <div
+        className="HorizontalGutter-root HorizontalGutter-full"
       >
         <div
-          className="Flex-root"
+          className="Comment-root"
+          role="article"
         >
           <div
-            className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignCenter"
+            className="Flex-root TopBar-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
           >
-            <button
-              className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantUnderlined"
-              onBlur={[Function]}
-              onClick={[Function]}
-              onFocus={[Function]}
-              onMouseDown={[Function]}
-              onMouseOut={[Function]}
-              onMouseOver={[Function]}
-              onTouchEnd={[Function]}
-              type="button"
+            <span
+              className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
             >
-              Sign in
-            </button>
-            <button
-              className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantOutlined"
-              onBlur={[Function]}
-              onClick={[Function]}
-              onFocus={[Function]}
-              onMouseDown={[Function]}
-              onMouseOut={[Function]}
-              onMouseOver={[Function]}
-              onTouchEnd={[Function]}
-              type="button"
+              Markus
+            </span>
+            <time
+              className="Timestamp-root RelativeTime-root"
+              dateTime="2018-07-06T18:24:00.000Z"
+              title="2018-07-06T18:24:00.000Z"
             >
-              Register
-            </button>
+              2018-07-06T18:24:00.000Z
+            </time>
           </div>
-        </div>
-        <form
-          autoComplete="off"
-          className="PostCommentForm-root"
-          onSubmit={[Function]}
-        >
-          <div>
-            <textarea
-              className="PostCommentForm-textarea"
-              name="body"
-              onChange={[Function]}
-              placeholder="Post a comment"
-              value=""
-            />
-          </div>
-          <button
-            className="BaseButton-root Button-root Button-sizeLarge Button-colorPrimary Button-variantFilled Button-fullWidth Button-disabled"
-            disabled={true}
-            onBlur={[Function]}
-            onFocus={[Function]}
-            onMouseDown={[Function]}
-            onMouseOut={[Function]}
-            onMouseOver={[Function]}
-            onTouchEnd={[Function]}
-            type="button"
+          <p
+            className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
           >
-            Sign in and join the conversation
-          </button>
-        </form>
-        <div
-          aria-live="polite"
-          className="Flex-root"
-          id="talk-comments-stream-log"
-          role="log"
-        >
+            Joining Too
+          </p>
           <div
-            className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
-          >
-            <div
-              className="Flex-root"
-            >
-              <div
-                className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
-              >
-                <div
-                  className="Comment-root"
-                  role="article"
-                >
-                  <div
-                    className="Flex-root TopBar-root"
-                  >
-                    <div
-                      className="Flex-flex Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
-                    >
-                      <span
-                        className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
-                      >
-                        Markus
-                      </span>
-                      <time
-                        className="Timestamp-root RelativeTime-root"
-                        dateTime="2018-07-06T18:24:00.000Z"
-                        title="2018-07-06T18:24:00.000Z"
-                      >
-                        2018-07-06T18:24:00.000Z
-                      </time>
-                    </div>
-                  </div>
-                  <p
-                    className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
-                  >
-                    Joining Too
-                  </p>
-                  <div
-                    className="Comment-footer"
-                  />
-                </div>
-              </div>
-            </div>
-          </div>
+            className="Comment-footer"
+          />
         </div>
       </div>
     </div>
diff --git a/src/core/client/stream/test/__snapshots__/permalinkViewAssetNotFound.spec.tsx.snap b/src/core/client/stream/test/__snapshots__/permalinkViewAssetNotFound.spec.tsx.snap
index 16f5c0b99..d3485ab1c 100644
--- a/src/core/client/stream/test/__snapshots__/permalinkViewAssetNotFound.spec.tsx.snap
+++ b/src/core/client/stream/test/__snapshots__/permalinkViewAssetNotFound.spec.tsx.snap
@@ -2,36 +2,32 @@
 
 exports[`renders permalink view with unknown asset 1`] = `
 <div
-  className="Flex-root App-root"
+  className="Flex-root App-root Flex-flex Flex-justifyCenter"
 >
   <div
-    className="Flex-flex Flex-wrap Flex-justifyCenter Flex-alignCenter"
+    className="PermalinkView-root"
   >
-    <div
-      className="PermalinkView-root"
+    <a
+      className="BaseButton-root Button-root PermalinkView-button Button-sizeRegular Button-colorPrimary Button-variantOutlined Button-fullWidth"
+      href="http://localhost/"
+      id="talk-comments-permalinkView-showAllComments"
+      onBlur={[Function]}
+      onClick={[Function]}
+      onFocus={[Function]}
+      onMouseDown={[Function]}
+      onMouseOut={[Function]}
+      onMouseOver={[Function]}
+      onTouchEnd={[Function]}
+      target="_parent"
+      type="button"
     >
-      <a
-        className="BaseButton-root Button-root PermalinkView-button Button-sizeRegular Button-colorPrimary Button-variantOutlined Button-fullWidth"
-        href="http://localhost/"
-        id="talk-comments-permalinkView-showAllComments"
-        onBlur={[Function]}
-        onClick={[Function]}
-        onFocus={[Function]}
-        onMouseDown={[Function]}
-        onMouseOut={[Function]}
-        onMouseOver={[Function]}
-        onTouchEnd={[Function]}
-        target="_parent"
-        type="button"
-      >
-        Show all Comments
-      </a>
-      <p
-        className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
-      >
-        Comment not found
-      </p>
-    </div>
+      Show all Comments
+    </a>
+    <p
+      className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
+    >
+      Comment not found
+    </p>
   </div>
 </div>
 `;
diff --git a/src/core/client/stream/test/__snapshots__/permalinkViewCommentNotFound.spec.tsx.snap b/src/core/client/stream/test/__snapshots__/permalinkViewCommentNotFound.spec.tsx.snap
index b6f816dbc..b211d8810 100644
--- a/src/core/client/stream/test/__snapshots__/permalinkViewCommentNotFound.spec.tsx.snap
+++ b/src/core/client/stream/test/__snapshots__/permalinkViewCommentNotFound.spec.tsx.snap
@@ -2,166 +2,136 @@
 
 exports[`renders permalink view with unknown comment 1`] = `
 <div
-  className="Flex-root App-root"
+  className="Flex-root App-root Flex-flex Flex-justifyCenter"
 >
   <div
-    className="Flex-flex Flex-wrap Flex-justifyCenter Flex-alignCenter"
+    className="PermalinkView-root"
   >
-    <div
-      className="PermalinkView-root"
+    <a
+      className="BaseButton-root Button-root PermalinkView-button Button-sizeRegular Button-colorPrimary Button-variantOutlined Button-fullWidth"
+      href="http://localhost/"
+      id="talk-comments-permalinkView-showAllComments"
+      onBlur={[Function]}
+      onClick={[Function]}
+      onFocus={[Function]}
+      onMouseDown={[Function]}
+      onMouseOut={[Function]}
+      onMouseOver={[Function]}
+      onTouchEnd={[Function]}
+      target="_parent"
+      type="button"
     >
-      <a
-        className="BaseButton-root Button-root PermalinkView-button Button-sizeRegular Button-colorPrimary Button-variantOutlined Button-fullWidth"
-        href="http://localhost/"
-        id="talk-comments-permalinkView-showAllComments"
-        onBlur={[Function]}
-        onClick={[Function]}
-        onFocus={[Function]}
-        onMouseDown={[Function]}
-        onMouseOut={[Function]}
-        onMouseOver={[Function]}
-        onTouchEnd={[Function]}
-        target="_parent"
-        type="button"
-      >
-        Show all Comments
-      </a>
-      <p
-        className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
-      >
-        Comment not found
-      </p>
-    </div>
+      Show all Comments
+    </a>
+    <p
+      className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
+    >
+      Comment not found
+    </p>
   </div>
 </div>
 `;
 
 exports[`show all comments 1`] = `
 <div
-  className="Flex-root App-root"
+  className="Flex-root App-root Flex-flex Flex-justifyCenter"
 >
   <div
-    className="Flex-flex Flex-wrap Flex-justifyCenter Flex-alignCenter"
+    className="HorizontalGutter-root Stream-root HorizontalGutter-double"
   >
     <div
-      className="Flex-root Stream-root"
+      className="HorizontalGutter-root HorizontalGutter-half"
     >
       <div
-        className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
+        className="Flex-root Flex-flex Flex-itemGutter Flex-alignCenter"
+      >
+        <button
+          className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantUnderlined"
+          onBlur={[Function]}
+          onClick={[Function]}
+          onFocus={[Function]}
+          onMouseDown={[Function]}
+          onMouseOut={[Function]}
+          onMouseOver={[Function]}
+          onTouchEnd={[Function]}
+          type="button"
+        >
+          Sign in
+        </button>
+        <button
+          className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantOutlined"
+          onBlur={[Function]}
+          onClick={[Function]}
+          onFocus={[Function]}
+          onMouseDown={[Function]}
+          onMouseOut={[Function]}
+          onMouseOver={[Function]}
+          onTouchEnd={[Function]}
+          type="button"
+        >
+          Register
+        </button>
+      </div>
+      <div
+        className="HorizontalGutter-root PostCommentFormFake-root HorizontalGutter-full"
+      >
+        <textarea
+          className="PostCommentFormFake-textarea"
+          disabled={true}
+          placeholder="Post a comment"
+        />
+        <button
+          className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled Button-fullWidth Button-disabled"
+          disabled={true}
+          onBlur={[Function]}
+          onFocus={[Function]}
+          onMouseDown={[Function]}
+          onMouseOut={[Function]}
+          onMouseOver={[Function]}
+          onTouchEnd={[Function]}
+          type="submit"
+        >
+          Sign in and join the conversation
+        </button>
+      </div>
+    </div>
+    <div
+      aria-live="polite"
+      className="HorizontalGutter-root HorizontalGutter-full"
+      id="talk-comments-stream-log"
+      role="log"
+    >
+      <div
+        className="HorizontalGutter-root HorizontalGutter-full"
       >
         <div
-          className="Flex-root"
+          className="Comment-root"
+          role="article"
         >
           <div
-            className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignCenter"
+            className="Flex-root TopBar-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
           >
-            <button
-              className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantUnderlined"
-              onBlur={[Function]}
-              onClick={[Function]}
-              onFocus={[Function]}
-              onMouseDown={[Function]}
-              onMouseOut={[Function]}
-              onMouseOver={[Function]}
-              onTouchEnd={[Function]}
-              type="button"
+            <span
+              className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
             >
-              Sign in
-            </button>
-            <button
-              className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantOutlined"
-              onBlur={[Function]}
-              onClick={[Function]}
-              onFocus={[Function]}
-              onMouseDown={[Function]}
-              onMouseOut={[Function]}
-              onMouseOver={[Function]}
-              onTouchEnd={[Function]}
-              type="button"
+              Markus
+            </span>
+            <time
+              className="Timestamp-root RelativeTime-root"
+              dateTime="2018-07-06T18:24:00.000Z"
+              title="2018-07-06T18:24:00.000Z"
             >
-              Register
-            </button>
+              2018-07-06T18:24:00.000Z
+            </time>
           </div>
-        </div>
-        <form
-          autoComplete="off"
-          className="PostCommentForm-root"
-          onSubmit={[Function]}
-        >
-          <div>
-            <textarea
-              className="PostCommentForm-textarea"
-              name="body"
-              onChange={[Function]}
-              placeholder="Post a comment"
-              value=""
-            />
-          </div>
-          <button
-            className="BaseButton-root Button-root Button-sizeLarge Button-colorPrimary Button-variantFilled Button-fullWidth Button-disabled"
-            disabled={true}
-            onBlur={[Function]}
-            onFocus={[Function]}
-            onMouseDown={[Function]}
-            onMouseOut={[Function]}
-            onMouseOver={[Function]}
-            onTouchEnd={[Function]}
-            type="button"
+          <p
+            className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
           >
-            Sign in and join the conversation
-          </button>
-        </form>
-        <div
-          aria-live="polite"
-          className="Flex-root"
-          id="talk-comments-stream-log"
-          role="log"
-        >
+            Joining Too
+          </p>
           <div
-            className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
-          >
-            <div
-              className="Flex-root"
-            >
-              <div
-                className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
-              >
-                <div
-                  className="Comment-root"
-                  role="article"
-                >
-                  <div
-                    className="Flex-root TopBar-root"
-                  >
-                    <div
-                      className="Flex-flex Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
-                    >
-                      <span
-                        className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
-                      >
-                        Markus
-                      </span>
-                      <time
-                        className="Timestamp-root RelativeTime-root"
-                        dateTime="2018-07-06T18:24:00.000Z"
-                        title="2018-07-06T18:24:00.000Z"
-                      >
-                        2018-07-06T18:24:00.000Z
-                      </time>
-                    </div>
-                  </div>
-                  <p
-                    className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
-                  >
-                    Joining Too
-                  </p>
-                  <div
-                    className="Comment-footer"
-                  />
-                </div>
-              </div>
-            </div>
-          </div>
+            className="Comment-footer"
+          />
         </div>
       </div>
     </div>
diff --git a/src/core/client/stream/test/__snapshots__/renderReplies.spec.tsx.snap b/src/core/client/stream/test/__snapshots__/renderReplies.spec.tsx.snap
index 6ff0be849..a55ba40a0 100644
--- a/src/core/client/stream/test/__snapshots__/renderReplies.spec.tsx.snap
+++ b/src/core/client/stream/test/__snapshots__/renderReplies.spec.tsx.snap
@@ -2,249 +2,203 @@
 
 exports[`renders comment stream 1`] = `
 <div
-  className="Flex-root App-root"
+  className="Flex-root App-root Flex-flex Flex-justifyCenter"
 >
   <div
-    className="Flex-flex Flex-wrap Flex-justifyCenter Flex-alignCenter"
+    className="HorizontalGutter-root Stream-root HorizontalGutter-double"
   >
     <div
-      className="Flex-root Stream-root"
+      className="HorizontalGutter-root HorizontalGutter-half"
     >
       <div
-        className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
+        className="Flex-root Flex-flex Flex-itemGutter Flex-alignCenter"
+      >
+        <button
+          className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantUnderlined"
+          onBlur={[Function]}
+          onClick={[Function]}
+          onFocus={[Function]}
+          onMouseDown={[Function]}
+          onMouseOut={[Function]}
+          onMouseOver={[Function]}
+          onTouchEnd={[Function]}
+          type="button"
+        >
+          Sign in
+        </button>
+        <button
+          className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantOutlined"
+          onBlur={[Function]}
+          onClick={[Function]}
+          onFocus={[Function]}
+          onMouseDown={[Function]}
+          onMouseOut={[Function]}
+          onMouseOver={[Function]}
+          onTouchEnd={[Function]}
+          type="button"
+        >
+          Register
+        </button>
+      </div>
+      <div
+        className="HorizontalGutter-root PostCommentFormFake-root HorizontalGutter-full"
+      >
+        <textarea
+          className="PostCommentFormFake-textarea"
+          disabled={true}
+          placeholder="Post a comment"
+        />
+        <button
+          className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled Button-fullWidth Button-disabled"
+          disabled={true}
+          onBlur={[Function]}
+          onFocus={[Function]}
+          onMouseDown={[Function]}
+          onMouseOut={[Function]}
+          onMouseOver={[Function]}
+          onTouchEnd={[Function]}
+          type="submit"
+        >
+          Sign in and join the conversation
+        </button>
+      </div>
+    </div>
+    <div
+      aria-live="polite"
+      className="HorizontalGutter-root HorizontalGutter-full"
+      id="talk-comments-stream-log"
+      role="log"
+    >
+      <div
+        className="HorizontalGutter-root HorizontalGutter-full"
       >
         <div
-          className="Flex-root"
+          className="Comment-root"
+          role="article"
         >
           <div
-            className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignCenter"
+            className="Flex-root TopBar-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
           >
-            <button
-              className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantUnderlined"
-              onBlur={[Function]}
-              onClick={[Function]}
-              onFocus={[Function]}
-              onMouseDown={[Function]}
-              onMouseOut={[Function]}
-              onMouseOver={[Function]}
-              onTouchEnd={[Function]}
-              type="button"
+            <span
+              className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
             >
-              Sign in
-            </button>
-            <button
-              className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantOutlined"
-              onBlur={[Function]}
-              onClick={[Function]}
-              onFocus={[Function]}
-              onMouseDown={[Function]}
-              onMouseOut={[Function]}
-              onMouseOver={[Function]}
-              onTouchEnd={[Function]}
-              type="button"
+              Markus
+            </span>
+            <time
+              className="Timestamp-root RelativeTime-root"
+              dateTime="2018-07-06T18:24:00.000Z"
+              title="2018-07-06T18:24:00.000Z"
             >
-              Register
-            </button>
+              2018-07-06T18:24:00.000Z
+            </time>
           </div>
+          <p
+            className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
+          >
+            Joining Too
+          </p>
+          <div
+            className="Comment-footer"
+          />
         </div>
-        <form
-          autoComplete="off"
-          className="PostCommentForm-root"
-          onSubmit={[Function]}
-        >
-          <div>
-            <textarea
-              className="PostCommentForm-textarea"
-              name="body"
-              onChange={[Function]}
-              placeholder="Post a comment"
-              value=""
-            />
-          </div>
-          <button
-            className="BaseButton-root Button-root Button-sizeLarge Button-colorPrimary Button-variantFilled Button-fullWidth Button-disabled"
-            disabled={true}
-            onBlur={[Function]}
-            onFocus={[Function]}
-            onMouseDown={[Function]}
-            onMouseOut={[Function]}
-            onMouseOver={[Function]}
-            onTouchEnd={[Function]}
-            type="button"
-          >
-            Sign in and join the conversation
-          </button>
-        </form>
+      </div>
+      <div
+        className="HorizontalGutter-root HorizontalGutter-full"
+      >
         <div
-          aria-live="polite"
-          className="Flex-root"
-          id="talk-comments-stream-log"
-          role="log"
+          className="Comment-root"
+          role="article"
         >
           <div
-            className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
+            className="Flex-root TopBar-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+          >
+            <span
+              className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+            >
+              Markus
+            </span>
+            <time
+              className="Timestamp-root RelativeTime-root"
+              dateTime="2018-07-06T18:24:00.000Z"
+              title="2018-07-06T18:24:00.000Z"
+            >
+              2018-07-06T18:24:00.000Z
+            </time>
+          </div>
+          <p
+            className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
+          >
+            I like yoghurt
+          </p>
+          <div
+            className="Comment-footer"
+          />
+        </div>
+        <div
+          className="Indent-root Indent-level0"
+        >
+          <div
+            className="HorizontalGutter-root HorizontalGutter-full"
+            id="talk-comments-replyList-log--comment-with-replies"
+            role="log"
           >
             <div
-              className="Flex-root"
+              className="Comment-root"
+              role="article"
             >
               <div
-                className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
+                className="Flex-root TopBar-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
               >
-                <div
-                  className="Comment-root"
-                  role="article"
+                <span
+                  className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
                 >
-                  <div
-                    className="Flex-root TopBar-root"
-                  >
-                    <div
-                      className="Flex-flex Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
-                    >
-                      <span
-                        className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
-                      >
-                        Markus
-                      </span>
-                      <time
-                        className="Timestamp-root RelativeTime-root"
-                        dateTime="2018-07-06T18:24:00.000Z"
-                        title="2018-07-06T18:24:00.000Z"
-                      >
-                        2018-07-06T18:24:00.000Z
-                      </time>
-                    </div>
-                  </div>
-                  <p
-                    className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
-                  >
-                    Joining Too
-                  </p>
-                  <div
-                    className="Comment-footer"
-                  />
-                </div>
+                  Markus
+                </span>
+                <time
+                  className="Timestamp-root RelativeTime-root"
+                  dateTime="2018-07-06T18:24:00.000Z"
+                  title="2018-07-06T18:24:00.000Z"
+                >
+                  2018-07-06T18:24:00.000Z
+                </time>
               </div>
+              <p
+                className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
+              >
+                Joining Too
+              </p>
+              <div
+                className="Comment-footer"
+              />
             </div>
             <div
-              className="Flex-root"
+              className="Comment-root"
+              role="article"
             >
               <div
-                className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
+                className="Flex-root TopBar-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
               >
-                <div
-                  className="Comment-root"
-                  role="article"
+                <span
+                  className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
                 >
-                  <div
-                    className="Flex-root TopBar-root"
-                  >
-                    <div
-                      className="Flex-flex Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
-                    >
-                      <span
-                        className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
-                      >
-                        Markus
-                      </span>
-                      <time
-                        className="Timestamp-root RelativeTime-root"
-                        dateTime="2018-07-06T18:24:00.000Z"
-                        title="2018-07-06T18:24:00.000Z"
-                      >
-                        2018-07-06T18:24:00.000Z
-                      </time>
-                    </div>
-                  </div>
-                  <p
-                    className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
-                  >
-                    I like yoghurt
-                  </p>
-                  <div
-                    className="Comment-footer"
-                  />
-                </div>
-                <div
-                  className="Indent-root Indent-level0"
+                  Lukas
+                </span>
+                <time
+                  className="Timestamp-root RelativeTime-root"
+                  dateTime="2018-07-06T18:20:00.000Z"
+                  title="2018-07-06T18:20:00.000Z"
                 >
-                  <div
-                    className="Flex-root"
-                    id="talk-comments-replyList-log--comment-with-replies"
-                    role="log"
-                  >
-                    <div
-                      className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
-                    >
-                      <div
-                        className="Comment-root"
-                        role="article"
-                      >
-                        <div
-                          className="Flex-root TopBar-root"
-                        >
-                          <div
-                            className="Flex-flex Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
-                          >
-                            <span
-                              className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
-                            >
-                              Markus
-                            </span>
-                            <time
-                              className="Timestamp-root RelativeTime-root"
-                              dateTime="2018-07-06T18:24:00.000Z"
-                              title="2018-07-06T18:24:00.000Z"
-                            >
-                              2018-07-06T18:24:00.000Z
-                            </time>
-                          </div>
-                        </div>
-                        <p
-                          className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
-                        >
-                          Joining Too
-                        </p>
-                        <div
-                          className="Comment-footer"
-                        />
-                      </div>
-                      <div
-                        className="Comment-root"
-                        role="article"
-                      >
-                        <div
-                          className="Flex-root TopBar-root"
-                        >
-                          <div
-                            className="Flex-flex Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
-                          >
-                            <span
-                              className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
-                            >
-                              Lukas
-                            </span>
-                            <time
-                              className="Timestamp-root RelativeTime-root"
-                              dateTime="2018-07-06T18:20:00.000Z"
-                              title="2018-07-06T18:20:00.000Z"
-                            >
-                              2018-07-06T18:20:00.000Z
-                            </time>
-                          </div>
-                        </div>
-                        <p
-                          className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
-                        >
-                          What's up?
-                        </p>
-                        <div
-                          className="Comment-footer"
-                        />
-                      </div>
-                    </div>
-                  </div>
-                </div>
+                  2018-07-06T18:20:00.000Z
+                </time>
               </div>
+              <p
+                className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
+              >
+                What's up?
+              </p>
+              <div
+                className="Comment-footer"
+              />
             </div>
           </div>
         </div>
diff --git a/src/core/client/stream/test/__snapshots__/renderStream.spec.tsx.snap b/src/core/client/stream/test/__snapshots__/renderStream.spec.tsx.snap
index d3d07bb71..33f8dcf13 100644
--- a/src/core/client/stream/test/__snapshots__/renderStream.spec.tsx.snap
+++ b/src/core/client/stream/test/__snapshots__/renderStream.spec.tsx.snap
@@ -2,171 +2,137 @@
 
 exports[`renders comment stream 1`] = `
 <div
-  className="Flex-root App-root"
+  className="Flex-root App-root Flex-flex Flex-justifyCenter"
 >
   <div
-    className="Flex-flex Flex-wrap Flex-justifyCenter Flex-alignCenter"
+    className="HorizontalGutter-root Stream-root HorizontalGutter-double"
   >
     <div
-      className="Flex-root Stream-root"
+      className="HorizontalGutter-root HorizontalGutter-half"
     >
       <div
-        className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
+        className="Flex-root Flex-flex Flex-itemGutter Flex-alignCenter"
+      >
+        <button
+          className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantUnderlined"
+          onBlur={[Function]}
+          onClick={[Function]}
+          onFocus={[Function]}
+          onMouseDown={[Function]}
+          onMouseOut={[Function]}
+          onMouseOver={[Function]}
+          onTouchEnd={[Function]}
+          type="button"
+        >
+          Sign in
+        </button>
+        <button
+          className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantOutlined"
+          onBlur={[Function]}
+          onClick={[Function]}
+          onFocus={[Function]}
+          onMouseDown={[Function]}
+          onMouseOut={[Function]}
+          onMouseOver={[Function]}
+          onTouchEnd={[Function]}
+          type="button"
+        >
+          Register
+        </button>
+      </div>
+      <div
+        className="HorizontalGutter-root PostCommentFormFake-root HorizontalGutter-full"
+      >
+        <textarea
+          className="PostCommentFormFake-textarea"
+          disabled={true}
+          placeholder="Post a comment"
+        />
+        <button
+          className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled Button-fullWidth Button-disabled"
+          disabled={true}
+          onBlur={[Function]}
+          onFocus={[Function]}
+          onMouseDown={[Function]}
+          onMouseOut={[Function]}
+          onMouseOver={[Function]}
+          onTouchEnd={[Function]}
+          type="submit"
+        >
+          Sign in and join the conversation
+        </button>
+      </div>
+    </div>
+    <div
+      aria-live="polite"
+      className="HorizontalGutter-root HorizontalGutter-full"
+      id="talk-comments-stream-log"
+      role="log"
+    >
+      <div
+        className="HorizontalGutter-root HorizontalGutter-full"
       >
         <div
-          className="Flex-root"
+          className="Comment-root"
+          role="article"
         >
           <div
-            className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignCenter"
+            className="Flex-root TopBar-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
           >
-            <button
-              className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantUnderlined"
-              onBlur={[Function]}
-              onClick={[Function]}
-              onFocus={[Function]}
-              onMouseDown={[Function]}
-              onMouseOut={[Function]}
-              onMouseOver={[Function]}
-              onTouchEnd={[Function]}
-              type="button"
+            <span
+              className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
             >
-              Sign in
-            </button>
-            <button
-              className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantOutlined"
-              onBlur={[Function]}
-              onClick={[Function]}
-              onFocus={[Function]}
-              onMouseDown={[Function]}
-              onMouseOut={[Function]}
-              onMouseOver={[Function]}
-              onTouchEnd={[Function]}
-              type="button"
+              Markus
+            </span>
+            <time
+              className="Timestamp-root RelativeTime-root"
+              dateTime="2018-07-06T18:24:00.000Z"
+              title="2018-07-06T18:24:00.000Z"
             >
-              Register
-            </button>
+              2018-07-06T18:24:00.000Z
+            </time>
           </div>
+          <p
+            className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
+          >
+            Joining Too
+          </p>
+          <div
+            className="Comment-footer"
+          />
         </div>
-        <form
-          autoComplete="off"
-          className="PostCommentForm-root"
-          onSubmit={[Function]}
-        >
-          <div>
-            <textarea
-              className="PostCommentForm-textarea"
-              name="body"
-              onChange={[Function]}
-              placeholder="Post a comment"
-              value=""
-            />
-          </div>
-          <button
-            className="BaseButton-root Button-root Button-sizeLarge Button-colorPrimary Button-variantFilled Button-fullWidth Button-disabled"
-            disabled={true}
-            onBlur={[Function]}
-            onFocus={[Function]}
-            onMouseDown={[Function]}
-            onMouseOut={[Function]}
-            onMouseOver={[Function]}
-            onTouchEnd={[Function]}
-            type="button"
-          >
-            Sign in and join the conversation
-          </button>
-        </form>
+      </div>
+      <div
+        className="HorizontalGutter-root HorizontalGutter-full"
+      >
         <div
-          aria-live="polite"
-          className="Flex-root"
-          id="talk-comments-stream-log"
-          role="log"
+          className="Comment-root"
+          role="article"
         >
           <div
-            className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
+            className="Flex-root TopBar-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
           >
-            <div
-              className="Flex-root"
+            <span
+              className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
             >
-              <div
-                className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
-              >
-                <div
-                  className="Comment-root"
-                  role="article"
-                >
-                  <div
-                    className="Flex-root TopBar-root"
-                  >
-                    <div
-                      className="Flex-flex Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
-                    >
-                      <span
-                        className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
-                      >
-                        Markus
-                      </span>
-                      <time
-                        className="Timestamp-root RelativeTime-root"
-                        dateTime="2018-07-06T18:24:00.000Z"
-                        title="2018-07-06T18:24:00.000Z"
-                      >
-                        2018-07-06T18:24:00.000Z
-                      </time>
-                    </div>
-                  </div>
-                  <p
-                    className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
-                  >
-                    Joining Too
-                  </p>
-                  <div
-                    className="Comment-footer"
-                  />
-                </div>
-              </div>
-            </div>
-            <div
-              className="Flex-root"
+              Lukas
+            </span>
+            <time
+              className="Timestamp-root RelativeTime-root"
+              dateTime="2018-07-06T18:20:00.000Z"
+              title="2018-07-06T18:20:00.000Z"
             >
-              <div
-                className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
-              >
-                <div
-                  className="Comment-root"
-                  role="article"
-                >
-                  <div
-                    className="Flex-root TopBar-root"
-                  >
-                    <div
-                      className="Flex-flex Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
-                    >
-                      <span
-                        className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
-                      >
-                        Lukas
-                      </span>
-                      <time
-                        className="Timestamp-root RelativeTime-root"
-                        dateTime="2018-07-06T18:20:00.000Z"
-                        title="2018-07-06T18:20:00.000Z"
-                      >
-                        2018-07-06T18:20:00.000Z
-                      </time>
-                    </div>
-                  </div>
-                  <p
-                    className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
-                  >
-                    What's up?
-                  </p>
-                  <div
-                    className="Comment-footer"
-                  />
-                </div>
-              </div>
-            </div>
+              2018-07-06T18:20:00.000Z
+            </time>
           </div>
+          <p
+            className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
+          >
+            What's up?
+          </p>
+          <div
+            className="Comment-footer"
+          />
         </div>
       </div>
     </div>
diff --git a/src/core/client/stream/test/__snapshots__/showAllReplies.spec.tsx.snap b/src/core/client/stream/test/__snapshots__/showAllReplies.spec.tsx.snap
index 63af12a8a..8d5418b63 100644
--- a/src/core/client/stream/test/__snapshots__/showAllReplies.spec.tsx.snap
+++ b/src/core/client/stream/test/__snapshots__/showAllReplies.spec.tsx.snap
@@ -2,192 +2,158 @@
 
 exports[`renders comment stream 1`] = `
 <div
-  className="Flex-root App-root"
+  className="Flex-root App-root Flex-flex Flex-justifyCenter"
 >
   <div
-    className="Flex-flex Flex-wrap Flex-justifyCenter Flex-alignCenter"
+    className="HorizontalGutter-root Stream-root HorizontalGutter-double"
   >
     <div
-      className="Flex-root Stream-root"
+      className="HorizontalGutter-root HorizontalGutter-half"
     >
       <div
-        className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
+        className="Flex-root Flex-flex Flex-itemGutter Flex-alignCenter"
+      >
+        <button
+          className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantUnderlined"
+          onBlur={[Function]}
+          onClick={[Function]}
+          onFocus={[Function]}
+          onMouseDown={[Function]}
+          onMouseOut={[Function]}
+          onMouseOver={[Function]}
+          onTouchEnd={[Function]}
+          type="button"
+        >
+          Sign in
+        </button>
+        <button
+          className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantOutlined"
+          onBlur={[Function]}
+          onClick={[Function]}
+          onFocus={[Function]}
+          onMouseDown={[Function]}
+          onMouseOut={[Function]}
+          onMouseOver={[Function]}
+          onTouchEnd={[Function]}
+          type="button"
+        >
+          Register
+        </button>
+      </div>
+      <div
+        className="HorizontalGutter-root PostCommentFormFake-root HorizontalGutter-full"
+      >
+        <textarea
+          className="PostCommentFormFake-textarea"
+          disabled={true}
+          placeholder="Post a comment"
+        />
+        <button
+          className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled Button-fullWidth Button-disabled"
+          disabled={true}
+          onBlur={[Function]}
+          onFocus={[Function]}
+          onMouseDown={[Function]}
+          onMouseOut={[Function]}
+          onMouseOver={[Function]}
+          onTouchEnd={[Function]}
+          type="submit"
+        >
+          Sign in and join the conversation
+        </button>
+      </div>
+    </div>
+    <div
+      aria-live="polite"
+      className="HorizontalGutter-root HorizontalGutter-full"
+      id="talk-comments-stream-log"
+      role="log"
+    >
+      <div
+        className="HorizontalGutter-root HorizontalGutter-full"
       >
         <div
-          className="Flex-root"
+          className="Comment-root"
+          role="article"
         >
           <div
-            className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignCenter"
+            className="Flex-root TopBar-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
           >
-            <button
-              className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantUnderlined"
-              onBlur={[Function]}
-              onClick={[Function]}
-              onFocus={[Function]}
-              onMouseDown={[Function]}
-              onMouseOut={[Function]}
-              onMouseOver={[Function]}
-              onTouchEnd={[Function]}
-              type="button"
+            <span
+              className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
             >
-              Sign in
-            </button>
-            <button
-              className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantOutlined"
-              onBlur={[Function]}
-              onClick={[Function]}
-              onFocus={[Function]}
-              onMouseDown={[Function]}
-              onMouseOut={[Function]}
-              onMouseOver={[Function]}
-              onTouchEnd={[Function]}
-              type="button"
+              Markus
+            </span>
+            <time
+              className="Timestamp-root RelativeTime-root"
+              dateTime="2018-07-06T18:24:00.000Z"
+              title="2018-07-06T18:24:00.000Z"
             >
-              Register
-            </button>
+              2018-07-06T18:24:00.000Z
+            </time>
           </div>
+          <p
+            className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
+          >
+            Joining Too
+          </p>
+          <div
+            className="Comment-footer"
+          />
         </div>
-        <form
-          autoComplete="off"
-          className="PostCommentForm-root"
-          onSubmit={[Function]}
-        >
-          <div>
-            <textarea
-              className="PostCommentForm-textarea"
-              name="body"
-              onChange={[Function]}
-              placeholder="Post a comment"
-              value=""
-            />
-          </div>
-          <button
-            className="BaseButton-root Button-root Button-sizeLarge Button-colorPrimary Button-variantFilled Button-fullWidth Button-disabled"
-            disabled={true}
-            onBlur={[Function]}
-            onFocus={[Function]}
-            onMouseDown={[Function]}
-            onMouseOut={[Function]}
-            onMouseOver={[Function]}
-            onTouchEnd={[Function]}
-            type="button"
-          >
-            Sign in and join the conversation
-          </button>
-        </form>
         <div
-          aria-live="polite"
-          className="Flex-root"
-          id="talk-comments-stream-log"
-          role="log"
+          className="Indent-root Indent-level0"
         >
           <div
-            className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
+            className="HorizontalGutter-root HorizontalGutter-full"
+            id="talk-comments-replyList-log--comment-0"
+            role="log"
           >
             <div
-              className="Flex-root"
+              className="Comment-root"
+              role="article"
             >
               <div
-                className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
+                className="Flex-root TopBar-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
               >
-                <div
-                  className="Comment-root"
-                  role="article"
+                <span
+                  className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
                 >
-                  <div
-                    className="Flex-root TopBar-root"
-                  >
-                    <div
-                      className="Flex-flex Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
-                    >
-                      <span
-                        className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
-                      >
-                        Markus
-                      </span>
-                      <time
-                        className="Timestamp-root RelativeTime-root"
-                        dateTime="2018-07-06T18:24:00.000Z"
-                        title="2018-07-06T18:24:00.000Z"
-                      >
-                        2018-07-06T18:24:00.000Z
-                      </time>
-                    </div>
-                  </div>
-                  <p
-                    className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
-                  >
-                    Joining Too
-                  </p>
-                  <div
-                    className="Comment-footer"
-                  />
-                </div>
-                <div
-                  className="Indent-root Indent-level0"
+                  Lukas
+                </span>
+                <time
+                  className="Timestamp-root RelativeTime-root"
+                  dateTime="2018-07-06T18:20:00.000Z"
+                  title="2018-07-06T18:20:00.000Z"
                 >
-                  <div
-                    className="Flex-root"
-                    id="talk-comments-replyList-log--comment-0"
-                    role="log"
-                  >
-                    <div
-                      className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
-                    >
-                      <div
-                        className="Comment-root"
-                        role="article"
-                      >
-                        <div
-                          className="Flex-root TopBar-root"
-                        >
-                          <div
-                            className="Flex-flex Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
-                          >
-                            <span
-                              className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
-                            >
-                              Lukas
-                            </span>
-                            <time
-                              className="Timestamp-root RelativeTime-root"
-                              dateTime="2018-07-06T18:20:00.000Z"
-                              title="2018-07-06T18:20:00.000Z"
-                            >
-                              2018-07-06T18:20:00.000Z
-                            </time>
-                          </div>
-                        </div>
-                        <p
-                          className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
-                        >
-                          What's up?
-                        </p>
-                        <div
-                          className="Comment-footer"
-                        />
-                      </div>
-                      <button
-                        aria-controls="talk-comments-replyList-log--comment-0"
-                        className="BaseButton-root Button-root Button-sizeRegular Button-colorRegular Button-variantOutlined Button-fullWidth"
-                        disabled={false}
-                        id="talk-comments-replyList-showAll--comment-0"
-                        onBlur={[Function]}
-                        onClick={[Function]}
-                        onFocus={[Function]}
-                        onMouseDown={[Function]}
-                        onMouseOut={[Function]}
-                        onMouseOver={[Function]}
-                        onTouchEnd={[Function]}
-                        type="button"
-                      >
-                        Show All Replies
-                      </button>
-                    </div>
-                  </div>
-                </div>
+                  2018-07-06T18:20:00.000Z
+                </time>
               </div>
+              <p
+                className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
+              >
+                What's up?
+              </p>
+              <div
+                className="Comment-footer"
+              />
             </div>
+            <button
+              aria-controls="talk-comments-replyList-log--comment-0"
+              className="BaseButton-root Button-root Button-sizeRegular Button-colorRegular Button-variantOutlined Button-fullWidth"
+              disabled={false}
+              id="talk-comments-replyList-showAll--comment-0"
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onMouseDown={[Function]}
+              onMouseOut={[Function]}
+              onMouseOver={[Function]}
+              onTouchEnd={[Function]}
+              type="button"
+            >
+              Show All Replies
+            </button>
           </div>
         </div>
       </div>
@@ -198,208 +164,170 @@ exports[`renders comment stream 1`] = `
 
 exports[`show all replies 1`] = `
 <div
-  className="Flex-root App-root"
+  className="Flex-root App-root Flex-flex Flex-justifyCenter"
 >
   <div
-    className="Flex-flex Flex-wrap Flex-justifyCenter Flex-alignCenter"
+    className="HorizontalGutter-root Stream-root HorizontalGutter-double"
   >
     <div
-      className="Flex-root Stream-root"
+      className="HorizontalGutter-root HorizontalGutter-half"
     >
       <div
-        className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
+        className="Flex-root Flex-flex Flex-itemGutter Flex-alignCenter"
+      >
+        <button
+          className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantUnderlined"
+          onBlur={[Function]}
+          onClick={[Function]}
+          onFocus={[Function]}
+          onMouseDown={[Function]}
+          onMouseOut={[Function]}
+          onMouseOver={[Function]}
+          onTouchEnd={[Function]}
+          type="button"
+        >
+          Sign in
+        </button>
+        <button
+          className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantOutlined"
+          onBlur={[Function]}
+          onClick={[Function]}
+          onFocus={[Function]}
+          onMouseDown={[Function]}
+          onMouseOut={[Function]}
+          onMouseOver={[Function]}
+          onTouchEnd={[Function]}
+          type="button"
+        >
+          Register
+        </button>
+      </div>
+      <div
+        className="HorizontalGutter-root PostCommentFormFake-root HorizontalGutter-full"
+      >
+        <textarea
+          className="PostCommentFormFake-textarea"
+          disabled={true}
+          placeholder="Post a comment"
+        />
+        <button
+          className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled Button-fullWidth Button-disabled"
+          disabled={true}
+          onBlur={[Function]}
+          onFocus={[Function]}
+          onMouseDown={[Function]}
+          onMouseOut={[Function]}
+          onMouseOver={[Function]}
+          onTouchEnd={[Function]}
+          type="submit"
+        >
+          Sign in and join the conversation
+        </button>
+      </div>
+    </div>
+    <div
+      aria-live="polite"
+      className="HorizontalGutter-root HorizontalGutter-full"
+      id="talk-comments-stream-log"
+      role="log"
+    >
+      <div
+        className="HorizontalGutter-root HorizontalGutter-full"
       >
         <div
-          className="Flex-root"
+          className="Comment-root"
+          role="article"
         >
           <div
-            className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignCenter"
+            className="Flex-root TopBar-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
           >
-            <button
-              className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantUnderlined"
-              onBlur={[Function]}
-              onClick={[Function]}
-              onFocus={[Function]}
-              onMouseDown={[Function]}
-              onMouseOut={[Function]}
-              onMouseOver={[Function]}
-              onTouchEnd={[Function]}
-              type="button"
+            <span
+              className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
             >
-              Sign in
-            </button>
-            <button
-              className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantOutlined"
-              onBlur={[Function]}
-              onClick={[Function]}
-              onFocus={[Function]}
-              onMouseDown={[Function]}
-              onMouseOut={[Function]}
-              onMouseOver={[Function]}
-              onTouchEnd={[Function]}
-              type="button"
+              Markus
+            </span>
+            <time
+              className="Timestamp-root RelativeTime-root"
+              dateTime="2018-07-06T18:24:00.000Z"
+              title="2018-07-06T18:24:00.000Z"
             >
-              Register
-            </button>
+              2018-07-06T18:24:00.000Z
+            </time>
           </div>
+          <p
+            className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
+          >
+            Joining Too
+          </p>
+          <div
+            className="Comment-footer"
+          />
         </div>
-        <form
-          autoComplete="off"
-          className="PostCommentForm-root"
-          onSubmit={[Function]}
-        >
-          <div>
-            <textarea
-              className="PostCommentForm-textarea"
-              name="body"
-              onChange={[Function]}
-              placeholder="Post a comment"
-              value=""
-            />
-          </div>
-          <button
-            className="BaseButton-root Button-root Button-sizeLarge Button-colorPrimary Button-variantFilled Button-fullWidth Button-disabled"
-            disabled={true}
-            onBlur={[Function]}
-            onFocus={[Function]}
-            onMouseDown={[Function]}
-            onMouseOut={[Function]}
-            onMouseOver={[Function]}
-            onTouchEnd={[Function]}
-            type="button"
-          >
-            Sign in and join the conversation
-          </button>
-        </form>
         <div
-          aria-live="polite"
-          className="Flex-root"
-          id="talk-comments-stream-log"
-          role="log"
+          className="Indent-root Indent-level0"
         >
           <div
-            className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
+            className="HorizontalGutter-root HorizontalGutter-full"
+            id="talk-comments-replyList-log--comment-0"
+            role="log"
           >
             <div
-              className="Flex-root"
+              className="Comment-root"
+              role="article"
             >
               <div
-                className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
+                className="Flex-root TopBar-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
               >
-                <div
-                  className="Comment-root"
-                  role="article"
+                <span
+                  className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
                 >
-                  <div
-                    className="Flex-root TopBar-root"
-                  >
-                    <div
-                      className="Flex-flex Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
-                    >
-                      <span
-                        className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
-                      >
-                        Markus
-                      </span>
-                      <time
-                        className="Timestamp-root RelativeTime-root"
-                        dateTime="2018-07-06T18:24:00.000Z"
-                        title="2018-07-06T18:24:00.000Z"
-                      >
-                        2018-07-06T18:24:00.000Z
-                      </time>
-                    </div>
-                  </div>
-                  <p
-                    className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
-                  >
-                    Joining Too
-                  </p>
-                  <div
-                    className="Comment-footer"
-                  />
-                </div>
-                <div
-                  className="Indent-root Indent-level0"
+                  Lukas
+                </span>
+                <time
+                  className="Timestamp-root RelativeTime-root"
+                  dateTime="2018-07-06T18:20:00.000Z"
+                  title="2018-07-06T18:20:00.000Z"
                 >
-                  <div
-                    className="Flex-root"
-                    id="talk-comments-replyList-log--comment-0"
-                    role="log"
-                  >
-                    <div
-                      className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
-                    >
-                      <div
-                        className="Comment-root"
-                        role="article"
-                      >
-                        <div
-                          className="Flex-root TopBar-root"
-                        >
-                          <div
-                            className="Flex-flex Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
-                          >
-                            <span
-                              className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
-                            >
-                              Lukas
-                            </span>
-                            <time
-                              className="Timestamp-root RelativeTime-root"
-                              dateTime="2018-07-06T18:20:00.000Z"
-                              title="2018-07-06T18:20:00.000Z"
-                            >
-                              2018-07-06T18:20:00.000Z
-                            </time>
-                          </div>
-                        </div>
-                        <p
-                          className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
-                        >
-                          What's up?
-                        </p>
-                        <div
-                          className="Comment-footer"
-                        />
-                      </div>
-                      <div
-                        className="Comment-root"
-                        role="article"
-                      >
-                        <div
-                          className="Flex-root TopBar-root"
-                        >
-                          <div
-                            className="Flex-flex Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
-                          >
-                            <span
-                              className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
-                            >
-                              Isabelle
-                            </span>
-                            <time
-                              className="Timestamp-root RelativeTime-root"
-                              dateTime="2018-07-06T18:14:00.000Z"
-                              title="2018-07-06T18:14:00.000Z"
-                            >
-                              2018-07-06T18:14:00.000Z
-                            </time>
-                          </div>
-                        </div>
-                        <p
-                          className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
-                        >
-                          Hey!
-                        </p>
-                        <div
-                          className="Comment-footer"
-                        />
-                      </div>
-                    </div>
-                  </div>
-                </div>
+                  2018-07-06T18:20:00.000Z
+                </time>
               </div>
+              <p
+                className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
+              >
+                What's up?
+              </p>
+              <div
+                className="Comment-footer"
+              />
+            </div>
+            <div
+              className="Comment-root"
+              role="article"
+            >
+              <div
+                className="Flex-root TopBar-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+              >
+                <span
+                  className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+                >
+                  Isabelle
+                </span>
+                <time
+                  className="Timestamp-root RelativeTime-root"
+                  dateTime="2018-07-06T18:14:00.000Z"
+                  title="2018-07-06T18:14:00.000Z"
+                >
+                  2018-07-06T18:14:00.000Z
+                </time>
+              </div>
+              <p
+                className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
+              >
+                Hey!
+              </p>
+              <div
+                className="Comment-footer"
+              />
             </div>
           </div>
         </div>
diff --git a/src/core/client/stream/test/loadMore.spec.tsx b/src/core/client/stream/test/loadMore.spec.tsx
index afe07b39f..1a162a572 100644
--- a/src/core/client/stream/test/loadMore.spec.tsx
+++ b/src/core/client/stream/test/loadMore.spec.tsx
@@ -4,6 +4,9 @@ import sinon from "sinon";
 
 import { timeout } from "talk-common/utils";
 import { TalkContext, TalkContextProvider } from "talk-framework/lib/bootstrap";
+import { PostMessageService } from "talk-framework/lib/postMessage";
+import { RestClient } from "talk-framework/lib/rest";
+import { createInMemoryStorage } from "talk-framework/lib/storage";
 import AppContainer from "talk-stream/containers/AppContainer";
 
 import createEnvironment from "./createEnvironment";
@@ -65,13 +68,18 @@ const environment = createEnvironment({
   logNetwork: false,
   resolvers,
   initLocalState: (localRecord, source) => {
+    localRecord.setValue(0, "authRevision");
     localRecord.setValue(assetStub.id, "assetID");
   },
 });
 
 const context: TalkContext = {
   relayEnvironment: environment,
-  localeMessages: [],
+  localeBundles: [],
+  localStorage: createInMemoryStorage(),
+  sessionStorage: createInMemoryStorage(),
+  rest: new RestClient("http://localhost/api"),
+  postMessage: new PostMessageService(),
 };
 
 const testRenderer = TestRenderer.create(
diff --git a/src/core/client/stream/test/permalinkView.spec.tsx b/src/core/client/stream/test/permalinkView.spec.tsx
index 1d1dc7843..03e5dfcff 100644
--- a/src/core/client/stream/test/permalinkView.spec.tsx
+++ b/src/core/client/stream/test/permalinkView.spec.tsx
@@ -5,6 +5,9 @@ import sinon from "sinon";
 
 import { timeout } from "talk-common/utils";
 import { TalkContext, TalkContextProvider } from "talk-framework/lib/bootstrap";
+import { PostMessageService } from "talk-framework/lib/postMessage";
+import { RestClient } from "talk-framework/lib/rest";
+import { createInMemoryStorage } from "talk-framework/lib/storage";
 import AppContainer from "talk-stream/containers/AppContainer";
 
 import createEnvironment from "./createEnvironment";
@@ -49,6 +52,7 @@ const environment = createEnvironment({
   logNetwork: false,
   resolvers,
   initLocalState: (localRecord: RecordProxy) => {
+    localRecord.setValue(0, "authRevision");
     localRecord.setValue(assetStub.id, "assetID");
     localRecord.setValue(commentStub.id, "commentID");
   },
@@ -56,7 +60,11 @@ const environment = createEnvironment({
 
 const context: TalkContext = {
   relayEnvironment: environment,
-  localeMessages: [],
+  localeBundles: [],
+  localStorage: createInMemoryStorage(),
+  sessionStorage: createInMemoryStorage(),
+  rest: new RestClient("http://localhost/api"),
+  postMessage: new PostMessageService(),
 };
 
 const testRenderer = TestRenderer.create(
diff --git a/src/core/client/stream/test/permalinkViewAssetNotFound.spec.tsx b/src/core/client/stream/test/permalinkViewAssetNotFound.spec.tsx
index 17be1416e..d87f62d1e 100644
--- a/src/core/client/stream/test/permalinkViewAssetNotFound.spec.tsx
+++ b/src/core/client/stream/test/permalinkViewAssetNotFound.spec.tsx
@@ -4,6 +4,9 @@ import { RecordProxy } from "relay-runtime";
 
 import { timeout } from "talk-common/utils";
 import { TalkContext, TalkContextProvider } from "talk-framework/lib/bootstrap";
+import { PostMessageService } from "talk-framework/lib/postMessage";
+import { RestClient } from "talk-framework/lib/rest";
+import { createInMemoryStorage } from "talk-framework/lib/storage";
 import AppContainer from "talk-stream/containers/AppContainer";
 
 import createEnvironment from "./createEnvironment";
@@ -20,6 +23,7 @@ const environment = createEnvironment({
   logNetwork: false,
   resolvers,
   initLocalState: (localRecord: RecordProxy) => {
+    localRecord.setValue(0, "authRevision");
     localRecord.setValue("unknown-asset-id", "assetID");
     localRecord.setValue("unknown-comment-id", "commentID");
   },
@@ -27,7 +31,11 @@ const environment = createEnvironment({
 
 const context: TalkContext = {
   relayEnvironment: environment,
-  localeMessages: [],
+  localeBundles: [],
+  localStorage: createInMemoryStorage(),
+  sessionStorage: createInMemoryStorage(),
+  rest: new RestClient("http://localhost/api"),
+  postMessage: new PostMessageService(),
 };
 
 const testRenderer = TestRenderer.create(
diff --git a/src/core/client/stream/test/permalinkViewCommentNotFound.spec.tsx b/src/core/client/stream/test/permalinkViewCommentNotFound.spec.tsx
index 0375a9803..4c115b5bd 100644
--- a/src/core/client/stream/test/permalinkViewCommentNotFound.spec.tsx
+++ b/src/core/client/stream/test/permalinkViewCommentNotFound.spec.tsx
@@ -5,6 +5,9 @@ import sinon from "sinon";
 
 import { timeout } from "talk-common/utils";
 import { TalkContext, TalkContextProvider } from "talk-framework/lib/bootstrap";
+import { PostMessageService } from "talk-framework/lib/postMessage";
+import { RestClient } from "talk-framework/lib/rest";
+import { createInMemoryStorage } from "talk-framework/lib/storage";
 import AppContainer from "talk-stream/containers/AppContainer";
 
 import createEnvironment from "./createEnvironment";
@@ -47,12 +50,17 @@ const environment = createEnvironment({
   initLocalState: (localRecord: RecordProxy) => {
     localRecord.setValue(assetStub.id, "assetID");
     localRecord.setValue("unknown-comment-id", "commentID");
+    localRecord.setValue(0, "authRevision");
   },
 });
 
 const context: TalkContext = {
   relayEnvironment: environment,
-  localeMessages: [],
+  localeBundles: [],
+  localStorage: createInMemoryStorage(),
+  sessionStorage: createInMemoryStorage(),
+  rest: new RestClient("http://localhost/api"),
+  postMessage: new PostMessageService(),
 };
 
 const testRenderer = TestRenderer.create(
diff --git a/src/core/client/stream/test/renderReplies.spec.tsx b/src/core/client/stream/test/renderReplies.spec.tsx
index 468317624..da5f138c2 100644
--- a/src/core/client/stream/test/renderReplies.spec.tsx
+++ b/src/core/client/stream/test/renderReplies.spec.tsx
@@ -5,6 +5,9 @@ import sinon from "sinon";
 
 import { timeout } from "talk-common/utils";
 import { TalkContext, TalkContextProvider } from "talk-framework/lib/bootstrap";
+import { PostMessageService } from "talk-framework/lib/postMessage";
+import { RestClient } from "talk-framework/lib/rest";
+import { createInMemoryStorage } from "talk-framework/lib/storage";
 import AppContainer from "talk-stream/containers/AppContainer";
 
 import createEnvironment from "./createEnvironment";
@@ -26,12 +29,17 @@ const environment = createEnvironment({
   resolvers,
   initLocalState: (localRecord: RecordProxy) => {
     localRecord.setValue(assetWithReplies.id, "assetID");
+    localRecord.setValue(0, "authRevision");
   },
 });
 
 const context: TalkContext = {
   relayEnvironment: environment,
-  localeMessages: [],
+  localeBundles: [],
+  localStorage: createInMemoryStorage(),
+  sessionStorage: createInMemoryStorage(),
+  rest: new RestClient("http://localhost/api"),
+  postMessage: new PostMessageService(),
 };
 
 const testRenderer = TestRenderer.create(
diff --git a/src/core/client/stream/test/renderStream.spec.tsx b/src/core/client/stream/test/renderStream.spec.tsx
index 361f6e2c2..9a1eb8da7 100644
--- a/src/core/client/stream/test/renderStream.spec.tsx
+++ b/src/core/client/stream/test/renderStream.spec.tsx
@@ -5,6 +5,9 @@ import sinon from "sinon";
 
 import { timeout } from "talk-common/utils";
 import { TalkContext, TalkContextProvider } from "talk-framework/lib/bootstrap";
+import { PostMessageService } from "talk-framework/lib/postMessage";
+import { RestClient } from "talk-framework/lib/rest";
+import { createInMemoryStorage } from "talk-framework/lib/storage";
 import AppContainer from "talk-stream/containers/AppContainer";
 
 import createEnvironment from "./createEnvironment";
@@ -26,12 +29,17 @@ const environment = createEnvironment({
   resolvers,
   initLocalState: (localRecord: RecordProxy) => {
     localRecord.setValue(assets[0].id, "assetID");
+    localRecord.setValue(0, "authRevision");
   },
 });
 
 const context: TalkContext = {
   relayEnvironment: environment,
-  localeMessages: [],
+  localeBundles: [],
+  localStorage: createInMemoryStorage(),
+  sessionStorage: createInMemoryStorage(),
+  rest: new RestClient("http://localhost/api"),
+  postMessage: new PostMessageService(),
 };
 
 const testRenderer = TestRenderer.create(
diff --git a/src/core/client/stream/test/showAllReplies.spec.tsx b/src/core/client/stream/test/showAllReplies.spec.tsx
index 7bf111990..632cf4c90 100644
--- a/src/core/client/stream/test/showAllReplies.spec.tsx
+++ b/src/core/client/stream/test/showAllReplies.spec.tsx
@@ -5,6 +5,9 @@ import sinon from "sinon";
 
 import { timeout } from "talk-common/utils";
 import { TalkContext, TalkContextProvider } from "talk-framework/lib/bootstrap";
+import { PostMessageService } from "talk-framework/lib/postMessage";
+import { RestClient } from "talk-framework/lib/rest";
+import { createInMemoryStorage } from "talk-framework/lib/storage";
 import AppContainer from "talk-stream/containers/AppContainer";
 
 import createEnvironment from "./createEnvironment";
@@ -83,12 +86,17 @@ const environment = createEnvironment({
   resolvers,
   initLocalState: (localRecord: RecordProxy) => {
     localRecord.setValue(assetStub.id, "assetID");
+    localRecord.setValue(0, "authRevision");
   },
 });
 
 const context: TalkContext = {
   relayEnvironment: environment,
-  localeMessages: [],
+  localeBundles: [],
+  localStorage: createInMemoryStorage(),
+  sessionStorage: createInMemoryStorage(),
+  rest: new RestClient("http://localhost/api"),
+  postMessage: new PostMessageService(),
 };
 
 const testRenderer = TestRenderer.create(

From 1684ed44efc309d5811cc1238feffb5c08affeb3 Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Mon, 27 Aug 2018 21:04:15 +0200
Subject: [PATCH 77/81] Remove obsolete snapshot

---
 .../components/Flex/__snapshots__/Flex.spec.tsx.snap   | 10 ----------
 1 file changed, 10 deletions(-)

diff --git a/src/core/client/ui/components/Flex/__snapshots__/Flex.spec.tsx.snap b/src/core/client/ui/components/Flex/__snapshots__/Flex.spec.tsx.snap
index b4b24209e..826ae9de6 100644
--- a/src/core/client/ui/components/Flex/__snapshots__/Flex.spec.tsx.snap
+++ b/src/core/client/ui/components/Flex/__snapshots__/Flex.spec.tsx.snap
@@ -20,16 +20,6 @@ exports[`renders with half item gutter 1`] = `
 </div>
 `;
 
-exports[`renders with halfe item gutter 1`] = `
-<div
-  className="Flex-root Flex-flex Flex-halfItemGutter"
->
-  <div>
-    Hello World
-  </div>
-</div>
-`;
-
 exports[`renders with item gutter 1`] = `
 <div
   className="Flex-root Flex-flex Flex-itemGutter"

From dcb3c23f56e62e75d62e4a98f1013384645c9c1b Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Mon, 27 Aug 2018 21:36:11 +0200
Subject: [PATCH 78/81] Test, Colorize TextFields, disable on submit

---
 src/core/client/auth/components/App.spec.tsx  | 14 +++++++
 src/core/client/auth/components/App.tsx       |  2 +-
 .../client/auth/components/ForgotPassword.tsx | 16 +++++++-
 .../client/auth/components/ResetPassword.tsx  | 22 ++++++++++-
 src/core/client/auth/components/SignIn.tsx    | 15 ++++++++
 src/core/client/auth/components/SignUp.tsx    | 30 ++++++++++++++-
 .../__snapshots__/App.spec.tsx.snap           |  9 +++++
 .../components/PostCommentFormFake.spec.tsx   |  9 +++++
 .../stream/components/PoweredBy.spec.tsx      | 15 ++++++++
 .../components/UserBoxAuthenticated.spec.tsx  | 16 ++++++++
 .../PostCommentFormFake.spec.tsx.snap         | 26 +++++++++++++
 .../__snapshots__/PoweredBy.spec.tsx.snap     | 22 +++++++++++
 .../UserBoxAuthenticated.spec.tsx.snap        | 38 +++++++++++++++++++
 .../HorizontalGutter.spec.tsx                 | 22 +++++++++++
 .../HorizontalGutter.spec.tsx.snap            | 13 +++++++
 .../ui/components/TextField/TextField.tsx     |  2 +
 src/docs/forms.mdx                            |  2 +-
 17 files changed, 265 insertions(+), 8 deletions(-)
 create mode 100644 src/core/client/auth/components/App.spec.tsx
 create mode 100644 src/core/client/auth/components/__snapshots__/App.spec.tsx.snap
 create mode 100644 src/core/client/stream/components/PostCommentFormFake.spec.tsx
 create mode 100644 src/core/client/stream/components/PoweredBy.spec.tsx
 create mode 100644 src/core/client/stream/components/UserBoxAuthenticated.spec.tsx
 create mode 100644 src/core/client/stream/components/__snapshots__/PostCommentFormFake.spec.tsx.snap
 create mode 100644 src/core/client/stream/components/__snapshots__/PoweredBy.spec.tsx.snap
 create mode 100644 src/core/client/stream/components/__snapshots__/UserBoxAuthenticated.spec.tsx.snap
 create mode 100644 src/core/client/ui/components/HorizontalGutter/HorizontalGutter.spec.tsx
 create mode 100644 src/core/client/ui/components/HorizontalGutter/__snapshots__/HorizontalGutter.spec.tsx.snap

diff --git a/src/core/client/auth/components/App.spec.tsx b/src/core/client/auth/components/App.spec.tsx
new file mode 100644
index 000000000..ec7dd130d
--- /dev/null
+++ b/src/core/client/auth/components/App.spec.tsx
@@ -0,0 +1,14 @@
+import { shallow } from "enzyme";
+import React from "react";
+
+import { PropTypesOf } from "talk-framework/types";
+
+import App from "./App";
+
+it("renders sign in", () => {
+  const props: PropTypesOf<typeof App> = {
+    view: "SIGN_IN",
+  };
+  const wrapper = shallow(<App {...props} />);
+  expect(wrapper).toMatchSnapshot();
+});
diff --git a/src/core/client/auth/components/App.tsx b/src/core/client/auth/components/App.tsx
index f2537db83..103bf95dc 100644
--- a/src/core/client/auth/components/App.tsx
+++ b/src/core/client/auth/components/App.tsx
@@ -30,7 +30,7 @@ const renderView = (view: View) => {
     case "RESET_PASSWORD":
       return <ResetPasswordContainer />;
     default:
-      return <SignInContainer />;
+      throw new Error(`Unknown view ${view}`);
   }
 };
 
diff --git a/src/core/client/auth/components/ForgotPassword.tsx b/src/core/client/auth/components/ForgotPassword.tsx
index 794acebfa..53a13b76a 100644
--- a/src/core/client/auth/components/ForgotPassword.tsx
+++ b/src/core/client/auth/components/ForgotPassword.tsx
@@ -33,7 +33,7 @@ export interface ForgotPasswordForm {
 const ForgotPassword: StatelessComponent<ForgotPasswordForm> = props => {
   return (
     <Form onSubmit={props.onSubmit}>
-      {({ handleSubmit, submitError }) => (
+      {({ handleSubmit, submitting, submitError }) => (
         <form autoComplete="off" onSubmit={handleSubmit}>
           <AutoHeightContainer />
           <HorizontalGutter size="double">
@@ -71,7 +71,13 @@ const ForgotPassword: StatelessComponent<ForgotPasswordForm> = props => {
                       onChange={input.onChange}
                       value={input.value}
                       placeholder="Email Address"
+                      color={
+                        meta.touched && (meta.error || meta.submitError)
+                          ? "error"
+                          : "regular"
+                      }
                       fullWidth
+                      disabled={submitting}
                     />
                   </Localized>
                   {meta.touched &&
@@ -84,7 +90,13 @@ const ForgotPassword: StatelessComponent<ForgotPasswordForm> = props => {
               )}
             </Field>
             <Localized id="forgotPassword-sendEmailButton">
-              <Button variant="filled" color="primary" size="large" fullWidth>
+              <Button
+                variant="filled"
+                color="primary"
+                size="large"
+                fullWidth
+                disabled={submitting}
+              >
                 Send Email
               </Button>
             </Localized>
diff --git a/src/core/client/auth/components/ResetPassword.tsx b/src/core/client/auth/components/ResetPassword.tsx
index dadf210db..fd75246fb 100644
--- a/src/core/client/auth/components/ResetPassword.tsx
+++ b/src/core/client/auth/components/ResetPassword.tsx
@@ -36,7 +36,7 @@ export interface ResetPasswordForm {
 const ResetPassword: StatelessComponent<ResetPasswordForm> = props => {
   return (
     <Form onSubmit={props.onSubmit}>
-      {({ handleSubmit, submitError }) => (
+      {({ handleSubmit, submitting, submitError }) => (
         <form autoComplete="off" onSubmit={handleSubmit}>
           <AutoHeightContainer />
           <HorizontalGutter size="double">
@@ -77,6 +77,12 @@ const ResetPassword: StatelessComponent<ResetPasswordForm> = props => {
                       value={input.value}
                       placeholder="Password"
                       type="password"
+                      color={
+                        meta.touched && (meta.error || meta.submitError)
+                          ? "error"
+                          : "regular"
+                      }
+                      disabled={submitting}
                       fullWidth
                     />
                   </Localized>
@@ -109,6 +115,12 @@ const ResetPassword: StatelessComponent<ResetPasswordForm> = props => {
                       value={input.value}
                       placeholder="Confirm Password"
                       type="password"
+                      color={
+                        meta.touched && (meta.error || meta.submitError)
+                          ? "error"
+                          : "regular"
+                      }
+                      disabled={submitting}
                       fullWidth
                     />
                   </Localized>
@@ -122,7 +134,13 @@ const ResetPassword: StatelessComponent<ResetPasswordForm> = props => {
               )}
             </Field>
             <Localized id="resetPassword-resetPasswordButton">
-              <Button variant="filled" color="primary" size="large" fullWidth>
+              <Button
+                variant="filled"
+                color="primary"
+                size="large"
+                fullWidth
+                disabled={submitting}
+              >
                 Reset Password
               </Button>
             </Localized>
diff --git a/src/core/client/auth/components/SignIn.tsx b/src/core/client/auth/components/SignIn.tsx
index c1058365e..b1bbe514a 100644
--- a/src/core/client/auth/components/SignIn.tsx
+++ b/src/core/client/auth/components/SignIn.tsx
@@ -71,6 +71,12 @@ const SignIn: StatelessComponent<SignInForm> = props => {
                       onChange={input.onChange}
                       value={input.value}
                       placeholder="Email Address"
+                      color={
+                        meta.touched && (meta.error || meta.submitError)
+                          ? "error"
+                          : "regular"
+                      }
+                      disabled={submitting}
                       fullWidth
                     />
                   </Localized>
@@ -100,6 +106,12 @@ const SignIn: StatelessComponent<SignInForm> = props => {
                       value={input.value}
                       placeholder="Password"
                       type="password"
+                      color={
+                        meta.touched && (meta.error || meta.submitError)
+                          ? "error"
+                          : "regular"
+                      }
+                      disabled={submitting}
                       fullWidth
                     />
                   </Localized>
@@ -115,6 +127,7 @@ const SignIn: StatelessComponent<SignInForm> = props => {
                         variant="underlined"
                         color="primary"
                         size="small"
+                        disabled={submitting}
                         onClick={props.onGotoForgotPassword}
                       >
                         Forgot your password?
@@ -130,6 +143,7 @@ const SignIn: StatelessComponent<SignInForm> = props => {
                 color="primary"
                 size="large"
                 type="submit"
+                disabled={submitting}
                 fullWidth
               >
                 Sign in and join the conversation
@@ -143,6 +157,7 @@ const SignIn: StatelessComponent<SignInForm> = props => {
                     variant="underlined"
                     size="small"
                     color="primary"
+                    disabled={submitting}
                     onClick={props.onGotoSignUp}
                   />
                 }
diff --git a/src/core/client/auth/components/SignUp.tsx b/src/core/client/auth/components/SignUp.tsx
index cd511dd42..a5ea25c62 100644
--- a/src/core/client/auth/components/SignUp.tsx
+++ b/src/core/client/auth/components/SignUp.tsx
@@ -41,7 +41,7 @@ export interface SignUpForm {
 const SignUp: StatelessComponent<SignUpForm> = props => {
   return (
     <Form onSubmit={props.onSubmit}>
-      {({ handleSubmit, submitError }) => (
+      {({ handleSubmit, submitting, submitError }) => (
         <form autoComplete="off" onSubmit={handleSubmit}>
           <AutoHeightContainer />
           <HorizontalGutter size="double">
@@ -73,6 +73,12 @@ const SignUp: StatelessComponent<SignUpForm> = props => {
                       onChange={input.onChange}
                       value={input.value}
                       placeholder="Email Address"
+                      color={
+                        meta.touched && (meta.error || meta.submitError)
+                          ? "error"
+                          : "regular"
+                      }
+                      disabled={submitting}
                       fullWidth
                     />
                   </Localized>
@@ -109,6 +115,12 @@ const SignUp: StatelessComponent<SignUpForm> = props => {
                       onChange={input.onChange}
                       value={input.value}
                       placeholder="Username"
+                      color={
+                        meta.touched && (meta.error || meta.submitError)
+                          ? "error"
+                          : "regular"
+                      }
+                      disabled={submitting}
                       fullWidth
                     />
                   </Localized>
@@ -145,6 +157,12 @@ const SignUp: StatelessComponent<SignUpForm> = props => {
                       value={input.value}
                       placeholder="Password"
                       type="password"
+                      color={
+                        meta.touched && (meta.error || meta.submitError)
+                          ? "error"
+                          : "regular"
+                      }
+                      disabled={submitting}
                       fullWidth
                     />
                   </Localized>
@@ -176,6 +194,12 @@ const SignUp: StatelessComponent<SignUpForm> = props => {
                       value={input.value}
                       placeholder="Confirm Password"
                       type="password"
+                      color={
+                        meta.touched && (meta.error || meta.submitError)
+                          ? "error"
+                          : "regular"
+                      }
+                      disabled={submitting}
                       fullWidth
                     />
                   </Localized>
@@ -193,8 +217,9 @@ const SignUp: StatelessComponent<SignUpForm> = props => {
                 variant="filled"
                 color="primary"
                 size="large"
-                fullWidth
                 type="submit"
+                disabled={submitting}
+                fullWidth
               >
                 Sign up and join the conversation
               </Button>
@@ -208,6 +233,7 @@ const SignUp: StatelessComponent<SignUpForm> = props => {
                     size="small"
                     color="primary"
                     onClick={props.onGotoSignIn}
+                    disabled={submitting}
                   />
                 }
               >
diff --git a/src/core/client/auth/components/__snapshots__/App.spec.tsx.snap b/src/core/client/auth/components/__snapshots__/App.spec.tsx.snap
new file mode 100644
index 000000000..449ec1ce6
--- /dev/null
+++ b/src/core/client/auth/components/__snapshots__/App.spec.tsx.snap
@@ -0,0 +1,9 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders sign in 1`] = `
+<div
+  className="App-root"
+>
+  <withContext(createMutationContainer(withContext(createMutationContainer(SignInContainer)))) />
+</div>
+`;
diff --git a/src/core/client/stream/components/PostCommentFormFake.spec.tsx b/src/core/client/stream/components/PostCommentFormFake.spec.tsx
new file mode 100644
index 000000000..0721cd6fe
--- /dev/null
+++ b/src/core/client/stream/components/PostCommentFormFake.spec.tsx
@@ -0,0 +1,9 @@
+import { shallow } from "enzyme";
+import React from "react";
+
+import PostCommentFormFake from "./PostCommentFormFake";
+
+it("renders correctly", () => {
+  const wrapper = shallow(<PostCommentFormFake />);
+  expect(wrapper).toMatchSnapshot();
+});
diff --git a/src/core/client/stream/components/PoweredBy.spec.tsx b/src/core/client/stream/components/PoweredBy.spec.tsx
new file mode 100644
index 000000000..f0f754745
--- /dev/null
+++ b/src/core/client/stream/components/PoweredBy.spec.tsx
@@ -0,0 +1,15 @@
+import { shallow } from "enzyme";
+import { noop } from "lodash";
+import React from "react";
+
+import { PropTypesOf } from "talk-framework/types";
+
+import PoweredBy from "./PoweredBy";
+
+it("renders correctly", () => {
+  const props: PropTypesOf<typeof PoweredBy> = {
+    className: "custom",
+  };
+  const wrapper = shallow(<PoweredBy {...props} />);
+  expect(wrapper).toMatchSnapshot();
+});
diff --git a/src/core/client/stream/components/UserBoxAuthenticated.spec.tsx b/src/core/client/stream/components/UserBoxAuthenticated.spec.tsx
new file mode 100644
index 000000000..5e658f287
--- /dev/null
+++ b/src/core/client/stream/components/UserBoxAuthenticated.spec.tsx
@@ -0,0 +1,16 @@
+import { shallow } from "enzyme";
+import { noop } from "lodash";
+import React from "react";
+
+import { PropTypesOf } from "talk-framework/types";
+
+import UserBoxAuthenticated from "./UserBoxAuthenticated";
+
+it("renders correctly", () => {
+  const props: PropTypesOf<typeof UserBoxAuthenticated> = {
+    onSignOut: noop,
+    username: "Username",
+  };
+  const wrapper = shallow(<UserBoxAuthenticated {...props} />);
+  expect(wrapper).toMatchSnapshot();
+});
diff --git a/src/core/client/stream/components/__snapshots__/PostCommentFormFake.spec.tsx.snap b/src/core/client/stream/components/__snapshots__/PostCommentFormFake.spec.tsx.snap
new file mode 100644
index 000000000..2f29d6793
--- /dev/null
+++ b/src/core/client/stream/components/__snapshots__/PostCommentFormFake.spec.tsx.snap
@@ -0,0 +1,26 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders correctly 1`] = `
+<withPropsOnChange(HorizontalGutter)
+  className="PostCommentFormFake-root"
+>
+  <textarea
+    className="PostCommentFormFake-textarea"
+    disabled={true}
+    placeholder="Post a comment"
+  />
+  <Localized
+    id="comments-PostCommentFormFake-signInAndJoin"
+  >
+    <withPropsOnChange(Button)
+      color="primary"
+      disabled={true}
+      fullWidth={true}
+      type="submit"
+      variant="filled"
+    >
+      Sign in and join the conversation
+    </withPropsOnChange(Button)>
+  </Localized>
+</withPropsOnChange(HorizontalGutter)>
+`;
diff --git a/src/core/client/stream/components/__snapshots__/PoweredBy.spec.tsx.snap b/src/core/client/stream/components/__snapshots__/PoweredBy.spec.tsx.snap
new file mode 100644
index 000000000..5c043b8db
--- /dev/null
+++ b/src/core/client/stream/components/__snapshots__/PoweredBy.spec.tsx.snap
@@ -0,0 +1,22 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders correctly 1`] = `
+<div
+  className="custom"
+>
+  <withPropsOnChange(Typography)
+    color="textSecondary"
+    container="span"
+    variant="inputDescription"
+  >
+    Powered by
+  </withPropsOnChange(Typography)>
+   
+  <withPropsOnChange(Typography)
+    container="span"
+    variant="heading4"
+  >
+    The Coral Project
+  </withPropsOnChange(Typography)>
+</div>
+`;
diff --git a/src/core/client/stream/components/__snapshots__/UserBoxAuthenticated.spec.tsx.snap b/src/core/client/stream/components/__snapshots__/UserBoxAuthenticated.spec.tsx.snap
new file mode 100644
index 000000000..80f20f2b3
--- /dev/null
+++ b/src/core/client/stream/components/__snapshots__/UserBoxAuthenticated.spec.tsx.snap
@@ -0,0 +1,38 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders correctly 1`] = `
+<withPropsOnChange(Flex)
+  itemGutter="half"
+  wrap={true}
+>
+  <Localized
+    id="comments-userBoxAuthenticated-signedInAs"
+    username={<Username />}
+  >
+    <withPropsOnChange(Typography)
+      container="div"
+      variant="bodyCopy"
+    >
+      Signed in as &lt;username&gt;&lt;/username&gt;.
+    </withPropsOnChange(Typography)>
+  </Localized>
+  <Localized
+    button={
+      <withPropsOnChange(Button)
+        color="primary"
+        onClick={[Function]}
+        size="small"
+        variant="underlined"
+      />
+    }
+    id="comments-userBoxAuthenticated-notYou"
+  >
+    <withPropsOnChange(Typography)
+      container={[Function]}
+      variant="bodyCopy"
+    >
+      Not you? &lt;button&gt;Sign Out&lt;/button&gt;
+    </withPropsOnChange(Typography)>
+  </Localized>
+</withPropsOnChange(Flex)>
+`;
diff --git a/src/core/client/ui/components/HorizontalGutter/HorizontalGutter.spec.tsx b/src/core/client/ui/components/HorizontalGutter/HorizontalGutter.spec.tsx
new file mode 100644
index 000000000..2518a0e5f
--- /dev/null
+++ b/src/core/client/ui/components/HorizontalGutter/HorizontalGutter.spec.tsx
@@ -0,0 +1,22 @@
+import React from "react";
+import TestRenderer from "react-test-renderer";
+
+import { PropTypesOf } from "talk-ui/types";
+
+import HorizontalGutter from "./HorizontalGutter";
+
+it("renders correctly", () => {
+  const props: PropTypesOf<typeof HorizontalGutter> = {
+    className: "custom",
+  };
+  const renderer = TestRenderer.create(<HorizontalGutter {...props} />);
+  expect(renderer.toJSON()).toMatchSnapshot();
+});
+
+it("renders double size", () => {
+  const props: PropTypesOf<typeof HorizontalGutter> = {
+    size: "double",
+  };
+  const renderer = TestRenderer.create(<HorizontalGutter {...props} />);
+  expect(renderer.toJSON()).toMatchSnapshot();
+});
diff --git a/src/core/client/ui/components/HorizontalGutter/__snapshots__/HorizontalGutter.spec.tsx.snap b/src/core/client/ui/components/HorizontalGutter/__snapshots__/HorizontalGutter.spec.tsx.snap
new file mode 100644
index 000000000..15c0915ed
--- /dev/null
+++ b/src/core/client/ui/components/HorizontalGutter/__snapshots__/HorizontalGutter.spec.tsx.snap
@@ -0,0 +1,13 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders correctly 1`] = `
+<div
+  className="HorizontalGutter-root custom HorizontalGutter-full"
+/>
+`;
+
+exports[`renders double size 1`] = `
+<div
+  className="HorizontalGutter-root HorizontalGutter-double"
+/>
+`;
diff --git a/src/core/client/ui/components/TextField/TextField.tsx b/src/core/client/ui/components/TextField/TextField.tsx
index 46d223ff3..9da45ef58 100644
--- a/src/core/client/ui/components/TextField/TextField.tsx
+++ b/src/core/client/ui/components/TextField/TextField.tsx
@@ -49,6 +49,8 @@ export interface TextFieldProps {
    * onChange
    */
   onChange?: EventHandler<ChangeEvent<HTMLInputElement>>;
+
+  disabled?: boolean;
 }
 
 const TextField: StatelessComponent<TextFieldProps> = props => {
diff --git a/src/docs/forms.mdx b/src/docs/forms.mdx
index cfd1ab523..4edcf0d7a 100644
--- a/src/docs/forms.mdx
+++ b/src/docs/forms.mdx
@@ -57,7 +57,7 @@ import { InputLabel, CallOut, ValidationMessage, TextField, InputDescription, Fl
     <FormField>
       <InputLabel defaultValue="something.com">Username</InputLabel>
       <InputDescription>A unique identifier displayed on your comments. You may use “_” and “.”</InputDescription>
-      <TextField fullWidth/>
+      <TextField color="error" fullWidth />
       <ValidationMessage fullWidth>Invalid characters. Try again.</ValidationMessage>
     </FormField>
 

From 99e34979d1ba21cf24d2d272dbca5410b5c3bb82 Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Mon, 27 Aug 2018 21:58:28 +0200
Subject: [PATCH 79/81] Add test

---
 src/core/client/stream/components/PoweredBy.spec.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/core/client/stream/components/PoweredBy.spec.tsx b/src/core/client/stream/components/PoweredBy.spec.tsx
index f0f754745..f31db2f20 100644
--- a/src/core/client/stream/components/PoweredBy.spec.tsx
+++ b/src/core/client/stream/components/PoweredBy.spec.tsx
@@ -1,5 +1,4 @@
 import { shallow } from "enzyme";
-import { noop } from "lodash";
 import React from "react";
 
 import { PropTypesOf } from "talk-framework/types";

From 9945c099a7e16cb89f836a82ae2ca9a3aeaa988f Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Tue, 28 Aug 2018 01:35:13 +0200
Subject: [PATCH 80/81] Add integration tests

---
 src/core/client/auth/components/SignIn.tsx    |    2 +
 src/core/client/auth/components/SignUp.tsx    |    1 +
 .../auth/containers/AutoHeightContainer.tsx   |   11 +-
 .../client/auth/mutations/SignUpMutation.ts   |    6 +-
 .../test/__snapshots__/signIn.spec.tsx.snap   |  971 +++++++
 .../test/__snapshots__/signUp.spec.tsx.snap   | 2355 +++++++++++++++++
 .../client/auth/test/createEnvironment.ts     |   28 +
 .../auth/test/navigation.disabledspec.tsx     |   59 +
 src/core/client/auth/test/signIn.spec.tsx     |  140 +
 src/core/client/auth/test/signUp.spec.tsx     |  191 ++
 .../ui/components/TextField/TextField.tsx     |    1 +
 src/core/common/utils/animationFrame.ts       |    4 +
 src/core/common/utils/index.ts                |    1 +
 src/locales/en-US/auth.ftl                    |    1 -
 src/locales/en-US/framework.ftl               |    1 -
 15 files changed, 3759 insertions(+), 13 deletions(-)
 create mode 100644 src/core/client/auth/test/__snapshots__/signIn.spec.tsx.snap
 create mode 100644 src/core/client/auth/test/__snapshots__/signUp.spec.tsx.snap
 create mode 100644 src/core/client/auth/test/createEnvironment.ts
 create mode 100644 src/core/client/auth/test/navigation.disabledspec.tsx
 create mode 100644 src/core/client/auth/test/signIn.spec.tsx
 create mode 100644 src/core/client/auth/test/signUp.spec.tsx
 create mode 100644 src/core/common/utils/animationFrame.ts

diff --git a/src/core/client/auth/components/SignIn.tsx b/src/core/client/auth/components/SignIn.tsx
index b1bbe514a..fb973eba3 100644
--- a/src/core/client/auth/components/SignIn.tsx
+++ b/src/core/client/auth/components/SignIn.tsx
@@ -124,6 +124,7 @@ const SignIn: StatelessComponent<SignInForm> = props => {
                   <Flex justifyContent="flex-end">
                     <Localized id="signIn-forgotYourPassword">
                       <Button
+                        id="signIn-gotoForgotPasswordButton"
                         variant="underlined"
                         color="primary"
                         size="small"
@@ -154,6 +155,7 @@ const SignIn: StatelessComponent<SignInForm> = props => {
                 id="signIn-noAccountSignUp"
                 button={
                   <Button
+                    id="signIn-gotoSignUpButton"
                     variant="underlined"
                     size="small"
                     color="primary"
diff --git a/src/core/client/auth/components/SignUp.tsx b/src/core/client/auth/components/SignUp.tsx
index a5ea25c62..eee0abd6f 100644
--- a/src/core/client/auth/components/SignUp.tsx
+++ b/src/core/client/auth/components/SignUp.tsx
@@ -229,6 +229,7 @@ const SignUp: StatelessComponent<SignUpForm> = props => {
                 id="signUp-accountAvailableSignIn"
                 button={
                   <Button
+                    id="signUp-gotoSignInButton"
                     variant="underlined"
                     size="small"
                     color="primary"
diff --git a/src/core/client/auth/containers/AutoHeightContainer.tsx b/src/core/client/auth/containers/AutoHeightContainer.tsx
index 615e8fdc9..309c89901 100644
--- a/src/core/client/auth/containers/AutoHeightContainer.tsx
+++ b/src/core/client/auth/containers/AutoHeightContainer.tsx
@@ -7,17 +7,8 @@ import resizePopup from "../dom/resizePopup";
  * when this is mounted or updated.
  */
 export default class AutoHeightContainer extends Component {
-  private timeout: any = null;
-
-  private updateWindowSizeCallback = () => {
-    clearTimeout(this.timeout);
-    this.timeout = setTimeout(() => {
-      resizePopup();
-    }, 0);
-  };
-
   private updateWindowSize() {
-    window.requestAnimationFrame(this.updateWindowSizeCallback);
+    window.requestAnimationFrame(() => setTimeout(resizePopup, 0));
   }
 
   public componentDidMount() {
diff --git a/src/core/client/auth/mutations/SignUpMutation.ts b/src/core/client/auth/mutations/SignUpMutation.ts
index f5afbaa77..dc66aff31 100644
--- a/src/core/client/auth/mutations/SignUpMutation.ts
+++ b/src/core/client/auth/mutations/SignUpMutation.ts
@@ -1,3 +1,4 @@
+import { pick } from "lodash";
 import { Environment } from "relay-runtime";
 
 import { TalkContext } from "talk-framework/lib/bootstrap";
@@ -12,7 +13,10 @@ export async function commit(
   { rest, postMessage }: TalkContext
 ) {
   try {
-    const result = await signUp(rest, input);
+    const result = await signUp(
+      rest,
+      pick(input, "email", "password", "username")
+    );
     postMessage.send("setAuthToken", result.token, window.opener);
     window.close();
   } catch (err) {
diff --git a/src/core/client/auth/test/__snapshots__/signIn.spec.tsx.snap b/src/core/client/auth/test/__snapshots__/signIn.spec.tsx.snap
new file mode 100644
index 000000000..33a6f001a
--- /dev/null
+++ b/src/core/client/auth/test/__snapshots__/signIn.spec.tsx.snap
@@ -0,0 +1,971 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`accepts correct password 1`] = `
+<div
+  className="App-root"
+>
+  <form
+    autoComplete="off"
+    onSubmit={[Function]}
+  >
+    <div
+      className="HorizontalGutter-root HorizontalGutter-double"
+    >
+      <h1
+        className="Typography-root Typography-heading1 Typography-colorTextPrimary Typography-alignCenter"
+      >
+        Sign in to join the conversation
+      </h1>
+      <div
+        className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+      >
+        <label
+          className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+        >
+          Email Address
+        </label>
+        <input
+          className="TextField-root TextField-colorRegular TextField-fullWidth"
+          disabled={false}
+          name="email"
+          onChange={[Function]}
+          placeholder="Email Address"
+          type="text"
+          value="hans@test.com"
+        />
+      </div>
+      <div
+        className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+      >
+        <label
+          className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+        >
+          Password
+        </label>
+        <input
+          className="TextField-root TextField-colorRegular TextField-fullWidth"
+          disabled={false}
+          name="password"
+          onChange={[Function]}
+          placeholder="Password"
+          type="password"
+          value="testtest"
+        />
+        <div
+          className="Flex-root Flex-flex Flex-justifyFlexEnd"
+        >
+          <button
+            className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantUnderlined"
+            disabled={false}
+            id="signIn-gotoForgotPasswordButton"
+            onBlur={[Function]}
+            onClick={[Function]}
+            onFocus={[Function]}
+            onMouseDown={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            onTouchEnd={[Function]}
+            type="button"
+          >
+            Forgot your password?
+          </button>
+        </div>
+      </div>
+      <button
+        className="BaseButton-root Button-root Button-sizeLarge Button-colorPrimary Button-variantFilled Button-fullWidth"
+        disabled={false}
+        onBlur={[Function]}
+        onFocus={[Function]}
+        onMouseDown={[Function]}
+        onMouseOut={[Function]}
+        onMouseOver={[Function]}
+        onTouchEnd={[Function]}
+        type="submit"
+      >
+        Sign in and join the conversation
+      </button>
+      <div
+        className="Flex-root Flex-flex Flex-justifyCenter"
+      >
+        <div
+          className="Flex-root Typography-root Typography-bodyCopy Typography-colorTextPrimary Flex-flex"
+        >
+          <span>
+            Don't have an account? &lt;button&gt;Sign Up&lt;/button&gt;
+          </span>
+        </div>
+      </div>
+    </div>
+  </form>
+</div>
+`;
+
+exports[`accepts valid email 1`] = `
+<div
+  className="App-root"
+>
+  <form
+    autoComplete="off"
+    onSubmit={[Function]}
+  >
+    <div
+      className="HorizontalGutter-root HorizontalGutter-double"
+    >
+      <h1
+        className="Typography-root Typography-heading1 Typography-colorTextPrimary Typography-alignCenter"
+      >
+        Sign in to join the conversation
+      </h1>
+      <div
+        className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+      >
+        <label
+          className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+        >
+          Email Address
+        </label>
+        <input
+          className="TextField-root TextField-colorRegular TextField-fullWidth"
+          disabled={false}
+          name="email"
+          onChange={[Function]}
+          placeholder="Email Address"
+          type="text"
+          value="hans@test.com"
+        />
+      </div>
+      <div
+        className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+      >
+        <label
+          className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+        >
+          Password
+        </label>
+        <input
+          className="TextField-root TextField-colorError TextField-fullWidth"
+          disabled={false}
+          name="password"
+          onChange={[Function]}
+          placeholder="Password"
+          type="password"
+          value=""
+        />
+        <div
+          className="ValidationMessage-root ValidationMessage-colorError ValidationMessage-fullWidth"
+        >
+          <span
+            className="Icon-root ValidationMessage-icon Icon-sm"
+          >
+            warning
+          </span>
+          <span>
+            This field is required.
+          </span>
+        </div>
+        <div
+          className="Flex-root Flex-flex Flex-justifyFlexEnd"
+        >
+          <button
+            className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantUnderlined"
+            disabled={false}
+            id="signIn-gotoForgotPasswordButton"
+            onBlur={[Function]}
+            onClick={[Function]}
+            onFocus={[Function]}
+            onMouseDown={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            onTouchEnd={[Function]}
+            type="button"
+          >
+            Forgot your password?
+          </button>
+        </div>
+      </div>
+      <button
+        className="BaseButton-root Button-root Button-sizeLarge Button-colorPrimary Button-variantFilled Button-fullWidth"
+        disabled={false}
+        onBlur={[Function]}
+        onFocus={[Function]}
+        onMouseDown={[Function]}
+        onMouseOut={[Function]}
+        onMouseOver={[Function]}
+        onTouchEnd={[Function]}
+        type="submit"
+      >
+        Sign in and join the conversation
+      </button>
+      <div
+        className="Flex-root Flex-flex Flex-justifyCenter"
+      >
+        <div
+          className="Flex-root Typography-root Typography-bodyCopy Typography-colorTextPrimary Flex-flex"
+        >
+          <span>
+            Don't have an account? &lt;button&gt;Sign Up&lt;/button&gt;
+          </span>
+        </div>
+      </div>
+    </div>
+  </form>
+</div>
+`;
+
+exports[`checks for invalid email 1`] = `
+<div
+  className="App-root"
+>
+  <form
+    autoComplete="off"
+    onSubmit={[Function]}
+  >
+    <div
+      className="HorizontalGutter-root HorizontalGutter-double"
+    >
+      <h1
+        className="Typography-root Typography-heading1 Typography-colorTextPrimary Typography-alignCenter"
+      >
+        Sign in to join the conversation
+      </h1>
+      <div
+        className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+      >
+        <label
+          className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+        >
+          Email Address
+        </label>
+        <input
+          className="TextField-root TextField-colorError TextField-fullWidth"
+          disabled={false}
+          name="email"
+          onChange={[Function]}
+          placeholder="Email Address"
+          type="text"
+          value="invalid-email"
+        />
+        <div
+          className="ValidationMessage-root ValidationMessage-colorError ValidationMessage-fullWidth"
+        >
+          <span
+            className="Icon-root ValidationMessage-icon Icon-sm"
+          >
+            warning
+          </span>
+          <span>
+            Please enter a valid email address.
+          </span>
+        </div>
+      </div>
+      <div
+        className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+      >
+        <label
+          className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+        >
+          Password
+        </label>
+        <input
+          className="TextField-root TextField-colorError TextField-fullWidth"
+          disabled={false}
+          name="password"
+          onChange={[Function]}
+          placeholder="Password"
+          type="password"
+          value=""
+        />
+        <div
+          className="ValidationMessage-root ValidationMessage-colorError ValidationMessage-fullWidth"
+        >
+          <span
+            className="Icon-root ValidationMessage-icon Icon-sm"
+          >
+            warning
+          </span>
+          <span>
+            This field is required.
+          </span>
+        </div>
+        <div
+          className="Flex-root Flex-flex Flex-justifyFlexEnd"
+        >
+          <button
+            className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantUnderlined"
+            disabled={false}
+            id="signIn-gotoForgotPasswordButton"
+            onBlur={[Function]}
+            onClick={[Function]}
+            onFocus={[Function]}
+            onMouseDown={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            onTouchEnd={[Function]}
+            type="button"
+          >
+            Forgot your password?
+          </button>
+        </div>
+      </div>
+      <button
+        className="BaseButton-root Button-root Button-sizeLarge Button-colorPrimary Button-variantFilled Button-fullWidth"
+        disabled={false}
+        onBlur={[Function]}
+        onFocus={[Function]}
+        onMouseDown={[Function]}
+        onMouseOut={[Function]}
+        onMouseOver={[Function]}
+        onTouchEnd={[Function]}
+        type="submit"
+      >
+        Sign in and join the conversation
+      </button>
+      <div
+        className="Flex-root Flex-flex Flex-justifyCenter"
+      >
+        <div
+          className="Flex-root Typography-root Typography-bodyCopy Typography-colorTextPrimary Flex-flex"
+        >
+          <span>
+            Don't have an account? &lt;button&gt;Sign Up&lt;/button&gt;
+          </span>
+        </div>
+      </div>
+    </div>
+  </form>
+</div>
+`;
+
+exports[`renders sign in form 1`] = `
+<div
+  className="App-root"
+>
+  <form
+    autoComplete="off"
+    onSubmit={[Function]}
+  >
+    <div
+      className="HorizontalGutter-root HorizontalGutter-double"
+    >
+      <h1
+        className="Typography-root Typography-heading1 Typography-colorTextPrimary Typography-alignCenter"
+      >
+        Sign in to join the conversation
+      </h1>
+      <div
+        className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+      >
+        <label
+          className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+        >
+          Email Address
+        </label>
+        <input
+          className="TextField-root TextField-colorRegular TextField-fullWidth"
+          disabled={false}
+          name="email"
+          onChange={[Function]}
+          placeholder="Email Address"
+          type="text"
+          value=""
+        />
+      </div>
+      <div
+        className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+      >
+        <label
+          className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+        >
+          Password
+        </label>
+        <input
+          className="TextField-root TextField-colorRegular TextField-fullWidth"
+          disabled={false}
+          name="password"
+          onChange={[Function]}
+          placeholder="Password"
+          type="password"
+          value=""
+        />
+        <div
+          className="Flex-root Flex-flex Flex-justifyFlexEnd"
+        >
+          <button
+            className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantUnderlined"
+            disabled={false}
+            id="signIn-gotoForgotPasswordButton"
+            onBlur={[Function]}
+            onClick={[Function]}
+            onFocus={[Function]}
+            onMouseDown={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            onTouchEnd={[Function]}
+            type="button"
+          >
+            Forgot your password?
+          </button>
+        </div>
+      </div>
+      <button
+        className="BaseButton-root Button-root Button-sizeLarge Button-colorPrimary Button-variantFilled Button-fullWidth"
+        disabled={false}
+        onBlur={[Function]}
+        onFocus={[Function]}
+        onMouseDown={[Function]}
+        onMouseOut={[Function]}
+        onMouseOver={[Function]}
+        onTouchEnd={[Function]}
+        type="submit"
+      >
+        Sign in and join the conversation
+      </button>
+      <div
+        className="Flex-root Flex-flex Flex-justifyCenter"
+      >
+        <div
+          className="Flex-root Typography-root Typography-bodyCopy Typography-colorTextPrimary Flex-flex"
+        >
+          <span>
+            Don't have an account? &lt;button&gt;Sign Up&lt;/button&gt;
+          </span>
+        </div>
+      </div>
+    </div>
+  </form>
+</div>
+`;
+
+exports[`shows error when submitting empty form 1`] = `
+<div
+  className="App-root"
+>
+  <form
+    autoComplete="off"
+    onSubmit={[Function]}
+  >
+    <div
+      className="HorizontalGutter-root HorizontalGutter-double"
+    >
+      <h1
+        className="Typography-root Typography-heading1 Typography-colorTextPrimary Typography-alignCenter"
+      >
+        Sign in to join the conversation
+      </h1>
+      <div
+        className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+      >
+        <label
+          className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+        >
+          Email Address
+        </label>
+        <input
+          className="TextField-root TextField-colorError TextField-fullWidth"
+          disabled={false}
+          name="email"
+          onChange={[Function]}
+          placeholder="Email Address"
+          type="text"
+          value=""
+        />
+        <div
+          className="ValidationMessage-root ValidationMessage-colorError ValidationMessage-fullWidth"
+        >
+          <span
+            className="Icon-root ValidationMessage-icon Icon-sm"
+          >
+            warning
+          </span>
+          <span>
+            This field is required.
+          </span>
+        </div>
+      </div>
+      <div
+        className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+      >
+        <label
+          className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+        >
+          Password
+        </label>
+        <input
+          className="TextField-root TextField-colorError TextField-fullWidth"
+          disabled={false}
+          name="password"
+          onChange={[Function]}
+          placeholder="Password"
+          type="password"
+          value=""
+        />
+        <div
+          className="ValidationMessage-root ValidationMessage-colorError ValidationMessage-fullWidth"
+        >
+          <span
+            className="Icon-root ValidationMessage-icon Icon-sm"
+          >
+            warning
+          </span>
+          <span>
+            This field is required.
+          </span>
+        </div>
+        <div
+          className="Flex-root Flex-flex Flex-justifyFlexEnd"
+        >
+          <button
+            className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantUnderlined"
+            disabled={false}
+            id="signIn-gotoForgotPasswordButton"
+            onBlur={[Function]}
+            onClick={[Function]}
+            onFocus={[Function]}
+            onMouseDown={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            onTouchEnd={[Function]}
+            type="button"
+          >
+            Forgot your password?
+          </button>
+        </div>
+      </div>
+      <button
+        className="BaseButton-root Button-root Button-sizeLarge Button-colorPrimary Button-variantFilled Button-fullWidth"
+        disabled={false}
+        onBlur={[Function]}
+        onFocus={[Function]}
+        onMouseDown={[Function]}
+        onMouseOut={[Function]}
+        onMouseOver={[Function]}
+        onTouchEnd={[Function]}
+        type="submit"
+      >
+        Sign in and join the conversation
+      </button>
+      <div
+        className="Flex-root Flex-flex Flex-justifyCenter"
+      >
+        <div
+          className="Flex-root Typography-root Typography-bodyCopy Typography-colorTextPrimary Flex-flex"
+        >
+          <span>
+            Don't have an account? &lt;button&gt;Sign Up&lt;/button&gt;
+          </span>
+        </div>
+      </div>
+    </div>
+  </form>
+</div>
+`;
+
+exports[`shows server error 1`] = `
+<div
+  className="App-root"
+>
+  <form
+    autoComplete="off"
+    onSubmit={[Function]}
+  >
+    <div
+      className="HorizontalGutter-root HorizontalGutter-double"
+    >
+      <h1
+        className="Typography-root Typography-heading1 Typography-colorTextPrimary Typography-alignCenter"
+      >
+        Sign in to join the conversation
+      </h1>
+      <div
+        className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+      >
+        <label
+          className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+        >
+          Email Address
+        </label>
+        <input
+          className="TextField-root TextField-colorRegular TextField-fullWidth"
+          disabled={true}
+          name="email"
+          onChange={[Function]}
+          placeholder="Email Address"
+          type="text"
+          value="hans@test.com"
+        />
+      </div>
+      <div
+        className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+      >
+        <label
+          className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+        >
+          Password
+        </label>
+        <input
+          className="TextField-root TextField-colorRegular TextField-fullWidth"
+          disabled={true}
+          name="password"
+          onChange={[Function]}
+          placeholder="Password"
+          type="password"
+          value="testtest"
+        />
+        <div
+          className="Flex-root Flex-flex Flex-justifyFlexEnd"
+        >
+          <button
+            className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantUnderlined Button-disabled"
+            disabled={true}
+            id="signIn-gotoForgotPasswordButton"
+            onBlur={[Function]}
+            onClick={[Function]}
+            onFocus={[Function]}
+            onMouseDown={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            onTouchEnd={[Function]}
+            type="button"
+          >
+            Forgot your password?
+          </button>
+        </div>
+      </div>
+      <button
+        className="BaseButton-root Button-root Button-sizeLarge Button-colorPrimary Button-variantFilled Button-fullWidth Button-disabled"
+        disabled={true}
+        onBlur={[Function]}
+        onFocus={[Function]}
+        onMouseDown={[Function]}
+        onMouseOut={[Function]}
+        onMouseOver={[Function]}
+        onTouchEnd={[Function]}
+        type="submit"
+      >
+        Sign in and join the conversation
+      </button>
+      <div
+        className="Flex-root Flex-flex Flex-justifyCenter"
+      >
+        <div
+          className="Flex-root Typography-root Typography-bodyCopy Typography-colorTextPrimary Flex-flex"
+        >
+          <span>
+            Don't have an account? &lt;button&gt;Sign Up&lt;/button&gt;
+          </span>
+        </div>
+      </div>
+    </div>
+  </form>
+</div>
+`;
+
+exports[`shows server error 2`] = `
+<div
+  className="App-root"
+>
+  <form
+    autoComplete="off"
+    onSubmit={[Function]}
+  >
+    <div
+      className="HorizontalGutter-root HorizontalGutter-double"
+    >
+      <h1
+        className="Typography-root Typography-heading1 Typography-colorTextPrimary Typography-alignCenter"
+      >
+        Sign in to join the conversation
+      </h1>
+      <div
+        className="CallOut-root CallOut-colorError CallOut-fullWidth"
+      >
+        Server Error
+      </div>
+      <div
+        className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+      >
+        <label
+          className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+        >
+          Email Address
+        </label>
+        <input
+          className="TextField-root TextField-colorRegular TextField-fullWidth"
+          disabled={false}
+          name="email"
+          onChange={[Function]}
+          placeholder="Email Address"
+          type="text"
+          value="hans@test.com"
+        />
+      </div>
+      <div
+        className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+      >
+        <label
+          className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+        >
+          Password
+        </label>
+        <input
+          className="TextField-root TextField-colorRegular TextField-fullWidth"
+          disabled={false}
+          name="password"
+          onChange={[Function]}
+          placeholder="Password"
+          type="password"
+          value="testtest"
+        />
+        <div
+          className="Flex-root Flex-flex Flex-justifyFlexEnd"
+        >
+          <button
+            className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantUnderlined"
+            disabled={false}
+            id="signIn-gotoForgotPasswordButton"
+            onBlur={[Function]}
+            onClick={[Function]}
+            onFocus={[Function]}
+            onMouseDown={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            onTouchEnd={[Function]}
+            type="button"
+          >
+            Forgot your password?
+          </button>
+        </div>
+      </div>
+      <button
+        className="BaseButton-root Button-root Button-sizeLarge Button-colorPrimary Button-variantFilled Button-fullWidth"
+        disabled={false}
+        onBlur={[Function]}
+        onFocus={[Function]}
+        onMouseDown={[Function]}
+        onMouseOut={[Function]}
+        onMouseOver={[Function]}
+        onTouchEnd={[Function]}
+        type="submit"
+      >
+        Sign in and join the conversation
+      </button>
+      <div
+        className="Flex-root Flex-flex Flex-justifyCenter"
+      >
+        <div
+          className="Flex-root Typography-root Typography-bodyCopy Typography-colorTextPrimary Flex-flex"
+        >
+          <span>
+            Don't have an account? &lt;button&gt;Sign Up&lt;/button&gt;
+          </span>
+        </div>
+      </div>
+    </div>
+  </form>
+</div>
+`;
+
+exports[`submits form successfully 1`] = `
+<div
+  className="App-root"
+>
+  <form
+    autoComplete="off"
+    onSubmit={[Function]}
+  >
+    <div
+      className="HorizontalGutter-root HorizontalGutter-double"
+    >
+      <h1
+        className="Typography-root Typography-heading1 Typography-colorTextPrimary Typography-alignCenter"
+      >
+        Sign in to join the conversation
+      </h1>
+      <div
+        className="CallOut-root CallOut-colorError CallOut-fullWidth"
+      >
+        Server Error
+      </div>
+      <div
+        className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+      >
+        <label
+          className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+        >
+          Email Address
+        </label>
+        <input
+          className="TextField-root TextField-colorRegular TextField-fullWidth"
+          disabled={true}
+          name="email"
+          onChange={[Function]}
+          placeholder="Email Address"
+          type="text"
+          value="hans@test.com"
+        />
+      </div>
+      <div
+        className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+      >
+        <label
+          className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+        >
+          Password
+        </label>
+        <input
+          className="TextField-root TextField-colorRegular TextField-fullWidth"
+          disabled={true}
+          name="password"
+          onChange={[Function]}
+          placeholder="Password"
+          type="password"
+          value="testtest"
+        />
+        <div
+          className="Flex-root Flex-flex Flex-justifyFlexEnd"
+        >
+          <button
+            className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantUnderlined Button-disabled"
+            disabled={true}
+            id="signIn-gotoForgotPasswordButton"
+            onBlur={[Function]}
+            onClick={[Function]}
+            onFocus={[Function]}
+            onMouseDown={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            onTouchEnd={[Function]}
+            type="button"
+          >
+            Forgot your password?
+          </button>
+        </div>
+      </div>
+      <button
+        className="BaseButton-root Button-root Button-sizeLarge Button-colorPrimary Button-variantFilled Button-fullWidth Button-disabled"
+        disabled={true}
+        onBlur={[Function]}
+        onFocus={[Function]}
+        onMouseDown={[Function]}
+        onMouseOut={[Function]}
+        onMouseOver={[Function]}
+        onTouchEnd={[Function]}
+        type="submit"
+      >
+        Sign in and join the conversation
+      </button>
+      <div
+        className="Flex-root Flex-flex Flex-justifyCenter"
+      >
+        <div
+          className="Flex-root Typography-root Typography-bodyCopy Typography-colorTextPrimary Flex-flex"
+        >
+          <span>
+            Don't have an account? &lt;button&gt;Sign Up&lt;/button&gt;
+          </span>
+        </div>
+      </div>
+    </div>
+  </form>
+</div>
+`;
+
+exports[`submits form successfully 2`] = `
+<div
+  className="App-root"
+>
+  <form
+    autoComplete="off"
+    onSubmit={[Function]}
+  >
+    <div
+      className="HorizontalGutter-root HorizontalGutter-double"
+    >
+      <h1
+        className="Typography-root Typography-heading1 Typography-colorTextPrimary Typography-alignCenter"
+      >
+        Sign in to join the conversation
+      </h1>
+      <div
+        className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+      >
+        <label
+          className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+        >
+          Email Address
+        </label>
+        <input
+          className="TextField-root TextField-colorRegular TextField-fullWidth"
+          disabled={false}
+          name="email"
+          onChange={[Function]}
+          placeholder="Email Address"
+          type="text"
+          value=""
+        />
+      </div>
+      <div
+        className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+      >
+        <label
+          className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+        >
+          Password
+        </label>
+        <input
+          className="TextField-root TextField-colorRegular TextField-fullWidth"
+          disabled={false}
+          name="password"
+          onChange={[Function]}
+          placeholder="Password"
+          type="password"
+          value=""
+        />
+        <div
+          className="Flex-root Flex-flex Flex-justifyFlexEnd"
+        >
+          <button
+            className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantUnderlined"
+            disabled={false}
+            id="signIn-gotoForgotPasswordButton"
+            onBlur={[Function]}
+            onClick={[Function]}
+            onFocus={[Function]}
+            onMouseDown={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            onTouchEnd={[Function]}
+            type="button"
+          >
+            Forgot your password?
+          </button>
+        </div>
+      </div>
+      <button
+        className="BaseButton-root Button-root Button-sizeLarge Button-colorPrimary Button-variantFilled Button-fullWidth"
+        disabled={false}
+        onBlur={[Function]}
+        onFocus={[Function]}
+        onMouseDown={[Function]}
+        onMouseOut={[Function]}
+        onMouseOver={[Function]}
+        onTouchEnd={[Function]}
+        type="submit"
+      >
+        Sign in and join the conversation
+      </button>
+      <div
+        className="Flex-root Flex-flex Flex-justifyCenter"
+      >
+        <div
+          className="Flex-root Typography-root Typography-bodyCopy Typography-colorTextPrimary Flex-flex"
+        >
+          <span>
+            Don't have an account? &lt;button&gt;Sign Up&lt;/button&gt;
+          </span>
+        </div>
+      </div>
+    </div>
+  </form>
+</div>
+`;
diff --git a/src/core/client/auth/test/__snapshots__/signUp.spec.tsx.snap b/src/core/client/auth/test/__snapshots__/signUp.spec.tsx.snap
new file mode 100644
index 000000000..0d13ca1bc
--- /dev/null
+++ b/src/core/client/auth/test/__snapshots__/signUp.spec.tsx.snap
@@ -0,0 +1,2355 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`accepts correct password 1`] = `
+<div
+  className="App-root"
+>
+  <form
+    autoComplete="off"
+    onSubmit={[Function]}
+  >
+    <div
+      className="HorizontalGutter-root HorizontalGutter-double"
+    >
+      <h1
+        className="Typography-root Typography-heading1 Typography-colorTextPrimary Typography-alignCenter"
+      >
+        Sign up to join the conversation
+      </h1>
+      <div
+        className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+      >
+        <label
+          className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+        >
+          Email Address
+        </label>
+        <input
+          className="TextField-root TextField-colorRegular TextField-fullWidth"
+          disabled={false}
+          name="email"
+          onChange={[Function]}
+          placeholder="Email Address"
+          type="text"
+          value="hans@test.com"
+        />
+      </div>
+      <div
+        className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+      >
+        <label
+          className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+        >
+          Username
+        </label>
+        <p
+          className="Typography-root Typography-inputDescription Typography-colorTextSecondary"
+        >
+          A unique identifier displayed on your comments. You may use “_” and “.”
+        </p>
+        <input
+          className="TextField-root TextField-colorRegular TextField-fullWidth"
+          disabled={false}
+          name="username"
+          onChange={[Function]}
+          placeholder="Username"
+          type="text"
+          value="hans"
+        />
+      </div>
+      <div
+        className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+      >
+        <label
+          className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+        >
+          Password
+        </label>
+        <p
+          className="Typography-root Typography-inputDescription Typography-colorTextSecondary"
+        >
+          Must be at least {$minLength} characters
+        </p>
+        <input
+          className="TextField-root TextField-colorRegular TextField-fullWidth"
+          disabled={false}
+          name="password"
+          onChange={[Function]}
+          placeholder="Password"
+          type="password"
+          value="testtest"
+        />
+      </div>
+      <div
+        className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+      >
+        <label
+          className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+        >
+          Confirm Password
+        </label>
+        <input
+          className="TextField-root TextField-colorError TextField-fullWidth"
+          disabled={false}
+          name="confirmPassword"
+          onChange={[Function]}
+          placeholder="Confirm Password"
+          type="password"
+          value=""
+        />
+        <div
+          className="ValidationMessage-root ValidationMessage-colorError ValidationMessage-fullWidth"
+        >
+          <span
+            className="Icon-root ValidationMessage-icon Icon-sm"
+          >
+            warning
+          </span>
+          <span>
+            This field is required.
+          </span>
+        </div>
+      </div>
+      <button
+        className="BaseButton-root Button-root Button-sizeLarge Button-colorPrimary Button-variantFilled Button-fullWidth"
+        disabled={false}
+        onBlur={[Function]}
+        onFocus={[Function]}
+        onMouseDown={[Function]}
+        onMouseOut={[Function]}
+        onMouseOver={[Function]}
+        onTouchEnd={[Function]}
+        type="submit"
+      >
+        Sign up and join the conversation
+      </button>
+      <div
+        className="Flex-root Flex-flex Flex-justifyCenter"
+      >
+        <div
+          className="Flex-root Typography-root Typography-bodyCopy Typography-colorTextPrimary Flex-flex"
+        >
+          <span>
+            Already have an account? &lt;button&gt;Sign In &lt;/button&gt;
+          </span>
+        </div>
+      </div>
+    </div>
+  </form>
+</div>
+`;
+
+exports[`accepts correct password confirmation 1`] = `
+<div
+  className="App-root"
+>
+  <form
+    autoComplete="off"
+    onSubmit={[Function]}
+  >
+    <div
+      className="HorizontalGutter-root HorizontalGutter-double"
+    >
+      <h1
+        className="Typography-root Typography-heading1 Typography-colorTextPrimary Typography-alignCenter"
+      >
+        Sign up to join the conversation
+      </h1>
+      <div
+        className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+      >
+        <label
+          className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+        >
+          Email Address
+        </label>
+        <input
+          className="TextField-root TextField-colorRegular TextField-fullWidth"
+          disabled={false}
+          name="email"
+          onChange={[Function]}
+          placeholder="Email Address"
+          type="text"
+          value="hans@test.com"
+        />
+      </div>
+      <div
+        className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+      >
+        <label
+          className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+        >
+          Username
+        </label>
+        <p
+          className="Typography-root Typography-inputDescription Typography-colorTextSecondary"
+        >
+          A unique identifier displayed on your comments. You may use “_” and “.”
+        </p>
+        <input
+          className="TextField-root TextField-colorRegular TextField-fullWidth"
+          disabled={false}
+          name="username"
+          onChange={[Function]}
+          placeholder="Username"
+          type="text"
+          value="hans"
+        />
+      </div>
+      <div
+        className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+      >
+        <label
+          className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+        >
+          Password
+        </label>
+        <p
+          className="Typography-root Typography-inputDescription Typography-colorTextSecondary"
+        >
+          Must be at least {$minLength} characters
+        </p>
+        <input
+          className="TextField-root TextField-colorRegular TextField-fullWidth"
+          disabled={false}
+          name="password"
+          onChange={[Function]}
+          placeholder="Password"
+          type="password"
+          value="testtest"
+        />
+      </div>
+      <div
+        className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+      >
+        <label
+          className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+        >
+          Confirm Password
+        </label>
+        <input
+          className="TextField-root TextField-colorRegular TextField-fullWidth"
+          disabled={false}
+          name="confirmPassword"
+          onChange={[Function]}
+          placeholder="Confirm Password"
+          type="password"
+          value="testtest"
+        />
+      </div>
+      <button
+        className="BaseButton-root Button-root Button-sizeLarge Button-colorPrimary Button-variantFilled Button-fullWidth"
+        disabled={false}
+        onBlur={[Function]}
+        onFocus={[Function]}
+        onMouseDown={[Function]}
+        onMouseOut={[Function]}
+        onMouseOver={[Function]}
+        onTouchEnd={[Function]}
+        type="submit"
+      >
+        Sign up and join the conversation
+      </button>
+      <div
+        className="Flex-root Flex-flex Flex-justifyCenter"
+      >
+        <div
+          className="Flex-root Typography-root Typography-bodyCopy Typography-colorTextPrimary Flex-flex"
+        >
+          <span>
+            Already have an account? &lt;button&gt;Sign In &lt;/button&gt;
+          </span>
+        </div>
+      </div>
+    </div>
+  </form>
+</div>
+`;
+
+exports[`accepts valid email 1`] = `
+<div
+  className="App-root"
+>
+  <form
+    autoComplete="off"
+    onSubmit={[Function]}
+  >
+    <div
+      className="HorizontalGutter-root HorizontalGutter-double"
+    >
+      <h1
+        className="Typography-root Typography-heading1 Typography-colorTextPrimary Typography-alignCenter"
+      >
+        Sign up to join the conversation
+      </h1>
+      <div
+        className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+      >
+        <label
+          className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+        >
+          Email Address
+        </label>
+        <input
+          className="TextField-root TextField-colorRegular TextField-fullWidth"
+          disabled={false}
+          name="email"
+          onChange={[Function]}
+          placeholder="Email Address"
+          type="text"
+          value="hans@test.com"
+        />
+      </div>
+      <div
+        className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+      >
+        <label
+          className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+        >
+          Username
+        </label>
+        <p
+          className="Typography-root Typography-inputDescription Typography-colorTextSecondary"
+        >
+          A unique identifier displayed on your comments. You may use “_” and “.”
+        </p>
+        <input
+          className="TextField-root TextField-colorError TextField-fullWidth"
+          disabled={false}
+          name="username"
+          onChange={[Function]}
+          placeholder="Username"
+          type="text"
+          value=""
+        />
+        <div
+          className="ValidationMessage-root ValidationMessage-colorError ValidationMessage-fullWidth"
+        >
+          <span
+            className="Icon-root ValidationMessage-icon Icon-sm"
+          >
+            warning
+          </span>
+          <span>
+            This field is required.
+          </span>
+        </div>
+      </div>
+      <div
+        className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+      >
+        <label
+          className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+        >
+          Password
+        </label>
+        <p
+          className="Typography-root Typography-inputDescription Typography-colorTextSecondary"
+        >
+          Must be at least {$minLength} characters
+        </p>
+        <input
+          className="TextField-root TextField-colorError TextField-fullWidth"
+          disabled={false}
+          name="password"
+          onChange={[Function]}
+          placeholder="Password"
+          type="password"
+          value=""
+        />
+        <div
+          className="ValidationMessage-root ValidationMessage-colorError ValidationMessage-fullWidth"
+        >
+          <span
+            className="Icon-root ValidationMessage-icon Icon-sm"
+          >
+            warning
+          </span>
+          <span>
+            This field is required.
+          </span>
+        </div>
+      </div>
+      <div
+        className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+      >
+        <label
+          className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+        >
+          Confirm Password
+        </label>
+        <input
+          className="TextField-root TextField-colorError TextField-fullWidth"
+          disabled={false}
+          name="confirmPassword"
+          onChange={[Function]}
+          placeholder="Confirm Password"
+          type="password"
+          value=""
+        />
+        <div
+          className="ValidationMessage-root ValidationMessage-colorError ValidationMessage-fullWidth"
+        >
+          <span
+            className="Icon-root ValidationMessage-icon Icon-sm"
+          >
+            warning
+          </span>
+          <span>
+            This field is required.
+          </span>
+        </div>
+      </div>
+      <button
+        className="BaseButton-root Button-root Button-sizeLarge Button-colorPrimary Button-variantFilled Button-fullWidth"
+        disabled={false}
+        onBlur={[Function]}
+        onFocus={[Function]}
+        onMouseDown={[Function]}
+        onMouseOut={[Function]}
+        onMouseOver={[Function]}
+        onTouchEnd={[Function]}
+        type="submit"
+      >
+        Sign up and join the conversation
+      </button>
+      <div
+        className="Flex-root Flex-flex Flex-justifyCenter"
+      >
+        <div
+          className="Flex-root Typography-root Typography-bodyCopy Typography-colorTextPrimary Flex-flex"
+        >
+          <span>
+            Already have an account? &lt;button&gt;Sign In &lt;/button&gt;
+          </span>
+        </div>
+      </div>
+    </div>
+  </form>
+</div>
+`;
+
+exports[`accepts valid username 1`] = `
+<div
+  className="App-root"
+>
+  <form
+    autoComplete="off"
+    onSubmit={[Function]}
+  >
+    <div
+      className="HorizontalGutter-root HorizontalGutter-double"
+    >
+      <h1
+        className="Typography-root Typography-heading1 Typography-colorTextPrimary Typography-alignCenter"
+      >
+        Sign up to join the conversation
+      </h1>
+      <div
+        className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+      >
+        <label
+          className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+        >
+          Email Address
+        </label>
+        <input
+          className="TextField-root TextField-colorRegular TextField-fullWidth"
+          disabled={false}
+          name="email"
+          onChange={[Function]}
+          placeholder="Email Address"
+          type="text"
+          value="hans@test.com"
+        />
+      </div>
+      <div
+        className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+      >
+        <label
+          className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+        >
+          Username
+        </label>
+        <p
+          className="Typography-root Typography-inputDescription Typography-colorTextSecondary"
+        >
+          A unique identifier displayed on your comments. You may use “_” and “.”
+        </p>
+        <input
+          className="TextField-root TextField-colorRegular TextField-fullWidth"
+          disabled={false}
+          name="username"
+          onChange={[Function]}
+          placeholder="Username"
+          type="text"
+          value="hans"
+        />
+      </div>
+      <div
+        className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+      >
+        <label
+          className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+        >
+          Password
+        </label>
+        <p
+          className="Typography-root Typography-inputDescription Typography-colorTextSecondary"
+        >
+          Must be at least {$minLength} characters
+        </p>
+        <input
+          className="TextField-root TextField-colorError TextField-fullWidth"
+          disabled={false}
+          name="password"
+          onChange={[Function]}
+          placeholder="Password"
+          type="password"
+          value=""
+        />
+        <div
+          className="ValidationMessage-root ValidationMessage-colorError ValidationMessage-fullWidth"
+        >
+          <span
+            className="Icon-root ValidationMessage-icon Icon-sm"
+          >
+            warning
+          </span>
+          <span>
+            This field is required.
+          </span>
+        </div>
+      </div>
+      <div
+        className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+      >
+        <label
+          className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+        >
+          Confirm Password
+        </label>
+        <input
+          className="TextField-root TextField-colorError TextField-fullWidth"
+          disabled={false}
+          name="confirmPassword"
+          onChange={[Function]}
+          placeholder="Confirm Password"
+          type="password"
+          value=""
+        />
+        <div
+          className="ValidationMessage-root ValidationMessage-colorError ValidationMessage-fullWidth"
+        >
+          <span
+            className="Icon-root ValidationMessage-icon Icon-sm"
+          >
+            warning
+          </span>
+          <span>
+            This field is required.
+          </span>
+        </div>
+      </div>
+      <button
+        className="BaseButton-root Button-root Button-sizeLarge Button-colorPrimary Button-variantFilled Button-fullWidth"
+        disabled={false}
+        onBlur={[Function]}
+        onFocus={[Function]}
+        onMouseDown={[Function]}
+        onMouseOut={[Function]}
+        onMouseOver={[Function]}
+        onTouchEnd={[Function]}
+        type="submit"
+      >
+        Sign up and join the conversation
+      </button>
+      <div
+        className="Flex-root Flex-flex Flex-justifyCenter"
+      >
+        <div
+          className="Flex-root Typography-root Typography-bodyCopy Typography-colorTextPrimary Flex-flex"
+        >
+          <span>
+            Already have an account? &lt;button&gt;Sign In &lt;/button&gt;
+          </span>
+        </div>
+      </div>
+    </div>
+  </form>
+</div>
+`;
+
+exports[`checks for invalid characters in username 1`] = `
+<div
+  className="App-root"
+>
+  <form
+    autoComplete="off"
+    onSubmit={[Function]}
+  >
+    <div
+      className="HorizontalGutter-root HorizontalGutter-double"
+    >
+      <h1
+        className="Typography-root Typography-heading1 Typography-colorTextPrimary Typography-alignCenter"
+      >
+        Sign up to join the conversation
+      </h1>
+      <div
+        className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+      >
+        <label
+          className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+        >
+          Email Address
+        </label>
+        <input
+          className="TextField-root TextField-colorRegular TextField-fullWidth"
+          disabled={false}
+          name="email"
+          onChange={[Function]}
+          placeholder="Email Address"
+          type="text"
+          value="hans@test.com"
+        />
+      </div>
+      <div
+        className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+      >
+        <label
+          className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+        >
+          Username
+        </label>
+        <p
+          className="Typography-root Typography-inputDescription Typography-colorTextSecondary"
+        >
+          A unique identifier displayed on your comments. You may use “_” and “.”
+        </p>
+        <input
+          className="TextField-root TextField-colorError TextField-fullWidth"
+          disabled={false}
+          name="username"
+          onChange={[Function]}
+          placeholder="Username"
+          type="text"
+          value="$%$§$%$§%"
+        />
+        <div
+          className="ValidationMessage-root ValidationMessage-colorError ValidationMessage-fullWidth"
+        >
+          <span
+            className="Icon-root ValidationMessage-icon Icon-sm"
+          >
+            warning
+          </span>
+          <span>
+            Invalid characters. Try again.
+          </span>
+        </div>
+      </div>
+      <div
+        className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+      >
+        <label
+          className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+        >
+          Password
+        </label>
+        <p
+          className="Typography-root Typography-inputDescription Typography-colorTextSecondary"
+        >
+          Must be at least {$minLength} characters
+        </p>
+        <input
+          className="TextField-root TextField-colorError TextField-fullWidth"
+          disabled={false}
+          name="password"
+          onChange={[Function]}
+          placeholder="Password"
+          type="password"
+          value=""
+        />
+        <div
+          className="ValidationMessage-root ValidationMessage-colorError ValidationMessage-fullWidth"
+        >
+          <span
+            className="Icon-root ValidationMessage-icon Icon-sm"
+          >
+            warning
+          </span>
+          <span>
+            This field is required.
+          </span>
+        </div>
+      </div>
+      <div
+        className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+      >
+        <label
+          className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+        >
+          Confirm Password
+        </label>
+        <input
+          className="TextField-root TextField-colorError TextField-fullWidth"
+          disabled={false}
+          name="confirmPassword"
+          onChange={[Function]}
+          placeholder="Confirm Password"
+          type="password"
+          value=""
+        />
+        <div
+          className="ValidationMessage-root ValidationMessage-colorError ValidationMessage-fullWidth"
+        >
+          <span
+            className="Icon-root ValidationMessage-icon Icon-sm"
+          >
+            warning
+          </span>
+          <span>
+            This field is required.
+          </span>
+        </div>
+      </div>
+      <button
+        className="BaseButton-root Button-root Button-sizeLarge Button-colorPrimary Button-variantFilled Button-fullWidth"
+        disabled={false}
+        onBlur={[Function]}
+        onFocus={[Function]}
+        onMouseDown={[Function]}
+        onMouseOut={[Function]}
+        onMouseOver={[Function]}
+        onTouchEnd={[Function]}
+        type="submit"
+      >
+        Sign up and join the conversation
+      </button>
+      <div
+        className="Flex-root Flex-flex Flex-justifyCenter"
+      >
+        <div
+          className="Flex-root Typography-root Typography-bodyCopy Typography-colorTextPrimary Flex-flex"
+        >
+          <span>
+            Already have an account? &lt;button&gt;Sign In &lt;/button&gt;
+          </span>
+        </div>
+      </div>
+    </div>
+  </form>
+</div>
+`;
+
+exports[`checks for invalid email 1`] = `
+<div
+  className="App-root"
+>
+  <form
+    autoComplete="off"
+    onSubmit={[Function]}
+  >
+    <div
+      className="HorizontalGutter-root HorizontalGutter-double"
+    >
+      <h1
+        className="Typography-root Typography-heading1 Typography-colorTextPrimary Typography-alignCenter"
+      >
+        Sign up to join the conversation
+      </h1>
+      <div
+        className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+      >
+        <label
+          className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+        >
+          Email Address
+        </label>
+        <input
+          className="TextField-root TextField-colorError TextField-fullWidth"
+          disabled={false}
+          name="email"
+          onChange={[Function]}
+          placeholder="Email Address"
+          type="text"
+          value="invalid-email"
+        />
+        <div
+          className="ValidationMessage-root ValidationMessage-colorError ValidationMessage-fullWidth"
+        >
+          <span
+            className="Icon-root ValidationMessage-icon Icon-sm"
+          >
+            warning
+          </span>
+          <span>
+            Please enter a valid email address.
+          </span>
+        </div>
+      </div>
+      <div
+        className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+      >
+        <label
+          className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+        >
+          Username
+        </label>
+        <p
+          className="Typography-root Typography-inputDescription Typography-colorTextSecondary"
+        >
+          A unique identifier displayed on your comments. You may use “_” and “.”
+        </p>
+        <input
+          className="TextField-root TextField-colorError TextField-fullWidth"
+          disabled={false}
+          name="username"
+          onChange={[Function]}
+          placeholder="Username"
+          type="text"
+          value=""
+        />
+        <div
+          className="ValidationMessage-root ValidationMessage-colorError ValidationMessage-fullWidth"
+        >
+          <span
+            className="Icon-root ValidationMessage-icon Icon-sm"
+          >
+            warning
+          </span>
+          <span>
+            This field is required.
+          </span>
+        </div>
+      </div>
+      <div
+        className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+      >
+        <label
+          className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+        >
+          Password
+        </label>
+        <p
+          className="Typography-root Typography-inputDescription Typography-colorTextSecondary"
+        >
+          Must be at least {$minLength} characters
+        </p>
+        <input
+          className="TextField-root TextField-colorError TextField-fullWidth"
+          disabled={false}
+          name="password"
+          onChange={[Function]}
+          placeholder="Password"
+          type="password"
+          value=""
+        />
+        <div
+          className="ValidationMessage-root ValidationMessage-colorError ValidationMessage-fullWidth"
+        >
+          <span
+            className="Icon-root ValidationMessage-icon Icon-sm"
+          >
+            warning
+          </span>
+          <span>
+            This field is required.
+          </span>
+        </div>
+      </div>
+      <div
+        className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+      >
+        <label
+          className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+        >
+          Confirm Password
+        </label>
+        <input
+          className="TextField-root TextField-colorError TextField-fullWidth"
+          disabled={false}
+          name="confirmPassword"
+          onChange={[Function]}
+          placeholder="Confirm Password"
+          type="password"
+          value=""
+        />
+        <div
+          className="ValidationMessage-root ValidationMessage-colorError ValidationMessage-fullWidth"
+        >
+          <span
+            className="Icon-root ValidationMessage-icon Icon-sm"
+          >
+            warning
+          </span>
+          <span>
+            This field is required.
+          </span>
+        </div>
+      </div>
+      <button
+        className="BaseButton-root Button-root Button-sizeLarge Button-colorPrimary Button-variantFilled Button-fullWidth"
+        disabled={false}
+        onBlur={[Function]}
+        onFocus={[Function]}
+        onMouseDown={[Function]}
+        onMouseOut={[Function]}
+        onMouseOver={[Function]}
+        onTouchEnd={[Function]}
+        type="submit"
+      >
+        Sign up and join the conversation
+      </button>
+      <div
+        className="Flex-root Flex-flex Flex-justifyCenter"
+      >
+        <div
+          className="Flex-root Typography-root Typography-bodyCopy Typography-colorTextPrimary Flex-flex"
+        >
+          <span>
+            Already have an account? &lt;button&gt;Sign In &lt;/button&gt;
+          </span>
+        </div>
+      </div>
+    </div>
+  </form>
+</div>
+`;
+
+exports[`checks for too long username 1`] = `
+<div
+  className="App-root"
+>
+  <form
+    autoComplete="off"
+    onSubmit={[Function]}
+  >
+    <div
+      className="HorizontalGutter-root HorizontalGutter-double"
+    >
+      <h1
+        className="Typography-root Typography-heading1 Typography-colorTextPrimary Typography-alignCenter"
+      >
+        Sign up to join the conversation
+      </h1>
+      <div
+        className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+      >
+        <label
+          className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+        >
+          Email Address
+        </label>
+        <input
+          className="TextField-root TextField-colorRegular TextField-fullWidth"
+          disabled={false}
+          name="email"
+          onChange={[Function]}
+          placeholder="Email Address"
+          type="text"
+          value="hans@test.com"
+        />
+      </div>
+      <div
+        className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+      >
+        <label
+          className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+        >
+          Username
+        </label>
+        <p
+          className="Typography-root Typography-inputDescription Typography-colorTextSecondary"
+        >
+          A unique identifier displayed on your comments. You may use “_” and “.”
+        </p>
+        <input
+          className="TextField-root TextField-colorError TextField-fullWidth"
+          disabled={false}
+          name="username"
+          onChange={[Function]}
+          placeholder="Username"
+          type="text"
+          value="aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa"
+        />
+        <div
+          className="ValidationMessage-root ValidationMessage-colorError ValidationMessage-fullWidth"
+        >
+          <span
+            className="Icon-root ValidationMessage-icon Icon-sm"
+          >
+            warning
+          </span>
+          <span>
+            Usernames cannot be longer than {$maxLength} characters.
+          </span>
+        </div>
+      </div>
+      <div
+        className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+      >
+        <label
+          className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+        >
+          Password
+        </label>
+        <p
+          className="Typography-root Typography-inputDescription Typography-colorTextSecondary"
+        >
+          Must be at least {$minLength} characters
+        </p>
+        <input
+          className="TextField-root TextField-colorError TextField-fullWidth"
+          disabled={false}
+          name="password"
+          onChange={[Function]}
+          placeholder="Password"
+          type="password"
+          value=""
+        />
+        <div
+          className="ValidationMessage-root ValidationMessage-colorError ValidationMessage-fullWidth"
+        >
+          <span
+            className="Icon-root ValidationMessage-icon Icon-sm"
+          >
+            warning
+          </span>
+          <span>
+            This field is required.
+          </span>
+        </div>
+      </div>
+      <div
+        className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+      >
+        <label
+          className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+        >
+          Confirm Password
+        </label>
+        <input
+          className="TextField-root TextField-colorError TextField-fullWidth"
+          disabled={false}
+          name="confirmPassword"
+          onChange={[Function]}
+          placeholder="Confirm Password"
+          type="password"
+          value=""
+        />
+        <div
+          className="ValidationMessage-root ValidationMessage-colorError ValidationMessage-fullWidth"
+        >
+          <span
+            className="Icon-root ValidationMessage-icon Icon-sm"
+          >
+            warning
+          </span>
+          <span>
+            This field is required.
+          </span>
+        </div>
+      </div>
+      <button
+        className="BaseButton-root Button-root Button-sizeLarge Button-colorPrimary Button-variantFilled Button-fullWidth"
+        disabled={false}
+        onBlur={[Function]}
+        onFocus={[Function]}
+        onMouseDown={[Function]}
+        onMouseOut={[Function]}
+        onMouseOver={[Function]}
+        onTouchEnd={[Function]}
+        type="submit"
+      >
+        Sign up and join the conversation
+      </button>
+      <div
+        className="Flex-root Flex-flex Flex-justifyCenter"
+      >
+        <div
+          className="Flex-root Typography-root Typography-bodyCopy Typography-colorTextPrimary Flex-flex"
+        >
+          <span>
+            Already have an account? &lt;button&gt;Sign In &lt;/button&gt;
+          </span>
+        </div>
+      </div>
+    </div>
+  </form>
+</div>
+`;
+
+exports[`checks for too short password 1`] = `
+<div
+  className="App-root"
+>
+  <form
+    autoComplete="off"
+    onSubmit={[Function]}
+  >
+    <div
+      className="HorizontalGutter-root HorizontalGutter-double"
+    >
+      <h1
+        className="Typography-root Typography-heading1 Typography-colorTextPrimary Typography-alignCenter"
+      >
+        Sign up to join the conversation
+      </h1>
+      <div
+        className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+      >
+        <label
+          className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+        >
+          Email Address
+        </label>
+        <input
+          className="TextField-root TextField-colorRegular TextField-fullWidth"
+          disabled={false}
+          name="email"
+          onChange={[Function]}
+          placeholder="Email Address"
+          type="text"
+          value="hans@test.com"
+        />
+      </div>
+      <div
+        className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+      >
+        <label
+          className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+        >
+          Username
+        </label>
+        <p
+          className="Typography-root Typography-inputDescription Typography-colorTextSecondary"
+        >
+          A unique identifier displayed on your comments. You may use “_” and “.”
+        </p>
+        <input
+          className="TextField-root TextField-colorRegular TextField-fullWidth"
+          disabled={false}
+          name="username"
+          onChange={[Function]}
+          placeholder="Username"
+          type="text"
+          value="hans"
+        />
+      </div>
+      <div
+        className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+      >
+        <label
+          className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+        >
+          Password
+        </label>
+        <p
+          className="Typography-root Typography-inputDescription Typography-colorTextSecondary"
+        >
+          Must be at least {$minLength} characters
+        </p>
+        <input
+          className="TextField-root TextField-colorError TextField-fullWidth"
+          disabled={false}
+          name="password"
+          onChange={[Function]}
+          placeholder="Password"
+          type="password"
+          value="pass"
+        />
+        <div
+          className="ValidationMessage-root ValidationMessage-colorError ValidationMessage-fullWidth"
+        >
+          <span
+            className="Icon-root ValidationMessage-icon Icon-sm"
+          >
+            warning
+          </span>
+          <span>
+            Password must contain at least {$minLength} characters.
+          </span>
+        </div>
+      </div>
+      <div
+        className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+      >
+        <label
+          className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+        >
+          Confirm Password
+        </label>
+        <input
+          className="TextField-root TextField-colorError TextField-fullWidth"
+          disabled={false}
+          name="confirmPassword"
+          onChange={[Function]}
+          placeholder="Confirm Password"
+          type="password"
+          value=""
+        />
+        <div
+          className="ValidationMessage-root ValidationMessage-colorError ValidationMessage-fullWidth"
+        >
+          <span
+            className="Icon-root ValidationMessage-icon Icon-sm"
+          >
+            warning
+          </span>
+          <span>
+            This field is required.
+          </span>
+        </div>
+      </div>
+      <button
+        className="BaseButton-root Button-root Button-sizeLarge Button-colorPrimary Button-variantFilled Button-fullWidth"
+        disabled={false}
+        onBlur={[Function]}
+        onFocus={[Function]}
+        onMouseDown={[Function]}
+        onMouseOut={[Function]}
+        onMouseOver={[Function]}
+        onTouchEnd={[Function]}
+        type="submit"
+      >
+        Sign up and join the conversation
+      </button>
+      <div
+        className="Flex-root Flex-flex Flex-justifyCenter"
+      >
+        <div
+          className="Flex-root Typography-root Typography-bodyCopy Typography-colorTextPrimary Flex-flex"
+        >
+          <span>
+            Already have an account? &lt;button&gt;Sign In &lt;/button&gt;
+          </span>
+        </div>
+      </div>
+    </div>
+  </form>
+</div>
+`;
+
+exports[`checks for too short username 1`] = `
+<div
+  className="App-root"
+>
+  <form
+    autoComplete="off"
+    onSubmit={[Function]}
+  >
+    <div
+      className="HorizontalGutter-root HorizontalGutter-double"
+    >
+      <h1
+        className="Typography-root Typography-heading1 Typography-colorTextPrimary Typography-alignCenter"
+      >
+        Sign up to join the conversation
+      </h1>
+      <div
+        className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+      >
+        <label
+          className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+        >
+          Email Address
+        </label>
+        <input
+          className="TextField-root TextField-colorRegular TextField-fullWidth"
+          disabled={false}
+          name="email"
+          onChange={[Function]}
+          placeholder="Email Address"
+          type="text"
+          value="hans@test.com"
+        />
+      </div>
+      <div
+        className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+      >
+        <label
+          className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+        >
+          Username
+        </label>
+        <p
+          className="Typography-root Typography-inputDescription Typography-colorTextSecondary"
+        >
+          A unique identifier displayed on your comments. You may use “_” and “.”
+        </p>
+        <input
+          className="TextField-root TextField-colorError TextField-fullWidth"
+          disabled={false}
+          name="username"
+          onChange={[Function]}
+          placeholder="Username"
+          type="text"
+          value="u"
+        />
+        <div
+          className="ValidationMessage-root ValidationMessage-colorError ValidationMessage-fullWidth"
+        >
+          <span
+            className="Icon-root ValidationMessage-icon Icon-sm"
+          >
+            warning
+          </span>
+          <span>
+            Usernames must contain at least {$minLength} characters.
+          </span>
+        </div>
+      </div>
+      <div
+        className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+      >
+        <label
+          className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+        >
+          Password
+        </label>
+        <p
+          className="Typography-root Typography-inputDescription Typography-colorTextSecondary"
+        >
+          Must be at least {$minLength} characters
+        </p>
+        <input
+          className="TextField-root TextField-colorError TextField-fullWidth"
+          disabled={false}
+          name="password"
+          onChange={[Function]}
+          placeholder="Password"
+          type="password"
+          value=""
+        />
+        <div
+          className="ValidationMessage-root ValidationMessage-colorError ValidationMessage-fullWidth"
+        >
+          <span
+            className="Icon-root ValidationMessage-icon Icon-sm"
+          >
+            warning
+          </span>
+          <span>
+            This field is required.
+          </span>
+        </div>
+      </div>
+      <div
+        className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+      >
+        <label
+          className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+        >
+          Confirm Password
+        </label>
+        <input
+          className="TextField-root TextField-colorError TextField-fullWidth"
+          disabled={false}
+          name="confirmPassword"
+          onChange={[Function]}
+          placeholder="Confirm Password"
+          type="password"
+          value=""
+        />
+        <div
+          className="ValidationMessage-root ValidationMessage-colorError ValidationMessage-fullWidth"
+        >
+          <span
+            className="Icon-root ValidationMessage-icon Icon-sm"
+          >
+            warning
+          </span>
+          <span>
+            This field is required.
+          </span>
+        </div>
+      </div>
+      <button
+        className="BaseButton-root Button-root Button-sizeLarge Button-colorPrimary Button-variantFilled Button-fullWidth"
+        disabled={false}
+        onBlur={[Function]}
+        onFocus={[Function]}
+        onMouseDown={[Function]}
+        onMouseOut={[Function]}
+        onMouseOver={[Function]}
+        onTouchEnd={[Function]}
+        type="submit"
+      >
+        Sign up and join the conversation
+      </button>
+      <div
+        className="Flex-root Flex-flex Flex-justifyCenter"
+      >
+        <div
+          className="Flex-root Typography-root Typography-bodyCopy Typography-colorTextPrimary Flex-flex"
+        >
+          <span>
+            Already have an account? &lt;button&gt;Sign In &lt;/button&gt;
+          </span>
+        </div>
+      </div>
+    </div>
+  </form>
+</div>
+`;
+
+exports[`checks for wrong password confirmation 1`] = `
+<div
+  className="App-root"
+>
+  <form
+    autoComplete="off"
+    onSubmit={[Function]}
+  >
+    <div
+      className="HorizontalGutter-root HorizontalGutter-double"
+    >
+      <h1
+        className="Typography-root Typography-heading1 Typography-colorTextPrimary Typography-alignCenter"
+      >
+        Sign up to join the conversation
+      </h1>
+      <div
+        className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+      >
+        <label
+          className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+        >
+          Email Address
+        </label>
+        <input
+          className="TextField-root TextField-colorRegular TextField-fullWidth"
+          disabled={false}
+          name="email"
+          onChange={[Function]}
+          placeholder="Email Address"
+          type="text"
+          value="hans@test.com"
+        />
+      </div>
+      <div
+        className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+      >
+        <label
+          className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+        >
+          Username
+        </label>
+        <p
+          className="Typography-root Typography-inputDescription Typography-colorTextSecondary"
+        >
+          A unique identifier displayed on your comments. You may use “_” and “.”
+        </p>
+        <input
+          className="TextField-root TextField-colorRegular TextField-fullWidth"
+          disabled={false}
+          name="username"
+          onChange={[Function]}
+          placeholder="Username"
+          type="text"
+          value="hans"
+        />
+      </div>
+      <div
+        className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+      >
+        <label
+          className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+        >
+          Password
+        </label>
+        <p
+          className="Typography-root Typography-inputDescription Typography-colorTextSecondary"
+        >
+          Must be at least {$minLength} characters
+        </p>
+        <input
+          className="TextField-root TextField-colorRegular TextField-fullWidth"
+          disabled={false}
+          name="password"
+          onChange={[Function]}
+          placeholder="Password"
+          type="password"
+          value="testtest"
+        />
+      </div>
+      <div
+        className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+      >
+        <label
+          className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+        >
+          Confirm Password
+        </label>
+        <input
+          className="TextField-root TextField-colorError TextField-fullWidth"
+          disabled={false}
+          name="confirmPassword"
+          onChange={[Function]}
+          placeholder="Confirm Password"
+          type="password"
+          value="not-matching"
+        />
+        <div
+          className="ValidationMessage-root ValidationMessage-colorError ValidationMessage-fullWidth"
+        >
+          <span
+            className="Icon-root ValidationMessage-icon Icon-sm"
+          >
+            warning
+          </span>
+          <span>
+            Passwords do not match. Try again.
+          </span>
+        </div>
+      </div>
+      <button
+        className="BaseButton-root Button-root Button-sizeLarge Button-colorPrimary Button-variantFilled Button-fullWidth"
+        disabled={false}
+        onBlur={[Function]}
+        onFocus={[Function]}
+        onMouseDown={[Function]}
+        onMouseOut={[Function]}
+        onMouseOver={[Function]}
+        onTouchEnd={[Function]}
+        type="submit"
+      >
+        Sign up and join the conversation
+      </button>
+      <div
+        className="Flex-root Flex-flex Flex-justifyCenter"
+      >
+        <div
+          className="Flex-root Typography-root Typography-bodyCopy Typography-colorTextPrimary Flex-flex"
+        >
+          <span>
+            Already have an account? &lt;button&gt;Sign In &lt;/button&gt;
+          </span>
+        </div>
+      </div>
+    </div>
+  </form>
+</div>
+`;
+
+exports[`renders sign up form 1`] = `
+<div
+  className="App-root"
+>
+  <form
+    autoComplete="off"
+    onSubmit={[Function]}
+  >
+    <div
+      className="HorizontalGutter-root HorizontalGutter-double"
+    >
+      <h1
+        className="Typography-root Typography-heading1 Typography-colorTextPrimary Typography-alignCenter"
+      >
+        Sign up to join the conversation
+      </h1>
+      <div
+        className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+      >
+        <label
+          className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+        >
+          Email Address
+        </label>
+        <input
+          className="TextField-root TextField-colorRegular TextField-fullWidth"
+          disabled={false}
+          name="email"
+          onChange={[Function]}
+          placeholder="Email Address"
+          type="text"
+          value=""
+        />
+      </div>
+      <div
+        className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+      >
+        <label
+          className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+        >
+          Username
+        </label>
+        <p
+          className="Typography-root Typography-inputDescription Typography-colorTextSecondary"
+        >
+          A unique identifier displayed on your comments. You may use “_” and “.”
+        </p>
+        <input
+          className="TextField-root TextField-colorRegular TextField-fullWidth"
+          disabled={false}
+          name="username"
+          onChange={[Function]}
+          placeholder="Username"
+          type="text"
+          value=""
+        />
+      </div>
+      <div
+        className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+      >
+        <label
+          className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+        >
+          Password
+        </label>
+        <p
+          className="Typography-root Typography-inputDescription Typography-colorTextSecondary"
+        >
+          Must be at least {$minLength} characters
+        </p>
+        <input
+          className="TextField-root TextField-colorRegular TextField-fullWidth"
+          disabled={false}
+          name="password"
+          onChange={[Function]}
+          placeholder="Password"
+          type="password"
+          value=""
+        />
+      </div>
+      <div
+        className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+      >
+        <label
+          className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+        >
+          Confirm Password
+        </label>
+        <input
+          className="TextField-root TextField-colorRegular TextField-fullWidth"
+          disabled={false}
+          name="confirmPassword"
+          onChange={[Function]}
+          placeholder="Confirm Password"
+          type="password"
+          value=""
+        />
+      </div>
+      <button
+        className="BaseButton-root Button-root Button-sizeLarge Button-colorPrimary Button-variantFilled Button-fullWidth"
+        disabled={false}
+        onBlur={[Function]}
+        onFocus={[Function]}
+        onMouseDown={[Function]}
+        onMouseOut={[Function]}
+        onMouseOver={[Function]}
+        onTouchEnd={[Function]}
+        type="submit"
+      >
+        Sign up and join the conversation
+      </button>
+      <div
+        className="Flex-root Flex-flex Flex-justifyCenter"
+      >
+        <div
+          className="Flex-root Typography-root Typography-bodyCopy Typography-colorTextPrimary Flex-flex"
+        >
+          <span>
+            Already have an account? &lt;button&gt;Sign In &lt;/button&gt;
+          </span>
+        </div>
+      </div>
+    </div>
+  </form>
+</div>
+`;
+
+exports[`shows error when submitting empty form 1`] = `
+<div
+  className="App-root"
+>
+  <form
+    autoComplete="off"
+    onSubmit={[Function]}
+  >
+    <div
+      className="HorizontalGutter-root HorizontalGutter-double"
+    >
+      <h1
+        className="Typography-root Typography-heading1 Typography-colorTextPrimary Typography-alignCenter"
+      >
+        Sign up to join the conversation
+      </h1>
+      <div
+        className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+      >
+        <label
+          className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+        >
+          Email Address
+        </label>
+        <input
+          className="TextField-root TextField-colorError TextField-fullWidth"
+          disabled={false}
+          name="email"
+          onChange={[Function]}
+          placeholder="Email Address"
+          type="text"
+          value=""
+        />
+        <div
+          className="ValidationMessage-root ValidationMessage-colorError ValidationMessage-fullWidth"
+        >
+          <span
+            className="Icon-root ValidationMessage-icon Icon-sm"
+          >
+            warning
+          </span>
+          <span>
+            This field is required.
+          </span>
+        </div>
+      </div>
+      <div
+        className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+      >
+        <label
+          className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+        >
+          Username
+        </label>
+        <p
+          className="Typography-root Typography-inputDescription Typography-colorTextSecondary"
+        >
+          A unique identifier displayed on your comments. You may use “_” and “.”
+        </p>
+        <input
+          className="TextField-root TextField-colorError TextField-fullWidth"
+          disabled={false}
+          name="username"
+          onChange={[Function]}
+          placeholder="Username"
+          type="text"
+          value=""
+        />
+        <div
+          className="ValidationMessage-root ValidationMessage-colorError ValidationMessage-fullWidth"
+        >
+          <span
+            className="Icon-root ValidationMessage-icon Icon-sm"
+          >
+            warning
+          </span>
+          <span>
+            This field is required.
+          </span>
+        </div>
+      </div>
+      <div
+        className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+      >
+        <label
+          className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+        >
+          Password
+        </label>
+        <p
+          className="Typography-root Typography-inputDescription Typography-colorTextSecondary"
+        >
+          Must be at least {$minLength} characters
+        </p>
+        <input
+          className="TextField-root TextField-colorError TextField-fullWidth"
+          disabled={false}
+          name="password"
+          onChange={[Function]}
+          placeholder="Password"
+          type="password"
+          value=""
+        />
+        <div
+          className="ValidationMessage-root ValidationMessage-colorError ValidationMessage-fullWidth"
+        >
+          <span
+            className="Icon-root ValidationMessage-icon Icon-sm"
+          >
+            warning
+          </span>
+          <span>
+            This field is required.
+          </span>
+        </div>
+      </div>
+      <div
+        className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+      >
+        <label
+          className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+        >
+          Confirm Password
+        </label>
+        <input
+          className="TextField-root TextField-colorError TextField-fullWidth"
+          disabled={false}
+          name="confirmPassword"
+          onChange={[Function]}
+          placeholder="Confirm Password"
+          type="password"
+          value=""
+        />
+        <div
+          className="ValidationMessage-root ValidationMessage-colorError ValidationMessage-fullWidth"
+        >
+          <span
+            className="Icon-root ValidationMessage-icon Icon-sm"
+          >
+            warning
+          </span>
+          <span>
+            This field is required.
+          </span>
+        </div>
+      </div>
+      <button
+        className="BaseButton-root Button-root Button-sizeLarge Button-colorPrimary Button-variantFilled Button-fullWidth"
+        disabled={false}
+        onBlur={[Function]}
+        onFocus={[Function]}
+        onMouseDown={[Function]}
+        onMouseOut={[Function]}
+        onMouseOver={[Function]}
+        onTouchEnd={[Function]}
+        type="submit"
+      >
+        Sign up and join the conversation
+      </button>
+      <div
+        className="Flex-root Flex-flex Flex-justifyCenter"
+      >
+        <div
+          className="Flex-root Typography-root Typography-bodyCopy Typography-colorTextPrimary Flex-flex"
+        >
+          <span>
+            Already have an account? &lt;button&gt;Sign In &lt;/button&gt;
+          </span>
+        </div>
+      </div>
+    </div>
+  </form>
+</div>
+`;
+
+exports[`shows server error 1`] = `
+<div
+  className="App-root"
+>
+  <form
+    autoComplete="off"
+    onSubmit={[Function]}
+  >
+    <div
+      className="HorizontalGutter-root HorizontalGutter-double"
+    >
+      <h1
+        className="Typography-root Typography-heading1 Typography-colorTextPrimary Typography-alignCenter"
+      >
+        Sign up to join the conversation
+      </h1>
+      <div
+        className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+      >
+        <label
+          className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+        >
+          Email Address
+        </label>
+        <input
+          className="TextField-root TextField-colorRegular TextField-fullWidth"
+          disabled={true}
+          name="email"
+          onChange={[Function]}
+          placeholder="Email Address"
+          type="text"
+          value="hans@test.com"
+        />
+      </div>
+      <div
+        className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+      >
+        <label
+          className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+        >
+          Username
+        </label>
+        <p
+          className="Typography-root Typography-inputDescription Typography-colorTextSecondary"
+        >
+          A unique identifier displayed on your comments. You may use “_” and “.”
+        </p>
+        <input
+          className="TextField-root TextField-colorRegular TextField-fullWidth"
+          disabled={true}
+          name="username"
+          onChange={[Function]}
+          placeholder="Username"
+          type="text"
+          value="hans"
+        />
+      </div>
+      <div
+        className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+      >
+        <label
+          className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+        >
+          Password
+        </label>
+        <p
+          className="Typography-root Typography-inputDescription Typography-colorTextSecondary"
+        >
+          Must be at least {$minLength} characters
+        </p>
+        <input
+          className="TextField-root TextField-colorRegular TextField-fullWidth"
+          disabled={true}
+          name="password"
+          onChange={[Function]}
+          placeholder="Password"
+          type="password"
+          value="testtest"
+        />
+      </div>
+      <div
+        className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+      >
+        <label
+          className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+        >
+          Confirm Password
+        </label>
+        <input
+          className="TextField-root TextField-colorRegular TextField-fullWidth"
+          disabled={true}
+          name="confirmPassword"
+          onChange={[Function]}
+          placeholder="Confirm Password"
+          type="password"
+          value="testtest"
+        />
+      </div>
+      <button
+        className="BaseButton-root Button-root Button-sizeLarge Button-colorPrimary Button-variantFilled Button-fullWidth Button-disabled"
+        disabled={true}
+        onBlur={[Function]}
+        onFocus={[Function]}
+        onMouseDown={[Function]}
+        onMouseOut={[Function]}
+        onMouseOver={[Function]}
+        onTouchEnd={[Function]}
+        type="submit"
+      >
+        Sign up and join the conversation
+      </button>
+      <div
+        className="Flex-root Flex-flex Flex-justifyCenter"
+      >
+        <div
+          className="Flex-root Typography-root Typography-bodyCopy Typography-colorTextPrimary Flex-flex"
+        >
+          <span>
+            Already have an account? &lt;button&gt;Sign In &lt;/button&gt;
+          </span>
+        </div>
+      </div>
+    </div>
+  </form>
+</div>
+`;
+
+exports[`shows server error 2`] = `
+<div
+  className="App-root"
+>
+  <form
+    autoComplete="off"
+    onSubmit={[Function]}
+  >
+    <div
+      className="HorizontalGutter-root HorizontalGutter-double"
+    >
+      <h1
+        className="Typography-root Typography-heading1 Typography-colorTextPrimary Typography-alignCenter"
+      >
+        Sign up to join the conversation
+      </h1>
+      <div
+        className="CallOut-root CallOut-colorError CallOut-fullWidth"
+      >
+        Server Error
+      </div>
+      <div
+        className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+      >
+        <label
+          className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+        >
+          Email Address
+        </label>
+        <input
+          className="TextField-root TextField-colorRegular TextField-fullWidth"
+          disabled={false}
+          name="email"
+          onChange={[Function]}
+          placeholder="Email Address"
+          type="text"
+          value="hans@test.com"
+        />
+      </div>
+      <div
+        className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+      >
+        <label
+          className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+        >
+          Username
+        </label>
+        <p
+          className="Typography-root Typography-inputDescription Typography-colorTextSecondary"
+        >
+          A unique identifier displayed on your comments. You may use “_” and “.”
+        </p>
+        <input
+          className="TextField-root TextField-colorRegular TextField-fullWidth"
+          disabled={false}
+          name="username"
+          onChange={[Function]}
+          placeholder="Username"
+          type="text"
+          value="hans"
+        />
+      </div>
+      <div
+        className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+      >
+        <label
+          className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+        >
+          Password
+        </label>
+        <p
+          className="Typography-root Typography-inputDescription Typography-colorTextSecondary"
+        >
+          Must be at least {$minLength} characters
+        </p>
+        <input
+          className="TextField-root TextField-colorRegular TextField-fullWidth"
+          disabled={false}
+          name="password"
+          onChange={[Function]}
+          placeholder="Password"
+          type="password"
+          value="testtest"
+        />
+      </div>
+      <div
+        className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+      >
+        <label
+          className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+        >
+          Confirm Password
+        </label>
+        <input
+          className="TextField-root TextField-colorRegular TextField-fullWidth"
+          disabled={false}
+          name="confirmPassword"
+          onChange={[Function]}
+          placeholder="Confirm Password"
+          type="password"
+          value="testtest"
+        />
+      </div>
+      <button
+        className="BaseButton-root Button-root Button-sizeLarge Button-colorPrimary Button-variantFilled Button-fullWidth"
+        disabled={false}
+        onBlur={[Function]}
+        onFocus={[Function]}
+        onMouseDown={[Function]}
+        onMouseOut={[Function]}
+        onMouseOver={[Function]}
+        onTouchEnd={[Function]}
+        type="submit"
+      >
+        Sign up and join the conversation
+      </button>
+      <div
+        className="Flex-root Flex-flex Flex-justifyCenter"
+      >
+        <div
+          className="Flex-root Typography-root Typography-bodyCopy Typography-colorTextPrimary Flex-flex"
+        >
+          <span>
+            Already have an account? &lt;button&gt;Sign In &lt;/button&gt;
+          </span>
+        </div>
+      </div>
+    </div>
+  </form>
+</div>
+`;
+
+exports[`submits form successfully 1`] = `
+<div
+  className="App-root"
+>
+  <form
+    autoComplete="off"
+    onSubmit={[Function]}
+  >
+    <div
+      className="HorizontalGutter-root HorizontalGutter-double"
+    >
+      <h1
+        className="Typography-root Typography-heading1 Typography-colorTextPrimary Typography-alignCenter"
+      >
+        Sign up to join the conversation
+      </h1>
+      <div
+        className="CallOut-root CallOut-colorError CallOut-fullWidth"
+      >
+        Server Error
+      </div>
+      <div
+        className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+      >
+        <label
+          className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+        >
+          Email Address
+        </label>
+        <input
+          className="TextField-root TextField-colorRegular TextField-fullWidth"
+          disabled={true}
+          name="email"
+          onChange={[Function]}
+          placeholder="Email Address"
+          type="text"
+          value="hans@test.com"
+        />
+      </div>
+      <div
+        className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+      >
+        <label
+          className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+        >
+          Username
+        </label>
+        <p
+          className="Typography-root Typography-inputDescription Typography-colorTextSecondary"
+        >
+          A unique identifier displayed on your comments. You may use “_” and “.”
+        </p>
+        <input
+          className="TextField-root TextField-colorRegular TextField-fullWidth"
+          disabled={true}
+          name="username"
+          onChange={[Function]}
+          placeholder="Username"
+          type="text"
+          value="hans"
+        />
+      </div>
+      <div
+        className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+      >
+        <label
+          className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+        >
+          Password
+        </label>
+        <p
+          className="Typography-root Typography-inputDescription Typography-colorTextSecondary"
+        >
+          Must be at least {$minLength} characters
+        </p>
+        <input
+          className="TextField-root TextField-colorRegular TextField-fullWidth"
+          disabled={true}
+          name="password"
+          onChange={[Function]}
+          placeholder="Password"
+          type="password"
+          value="testtest"
+        />
+      </div>
+      <div
+        className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+      >
+        <label
+          className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+        >
+          Confirm Password
+        </label>
+        <input
+          className="TextField-root TextField-colorRegular TextField-fullWidth"
+          disabled={true}
+          name="confirmPassword"
+          onChange={[Function]}
+          placeholder="Confirm Password"
+          type="password"
+          value="testtest"
+        />
+      </div>
+      <button
+        className="BaseButton-root Button-root Button-sizeLarge Button-colorPrimary Button-variantFilled Button-fullWidth Button-disabled"
+        disabled={true}
+        onBlur={[Function]}
+        onFocus={[Function]}
+        onMouseDown={[Function]}
+        onMouseOut={[Function]}
+        onMouseOver={[Function]}
+        onTouchEnd={[Function]}
+        type="submit"
+      >
+        Sign up and join the conversation
+      </button>
+      <div
+        className="Flex-root Flex-flex Flex-justifyCenter"
+      >
+        <div
+          className="Flex-root Typography-root Typography-bodyCopy Typography-colorTextPrimary Flex-flex"
+        >
+          <span>
+            Already have an account? &lt;button&gt;Sign In &lt;/button&gt;
+          </span>
+        </div>
+      </div>
+    </div>
+  </form>
+</div>
+`;
+
+exports[`submits form successfully 2`] = `
+<div
+  className="App-root"
+>
+  <form
+    autoComplete="off"
+    onSubmit={[Function]}
+  >
+    <div
+      className="HorizontalGutter-root HorizontalGutter-double"
+    >
+      <h1
+        className="Typography-root Typography-heading1 Typography-colorTextPrimary Typography-alignCenter"
+      >
+        Sign up to join the conversation
+      </h1>
+      <div
+        className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+      >
+        <label
+          className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+        >
+          Email Address
+        </label>
+        <input
+          className="TextField-root TextField-colorRegular TextField-fullWidth"
+          disabled={false}
+          name="email"
+          onChange={[Function]}
+          placeholder="Email Address"
+          type="text"
+          value="hans@test.com"
+        />
+      </div>
+      <div
+        className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+      >
+        <label
+          className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+        >
+          Username
+        </label>
+        <p
+          className="Typography-root Typography-inputDescription Typography-colorTextSecondary"
+        >
+          A unique identifier displayed on your comments. You may use “_” and “.”
+        </p>
+        <input
+          className="TextField-root TextField-colorRegular TextField-fullWidth"
+          disabled={false}
+          name="username"
+          onChange={[Function]}
+          placeholder="Username"
+          type="text"
+          value="hans"
+        />
+      </div>
+      <div
+        className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+      >
+        <label
+          className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+        >
+          Password
+        </label>
+        <p
+          className="Typography-root Typography-inputDescription Typography-colorTextSecondary"
+        >
+          Must be at least {$minLength} characters
+        </p>
+        <input
+          className="TextField-root TextField-colorRegular TextField-fullWidth"
+          disabled={false}
+          name="password"
+          onChange={[Function]}
+          placeholder="Password"
+          type="password"
+          value="testtest"
+        />
+      </div>
+      <div
+        className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+      >
+        <label
+          className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+        >
+          Confirm Password
+        </label>
+        <input
+          className="TextField-root TextField-colorRegular TextField-fullWidth"
+          disabled={false}
+          name="confirmPassword"
+          onChange={[Function]}
+          placeholder="Confirm Password"
+          type="password"
+          value="testtest"
+        />
+      </div>
+      <button
+        className="BaseButton-root Button-root Button-sizeLarge Button-colorPrimary Button-variantFilled Button-fullWidth"
+        disabled={false}
+        onBlur={[Function]}
+        onFocus={[Function]}
+        onMouseDown={[Function]}
+        onMouseOut={[Function]}
+        onMouseOver={[Function]}
+        onTouchEnd={[Function]}
+        type="submit"
+      >
+        Sign up and join the conversation
+      </button>
+      <div
+        className="Flex-root Flex-flex Flex-justifyCenter"
+      >
+        <div
+          className="Flex-root Typography-root Typography-bodyCopy Typography-colorTextPrimary Flex-flex"
+        >
+          <span>
+            Already have an account? &lt;button&gt;Sign In &lt;/button&gt;
+          </span>
+        </div>
+      </div>
+    </div>
+  </form>
+</div>
+`;
diff --git a/src/core/client/auth/test/createEnvironment.ts b/src/core/client/auth/test/createEnvironment.ts
new file mode 100644
index 000000000..700b354c9
--- /dev/null
+++ b/src/core/client/auth/test/createEnvironment.ts
@@ -0,0 +1,28 @@
+import { IResolvers } from "graphql-tools";
+import { Environment, RecordProxy, RecordSourceProxy } from "relay-runtime";
+import { createRelayEnvironment } from "talk-framework/testHelpers";
+
+interface CreateEnvironmentParams {
+  logNetwork?: boolean;
+  resolvers?: IResolvers<any, any>;
+  initLocalState?: (
+    local: RecordProxy,
+    source: RecordSourceProxy,
+    environment: Environment
+  ) => void;
+}
+
+export default function createEnvironment(params: CreateEnvironmentParams) {
+  return createRelayEnvironment({
+    network: {
+      logNetwork: params.logNetwork,
+      resolvers: params.resolvers || {},
+      projectName: "tenant",
+    },
+    initLocalState: (localRecord, source, environment) => {
+      if (params.initLocalState) {
+        params.initLocalState(localRecord, source, environment);
+      }
+    },
+  });
+}
diff --git a/src/core/client/auth/test/navigation.disabledspec.tsx b/src/core/client/auth/test/navigation.disabledspec.tsx
new file mode 100644
index 000000000..0abf24548
--- /dev/null
+++ b/src/core/client/auth/test/navigation.disabledspec.tsx
@@ -0,0 +1,59 @@
+// Enable after this is solved: https://github.com/projectfluent/fluent.js/issues/280
+
+import React from "react";
+import TestRenderer from "react-test-renderer";
+import { RecordProxy } from "relay-runtime";
+
+import AppContainer from "talk-auth/containers/AppContainer";
+import { TalkContext, TalkContextProvider } from "talk-framework/lib/bootstrap";
+import { PostMessageService } from "talk-framework/lib/postMessage";
+import { RestClient } from "talk-framework/lib/rest";
+import { createInMemoryStorage } from "talk-framework/lib/storage";
+
+import createEnvironment from "./createEnvironment";
+
+const environment = createEnvironment({
+  initLocalState: (localRecord: RecordProxy) => {
+    localRecord.setValue("SIGN_IN", "view");
+  },
+});
+
+const context: TalkContext = {
+  relayEnvironment: environment,
+  localeBundles: [],
+  localStorage: createInMemoryStorage(),
+  sessionStorage: createInMemoryStorage(),
+  rest: new RestClient("http://localhost/api"),
+  postMessage: new PostMessageService(),
+};
+
+const testRenderer = TestRenderer.create(
+  <TalkContextProvider value={context}>
+    <AppContainer />
+  </TalkContextProvider>
+);
+
+it("renders sign in form", async () => {
+  expect(testRenderer.toJSON()).toMatchSnapshot();
+});
+
+it("navigates to sign up form", async () => {
+  testRenderer.root
+    .findByProps({ id: "signIn-gotoSignUpButton" })
+    .props.onClick();
+  expect(testRenderer.toJSON()).toMatchSnapshot();
+});
+
+it("navigates to sign in form", async () => {
+  testRenderer.root
+    .findByProps({ id: "signUp-gotoSignInButton" })
+    .props.onClick();
+  expect(testRenderer.toJSON()).toMatchSnapshot();
+});
+
+it("navigates to forgot password form", async () => {
+  testRenderer.root
+    .findByProps({ id: "signIn-gotoForgotPasswordButton" })
+    .props.onClick();
+  expect(testRenderer.toJSON()).toMatchSnapshot();
+});
diff --git a/src/core/client/auth/test/signIn.spec.tsx b/src/core/client/auth/test/signIn.spec.tsx
new file mode 100644
index 000000000..90447438a
--- /dev/null
+++ b/src/core/client/auth/test/signIn.spec.tsx
@@ -0,0 +1,140 @@
+import React from "react";
+import TestRenderer, { ReactTestInstance } from "react-test-renderer";
+import { RecordProxy } from "relay-runtime";
+import sinon from "sinon";
+
+import AppContainer from "talk-auth/containers/AppContainer";
+import { animationFrame, timeout } from "talk-common/utils";
+import { TalkContext, TalkContextProvider } from "talk-framework/lib/bootstrap";
+import { PostMessageService } from "talk-framework/lib/postMessage";
+import { RestClient } from "talk-framework/lib/rest";
+import { createInMemoryStorage } from "talk-framework/lib/storage";
+
+import createEnvironment from "./createEnvironment";
+
+const environment = createEnvironment({
+  initLocalState: (localRecord: RecordProxy) => {
+    localRecord.setValue("SIGN_IN", "view");
+  },
+});
+
+const context: TalkContext = {
+  relayEnvironment: environment,
+  localeBundles: [],
+  localStorage: createInMemoryStorage(),
+  sessionStorage: createInMemoryStorage(),
+  rest: new RestClient("http://localhost/api"),
+  postMessage: new PostMessageService(),
+};
+
+const testRenderer = TestRenderer.create(
+  <TalkContextProvider value={context}>
+    <AppContainer />
+  </TalkContextProvider>
+);
+
+const inputPredicate = (name: string) => (n: ReactTestInstance) => {
+  return n.props.name === name && n.props.onChange;
+};
+
+const form = testRenderer.root.findByType("form");
+
+it("renders sign in form", async () => {
+  expect(testRenderer.toJSON()).toMatchSnapshot();
+});
+
+it("shows error when submitting empty form", async () => {
+  form.props.onSubmit();
+  expect(testRenderer.toJSON()).toMatchSnapshot();
+});
+
+it("checks for invalid email", async () => {
+  form
+    .find(inputPredicate("email"))
+    .props.onChange({ target: { value: "invalid-email" } });
+  expect(testRenderer.toJSON()).toMatchSnapshot();
+});
+
+it("accepts valid email", async () => {
+  form
+    .find(inputPredicate("email"))
+    .props.onChange({ target: { value: "hans@test.com" } });
+  expect(testRenderer.toJSON()).toMatchSnapshot();
+});
+
+it("accepts correct password", async () => {
+  form
+    .find(inputPredicate("password"))
+    .props.onChange({ target: { value: "testtest" } });
+  expect(testRenderer.toJSON()).toMatchSnapshot();
+});
+
+it("shows server error", async () => {
+  const windowMock = sinon.mock(window);
+  windowMock.expects("resizeTo");
+
+  const error = new Error("Server Error");
+  const restMock = sinon.mock(context.rest);
+  restMock
+    .expects("fetch")
+    .withArgs("/tenant/auth/local", {
+      method: "POST",
+      body: {
+        email: "hans@test.com",
+        password: "testtest",
+      },
+    })
+    .once()
+    .throws(error);
+
+  const postMessageMock = sinon.mock(context.postMessage);
+  postMessageMock
+    .expects("send")
+    .withArgs("authError", error.toString(), window.opener)
+    .once();
+
+  form.props.onSubmit();
+  expect(testRenderer.toJSON()).toMatchSnapshot();
+  // popup resize will be triggered if we wait for the animation frame first.
+  await animationFrame();
+  await timeout();
+  expect(testRenderer.toJSON()).toMatchSnapshot();
+  restMock.verify();
+  postMessageMock.verify();
+  windowMock.verify();
+});
+
+it("submits form successfully", async () => {
+  const windowMock = sinon.mock(window);
+  windowMock.expects("close").once();
+  windowMock.expects("resizeTo");
+
+  const restMock = sinon.mock(context.rest);
+  restMock
+    .expects("fetch")
+    .withArgs("/tenant/auth/local", {
+      method: "POST",
+      body: {
+        email: "hans@test.com",
+        password: "testtest",
+      },
+    })
+    .once()
+    .returns({ token: "auth-token" });
+
+  const postMessageMock = sinon.mock(context.postMessage);
+  postMessageMock
+    .expects("send")
+    .withArgs("setAuthToken", "auth-token", window.opener)
+    .once();
+
+  form.props.onSubmit();
+  expect(testRenderer.toJSON()).toMatchSnapshot();
+  // popup resize will be triggered if we wait for the animation frame first.
+  await animationFrame();
+  await timeout();
+  expect(testRenderer.toJSON()).toMatchSnapshot();
+  restMock.verify();
+  postMessageMock.verify();
+  windowMock.verify();
+});
diff --git a/src/core/client/auth/test/signUp.spec.tsx b/src/core/client/auth/test/signUp.spec.tsx
new file mode 100644
index 000000000..307f2c4b2
--- /dev/null
+++ b/src/core/client/auth/test/signUp.spec.tsx
@@ -0,0 +1,191 @@
+import React from "react";
+import TestRenderer, { ReactTestInstance } from "react-test-renderer";
+import { RecordProxy } from "relay-runtime";
+import sinon from "sinon";
+
+import AppContainer from "talk-auth/containers/AppContainer";
+import { animationFrame, timeout } from "talk-common/utils";
+import { TalkContext, TalkContextProvider } from "talk-framework/lib/bootstrap";
+import { PostMessageService } from "talk-framework/lib/postMessage";
+import { RestClient } from "talk-framework/lib/rest";
+import { createInMemoryStorage } from "talk-framework/lib/storage";
+
+import createEnvironment from "./createEnvironment";
+
+const environment = createEnvironment({
+  initLocalState: (localRecord: RecordProxy) => {
+    localRecord.setValue("SIGN_UP", "view");
+  },
+});
+
+const context: TalkContext = {
+  relayEnvironment: environment,
+  localeBundles: [],
+  localStorage: createInMemoryStorage(),
+  sessionStorage: createInMemoryStorage(),
+  rest: new RestClient("http://localhost/api"),
+  postMessage: new PostMessageService(),
+};
+
+const testRenderer = TestRenderer.create(
+  <TalkContextProvider value={context}>
+    <AppContainer />
+  </TalkContextProvider>
+);
+
+const inputPredicate = (name: string) => (n: ReactTestInstance) => {
+  return n.props.name === name && n.props.onChange;
+};
+
+const form = testRenderer.root.findByType("form");
+
+it("renders sign up form", async () => {
+  expect(testRenderer.toJSON()).toMatchSnapshot();
+});
+
+it("shows error when submitting empty form", async () => {
+  form.props.onSubmit();
+  expect(testRenderer.toJSON()).toMatchSnapshot();
+});
+
+it("checks for invalid email", async () => {
+  form
+    .find(inputPredicate("email"))
+    .props.onChange({ target: { value: "invalid-email" } });
+  expect(testRenderer.toJSON()).toMatchSnapshot();
+});
+
+it("accepts valid email", async () => {
+  form
+    .find(inputPredicate("email"))
+    .props.onChange({ target: { value: "hans@test.com" } });
+  expect(testRenderer.toJSON()).toMatchSnapshot();
+});
+
+it("checks for too short username", async () => {
+  form
+    .find(inputPredicate("username"))
+    .props.onChange({ target: { value: "u" } });
+  expect(testRenderer.toJSON()).toMatchSnapshot();
+});
+
+it("checks for too long username", async () => {
+  form
+    .find(inputPredicate("username"))
+    .props.onChange({ target: { value: "a".repeat(100) } });
+  expect(testRenderer.toJSON()).toMatchSnapshot();
+});
+
+it("checks for invalid characters in username", async () => {
+  form
+    .find(inputPredicate("username"))
+    .props.onChange({ target: { value: "$%$§$%$§%" } });
+  expect(testRenderer.toJSON()).toMatchSnapshot();
+});
+
+it("accepts valid username", async () => {
+  form
+    .find(inputPredicate("username"))
+    .props.onChange({ target: { value: "hans" } });
+  expect(testRenderer.toJSON()).toMatchSnapshot();
+});
+
+it("checks for too short password", async () => {
+  form
+    .find(inputPredicate("password"))
+    .props.onChange({ target: { value: "pass" } });
+  expect(testRenderer.toJSON()).toMatchSnapshot();
+});
+
+it("accepts correct password", async () => {
+  form
+    .find(inputPredicate("password"))
+    .props.onChange({ target: { value: "testtest" } });
+  expect(testRenderer.toJSON()).toMatchSnapshot();
+});
+
+it("checks for wrong password confirmation", async () => {
+  form
+    .find(inputPredicate("confirmPassword"))
+    .props.onChange({ target: { value: "not-matching" } });
+  expect(testRenderer.toJSON()).toMatchSnapshot();
+});
+
+it("accepts correct password confirmation", async () => {
+  form
+    .find(inputPredicate("confirmPassword"))
+    .props.onChange({ target: { value: "testtest" } });
+  expect(testRenderer.toJSON()).toMatchSnapshot();
+});
+
+it("shows server error", async () => {
+  const windowMock = sinon.mock(window);
+  windowMock.expects("resizeTo");
+
+  const error = new Error("Server Error");
+  const restMock = sinon.mock(context.rest);
+  restMock
+    .expects("fetch")
+    .withArgs("/tenant/auth/local/signup", {
+      method: "POST",
+      body: {
+        username: "hans",
+        email: "hans@test.com",
+        password: "testtest",
+      },
+    })
+    .once()
+    .throws(error);
+
+  const postMessageMock = sinon.mock(context.postMessage);
+  postMessageMock
+    .expects("send")
+    .withArgs("authError", error.toString(), window.opener)
+    .once();
+
+  form.props.onSubmit();
+  expect(testRenderer.toJSON()).toMatchSnapshot();
+  // popup resize will be triggered if we wait for the animation frame first.
+  await animationFrame();
+  await timeout();
+  expect(testRenderer.toJSON()).toMatchSnapshot();
+  restMock.verify();
+  postMessageMock.verify();
+  windowMock.verify();
+});
+
+it("submits form successfully", async () => {
+  const windowMock = sinon.mock(window);
+  windowMock.expects("close").once();
+  windowMock.expects("resizeTo");
+
+  const restMock = sinon.mock(context.rest);
+  restMock
+    .expects("fetch")
+    .withArgs("/tenant/auth/local/signup", {
+      method: "POST",
+      body: {
+        username: "hans",
+        email: "hans@test.com",
+        password: "testtest",
+      },
+    })
+    .once()
+    .returns({ token: "auth-token" });
+
+  const postMessageMock = sinon.mock(context.postMessage);
+  postMessageMock
+    .expects("send")
+    .withArgs("setAuthToken", "auth-token", window.opener)
+    .once();
+
+  form.props.onSubmit();
+  expect(testRenderer.toJSON()).toMatchSnapshot();
+  // popup resize will be triggered if we wait for the animation frame first.
+  await animationFrame();
+  await timeout();
+  expect(testRenderer.toJSON()).toMatchSnapshot();
+  restMock.verify();
+  postMessageMock.verify();
+  windowMock.verify();
+});
diff --git a/src/core/client/ui/components/TextField/TextField.tsx b/src/core/client/ui/components/TextField/TextField.tsx
index 9da45ef58..2e4fe448b 100644
--- a/src/core/client/ui/components/TextField/TextField.tsx
+++ b/src/core/client/ui/components/TextField/TextField.tsx
@@ -5,6 +5,7 @@ import { withStyles } from "talk-ui/hocs";
 import * as styles from "./TextField.css";
 
 export interface TextFieldProps {
+  id?: string;
   /**
    * The content value of the component.
    */
diff --git a/src/core/common/utils/animationFrame.ts b/src/core/common/utils/animationFrame.ts
new file mode 100644
index 000000000..8ef6f152c
--- /dev/null
+++ b/src/core/common/utils/animationFrame.ts
@@ -0,0 +1,4 @@
+/** A promisified animation frame. */
+export default function animationFrame() {
+  return new Promise(resolve => requestAnimationFrame(resolve));
+}
diff --git a/src/core/common/utils/index.ts b/src/core/common/utils/index.ts
index b5b0a0be6..28435047e 100644
--- a/src/core/common/utils/index.ts
+++ b/src/core/common/utils/index.ts
@@ -1,3 +1,4 @@
 export { default as timeout } from "./timeout";
+export { default as animationFrame } from "./animationFrame";
 export { default as pascalCase } from "./pascalCase";
 export { default as oncePerFrame } from "./oncePerFrame";
diff --git a/src/locales/en-US/auth.ftl b/src/locales/en-US/auth.ftl
index 236530dd6..e860b4beb 100644
--- a/src/locales/en-US/auth.ftl
+++ b/src/locales/en-US/auth.ftl
@@ -16,7 +16,6 @@ signIn-passwordTextField =
 
 signIn-forgotYourPassword = Forgot your password?
 
-signIn-noAccountSignUp = Don't have an account? <button>Sign Up</button>
 
 ## Sign Up
 
diff --git a/src/locales/en-US/framework.ftl b/src/locales/en-US/framework.ftl
index 42e6d2751..f3be4f2f4 100644
--- a/src/locales/en-US/framework.ftl
+++ b/src/locales/en-US/framework.ftl
@@ -6,7 +6,6 @@
 
 framework-validation-required = This field is required.
 framework-validation-tooShort = The field must contain at least {$minLength} characters.
-framework-validation-passwordTooShort = Password must contain at least {$minLength} characters.
 framework-validation-usernameTooShort = Username must contain at least {$minLength} characters.
 framework-validation-usernameTooLong = Usernames cannot be longer than {$maxLength} characters.
 framework-validation-invalidCharacters = Invalid characters. Try again.

From 9c5dd285a37df3ecb56316d6a7ea48450e9dee7e Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Tue, 28 Aug 2018 17:20:44 +0200
Subject: [PATCH 81/81] Readd translations

---
 src/locales/en-US/auth.ftl      | 1 +
 src/locales/en-US/framework.ftl | 1 +
 2 files changed, 2 insertions(+)

diff --git a/src/locales/en-US/auth.ftl b/src/locales/en-US/auth.ftl
index e860b4beb..236530dd6 100644
--- a/src/locales/en-US/auth.ftl
+++ b/src/locales/en-US/auth.ftl
@@ -16,6 +16,7 @@ signIn-passwordTextField =
 
 signIn-forgotYourPassword = Forgot your password?
 
+signIn-noAccountSignUp = Don't have an account? <button>Sign Up</button>
 
 ## Sign Up
 
diff --git a/src/locales/en-US/framework.ftl b/src/locales/en-US/framework.ftl
index f3be4f2f4..f03b2a50a 100644
--- a/src/locales/en-US/framework.ftl
+++ b/src/locales/en-US/framework.ftl
@@ -10,6 +10,7 @@ framework-validation-usernameTooShort = Username must contain at least {$minLeng
 framework-validation-usernameTooLong = Usernames cannot be longer than {$maxLength} characters.
 framework-validation-invalidCharacters = Invalid characters. Try again.
 framework-validation-invalidEmail = Please enter a valid email address.
+framework-validation-passwordTooShort = Password must contain at least {$minLength} characters.
 framework-validation-passwordsDoNotMatch = Passwords do not match. Try again.
 
 framework-timeago-time =