Fix validation behavior and add country codes

src/pages/Auth/AdditionalInfo/index.tsx

@@ -2,21 +2,35 @@ import * as Yup from 'yup';
 import { useFormik } from 'formik';
 import { useState } from 'react';
 import { useHistory } from 'react-router-dom';
-import { useMutation, useReactiveVar } from '@apollo/client';
+import { useMutation, useQuery, useReactiveVar } from '@apollo/client';
-import { Box, Button, Input, Select, Text, Alert } from '../../../components';
+import {
+  Box,
+  Button,
+  Input,
+  Select,
+  Text,
+  Alert,
+  Spinner,
+} from '../../../components';
 import { theme } from '../../../themes';
 import { Wrapper } from './styles';
 import {
+  GetCountryCodesQuery,
+  GetCountryCodesQueryVariables,
   UpdateUserInfoMutation,
   UpdateUserInfoMutationVariables,
 } from '../../../graphql/types';
-import { UPDATE_USER_INFO } from '../../../graphql/auth.api';
+import { GET_COUNTRY_CODES, UPDATE_USER_INFO } from '../../../graphql/auth.api';
 import { userVar } from '../../../graphql/state';
 
 const AdditionalInfo = () => {
   const history = useHistory();
   const [error, setError] = useState<string>('');
   const currentUser = useReactiveVar(userVar);
+  const { data: countryCodes, loading: countryCodesLoading } = useQuery<
+    GetCountryCodesQuery,
+    GetCountryCodesQueryVariables
+  >(GET_COUNTRY_CODES);
 
   const [updateUserInfo, { loading }] = useMutation<
     UpdateUserInfoMutation,
@@ -47,33 +61,38 @@ const AdditionalInfo = () => {
       firstName: Yup.string().required('First Name is required'),
       lastName: Yup.string().required('Last Name is required'),
       prefix: Yup.string().required('Prefix is required'),
-      number: Yup.number().required('Number is required'),
+      number: Yup.number()
+        // prettier-ignore
+        .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'),
+      zip: Yup.number()
+        // prettier-ignore
+        .typeError('Zip must be a number')
+        .required('Zip is required'),
     }),
-    onSubmit: (
+    onSubmit: ({
-      { firstName, lastName, prefix, number, place, city, country, zip },
+      firstName,
-      { resetForm }
+      lastName,
-    ) => {
+      prefix,
-      try {
+      number,
-        updateUserInfo({
+      place,
-          variables: {
+      city,
-            id: currentUser?.id!,
+      country,
-            email: currentUser?.email!,
+      zip,
-            firstName,
+    }) =>
-            lastName,
+      updateUserInfo({
-            phone: { prefix, number },
+        variables: {
-            address: { place, city, country, zip },
+          id: currentUser?.id!,
-          },
+          email: currentUser?.email!,
-        });
+          firstName,
-      } catch (err) {
+          lastName,
-        setError(err.message);
+          phone: { prefix, number },
-        setTimeout(() => setError(''), 3000);
+          address: { place, city, country, zip },
-      } finally {
+        },
-        resetForm();
+      }),
-      }
-    },
   });
 
   return (
@@ -94,104 +113,160 @@ const AdditionalInfo = () => {
               Tell us more about yourself
             </Text>
           </Box>
-          <form onSubmit={form.handleSubmit}>
+          {!countryCodesLoading ? (
-            <Box
+            <form onSubmit={form.handleSubmit}>
-              display='grid'
-              gridTemplateColumns='auto'
-              rowGap='0.5rem'
-              position='relative'
-            >
-              <Input
-                name='firstName'
-                label='First Name'
-                value={form.values.firstName}
-                onChange={form.handleChange}
-                onBlur={form.handleBlur}
-                error={!!form.errors.firstName}
-                errorMessage={form.errors.firstName}
-              />
-              <Input
-                name='lastName'
-                label='Last Name'
-                value={form.values.lastName}
-                onChange={form.handleChange}
-                onBlur={form.handleBlur}
-                error={!!form.errors.lastName}
-                errorMessage={form.errors.lastName}
-              />
               <Box
                 display='grid'
-                gridTemplateColumns='1fr 1.5fr'
+                gridTemplateColumns='auto'
-                columnGap='10px'
+                rowGap='0.5rem'
-              >
+                position='relative'
-                <Select
-                  name='prefix'
-                  label='Country Code'
-                  options={[
-                    { value: '+216', label: '+216' },
-                    { value: '+213', label: '+213' },
-                  ]}
-                  onChange={form.handleChange}
-                  onBlur={form.handleBlur}
-                  value={form.values.prefix}
-                />
-                <Input
-                  name='number'
-                  type='tel'
-                  label='Phone'
-                  onChange={form.handleChange}
-                  onBlur={form.handleBlur}
-                  value={form.values.number}
-                />
-              </Box>
-              <Input
-                name='place'
-                label='Address'
-                onChange={form.handleChange}
-                onBlur={form.handleBlur}
-                value={form.values.place}
-              />
-              <Input
-                name='city'
-                label='City'
-                onChange={form.handleChange}
-                onBlur={form.handleBlur}
-                value={form.values.city}
-              />
-              <Box
-                display='grid'
-                gridTemplateColumns='2fr 1fr'
-                columnGap='10px'
               >
                 <Input
-                  name='country'
+                  name='firstName'
-                  label='Country'
+                  label='First Name'
+                  value={form.values.firstName}
                   onChange={form.handleChange}
                   onBlur={form.handleBlur}
-                  value={form.values.country}
+                  error={form.touched.firstName && !!form.errors.firstName}
+                  errorMessage={form.errors.firstName}
                 />
                 <Input
-                  name='zip'
+                  name='lastName'
-                  label='Zip Code'
+                  label='Last Name'
+                  value={form.values.lastName}
                   onChange={form.handleChange}
                   onBlur={form.handleBlur}
-                  value={form.values.zip}
+                  error={form.touched.lastName && !!form.errors.lastName}
+                  errorMessage={form.errors.lastName}
                 />
-              </Box>
+                <Box
-              <Box marginTop='0.5rem'>
+                  display='grid'
-                <Button
+                  gridTemplateColumns='1fr 1.5fr'
-                  fullWidth
+                  columnGap='10px'
-                  variant='primary-action'
+                >
-                  color='client'
+                  <Select
-                  text='Done'
+                    name='prefix'
-                  type='submit'
+                    label='Country Code'
-                  loading={loading}
+                    options={
-                  disabled={loading}
+                      countryCodes?.getCountryCode
+                        ? [
+                            {
+                              value: '',
+                              label: 'Choose',
+                            },
+                            ...countryCodes.getCountryCode.map(
+                              ({ prefix, country }) => ({
+                                value: prefix,
+                                label: `+${prefix} (${country})`,
+                              })
+                            ),
+                          ]
+                        : [
+                            {
+                              value: '',
+                              label: 'Choose',
+                            },
+                            { value: '216', label: '+216' },
+                          ]
+                    }
+                    onChange={form.handleChange}
+                    onBlur={form.handleBlur}
+                    value={form.values.prefix}
+                    error={form.touched.prefix && !!form.errors.prefix}
+                    errorMessage={form.errors.prefix}
+                  />
+                  <Input
+                    name='number'
+                    type='tel'
+                    label='Phone'
+                    onChange={form.handleChange}
+                    onBlur={form.handleBlur}
+                    value={form.values.number}
+                    error={form.touched.number && !!form.errors.number}
+                    errorMessage={form.errors.number}
+                  />
+                </Box>
+                <Input
+                  name='place'
+                  label='Address'
+                  onChange={form.handleChange}
+                  onBlur={form.handleBlur}
+                  value={form.values.place}
+                  error={form.touched.place && !!form.errors.place}
+                  errorMessage={form.errors.place}
                 />
+                <Input
+                  name='city'
+                  label='City'
+                  onChange={form.handleChange}
+                  onBlur={form.handleBlur}
+                  value={form.values.city}
+                  error={form.touched.city && !!form.errors.city}
+                  errorMessage={form.errors.city}
+                />
+                <Box
+                  display='grid'
+                  gridTemplateColumns='2fr 1fr'
+                  columnGap='10px'
+                >
+                  <Select
+                    name='country'
+                    label='Country'
+                    options={
+                      countryCodes?.getCountryCode
+                        ? [
+                            {
+                              value: '',
+                              label: 'Choose',
+                            },
+                            ...countryCodes.getCountryCode.map(
+                              ({ country }) => ({
+                                value: country,
+                                label: country,
+                              })
+                            ),
+                          ]
+                        : [
+                            {
+                              value: '',
+                              label: 'Choose',
+                            },
+                            { value: 'Tunisia', label: 'Tunisia' },
+                          ]
+                    }
+                    onChange={form.handleChange}
+                    onBlur={form.handleBlur}
+                    value={form.values.country}
+                    error={form.touched.country && !!form.errors.country}
+                    errorMessage={form.errors.country}
+                  />
+                  <Input
+                    name='zip'
+                    label='Zip Code'
+                    onChange={form.handleChange}
+                    onBlur={form.handleBlur}
+                    value={form.values.zip}
+                    error={form.touched.zip && !!form.errors.zip}
+                    errorMessage={form.errors.zip}
+                  />
+                </Box>
+                <Box marginTop='0.5rem'>
+                  <Button
+                    fullWidth
+                    variant='primary-action'
+                    color='client'
+                    text='Done'
+                    type='submit'
+                    loading={loading}
+                    disabled={loading}
+                  />
+                </Box>
+                {error && <Alert color='error' text={error} />}
               </Box>
-              {error && <Alert color='error' text={error} />}
+            </form>
-            </Box>
+          ) : (
-          </form>
+            <Spinner fullScreen />
+          )}
         </Box>
       </Box>
     </Wrapper>

src/pages/Settings/index.tsx

@@ -1,9 +1,9 @@
 import * as Yup from 'yup';
 import { useFormik } from 'formik';
 import { useHistory } from 'react-router';
-import { useMutation, useReactiveVar } from '@apollo/client';
+import { useMutation, useQuery, useReactiveVar } from '@apollo/client';
 import { useState } from 'react';
-import { roleVar, userVar } from '../../graphql/state';
+import { roleVar, tokenVar, userVar } from '../../graphql/state';
 import {
   Box,
   Button,
@@ -12,6 +12,8 @@ import {
   Input,
   Select,
   Alert,
+  Spinner,
+  Modal,
 } from '../../components';
 import { Wrapper } from './styles';
 import { ArrowLeft, Profile, Security } from '../../assets';
@@ -20,19 +22,33 @@ import {
   UpdateUserPasswordMutation,
   UpdateUserInfoMutationVariables,
   UpdateUserPasswordMutationVariables,
+  GetCountryCodesQuery,
+  GetCountryCodesQueryVariables,
+  DeleteUserMutation,
+  DeleteUserMutationVariables,
 } from '../../graphql/types';
-import { UPDATE_USER_INFO, UPDATE_USER_PASSWORD } from '../../graphql/auth.api';
+import {
+  DELETE_USER,
+  GET_COUNTRY_CODES,
+  UPDATE_USER_INFO,
+  UPDATE_USER_PASSWORD,
+} from '../../graphql/auth.api';
 
 const Settings = () => {
   const history = useHistory();
   const role = useReactiveVar(roleVar);
   const currentUser = useReactiveVar(userVar);
+  const { data: countryCodes, loading: countryCodesLoading } = useQuery<
+    GetCountryCodesQuery,
+    GetCountryCodesQueryVariables
+  >(GET_COUNTRY_CODES);
 
   const [selectedSection, setSelectedSection] = useState<
     'general' | 'security'
   >('general');
   const [error, setError] = useState<string>('');
   const [success, setSuccess] = useState<boolean>(false);
+  const [deleteAccountModal, setDeleteAccountModal] = useState<boolean>(false);
 
   const [updateUserInfo, { loading: generalLoading }] = useMutation<
     UpdateUserInfoMutation,
@@ -72,10 +88,13 @@ const Settings = () => {
       firstName: Yup.string().required('First Name is required'),
       lastName: Yup.string().required('Last Name is required'),
       prefix: Yup.string().required('Prefix is required'),
-      number: Yup.number().required('Number 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,
@@ -122,19 +141,22 @@ const Settings = () => {
     },
     validationSchema: Yup.object().shape({
       oldPassword: Yup.string()
-        .required('Password is required')
+        .required('Old password is required')
-        .min(6, 'Password is 6 characters minimum'),
+        .min(6, 'Old password is 6 characters minimum'),
       newPassword: Yup.string()
+        .required('New password is required')
         .notOneOf(
           [Yup.ref('oldPassword')],
           'New password should not be old password'
         )
         .required('New password is required')
         .min(6, 'New password is 6 characters minimum'),
-      confirmNewPassword: Yup.string().oneOf(
+      confirmNewPassword: Yup.string()
-        [Yup.ref('newPassword')],
+        .required('Confirm new password is required')
-        "Confirm new password doesn't match with new password"
+        .oneOf(
-      ),
+          [Yup.ref('newPassword')],
+          "Confirm new password doesn't match with new password"
+        ),
     }),
     onSubmit: ({ oldPassword, newPassword }) =>
       updateUserPassword({
@@ -145,6 +167,43 @@ const Settings = () => {
       }),
   });
 
+  const [deleteUser] = useMutation<
+    DeleteUserMutation,
+    DeleteUserMutationVariables
+  >(DELETE_USER, {
+    onCompleted() {
+      localStorage.removeItem('token');
+      tokenVar(undefined);
+      userVar(undefined);
+      roleVar(undefined);
+      setDeleteAccountModal(false);
+      history.push('/signup');
+    },
+    onError({ graphQLErrors }) {
+      setDeleteAccountModal(false);
+      setError(graphQLErrors[0]?.extensions?.info);
+      setTimeout(() => setError(''), 3000);
+    },
+  });
+
+  const deleteAccountForm = useFormik({
+    initialValues: {
+      password: '',
+    },
+    validationSchema: Yup.object().shape({
+      password: Yup.string()
+        .required('Password is required')
+        .min(6, 'Password is 6 characters minimum'),
+    }),
+    onSubmit: ({ password }, { resetForm }) => {
+      try {
+        deleteUser({ variables: { id: currentUser?.id!, password } });
+      } finally {
+        resetForm();
+      }
+    },
+  });
+
   return (
     <Wrapper>
       <Box>
@@ -204,163 +263,278 @@ const Settings = () => {
             )}
           </Box>
           {selectedSection === 'general' && (
-            <form onSubmit={generalForm.handleSubmit}>
+            <>
-              <Box
+              {!countryCodesLoading ? (
-                display='grid'
+                <form onSubmit={generalForm.handleSubmit}>
-                gridTemplateColumns='auto'
+                  <Box
-                rowGap='0.5rem'
+                    display='grid'
-                position='relative'
+                    gridTemplateColumns='auto'
-              >
+                    rowGap='0.5rem'
-                <Input
+                    position='relative'
-                  name='firstName'
+                  >
-                  label='First Name'
+                    <Input
-                  value={generalForm.values.firstName}
+                      name='firstName'
-                  onChange={generalForm.handleChange}
+                      label='First Name'
-                  onBlur={generalForm.handleBlur}
+                      color={role || 'client'}
-                  error={!!generalForm.errors.firstName}
+                      value={generalForm.values.firstName}
-                  errorMessage={generalForm.errors.firstName}
+                      onChange={generalForm.handleChange}
-                />
+                      onBlur={generalForm.handleBlur}
-                <Input
+                      error={
-                  name='lastName'
+                        generalForm.touched.firstName &&
-                  label='Last Name'
+                        !!generalForm.errors.firstName
-                  value={generalForm.values.lastName}
+                      }
-                  onChange={generalForm.handleChange}
+                      errorMessage={generalForm.errors.firstName}
-                  onBlur={generalForm.handleBlur}
+                    />
-                  error={!!generalForm.errors.lastName}
+                    <Input
-                  errorMessage={generalForm.errors.lastName}
+                      name='lastName'
-                />
+                      label='Last Name'
-                <Box
+                      color={role || 'client'}
-                  display='grid'
+                      value={generalForm.values.lastName}
-                  gridTemplateColumns='1fr 1.5fr'
+                      onChange={generalForm.handleChange}
-                  columnGap='10px'
+                      onBlur={generalForm.handleBlur}
-                >
+                      error={
-                  <Select
+                        generalForm.touched.lastName &&
-                    name='prefix'
+                        !!generalForm.errors.lastName
-                    label='Country Code'
+                      }
-                    options={[
+                      errorMessage={generalForm.errors.lastName}
-                      { value: '+216', label: '+216' },
+                    />
-                      { value: '+213', label: '+213' },
+                    <Box
-                    ]}
+                      display='grid'
-                    onChange={generalForm.handleChange}
+                      gridTemplateColumns='1fr 1.5fr'
-                    onBlur={generalForm.handleBlur}
+                      columnGap='10px'
-                    value={generalForm.values.prefix}
+                    >
-                  />
+                      <Select
-                  <Input
+                        name='prefix'
-                    name='number'
+                        label='Country Code'
-                    type='tel'
+                        color={role || 'client'}
-                    label='Phone'
+                        options={
-                    onChange={generalForm.handleChange}
+                          countryCodes?.getCountryCode
-                    onBlur={generalForm.handleBlur}
+                            ? countryCodes.getCountryCode.map(
-                    value={generalForm.values.number}
+                                ({ 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='Save'
+                        type='submit'
+                        loading={generalLoading}
+                        disabled={generalLoading}
+                      />
+                    </Box>
+                  </Box>
+                </form>
+              ) : (
+                <Box display='grid' alignItems='center' justifyContent='center'>
+                  <Spinner color={role || 'client'} />
                 </Box>
-                <Input
+              )}
-                  name='place'
+            </>
-                  label='Address'
-                  onChange={generalForm.handleChange}
-                  onBlur={generalForm.handleBlur}
-                  value={generalForm.values.place}
-                />
-                <Input
-                  name='city'
-                  label='City'
-                  onChange={generalForm.handleChange}
-                  onBlur={generalForm.handleBlur}
-                  value={generalForm.values.city}
-                />
-                <Box
-                  display='grid'
-                  gridTemplateColumns='2fr 1fr'
-                  columnGap='10px'
-                >
-                  <Input
-                    name='country'
-                    label='Country'
-                    onChange={generalForm.handleChange}
-                    onBlur={generalForm.handleBlur}
-                    value={generalForm.values.country}
-                  />
-                  <Input
-                    name='zip'
-                    label='Zip Code'
-                    onChange={generalForm.handleChange}
-                    onBlur={generalForm.handleBlur}
-                    value={generalForm.values.zip}
-                  />
-                </Box>
-                <Box
-                  marginTop='0.5rem'
-                  display='grid'
-                  gridTemplateColumns='repeat(2, auto)'
-                  justifyContent='flex-end'
-                >
-                  <Button
-                    variant='primary-action'
-                    color='client'
-                    text='Save'
-                    type='submit'
-                    loading={generalLoading}
-                    disabled={generalLoading}
-                  />
-                </Box>
-              </Box>
-            </form>
           )}
           {selectedSection === 'security' && (
-            <form onSubmit={securityForm.handleSubmit}>
+            <>
-              <Box
+              {deleteAccountModal && (
-                display='grid'
+                <Modal
-                gridTemplateColumns='auto'
+                  color={role || 'client'}
-                rowGap='0.5rem'
+                  title='Delete Account'
-                position='relative'
+                  description='Enter password to confirm account deletion.
-              >
+                If you delete your account you cannot recover any of your projects.'
-                <Input
+                  onClose={() => setDeleteAccountModal(false)}
-                  name='oldPassword'
+                  onConfirm={deleteAccountForm.handleSubmit}
-                  label='Old Password'
-                  type='password'
-                  value={securityForm.values.oldPassword}
-                  onChange={securityForm.handleChange}
-                  onBlur={securityForm.handleBlur}
-                  error={!!securityForm.errors.oldPassword}
-                  errorMessage={securityForm.errors.oldPassword}
-                />
-                <Input
-                  name='newPassword'
-                  label='New Password'
-                  type='password'
-                  value={securityForm.values.newPassword}
-                  onChange={securityForm.handleChange}
-                  onBlur={securityForm.handleBlur}
-                  error={!!securityForm.errors.newPassword}
-                  errorMessage={securityForm.errors.newPassword}
-                />
-                <Input
-                  name='confirmNewPassword'
-                  label='Confirm New Password'
-                  type='password'
-                  value={securityForm.values.confirmNewPassword}
-                  onChange={securityForm.handleChange}
-                  onBlur={securityForm.handleBlur}
-                  error={!!securityForm.errors.confirmNewPassword}
-                  errorMessage={securityForm.errors.confirmNewPassword}
-                />
-                <Box
-                  marginTop='0.5rem'
-                  display='flex'
-                  justifyContent='space-between'
                 >
-                  <Button variant='text' color='error' text='Delete Account' />
+                  <Input
-                  <Button
+                    type='password'
-                    variant='primary-action'
+                    placeholder='Password'
-                    color='client'
+                    name='password'
-                    text='Save'
+                    value={deleteAccountForm.values.password}
-                    type='submit'
+                    onChange={deleteAccountForm.handleChange}
-                    loading={securityLoading}
+                    onBlur={deleteAccountForm.handleBlur}
-                    disabled={securityLoading}
+                    color={role || 'client'}
+                    error={
+                      deleteAccountForm.touched.password &&
+                      !!deleteAccountForm.errors.password
+                    }
+                    errorMessage={deleteAccountForm.errors.password}
                   />
+                </Modal>
+              )}
+              <form onSubmit={securityForm.handleSubmit}>
+                <Box
+                  display='grid'
+                  gridTemplateColumns='auto'
+                  rowGap='0.5rem'
+                  position='relative'
+                >
+                  <Input
+                    name='oldPassword'
+                    label='Old Password'
+                    color={role || 'client'}
+                    type='password'
+                    value={securityForm.values.oldPassword}
+                    onChange={securityForm.handleChange}
+                    onBlur={securityForm.handleBlur}
+                    error={
+                      securityForm.touched.oldPassword &&
+                      !!securityForm.errors.oldPassword
+                    }
+                    errorMessage={securityForm.errors.oldPassword}
+                  />
+                  <Input
+                    name='newPassword'
+                    label='New Password'
+                    color={role || 'client'}
+                    type='password'
+                    value={securityForm.values.newPassword}
+                    onChange={securityForm.handleChange}
+                    onBlur={securityForm.handleBlur}
+                    error={
+                      securityForm.touched.newPassword &&
+                      !!securityForm.errors.newPassword
+                    }
+                    errorMessage={securityForm.errors.newPassword}
+                  />
+                  <Input
+                    name='confirmNewPassword'
+                    label='Confirm New Password'
+                    color={role || 'client'}
+                    type='password'
+                    value={securityForm.values.confirmNewPassword}
+                    onChange={securityForm.handleChange}
+                    onBlur={securityForm.handleBlur}
+                    error={
+                      securityForm.touched.confirmNewPassword &&
+                      !!securityForm.errors.confirmNewPassword
+                    }
+                    errorMessage={securityForm.errors.confirmNewPassword}
+                  />
+                  <Box
+                    marginTop='0.5rem'
+                    display='flex'
+                    justifyContent={
+                      role === 'client' ? 'space-between' : 'flex-end'
+                    }
+                  >
+                    {role === 'client' && (
+                      <Button
+                        variant='text'
+                        color='error'
+                        text='Delete Account'
+                        onClick={() => setDeleteAccountModal(true)}
+                      />
+                    )}
+                    <Button
+                      variant='primary-action'
+                      color={role || 'client'}
+                      text='Save'
+                      type='submit'
+                      loading={securityLoading}
+                      disabled={securityLoading}
+                    />
+                  </Box>
                 </Box>
-              </Box>
+              </form>
-            </form>
+            </>
           )}
         </Box>
       </Box>