changed image sizes for UML diagrams and MUI code blocks

dossier de projet/main.md

@@ -378,7 +378,7 @@ Afin de clarifier la fonctionnalité de notre site par rapport aux visiteurs, no
 
 Un admin, cependant, a des droits qu’un client n’a pas. Il peut créer, mettre à jour, et supprimer des matériaux si nécessaire.
 
-![Le Diagramme de cas d'utilisation](images/use case diagram.jpg){width=70%}
+![Le Diagramme de cas d'utilisation](images/use case diagram.jpg){width=60%}
 
 ----
 
@@ -388,7 +388,7 @@ Un admin, cependant, a des droits qu’un client n’a pas. Il peut créer, mett
 
 Le dernier diagramme UML que nous avons créé, c’était un diagramme de séquence. Nous avons choisi de se concentrer sur comment réagit un client loggé sur le site. On peut voir quand le client fait une requête de l’inventaire du site, il devrait recevoir une réponse avec les résultats de cette recherche. Il pourrait ensuite regarder la description du matériel ainsi que de l’ajouter dans son panier, et puis enfin procéder avec le paiement si désiré.
 
-![Le Diagramme de séquence](images/sequence diagram.jpg){width=70%}
+![Le Diagramme de séquence](images/sequence diagram.jpg){width=60%}
 
 \newpage
 
@@ -810,15 +810,18 @@ export const customAuthChecker: AuthChecker<MyContext> = (
     //si l 'utilisateur est connecté
     //vérifier que le user à le role demandé si le tableau de roles à une longueur > 1
     if (roles.length > 0) { // si un role est indiqué au décorateur
-      if (roles.includes(context.user.role)) { //et que le user a le role parmi ce tableau
+      //et que le user a le role parmi ce tableau
+      if (roles.includes(context.user.role)) {
         return true; //on laisse passer
       } else { //sinon
         return false; //on bloque
       }
     }
-    return true; //si le user est connecté et qu'on a pas spécifié de rôle, on laisse passer
+    //si le user est connecté et qu'on a pas spécifié de rôle, on laisse passer
+    return true;
   }
-  return false; //si le user n'est pas connecté quand on utilise le décorateur, on bloque
+  //si le user n'est pas connecté quand on utilise le décorateur, on bloque
+  return false;
 };
 ```
 
@@ -1325,8 +1328,28 @@ Dans notre projet, MUI est utilisé pour structurer et styliser diverses section
 // login.tsx
 
 return (
-  <Box sx={{ maxWidth: 500, mx: 'auto', mt: 4, p: 2, border: '1px solid #ccc', borderRadius: 2, backgroundColor:'white' }}>
+  <Box sx=
-    <Typography variant="h4" style={{color:'black', textAlign:'center', marginBottom:'2rem'}}>Se connecter à votre compte</Typography>
+    {{
+      maxWidth: 500,
+      mx: 'auto',
+      mt: 4,
+      p: 2,
+      border: '1px solid #ccc',
+      borderRadius: 2,
+      backgroundColor:'white'
+    }}
+  >
+    <Typography
+      variant="h4"
+      style=
+        {{
+          color:'black',
+          textAlign:'center',
+          marginBottom:'2rem'
+        }}
+      >
+      Se connecter à votre compte
+    </Typography>
     <form onSubmit={handleSubmit}>
       <TextField
         type="email"
@@ -1348,14 +1371,53 @@ return (
         fullWidth
         margin="normal"
       />
-      <Button type="submit" variant="contained" color="primary" disabled={loading} fullWidth style={{marginBottom:'2rem'}}>
+      <Button 
+        type="submit"
+        variant="contained"
+        color="primary"
+        disabled={loading}
+        fullWidth style={{marginBottom:'2rem'}}
+      >
         {loading ? 'Submitting...' : 'Login'}
       </Button>
-      {error && <Typography style={{color:'red', textAlign:'center'}}>Aucun compte associé à cet email</Typography>}
+      {error && 
+      <Typography 
+        style={{color:'red',
+        textAlign:'center'}}
+      >
+      Aucun compte associé à cet email
+      </Typography>}
     </form>
-    <Typography onClick={showRegister} style={{color:'black', textAlign:'center', cursor: 'pointer'}}>Vous ne possédez pas de compte ? Inscrivez-vous</Typography>
+    <Typography
-    {data && data.login.success && <Typography style={{color:'green', textAlign:'center'}}>Success! {data.login.message}</Typography>}
+      onClick={showRegister}
-    {data && !data.login.success && <Typography style={{color:'red', textAlign:'center'}}>Mot de passe incorrect</Typography>}
+      style=
+        {{
+          color:'black',
+          textAlign:'center',
+          cursor: 'pointer'
+        }}
+      >Vous ne possédez pas de compte ? Inscrivez-vous
+    </Typography>
+    {data && data.login.success && 
+    <Typography 
+      style=
+        {{
+          color:'green',
+          textAlign:'center'
+        }}
+      >
+      Success! {data.login.message}
+    </Typography>}
+    {data && !data.login.success &&
+    <Typography
+      style=
+        {{
+          color:'red',
+          textAlign:'center'
+        }}
+      >
+      Mot de passe incorrect
+      </Typography>}
   </Box>
 );
 ```
@@ -1554,6 +1616,8 @@ describe('Test sur les matériels', () => {
 
 ----
 
+\newpage
+
 ### Tests front-end
 
 Tests front-end :
@@ -1838,7 +1902,7 @@ Ensuite, nous avons mis en place l'environnement serveur requis pour le déploie
       * services : backend, frontend, db, nginx : Le fichier docker-compose-staging.yml configure les services du back-end (Node.js), du front-end (Next), de la base de données (Postgres), ainsi que Nginx pour gérer le reverse proxy. Chacun de ces services est surveillé par Docker, avec des vérifications de santé (healthcheck) et des dépendances clairement établies entre eux.
       
       ```yml
-      // wns_student@wns-project-server:~/apps/oros/staging$ cat docker-compose-staging.yml
+      // wns_student@wns-project-server:~/apps/oros/staging$
       
       services:
         backend: