add img on dockerfile

.github/workflows/frontend-tests.yml

@@ -45,11 +45,3 @@ jobs:
           context: "{{defaultContext}}:backend"
           file: Dockerfile.prod
           tags: ${{ secrets.DOCKERHUB_USERNAME }}/wildrent-backend:latest, ${{ secrets.DOCKERHUB_USERNAME }}/wildrent-backend:${{ github.sha }}
-      - name: Launch the security test
-        continue-on-error: true
-        run: npm run zap
-
-      - uses: actions/upload-artifact@v4
-        with:
-          name: zap-report
-          path: zap/wrk/index.html

.gitignore

@@ -1,2 +1,3 @@
 .env
 img/node_modules
+frontend/src/generated/graphql-types.ts

backend/src/resolvers/ArticleResolver.ts

@@ -19,11 +19,13 @@ class NewArticleInput {
   @Field(() => String)
   productId: number;
 }
+
 @Resolver(Article)
 class ArticleResolver {
   @Query(() => [Article])
   async getAllArticles() {
-    const article = await Article.find({ relations: { product: true, reservations: true } })
+    const article = await Article.find({ relations: { product: true, reservations: true }, order: { product: {name: "ASC" }} 
+    })
     return article
   }
 
@@ -51,6 +53,28 @@ class ArticleResolver {
     await Article.delete(idToDelete);
     return `Product deleted successfully`;
   }
+
+  @Mutation(() => Article)
+  async deleteArticleFromReservation(@Arg("articleId") articleId: string) {
+    const article = await Article.findOne({
+      where: { id: Number.parseInt(articleId) },
+      relations: { reservations: true },
+    });
+
+    if (!article) {
+      throw new Error("Article not found");
+    }
+
+    if (!article.reservations) {
+      throw new Error("Article is not part of any reservation");
+    }
+
+    article.reservations = [];
+
+    await article.save();
+
+    return article;
+  }
 }
 
 export default ArticleResolver;

backend/src/resolvers/ReservationResolver.ts

@@ -90,19 +90,19 @@ class ReservationResolver {
         where: { user: { id: context.id } },
         relations: ["user", "articles", "articles.product"],
         order: {
-          createdAt: "DESC"
+          createdAt: "DESC",
         },
       });
-  
-      return reservations.map(reservation => {
+
+      return reservations.map((reservation) => {
         const totalPrice = calculateTotal(reservation.articles);
         return { reservation, totalPrice };
       });
     } else {
       return [];
     }
   }
-  
+
   @Mutation(() => Reservation)
   async handleReservation(
     @Ctx() context: Context,
@@ -174,6 +174,21 @@ class ReservationResolver {
 
     return reservation;
   }
+
+  @Mutation(() => Reservation)
+  async cancelReservation(@Arg("reservationId") reservationId: string) {
+    const reservation = await Reservation.findOne({
+      where: { id: Number.parseInt(reservationId) },
+    });
+
+    if (!reservation) {
+      throw new Error("Reservation not found");
+    }
+    reservation.status = ReservationStatus.Ended;
+    await reservation.save();
+
+    return reservation;
+  }
 }
 
 export default ReservationResolver;

docker-compose.build.prod.yml

@@ -50,11 +50,10 @@ services:
     ports:
       - 7000:80
   img:
-    build:
-      context: ./img
-      dockerfile: Dockerfile.prod
+    build: ./img
+    dockerfile: Dockerfile.prod
     healthcheck:
-      test: "curl --fail --request GET --url 'http://localhost:4000' || exit 1"
-      interval: 1s
-      timeout: 2s
-      retries: 100
+    test: "curl --fail --request GET --url 'http://localhost:4000' || exit 1"
+    interval: 1s
+    timeout: 2s
+    retries: 100

docker-compose.e2e.yml

@@ -58,4 +58,4 @@ services:
       - ./e2e/playwright-report:/app/playwright-report
       - ./e2e/test-results:/app/test-results
     depends_on:
-      - apigateway
+      - apigateway

docker-compose.prod.yml

@@ -48,9 +48,8 @@ services:
       - ./nginx.conf:/etc/nginx/nginx.conf
       - ./logs:/var/log/nginx
   img:
-    build:
-      context: ./img
-      dockerfile: Dockerfile.prod
+    build: ./img
+    dockerfile: Dockerfile.prod
     healthcheck:
       test: "curl --fail --request GET --url 'http://localhost:4000' || exit 1"
       interval: 1s

docker-compose.yml

@@ -49,7 +49,7 @@ services:
         condition: service_healthy
     ports:
       - 7000:80
-  img:
+    img:
     build: ./img
     healthcheck:
       test: "curl --fail --request GET --url 'http://localhost:4000' || exit 1"
@@ -58,4 +58,4 @@ services:
       retries: 100
 
 volumes:
-  pgdata:
+  pgdata:

e2e/Dockerfile

@@ -1,4 +1,4 @@
-FROM mcr.microsoft.com/playwright:v1.48.0-jammy
+FROM mcr.microsoft.com/playwright:v1.49.1-jammy
 
 WORKDIR /app
 

frontend/.eslintrc.cjs

@@ -14,7 +14,11 @@ module.exports = {
       "warn",
       { allowConstantExport: true },
     ],
-    quotes: ["error", "double"],
     "@typescript-eslint/quotes": ["error", "double"],
+    eqeqeq: ["error", "always"],
+    indent: ["error", 2],
+    "no-unused-vars": "warn",
+    "no-console": "warn",
+    "no-trailing-spaces": "error",
   },
 };

frontend/package.json

@@ -6,7 +6,7 @@
   "scripts": {
     "dev": "graphql-codegen --config codegen.ts && vite --host",
     "build": "tsc -b && vite build",
-    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "lint": "eslint . --ext .ts,.tsx",
     "preview": "vite preview",
     "test": "vitest"
   },

frontend/src/App.tsx

@@ -9,18 +9,26 @@ import Login from "./pages/Login";
 import SearchPage from "./pages/search/[searchKeywords]";
 import Profile from "./pages/Profile";
 import { Cart } from "./pages/Cart";
+import AdminRouteProtection from "./components/AdminRouteProtection";
 
 const App = () => {
   return (
     <Routes>
       <Route path="/" element={<Layout />}>
         <Route index element={<HomePage />} />
         <Route path="register" element={<Register />} />
-        <Route path="admin" element={<Admin />} />
+        <Route
+          path="admin"
+          element={
+            <AdminRouteProtection>
+              <Admin />
+            </AdminRouteProtection>
+          }
+        />
         <Route path="profile" element={<Profile />} />
         <Route path="login" element={<Login />} />
         <Route path="/product/:productId" element={<ProductDescription />} />
-        <Route path="search" element={<SearchPage />} /> 
+        <Route path="search" element={<SearchPage />} />
         <Route path="/search/:keyword" element={<SearchPage />} />
         <Route path="register" element={<Register />} />
         <Route path="cart" element={<Cart />} />

frontend/src/components/AdminRouteProtection.tsx

@@ -0,0 +1,16 @@
+import { useContext } from "react";
+import { Navigate } from "react-router-dom";
+import { UserContext } from "./Layout";
+import { Role } from "../interface/types";
+
+function AdminRouteProtection({ children }: { children: React.ReactNode }) {
+  const userInfo = useContext(UserContext);
+
+  if (!userInfo.isLoggedIn || userInfo.role !== Role.Admin) {
+    return <Navigate to="/" replace />;
+  }
+
+  return <>{children}</>;
+}
+
+export default AdminRouteProtection;

frontend/src/components/ArticleReservationCard.tsx

@@ -0,0 +1,67 @@
+import { Card, Divider } from "antd";
+import { ReservationData } from "../interface/types";
+import ValidateReservationButton from "./ValidateReservationButton";
+import CancelReservationButton from "./CancelReservationButton";
+import DeleteArticleReservationButton from "./DeleteArticleReservationButton";
+
+export const ArticleReservationCard = ({
+  reservationData,
+}: {
+  reservationData: ReservationData;
+}) => {
+  const articles = reservationData.reservation.articles;
+
+  return (
+    <>
+      {reservationData.reservation.status === "pending" ? (
+        <Card title={"Détails de votre réservation"} style={{ width: 500 }}>
+          {articles.map((article) => (
+            <Card style={{ margin: 20 }} key={article.product?.id}>
+              <div
+                style={{
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "space-between",
+                }}
+              >
+                <div style={{ display: "flex", alignItems: "center" }}>
+                  <img
+                    src={article.product?.imgUrl}
+                    alt="product img"
+                    style={{ height: 100, marginRight: 20 }}
+                  />
+                  <div>
+                    <p style={{ margin: 0, fontWeight: "bold" }}>
+                      {article.product?.name}
+                    </p>
+                    <p style={{ margin: 0 }}>{article.product?.price}€</p>
+                  </div>
+                </div>
+                <DeleteArticleReservationButton
+                  articleId={article.id}
+                  reservationData={reservationData}
+                />
+              </div>
+            </Card>
+          ))}
+          <div style={{ display: "flex", justifyContent: "space-around" }}>
+            {reservationData.reservation.status === "pending" && (
+              <ValidateReservationButton
+                reservation={reservationData.reservation}
+              />
+            )}
+            {reservationData.reservation.status === "pending" && (
+              <CancelReservationButton
+                reservation={reservationData.reservation}
+              />
+            )}
+          </div>
+        </Card>
+      ) : (
+        <h1>Aucune réservation en cours.</h1>
+      )}
+
+      <Divider dashed />
+    </>
+  );
+};

frontend/src/components/CancelReservationButton.tsx

@@ -0,0 +1,45 @@
+import { useMutation } from "@apollo/client";
+import { Button, message, Popconfirm } from "antd";
+import { CANCEL_RESERVATION } from "../graphql/mutations";
+import { ReservationData } from "../interface/types";
+import {
+  GetCurrentReservationByUserIdDocument,
+  GetReservationsByUserIdDocument,
+} from "../generated/graphql-types";
+
+function CancelReservationButton({ reservation }: ReservationData) {
+  const [cancelReservation] = useMutation(CANCEL_RESERVATION, {
+    onCompleted: () => {
+      message.success("La réservation a bien été annulée.");
+    },
+    onError: () => {
+      message.error("Une erreur est survenue lors de l'annulation.");
+    },
+    refetchQueries: [
+      GetReservationsByUserIdDocument,
+      GetCurrentReservationByUserIdDocument,
+    ],
+  });
+
+  return (
+    <>
+      <Popconfirm
+        title="Annuler cette réservation ?"
+        description="La réservation sera définitivement annulée."
+        okText="Oui"
+        cancelText="Non"
+        onConfirm={() =>
+          cancelReservation({
+            variables: {
+              reservationId: reservation.id.toString(),
+            },
+          })
+        }
+      >
+        <Button danger>Annuler la réservation</Button>
+      </Popconfirm>
+    </>
+  );
+}
+
+export default CancelReservationButton;

frontend/src/components/CurrentReservation.tsx

@@ -1,10 +1,12 @@
 import { ReservationData } from "../interface/types";
-import { ReservationCard } from "./ReservationCard";
+import { ArticleReservationCard } from "./ArticleReservationCard";
 
-export const CurrentReservation = ({ reservationData }: { reservationData: ReservationData }) => {
-  return (
-    <ReservationCard reservationData={reservationData} />
-  );
+export const CurrentReservation = ({
+  reservationData,
+}: {
+  reservationData: ReservationData;
+}) => {
+  return <ArticleReservationCard reservationData={reservationData} />;
 };
 
 export default CurrentReservation;

frontend/src/components/DeleteArticleButton.tsx

@@ -16,6 +16,7 @@ function DeleteProductButton({ articleId }: { articleId: string }) {
       title="Supprimer cet article ? "
       description="Toutes les données le concernant seront perdues."
       okText="Oui"
+      className="bg-red-500 text-white hover:bg-red-600 focus:outline-none"
       cancelText="Non"
       onConfirm={() =>
         deleteArticle({