From d9f824cc85c9634a8a85818c620e25beaf7e17bd Mon Sep 17 00:00:00 2001
From: Hazem Krimi <krimihazem1@gmail.com>
Date: Fri, 7 May 2021 01:44:33 +0100
Subject: [PATCH] Add create user page

---
 src/pages/CreateUser/index.tsx | 479 +++++++++++++++++++++++++++++++++
 src/pages/CreateUser/styles.ts |   9 +
 src/pages/index.tsx            |   2 +
 3 files changed, 490 insertions(+)
 create mode 100644 src/pages/CreateUser/index.tsx
 create mode 100644 src/pages/CreateUser/styles.ts

diff --git a/src/pages/CreateUser/index.tsx b/src/pages/CreateUser/index.tsx
new file mode 100644
index 0000000..52b4586
--- /dev/null
+++ b/src/pages/CreateUser/index.tsx
@@ -0,0 +1,479 @@
+import * as Yup from 'yup';
+import { useFormik } from 'formik';
+import { Redirect, useHistory, useParams } from 'react-router';
+import { useMutation, useQuery, useReactiveVar } from '@apollo/client';
+import { useState } from 'react';
+import { roleVar } from '../../graphql/state';
+import {
+  Box,
+  Button,
+  Text,
+  SectionSelector,
+  Input,
+  Select,
+  Alert,
+  Spinner,
+} from '../../components';
+import { Wrapper } from './styles';
+import { ArrowLeft, Profile, Security } from '../../assets';
+import {
+  GetCountryCodesQuery,
+  GetCountryCodesQueryVariables,
+  CreateUserMutation,
+  CreateUserMutationVariables,
+} from '../../graphql/types';
+import { GET_COUNTRY_CODES } from '../../graphql/auth.api';
+import { CREATE_USER, GET_ALL_USERS } from '../../graphql/admin.api';
+
+const CreateUser = () => {
+  const history = useHistory();
+  const { role: newUserRole } = useParams<{
+    role: 'Client' | 'ProductOwner' | 'Developer';
+  }>();
+  const role = useReactiveVar(roleVar);
+  const [newUser, setNewUser] = useState<{
+    firstName: string;
+    lastName: string;
+    email: string;
+    password: string;
+    phone: {
+      prefix: string;
+      number: string;
+    };
+    address: {
+      place: string;
+      city: string;
+      country: string;
+      zip: string;
+    };
+    role: 'Client' | 'ProductOwner' | 'Developer';
+  }>({
+    firstName: '',
+    lastName: '',
+    email: '',
+    password: '',
+    phone: {
+      prefix: '',
+      number: '',
+    },
+    address: {
+      place: '',
+      city: '',
+      country: '',
+      zip: '',
+    },
+    role: newUserRole,
+  });
+
+  const [selectedSection, setSelectedSection] = useState<
+    'general' | 'security'
+  >('general');
+  const [error, setError] = useState<string>('');
+
+  const [createUser, { loading: createUserLoading }] = useMutation<
+    CreateUserMutation,
+    CreateUserMutationVariables
+  >(CREATE_USER, {
+    onCompleted() {
+      const location =
+        newUserRole === 'Client'
+          ? '/clients'
+          : newUserRole === 'ProductOwner'
+          ? '/product-owners'
+          : '/developers';
+      history.push(location);
+    },
+    onError({ graphQLErrors }) {
+      setError(graphQLErrors[0]?.extensions?.info);
+      setTimeout(() => setError(''), 3000);
+    },
+    refetchQueries: [{ query: GET_ALL_USERS }],
+  });
+
+  const generalForm = useFormik({
+    initialValues: {
+      firstName: '',
+      lastName: '',
+      email: '',
+      prefix: '',
+      number: '',
+      place: '',
+      city: '',
+      zip: '',
+      country: '',
+    },
+    validationSchema: Yup.object().shape({
+      firstName: Yup.string().required('First Name is required'),
+      lastName: Yup.string().required('Last Name is required'),
+      email: Yup.string()
+        .required('Email is required')
+        .email('Email is invalid'),
+      prefix: Yup.string().required('Prefix is required'),
+      // prettier-ignore
+      number: Yup.number().typeError('Phone must be a number').required('Phone is required'),
+      place: Yup.string().required('Address is required'),
+      city: Yup.string().required('City is required'),
+      country: Yup.string().required('Country is required'),
+      // prettier-ignore
+      zip: Yup.number().typeError('Zip must be a number').required('Zip is required'),
+    }),
+    onSubmit: ({
+      firstName,
+      lastName,
+      email,
+      prefix,
+      number,
+      place,
+      city,
+      country,
+      zip,
+    }) => {
+      setNewUser({
+        ...newUser,
+        firstName,
+        lastName,
+        email,
+        phone: { prefix, number },
+        address: { place, city, country, zip },
+      });
+      setSelectedSection('security');
+    },
+    enableReinitialize: true,
+  });
+
+  const { data: countryCodes, loading: countryCodesLoading } = useQuery<
+    GetCountryCodesQuery,
+    GetCountryCodesQueryVariables
+  >(GET_COUNTRY_CODES, {
+    onCompleted({ getCountryCode }) {
+      generalForm.setFieldValue('prefix', getCountryCode[0].prefix);
+      generalForm.setFieldValue('country', getCountryCode[0].country);
+    },
+  });
+
+  const securityForm = useFormik({
+    initialValues: {
+      password: '',
+      confirmPassword: '',
+    },
+    validationSchema: Yup.object().shape({
+      password: Yup.string()
+        .required('Password is required')
+        .min(6, 'Password is 6 characters minimum'),
+      confirmPassword: Yup.string()
+        .required('Confirm password is required')
+        .oneOf(
+          [Yup.ref('password')],
+          "Confirm new password doesn't match with new password"
+        ),
+    }),
+    onSubmit: ({ password }) => {
+      setNewUser({ ...newUser, password });
+      createUser({ variables: { ...newUser } });
+    },
+  });
+
+  return role === 'admin' ? (
+    <Wrapper>
+      <Box>
+        <Button
+          text='Back'
+          color={role || 'client'}
+          size='small'
+          onClick={() => history.goBack()}
+          iconLeft={<ArrowLeft />}
+        />
+        <Text variant='headline' weight='bold'>
+          Create{' '}
+          {newUserRole === 'ProductOwner' ? 'Product Owner' : newUserRole}
+        </Text>
+      </Box>
+      <Box
+        display='grid'
+        gridTemplateColumns='0.5fr 2fr'
+        columnGap='25px'
+        marginTop='1rem'
+      >
+        <Box display='grid' rowGap='0.5rem' gridTemplateRows='50px'>
+          <SectionSelector
+            icon={<Profile />}
+            color={role || 'client'}
+            text='General'
+            selected={selectedSection === 'general'}
+          />
+          <SectionSelector
+            icon={<Security />}
+            color={role || 'client'}
+            text='Security'
+            selected={selectedSection === 'security'}
+          />
+        </Box>
+        <Box
+          background='white'
+          boxShadow='1px 1px 10px 0px rgba(50, 59, 105, 0.25)'
+          borderRadius='10px'
+          width='100%'
+          padding='30px'
+        >
+          <Box
+            display='grid'
+            gridTemplateColumns='auto 1fr'
+            columnGap='1rem'
+            alignItems='center'
+            marginBottom='50px'
+          >
+            <Text variant='subheader' weight='bold'>
+              {selectedSection === 'general' ? 'General' : 'Security'}
+            </Text>
+            {error && <Alert color='error' text={error} />}
+          </Box>
+          {selectedSection === 'general' && (
+            <>
+              {!countryCodesLoading ? (
+                <form onSubmit={generalForm.handleSubmit}>
+                  <Box
+                    display='grid'
+                    gridTemplateColumns='auto'
+                    rowGap='0.5rem'
+                    position='relative'
+                  >
+                    <Input
+                      name='firstName'
+                      label='First Name'
+                      color={role || 'client'}
+                      value={generalForm.values.firstName}
+                      onChange={generalForm.handleChange}
+                      onBlur={generalForm.handleBlur}
+                      error={
+                        generalForm.touched.firstName &&
+                        !!generalForm.errors.firstName
+                      }
+                      errorMessage={generalForm.errors.firstName}
+                    />
+                    <Input
+                      name='lastName'
+                      label='Last Name'
+                      color={role || 'client'}
+                      value={generalForm.values.lastName}
+                      onChange={generalForm.handleChange}
+                      onBlur={generalForm.handleBlur}
+                      error={
+                        generalForm.touched.lastName &&
+                        !!generalForm.errors.lastName
+                      }
+                      errorMessage={generalForm.errors.lastName}
+                    />
+                    <Input
+                      name='email'
+                      label='Email'
+                      color={role || 'client'}
+                      value={generalForm.values.email}
+                      onChange={generalForm.handleChange}
+                      onBlur={generalForm.handleBlur}
+                      error={
+                        generalForm.touched.email && !!generalForm.errors.email
+                      }
+                      errorMessage={generalForm.errors.email}
+                    />
+                    <Box
+                      display='grid'
+                      gridTemplateColumns='1fr 1.5fr'
+                      columnGap='10px'
+                    >
+                      <Select
+                        name='prefix'
+                        label='Country Code'
+                        color={role || 'client'}
+                        options={
+                          countryCodes?.getCountryCode
+                            ? countryCodes.getCountryCode.map(
+                                ({ prefix, country }) => ({
+                                  value: prefix,
+                                  label: `+${prefix} (${country})`,
+                                })
+                              )
+                            : [{ value: '216', label: '+216' }]
+                        }
+                        onChange={generalForm.handleChange}
+                        onBlur={generalForm.handleBlur}
+                        value={generalForm.values.prefix}
+                        select={generalForm.values.prefix}
+                        error={
+                          generalForm.touched.prefix &&
+                          !!generalForm.errors.prefix
+                        }
+                        errorMessage={generalForm.errors.prefix}
+                      />
+                      <Input
+                        name='number'
+                        type='tel'
+                        label='Phone'
+                        color={role || 'client'}
+                        onChange={generalForm.handleChange}
+                        onBlur={generalForm.handleBlur}
+                        value={generalForm.values.number}
+                        error={
+                          generalForm.touched.number &&
+                          !!generalForm.errors.number
+                        }
+                        errorMessage={generalForm.errors.number}
+                      />
+                    </Box>
+                    <Input
+                      name='place'
+                      label='Address'
+                      color={role || 'client'}
+                      onChange={generalForm.handleChange}
+                      onBlur={generalForm.handleBlur}
+                      value={generalForm.values.place}
+                      error={
+                        generalForm.touched.place && !!generalForm.errors.place
+                      }
+                      errorMessage={generalForm.errors.place}
+                    />
+                    <Input
+                      name='city'
+                      label='City'
+                      color={role || 'client'}
+                      onChange={generalForm.handleChange}
+                      onBlur={generalForm.handleBlur}
+                      value={generalForm.values.city}
+                      error={
+                        generalForm.touched.city && !!generalForm.errors.city
+                      }
+                      errorMessage={generalForm.errors.city}
+                    />
+                    <Box
+                      display='grid'
+                      gridTemplateColumns='2fr 1fr'
+                      columnGap='10px'
+                    >
+                      <Select
+                        name='country'
+                        label='Country'
+                        color={role || 'client'}
+                        options={
+                          countryCodes?.getCountryCode
+                            ? countryCodes.getCountryCode.map(
+                                ({ country }) => ({
+                                  value: country,
+                                  label: country,
+                                })
+                              )
+                            : [{ value: 'Tunisia', label: 'Tunisia' }]
+                        }
+                        onChange={generalForm.handleChange}
+                        onBlur={generalForm.handleBlur}
+                        value={generalForm.values.country}
+                        select={generalForm.values.country}
+                        error={
+                          generalForm.touched.country &&
+                          !!generalForm.errors.country
+                        }
+                        errorMessage={generalForm.errors.country}
+                      />
+                      <Input
+                        name='zip'
+                        label='Zip Code'
+                        color={role || 'client'}
+                        onChange={generalForm.handleChange}
+                        onBlur={generalForm.handleBlur}
+                        value={generalForm.values.zip}
+                        error={
+                          generalForm.touched.zip && !!generalForm.errors.zip
+                        }
+                        errorMessage={generalForm.errors.zip}
+                      />
+                    </Box>
+                    <Box
+                      marginTop='0.5rem'
+                      display='grid'
+                      gridTemplateColumns='repeat(2, auto)'
+                      justifyContent='flex-end'
+                    >
+                      <Button
+                        variant='primary-action'
+                        color={role || 'client'}
+                        text='Next'
+                        type='submit'
+                      />
+                    </Box>
+                  </Box>
+                </form>
+              ) : (
+                <Box display='grid' alignItems='center' justifyContent='center'>
+                  <Spinner color={role || 'client'} />
+                </Box>
+              )}
+            </>
+          )}
+          {selectedSection === 'security' && (
+            <form onSubmit={securityForm.handleSubmit}>
+              <Box
+                display='grid'
+                gridTemplateColumns='auto'
+                rowGap='0.5rem'
+                position='relative'
+              >
+                <Input
+                  name='password'
+                  label='Password'
+                  color={role || 'client'}
+                  type='password'
+                  value={securityForm.values.password}
+                  onChange={securityForm.handleChange}
+                  onBlur={securityForm.handleBlur}
+                  error={
+                    securityForm.touched.password &&
+                    !!securityForm.errors.password
+                  }
+                  errorMessage={securityForm.errors.password}
+                />
+                <Input
+                  name='confirmPassword'
+                  label='Confirm Password'
+                  color={role || 'client'}
+                  type='password'
+                  value={securityForm.values.confirmPassword}
+                  onChange={securityForm.handleChange}
+                  onBlur={securityForm.handleBlur}
+                  error={
+                    securityForm.touched.confirmPassword &&
+                    !!securityForm.errors.confirmPassword
+                  }
+                  errorMessage={securityForm.errors.confirmPassword}
+                />
+                <Box
+                  marginTop='0.5rem'
+                  display='flex'
+                  justifyContent='flex-end'
+                >
+                  <Box marginRight='15px' display='flex' alignItems='center'>
+                    <Button
+                      color={role || 'client'}
+                      text='Previous'
+                      type='submit'
+                      onClick={() => setSelectedSection('general')}
+                    />
+                  </Box>
+                  <Button
+                    variant='primary-action'
+                    color={role || 'client'}
+                    text='Create'
+                    type='submit'
+                    loading={createUserLoading}
+                    disabled={createUserLoading}
+                  />
+                </Box>
+              </Box>
+            </form>
+          )}
+        </Box>
+      </Box>
+    </Wrapper>
+  ) : (
+    <Redirect to='/' />
+  );
+};
+
+export default CreateUser;
diff --git a/src/pages/CreateUser/styles.ts b/src/pages/CreateUser/styles.ts
new file mode 100644
index 0000000..d81e173
--- /dev/null
+++ b/src/pages/CreateUser/styles.ts
@@ -0,0 +1,9 @@
+import styled from 'styled-components';
+
+export const Wrapper = styled.div`
+  padding: 35px 45px 35px 120px;
+
+  div {
+    cursor: default;
+  }
+`;
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 8c30aef..a635473 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -5,6 +5,7 @@ import ForgotPassword from './Auth/ForgotPassword';
 import RecoverAccount from './Auth/RecoverAccount';
 import Project from './Project';
 import Users from './Users';
+import CreateUser from './CreateUser';
 import Settings from './Settings';
 import UserSettings from './UserSettings';
 
@@ -16,6 +17,7 @@ export {
   RecoverAccount,
   Project,
   Users,
+  CreateUser,
   Settings,
   UserSettings,
 };