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;

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;

src/core/client/ui/components/FormField/FormField.css

@@ -0,0 +1,5 @@
+.root {
+  display: block;
+  margin-bottom: var(--spacing-unit);
+  width: 100%;
+}

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;

src/core/client/ui/components/FormField/index.ts

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

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";