création du container frontend-consumer

.gitignore

@@ -10,6 +10,7 @@ backend/gen/src/**
 frontend/gen/*
 frontend/app/build
 frontend/app/public/config
+#frontend/app/.env
 
 #TODO : delete the following line after
 # - issue https://github.com/OpenAPITools/openapi-generator/pull/5312 will be resolved

compose.yml

@@ -35,7 +35,7 @@ services:
       - KEYCLOAK_ADMIN_PASSWORD=${keycloak_admin_password:-admin}
       #- KEYCLOAK_IMPORT=/opt/keycloak/realm/realm.json
       - KC_DB=postgres
-      - KC_DB_URL=jdbc:postgresql://localhost:${postgres_port:-5432}/identity
+      - KC_DB_URL=jdbc:postgresql://database:5432/identity
       - KC_DB_USERNAME=identity
       - KC_DB_PASSWORD=${identity_database_password:-dntt-db-p4ssw0rd}
       - KC_HOSTNAME_URL=${identity_url:-http://localhost:8180}
@@ -74,13 +74,28 @@ services:
       - ${backend_port:-8080}:8080
     network_mode: "host"
 
-  frontend:
+  frontend-producer:
     build:
       context: "."
       dockerfile: ./frontend/Dockerfile
-    image: benjaminpochat/viandeendirect-frontend:${DOCKER_IMAGE_TAG:-latest}
+      args:
+        REACT_APP_MODE: PRODUCER
+    image: benjaminpochat/viandeendirect-frontend-producer:${DOCKER_IMAGE_TAG:-latest}
     volumes:
-      - ${frontend_config_path:-./frontend-config}:/usr/local/apache2/htdocs/config
+      - ${frontend_producer_config_path:-./frontend-producer-config}:/usr/local/apache2/htdocs/config
     ports:
-      - ${frontend_port:-80}:80
+      - ${frontend_producer_port:-81}:80
+    network_mode: "host"
+
+  frontend-customer:
+    build:
+      context: "."
+      dockerfile: ./frontend/Dockerfile
+      args:
+        REACT_APP_MODE: CUSTOMER
+    image: benjaminpochat/viandeendirect-frontend-customer:${DOCKER_IMAGE_TAG:-latest}
+    volumes:
+      - ${frontend_customer_config_path:-./frontend-customer-config}:/usr/local/apache2/htdocs/config
+    ports:
+      - ${frontend_customer_port:-80}:80
     network_mode: "host"

frontend/Dockerfile

@@ -12,7 +12,10 @@ WORKDIR /frontend/app
 RUN npm run generate:api
 RUN npm run build:api
 RUN npm run install:api
-RUN npm run build
+
+ARG REACT_APP_MODE
+
+RUN export REACT_APP_MODE=$REACT_APP_MODE && npm run build
 
 FROM httpd:2.4.57
 

frontend/app/src/App.js

@@ -5,7 +5,8 @@ import { frFR } from '@mui/material/locale';
 import { ReactKeycloakProvider } from '@react-keycloak/web'
 import Keycloak from 'keycloak-js'
 
-import LayoutWrapper from './layout/LayoutWrapper';
+import ProducerLayoutWrapper from './layouts/producer/LayoutWrapper';
+import CustomerLayoutWrapper from './layouts/customer/LayoutWrapper';
 
 import './App.css';
 
@@ -52,10 +53,20 @@ function App() {
     }
   }, frFR);
 
+  function getLayoutWrapper() {
+    if(process.env.REACT_APP_MODE === 'CUSTOMER') {
+      return <CustomerLayoutWrapper/>
+    }
+    if(process.env.REACT_APP_MODE === 'PRODUCER') {
+      return <ProducerLayoutWrapper/>
+    }
+    return <div>Configuration du mode client ou producteur absent ou non reconnu</div>
+  }
+
   return (
     <ReactKeycloakProvider authClient={keycloakClient} initOptions={keycloakInitOptions}>
       <ThemeProvider theme={theme}>
-        <LayoutWrapper />
+        {getLayoutWrapper()}
       </ThemeProvider>
     </ReactKeycloakProvider>
   )

frontend/app/src/layouts/customer/LayoutWrapper.js

@@ -0,0 +1,14 @@
+import { useKeycloak } from '@react-keycloak/web'
+
+export default function CustomerLayoutWrapper() {
+
+    const { keycloak, initialized } = useKeycloak()
+
+    if(process.env.REACT_APP_MOCK_API) {
+        return <div>Page client authentifié</div>
+    } else {
+        return keycloak.authenticated ? <div>Page client authentifié</div> : <div>Page client anonmye</div>
+    }
+
+}
+

frontend/app/src/layout/AuthenticatedLayout.js → frontend/app/src/layouts/producer/AuthenticatedLayout.js

@@ -4,12 +4,12 @@ import { useState } from 'react';
 import {AppBar, Box, CssBaseline, IconButton, Toolbar, Typography} from '@mui/material'
 import {Close, Logout, Menu} from '@mui/icons-material'
 
-import Dashboard from '../domains/dashboard/Dashboard.js';
-import CustomerController from '../domains/customer/CustomerController.js';
-import GrowerAccount from '../domains/producer/ProducerAccount.js'
-import ProductionController from '../domains/production/ProductionController.js'
-import SaleController from '../domains/sale/SaleController.tsx'
-import SideMenu from './SideMenu'
+import Dashboard from '../../domains/dashboard/Dashboard.js';
+import CustomerController from '../../domains/customer/CustomerController.js';
+import GrowerAccount from '../../domains/producer/ProducerAccount.js'
+import ProductionController from '../../domains/production/ProductionController.js'
+import SaleController from '../../domains/sale/SaleController.tsx'
+import SideMenu from './SideMenu.js'
 
 
 function AuthenticatedLayout() {

frontend/app/src/layout/LayoutWrapper.js → frontend/app/src/layouts/producer/LayoutWrapper.js

@@ -4,7 +4,7 @@ import AuthenticatedLayout from './AuthenticatedLayout'
 import AnonymousLayout from './AnonymousLayout';
 
 
-function LayoutWrapper() {
+export default function ProducerLayoutWrapper() {
 
     const { keycloak, initialized } = useKeycloak()
 
@@ -15,5 +15,3 @@ function LayoutWrapper() {
     }
 
 }
-
-export default LayoutWrapper