Auth Views

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 />;
   }

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%;
+}

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;

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%;
+}

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;

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%;
+}

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>
   );
 };

src/core/client/auth/components/SignUp.css

@@ -1,3 +1,9 @@
 .root {
   width: 330px;
 }
+
+.footer,
+.subFooter {
+  padding-top: var(--spacing-unit);
+  width: 100%;
+}

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>
   );
 };

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;

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;

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}

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 {