feat(user): add validation to my-account screen

jwplayer · Jul 22, 2021 · bd72479 · bd72479
1 parent 9fdaf4e
commit bd72479
Show file tree

Hide file tree

Showing 13 changed files with 200 additions and 57 deletions.
diff --git a/src/components/Account/Account.tsx b/src/components/Account/Account.tsx
@@ -1,34 +1,48 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
-import type { Customer } from 'types/account';
+import type { Customer, UpdateCustomerPayload } from 'types/account';
 
+import Visibility from '../../icons/Visibility';
+import VisibilityOff from '../../icons/VisibilityOff';
+import type { FormErrors } from '../../hooks/useForm';
+import useToggle from '../../hooks/useToggle';
 import Button from '../../components/Button/Button';
 import Form from '../Form/Form';
+import IconButton from '../IconButton/IconButton';
+import LoadingOverlay from '../LoadingOverlay/LoadingOverlay';
+import TextField from '../TextField/TextField';
 
 import styles from './Account.module.scss';
 
 type Props = {
   customer: Customer;
+  errors: FormErrors<UpdateCustomerPayload>;
+  isLoading: boolean;
   onUpdateEmailSubmit: (data: Record<string, string>) => void;
   onUpdateInfoSubmit: (data: Record<string, string>) => void;
+  onDeleteAccountClick: () => void;
+  onReset: () => void;
   panelClassName?: string;
   panelHeaderClassName?: string;
-  onDeleteAccountClick: () => void;
 };
 
 type Editing = 'none' | 'account' | 'password' | 'info';
 type FormValues = Record<string, string>;
 
 const Account = ({
   customer,
+  errors,
+  isLoading,
   panelClassName,
   panelHeaderClassName,
   onUpdateEmailSubmit,
   onUpdateInfoSubmit,
   onDeleteAccountClick,
+  onReset,
 }: Props): JSX.Element => {
   const { t } = useTranslation('user');
   const [editing, setEditing] = useState<Editing>('none');
+  const [viewPassword, toggleViewPassword] = useToggle();
 
   const handleSubmit = (values: FormValues) => {
     switch (editing) {
@@ -40,29 +54,64 @@ const Account = ({
         return;
     }
   };
+  const onCancelClick = (formResetHandler?: () => void): void => {
+    formResetHandler && formResetHandler();
+    setEditing('none');
+    onReset();
+  };
+
+  useEffect(() => {
+    !isLoading && setEditing('none');
+  }, [isLoading]);
 
   return (
     <Form initialValues={customer} onSubmit={handleSubmit} editing={editing !== 'none'}>
-      {({ values, handleChange, handleSubmit }) => (
+      {({ values, handleChange, handleSubmit, handleReset }) => (
         <>
+          {isLoading && <LoadingOverlay transparentBackground />}
           <div className={panelClassName}>
             <div className={panelHeaderClassName}>
               <h3>{t('account.email')}</h3>
             </div>
             <div className={styles.flexBox}>
-              <strong>{t('account.email')}</strong>
-              {editing === 'account' ? <input name="email" value={values.email} onChange={handleChange} /> : <p>{customer.email}</p>}
+              {editing === 'account' ? (
+                <TextField
+                  name="email"
+                  label={t('account.email')}
+                  value={values.email}
+                  onChange={handleChange}
+                  error={!!errors?.email}
+                  helperText={errors?.email}
+                  disabled={isLoading}
+                />
+              ) : (
+                <p>{customer.email}</p>
+              )}
               {editing === 'account' && (
-                <>
-                  <strong>{t('account.confirm_password')}</strong>
-                  <input name="confirmationPassword" value={values.confirmationPassword} onChange={handleChange} />
-                </>
+                <TextField
+                  name="confirmationPassword"
+                  label={t('account.confirm_password')}
+                  value={values.confirmationPassword}
+                  onChange={handleChange}
+                  error={!!errors?.confirmationPassword}
+                  helperText={errors?.confirmationPassword}
+                  type={viewPassword ? 'text' : 'password'}
+                  disabled={isLoading}
+                  rightControl={
+                    <IconButton
+                      aria-label={viewPassword ? t('account.hide_password') : t('account.view_password')}
+                      onClick={() => toggleViewPassword()}
+                    >
+                      {viewPassword ? <Visibility /> : <VisibilityOff />}
+                    </IconButton>
+                  }
+                />
               )}
               <div className={styles.controls}>
                 {editing === 'account' ? (
                   <>
-                    <Button label={t('account.save')} onClick={handleSubmit} />
-                    <Button variant="text" label={t('account.cancel')} onClick={() => setEditing('none')} />
+                    <Button label={t('account.save')} onClick={handleSubmit} disabled={isLoading || !values.email || !values.confirmationPassword} />
+                    <Button variant="text" label={t('account.cancel')} onClick={() => onCancelClick(handleReset)} />
                     <Button label={t('account.delete_account')} onClick={onDeleteAccountClick} />
                   </>
                 ) : (
@@ -87,10 +136,26 @@ const Account = ({
             </div>
             <div>
               <div className={styles.flexBox}>
-                <strong>{t('account.firstname')}</strong>
-                {editing === 'info' ? <input name="firstName" value={values.firstName} onChange={handleChange} /> : <p>{customer.firstName}</p>}
-                <strong>{t('account.lastname')}</strong>
-                {editing === 'info' ? <input name="lastName" value={values.lastName} onChange={handleChange} /> : <p>{customer.lastName}</p>}
+                <TextField
+                  name="firstName"
+                  label={t('account.firstname')}
+                  value={values.firstName}
+                  onChange={handleChange}
+                  error={!!errors?.firstName}
+                  helperText={errors?.firstName}
+                  disabled={isLoading}
+                  editing={editing === 'info'}
+                />
+                <TextField
+                  name="lastName"
+                  label={t('account.lastname')}
+                  value={values.lastName}
+                  onChange={handleChange}
+                  error={!!errors?.lastName}
+                  helperText={errors?.lastName}
+                  disabled={isLoading}
+                  editing={editing === 'info'}
+                />
                 <div className={styles.controls}>
                   {editing === 'info' ? (
                     <>

diff --git a/src/components/Account/__snapshots__/Account.test.tsx.snap b/src/components/Account/__snapshots__/Account.test.tsx.snap
@@ -11,9 +11,6 @@ exports[`<Account> renders and matches snapshot 1`] = `
     <div
       class="flexBox"
     >
-      <strong>
-        account.email
-      </strong>
       <p>
         todo@test.nl
       </p>
@@ -62,14 +59,28 @@ exports[`<Account> renders and matches snapshot 1`] = `
       <div
         class="flexBox"
       >
-        <strong>
-          account.firstname
-        </strong>
-        <p />
-        <strong>
-          account.lastname
-        </strong>
-        <p />
+        <div
+          class="textField"
+        >
+          <label
+            class="label"
+            for="text-field_1235_firstName"
+          >
+            account.firstname
+          </label>
+          <p />
+        </div>
+        <div
+          class="textField"
+        >
+          <label
+            class="label"
+            for="text-field_1235_lastName"
+          >
+            account.lastname
+          </label>
+          <p />
+        </div>
         <div
           class="controls"
         >

diff --git a/src/components/Button/Button.module.scss b/src/components/Button/Button.module.scss
@@ -44,7 +44,7 @@ $large-button-height: 40px;
 
   &.disabled {
     cursor: default;
-    opacity: 0.7;
+    opacity: 0.5;
   }
 
   &.large {

diff --git a/src/components/Form/Form.tsx b/src/components/Form/Form.tsx
@@ -2,8 +2,9 @@ import React, { useState } from 'react';
 
 type Return = {
   values: FormValues;
-  handleChange?: (event: React.FormEvent<HTMLInputElement>) => void;
+  handleChange?: React.ChangeEventHandler<HTMLInputElement>;
   handleSubmit?: () => void;
+  handleReset?: () => void;
 };
 
 type Props = {
@@ -26,11 +27,17 @@ const Form = ({ initialValues, editing = true, children, onSubmit }: Props): JSX
     onSubmit(values);
   };
 
+  const handleReset = () => setValues(initialValues);
+
   if (!editing) {
     return children({ values });
   }
 
-  return <form onSubmit={handleSubmit} noValidate>{children({ values, handleChange, handleSubmit })}</form>;
+  return (
+    <form onSubmit={handleSubmit} noValidate>
+      {children({ values, handleChange, handleSubmit, handleReset })}
+    </form>
+  );
 };
 
 export default Form;
diff --git a/src/components/LoadingOverlay/LoadingOverlay.module.scss b/src/components/LoadingOverlay/LoadingOverlay.module.scss
@@ -14,6 +14,9 @@
 
   background-color: var(--body-background-color);
 }
+.transparent {
+  opacity: 0.5;
+}
 
 .buffer {
   position: relative;

diff --git a/src/components/LoadingOverlay/LoadingOverlay.tsx b/src/components/LoadingOverlay/LoadingOverlay.tsx
@@ -1,10 +1,15 @@
 import React from 'react';
+import classNames from 'classnames';
 
 import styles from './LoadingOverlay.module.scss';
 
-const LoadingOverlay: React.FC = () => {
+type Props = {
+  transparentBackground?: boolean;
+};
+
+const LoadingOverlay = ({ transparentBackground = false }: Props): JSX.Element => {
   return (
-    <div className={styles.loadingOverlay}>
+    <div className={classNames(styles.loadingOverlay, { [styles.transparent]: transparentBackground })}>
       <div className={styles.buffer}>
         <div />
         <div />

diff --git a/src/components/TextField/TextField.tsx b/src/components/TextField/TextField.tsx
@@ -23,6 +23,7 @@ type Props = {
   readOnly?: boolean;
   multiline?: boolean;
   rows?: number;
+  editing?: boolean;
 };
 
 const TextField: React.FC<Props> = ({
@@ -35,6 +36,8 @@ const TextField: React.FC<Props> = ({
   rightControl,
   type = 'text',
   rows = 3,
+  editing = true,
+  value,
   ...rest
 }: Props) => {
   const id = useOpaqueId('text-field', rest.name);
@@ -53,6 +56,7 @@ const TextField: React.FC<Props> = ({
   const inputProps: Partial<Props & { id: string }> = {
     id,
     type,
+    value,
     ...rest,
   };
 
@@ -65,11 +69,15 @@ const TextField: React.FC<Props> = ({
       <label htmlFor={id} className={styles.label}>
         {label}
       </label>
-      <div className={styles.container}>
-        {leftControl ? <div className={styles.control}>{leftControl}</div> : null}
-        <InputComponent className={styles.input} {...inputProps} />
-        {rightControl ? <div className={styles.control}>{rightControl}</div> : null}
-      </div>
+      {editing ? (
+        <div className={styles.container}>
+          {leftControl ? <div className={styles.control}>{leftControl}</div> : null}
+          <InputComponent className={styles.input} {...inputProps} />
+          {rightControl ? <div className={styles.control}>{rightControl}</div> : null}
+        </div>
+      ) : (
+        <p>{value}</p>
+      )}
       {helperText ? <div className={styles.helperText}>{helperText}</div> : null}
     </div>
   );

diff --git a/src/containers/Customer/CustomerContainer.test.ts b/src/containers/Customer/CustomerContainer.test.ts
@@ -1,6 +1,6 @@
 // import React from 'react';
 
-describe('<Customer>', () => {
+describe('<Account>', () => {
   test('renders and matches snapshot', () => {
     // todo
     // const item = {