Adding the discussion architectures and creating new discussions

Reviewed-on: PGL/Clyde#148
Reviewed-by: Wal <karpinskiwal@gmail.com>
Reviewed-by: Maxime <231026@umons.ac.be>

backend/build.gradle.kts

@@ -16,6 +16,8 @@ repositories {
 }
 
 dependencies {
+	compileOnly("org.projectlombok:lombok")
+	annotationProcessor("org.projectlombok:lombok")
 	implementation("org.springframework.boot:spring-boot-starter-jdbc")
 	implementation("org.springframework.boot:spring-boot-starter-data-jpa")
 	implementation("org.springframework.boot:spring-boot-starter-mail")

backend/src/main/java/ovh/herisson/Clyde/EndPoints/Msg/MessagesController.java

@@ -0,0 +1,49 @@
+package ovh.herisson.Clyde.EndPoints.Msg;
+
+import org.springframework.http.HttpStatus;
+import org.springframework.http.ResponseEntity;
+import org.springframework.web.bind.annotation.CrossOrigin;
+import org.springframework.web.bind.annotation.GetMapping;
+import org.springframework.web.bind.annotation.PathVariable;
+import org.springframework.web.bind.annotation.PostMapping;
+import org.springframework.web.bind.annotation.RequestBody;
+import org.springframework.web.bind.annotation.RequestHeader;
+import org.springframework.web.bind.annotation.RestController;
+
+import lombok.AllArgsConstructor;
+import ovh.herisson.Clyde.Responses.UnauthorizedResponse;
+import ovh.herisson.Clyde.Services.AuthenticatorService;
+import ovh.herisson.Clyde.Services.Msg.DiscussionService;
+import ovh.herisson.Clyde.Tables.User;
+import ovh.herisson.Clyde.Tables.Msg.Discussion;
+
+@RestController
+@CrossOrigin(originPatterns = "*", allowCredentials = "true")
+@AllArgsConstructor
+public class MessagesController {
+
+	private AuthenticatorService authServ;
+	private DiscussionService discServ;
+
+	@GetMapping("/discussions")
+	public ResponseEntity<Iterable<Discussion>> getDiscussions(@RequestHeader("Authorization") String token ){
+		User user = authServ.getUserFromToken(token);
+		if(user == null){
+			return new UnauthorizedResponse<>(null);
+		}
+
+		Iterable<Discussion> mock = discServ.getOwned(authServ.getUserFromToken(token));
+
+		return new ResponseEntity<>(mock, HttpStatus.OK); 
+	} 
+
+	@GetMapping("/discussion/{id}")
+	public ResponseEntity<Discussion> getDiscussion(@RequestHeader("Authorization") String token, @PathVariable long id){
+		return null; // TODO
+	} 
+
+	@PostMapping("/discussion")
+	public ResponseEntity<Discussion> createDiscussion(@RequestHeader("Authorization") String token, @RequestBody Discussion data){
+		return new ResponseEntity<>(discServ.create(data.getName(), authServ.getUserFromToken(token)), HttpStatus.OK);
+	}
+}

backend/src/main/java/ovh/herisson/Clyde/Repositories/Msg/DiscussionRepository.java

@@ -0,0 +1,14 @@
+package ovh.herisson.Clyde.Repositories.Msg;
+
+import java.util.List;
+
+import org.springframework.data.jpa.repository.Query;
+import org.springframework.data.repository.CrudRepository;
+
+import ovh.herisson.Clyde.Tables.Msg.Discussion;
+
+public interface DiscussionRepository extends CrudRepository<Discussion, Long>{
+
+	@Query("SELECT d FROM Discussion d INNER JOIN FETCH d.members dm WHERE dm.id = ?1")
+	List<Discussion> findByMembership(long userid);
+}

backend/src/main/java/ovh/herisson/Clyde/Services/Msg/DiscussionService.java

@@ -0,0 +1,24 @@
+package ovh.herisson.Clyde.Services.Msg;
+
+import org.springframework.stereotype.Service;
+
+import lombok.AllArgsConstructor;
+import ovh.herisson.Clyde.Repositories.Msg.DiscussionRepository;
+import ovh.herisson.Clyde.Tables.User;
+import ovh.herisson.Clyde.Tables.Msg.Discussion;
+
+@Service
+@AllArgsConstructor
+public class DiscussionService {
+
+	private DiscussionRepository discRepo;
+
+	public Discussion create(String name, User author){
+		return discRepo.save(new Discussion(name, author));
+	}
+
+	public Iterable<Discussion> getOwned(User author){
+		return discRepo.findByMembership(author.getRegNo());
+	}
+
+}

backend/src/main/java/ovh/herisson/Clyde/Tables/Msg/Discussion.java

@@ -0,0 +1,44 @@
+package ovh.herisson.Clyde.Tables.Msg;
+
+import java.util.List;
+
+import jakarta.persistence.Entity;
+import jakarta.persistence.GeneratedValue;
+import jakarta.persistence.GenerationType;
+import jakarta.persistence.Id;
+import jakarta.persistence.JoinColumn;
+import jakarta.persistence.JoinTable;
+import jakarta.persistence.ManyToMany;
+import lombok.Getter;
+import lombok.NoArgsConstructor;
+import lombok.Setter;
+import ovh.herisson.Clyde.Tables.User;
+
+@Entity
+@Getter
+@Setter
+@NoArgsConstructor
+public class Discussion{
+
+	@Id
+    @GeneratedValue(strategy = GenerationType.AUTO)
+	private long id;
+	private String name;
+
+    @ManyToMany
+	@JoinTable(
+		name = "discussion_members",
+		joinColumns = @JoinColumn(name = "discussion_id"),
+		inverseJoinColumns = @JoinColumn(name = "user_id")
+	)
+	private List<User> members;
+
+	public Discussion(String name){
+		this.name = name;
+	}
+
+	public Discussion(String name, User user){
+		this.name = name;
+		this.members = List.of(user);
+	}
+}

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

@@ -1,7 +1,10 @@
 package ovh.herisson.Clyde.Tables;
 
 import jakarta.persistence.*;
+import ovh.herisson.Clyde.Tables.Msg.Discussion;
+
 import java.util.Date;
+import java.util.List;
 
 
 @Entity
@@ -20,6 +23,10 @@ public class User {
     private String profilePictureUrl;
     private ovh.herisson.Clyde.Tables.Role role;
     private String password;
+
+	@ManyToMany( mappedBy = "members" )
+	private List<Discussion> discussions;
+
     public User(String lastName, String firstName, String email, String address,
                 String country, Date birthDate, String profilePictureUrl, Role role, String password)
     {

frontend/src/App.vue

@@ -52,7 +52,7 @@ window.addEventListener('hashchange', () => {
             <a class="icon" href="#Notifications">
                 <div class="fa-solid fa-bell"  style="margin-top: 7px; margin-bottom: 3px;"></div>
             </a></li>
-        <li @click="active=!active"  class="option"style="float: right;" title=settings>
+        <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>
                 <div v-if="active" class="dropdown">
@@ -86,12 +86,9 @@ window.addEventListener('hashchange', () => {
     </ul>
     </div>
     <div class="page">
-      <div style=" margin:50px;">
         <Suspense>
-        
+				<component :is="currentView" />
-		<component :is="currentView" />
         </Suspense>
-      </div>
     </div>
   </div>
 </template>
@@ -99,6 +96,8 @@ window.addEventListener('hashchange', () => {
 <style scoped>
   
   .container{
+			height: 100%;
+			width: 100%;
     display:grid;
     grid-template-columns:[firstCol-start]70px[firstCol-end secondCol-start]auto[endCol];
     grid-template-rows:[firstRow-start]61px[firstRow-end secondRow-start] auto [endRow];
@@ -111,6 +110,8 @@ window.addEventListener('hashchange', () => {
 
   .page {
     grid-area:page;
+		height: 100%;
+		width: 100%;
     place-self:center;
   }
 

frontend/src/Apps/Inscription.vue

@@ -16,10 +16,9 @@
 
 
 <template> 
-  <div  v-for="item of requests">
+  <div style='display:flex; justify-content:center; min-width:1140px;' v-for="item of requests">
   <div class="bodu" v-if="item.state === 'Pending'">
   <div class="container">
- 
     <div class="id"><a>{{item.id}}</a></div>
     <div class="surname"><a>{{item.lastName}}</a></div>
     <div class="firstname"><a>{{item.firstName}}</a></div>
@@ -37,10 +36,9 @@
     height:100px;
     font-size:20px;
     display:grid;
-    grid-template-columns:[firstCol-start]100px[firstCol-end secondCol-start]150px[secondCol-end thirdCol-start]200px[thirdCol-end fourthCol-start]150px[fourthCol-end]150px[fifthCol-end]150px[sixthCol-end]150px[endCol];
+    grid-template-columns:10% 14.2% 19% 14.2% 14.2% 14.2% 14.2%;
     grid-template-areas:
     "id type surname firstname infos accept refuse"; 
-    column-gap:10px;
     
   }
   
@@ -99,9 +97,9 @@
 
   }
 
-  .bodu {
+ .bodu {
-    width:100%;
+    margin-top:2%;
-    margin-bottom:10px;
+    width:66%;
     border:2px solid black;
     border-radius:9px;
     background-color:rgb(50,50,50);

frontend/src/Apps/Login.vue

@@ -56,10 +56,10 @@
 
 
 <template>
-      <div class='loginBox'>
+    <div class="setup">
-
         <div v-if="loginPage">
-          <form @submit.prevent=" login(outputs.email,outputs.password);goBackHome();"class="form">
+      <div class='loginBox' style="margin-top:30%;">
+          <form @submit.prevent="login(outputs.email,outputs.password);goBackHome();"class="form">
             <h1 style="color:rgb(239,60,168); font-family: sans-serif;">
               {{i18n("login.guest.signin")}}
             </h1>
@@ -74,14 +74,15 @@
             <div class="register">
               <a @click="loginPage=!loginPage">{{i18n("login.guest.register")}}</a>
             </div>
-            <div class="inputBox">
+            <div class="inputBox" style="margin-bottom:35px;">
               <input type="submit" v-model="submitValue">
             </div>
           </form>
         </div>
-
+      </div>
         <div v-else>
-          <form class="form">
+          <div class='loginBox' style="margin-top:30%; margin-bottom:50%;">
+            <form class="form">
             <h1 style="color:rgb(239,60,168); font-family: sans-serif; text-align:center;">
               {{i18n("login.guest.welcome")}}
             </h1>
@@ -128,9 +129,12 @@
                 <p>{{i18n("login.guest.country")}}</p>
                 <input type="text" v-model="outputs.country">
               </div>
-              <form novalidate enctype="multipart/form-data" class="inputBox">
+              <form class="inputBox"novalidate enctype="multipart/form-data">
               	<p>{{i18n("profile.picture").toUpperCase()}}</p>
-				<input type="file" :disabled="imageSaved" @change="ppData = uploadProfilePicture($event.target.files); imageSaved = true;" accept="image/*">
+              <label class="browser">
+                Parcourir . . .
+				        <input  type="file" :disabled="imageSaved" @change="ppData = uploadProfilePicture($event.target.files); imageSaved = true;" accept="image/*">
+              </label>
               </form>
               <div class="inputBox">
                 <p>{{i18n("Curriculum").toUpperCase()}}</p> 
@@ -153,35 +157,26 @@
             </div>
           </form>
          </div>
-        </div>
+    </div>
+  </div>
 </template>
 
 <style scoped>
-.Home{
-  position:absolute;
- 	display: flex;
-  z-index: 100;
-	padding: 8px 16px;
-	color:rgb(255, 255, 255);
-	text-decoration: none;
-}
 
-.Home:hover{
+.setup {
-  width:40px;
+  margin-left: auto;
-  background-color: black;
+  margin-right:auto;
-	border-radius:6px;
+  min-width:400px;
-	color:white;
-  transform: translate(0px ,1px);
-}
 
+  width:25%;
+  height:60%;
+}
 
 .loginBox {
   background-color: rgb(24,24,24);
-  width: 400px;
   display:flex;
   justify-content: center;
-  padding: 40px;
+  border-radius: 5%;
-  border-radius: 20px;
   box-shadow:0 5px 25px #000000;
   
 }
@@ -190,9 +185,8 @@
   width:100%;
   display: flex;
   flex-direction: column;
-  justify-content: center;
   align-items:center;
-  gap: 15px;
+  gap: 3%;
 }
 
 
@@ -200,12 +194,12 @@
   
   width:100%;
   border: none;
-  margin-right: 50px;
+  margin-right: 12.5%;
-  padding-left: 10px;
+  padding-left: 2.5%;
-  padding-top:10px;
+  padding-top:2.5%;
-  padding-bottom:10px;
+  padding-bottom:2.5%;
   outline:none;
-  border-radius: 4px;
+  border-radius: 10px;
   font-size:1.35em;
 }
 
@@ -220,8 +214,9 @@
 
 .register{
   color:rgb(239,60,168);
-  width: 100%;
+  width:70%;
-  display:flex;
+  margin-bottom:20px;
+  margin-top:20px;
   cursor: pointer;
 }
 
@@ -250,6 +245,21 @@ input[type=submit],button,select{
 
 }
 
+input[type=file]{
+  display:none;
+}
+
+.browser{
+  display:inline-block;
+  cursor:pointer;
+  border-radius:20px;
+  background-color:rgb(239,60,168);
+  padding:5%;
+  font-size:1.35em;
+  font-family:sans-serif;
+  background:#FFFFFF;
+}
+
 button:active ,.switchpage:active{
   opacity:0.8;
 

frontend/src/Apps/ManageCourses.vue

@@ -105,7 +105,8 @@
       </button>
     </div>
     <div v-if="createMod">
-      <form class="listElement">
+      <form class="listElement" style="width:40%;margin-right:auto;margin-left:auto;">
+        
         <div style="margin-bottom:20px;">
          {{i18n("name")}} : 
         <input v-model="toAdd.title">
@@ -125,7 +126,7 @@
       </form>
     </div>
     <div v-if="deleteMod">
-      <form class="listElement">
+      <form class="listElement" style="width:40%;margin-right:auto;margin-left:auto;">
         <div style="margin-bottom:20px;">
           {{i18n("courses.toDelete")}} :
          <select style="max-width:200px;" class="teacher" v-model="toRemove">
@@ -138,7 +139,7 @@
       </form>
     </div>
 
-    <div v-if="!createMod && !deleteMod" v-for="item in curriculum" :key="item.title">
+    <div v-if="!createMod && !deleteMod" v-for="item in curriculum" :key="item.title" style="width:50%;margin-left:auto; margin-right:auto;">
       <div  v-if="editElementID !== item.title" style ="padding:15px 15px 15px 15px;">
         <button   @click="editElementID = item.title; setModify(item); ">
         {{i18n("courses.modify")}}
@@ -149,6 +150,7 @@
         <button @click="editElementID= '';"> {{i18n("courses.back")}} </button>
       </div>
       <div  class="listElement" >
+
       <div class="containerElement" v-if="editElementID !== item.title" >
 
         <div class="name"> {{item.title}} </div>
@@ -172,17 +174,27 @@
 <style scoped>
 .body {
     width:100%;
-    margin-bottom:10px;
+    margin-top:3.5%;
   }
+
+.infosContainer {
+  min-width:350px;
+  padding-bottom:50px;
+  border:2px solid black;
+  font-size:25px;
+  color:white;
+  padding:20px;
+  background-color:rgb(50,50,50);
+  border-radius:20px;
+}
+
  .containerElement{ 
-   justify-content:center;
+    justify-content:center;
     display:grid;
-    grid-template-columns:350px 350px 200px;
+    grid-template-columns:38.8% 38.8% 22.4%;
     grid-template-areas:
     "name teacher credits"; 
-    column-gap:10px;
+    column-gap:10px;  }
-    
-  }
   
   .name {
     grid-area:name;
@@ -200,6 +212,7 @@
   }
 
 .listElement{
+ min-width:625px;
   border:2px solid black;
   font-size:25px;
   color:white;
@@ -207,6 +220,7 @@
   background-color:rgb(50,50,50);
   border-radius:20px;
   margin-bottom:10px;
+
 }
 
 .modify{
@@ -255,10 +269,11 @@
   }
 
   .listTitle{
+    min-width:380px;
     display: flex;
     justify-content: center;
     align-items: center;
-    width:400px;
+    width:25%;
     margin-left:auto;
     margin-right:auto;
     border:2px solid black;
@@ -266,7 +281,8 @@
     color:white;
     padding:20px;
     background-color:rgb(50,50,50);
-    border-radius:20px;margin-bottom:10px;
+    border-radius:20px;
+    margin-bottom:10px;
 
     button:hover{
       opacity:0.8;

frontend/src/Apps/Msg.vue

@@ -0,0 +1,145 @@
+<!----------------------------------------------------
+	File:  Msg.vue
+	Author: Anthony Debucquoy
+	Scope: Extension messagerie
+	Description: Main msg page
+----------------------------------------------------->
+
+<script setup>
+	import { ref, reactive } from 'vue'
+	import { getDiscussions, currentDiscussion, fetchDiscussion, createDiscussion } from '@/rest/msg.js'
+
+	const discussionsList = ref(await getDiscussions());
+
+</script>
+
+<template>
+	<div id="msg">
+		<div id="discList">
+			<div @click="fetchDiscussion(discussion.id)" class="discItem" v-for="discussion in discussionsList" :key="discussion.id">{{ discussion.name }}</div>
+			<button id="createDiscussion" @click="createDiscussion('New Discussion'); getDiscussions().then(e => { discussionsList = e; })">+</button>
+		</div>
+		<div id="discussion">
+			<h1 id=msgName >{{currentDiscussion.name}}</h1>
+			<div id=msgs>
+				<div class="msg" v-for="msg in currentDiscussion.msgs" :sender="msg.sender" :key="msg.id">
+					{{ msg.text }}
+				</div>
+			</div>
+			<div id=messageBox>
+				<input type="text" name="messageBox" value="">
+				<input type="submit" name="" id="" value="send">
+			</div>
+		</div>
+	</div>
+</template>
+
+<style scoped>
+
+div#msg{
+	position: relative;
+	width: 100%;
+	height: 100%;
+
+	display: grid;
+	grid-template-columns: 20% auto;
+}
+
+div#discList{
+	margin: 30px 0 30px 30px;
+	background-color: rgba(255, 255, 255, 0.05);
+	border-radius: 10px;
+	overflow: hidden;
+	padding: 10px;
+	display: flex;
+	flex-direction: column;
+
+}
+
+.discItem{
+	color: darkorange;
+	display: flex;
+	font-family: sans-serif;
+	font-weight: bold;
+	height: 4vh;
+	margin: 5px;
+	border-radius: 0 30px 30px 0;
+	align-items: center;
+	justify-content: center;
+	border: 1px solid darkorange;
+}
+
+#createDiscussion{
+	height: 4vh;
+	margin: 5px;
+	color: white;
+	background-color: green;
+	border-radius: 0 30px 30px 0;
+	border: none;
+	font-weight: 900;
+	font-size: 2em;
+}
+
+div#discussion{
+	display: flex;
+	flex-direction: column;
+	margin: 30px;
+	background-color: rgba(255, 255, 255, 0.05);
+	border-radius: 10px;
+}
+
+#msgName{
+	text-align: center;
+	display: block;
+	background-color: #0202f755;
+	border-radius: 5px;
+	color: white;
+	width: 75%;
+	margin: 30px auto;
+}
+
+.discItem:hover{
+	background-color: gray;
+}
+
+#msgs{
+	display: flex;
+	flex-grow: 1;
+	flex-direction: column;
+}
+
+.msg {
+	background-color: aliceblue;
+	font-family: sans-serif;
+	margin: 10px;
+	padding: 5px;
+	border-radius: 3px;
+	max-width: 50%;
+	align-self: start;
+}
+
+.msg[sender=true]{
+	background-color: darkorange;
+	align-self: end;
+}
+
+#messageBox{
+	display: flex;
+	margin: 10px;
+	border-radius: 5px;
+}
+
+#messageBox input[type="text"]{
+	align-self: end;
+	flex-grow: 1;
+}
+
+#messageBox input[type="submit"]{
+	position: absolute;
+	right: 50px;
+	margin: 2px;
+	border: none;
+	padding: 0 10px;
+}
+
+</style>

frontend/src/Apps/Profil.vue

@@ -210,11 +210,11 @@
 <style scoped>
 
 .container{
-  
+  min-width:675px;
   display:grid;
-  grid-template-columns:200px 900px;
+  grid-template-columns:10vw 50vw;
   grid-template-rows:200px auto;
-  column-gap:30px;
+  column-gap:2.7%;
   row-gap:45px;
   grid-template-areas:
   "profilPic globalInfos"
@@ -222,6 +222,7 @@
 }
 
 .profilPic{
+  width:100%;
   grid-area:profilPic;
 }
 
@@ -242,13 +243,17 @@
   grid-area:minfos;
 }
 .body {
+    min-width:960px;
     width:100%;
-    margin-bottom:10px;
+    display:flex;
+    align-items:center;
+    justify-content:center;
+    margin-top:5%;
   }
  .containerElement{ 
    justify-content:center;
     display:grid;
-    grid-template-columns:350px 350px 200px;
+    grid-template-columns:38.8% 38.8% 22.4%;
     grid-template-areas:
     "name teacher credits"; 
     column-gap:10px;
@@ -271,10 +276,11 @@
   }
 
 .listTitle{
+    min-width:197px;
     display: flex;
     justify-content: center;
     align-items: center;
-    width:200px;
+    width:8vw;
     margin-left:auto;
     margin-right:auto;
     border:2px solid black;
@@ -286,6 +292,7 @@
 }
 
 .listElement{
+  min-width:625px;
   border:2px solid black;
   font-size:25px;
   color:white;
@@ -296,6 +303,7 @@
 }
 
 .infosContainer {
+min-width:350px;
 padding-bottom:50px;
 border:2px solid black;
 font-size:25px;

frontend/src/Apps/StudentsList.vue

@@ -5,8 +5,8 @@
 
   const users = await getStudents();
 </script> 
-<template>
+<template style="margin-top:5%;">
-  <div v-for="item in users">
+  <div style="display:flex; justify-content:center; " v-for="item in users">
     <div class="bodu">
       <div class="container">
         <div class="status"><a style="margin-left:30px">{{item.status}}</a></div>
@@ -25,10 +25,9 @@
     height:100px;
     font-size:30px;
     display:grid;
-    grid-template-columns:250px 250px 250px 250px 150px;
+    grid-template-columns:21.7% 21.7% 21.7% 21.7% 13.1%;
     grid-template-areas:
     "status option surname firstname infos"; 
-    column-gap:10px;
     
   }
   
@@ -42,21 +41,6 @@
     align-self:center;
   }
 
-  .refuse{
-    grid-area:refuse;
-    align-self:center;
-  }
-
-  .titles {
-    grid-area:titles;
-    background-color:rgb(215,215,215);
-  }
-  .id{
-    grid-area:id;
-    margin-left:40px;
-    align-self:center;
-  }
-
   .status{
     grid-area:status;
     align-self:center;
@@ -81,15 +65,15 @@
   button{
     font-size:15px;
      height:50px;
-     width:100px;
+     width:75%;
     border:none;
     border-radius:20px;
 
   }
 
   .bodu {
-    width:100%;
+    margin-top:2%;
-    margin-bottom:10px;
+    width:66%;
     border:2px solid black;
     border-radius:9px;
     background-color:rgb(50,50,50);

frontend/src/Apps/UsersList.vue

@@ -7,8 +7,8 @@
   const users = await getAllUsers();
   
 </script> 
-<template>
+<template style="margin-top:5%;">
-  <div v-for="item in users">
+  <div style="display:flex; justify-content:center; min-width:1140px;" v-for="item in users">
     <div class="bodu">
       <div class="container">
         <div class="role"><a style="margin-left:30px">{{i18n(item.role)}}</a></div>
@@ -22,23 +22,20 @@
 
 <style scoped>
   .container{
-    justify-content:center;
-    align-items:center;
     color:white;
     height:100px;
     font-size:30px;
     display:grid;
-    grid-template-columns:250px 250px 250px 150px;
+    grid-template-columns:27.7% 27.7% 27.7% 16.9%;
     grid-template-areas:
     "role surname firstname infos"; 
-    column-gap:10px;
 
   }
   
   .infos {
 
     grid-area:infos;
-    align-items:center;
+    align-self:center;
   }
 
   .role {
@@ -67,20 +64,18 @@
   button{
     font-size:15px;
      height:50px;
-     width:100px;
+     width:75%;
     border:none;
     border-radius:20px;
 
   }
 
   .bodu {
-    width:100%;
+    margin-top:2%;
-    margin-bottom:10px;
+    width:66%;
     border:2px solid black;
     border-radius:9px;
     background-color:rgb(50,50,50);
   }
-
-
 </style>
 

frontend/src/assets/main.css

@@ -1,4 +1,11 @@
 body {
    background-color: rgb(53, 25, 60);
    margin:0;
+   width: 100vw;
+   height: 100vh;
+}
+
+#app {
+   width: 100%;
+   height: 100%;
 }

frontend/src/rest/apps.js

@@ -9,6 +9,7 @@ import Profil from "@/Apps/Profil.vue"
 import Courses from "@/Apps/ManageCourses.vue"
 import Users from "@/Apps/UsersList.vue"
 import Students from "@/Apps/StudentsList.vue"
+import Msg from "@/Apps/Msg.vue"
 
 const apps = {
 		'/login': LoginPage,
@@ -17,6 +18,7 @@ const apps = {
 		'/manage-courses' : Courses,
 		'/users-list' : Users,
 		'/students-list' : Students,
+		'/msg' : Msg,
 }
 
 const appsList = {

frontend/src/rest/msg.js

@@ -0,0 +1,82 @@
+/*******************************************************
+ * File: msg.js
+ * Author: Anthony Debucquoy
+ * Scope: Extension messagerie
+ * Description: Messages frontend api consumer
+ *******************************************************/
+
+import { restGet, restPost } from './restConsumer.js'
+import { ref } from 'vue'
+
+export const currentDiscussion = ref({});
+
+/**
+ * @return array of
+ * - id
+ * - name
+ * - members
+ */
+export async function getDiscussions(){
+	return restGet("/discussions");
+}
+
+export async function fetchDiscussion(id){
+	currentDiscussion.value = {
+		id: id, 
+		name: "Discussion#2",
+		msgs: [
+			{
+				id: 1,
+				author: 1,
+				sender: true,
+				attachment: null,
+				text: "Hello world!"
+			},
+			{
+				id: 2,
+				author: 2,
+				sender: false,
+				attachment: null,
+				text: "Hello What?"
+			},
+			{
+				id: 3,
+				author: 2,
+				sender: false,
+				attachment: null,
+				text: "You morron"
+			},
+			{
+				id: 4,
+				author: 1,
+				sender: true,
+				attachment: null,
+				text: "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet."
+			},
+			// {
+			// 	id: 5,
+			// 	author: 1,
+			// 	sender: true,
+			// 	attachment: null,
+			// 	text: "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet."
+			// },
+			{
+				id: 6,
+				author: 2,
+				sender: false,
+				attachment: null,
+				text: "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet."
+			}
+		]
+	}
+	// currentDiscussion.value = restGet("/discussion/" + id);
+}
+
+export async function createDiscussion(name){
+	restPost("/discussion", {name: name});
+}
+
+
+export async function invite(id, regNo){
+	restPost("/discussion/"+ id+ "/invite", {user: regNo});
+}