Adding SignIn View

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:

src/core/client/auth/components/SignIn.css

@@ -0,0 +1,7 @@
+.root {
+  width: 330px;
+}
+
+.forgotPassword {
+  text-align: right;
+}

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>

src/core/client/auth/components/SignUp.css

@@ -0,0 +1,3 @@
+.root {
+  width: 330px;
+}

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;