From 76ef718e02947b3a3c750c5e8828b25dae11380d Mon Sep 17 00:00:00 2001
From: Igor Kamyshev <igor@kamyshev.me>
Date: Wed, 20 Feb 2019 11:11:34 +0200
Subject: [PATCH] feat(user): add layout for sign forms

---
 .../features/landing/features/SignForm.css    |  8 +++
 .../landing/features/sign-in/SignIn.tsx       | 47 ++++++++--------
 .../landing/features/sign-up/SignUp.tsx       | 56 ++++++++++---------
 front/src/ui/atoms/input/Input.tsx            | 12 +++-
 front/src/ui/atoms/input/InputProps.ts        |  3 +
 front/src/ui/atoms/input/InputType.ts         |  5 ++
 .../src/ui/atoms/input/helpers/resolveType.ts |  8 +++
 7 files changed, 88 insertions(+), 51 deletions(-)
 create mode 100644 front/src/features/landing/features/SignForm.css
 create mode 100644 front/src/ui/atoms/input/InputType.ts
 create mode 100644 front/src/ui/atoms/input/helpers/resolveType.ts

diff --git a/front/src/features/landing/features/SignForm.css b/front/src/features/landing/features/SignForm.css
new file mode 100644
index 00000000..641fca5f
--- /dev/null
+++ b/front/src/features/landing/features/SignForm.css
@@ -0,0 +1,8 @@
+.container {
+  max-width: 300px;
+}
+
+.card {
+  display: grid;
+  gap: 16px;
+}
diff --git a/front/src/features/landing/features/sign-in/SignIn.tsx b/front/src/features/landing/features/sign-in/SignIn.tsx
index 95dae6d0..7e6c948d 100644
--- a/front/src/features/landing/features/sign-in/SignIn.tsx
+++ b/front/src/features/landing/features/sign-in/SignIn.tsx
@@ -1,11 +1,17 @@
 import { useCallback } from 'react'
-import { Field, Form } from 'react-final-form'
+import { Form } from 'react-final-form'
 import { useMappedState } from 'redux-react-hook'
 
 import { useSignIn } from '@front/domain/user/hooks/useSignIn'
 import { getSignInFetching } from '@front/domain/user/selectors/getSignInFetching'
+import { Input } from '@front/features/final-form'
 import { pushRoute } from '@front/pushRoute'
+import { InputType } from '@front/ui/atoms/input/InputType'
+import { Label } from '@front/ui/atoms/label'
 import { LoadingButton } from '@front/ui/atoms/loading-button'
+import { Card } from '@front/ui/molecules/card'
+
+import * as styles from '../SignForm.css'
 
 export const SignIn = () => {
   const signIn = useSignIn()
@@ -20,27 +26,24 @@ export const SignIn = () => {
   return (
     <Form onSubmit={onSubmit}>
       {({ handleSubmit }) => (
-        <form onSubmit={handleSubmit}>
-          <h2>Sign-in</h2>
-
-          <div>
-            <label>Email</label>
-            <Field
-              name="email"
-              component="input"
-              placeholder="email@example.com"
-              type="email"
-            />
-          </div>
-
-          <div>
-            <label>Password</label>
-            <Field name="password" component="input" type="password" />
-          </div>
-
-          <LoadingButton fethcing={fetching} submit>
-            Sign-in
-          </LoadingButton>
+        <form onSubmit={handleSubmit} className={styles.container}>
+          <Card title="Sign-in" className={styles.card}>
+            <Label text="Email">
+              <Input
+                name="email"
+                type={InputType.Email}
+                placeholder="email@example.com"
+              />
+            </Label>
+
+            <Label text="Password">
+              <Input name="password" type={InputType.Password} />
+            </Label>
+
+            <LoadingButton fethcing={fetching} submit>
+              Sign-in
+            </LoadingButton>
+          </Card>
         </form>
       )}
     </Form>
diff --git a/front/src/features/landing/features/sign-up/SignUp.tsx b/front/src/features/landing/features/sign-up/SignUp.tsx
index 06ff45a0..6ea48e4f 100644
--- a/front/src/features/landing/features/sign-up/SignUp.tsx
+++ b/front/src/features/landing/features/sign-up/SignUp.tsx
@@ -1,11 +1,17 @@
 import { useCallback } from 'react'
-import { Field, Form } from 'react-final-form'
+import { Form } from 'react-final-form'
 import { useMappedState } from 'redux-react-hook'
 
 import { useSignUp } from '@front/domain/user/hooks/useSignUp'
 import { getSignUpFetching } from '@front/domain/user/selectors/getSignUpFetching'
+import { Input } from '@front/features/final-form'
 import { pushRoute } from '@front/pushRoute'
+import { InputType } from '@front/ui/atoms/input/InputType'
+import { Label } from '@front/ui/atoms/label'
 import { LoadingButton } from '@front/ui/atoms/loading-button'
+import { Card } from '@front/ui/molecules/card'
+
+import * as styles from '../SignForm.css'
 
 export const SignUp = () => {
   const signUp = useSignUp()
@@ -20,32 +26,28 @@ export const SignUp = () => {
   return (
     <Form onSubmit={onSubmit}>
       {({ handleSubmit }) => (
-        <form onSubmit={handleSubmit}>
-          <h2>Sign-up</h2>
-
-          <div>
-            <label>Email</label>
-            <Field
-              name="email"
-              component="input"
-              placeholder="email@example.com"
-              type="email"
-            />
-          </div>
-
-          <div>
-            <label>Password</label>
-            <Field name="password" component="input" type="password" />
-          </div>
-
-          <div>
-            <label>Again =) (fake!)</label>
-            <Field name="password-again" component="input" type="password" />
-          </div>
-
-          <LoadingButton fethcing={fetching} submit>
-            Sign-up
-          </LoadingButton>
+        <form onSubmit={handleSubmit} className={styles.container}>
+          <Card title="Sign-up" className={styles.card}>
+            <Label text="Email">
+              <Input
+                name="email"
+                type={InputType.Email}
+                placeholder="email@example.com"
+              />
+            </Label>
+
+            <Label text="Password">
+              <Input name="password" type={InputType.Password} />
+            </Label>
+
+            <Label text="Repeat password">
+              <Input name="password-repeat" type={InputType.Password} />
+            </Label>
+
+            <LoadingButton fethcing={fetching} submit>
+              Sign-up
+            </LoadingButton>
+          </Card>
         </form>
       )}
     </Form>
diff --git a/front/src/ui/atoms/input/Input.tsx b/front/src/ui/atoms/input/Input.tsx
index 06d06f7a..9e31e458 100644
--- a/front/src/ui/atoms/input/Input.tsx
+++ b/front/src/ui/atoms/input/Input.tsx
@@ -1,9 +1,15 @@
 import { Input as AntInput } from 'antd'
 import { ChangeEvent, useCallback } from 'react'
 
+import { resolveType } from './helpers/resolveType'
 import { InputProps } from './InputProps'
+import { InputType } from './InputType'
 
-export const Input = ({ onChange, ...props }: InputProps) => {
+export const Input = ({
+  onChange,
+  type = InputType.Default,
+  ...props
+}: InputProps) => {
   const handleChange = useCallback(
     (e: ChangeEvent<HTMLInputElement>) => {
       if (onChange) {
@@ -13,5 +19,7 @@ export const Input = ({ onChange, ...props }: InputProps) => {
     [onChange],
   )
 
-  return <AntInput onChange={handleChange} {...props} />
+  return (
+    <AntInput type={resolveType(type)} onChange={handleChange} {...props} />
+  )
 }
diff --git a/front/src/ui/atoms/input/InputProps.ts b/front/src/ui/atoms/input/InputProps.ts
index f956dfdc..aba91625 100644
--- a/front/src/ui/atoms/input/InputProps.ts
+++ b/front/src/ui/atoms/input/InputProps.ts
@@ -1,6 +1,8 @@
 import { InputProps as AntInputProps } from 'antd/lib/input'
 import { InputHTMLAttributes } from 'react'
 
+import { InputType } from './InputType'
+
 type HTMLInputProps = Pick<
   InputHTMLAttributes<HTMLInputElement>,
   'placeholder' | 'value'
@@ -10,6 +12,7 @@ type AntProps = Pick<AntInputProps, 'addonBefore' | 'addonAfter'>
 
 interface OwnProps {
   onChange?: (v?: string | undefined) => void
+  type?: InputType
 }
 
 export type InputProps = HTMLInputProps & AntProps & OwnProps
diff --git a/front/src/ui/atoms/input/InputType.ts b/front/src/ui/atoms/input/InputType.ts
new file mode 100644
index 00000000..ddb4abee
--- /dev/null
+++ b/front/src/ui/atoms/input/InputType.ts
@@ -0,0 +1,5 @@
+export enum InputType {
+  Default,
+  Email,
+  Password,
+}
diff --git a/front/src/ui/atoms/input/helpers/resolveType.ts b/front/src/ui/atoms/input/helpers/resolveType.ts
new file mode 100644
index 00000000..c0971b36
--- /dev/null
+++ b/front/src/ui/atoms/input/helpers/resolveType.ts
@@ -0,0 +1,8 @@
+import { InputType } from '../InputType'
+
+export const resolveType = (type: InputType): string =>
+  ({
+    [InputType.Default]: '',
+    [InputType.Email]: 'email',
+    [InputType.Password]: 'password',
+  }[type])