[WC-28, WC-162] - Implement Client/Chef profile page, Implement edit Client/Chef profile page + API connection

.gitignore

@@ -1,36 +1,37 @@
-# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
-
-# dependencies
-/node_modules
-/.pnp
-.pnp.js
-.yarn/install-state.gz
-
-# testing
-/coverage
-
-# next.js
-/.next/
-/out/
-
-# production
-/build
-
-# misc
-.DS_Store
-*.pem
-
-# debug
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-
-# local env files
-.env*.local
-
-# vercel
-.vercel
-
-# typescript
-*.tsbuildinfo
-next-env.d.ts
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+.yarn/install-state.gz
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
+.env

app/chef/components/Footer.tsx

@@ -0,0 +1,79 @@
+import Image from 'next/image'
+import Link from 'next/link'
+
+export default function Footer() {
+  const footer_elements = [
+    'About',
+    'Terms & conditions',
+    'Privacy Policy',
+    'Contact',
+  ]
+  return (
+    <div className="relative bg-white">
+      <div className="flex justify-between w-full p-8 px-28">
+        <div>
+          <Link href="/chef/video">
+            <Image
+              src="/svg/WecookedLogo.svg"
+              alt="WeCooked Logo"
+              width={120}
+              height={120}
+              className="cursor-pointer"
+            />
+          </Link>
+        </div>
+        <div className="flex gap-x-6">
+          {footer_elements.map((item, index) => (
+            <ul
+              key={index}
+              className="cursor-pointer hover:text-transparent bg-clip-text bg-gradient-to-t from-[#FE3511] to-[#F0725C]"
+            >
+              {item}
+            </ul>
+          ))}
+        </div>
+        <div className="flex items-center gap-x-3">
+          <Link href="/">
+            <Image
+              src="/svg/fb-ic.svg"
+              alt="Facebook icon"
+              width={25}
+              height={25}
+              className="cursor-pointer"
+            />
+          </Link>
+          <Link href="/">
+            <Image
+              src="/svg/tweet-ic.svg"
+              alt="twitter icon"
+              width={25}
+              height={25}
+              className="cursor-pointer"
+            />
+          </Link>
+          <Link href="/">
+            <Image
+              src="/svg/insta-ic.svg"
+              alt="instagram icon"
+              width={25}
+              height={25}
+              className="cursor-pointer"
+            />
+          </Link>
+          <Link href="/">
+            <Image
+              src="/svg/google-ic.svg"
+              alt="Google icon"
+              width={25}
+              height={25}
+              className="cursor-pointer"
+            />
+          </Link>
+        </div>
+      </div>
+      <div className="flex justify-center pb-16">
+        Copyright ©{new Date().getFullYear()} Wecooked
+      </div>
+    </div>
+  )
+}

app/chef/components/Navbar.tsx

@@ -6,7 +6,6 @@ import NavLink from './NavLink'
 import { useRouter } from 'next/navigation'
 import { useAuthContext } from '@/app/contexts/authcontext'
 
-
 /**
  * Custom hook to manage authentication state in localStorage.
  * Wrapped in useEffect to prevent SSR issues with Netlify.
@@ -90,7 +89,7 @@ export default function Navbar() {
                   aria-orientation="vertical"
                 >
                   <Link
-                    href="/client/profile"
+                    href="/chef/profile"
                     className="block px-4 py-2 hover:bg-gray-100"
                     role="menuitem"
                   >

app/chef/components/course/CourseUpload.tsx

@@ -97,6 +97,46 @@ export default function CourseUpload() {
     setIsSubmitting(true)
     setSubmitError(null)
 
+    const courseUploadData = [
+      {
+        courseTitle: 'Masterbate British Cuisine',
+        courseDetail:
+          'Learn the secrets of British cuisine from Gordon Ramsay.',
+        coursePrice: 100,
+        courseCategory: 'Cooking',
+        courseVideoId: 1,
+        courseChefId: 1,
+        coursePackId: 'pack1',
+        courseVideoPath: 'test12345678.com',
+        courseIngredientPrice: 123456,
+        courseIngredientDetail: 'Pork,Pork,Pork,Pork',
+        courseImage: 'placeholderImage.com',
+      },
+    ]
+    try {
+      const response = await fetch(
+        `${process.env.NEXT_PUBLIC_BACKEND_URL}/chef/upload`,
+        {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+          },
+          body: JSON.stringify(courseUploadData),
+        }
+      )
+
+      if (response.ok) {
+        const responseData = await response.json()
+        console.log('Upload successful:', responseData)
+      } else {
+        const errorDetails = await response.json() // Optional: read error response
+        console.error('Failed to upload:', response.status, errorDetails)
+      }
+    } catch (error) {
+      console.error('Error submitting the form:', error)
+    }
+
+
     try {
       const courseData: CourseSubmission = {
         courseName,

app/chef/components/login&forget-password/Login.tsx

@@ -8,6 +8,7 @@ import { AuthContext, useAuthContext } from '@/app/contexts/authcontext'
 import { useForm } from 'react-hook-form'
 import { z } from 'zod'
 import { zodResolver } from '@hookform/resolvers/zod'
+import Cookies from 'js-cookie'
 
 // Define the validation schema
 const loginSchema = z.object({
@@ -56,19 +57,49 @@ export default function Login() {
   const login = () => {
     setIsAuthenticated(true)
     router.push('/chef/course')
-    if (remember == true && typeof window !== 'undefined') {
-      // Access localStorage here (to prevent netlify approvement fail)
-      localStorage.setItem('isAuthenticated', 'true')
+    if (remember) {
+      // Store authentication state in cookies
+      Cookies.set('Authorization', 'true', { expires: 7 }) // expires in 7 days if "Remember me" is checked
+    } else {
+
     }
   }
 
   const togglePasswordVisibility = () => setShowPassword((prev) => !prev)
   const toggleRemember = () => setRemember((prev) => !prev)
 
   // Update handleFormSubmit to handle form data
-  const handleFormSubmit = (data: LoginFormData) => {
-    console.log(JSON.stringify(data)) // Placeholder for auth logic
-    login() //set login state to true
+  const handleFormSubmit = async (data: LoginFormData) => {
+
+    const chefLoginData = [{
+      chefEmail: data.email,
+      chefPassword: data.password,
+    }]
+
+    try {
+      const response = await fetch(
+        `${process.env.NEXT_PUBLIC_BACKEND_URL}/chef/login`,
+        {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+          },
+          body: JSON.stringify(chefLoginData),
+        }
+      )
+
+      if (!response.ok) {
+        throw new Error('Login failed')
+      }
+
+      const responseData = await response.json()
+      console.log('token received:', responseData.token)
+      Cookies.set('Authorization', responseData.token)
+
+      login() // Redirect to the home page
+    } catch (error) {
+      console.error('Login failed:', error)
+    }
   }
 
   return (
@@ -184,7 +215,7 @@ export default function Login() {
           <div className="flex justify-center mt-6 gap-x-1 text-sm">
             <p>Don&apos;t have an account?</p>
             <Link
-              href="/client/sign-up"
+              href="/chef/sign-up-chef"
               className="cursor-pointer text-transparent bg-clip-text bg-gradient-to-t from-[#FE3511] to-[#F0725C] hover:underline font-medium"
             >
               Sign up now