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