From 0dfdea0e4e0ecdf221449a38921e701d728a93b2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bel=C3=A9n=20Curcio?= <curciobelen@gmail.com>
Date: Thu, 9 Aug 2018 13:17:45 -0300
Subject: [PATCH] Auth Views

---
 src/core/client/auth/components/App.tsx       | 13 +++-
 .../client/auth/components/ForgotPassword.css |  9 +++
 .../client/auth/components/ForgotPassword.tsx | 37 ++++++++++
 .../client/auth/components/ResetPassword.css  |  9 +++
 .../client/auth/components/ResetPassword.tsx  | 38 ++++++++++
 src/core/client/auth/components/SignIn.css    |  7 ++
 src/core/client/auth/components/SignIn.tsx    | 24 ++++---
 src/core/client/auth/components/SignUp.css    |  6 ++
 src/core/client/auth/components/SignUp.tsx    | 71 +++++++++++--------
 .../containers/ForgotPasswordContainer.tsx    | 10 +++
 .../containers/ResetPasswordContainer.tsx     | 10 +++
 .../stream/containers/UserBoxContainer.tsx    |  2 +-
 .../ui/components/TextField/TextField.css     |  2 +
 13 files changed, 198 insertions(+), 40 deletions(-)
 create mode 100644 src/core/client/auth/components/ForgotPassword.css
 create mode 100644 src/core/client/auth/components/ForgotPassword.tsx
 create mode 100644 src/core/client/auth/components/ResetPassword.css
 create mode 100644 src/core/client/auth/components/ResetPassword.tsx
 create mode 100644 src/core/client/auth/containers/ForgotPasswordContainer.tsx
 create mode 100644 src/core/client/auth/containers/ResetPasswordContainer.tsx

diff --git a/src/core/client/auth/components/App.tsx b/src/core/client/auth/components/App.tsx
index 7de209ae6..4fe34d3a1 100644
--- a/src/core/client/auth/components/App.tsx
+++ b/src/core/client/auth/components/App.tsx
@@ -1,13 +1,20 @@
 import * as React from "react";
 import { StatelessComponent } from "react";
 
+import ForgotPasswordContainer from "../containers/ForgotPasswordContainer";
+import ResetPasswordContainer from "../containers/ResetPasswordContainer";
 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
   // https://github.com/facebook/relay/commit/1e87e43add7667a494f7ff4cfa7f03f1ab8d81a2
-  view: "SIGN_UP" | "SIGN_IN" | "FORGOT_PASSWORD" | "%future added value";
+  view:
+    | "SIGN_UP"
+    | "SIGN_IN"
+    | "FORGOT_PASSWORD"
+    | "RESET_PASSWORD"
+    | "%future added value";
 }
 
 const App: StatelessComponent<AppProps> = ({ view }) => {
@@ -16,6 +23,10 @@ const App: StatelessComponent<AppProps> = ({ view }) => {
       return <SignUpContainer />;
     case "SIGN_IN":
       return <SignInContainer />;
+    case "FORGOT_PASSWORD":
+      return <ForgotPasswordContainer />;
+    case "RESET_PASSWORD":
+      return <ResetPasswordContainer />;
     default:
       return <SignInContainer />;
   }
diff --git a/src/core/client/auth/components/ForgotPassword.css b/src/core/client/auth/components/ForgotPassword.css
new file mode 100644
index 000000000..8489081c1
--- /dev/null
+++ b/src/core/client/auth/components/ForgotPassword.css
@@ -0,0 +1,9 @@
+.root {
+  width: 330px;
+  padding-top: calc(5 * var(--spacing-unit));
+}
+
+.footer {
+  padding-top: var(--spacing-unit);
+  width: 100%;
+}
diff --git a/src/core/client/auth/components/ForgotPassword.tsx b/src/core/client/auth/components/ForgotPassword.tsx
new file mode 100644
index 000000000..1c60ea9c6
--- /dev/null
+++ b/src/core/client/auth/components/ForgotPassword.tsx
@@ -0,0 +1,37 @@
+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 ForgotPassword: StatelessComponent = props => {
+  return (
+    <Flex itemGutter direction="column" className={styles.root}>
+      <Typography variant="heading1" align="center">
+        Forgot Password
+      </Typography>
+      <Typography variant="bodyCopy" align="center">
+        Enter your email address below and we will send you a link to reset your
+        password.
+      </Typography>
+      <FormField>
+        <InputLabel>Email Address</InputLabel>
+        <TextField />
+      </FormField>
+      <div className={styles.footer}>
+        <Button variant="filled" color="primary" size="large" fullWidth>
+          Send Email
+        </Button>
+      </div>
+    </Flex>
+  );
+};
+
+export default ForgotPassword;
diff --git a/src/core/client/auth/components/ResetPassword.css b/src/core/client/auth/components/ResetPassword.css
new file mode 100644
index 000000000..8489081c1
--- /dev/null
+++ b/src/core/client/auth/components/ResetPassword.css
@@ -0,0 +1,9 @@
+.root {
+  width: 330px;
+  padding-top: calc(5 * var(--spacing-unit));
+}
+
+.footer {
+  padding-top: var(--spacing-unit);
+  width: 100%;
+}
diff --git a/src/core/client/auth/components/ResetPassword.tsx b/src/core/client/auth/components/ResetPassword.tsx
new file mode 100644
index 000000000..5f000d091
--- /dev/null
+++ b/src/core/client/auth/components/ResetPassword.tsx
@@ -0,0 +1,38 @@
+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 ResetPassword: StatelessComponent = props => {
+  return (
+    <Flex itemGutter direction="column" className={styles.root}>
+      <Typography variant="heading1" align="center">
+        Reset Password
+      </Typography>
+      <FormField>
+        <InputLabel>Password</InputLabel>
+        <Typography>Must be at least 8 characters</Typography>
+        <TextField />
+      </FormField>
+      <FormField>
+        <InputLabel>Confirm Password</InputLabel>
+        <TextField />
+      </FormField>
+      <div className={styles.footer}>
+        <Button variant="filled" color="primary" size="large" fullWidth>
+          Reset Password
+        </Button>
+      </div>
+    </Flex>
+  );
+};
+
+export default ResetPassword;
diff --git a/src/core/client/auth/components/SignIn.css b/src/core/client/auth/components/SignIn.css
index 9aff9cb83..8110981fc 100644
--- a/src/core/client/auth/components/SignIn.css
+++ b/src/core/client/auth/components/SignIn.css
@@ -1,7 +1,14 @@
 .root {
   width: 330px;
+  padding-top: calc(5 * var(--spacing-unit));
 }
 
 .forgotPassword {
   text-align: right;
 }
+
+.footer,
+.subFooter {
+  padding-top: var(--spacing-unit);
+  width: 100%;
+}
diff --git a/src/core/client/auth/components/SignIn.tsx b/src/core/client/auth/components/SignIn.tsx
index 97dfdb477..9244aa2af 100644
--- a/src/core/client/auth/components/SignIn.tsx
+++ b/src/core/client/auth/components/SignIn.tsx
@@ -25,20 +25,26 @@ const SignIn: StatelessComponent = props => {
         <InputLabel>Password</InputLabel>
         <TextField />
         <span className={styles.forgotPassword}>
-          <Button variant="underlined" color="primary">
+          <Button variant="underlined" color="primary" size="small">
             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
+      <div className={styles.footer}>
+        <Button variant="filled" color="primary" size="large" fullWidth>
+          Sign in and join the conversation
         </Button>
-      </Flex>
+        <Flex
+          itemGutter="half"
+          justifyContent="center"
+          className={styles.subFooter}
+        >
+          <Typography>Don't have an account?</Typography>
+          <Button variant="underlined" size="small" color="primary">
+            Sign Up
+          </Button>
+        </Flex>
+      </div>
     </Flex>
   );
 };
diff --git a/src/core/client/auth/components/SignUp.css b/src/core/client/auth/components/SignUp.css
index 667e35b7a..2b939d10f 100644
--- a/src/core/client/auth/components/SignUp.css
+++ b/src/core/client/auth/components/SignUp.css
@@ -1,3 +1,9 @@
 .root {
   width: 330px;
 }
+
+.footer,
+.subFooter {
+  padding-top: var(--spacing-unit);
+  width: 100%;
+}
diff --git a/src/core/client/auth/components/SignUp.tsx b/src/core/client/auth/components/SignUp.tsx
index 73a01ec63..9473d2167 100644
--- a/src/core/client/auth/components/SignUp.tsx
+++ b/src/core/client/auth/components/SignUp.tsx
@@ -1,6 +1,6 @@
 import * as React from "react";
 import { StatelessComponent } from "react";
-import * as styles from "./SignIn.css";
+import * as styles from "./SignUp.css";
 
 import {
   Button,
@@ -14,38 +14,51 @@ import {
 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
-          “.”
+      <Flex itemGutter direction="column">
+        <Typography variant="heading1" align="center">
+          Sign up to join the conversation
         </Typography>
-        <TextField />
-      </FormField>
 
-      <FormField>
-        <InputLabel>Password</InputLabel>
-        <Typography>Must be at least 8 characters</Typography>
-        <TextField />
-      </FormField>
+        <FormField>
+          <InputLabel>Email Address</InputLabel>
+          <TextField />
+        </FormField>
 
-      <FormField>
-        <InputLabel>Confirm Password</InputLabel>
-        <TextField />
-      </FormField>
+        <FormField>
+          <InputLabel>Username</InputLabel>
+          <Typography>
+            A unique identifier displayed on your comments. You may use “_” and
+            “.”
+          </Typography>
+          <TextField />
+        </FormField>
 
-      <Button variant="filled" color="primary" size="large" fullWidth>
-        Sign up and join the conversation
-      </Button>
+        <FormField>
+          <InputLabel>Password</InputLabel>
+          <Typography>Must be at least 8 characters</Typography>
+          <TextField />
+        </FormField>
+
+        <FormField>
+          <InputLabel>Confirm Password</InputLabel>
+          <TextField />
+        </FormField>
+      </Flex>
+      <div className={styles.footer}>
+        <Button variant="filled" color="primary" size="large" fullWidth>
+          Sign up and join the conversation
+        </Button>
+        <Flex
+          itemGutter="half"
+          justifyContent="center"
+          className={styles.subFooter}
+        >
+          <Typography>Already have an account?</Typography>
+          <Button variant="underlined" size="small" color="primary">
+            Sign In
+          </Button>
+        </Flex>
+      </div>
     </Flex>
   );
 };
diff --git a/src/core/client/auth/containers/ForgotPasswordContainer.tsx b/src/core/client/auth/containers/ForgotPasswordContainer.tsx
new file mode 100644
index 000000000..b364e7e9e
--- /dev/null
+++ b/src/core/client/auth/containers/ForgotPasswordContainer.tsx
@@ -0,0 +1,10 @@
+import * as React from "react";
+import { StatelessComponent } from "react";
+
+import ForgotPassword from "../components/ForgotPassword";
+
+const ForgotPasswordContainer: StatelessComponent = () => {
+  return <ForgotPassword />;
+};
+
+export default ForgotPasswordContainer;
diff --git a/src/core/client/auth/containers/ResetPasswordContainer.tsx b/src/core/client/auth/containers/ResetPasswordContainer.tsx
new file mode 100644
index 000000000..6dab0eef1
--- /dev/null
+++ b/src/core/client/auth/containers/ResetPasswordContainer.tsx
@@ -0,0 +1,10 @@
+import * as React from "react";
+import { StatelessComponent } from "react";
+
+import ResetPassword from "../components/ResetPassword";
+
+const ResetPasswordContainer: StatelessComponent = () => {
+  return <ResetPassword />;
+};
+
+export default ResetPasswordContainer;
diff --git a/src/core/client/stream/containers/UserBoxContainer.tsx b/src/core/client/stream/containers/UserBoxContainer.tsx
index 176a28eea..fca219660 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=350,height=550,top=200,left=500"
+          features="menubar=0,resizable=0,width=350,height=600,top=200,left=500"
           open={open}
           focus={focus}
           onFocus={this.handleFocus}
diff --git a/src/core/client/ui/components/TextField/TextField.css b/src/core/client/ui/components/TextField/TextField.css
index 335fc3734..954ce577e 100644
--- a/src/core/client/ui/components/TextField/TextField.css
+++ b/src/core/client/ui/components/TextField/TextField.css
@@ -5,6 +5,8 @@
   padding: calc(0.5 * var(--spacing-unit));
   box-sizing: border-box;
   border-radius: var(--round-corners);
+  height: 36px;
+  line-height: 36px;
 }
 
 .colorRegular {