e

frontend/src/Apps/AboutStudent.vue

@@ -1,24 +1,82 @@
 <script setup>
+  import i18n from "@/i18n.js"
+  import {getSelf, getUser} from '../rest/Users.js'
+  import {ref} from "vue";
+
+  const user = await getSelf();
+
+  function getPP(){
+    if(user.value.profilePictureUrl === null){
+      return "/Clyde.png"
+    }
+    return user.profilePictureUrl
+  }
 </script>
 
 <template>
-  <div class="aboutbox">
-    <h1 class="test">Coucou</h1>
+  <div class="body">
+    <div class="container">
+      <div class="profilPic">
+        <img class="subContainter" :src=getPP()>
+      </div>
+      <div class = "globalInfos">
+        <div class="infosContainer">
+          <div>
+            {{user.firstName}} {{user.lastName}}
+          </div>
+          <div>
+            E-mail: {{user.email}}
+          </div>
+        </div>
+      </div>
+    </div>
   </div>
+
 </template>
 
-<style scoped>
-.aboutbox {
-  background-color: rgb(24,24,24);
-  width: 400px;
-  display:flex;
-  justify-content: center;
-  padding: 40px;
-  border-radius: 20px;
-  box-shadow:0 5px 25px #000000;
+
+<style>
+.container{
+
+  display:grid;
+  grid-template-columns:200px 900px;
+  grid-template-rows:200px auto;
+  column-gap:30px;
+  row-gap:45px;
+  grid-template-areas:
+  "profilPic globalInfos"
+  "minfos minfos";
 }
 
-.test{
-  color: red;
+.profilPic{
+  grid-area:profilPic;
+}
+
+.globalInfos {
+  grid-area:globalInfos;
+  align-self :center;
+
+}
+
+.body {
+  width:100%;
+  margin-bottom:10px;
+}
+
+.subContainter{
+  width:100%;
+  background-color:rgb(50,50,50);
+  border-radius:20px;
+  border:4px solid black;
+}
+
+.infosContainer {
+  padding-bottom:50px;
+  border:2px solid black;
+  font-size:25px;
+  color:white;
+  padding:20px;
+  background-color:rgb(50,50,50);
+  border-radius:20px;
 }
 </style>

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 AboutStudent from "@/Apps/AboutStudent.vue";
 
 const apps = {
 		'/login': LoginPage,
@@ -17,6 +18,7 @@ const apps = {
 		'/manage-courses' : Courses,
 		'/users-list' : Users,
 		'/students-list' : Students,
+		'/about-students': AboutStudent
 }
 
 const appsList = {
@@ -28,6 +30,7 @@ const appsList = {
 		'ManageCourses': { path: '#/manage-courses', icon: 'fa-book', text: i18n("app.manage.courses") },
 		'StudentsList':{ path: '#/students-list',icon: 'fa-users',text: i18n("app.studentList")},
 		'UsersList':{ path: '#/users-list',icon: 'fa-users',text: i18n("app.users")},
+		'AboutStudent':{ path: '#/about-users', icon: 'fa-users', text:i18n("app.aboutStudent")}
 }
 
 const currentPath = ref(window.location.hash)