issue #360: get username from cookies

package.json

@@ -33,6 +33,7 @@
     "i18next-http-backend": "^2.6.2",
     "i18next-resources-to-backend": "^1.2.1",
     "jest-environment-jsdom": "^29.7.0",
+    "js-cookie": "^3.0.5",
     "next": "14.2.15",
     "react": "^18",
     "react-dom": "^18",
@@ -51,6 +52,7 @@
     "@testing-library/react": "^16.0.1",
     "@testing-library/user-event": "^14.5.2",
     "@types/jest": "^29.5.14",
+    "@types/js-cookie": "^3.0.6",
     "@types/node": "^20",
     "@types/react": "^18.3.11",
     "@types/react-dom": "^18.3.1",

public/locales/en/homePage.json

@@ -1,23 +1,23 @@
 {
-    "submit_button": "Submit",
-    "submit_button_disabled_hint": "You need to add a minimum of 1 file to start the analysis",
-    "fileList":{
-        "uploadedfiles": "Uploaded Files",
-        "noUploadedfiles": "No uploaded files"
-    },
-    "fileElement": {
-        "altText": {
-            "uploadedFileAlt": "Uploaded file picture",
-            "deleteFileAlt": "Delete file button icon"
-        }
-    },
-    "dropzone": {
-        "altText": {
-            "hoveredImageAlt": "Hovered image",
-            "CloudIconAlt": "File upload icon"
-        },
-        "dragDrop": "Drag and Drop Files",
-        "or": "OR",
-        "browseFile": "Browse Files"
+  "submitButton": "Submit",
+  "submitButtonDisabledHint": "You need to add a minimum of 1 file to start the analysis",
+  "fileList": {
+    "uploadedfiles": "Uploaded Files",
+    "noUploadedfiles": "No uploaded files"
+  },
+  "fileElement": {
+    "altText": {
+      "uploadedFileAlt": "Uploaded file picture",
+      "deleteFileAlt": "Delete file button icon"
     }
+  },
+  "dropzone": {
+    "altText": {
+      "hoveredImageAlt": "Hovered image",
+      "CloudIconAlt": "File upload icon"
+    },
+    "dragDrop": "Drag and Drop Files",
+    "or": "OR",
+    "browseFile": "Browse Files"
+  }
 }

public/locales/fr/homePage.json

@@ -1,23 +1,23 @@
 {
-    "submit_button": "Soumettre",
-    "submit_button_disabled_hint":"Vous devez ajouter au moins 1 fichier pour commencer l'analyse",
-    "fileList":{
-        "uploadedfiles": "Fichiers téléversés",
-        "noUploadedfiles": "Aucun fichier téléversé"
-    },
-    "fileElement": {
-        "altText": {
-            "uploadedFileAlt": "Image du fichier téléchargé",
-            "deleteFileAlt": "Icône du bouton pour supprimer un fichier"
-        }
-    },
-    "dropzone":{
-        "altText":{
-            "hoveredImageAlt": "Image survolée",
-            "CloudIconAlt": "Icône de téléversement de fichier"
-        },
-        "dragDrop": "Téléverser des fichiers",
-        "or": "OU",
-        "browseFile": "Parcourir les fichiers"
+  "submitButton": "Soumettre",
+  "submitButtonDisabledHint": "Vous devez ajouter au moins 1 fichier pour commencer l'analyse",
+  "fileList": {
+    "uploadedfiles": "Fichiers téléversés",
+    "noUploadedfiles": "Aucun fichier téléversé"
+  },
+  "fileElement": {
+    "altText": {
+      "uploadedFileAlt": "Image du fichier téléchargé",
+      "deleteFileAlt": "Icône du bouton pour supprimer un fichier"
     }
+  },
+  "dropzone": {
+    "altText": {
+      "hoveredImageAlt": "Image survolée",
+      "CloudIconAlt": "Icône de téléversement de fichier"
+    },
+    "dragDrop": "Téléverser des fichiers",
+    "or": "OU",
+    "browseFile": "Parcourir les fichiers"
+  }
 }

src/app/api/extract-label-data/route.ts

@@ -1,5 +1,5 @@
+import { handleApiError } from "@/utils/server/apiErrors";
 import { pipelineApi } from "@/utils/server/backend";
-import { handleApiError } from "@/utils/server/common";
 
 export async function POST(request: Request) {
   const formData = await request.formData();

src/app/api/inspections/[id]/route.ts

@@ -1,5 +1,5 @@
+import { handleApiError } from "@/utils/server/apiErrors";
 import { inspectionsApi } from "@/utils/server/backend";
-import { handleApiError } from "@/utils/server/common";
 import { validate } from "uuid";
 
 export async function GET(

src/app/api/inspections/route.ts

@@ -1,12 +1,11 @@
+import { handleApiError } from "@/utils/server/apiErrors";
 import { inspectionsApi } from "@/utils/server/backend";
-import { handleApiError } from "@/utils/server/common";
 
 export async function POST(request: Request) {
   const formData = await request.formData();
   const files = formData.getAll("files") as File[];
   const labelDataString = formData.get("labelData") as string;
   const labelData = JSON.parse(labelDataString);
-
 
   const authHeader = request.headers.get("Authorization");
   if (!authHeader) {

src/app/api/login/route.ts

@@ -1,7 +1,7 @@
+import { handleApiError } from "@/utils/server/apiErrors";
 import { usersApi } from "@/utils/server/backend";
 
 export async function POST(request: Request) {
-
   const authHeader = request.headers.get("Authorization");
   if (!authHeader) {
     return new Response(
@@ -12,18 +12,12 @@ export async function POST(request: Request) {
     );
   }
 
-  return usersApi.loginLoginPost({headers: { Authorization: authHeader }}).then((response) => {
-    return Response.json(response.data);
-  }).catch((error) => {
-    if (error.response) {
-      console.error("Error response:", error.response.data);
-    } else if (error.request) {
-      console.error("Error request:", error.request);
-    } else {
-      console.error("Error message:", error.message);
-    }
-    return new Response(JSON.stringify({ error: error.message }), {
-      status: error.status,
+  return usersApi
+    .loginLoginPost({ headers: { Authorization: authHeader } })
+    .then((response) => {
+      return Response.json(response.data);
+    })
+    .catch((error) => {
+      return handleApiError(error);
     });
-  });
 }

src/app/api/signup/route.ts

@@ -1,7 +1,7 @@
+import { handleApiError } from "@/utils/server/apiErrors";
 import { usersApi } from "@/utils/server/backend";
 
 export async function POST(request: Request) {
-
   const authHeader = request.headers.get("Authorization");
   if (!authHeader) {
     return new Response(
@@ -12,18 +12,12 @@ export async function POST(request: Request) {
     );
   }
 
-  return usersApi.signupSignupPost({headers: { Authorization: authHeader }}).then((response) => {
-    return Response.json(response.data);
-  }).catch((error) => {
-    if (error.response) {
-      console.error("Error response:", error.response.data);
-    } else if (error.request) {
-      console.error("Error request:", error.request);
-    } else {
-      console.error("Error message:", error.message);
-    }
-    return new Response(JSON.stringify({ error: error.message }), {
-      status: error.status,
+  return usersApi
+    .signupSignupPost({ headers: { Authorization: authHeader } })
+    .then((response) => {
+      return Response.json(response.data);
+    })
+    .catch((error) => {
+      return handleApiError(error);
     });
-  });
 }

src/app/label-data-validation/[id]/page.tsx

@@ -3,9 +3,10 @@ import LabelDataValidator from "@/components/LabelDataValidator";
 import useAlertStore from "@/stores/alertStore";
 import useUploadedFilesStore from "@/stores/fileStore";
 import { DEFAULT_LABEL_DATA } from "@/types/types";
-import { mapInspectionToLabelData } from "@/utils/client/common";
+import { mapInspectionToLabelData } from "@/utils/client/modelTransformation";
 import { Inspection } from "@/utils/server/backend";
 import axios from "axios";
+import Cookies from "js-cookie";
 import { useRouter } from "next/navigation";
 import { useEffect, useState } from "react";
 import { validate } from "uuid";
@@ -27,7 +28,7 @@ export default function Page({ params }: { params: { id: string } }) {
       return;
     }
 
-    const username = "";
+    const username = atob(Cookies.get("token") ?? "");
     const password = "";
     const authHeader = "Basic " + btoa(`${username}:${password}`);
     const controller = new AbortController();

src/app/label-data-validation/page.tsx

@@ -3,12 +3,11 @@ import LabelDataValidator from "@/components/LabelDataValidator";
 import useAlertStore from "@/stores/alertStore";
 import useUploadedFilesStore from "@/stores/fileStore";
 import { DEFAULT_LABEL_DATA } from "@/types/types";
-import {
-  mapLabelDataOutputToLabelData,
-  processAxiosError,
-} from "@/utils/client/common";
+import { processAxiosError } from "@/utils/client/apiErrors";
+import { mapLabelDataOutputToLabelData } from "@/utils/client/modelTransformation";
 import { Inspection, LabelDataOutput } from "@/utils/server/backend";
 import axios from "axios";
+import Cookies from "js-cookie";
 import { useRouter } from "next/navigation";
 import { useEffect, useState } from "react";
 
@@ -37,7 +36,7 @@ function LabelDataValidationPage() {
       formData.append("files", file);
     });
 
-    const username = "";
+    const username = atob(Cookies.get("token") ?? "");
     const password = "";
     const authHeader = "Basic " + btoa(`${username}:${password}`);
     axios

src/app/page.tsx

@@ -55,7 +55,7 @@ function HomePage() {
           >
             <Tooltip
               data-testid="hint-submit-button-disabled"
-              title={t("submit_button_disabled_hint")}
+              title={t("submitButtonDisabledHint")}
               disableHoverListener={uploadedFiles.length !== 0}
               placement="top"
               className="w-[90%] max-w-full"
@@ -70,7 +70,7 @@ function HomePage() {
                   fullWidth
                   onClick={() => router.push("/label-data-validation")}
                 >
-                  {t("submit_button")}
+                  {t("submitButton")}
                 </Button>
               </span>
             </Tooltip>

src/components/AuthComponents/RouteGuard.tsx

@@ -1,9 +1,10 @@
-import { useEffect, useState } from "react";
-import SignUpModal from "@/components/AuthComponents/SignUpModal";
 import LoginModal from "@/components/AuthComponents/LoginModal";
+import SignUpModal from "@/components/AuthComponents/SignUpModal";
+import useAlertStore from "@/stores/alertStore";
 import axios, { AxiosError } from "axios";
+import Cookies from "js-cookie";
+import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
-import useAlertStore from "@/stores/alertStore";
 
 const RouteGuard = ({ children }: Readonly<{ children: React.ReactNode }>) => {
   const [isAuth, setAuth] = useState(false);
@@ -23,7 +24,7 @@ const RouteGuard = ({ children }: Readonly<{ children: React.ReactNode }>) => {
         },
       );
       if (res.status >= 200 && res.status < 300) {
-        document.cookie = "token=" + btoa(username) + "; SameSite=Strict;";
+        Cookies.set("token", btoa(username), { sameSite: "Strict" });
         setAuth(true);
         return "";
       }
@@ -61,7 +62,7 @@ const RouteGuard = ({ children }: Readonly<{ children: React.ReactNode }>) => {
         },
       );
       if (res.status >= 200 && res.status < 300) {
-        document.cookie = "token=" + btoa(username) + "; SameSite=Strict;";
+        Cookies.set("token", btoa(username), { sameSite: "Strict" });
         setAuth(true);
         return "";
       }
@@ -87,15 +88,7 @@ const RouteGuard = ({ children }: Readonly<{ children: React.ReactNode }>) => {
   };
 
   useEffect(() => {
-    const cookieStore = new Map();
-    const cookies = document.cookie.split(";");
-    cookies.forEach((cookie) => {
-      const [key, value] = cookie.split("=");
-      if (key && value) {
-        cookieStore.set(key.trim(), value.trim());
-      }
-    });
-    setAuth(!!cookieStore.get("token"));
+    setAuth(!!Cookies.get("token"));
   }, []);
 
   return (

src/components/LabelDataValidator.tsx

@@ -12,7 +12,10 @@ import {
   StepStatus,
 } from "@/components/stepper";
 import { FormComponentProps, LabelData } from "@/types/types";
-import { checkFieldArray, checkFieldRecord } from "@/utils/client/common";
+import {
+  checkFieldArray,
+  checkFieldRecord,
+} from "@/utils/client/fieldValidation";
 import useBreakpoints from "@/utils/client/useBreakpoints";
 import { Box, Container, Typography } from "@mui/material";
 import { useEffect, useState } from "react";

src/components/OrganizationsForm.tsx

@@ -4,7 +4,7 @@ import {
   LabelData,
   Organization,
 } from "@/types/types";
-import { checkFieldRecord } from "@/utils/client/common";
+import { checkFieldRecord } from "@/utils/client/fieldValidation";
 import AddIcon from "@mui/icons-material/Add";
 import DeleteIcon from "@mui/icons-material/Delete";
 import DoneAllIcon from "@mui/icons-material/DoneAll";

src/utils/client/__tests__/common.test.ts → src/utils/client/__tests__/modelTransformation.test.ts

@@ -12,7 +12,7 @@ import {
   verifiedItemPairInspectionValue,
   verifiedItemPairNutrientValue,
   verifiedTranslations,
-} from "../common";
+} from "../modelTransformation";
 
 describe("quantity", () => {
   it("should handle a valid PipelineInspectionValue", () => {