User profile API integration (#66)

* fix: resolve type error(s) causing build failure

* refactor: move types and interfaces to a different folder

* refactor: move types and interfaces to a different folder

* feat: add service to complete user profile

* feat: add a global state `isCertifiedUser`

* feat: add not clickable prop to custom tabs component

* feat: add keys for project creator and drone operator in constants

* feat: add country name with country codes in constants

* feat: add util removeKeysFromObject

* refactor: change the color of error and input components

* fix: change token stored in local storage due to change in api

* refactor: move signedInAs flag from global state to localstorage

* fix: change the services method to incorporate `Access-Token` in header

* feat: complete api integration of user profile completion part

* feat: add proper texts to required fields

* fix: change certain payload type from string to number

* feat: add neccessary comments

* fix: change payload to handle changes in backend

src/frontend/src/components/GoogleAuth/index.tsx

@@ -25,24 +25,32 @@ function GoogleAuth() {
         const userDetailsUrl = `${BASE_URL}/users/my-info/`;
 
         const completeLogin = async () => {
+          // fetch callback api
           const response = await fetch(callbackUrl, { credentials: 'include' });
           const token = await response.json();
-          localStorage.setItem('token', token);
+          localStorage.setItem('token', token.access_token);
+
+          // fetch user details
           const response2 = await fetch(userDetailsUrl, {
             credentials: 'include',
             headers: { 'access-token': token.access_token },
           });
           const userDetails = await response2.json();
-          localStorage.setItem('userprofile', userDetails);
+
+          // stringify the response and set it to local storage
+          const userDetailsString = JSON.stringify(userDetails);
+          localStorage.setItem('userprofile', userDetailsString);
           setUserProfileDetails(userDetails);
+
+          // navigate according the user
+          if (userDetails?.has_user_profile) {
+            navigate('/projects');
+          } else {
+            navigate('/user-profile');
+          }
         };
         await completeLogin();
         toast.success('Logged In Successfully');
-        if (userProfileDetails?.has_user_profile) {
-          navigate('/projects');
-        } else {
-          navigate('/user-profile');
-        }
       }
       setIsReadyToRedirect(true);
     };

src/frontend/src/components/LandingPage/SignInOverlay/index.tsx

@@ -46,7 +46,7 @@ export default function SignInOverlay() {
             className="!naxatw-bg-landing-red"
             rightIcon="east"
             onClick={() => {
-              dispatch(setCommonState({ signInAs: 'Project Creator' }));
+              localStorage.setItem('signedInAs', 'Project Creator');
               if (isAuthenticated()) {
                 navigate('/projects');
               } else {
@@ -67,7 +67,7 @@ export default function SignInOverlay() {
             className="!naxatw-bg-landing-red"
             rightIcon="east"
             onClick={() => {
-              dispatch(setCommonState({ signInAs: 'Drone Operator' }));
+              localStorage.setItem('signedInAs', 'Drone Operator');
               if (isAuthenticated()) {
                 navigate('/projects');
               } else {

src/frontend/src/components/UserProfile/FormContents/BasicDetails/index.tsx

@@ -1,18 +1,18 @@
 import { Flex, FlexColumn } from '@Components/common/Layouts';
-import { FormControl, Input, Label } from '@Components/common/FormUI';
+import { FormControl, Select, Input, Label } from '@Components/common/FormUI';
 import ErrorMessage from '@Components/common/ErrorMessage';
+import { countriesWithPhoneCodes } from '@Constants/countryCode';
+import { Controller } from 'react-hook-form';
 
 export default function BasicDetails({ formProps }: { formProps: any }) {
-  const { register } = formProps;
+  const { register, formState, control } = formProps;
 
-  // const userProfile: UserProfileDetailsType =
-  //   localStorage.getItem('userprofile');
   return (
-    <section className="naxatw-px-14 naxatw-py-10">
+    <section className="naxatw-px-14">
       <Flex>
-        <p className="naxatw-text-3xl">Basic Details</p>
+        <p className="naxatw-text-lg naxatw-font-bold">Basic Details</p>
       </Flex>
-      <FlexColumn gap={5}>
+      <FlexColumn gap={5} className="naxatw-mt-5">
         <Flex className="naxatw-h-14 naxatw-w-14 naxatw-items-center naxatw-justify-center naxatw-rounded-full naxatw-bg-grey-600">
           <h4>SK</h4>
         </Flex>
@@ -22,45 +22,43 @@ export default function BasicDetails({ formProps }: { formProps: any }) {
             placeholder="Enter Name"
             className="naxatw-mt-1"
             {...register('name', {
-              required: 'Required',
+              required: 'Name is Required',
             })}
           />
-          <ErrorMessage message={formProps.formState.errors?.name?.message} />
+          <ErrorMessage message={formState.errors?.name?.message} />
         </FormControl>
         <FormControl>
           <Label required>Country</Label>
-          <Input
-            placeholder="Enter Country"
-            className="naxatw-mt-1"
-            {...register('country', {
-              required: 'Required',
-            })}
-          />
-          <ErrorMessage
-            message={formProps.formState.errors?.country?.message}
+          <Controller
+            control={control}
+            name="country"
+            defaultValue=""
+            rules={{
+              required: 'Country is Required',
+            }}
+            render={({ field: { value, onChange } }) => (
+              <Select
+                placeholder="Choose a Country"
+                options={countriesWithPhoneCodes}
+                labelKey="label"
+                valueKey="label"
+                selectedOption={value}
+                onChange={onChange}
+              />
+            )}
           />
+          <ErrorMessage message={formState.errors?.country?.message} />
         </FormControl>
-        {/* <FormControl>
-          <Label required>Country</Label>
-          <Select
-            options={[]}
-            placeholder="Choose Country"
-            className="naxatw-mt-1"
-            {...register('country', {
-              required: 'Required',
-            })}
-          />
-        </FormControl> */}
         <FormControl>
           <Label required>City</Label>
           <Input
             placeholder="Enter City"
             className="naxatw-mt-1"
             {...register('city', {
-              required: 'Required',
+              required: 'City is Required',
             })}
           />
-          <ErrorMessage message={formProps.formState.errors?.city?.message} />
+          <ErrorMessage message={formState.errors?.city?.message} />
         </FormControl>
         <FormControl>
           <Label required>Phone number</Label>
@@ -69,20 +67,19 @@ export default function BasicDetails({ formProps }: { formProps: any }) {
               placeholder="+977"
               className="naxatw-mt-1 naxatw-w-14"
               {...register('country_code', {
-                required: 'Required',
+                required: 'Phone Number is Required',
               })}
             />
             <Input
               placeholder="Enter Phone number"
               className="naxatw-mt-1 naxatw-w-full"
-              {...register('phone', {
-                required: 'Required',
+              type="number"
+              {...register('phone_number', {
+                required: 'Phone Number is Required',
               })}
             />
           </div>
-          <ErrorMessage
-            message={formProps.formState.errors?.country?.message}
-          />
+          <ErrorMessage message={formState.errors?.phone_number?.message} />
         </FormControl>
       </FlexColumn>
     </section>

src/frontend/src/components/UserProfile/FormContents/OrganizationDetails/index.tsx

@@ -1,20 +1,23 @@
 import ErrorMessage from '@Components/common/ErrorMessage';
 import { FormControl, Input, Label } from '@Components/common/FormUI';
-import { FlexColumn } from '@Components/common/Layouts';
+import { Flex, FlexColumn } from '@Components/common/Layouts';
 
 export default function OrganizationDetails({ formProps }: { formProps: any }) {
   const { register } = formProps;
 
   return (
-    <section className="naxatw-px-14 naxatw-py-10">
+    <section className="naxatw-px-14">
+      <Flex>
+        <p className="naxatw-text-lg naxatw-font-bold">Organization Details</p>
+      </Flex>
       <FlexColumn gap={5}>
         <FormControl>
           <Label required>Organization Name</Label>
           <Input
             placeholder="Enter Organization Name"
             className="naxatw-mt-1"
             {...register('organization_name', {
-              required: 'Required',
+              required: 'Organization name is Required',
             })}
           />
           <ErrorMessage
@@ -27,7 +30,7 @@ export default function OrganizationDetails({ formProps }: { formProps: any }) {
             placeholder="Enter Organization Address"
             className="naxatw-mt-1"
             {...register('organization_address', {
-              required: 'Required',
+              required: 'Organization Address is Required',
             })}
           />
           <ErrorMessage
@@ -40,7 +43,7 @@ export default function OrganizationDetails({ formProps }: { formProps: any }) {
             placeholder="Enter Job Title"
             className="naxatw-mt-1"
             {...register('job_title', {
-              required: 'Required',
+              required: 'Job Title is Required',
             })}
           />
           <ErrorMessage

src/frontend/src/components/UserProfile/FormContents/OtherDetails/index.tsx

@@ -0,0 +1,98 @@
+import { useTypedDispatch, useTypedSelector } from '@Store/hooks';
+import { FormControl, Input, Label } from '@Components/common/FormUI';
+import { Flex, FlexColumn } from '@Components/common/Layouts';
+import RadioButton from '@Components/common/RadioButton';
+import { droneOperatorOptions } from '@Constants/index';
+import FileUpload from '@Components/common/UploadArea';
+import ErrorMessage from '@Components/common/FormUI/ErrorMessage';
+import { setCommonState } from '@Store/actions/common';
+
+export default function OtherDetails({ formProps }: { formProps: any }) {
+  const dispatch = useTypedDispatch();
+  const isCertifiedDroneOperator = useTypedSelector(
+    state => state.common.isCertifiedDroneUser,
+  );
+
+  const { register, setValue } = formProps;
+
+  return (
+    <section className="naxatw-px-14">
+      <Flex>
+        <p className="naxatw-mb-2 naxatw-text-lg naxatw-font-bold">
+          Other Details
+        </p>
+      </Flex>
+      <FlexColumn gap={5}>
+        <FormControl>
+          <Label required>Notify for projects withing Distance (in km)</Label>
+          <Input
+            placeholder="Enter"
+            className="naxatw-mt-1"
+            type="number"
+            {...register('notify_for_projects_within_km', {
+              required: 'Required',
+              valueAsNumber: true,
+            })}
+          />
+          <ErrorMessage
+            message={
+              formProps.formState.errors?.notify_for_projects_within_km?.message
+            }
+          />
+        </FormControl>
+        <FormControl>
+          <Label required>Experience </Label>
+          <Input
+            placeholder="Enter years of experience"
+            className="naxatw-mt-1"
+            type="number"
+            {...register('experience_years', {
+              required: 'Required',
+              valueAsNumber: true,
+            })}
+          />
+          <ErrorMessage
+            message={formProps.formState.errors?.experience_years?.message}
+          />
+        </FormControl>
+        <FormControl>
+          <Label required>Drone you own</Label>
+          <Input
+            placeholder="Enter the type of drone you own"
+            className="naxatw-mt-1"
+            {...register('drone_you_own', {
+              required: 'Required',
+            })}
+          />
+          <ErrorMessage
+            message={formProps.formState.errors?.drone_you_own?.message}
+          />
+        </FormControl>
+        <FormControl>
+          <RadioButton
+            topic="Certified Drone Operator?"
+            options={droneOperatorOptions}
+            direction="column"
+            onChangeData={val => {
+              dispatch(setCommonState({ isCertifiedDroneUser: val }));
+              setValue('certified_drone_operator', val === 'yes');
+            }}
+            value={isCertifiedDroneOperator}
+          />
+          <ErrorMessage
+            message={
+              formProps.formState.errors?.certified_drone_operator?.message
+            }
+          />
+        </FormControl>
+        <FileUpload
+          // @ts-ignore
+          register={() => {}}
+          onChange={() => {}}
+          setValue={() => {}}
+          placeholder="*The supported file formats are pdf, .jpeg, .png"
+        />
+      </FlexColumn>
+    </section>
+  );
+}

src/frontend/src/components/UserProfile/FormContents/Password/index.tsx

@@ -1,37 +1,42 @@
 import ErrorMessage from '@Components/common/ErrorMessage';
 import { FormControl, Input, Label } from '@Components/common/FormUI';
-import { FlexColumn } from '@Components/common/Layouts';
+import { Flex, FlexColumn } from '@Components/common/Layouts';
 
 export default function PasswordSection({ formProps }: { formProps: any }) {
-  const { register } = formProps;
+  const { register, formState } = formProps;
   return (
-    <section className="naxatw-px-14 naxatw-py-10">
+    <section className="naxatw-px-14">
+      <Flex>
+        <p className="naxatw-text-lg naxatw-font-bold">Change Password</p>
+      </Flex>
       <FlexColumn gap={5}>
         <FormControl>
           <Label required>Password</Label>
           <Input
+            type="password"
             className="naxatw-mt-1"
             placeholder="Enter Password"
             {...register('password', {
-              required: 'Required',
+              required: 'Password is Required',
+              minLength: {
+                value: 8,
+                message: 'Password must have at least 8 characters',
+              },
             })}
           />
-          <ErrorMessage
-            message={formProps.formState.errors?.password?.message}
-          />
+          <ErrorMessage message={formState.errors?.password?.message} />
         </FormControl>
         <FormControl>
           <Label required>Confirm Password</Label>
           <Input
+            type="password"
             className="naxatw-mt-1"
             placeholder="Enter Password Again"
             {...register('confirm_password', {
-              required: 'Required',
+              required: 'Type password Again',
             })}
           />
-          <ErrorMessage
-            message={formProps.formState.errors?.password?.message}
-          />
+          <ErrorMessage message={formState.errors?.confirm_password?.message} />
         </FormControl>
       </FlexColumn>
     </section>

src/frontend/src/components/UserProfile/FormContents/index.tsx

@@ -1,5 +1,6 @@
 import BasicDetails from './BasicDetails';
 import OrganizationDetails from './OrganizationDetails';
+import OtherDetails from './OtherDetails';
 import PasswordSection from './Password';
 
-export { BasicDetails, OrganizationDetails, PasswordSection };
+export { BasicDetails, OrganizationDetails, OtherDetails, PasswordSection };

src/frontend/src/components/common/ErrorMessage/index.tsx

@@ -13,7 +13,7 @@ export default function ErrorMessage({
   return (
     <p
       className={cn(
-        `naxatw-text-red-400 naxatw-text-sm naxatw-font-normal ${
+        `naxatw-text-sm naxatw-font-normal naxatw-text-red ${
           disabled ? 'naxatw-text-grey-600' : ''
         }`,
         className,