From 8dc53e9b27898634cbe9b07de8456913d839bba0 Mon Sep 17 00:00:00 2001
From: Christiaan Scheermeijer <christiaan@videodock.com>
Date: Wed, 21 Jul 2021 17:29:53 +0200
Subject: [PATCH] feat(auth): connect login form with MediaStore API

---
 package.json                                  |  2 +-
 src/components/Button/Button.module.scss      | 60 ++++++++------
 src/components/Button/Button.tsx              |  7 +-
 src/components/Form/Form.tsx                  |  4 +-
 .../Form/__snapshots__/Form.test.tsx.snap     |  4 +-
 .../LoginForm/LoginForm.module.scss           | 10 +++
 src/components/LoginForm/LoginForm.test.tsx   |  2 +-
 src/components/LoginForm/LoginForm.tsx        | 51 +++++-------
 .../__snapshots__/LoginForm.test.tsx.snap     |  1 +
 .../TextField/TextField.module.scss           |  2 +-
 src/containers/AccountModal/AccountModal.tsx  |  5 +-
 src/containers/AccountModal/forms/Login.tsx   | 45 ++++++++++
 src/hooks/useForm.ts                          | 82 +++++++++++++++++++
 src/i18n/locales/en_US/account.json           |  6 +-
 src/i18n/locales/nl_NL/account.json           |  6 +-
 src/styles/_theme.scss                        |  3 +
 types/account.d.ts                            |  5 ++
 17 files changed, 231 insertions(+), 64 deletions(-)
 create mode 100644 src/containers/AccountModal/forms/Login.tsx
 create mode 100644 src/hooks/useForm.ts

diff --git a/package.json b/package.json
index b2f32834c..38fa240ca 100644
--- a/package.json
+++ b/package.json
@@ -12,7 +12,7 @@
     "test": "jest",
     "test-watch": "jest --watch",
     "test-coverage": "jest --coverage",
-    "i18next": "i18next src/{components,containers,screens}/**/*.tsx && node ./scripts/i18next/generate.js",
+    "i18next": "i18next src/{components,containers,screens}/**/{**/,/}*.tsx && node ./scripts/i18next/generate.js",
     "format": "prettier --write \"src/**/*.{js,jsx,ts,tsx}\"",
     "lint": "prettier --check \"src/**/*.{js,jsx,ts,tsx}\"",
     "lint:styles": "stylelint \"src/**/*.scss\"",
diff --git a/src/components/Button/Button.module.scss b/src/components/Button/Button.module.scss
index df597c78d..c721a5d99 100644
--- a/src/components/Button/Button.module.scss
+++ b/src/components/Button/Button.module.scss
@@ -26,18 +26,27 @@ $large-button-height: 40px;
   transition: background-color 0.1s ease, transform 0.1s ease;
 
   @media (hover: hover) and (pointer: fine) {
-    &:hover,
-    &:focus {
-      transform: scale(1.1);
-    }
-    &:focus:not(:focus-visible):not(:hover) {
-      transform: scale(1);
-    }
-    &:focus-visible {
-      transform: scale(1.1);
+    &:not(.disabled) {
+      &:hover,
+      &:focus {
+        transform: scale(1.1);
+      }
+
+      &:focus:not(:focus-visible):not(:hover) {
+        transform: scale(1);
+      }
+
+      &:focus-visible {
+        transform: scale(1.1);
+      }
     }
   }
 
+  &.disabled {
+    cursor: default;
+    opacity: 0.7;
+  }
+
   &.large {
     height: $large-button-height;
   }
@@ -55,11 +64,13 @@ $large-button-height: 40px;
   &.outlined {
     border: 1px solid rgba(255, 255, 255, 0.3);
 
-    &.active,
-    &:focus {
-      color: var(--highlight-contrast-color, theme.$btn-primary-color);
-      background-color: var(--highlight-color, theme.$btn-primary-bg);
-      border-color: var(--highlight-color, theme.$btn-primary-bg);
+    &:not(.disabled) {
+      &.active,
+      &:focus {
+        color: var(--highlight-contrast-color, theme.$btn-primary-color);
+        background-color: var(--highlight-color, theme.$btn-primary-bg);
+        border-color: var(--highlight-color, theme.$btn-primary-bg);
+      }
     }
   }
 
@@ -67,14 +78,17 @@ $large-button-height: 40px;
     background: none;
     opacity: 0.7;
 
-    &.active,
-    &:focus {
-      opacity: 1;
-    }
-    &:hover {
-      z-index: 1;
-      background: theme.$btn-default-bg;
-      opacity: 1;
+    &:not(.disabled) {
+      &.active,
+      &:focus {
+        opacity: 1;
+      }
+
+      &:hover {
+        z-index: 1;
+        background: theme.$btn-default-bg;
+        opacity: 1;
+      }
     }
   }
 
@@ -83,7 +97,7 @@ $large-button-height: 40px;
     width: 100%;
 
     @media (hover: hover) and (pointer: fine) {
-      &:hover {
+      &:hover:not(.disabled) {
         transform: scale(1.04);
       }
     }
diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx
index c7349cfc5..b11956bdb 100644
--- a/src/components/Button/Button.tsx
+++ b/src/components/Button/Button.tsx
@@ -22,6 +22,8 @@ type Props = {
   to?: string;
   role?: string;
   className?: string;
+  type?: 'button' | 'submit' | 'reset';
+  disabled?: boolean;
 } & React.AriaAttributes;
 
 const Button: React.FC<Props> = ({
@@ -33,6 +35,8 @@ const Button: React.FC<Props> = ({
   active = false,
   variant = 'outlined',
   size = 'medium',
+  disabled,
+  type,
   to,
   onClick,
   className,
@@ -42,6 +46,7 @@ const Button: React.FC<Props> = ({
     [styles.active]: active,
     [styles.fullWidth]: fullWidth,
     [styles.large]: size === 'large',
+    [styles.disabled]: disabled,
   });
 
   const icon = startIcon ? <div className={styles.startIcon}>{startIcon}</div> : null;
@@ -54,7 +59,7 @@ const Button: React.FC<Props> = ({
       {children}
     </NavLink>
   ) : (
-    <button className={combinedClassNames} onClick={onClick} {...rest}>
+    <button className={combinedClassNames} onClick={onClick} type={type} disabled={disabled} aria-disabled={disabled} {...rest}>
       {icon}
       {span}
       {children}
diff --git a/src/components/Form/Form.tsx b/src/components/Form/Form.tsx
index 91b41cd8e..79fcedcf6 100644
--- a/src/components/Form/Form.tsx
+++ b/src/components/Form/Form.tsx
@@ -16,7 +16,7 @@ type Props = {
 const Form = ({ initialValues, editing = true, children, onSubmit }: Props): JSX.Element => {
   const [values, setValues] = useState<FormValues>(initialValues);
 
-  const handleChange = (event: React.FormEvent<HTMLInputElement>) => {
+  const handleChange = (event: React.FormEvent<HTMLInputElement | HTMLTextAreaElement>) => {
     if (!event.currentTarget) return;
     setValues({ ...values, [event.currentTarget.name]: event.currentTarget.value });
   };
@@ -30,7 +30,7 @@ const Form = ({ initialValues, editing = true, children, onSubmit }: Props): JSX
     return children({ values });
   }
 
-  return <form onSubmit={handleSubmit}>{children({ values, handleChange, handleSubmit })}</form>;
+  return <form onSubmit={handleSubmit} noValidate>{children({ values, handleChange, handleSubmit })}</form>;
 };
 
 export default Form;
diff --git a/src/components/Form/__snapshots__/Form.test.tsx.snap b/src/components/Form/__snapshots__/Form.test.tsx.snap
index f56a00229..c19f9b2ba 100644
--- a/src/components/Form/__snapshots__/Form.test.tsx.snap
+++ b/src/components/Form/__snapshots__/Form.test.tsx.snap
@@ -2,7 +2,9 @@
 
 exports[`<Form> renders Form 1`] = `
 <div>
-  <form>
+  <form
+    novalidate=""
+  >
     <input
       name="test"
       value="Testing"
diff --git a/src/components/LoginForm/LoginForm.module.scss b/src/components/LoginForm/LoginForm.module.scss
index d620c690c..96c438e6b 100644
--- a/src/components/LoginForm/LoginForm.module.scss
+++ b/src/components/LoginForm/LoginForm.module.scss
@@ -8,6 +8,16 @@
   font-size: 24px;
 }
 
+.error {
+  margin-bottom: 24px;
+  padding: 16px;
+  color: variables.$white;
+  font-family: theme.$body-font-family;
+  font-size: 18px;
+  background-color: theme.$form-error-bg-color;
+  border-radius: 4px;
+}
+
 .link {
   margin-bottom: 24px;
 }
diff --git a/src/components/LoginForm/LoginForm.test.tsx b/src/components/LoginForm/LoginForm.test.tsx
index 14bce5187..f534f00e2 100644
--- a/src/components/LoginForm/LoginForm.test.tsx
+++ b/src/components/LoginForm/LoginForm.test.tsx
@@ -6,7 +6,7 @@ import LoginForm from './LoginForm';
 
 describe('<LoginForm>', () => {
   test('renders and matches snapshot', () => {
-    const { container } = render(<LoginForm />);
+    const { container } = render(<LoginForm onSubmit={jest.fn()} onChange={jest.fn()} values={{ email: '', password: ''}} errors={{}} />);
 
     expect(container).toMatchSnapshot();
   });
diff --git a/src/components/LoginForm/LoginForm.tsx b/src/components/LoginForm/LoginForm.tsx
index a87a3ccb1..aa4d6a887 100644
--- a/src/components/LoginForm/LoginForm.tsx
+++ b/src/components/LoginForm/LoginForm.tsx
@@ -1,6 +1,7 @@
-import React, { useState } from 'react';
+import React from 'react';
 import { useHistory } from 'react-router';
 import { useTranslation } from 'react-i18next';
+import type { LoginFormData } from 'types/account';
 
 import useToggle from '../../hooks/useToggle';
 import { addQueryParam } from '../../utils/history';
@@ -10,55 +11,45 @@ import Link from '../Link/Link';
 import IconButton from '../IconButton/IconButton';
 import Visibility from '../../icons/Visibility';
 import VisibilityOff from '../../icons/VisibilityOff';
+import type { FormErrors } from '../../hooks/useForm';
 
 import styles from './LoginForm.module.scss';
 
-export type LoginFormData = {
-  email: string;
-  password: string;
-};
-
 type Props = {
-  onSubmit?: (event: React.FormEvent<HTMLFormElement>, formData: LoginFormData) => void;
+  onSubmit: React.FormEventHandler<HTMLFormElement>;
+  onChange: React.ChangeEventHandler<HTMLInputElement | HTMLTextAreaElement>;
+  error?: string;
+  errors: FormErrors<LoginFormData>;
+  values: LoginFormData;
+  submitting: boolean;
 };
 
-const LoginForm: React.FC<Props> = ({ onSubmit }: Props) => {
+const LoginForm: React.FC<Props> = ({ onSubmit, onChange, values, errors, submitting }: Props) => {
   const [viewPassword, toggleViewPassword] = useToggle();
-  const [formData, setFormData] = useState<LoginFormData>({
-    email: '',
-    password: '',
-  });
   const { t } = useTranslation('account');
   const history = useHistory();
 
-  const formSubmitHandler = (event: React.FormEvent<HTMLFormElement>) => {
-    event.preventDefault();
-
-    if (onSubmit) {
-      onSubmit(event, formData);
-    }
-  };
-
-  const inputChangeHandler = (event: React.ChangeEvent<HTMLInputElement>) => {
-    setFormData((data) => ({ ...data, [event.target.name]: event.target.value }));
-  };
-
   return (
-    <form onSubmit={formSubmitHandler} noValidate>
+    <form onSubmit={onSubmit} noValidate>
       <h2 className={styles.title}>{t('login.sign_in')}</h2>
+      {errors.form ? <div className={styles.error}>{errors.form}</div> : null}
       <TextField
-        value={formData.email}
-        onChange={inputChangeHandler}
+        value={values.email}
+        onChange={onChange}
         label={t('login.email')}
         placeholder={t('login.email')}
+        error={!!errors.email || !!errors.form}
+        helperText={errors.email}
         name="email"
         type="email"
       />
       <TextField
-        value={formData.password}
-        onChange={inputChangeHandler}
+        value={values.password}
+        onChange={onChange}
         label={t('login.password')}
         placeholder={t('login.password')}
+        error={!!errors.password || !!errors.form}
+        helperText={errors.password}
         name="password"
         type={viewPassword ? 'text' : 'password'}
         rightControl={
@@ -70,7 +61,7 @@ const LoginForm: React.FC<Props> = ({ onSubmit }: Props) => {
       <Link className={styles.link} to={addQueryParam(history, 'u', 'forgot-password')}>
         {t('login.forgot_password')}
       </Link>
-      <Button label={t('login.sign_in')} variant="contained" color="primary" size="large" fullWidth />
+      <Button type="submit" label={t('login.sign_in')} variant="contained" color="primary" size="large" disabled={submitting} fullWidth />
     </form>
   );
 };
diff --git a/src/components/LoginForm/__snapshots__/LoginForm.test.tsx.snap b/src/components/LoginForm/__snapshots__/LoginForm.test.tsx.snap
index 160737faa..e5d07f999 100644
--- a/src/components/LoginForm/__snapshots__/LoginForm.test.tsx.snap
+++ b/src/components/LoginForm/__snapshots__/LoginForm.test.tsx.snap
@@ -86,6 +86,7 @@ exports[`<LoginForm> renders and matches snapshot 1`] = `
     </a>
     <button
       class="button primary fullWidth large"
+      type="submit"
     >
       <span>
         login.sign_in
diff --git a/src/components/TextField/TextField.module.scss b/src/components/TextField/TextField.module.scss
index 6301032f6..e85cd32eb 100644
--- a/src/components/TextField/TextField.module.scss
+++ b/src/components/TextField/TextField.module.scss
@@ -6,7 +6,6 @@
   margin-bottom: 8px;
 
   &.error {
-    .label,
     .helperText {
       color: theme.$text-field-error-color;
     }
@@ -85,6 +84,7 @@
 
 .helperText {
   margin-top: 4px;
+  font-family: theme.$body-font-family;
   font-size: 12px;
   text-align: left;
 }
diff --git a/src/containers/AccountModal/AccountModal.tsx b/src/containers/AccountModal/AccountModal.tsx
index 3b2c8f656..b788840e7 100644
--- a/src/containers/AccountModal/AccountModal.tsx
+++ b/src/containers/AccountModal/AccountModal.tsx
@@ -5,9 +5,9 @@ import { ConfigContext } from '../../providers/ConfigProvider';
 import Dialog from '../../components/Dialog/Dialog';
 import useQueryParam from '../../hooks/useQueryParam';
 import { removeQueryParam } from '../../utils/history';
-import LoginForm from '../../components/LoginForm/LoginForm';
 
 import styles from './AccountModal.module.scss';
+import Login from './forms/Login';
 
 const AccountModal = () => {
   const history = useHistory();
@@ -24,7 +24,8 @@ const AccountModal = () => {
   return (
     <Dialog open={!!view} onClose={closeHandler}>
       <div className={styles.banner}>{banner ? <img src={banner} alt="" /> : null}</div>
-      <LoginForm onSubmit={(event, formData) => console.info(event, formData)} />
+      <Login />
+
     </Dialog>
   );
 };
diff --git a/src/containers/AccountModal/forms/Login.tsx b/src/containers/AccountModal/forms/Login.tsx
new file mode 100644
index 000000000..20862e855
--- /dev/null
+++ b/src/containers/AccountModal/forms/Login.tsx
@@ -0,0 +1,45 @@
+import React from 'react';
+import { object, string, SchemaOf } from 'yup';
+import type { LoginFormData } from 'types/account';
+import { useTranslation } from 'react-i18next';
+import { useHistory } from 'react-router';
+
+import LoginForm from '../../../components/LoginForm/LoginForm';
+import { login } from '../../../stores/AccountStore';
+import useForm, { UseFormOnSubmitHandler } from '../../../hooks/useForm';
+import { removeQueryParam } from '../../../utils/history';
+
+const Login = () => {
+  const history = useHistory();
+  const { t } = useTranslation('account');
+  const loginSubmitHandler: UseFormOnSubmitHandler<LoginFormData> = async (formData, { setErrors, setSubmitting, setValue }) => {
+    try {
+      await login(formData.email, formData.password);
+
+      // close modal
+      history.push(removeQueryParam(history, 'u'));
+    } catch (error: unknown) {
+      if (error instanceof Error) {
+        if (error.message.toLowerCase().includes('invalid param email')) {
+          setErrors({ email: t('login.wrong_email') });
+        } else {
+          setErrors({ form: t('login.wrong_combination') });
+        }
+        setValue('password', '');
+      }
+    }
+
+    setSubmitting(false);
+  };
+
+  const validationSchema: SchemaOf<LoginFormData> = object().shape({
+    email: string().email(t('login.field_is_not_valid_email')).required(t('login.field_required')),
+    password: string().required(t('login.field_required')),
+  });
+  const initialValues: LoginFormData = { email: '', password: '' };
+  const { handleSubmit, handleChange, values, errors, submitting } = useForm(initialValues, loginSubmitHandler, validationSchema);
+
+  return <LoginForm onSubmit={handleSubmit} onChange={handleChange} values={values} errors={errors} submitting={submitting} />;
+};
+
+export default Login;
diff --git a/src/hooks/useForm.ts b/src/hooks/useForm.ts
new file mode 100644
index 000000000..0420d757f
--- /dev/null
+++ b/src/hooks/useForm.ts
@@ -0,0 +1,82 @@
+import React, { useState } from 'react';
+import { ValidationError, AnySchema } from 'yup';
+
+type UseFormChangeHandler = React.ChangeEventHandler<HTMLInputElement | HTMLTextAreaElement>;
+type UseFormSubmitHandler = React.FormEventHandler<HTMLFormElement>;
+
+export type GenericFormErrors = { form: string };
+export type FormErrors<T> = Partial<T & GenericFormErrors>;
+
+export type UseFormReturnValue<T> = {
+  values: T;
+  errors: FormErrors<T>;
+  submitting: boolean;
+  handleChange: UseFormChangeHandler;
+  handleSubmit: UseFormSubmitHandler;
+};
+
+type UseFormMethods<T> = {
+  setValue: (key: keyof T, value: string) => void;
+  setErrors: (errors: FormErrors<T>) => void;
+  setSubmitting: (submitting: boolean) => void;
+};
+
+export type UseFormOnSubmitHandler<T> = (values: T, formMethods: UseFormMethods<T>) => void;
+
+export default function useForm<T extends FormValues>(
+  initialValues: T,
+  onSubmit: UseFormOnSubmitHandler<T>,
+  validationSchema?: AnySchema,
+): UseFormReturnValue<T> {
+  const [values, setValues] = useState<T>(initialValues);
+  const [submitting, setSubmitting] = useState(false);
+  const [errors, setErrors] = useState<FormErrors<T>>({});
+
+  const setValue = (name: keyof T, value: string) => {
+    setValues((current) => ({ ...current, [name]: value }));
+  };
+
+  const handleChange: UseFormChangeHandler = (event) => {
+    setValues((current) => ({ ...current, [event.target.name]: event.target.value }));
+  };
+
+  const handleSubmit: UseFormSubmitHandler = (event) => {
+    event.preventDefault();
+
+    if (!onSubmit) return;
+
+    // reset errors before submitting
+    setErrors({});
+
+    // start submitting
+    setSubmitting(true);
+
+    // validate values with schema
+    if (validationSchema) {
+      try {
+        validationSchema.validateSync(values, { abortEarly: false });
+      } catch (error: unknown) {
+        if (error instanceof ValidationError) {
+          const newErrors: Record<string, string> = {};
+
+          for (let index = 0; index < error.inner.length; index++) {
+            const path = error.inner[index].path as string;
+            const message = error.inner[index].errors[0] as string;
+
+            if (path && message && !newErrors[path]) {
+              newErrors[path] = message;
+            }
+          }
+
+          setErrors(newErrors as FormErrors<T>);
+        }
+
+        return;
+      }
+    }
+
+    onSubmit(values, { setValue, setErrors, setSubmitting });
+  };
+
+  return { values, errors, handleChange, handleSubmit, submitting };
+}
diff --git a/src/i18n/locales/en_US/account.json b/src/i18n/locales/en_US/account.json
index cad16c878..483cec96c 100644
--- a/src/i18n/locales/en_US/account.json
+++ b/src/i18n/locales/en_US/account.json
@@ -1,10 +1,14 @@
 {
   "login": {
     "email": "Email",
+    "field_is_not_valid_email": "Please re-enter your email details and try again.",
+    "field_required": "This field is required",
     "forgot_password": "Forgot password?",
     "hide_password": "Hide password",
     "password": "Password",
     "sign_in": "Sign in",
-    "view_password": "View password"
+    "view_password": "View password",
+    "wrong_combination": "Wrong email/password combination",
+    "wrong_email": "Please re-enter your email details and try again."
   }
 }
diff --git a/src/i18n/locales/nl_NL/account.json b/src/i18n/locales/nl_NL/account.json
index f3504fe4b..3e615e06a 100644
--- a/src/i18n/locales/nl_NL/account.json
+++ b/src/i18n/locales/nl_NL/account.json
@@ -1,10 +1,14 @@
 {
   "login": {
     "email": "",
+    "field_is_not_valid_email": "",
+    "field_required": "",
     "forgot_password": "",
     "hide_password": "",
     "password": "",
     "sign_in": "",
-    "view_password": ""
+    "view_password": "",
+    "wrong_combination": "",
+    "wrong_email": ""
   }
 }
diff --git a/src/styles/_theme.scss b/src/styles/_theme.scss
index ba76bf683..1b31f0632 100644
--- a/src/styles/_theme.scss
+++ b/src/styles/_theme.scss
@@ -90,6 +90,9 @@ $cookies-title-color: $primary-color !default;
 $cookies-color: $dark-color !default;
 $cookies-bg: variables.$white !default;
 
+// Form
+$form-error-bg-color: #FF0C3E !default;
+
 // Footer
 
 $footer-color: variables.$white !default;
diff --git a/types/account.d.ts b/types/account.d.ts
index 8369da022..f3d66521c 100644
--- a/types/account.d.ts
+++ b/types/account.d.ts
@@ -16,6 +16,11 @@ export type LoginPayload = {
   publisherId?: string;
 };
 
+export type LoginFormData = {
+  email: string;
+  password: string;
+};
+
 export type RegisterPayload = {
   email: string;
   password: string;