Requests setup

frontend/src/App.vue

@@ -3,7 +3,10 @@
 	import { toast } from 'vue3-toastify';
 	import { ref } from 'vue'
   import i18n from './i18n.js'
-	const test = ref();
+  import Inscription from "./Inscription.vue"
+
+
+  const test = ref();
 
 	async function draw(e) {
 		test.value = (await fetch("http://localhost:8080/ping"));
@@ -11,6 +14,8 @@
 		toast(test.value['txt']);
 	}
 
+   
+
 
 </script>
 
@@ -66,11 +71,16 @@
         <li ><a href="#Forum">
             <div class="fa-solid fa-envelope" style="font-size: 40px;" ></div>
             <div class="text">Forum</div></a></li>
+        <li><a href="#Inscription">
+            <div class="fa-solid fa-users" style="font-size: 40px;"></div>
+            <div class="text">Inscription Requests</div></a></li>
     </ul>
 
     </div>
     <div class="page">
-      <div style="background-color: rgb(239,50,168); margin:50px;">Il FAUDRA INSERER LA PAGE ICI</div>
+      <div style=" margin:50px;">
+        <Inscription></Inscription>
+      </div>
     </div>
   </div>
 </template>

frontend/src/Inscription.vue

@@ -1,2 +1,32 @@
+<script setup>
+  import Req from "./Request.vue"
+  const requests_example = [ {
+  id:0,
+  type:"Inscription",
+  lastName:"DoefenschmirtzLEMAGNIFIQUE",
+  firstName:"Jhon",
+  address: "Radiator Springs",
+  country: "USA",
+  birthdate:"2004-02-02",
+  email:"JohnDoe@gmail.com",
+  cursus:"IT",
+  degree:"BAC1",
+  },
+  {
+  id:1,
+  type:"ReInscription",
+  lastName:"Doe",
+  firstName:"Jane",
+  address: "Radiator Springs",
+  country: "USA",
+  birthdate:"2004-03-03",
+  email:"JaneDoe@gmail.com",
+  cursus:"Psychology",
+  degree:"BAC1",
+}]
+</script>
+
 <template>
+  <Req v-for="item of requests_example" v-bind="item">
+      </Req>
 </template>

frontend/src/Login.vue

@@ -10,12 +10,13 @@
   const surname=ref("")
   const firstname=ref("")
   const passwordOUT=ref("")
+  const passwordConfirm=ref("")
   const emailOUT=ref("")
   const address=ref("")
   const country=ref("")
   const cursus=ref("")
-  const inputs = [{_emailID:emailID},{_passwordIN:passwordIN}]
-  const outputs= [{_surname:surname},{_firstname:firstname},{_passwordOUT:passwordOUT},{_emailOUT:emailOUT},{_address:address},{_country:country},{_cursus:cursus}]
+  const loginInfos = [{_emailID:emailID},{_passwordIN:passwordIN}]
+  const registerInfos= [{_surname:surname},{_firstname:firstname},{_passwordOUT:passwordOUT},{_passwordConfirm:passwordConfirm},{_emailOUT:emailOUT},{_address:address},{_country:country},{_cursus:cursus}]
  
 </script>
 
@@ -69,13 +70,10 @@
                  <input type="password" v-model="passwordOUT">
               </div>
               <div class="inputBox">
-                <p>Cursus</p> 
-                  <select v-model="cursus">
-                    <option value="Chemistry">Chemistry</option>
-                    <option value="Psycho">Psychology</option>
-                    <option value="IT">IT</option>
-                  </select>
+                 <p>CONFIRM {{i18n("login.guest.password")}}</p>
+                 <input type="password" v-model="passwordConfirm">
               </div>
+              
               <div class="switchpage">
                 <button @click="page++">{{i18n("login.guest.nextpage")}}</button>
 
@@ -97,6 +95,14 @@
                 <p>{{i18n("login.guest.country")}}</p>
                 <input type="text" v-model="country">
               </div>
+              <div class="inputBox">
+                <p>Cursus</p> 
+                  <select v-model="cursus">
+                    <option value="Chemistry">Chemistry</option>
+                    <option value="Psycho">Psychology</option>
+                    <option value="IT">IT</option>
+                  </select>
+              </div>
               <div style="align-self:center;" class="inputBox">
                 <button style="margin-top:25px;" @click="console.log(outputs)">{{i18n("login.guest.submit")}}</button>
               </div>
@@ -117,8 +123,8 @@
 <style scoped>
 .Home{
   position:absolute;
-  z-index:1;
  	display: flex;
+  z-index: 100;
 	padding: 8px 16px;
 	color:rgb(255, 255, 255);
 	text-decoration: none;

frontend/src/Request.vue

@@ -0,0 +1,108 @@
+<script setup>
+  const props = defineProps({
+  id: Number,
+  type: String,
+  lastName: String,
+  firstName: String,
+  address: String,
+  country: String,
+  birthDate: String,
+  cursus:String,
+  degree:String,});
+</script>
+
+
+<template>
+  <div class="bodu">
+  <div class="container">
+ 
+    <div class="id"><a>{{id}}</a></div>
+    <div class="type"><a>{{type}}</a></div>
+    <div class="surname"><a>{{lastName}}</a></div>
+    <div class="firstname"><a>{{firstName}}</a></div>
+    <div class="infos"><button style="background-color:rgb(105,05,105);" > More infos </button></div>
+    <div class="accept"><button style="background-color:rgb(0,105,50);">Accept</button></div>
+    <div class="refuse"><button style="background-color:rgb(105,0,0);">Refuse</button></div>
+  </div>
+  </div>
+</template>
+
+<style scoped>
+  .container{
+    color:white;
+    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-areas:
+    "id type surname firstname infos accept refuse"; 
+    column-gap:10px;
+    
+  }
+  
+  .infos {
+    grid-area:infos;
+    align-self:center;
+  }
+
+  .accept{
+    grid-area:accept;
+    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;
+  }
+
+  .type{
+    grid-area:type;
+    align-self:center;
+  }
+
+  .surname{
+    grid-area:surname;
+    align-self:center;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow:ellipsis;
+  }
+
+  .firstname{
+    grid-area:firstname;
+    align-self:center;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow:ellipsis;
+  }
+
+  button{
+    font-size:15px;
+     height:50px;
+     width:100px;
+    border:none;
+    border-radius:20px;
+
+  }
+
+  .bodu {
+    width:100%;
+    margin-bottom:10px;
+    border:2px solid black;
+    border-radius:9px;
+    background-color:rgb(50,50,50);
+  }
+
+
+</style>
+