Merge pull request #17 from akirachix/feature/authentication

Feature/authentication

Author: hunterachieng

fruitguard/public/images/Group 239238.png

@@ -46,7 +46,7 @@ function SignInForm() {
   return (
     <>
       <Image
-        src="/images/Group239208.png"
+        src="/images/fruitguard-logo.png"
         alt="FruitGuard Logo"
         width={100}
         height={100}

fruitguard/public/images/Group 239208.png …tguard/public/images/fruitguard-logo.pngfruitguard/public/images/Group 239208.png renamed to fruitguard/public/images/fruitguard-logo.png fruitguard/public/images/Group 239208.png renamed to fruitguard/public/images/fruitguard-logo.png

@@ -70,7 +70,7 @@ export default function Register() {
       </div>
       <div className="w-1/2 flex items-center justify-center">
         <div className="w-full max-w-md p-6">
-          <Image src="/images/Group239208.png"  alt="FruitGuard Logo" width={100} height={100} className="mx-auto mb-10" priority/>
+          <Image src="/images/fruitguard-logo.png"  alt="FruitGuard Logo" width={100} height={100} className="mx-auto mb-10" priority/>
           <form onSubmit={handleSubmit} className="space-y-4">
             <div>
               <label htmlFor="first_name" className="block text-sm font-bold mb-1 text-xl">First Name</label>

fruitguard/src/app/Login/page.tsx

@@ -0,0 +1,10 @@
+import AdminLayout from "../sharedComponents/AdminLayout";
+import Profile from "../profile/page";
+
+export default function AdminProfilePage(){
+    return(
+        <AdminLayout>
+            <Profile/>
+        </AdminLayout>
+    )
+}

fruitguard/src/app/Register/page.tsx

@@ -0,0 +1,11 @@
+import AgrovetLayout from "../sharedComponents/AgrovetLayout";
+import Profile from "../profile/page";
+
+
+export default function AgrovetPage(){
+    return(
+        <AgrovetLayout>
+            <Profile/>
+        </AgrovetLayout>
+    )
+}

fruitguard/src/app/admin-profile/page.tsx

@@ -15,6 +15,12 @@ const mockedUpdateProfile = updateProfile as jest.Mock;
 describe('ProfilePage', () => {
   beforeEach(() => {
     jest.clearAllMocks();
+    jest.spyOn(Storage.prototype, 'getItem').mockImplementation((key) => {
+    if (key === 'token') {
+      return 'test-token';
+    }
+    return null;
+  });
   });
 
   test('shows loading state when loading profile', () => {

fruitguard/src/app/agrovet-profile/page.tsx

@@ -4,13 +4,18 @@ import { useEffect,useState } from "react";
 import useProfile from "../hooks/useFetchProfile";
 import { updateProfile } from "../utils/updateProfile";
 import { HiOutlinePencilAlt } from "react-icons/hi";
-import AdminLayout from "../sharedComponents/AdminLayout";
 import Button from "../sharedComponents/Button";
 import Image from "next/image";
 
-const token = process.env.NEXT_PUBLIC_API_TOKEN || "";
 
 export default function Profile() {
+   const [token,setToken]=useState("")
+  useEffect(()=>{
+    const storedToken =localStorage.getItem("token");
+    if (storedToken){
+      setToken(storedToken);
+    }
+  },[]);
   const {profile, loading, error } = useProfile(token);
   const [formData, setFormData] = useState({first_name: "", last_name: "", email: "",});
   const [profileImage, setProfileImage] = useState<File |null>(null);
@@ -30,6 +35,10 @@ export default function Profile() {
    setFormData((oldData) => ({...oldData,[name]: value }));}
 
   async function handleSubmit(event: React.FormEvent) {event.preventDefault();
+     if (!token){
+      setUpdateError("No authorization token found")
+      return;
+    }
     setUpdating(true);
     setUpdateError(null);
     setUpdateSuccess(false);
@@ -66,7 +75,7 @@ export default function Profile() {
   }}, [updateSuccess]);
 
   return (
-    <AdminLayout>
+
     <div className="flex justify-end min-h-screen">
         <main className="w-4/5 px-35 flex flex-col justify-center items-center ml-30 font-nunito">
           <h1 className="text-[#7B4F36] text-2xl lg:text-3xl xl:text-3xl 2xl:text-4xl font-bold mb-15 -mt-4 text-left w-full">Profile</h1>
@@ -115,6 +124,6 @@ export default function Profile() {
               </div>)}
        </main>
      </div>
-     </AdminLayout>
+
   );
 }

fruitguard/src/app/profile/page.test.tsx

@@ -13,7 +13,7 @@ export default function Roles() {
         <div className="relative mb-12 mt-16 sm:mt-24 md:-mt-50">
           <div className="flex justify-center">
             <Image
-              src="/Images/fruitguard.png"
+              src="/images/fruitguard.png"
               alt="FruitGuard logo"
               width={150}
               height={80}

fruitguard/src/app/profile/page.tsx

@@ -33,7 +33,7 @@ describe("AdminSidebar", () => {
     const teamLink = screen.getByRole("link", { name: /manage team/i });
     expect(teamLink).toHaveAttribute("aria-current", "page");
 
-    mockUsePathname.mockReturnValue("/profile");
+    mockUsePathname.mockReturnValue("/admin-profile");
     rerender(<AdminSidebar />);
     const profileLink = screen.getByRole("link", { name: /profile/i });
     expect(profileLink).toHaveAttribute("aria-current", "page");