feat(LoginPage): add reusable Login page

src/index.js

@@ -30,3 +30,4 @@ export { default as FormCard } from "./forms/FormCard.react";
 export { default as FormTextInput } from "./forms/FormTextInput.react";
 export { default as FormCheckboxInput } from "./forms/FormCheckboxInput.react";
 export { default as colors } from "./colors";
+export { default as LoginPage } from "./page_templates/account/LoginPage";

src/page_templates/account/LoginPage/LoginPage.react.js

@@ -0,0 +1,90 @@
+// @flow
+
+import * as React from "react";
+
+import { FormCard, FormTextInput, StandaloneFormPage } from "../../../";
+import withTouchedErrors from "../../../helpers/withTouchedErrors.react";
+
+import defaultStrings from "./LoginPage.strings";
+import type { stringTypes } from "./LoginPage.strings";
+
+type fieldTypes = {|
+  email?: string,
+  password?: string,
+|};
+
+type touchedTypes = {|
+  email?: boolean,
+  password?: boolean,
+|};
+
+type Props = {|
+  +strings?: stringTypes,
+  +action?: string,
+  +method?: string,
+  +onSubmit?: Function,
+  +onChange?: (SyntheticInputEvent<HTMLInputElement>) => void,
+  +onBlur?: (SyntheticInputEvent<HTMLInputElement>) => void,
+  +values?: fieldTypes,
+  +errors?: fieldTypes,
+  +touched?: touchedTypes,
+|};
+
+/**
+ * A login page
+ * Can be easily wrapped with form libraries like formik and redux-form
+ */
+function LoginPage(props: Props): React.Node {
+  const {
+    action,
+    method,
+    onSubmit,
+    onChange,
+    onBlur,
+    values,
+    strings = {},
+    errors,
+  } = props;
+
+  return (
+    <StandaloneFormPage>
+      <FormCard
+        buttonText={strings.buttonText || defaultStrings.buttonText}
+        title={strings.title || defaultStrings.title}
+        onSubmit={onSubmit}
+        action={action}
+        method={method}
+      >
+        <FormTextInput
+          name="email"
+          label={strings.emailLabel || defaultStrings.emailLabel}
+          placeholder={
+            strings.emailPlaceholder || defaultStrings.emailPlaceholder
+          }
+          onChange={onChange}
+          onBlur={onBlur}
+          value={values && values.email}
+          error={errors && errors.email}
+        />
+        <FormTextInput
+          name="password"
+          type="password"
+          label={strings.passwordLabel || defaultStrings.passwordLabel}
+          placeholder={
+            strings.passwordPlaceholder || defaultStrings.passwordPlaceholder
+          }
+          onChange={onChange}
+          onBlur={onBlur}
+          value={values && values.password}
+          error={errors && errors.password}
+        />
+      </FormCard>
+    </StandaloneFormPage>
+  );
+}
+
+const LoginPageWithTouchedErrors: React.ComponentType<
+  Props
+> = withTouchedErrors(["email", "password"])(LoginPage);
+
+export default LoginPageWithTouchedErrors;

src/page_templates/account/LoginPage/LoginPage.strings.js

@@ -0,0 +1,13 @@
+//@flow
+const strings = {
+  title: "Login to your Account",
+  buttonText: "Login",
+  emailLabel: "Email Address",
+  emailPlaceholder: "Enter email",
+  passwordLabel: "Password",
+  passwordPlaceholder: "Password",
+};
+
+export default strings;
+
+export type stringTypes = { [$Keys<typeof strings>]: string };

src/page_templates/account/LoginPage/index.js

@@ -0,0 +1,3 @@
+import LoginPage from "./LoginPage.react";
+
+export default LoginPage;