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;

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;

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}

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>

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>