fix hot bugs.

client/src/containers/Authentication/InviteAccept.js

@@ -0,0 +1,174 @@
+import React, { useEffect, useMemo } from 'react';
+import * as Yup from 'yup';
+import { useFormik } from 'formik';
+import { useIntl } from 'react-intl';
+import ErrorMessage from 'components/ErrorMessage';
+import AppToaster from 'components/AppToaster';
+import { compose } from 'utils';
+import InviteFormConnect from 'connectors/InviteForm.connect';
+import { useParams } from 'react-router-dom';
+import {
+  Button,
+  InputGroup,
+  Intent,
+  FormGroup,
+  HTMLSelect,
+} from '@blueprintjs/core';
+
+function Invite({ requestSubmitInvite }) {
+  const intl = useIntl();
+  let params = useParams('accept/:token');
+
+  const { token } = params;
+
+  const phoneRegExp = /^((\\+[1-9]{1,4}[ \\-]*)|(\\([0-9]{2,3}\\)[ \\-]*)|([0-9]{2,4})[ \\-]*)*?[0-9]{3,4}?[ \\-]*[0-9]{3,4}?$/;
+
+  const language = useMemo(() => [
+    { value: null, label: 'Select Country' },
+    { value: 'Arabic', label: 'Arabic' },
+    { value: 'English', label: 'English' },
+  ], []);
+
+  const ValidationSchema = Yup.object().shape({
+    first_name: Yup.string().required(),
+    last_name: Yup.string().required(),
+    email: Yup.string().email().required(),
+    phone_number: Yup.string().matches(phoneRegExp).required(),
+    language: Yup.string().required(),
+    password: Yup.string()
+      .min(4, 'Password has to be longer than 4 characters!')
+      .required('Password is required!'),
+  });
+
+  const initialValues = useMemo(
+    () => ({
+      first_name: '',
+      last_name: '',
+      email: '',
+      phone_number: '',
+      language: '',
+      password: '',
+    }),
+    []
+  );
+  const {
+    handleSubmit,
+    errors,
+    values,
+    touched,
+    getFieldProps,
+  } = useFormik({
+    enableReinitialize: true,
+    validationSchema: ValidationSchema,
+    initialValues: {
+      ...initialValues,
+    },
+    onSubmit: (values, { setSubmitting }) => {
+      requestSubmitInvite(values, token).then((response) => {
+        AppToaster.show({
+          message: 'success',
+        });
+        setSubmitting(false);
+      })
+      .catch((error) => {
+        setSubmitting(false);
+      });
+    },
+  });
+  const requiredSpan = useMemo(() => <span class='required'>*</span>, []);
+
+  return (
+    <div className={'invite-form'}>
+      <form onSubmit={handleSubmit}>
+        <FormGroup
+          label={'First Name'}
+          labelInfo={requiredSpan}
+          className={'form-group--first_name'}
+          intent={errors.first_name && touched.first_name && Intent.DANGER}
+          helperText={<ErrorMessage name={'first_name'} />}
+        >
+          <InputGroup
+            intent={errors.first_name && touched.first_name && Intent.DANGER}
+            {...getFieldProps('first_name')}
+          />
+        </FormGroup>
+
+        <FormGroup
+          label={'Last Name'}
+          labelInfo={requiredSpan}
+          className={'form-group--last_name'}
+          intent={errors.last_name && touched.last_name && Intent.DANGER}
+          helperText={<ErrorMessage name={'last_name'} />}
+        >
+          <InputGroup
+            intent={errors.last_name && touched.last_name && Intent.DANGER}
+            {...getFieldProps('last_name')}
+          />
+        </FormGroup>
+
+        <FormGroup
+          label={'Phone Number'}
+          labelInfo={requiredSpan}
+          className={'form-group--phone_number'}
+          intent={errors.phone_number && touched.phone_number && Intent.DANGER}
+          helperText={<ErrorMessage name={'phone_number'} />}
+        >
+          <InputGroup
+            intent={(errors.phone_number && touched.phone_number) && Intent.DANGER}
+            {...getFieldProps('phone_number')}
+          />
+        </FormGroup>
+
+        <FormGroup
+          label={'Language'}
+          labelInfo={requiredSpan}
+          className={'form-group--language'}
+          intent={(errors.language && touched.language) && Intent.DANGER}
+          helperText={<ErrorMessage name={'language'} />}
+        >
+          <HTMLSelect
+            fill={true}
+            options={language}
+            {...getFieldProps('language')}
+          />
+        </FormGroup>
+
+        <FormGroup
+          label={'Email'}
+          labelInfo={requiredSpan}
+          className={'form-group--email'}
+          intent={(errors.email && touched.email) && Intent.DANGER}
+          helperText={<ErrorMessage name={'email'} />}
+        >
+          <InputGroup
+            intent={errors.email && touched.email && Intent.DANGER}
+            {...getFieldProps('email')}
+          />
+        </FormGroup>
+
+        <FormGroup
+          label={'Password'}
+          labelInfo={requiredSpan}
+          className={'form-group--password'}
+          intent={(errors.password && touched.password) && Intent.DANGER}
+          helperText={<ErrorMessage name={'password'} />}
+        >
+          <InputGroup
+            lang={true}
+            type={'password'}
+            intent={(errors.password && touched.password) && Intent.DANGER}
+            {...getFieldProps('password')}
+          />
+        </FormGroup>
+
+        <div class='form__floating-footer'>
+          <Button intent={Intent.PRIMARY} type='submit'>
+            Invite
+          </Button>
+        </div>
+      </form>
+    </div>
+  );
+}
+
+export default compose(InviteFormConnect)(Invite);