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