sign in view

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;

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;