From 06f5d020b6e845bad53713cbfbe302ad787ff6f4 Mon Sep 17 00:00:00 2001
From: Jon Thompson <jon@iu-hq.com>
Date: Mon, 28 May 2018 17:34:16 +0100
Subject: [PATCH] feat(RegisterPage): add RegisterPage component

---
 example/src/pages/RegisterPage.react.js       |  27 +---
 src/index.js                                  |   1 +
 .../RegisterPage/RegisterPage.react.js        | 117 ++++++++++++++++++
 .../RegisterPage/RegisterPage.strings.js      |  16 +++
 .../account/RegisterPage/index.js             |   3 +
 5 files changed, 139 insertions(+), 25 deletions(-)
 create mode 100644 src/page_templates/account/RegisterPage/RegisterPage.react.js
 create mode 100644 src/page_templates/account/RegisterPage/RegisterPage.strings.js
 create mode 100644 src/page_templates/account/RegisterPage/index.js

diff --git a/example/src/pages/RegisterPage.react.js b/example/src/pages/RegisterPage.react.js
index 46bcece9..b8feb3ec 100644
--- a/example/src/pages/RegisterPage.react.js
+++ b/example/src/pages/RegisterPage.react.js
@@ -2,35 +2,12 @@
 
 import * as React from "react";
 
-import {
-  FormCard,
-  FormTextInput,
-  FormCheckboxInput,
-  StandaloneFormPage,
-} from "tabler-react";
+import { RegisterPage as TablerRegisterPage } from "tabler-react";
 
 type Props = {||};
 
 function RegisterPage(props: Props): React.Node {
-  return (
-    <StandaloneFormPage>
-      <FormCard
-        action=""
-        buttonText="Create Account"
-        method="get"
-        title="Create New Account"
-      >
-        <FormTextInput label="Name" placeHolder="Enter name" />
-        <FormTextInput label="Email Address" placeHolder="Enter email" />
-        <FormTextInput
-          type="password"
-          label="Password"
-          placeHolder="Password"
-        />
-        <FormCheckboxInput label="Agree to the terms and policy" />
-      </FormCard>
-    </StandaloneFormPage>
-  );
+  return <TablerRegisterPage />;
 }
 
 export default RegisterPage;
diff --git a/src/index.js b/src/index.js
index 99860cc8..ddf40da0 100644
--- a/src/index.js
+++ b/src/index.js
@@ -31,3 +31,4 @@ 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";
+export { default as RegisterPage } from "./page_templates/account/RegisterPage";
diff --git a/src/page_templates/account/RegisterPage/RegisterPage.react.js b/src/page_templates/account/RegisterPage/RegisterPage.react.js
new file mode 100644
index 00000000..c4c38185
--- /dev/null
+++ b/src/page_templates/account/RegisterPage/RegisterPage.react.js
@@ -0,0 +1,117 @@
+// @flow
+
+import * as React from "react";
+
+import {
+  FormCard,
+  FormTextInput,
+  FormCheckboxInput,
+  StandaloneFormPage,
+} from "../../../";
+import withTouchedErrors from "../../../helpers/withTouchedErrors.react";
+
+import defaultStrings from "./RegisterPage.strings";
+import type { stringTypes } from "./RegisterPage.strings";
+
+type fieldTypes = {|
+  name?: string,
+  email?: string,
+  password?: string,
+  terms?: string,
+|};
+
+type touchedTypes = {|
+  name?: boolean,
+  email?: boolean,
+  password?: boolean,
+  terms?: string,
+|};
+
+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 register page
+ * Can be easily wrapped with form libraries like formik and redux-form
+ */
+function RegisterPage(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="name"
+          label={strings.nameLabel || defaultStrings.nameLabel}
+          placeholder={
+            strings.namePlaceholder || defaultStrings.namePlaceholder
+          }
+          onChange={onChange}
+          onBlur={onBlur}
+          value={values && values.name}
+          error={errors && errors.name}
+        />
+        <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}
+        />
+        <FormCheckboxInput
+          onChange={onChange}
+          onBlur={onBlur}
+          value={values && values.terms}
+          name="terms"
+          label={strings.termsLabel || defaultStrings.termsLabel}
+        />
+      </FormCard>
+    </StandaloneFormPage>
+  );
+}
+
+const RegisterPageWithTouchedErrors: React.ComponentType<
+  Props
+> = withTouchedErrors(["name", "email", "password", "terms"])(RegisterPage);
+
+export default RegisterPageWithTouchedErrors;
diff --git a/src/page_templates/account/RegisterPage/RegisterPage.strings.js b/src/page_templates/account/RegisterPage/RegisterPage.strings.js
new file mode 100644
index 00000000..6c2e1757
--- /dev/null
+++ b/src/page_templates/account/RegisterPage/RegisterPage.strings.js
@@ -0,0 +1,16 @@
+//@flow
+const strings = {
+  title: "Create New Account",
+  buttonText: "Create Account",
+  nameLabel: "Name",
+  namePlaceholder: "Enter name",
+  emailLabel: "Email Address",
+  emailPlaceholder: "Enter email",
+  passwordLabel: "Password",
+  passwordPlaceholder: "Password",
+  termsLabel: "Agree to the terms and policy",
+};
+
+export default strings;
+
+export type stringTypes = { [$Keys<typeof strings>]: string };
diff --git a/src/page_templates/account/RegisterPage/index.js b/src/page_templates/account/RegisterPage/index.js
new file mode 100644
index 00000000..270673fa
--- /dev/null
+++ b/src/page_templates/account/RegisterPage/index.js
@@ -0,0 +1,3 @@
+import RegisterPage from "./RegisterPage.react";
+
+export default RegisterPage;