Adapt SignIn

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

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>

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>

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

@@ -1,6 +0,0 @@
-.root {
-}
-
-.forgotPassword {
-  text-align: right;
-}

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>

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>