Merge branch 'master' into Max/Backend/UserControllerUpdate

backend/src/main/java/ovh/herisson/Clyde/EndPoints/MockController.java

@@ -7,12 +7,14 @@ import org.springframework.web.bind.annotation.PostMapping;
 import org.springframework.web.bind.annotation.RestController;
 import ovh.herisson.Clyde.Repositories.TokenRepository;
 import ovh.herisson.Clyde.Repositories.UserRepository;
+import ovh.herisson.Clyde.Services.TokenService;
 import ovh.herisson.Clyde.Tables.Role;
 import ovh.herisson.Clyde.Tables.Token;
 import ovh.herisson.Clyde.Tables.User;
 
 import java.util.ArrayList;
 import java.util.Arrays;
+import java.util.Calendar;
 import java.util.Date;
 
 @RestController
@@ -23,13 +25,14 @@ public class MockController {
 
     public final UserRepository userRepo;
     public final TokenRepository tokenRepo;
-
+    public final TokenService tokenService;
     ArrayList<User> mockUsers;
 
 
-    public MockController(UserRepository userRepo, TokenRepository tokenRepo){
+    public MockController(UserRepository userRepo, TokenRepository tokenRepo, TokenService tokenService){
         this.tokenRepo = tokenRepo;
         this.userRepo = userRepo;
+        this.tokenService = tokenService;
     }
 
     /** Saves an example of each user type by :
@@ -41,11 +44,10 @@ public class MockController {
     @PostMapping("/mock")
     public void postMock(){
 
-        User herobrine = new User("brine","hero","admin@admin.com","in your WalLs","ShadowsLand",new Date(0), "none",Role.Admin,passwordEncoder.encode("admin"));
-        User joe = new User("Mama","Joe","student@student.com","roundabout","DaWarudo",new Date(0), "None",Role.Student,passwordEncoder.encode("student"));
-        User meh = new User("Inspiration","lackOf","secretary@secretary.com","a Box","the street",new Date(0),"none", Role.Teacher, passwordEncoder.encode("secretary"));
-        User joke = new User("CthemBalls","Lemme","teacher@teacher.com","lab","faculty",new Date(0), "none",Role.Teacher, passwordEncoder.encode("teacher"));
-
+        User herobrine = new User("brine","hero","admin@admin.com","in your WalLs","ShadowsLand",new Date(0), null,Role.Admin,passwordEncoder.encode("admin"));
+        User joe = new User("Mama","Joe","student@student.com","roundabout","DaWarudo",new Date(0), null,Role.Student,passwordEncoder.encode("student"));
+        User meh = new User("Inspiration","lackOf","secretary@secretary.com","a Box","the street",new Date(0), null,Role.Teacher,passwordEncoder.encode("secretary"));
+        User joke = new User("CthemBalls","Lemme","teacher@teacher.com","lab","faculty",new Date(0), null,Role.Teacher,passwordEncoder.encode("teacher"));
         mockUsers = new ArrayList<User>(Arrays.asList(herobrine,joe,meh,joke));
 
         userRepo.saveAll(mockUsers);

backend/src/main/java/ovh/herisson/Clyde/JdbcConfig.java

@@ -6,8 +6,10 @@ import org.springframework.context.annotation.Bean;
 import org.springframework.context.annotation.Configuration;
 import org.springframework.context.annotation.Profile;
 import org.springframework.jdbc.datasource.DriverManagerDataSource;
+import org.springframework.scheduling.annotation.EnableScheduling;
 
 @Configuration
+@EnableScheduling
 public class JdbcConfig {
 
 	@Bean

backend/src/main/java/ovh/herisson/Clyde/Repositories/TokenRepository.java

@@ -4,10 +4,13 @@ import org.springframework.data.repository.CrudRepository;
 import ovh.herisson.Clyde.Tables.Token;
 import ovh.herisson.Clyde.Tables.User;
 
+import java.util.ArrayList;
+
 public interface TokenRepository extends CrudRepository<Token,Long> {
 
     Token getByToken(String token);
 
     Iterable<Token> getByUser(User user);
 
+    ArrayList <Token> getByUserOrderByExpirationDate(User user);
 }

backend/src/main/java/ovh/herisson/Clyde/Services/AuthenticatorService.java

@@ -1,6 +1,7 @@
 package ovh.herisson.Clyde.Services;
 
 import org.springframework.stereotype.Service;
+import ovh.herisson.Clyde.Tables.Token;
 import ovh.herisson.Clyde.Tables.User;
 
 import java.util.Date;
@@ -26,7 +27,7 @@ public class AuthenticatorService {
         if (user == null){return null;}
         if (!userService.checkPassword(user,password)){return null;}
         String token = tokenService.generateNewToken();
-        tokenService.saveToken(token,user,expirationDate);
+        tokenService.saveToken(new Token(user, token,expirationDate));
         return token;
     }
 }

backend/src/main/java/ovh/herisson/Clyde/Services/TokenService.java

@@ -1,19 +1,19 @@
 package ovh.herisson.Clyde.Services;
 
-
+import org.springframework.scheduling.annotation.Scheduled;
 import org.springframework.stereotype.Service;
 import ovh.herisson.Clyde.Repositories.TokenRepository;
 import ovh.herisson.Clyde.Tables.Token;
 import ovh.herisson.Clyde.Tables.User;
 
 import java.io.UnsupportedEncodingException;
-import java.nio.charset.StandardCharsets;
 import java.security.SecureRandom;
+import java.util.ArrayList;
+import java.util.Calendar;
 import java.util.Date;
 
 @Service
 public class TokenService {
-
     TokenRepository tokenRepo;
 
     public TokenService(TokenRepository tokenRepo){
@@ -48,7 +48,28 @@ public class TokenService {
         return tokenRep.getUser();
     }
 
-    public void saveToken(String token, User user, Date expirationDate){// todo faire qlq chose de l'expDate
-        tokenRepo.save(new Token(user,token));
+    public void saveToken(Token token){
+        //Si l'utilisateur a déja 5 token delete celui qui devait expirer le plus vite
+        ArrayList<Token> tokenList = tokenRepo.getByUserOrderByExpirationDate(token.getUser());
+        while(tokenList.size() >= 5){
+            tokenRepo.delete(tokenList.get(0));
+            tokenList.remove(tokenList.get(0));
+        }
+        tokenRepo.save(token);
     }
-}
+
+    //Tous les jours a minuit
+    @Scheduled(cron = "0 0 0 * * ?")
+    public void autoDeleteToken() {
+        for (Token t: tokenRepo.findAll()){
+            Calendar cal = Calendar.getInstance();
+
+            Calendar cal2 = Calendar.getInstance();
+            cal2.setTime(t.getExpirationDate());
+
+            if (cal.compareTo(cal2) >= 0){
+                tokenRepo.delete(t);
+            }
+        }
+    };
+}

backend/src/main/java/ovh/herisson/Clyde/Tables/InscriptionRequest.java

@@ -0,0 +1,108 @@
+package ovh.herisson.Clyde.Tables;
+
+import jakarta.persistence.*;
+
+import java.util.Date;
+
+public class InscriptionRequest {
+    @GeneratedValue(strategy = GenerationType.AUTO)
+    private int id;
+    private String firstName;
+    private String lastName;
+    private String adress;
+    private String email;
+    private String country;
+    private Date birthDate;
+
+    @ManyToOne
+    @JoinColumn(name="Cursus")
+    private Cursus cursus;
+    private RequestState state;
+    private String profilePicture;
+    public InscriptionRequest(){}
+    public InscriptionRequest(String lastName, String firstName, String adress, String email, String country, Date birthDate, RequestState state, String profilePicture){
+        this.lastName = lastName;
+        this.firstName = firstName;
+        this.adress = adress;
+        this.email = email;
+        this.country = country;
+        this.birthDate = birthDate;
+        this.state = state;
+    }
+
+    public int getId() {
+        return id;
+    }
+
+    public String getFirstName() {
+        return firstName;
+    }
+
+    public void setFirstName(String firstName) {
+        this.firstName = firstName;
+    }
+
+    public String getLastName() {
+        return lastName;
+    }
+
+    public void setLastName(String lastName) {
+        this.lastName = lastName;
+    }
+
+    public String getAdress() {
+        return adress;
+    }
+
+    public void setAdress(String adress) {
+        this.adress = adress;
+    }
+
+    public String getEmail() {
+        return email;
+    }
+
+    public void setEmail(String email) {
+        this.email = email;
+    }
+
+    public String getCountry() {
+        return country;
+    }
+
+    public void setCountry(String country) {
+        this.country = country;
+    }
+
+    public Date getBirthDate() {
+        return birthDate;
+    }
+
+    public void setBirthDate(Date birthDate) {
+        this.birthDate = birthDate;
+    }
+
+    public Cursus getCursus() {
+        return cursus;
+    }
+
+    public void setCursus(Cursus cursus) {
+        this.cursus = cursus;
+    }
+
+    public RequestState getState() {
+        return state;
+    }
+
+    public void setState(RequestState state) {
+        this.state = state;
+    }
+
+    public String getProfilePicture() {
+        return profilePicture;
+    }
+
+    public void setProfilePicture(String profilePicture) {
+        this.profilePicture = profilePicture;
+    }
+}

backend/src/main/java/ovh/herisson/Clyde/Tables/ReinscriptionRequest.java

@@ -0,0 +1,69 @@
+package ovh.herisson.Clyde.Tables;
+
+import jakarta.persistence.GeneratedValue;
+import jakarta.persistence.GenerationType;
+import jakarta.persistence.JoinColumn;
+import jakarta.persistence.ManyToOne;
+
+public class ReinscriptionRequest {
+    @GeneratedValue(strategy = GenerationType.AUTO)
+    private int id;
+
+    @ManyToOne
+    @JoinColumn(name = "User")
+    private User user;
+
+    @ManyToOne
+    @JoinColumn(name = "Cursus")
+    private Cursus newCursus;
+    private RequestState state;
+
+    //Permet de différencier les demandes de changement et une réinscription dans le même cursus
+    //Pour la réinscription on va le mettre a 0
+    private boolean type;
+
+    public ReinscriptionRequest(){}
+
+    public ReinscriptionRequest(User user, Cursus newCursus, RequestState state, boolean type){
+        this.user = user;
+        this.newCursus = newCursus;
+        this.state = state;
+        this.type = type;
+    }
+
+    public int getId() {
+        return id;
+    }
+
+    public User getUser() {
+        return user;
+    }
+
+    public void setUser(User user) {
+        this.user = user;
+    }
+
+    public Cursus getNewCursus() {
+        return newCursus;
+    }
+
+    public void setNewCursus(Cursus newCursus) {
+        this.newCursus = newCursus;
+    }
+
+    public RequestState getState() {
+        return state;
+    }
+
+    public void setState(RequestState state) {
+        this.state = state;
+    }
+
+    public boolean isType() {
+        return type;
+    }
+
+    public void setType(boolean type) {
+        this.type = type;
+    }
+}

backend/src/main/java/ovh/herisson/Clyde/Tables/RequestState.java

@@ -0,0 +1,7 @@
+package ovh.herisson.Clyde.Tables;
+
+public enum RequestState {
+    Accepted,
+    Refused,
+    Pending;
+}

backend/src/main/java/ovh/herisson/Clyde/Tables/Token.java

@@ -1,6 +1,10 @@
 package ovh.herisson.Clyde.Tables;
 
 import jakarta.persistence.*;
+import org.springframework.scheduling.annotation.Scheduled;
+import ovh.herisson.Clyde.Repositories.TokenRepository;
+
+import java.util.Date;
 
 @Entity
 public class Token {
@@ -12,13 +16,16 @@ public class Token {
     @JoinColumn(name ="Users")
     private User user;
     private String token;
+    private Date expirationDate;
 
-    public Token(User user, String token){
+    public Token(User user, String token, Date expirationDate){
         this.user = user;
         this.token = token;
+        this.expirationDate = expirationDate;
     }
 
     public Token(){}
+
     public int getId() {
         return id;
     }
@@ -37,4 +44,12 @@ public class Token {
     public void setToken(String data) {
         this.token = data;
     }
+
+    public void setExpirationDate(Date date){
+        this.expirationDate = date;
+    }
+
+    public Date getExpirationDate(){
+        return expirationDate;
+    }
 }

backend/src/main/java/ovh/herisson/Clyde/Tables/User.java

@@ -15,6 +15,7 @@ public class User {
     private Long regNo;
     private String lastName;
     private String firstName;
+    @Column(unique = true)
     private String email;
     private String address;
     private String country;

frontend/src/App.vue

@@ -7,17 +7,19 @@
   // Liste des apps
   import LoginPage from './Apps/Login.vue'
   import Inscription from "./Apps/Inscription.vue"
+  import Profil from "./Apps/Profil.vue"
 
   const apps = {
   	'/login': LoginPage,
-	'/inscription': Inscription
+	'/inscription': Inscription,
+  '/profil': Profil
   }
   const currentPath = ref(window.location.hash)
 
   window.addEventListener('hashchange', () => {
     currentPath.value = window.location.hash
   })
-  
+
   const currentView = computed(() => {
     return apps[currentPath.value.slice(1) || '/']
   })
@@ -26,9 +28,8 @@
   const notifications=ref(i18n("app.notifications"))
   const settings=ref(i18n("app.settings"))
   const login=ref(i18n("app.login"))
+  const active=ref(false)
   
-
-
 </script>
 
 <template>
@@ -37,29 +38,41 @@
     <div class="topBar">
       <ul class="horizontal">
         <li title=home>
-            <a href="#home">
+            <a class="icon" href="#home">
                 <img @click="draw" src="./assets/Clyde.png" style="width: 40px; height: auto; margin-top:4px">
             </a></li>
         <li title=home>
-            <a href="#home">
+            <a class="icon" href="#home">
                 <div class=" fa-solid fa-house" style="margin-top: 7px; margin-bottom: 3px;"></div>
             </a></li>
         <li style="float: right;" title=login>
-            <a href="#/login">
+            <a class="icon" href="#/login">
                 <div class="fa-solid fa-user"  style="margin-top: 7px; margin-bottom: 3px;"></div>
             </a></li>
         <li style="float: right;" title=notifications>
-            <a href="#Notifications">
+            <a class="icon" href="#Notifications">
                 <div class="fa-solid fa-bell"  style="margin-top: 7px; margin-bottom: 3px;"></div>
             </a></li>
-        <li style="float: right;" title=settings>
-            <a href="#Options">
+        <li @click="active=!active"  class="option"style="float: right;" title=settings>
+            <a class="icon" >
                 <div  class="fa-solid fa-gear"  style="margin-top: 7px; margin-bottom: 3px;"></div>
-            </a></li>
+                <div v-if="active" class="dropdown">
+                  <div class="dropdown-content">Langage</div>
+                  <ul style="list-style-type:none;">
+                    <li style=" margin-bottom:10px;margin-right:20px;float:left; font-size:10px; color:black;">
+                      <button @:click="setLang('en');" href="#home">EN</button>
 
-        <li style="float:right; margin-top:7.5px;" title="Language">
-            <input type="checkbox" @:click="setLang( toggle? 'fr' : 'en' )" v-model="toggle" class="theme-checkbox">
-        </li>
+                    </li>
+                    <li style="float:left;font-size:10px; color:black;"><button @:click="setLang('fr');" href="#home">FR</button></li>
+                  </ul>
+                  <div style='align-items:center;'>
+                  <a style="cursor:pointer;font-size:20px;" href="#/profil" class="dropdown-content">
+                    Manage Profile
+                  </a>
+                  </div>
+
+                </div>
+            </a></li>
       </ul>
     </div>
 
@@ -122,8 +135,37 @@
   .leftBar{
     grid-area:leftBar;
   }
+.option {
+  position: relative;
+  display: block;
+}
 
 
+.dropdown {
+  margin-top:55px;
+  width:160px;
+  display: inline-block;
+  height:110px;
+  font-size: 13px;
+  position: absolute;
+  z-index: 1;
+  background-color:white;
+}
+
+.dropdown-content { 
+  min-width: 160px;
+  text-align: center;
+  margin-bottom: 10px;
+  right:0;
+  color:rgb(50,50,50);
+  text-decoration: none;
+  font-size:24px
+}
+
+  .dropdown-content div{
+    display:block;
+  }
+
 	ul.vertical{
 		list-style-type: none;
 		margin-top: 61px;
@@ -176,7 +218,6 @@
 		position: fixed;
 		height:61px;
 		width: 100%;
-		overflow: hidden;
 		background-color: rgb(24, 24, 24);
 	}
 
@@ -187,7 +228,7 @@
 	}
 
 
-	ul.horizontal li a:hover:not(.active){
+	ul.horizontal li a.icon:hover:not(.active){
 		background-color: black;
 		border-radius:6px;
 		color:white;
@@ -221,51 +262,5 @@
 		transition-duration: .3s;
 		padding-left: 5px;
 	  }
-    .theme-checkbox {
-    --toggle-size: 16px;
-    -webkit-appearance: none;
-    -moz-appearance: none;
-    appearance: none;
-    width: 80px;
-    height: 40px;
-    background: -webkit-gradient(linear, left top, right top, color-stop(50%, #efefef), color-stop(50%, #2a2a2a)) no-repeat;
-    background: -o-linear-gradient(left, #efefef 50%, rgb(239, 60, 168) 50%) no-repeat;
-    background: linear-gradient(to right, #efefef 50%, rgb(239, 60, 168) 50%) no-repeat;
-    background-size: 205%;
-    background-position: 0;
-    -webkit-transition: 0.4s;
-    -o-transition: 0.4s;
-    transition: 0.4s;
-    border-radius: 99em;
-    position: relative;
-    cursor: pointer;
-    font-size: var(--toggle-size);
-    }
-
-    .theme-checkbox::before {
-    content: "";
-    width: 35px;
-    height: 35px;
-    position: absolute;
-    top: 2px;
-    left: 3px;
-    background: -webkit-gradient(linear, left top, right top, color-stop(50%, #efefef), color-stop(50%, #2rgb(239, 60, 168))) no-repeat;
-    background: -o-linear-gradient(left, #efefef 50%, rgb(239, 60, 168) 50%) no-repeat;
-    background: linear-gradient(to right, #efefef 50%, rgb(239, 60, 168) 50%) no-repeat;
-    background-size: 205%;
-    background-position: 100%;
-    border-radius: 50%;
-    -webkit-transition: 0.4s;
-    -o-transition: 0.4s;
-    transition: 0.4s;
-    }
-
-    .theme-checkbox:checked::before {
-    left: calc(100% - 35px - 3px);
-    background-position: 0;
-    }
-
-    .theme-checkbox:checked {
-    background-position: 100%;
-    }
+    
 </style>

frontend/src/Apps/Login.vue

@@ -27,7 +27,6 @@
 
 
 <template>
-    <div class="logBoxCenterer">
       <div class='loginBox'>
 
         <div v-if="loginPage">
@@ -121,7 +120,6 @@
           </form>
          </div>
         </div>
-      </div>
 </template>
 
 <style scoped>
@@ -142,14 +140,6 @@
   transform: translate(0px ,1px);
 }
 
-.logBoxCenterer {
-  width: 100%;
-  height:  100%;
-  display: flex;
-  align-items: center;
-  justify-content: center; 
-  overflow: hidden;
-}
 
 .loginBox {
   background-color: rgb(24,24,24);

frontend/src/Apps/Profil.vue

@@ -0,0 +1,273 @@
+<script setup>
+  import {reactive, ref} from 'vue'
+  import {getUser} from '../rest/Users.js'
+ /* 
+  const user = getUser(); 
+*/
+ const user =reactive({
+  profilPicture:"../assets/clyde.png",
+  lastName:"Ghost",
+  firstName:"Clyde",
+  role:"student",
+  address: "Radiator Springs",
+  email:"ClydeGhost@gmail.com",
+  cursus:[
+  {
+  "id": 12,
+  "name": "Math pour l'info",
+  "credits": 11,
+  "faculty": "science",
+  "teacher": 42,
+  "Assistants": []},
+  {
+  "id": 42,
+  "name": "Fonctionnement des ordinateurs",
+  "credits": 11,
+  "faculty": "science",
+  "teacher": 42,
+  "Assistants": []},
+
+  ],
+  option:"IT",
+  degree:"BAC1",
+  password:"CeciEstUnMotDePasse123",
+  })
+  
+  /*
+  Teacher user
+  const user =reactive({
+  profilPicture:"../assets/clyde.png",
+  lastName:"Ghost",
+  firstName:"Clyde",
+  role:"teacher",
+  address: "Radiator Springs",
+  email:"ClydeGhost@gmail.com",
+  coursesOwned:[
+  {  
+  "id": 12,
+  "name": "Math pour l'info",
+  "faculty": "science",
+  "teacher": 42,
+  "Assistants": []},
+  { 
+  "id": 42,
+  "name": "Fonctionnement des ordinateurs",
+  "credits": 11,
+  "faculty": "science",
+  "teacher": 42,
+  "Assistants": []},
+
+  ],
+  faculty:"Science",
+  })*/
+
+const modif = ref(false);
+
+const toModify = Object.assign({}, user);
+
+</script>
+
+
+
+<template>
+  <div class="body">
+  <div class="container">
+    <div class="profilPic">
+      <img class="subContainter" src="../assets/Clyde.png">
+    </div>
+      <div class="globalInfos">
+        <div v-if="modif==false" class="infosContainer" >
+          <div>
+            {{user.firstName}} {{user.lastName.toUpperCase()}}   
+          </div>
+          <div>
+            E-mail: {{user.email}}      
+          </div>
+          <div v-if="user.role==='student'">
+            {{user.option}} {{user.role.toUpperCase()}} 
+          </div>
+          <div v-else>
+            Faculty: {{user.faculty}} 
+            Role: {{user.role}}
+          </div>
+          <div>
+            <button @click="modif=!modif"> Modifier données personnelles </button>
+          </div>
+          <div v-if="(user.role==='student')">
+            <button>Réinscription</button>
+            <button style="float:right;background-color:rgb(150,0,0);">Désinscription</button>
+          </div>
+        </div>
+        <div v-else class="infosContainer">
+          <div>
+            Profil Picture
+            <input type="file">
+          </div>
+          <div>
+            E-mail:  
+            <input type="mail" v-model="toModify.email" />
+          </div>
+          <div>
+            Address:
+            <input type="text" v-model="toModify.address">
+          </div>
+          <div>
+            Password
+            <input type="password" v-model="toModify.password">
+          </div>
+          <div>
+            Confirm Password
+            <input type="password" id="confirm">
+          </div>
+          <div>
+            <button @click=" modif=!modif">Confirm</button>
+          </div>
+        </div>
+      </div>
+      <div v-if="modif==false"class="moreInfos">
+
+        <div v-if="(user.role==='student')">
+          <div class="listTitle">
+           Liste des cours
+          </div>
+        <div  class="listElement "
+          v-for="item in user.cursus">
+          <div class=" containerElement">
+            <div class="name"> {{item.name}} </div>
+            <div class="teacher">{{item.teacher}}</div> 
+            <div class="credits">Credits:{{item.credits}}</div>  
+          </div>
+          </div>
+        </div>
+        
+        <div>
+        </div>
+    
+      <div v-if="(user.role==='teacher')">
+          <div class="listTitle">
+           Liste des cours
+          </div>
+          <div class="listElement " v-for="item in user.coursesOwned">
+          {{item.name}}       
+          </div>
+        </div>
+        
+        <div>
+        </div>
+        
+      </div>
+  </div>
+</div>
+</template>
+<style scoped>
+
+.container{
+  
+  display:grid;
+  grid-template-columns:200px 900px;
+  grid-template-rows:200px auto;
+  column-gap:30px;
+  row-gap:25px;
+  grid-template-areas:
+  "profilPic globalInfos"
+  "minfos minfos";
+}
+
+.profilPic{
+  grid-area:profilPic;
+}
+
+.globalInfos {
+  grid-area:globalInfos;
+  align-self :center;
+
+}
+
+.subContainter{
+  width:100%;
+  background-color:rgb(50,50,50);
+  border-radius:20px;
+  border:4px solid black;
+}
+
+.moreInfos {
+  grid-area:minfos;
+}
+.body {
+    width:100%;
+    margin-bottom:10px;
+  }
+ .containerElement{ 
+   justify-content:center;
+    display:grid;
+    grid-template-columns:350px 350px 200px;
+    grid-template-areas:
+    "name teacher credits"; 
+    column-gap:10px;
+    
+  }
+  
+  .name {
+    grid-area:name;
+    align-self:center;
+  }
+
+  .teacher{
+    grid-area:teacher;
+    align-self:center;
+  }
+
+  .credits{
+    grid-area:credits;
+    align-self:center;
+  }
+
+.listTitle{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width:200px;
+    margin-left:auto;
+    margin-right:auto;
+    border:2px solid black;
+    font-size:25px;
+    color:white;
+    padding:20px;
+    background-color:rgb(50,50,50);
+    border-radius:20px;margin-bottom:10px;
+}
+
+.listElement{
+  border:2px solid black;
+  font-size:25px;
+  color:white;
+  padding:20px;
+  background-color:rgb(50,50,50);
+  border-radius:20px;
+  margin-bottom:10px;
+}
+
+.infosContainer {
+padding-bottom:50px;
+border:2px solid black;
+font-size:25px;
+color:white;
+padding:20px;
+background-color:rgb(50,50,50);
+border-radius:20px;
+}
+
+
+button{
+  border:none;
+  background-color:rgb(239, 60, 168);
+  border-radius:10px;
+  height:35px;
+  margin-top:10px;
+
+}
+
+button:hover{
+  opacity:0.8;
+}
+</style>