From 39edec79cbf8f84565e9125133ac600909b26a6e Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Mon, 27 Aug 2018 15:51:59 +0200
Subject: [PATCH] Adapt SignIn

---
 src/core/client/auth/components/App.css       |   3 +-
 .../client/auth/components/ForgotPassword.tsx |   3 +-
 .../client/auth/components/ResetPassword.tsx  |   3 +-
 src/core/client/auth/components/SignIn.css    |   6 -
 src/core/client/auth/components/SignIn.tsx    | 132 ++++++++++--------
 src/core/client/auth/components/SignUp.tsx    |   4 +-
 .../auth/containers/SignInContainer.tsx       |  25 +---
 .../auth/containers/SignUpContainer.tsx       |  20 +--
 src/core/client/ui/shared/typography.css      |  14 +-
 src/locales/en-US/auth.ftl                    |  19 +++
 10 files changed, 118 insertions(+), 111 deletions(-)
 delete mode 100644 src/core/client/auth/components/SignIn.css
 create mode 100644 src/locales/en-US/auth.ftl

diff --git a/src/core/client/auth/components/App.css b/src/core/client/auth/components/App.css
index 99be430a5..c36dceb31 100644
--- a/src/core/client/auth/components/App.css
+++ b/src/core/client/auth/components/App.css
@@ -12,6 +12,7 @@
 
 .root {
   width: 100%;
-  padding: var(--spacing-unit);
+  padding: var(--spacing-unit) var(--spacing-unit) calc(2 * var(--spacing-unit))
+    var(--spacing-unit);
   box-sizing: border-box;
 }
diff --git a/src/core/client/auth/components/ForgotPassword.tsx b/src/core/client/auth/components/ForgotPassword.tsx
index 68707eea2..49b1be188 100644
--- a/src/core/client/auth/components/ForgotPassword.tsx
+++ b/src/core/client/auth/components/ForgotPassword.tsx
@@ -1,7 +1,6 @@
 import React, { StatelessComponent } from "react";
 import { Field, Form } from "react-final-form";
 import { OnSubmit } from "talk-framework/lib/form";
-import * as styles from "./SignIn.css";
 
 import {
   composeValidators,
@@ -35,7 +34,7 @@ const ForgotPassword: StatelessComponent<ForgotPasswordForm> = props => {
       {({ handleSubmit }) => (
         <form autoComplete="off" onSubmit={handleSubmit}>
           <AutoHeightContainer />
-          <Flex itemGutter="double" direction="column" className={styles.root}>
+          <Flex itemGutter="double" direction="column">
             <Typography variant="heading1" align="center">
               Forgot Password
             </Typography>
diff --git a/src/core/client/auth/components/ResetPassword.tsx b/src/core/client/auth/components/ResetPassword.tsx
index b459bf460..c16139cdd 100644
--- a/src/core/client/auth/components/ResetPassword.tsx
+++ b/src/core/client/auth/components/ResetPassword.tsx
@@ -1,7 +1,6 @@
 import React, { StatelessComponent } from "react";
 import { Field, Form } from "react-final-form";
 import { OnSubmit } from "talk-framework/lib/form";
-import * as styles from "./SignIn.css";
 
 import {
   composeValidators,
@@ -38,7 +37,7 @@ const ResetPassword: StatelessComponent<ResetPasswordForm> = props => {
       {({ handleSubmit }) => (
         <form autoComplete="off" onSubmit={handleSubmit}>
           <AutoHeightContainer />
-          <Flex itemGutter="double" direction="column" className={styles.root}>
+          <Flex itemGutter="double" direction="column">
             <Typography variant="heading1" align="center">
               Reset Password
             </Typography>
diff --git a/src/core/client/auth/components/SignIn.css b/src/core/client/auth/components/SignIn.css
deleted file mode 100644
index 55699399e..000000000
--- a/src/core/client/auth/components/SignIn.css
+++ /dev/null
@@ -1,6 +0,0 @@
-.root {
-}
-
-.forgotPassword {
-  text-align: right;
-}
diff --git a/src/core/client/auth/components/SignIn.tsx b/src/core/client/auth/components/SignIn.tsx
index 406891a84..46dc0a910 100644
--- a/src/core/client/auth/components/SignIn.tsx
+++ b/src/core/client/auth/components/SignIn.tsx
@@ -1,3 +1,4 @@
+import { Localized } from "fluent-react/compat";
 import React, { StatelessComponent } from "react";
 import { Field, Form } from "react-final-form";
 import { OnSubmit } from "talk-framework/lib/form";
@@ -6,7 +7,6 @@ import {
   composeValidators,
   required,
   validateEmail,
-  validatePassword,
 } from "talk-framework/lib/validation";
 
 import {
@@ -14,6 +14,7 @@ import {
   CallOut,
   Flex,
   FormField,
+  HorizontalGutter,
   InputLabel,
   TextField,
   Typography,
@@ -21,7 +22,6 @@ import {
 } from "talk-ui/components";
 
 import AutoHeightContainer from "../containers/AutoHeightContainer";
-import * as styles from "./SignIn.css";
 
 interface FormProps {
   email: string;
@@ -30,8 +30,8 @@ interface FormProps {
 
 export interface SignInForm {
   onSubmit: OnSubmit<FormProps>;
-  goToSignUp: () => void;
-  goToForgotPassword: () => void;
+  onGotoSignUp: () => void;
+  onGotoForgotPassword: () => void;
 }
 
 const SignIn: StatelessComponent<SignInForm> = props => {
@@ -40,10 +40,12 @@ const SignIn: StatelessComponent<SignInForm> = props => {
       {({ handleSubmit, submitting, submitError }) => (
         <form autoComplete="off" onSubmit={handleSubmit}>
           <AutoHeightContainer />
-          <Flex itemGutter="double" direction="column" className={styles.root}>
-            <Typography variant="heading1" align="center">
-              Sign in to join the conversation
-            </Typography>
+          <HorizontalGutter size="double">
+            <Localized id="signIn-signInToJoinHeader">
+              <Typography variant="heading1" align="center">
+                Sign in to join the conversation
+              </Typography>
+            </Localized>
 
             {submitError && (
               <CallOut color="error" fullWidth>
@@ -57,16 +59,24 @@ const SignIn: StatelessComponent<SignInForm> = props => {
             >
               {({ input, meta }) => (
                 <FormField>
-                  <InputLabel>Email Address</InputLabel>
-                  <TextField
-                    name={input.name}
-                    onChange={input.onChange}
-                    value={input.value}
-                    placeholder="Email Address"
-                  />
+                  <Localized id="signIn-emailAddressLabel">
+                    <InputLabel>Email Address</InputLabel>
+                  </Localized>
+                  <Localized
+                    id="signIn-emailAddressTextfield"
+                    attrs={{ placeholder: true }}
+                  >
+                    <TextField
+                      name={input.name}
+                      onChange={input.onChange}
+                      value={input.value}
+                      placeholder="Email Address"
+                      fullWidth
+                    />
+                  </Localized>
                   {meta.touched &&
                     (meta.error || meta.submitError) && (
-                      <ValidationMessage>
+                      <ValidationMessage fullWidth>
                         {meta.error || meta.submitError}
                       </ValidationMessage>
                     )}
@@ -74,63 +84,75 @@ const SignIn: StatelessComponent<SignInForm> = props => {
               )}
             </Field>
 
-            <Field
-              name="password"
-              validate={composeValidators(required, validatePassword)}
-            >
+            <Field name="password" validate={composeValidators(required)}>
               {({ input, meta }) => (
                 <FormField>
-                  <InputLabel>Password</InputLabel>
-                  <TextField
-                    name={input.name}
-                    onChange={input.onChange}
-                    value={input.value}
-                    placeholder="Password"
-                    type="password"
-                  />
+                  <Localized id="signIn-passwordLabel">
+                    <InputLabel>Password</InputLabel>
+                  </Localized>
+                  <Localized
+                    id="signIn-passwordTextfield"
+                    attrs={{ placeholder: true }}
+                  >
+                    <TextField
+                      name={input.name}
+                      onChange={input.onChange}
+                      value={input.value}
+                      placeholder="Password"
+                      type="password"
+                      fullWidth
+                    />
+                  </Localized>
                   {meta.touched &&
                     (meta.error || meta.submitError) && (
-                      <ValidationMessage>
+                      <ValidationMessage fullWidth>
                         {meta.error || meta.submitError}
                       </ValidationMessage>
                     )}
-                  <span className={styles.forgotPassword}>
-                    <Button
-                      variant="underlined"
-                      color="primary"
-                      size="small"
-                      onClick={props.goToForgotPassword}
-                    >
-                      Forgot your password?
-                    </Button>
-                  </span>
+                  <Flex justifyContent="flex-end">
+                    <Localized id="signIn-forgotYourPassword">
+                      <Button
+                        variant="underlined"
+                        color="primary"
+                        size="small"
+                        onClick={props.onGotoForgotPassword}
+                      >
+                        Forgot your password?
+                      </Button>
+                    </Localized>
+                  </Flex>
                 </FormField>
               )}
             </Field>
-
-            <div>
+            <Localized id="signIn-signInAndJoinButton">
               <Button
                 variant="filled"
                 color="primary"
                 size="large"
-                fullWidth
                 type="submit"
+                fullWidth
               >
                 Sign in and join the conversation
               </Button>
-              <Flex itemGutter="half" justifyContent="center">
-                <Typography>Don't have an account?</Typography>
-                <Button
-                  variant="underlined"
-                  size="small"
-                  color="primary"
-                  onClick={props.goToSignUp}
-                >
-                  Sign Up
-                </Button>
-              </Flex>
-            </div>
-          </Flex>
+            </Localized>
+            <Flex justifyContent="center">
+              <Localized
+                id="signIn-noAccountSignUp"
+                button={
+                  <Button
+                    variant="underlined"
+                    size="small"
+                    color="primary"
+                    onClick={props.onGotoSignUp}
+                  />
+                }
+              >
+                <Typography variant="bodyCopy" container={Flex}>
+                  {"Don't have an account? <button>Sign Up</button>"}
+                </Typography>
+              </Localized>
+            </Flex>
+          </HorizontalGutter>
         </form>
       )}
     </Form>
diff --git a/src/core/client/auth/components/SignUp.tsx b/src/core/client/auth/components/SignUp.tsx
index 3b01e7609..42ec23610 100644
--- a/src/core/client/auth/components/SignUp.tsx
+++ b/src/core/client/auth/components/SignUp.tsx
@@ -34,7 +34,7 @@ interface FormProps {
 
 export interface SignUpForm {
   onSubmit: OnSubmit<FormProps>;
-  goToSignIn: () => void;
+  onGotoSignIn: () => void;
 }
 
 const SignUp: StatelessComponent<SignUpForm> = props => {
@@ -179,7 +179,7 @@ const SignUp: StatelessComponent<SignUpForm> = props => {
                   variant="underlined"
                   size="small"
                   color="primary"
-                  onClick={props.goToSignIn}
+                  onClick={props.onGotoSignIn}
                 >
                   Sign In
                 </Button>
diff --git a/src/core/client/auth/containers/SignInContainer.tsx b/src/core/client/auth/containers/SignInContainer.tsx
index 54077c2e7..fe2b87949 100644
--- a/src/core/client/auth/containers/SignInContainer.tsx
+++ b/src/core/client/auth/containers/SignInContainer.tsx
@@ -13,21 +13,7 @@ interface SignInContainerProps {
   setView: SetViewMutation;
 }
 
-interface SignUpContainerState {
-  error: string | null;
-}
-
-export type View = "SIGN_UP" | "FORGOT_PASSWORD";
-
-class SignInContainer extends Component<
-  SignInContainerProps,
-  SignUpContainerState
-> {
-  private setView = (view: View) => {
-    this.props.setView({
-      view,
-    });
-  };
+class SignInContainer extends Component<SignInContainerProps> {
   private onSubmit: SignInForm["onSubmit"] = async (input, form) => {
     try {
       await this.props.signIn(input);
@@ -36,14 +22,15 @@ class SignInContainer extends Component<
       return { [FORM_ERROR]: error.message };
     }
   };
-  private goToForgotPassword = () => this.setView("FORGOT_PASSWORD");
-  private goToSignUp = () => this.setView("SIGN_UP");
+  private goToForgotPassword = () =>
+    this.props.setView({ view: "FORGOT_PASSWORD" });
+  private goToSignUp = () => this.props.setView({ view: "SIGN_UP" });
   public render() {
     return (
       <SignIn
         onSubmit={this.onSubmit}
-        goToForgotPassword={this.goToForgotPassword}
-        goToSignUp={this.goToSignUp}
+        onGotoForgotPassword={this.goToForgotPassword}
+        onGotoSignUp={this.goToSignUp}
       />
     );
   }
diff --git a/src/core/client/auth/containers/SignUpContainer.tsx b/src/core/client/auth/containers/SignUpContainer.tsx
index f18115557..8be2d84ed 100644
--- a/src/core/client/auth/containers/SignUpContainer.tsx
+++ b/src/core/client/auth/containers/SignUpContainer.tsx
@@ -14,21 +14,7 @@ interface SignUpContainerProps {
   setView: SetViewMutation;
 }
 
-interface SignUpContainerState {
-  error: string | null;
-}
-
-export type View = "SIGN_IN";
-
-class SignUpContainer extends Component<
-  SignUpContainerProps,
-  SignUpContainerState
-> {
-  private setView = (view: View) => {
-    this.props.setView({
-      view,
-    });
-  };
+class SignUpContainer extends Component<SignUpContainerProps> {
   private onSubmit: SignUpForm["onSubmit"] = async (input, form) => {
     try {
       return await this.props.signUp(input);
@@ -37,9 +23,9 @@ class SignUpContainer extends Component<
       return { [FORM_ERROR]: error.message };
     }
   };
-  private goToSignIn = () => this.setView("SIGN_IN");
+  private goToSignIn = () => this.props.setView({ view: "SIGN_IN" });
   public render() {
-    return <SignUp onSubmit={this.onSubmit} goToSignIn={this.goToSignIn} />;
+    return <SignUp onSubmit={this.onSubmit} onGotoSignIn={this.goToSignIn} />;
   }
 }
 
diff --git a/src/core/client/ui/shared/typography.css b/src/core/client/ui/shared/typography.css
index 7f99ddf39..3cd3a2c01 100644
--- a/src/core/client/ui/shared/typography.css
+++ b/src/core/client/ui/shared/typography.css
@@ -1,7 +1,7 @@
 @font-face {
   font-family: "Source Sans Pro";
   font-style: normal;
-  font-display: swap;
+  font-display: block;
   font-weight: 300;
   src: local("Source Sans Pro Light "), local("Source Sans Pro-Light"),
     url("typeface-source-sans-pro/files/source-sans-pro-latin-300.woff2")
@@ -13,7 +13,7 @@
 @font-face {
   font-family: "Source Sans Pro";
   font-style: normal;
-  font-display: swap;
+  font-display: block;
   font-weight: 400;
   src: local("Source Sans Pro Regular italic"),
     local("Source Sans Pro-Regularitalic"),
@@ -26,7 +26,7 @@
 @font-face {
   font-family: "Source Sans Pro";
   font-style: normal;
-  font-display: swap;
+  font-display: block;
   font-weight: 600;
   src: local("Source Sans Pro SemiBold italic"),
     local("Source Sans Pro-SemiBolditalic"),
@@ -39,7 +39,7 @@
 @font-face {
   font-family: "Manuale";
   font-style: normal;
-  font-display: swap;
+  font-display: block;
   font-weight: 400;
   src: local("Manuale Regular "), local("Manuale-Regular"),
     url("typeface-manuale/files/manuale-latin-400.woff2") format("woff2"),
@@ -49,7 +49,7 @@
 @font-face {
   font-family: "Manuale";
   font-style: normal;
-  font-display: swap;
+  font-display: block;
   font-weight: 600;
   src: local("Manuale SemiBold "), local("Manuale-SemiBold"),
     url("typeface-manuale/files/manuale-latin-600.woff2") format("woff2"),
@@ -60,7 +60,7 @@
   font-size: calc(24rem / var(--rem-base));
   font-weight: var(--font-weight-medium);
   font-family: var(--font-family-serif);
-  line-height: calc(32em / 24);
+  line-height: calc(26em / 24);
   letter-spacing: calc(0.2em / 24);
   color: var(--palette-text-primary);
 }
@@ -69,7 +69,7 @@
   font-size: calc(20rem / var(--rem-base));
   font-weight: var(--font-weight-medium);
   font-family: var(--font-family-serif);
-  line-height: calc(24em / 20);
+  line-height: calc(22em / 20);
   letter-spacing: calc(0.2em / 20);
   color: var(--palette-text-primary);
 }
diff --git a/src/locales/en-US/auth.ftl b/src/locales/en-US/auth.ftl
new file mode 100644
index 000000000..87e1649ae
--- /dev/null
+++ b/src/locales/en-US/auth.ftl
@@ -0,0 +1,19 @@
+### Localization for the Auth Popup
+
+## Sign In
+
+signIn-signInToJoinHeader = Sign in to join the conversation
+
+signIn-signInAndJoinButton = Sign in and join the conversation
+
+signIn-emailAddressLabel = Email Address
+signIn-emailAddressTextfield =
+  .placeholder = Email Address
+
+signIn-passwordLabel = Password
+signIn-passwordTextfield =
+  .placeholder = Password
+
+signIn-forgotYourPassword = Forgot your password?
+
+signIn-noAccountSignUp = Don't have an account? <button>Sign Up</button>