profile-page

backend/.env.example

-PORT=3000
-NODE_ENV=development
-MONGO_DB_URL=mongodb://username:password@hostname:27017/databasename?ssl=true

frontend/.env.development

-VUE_APP_BACKEND_BASE_URL=http://localhost:3000

frontend/src/components/Banner.vue

@@ -26,7 +26,7 @@ export default {
 
 <style>
 .banner {
-  background-color: #912F56;
+  background-color: #150578;
   flex-direction: row;
   vertical-align: middle;
   display: flex;
@@ -35,7 +35,7 @@ export default {
 }
 .name {
   text-align: left;
-  background-color: #912F56;
+  background-color: #150578;
   flex-direction: row;
   vertical-align: middle;
   display: flex;

frontend/src/components/BurgerMenu.vue

@@ -5,7 +5,7 @@
 
     <!-- Classic Menu -->
     <nav role="navigation" id="topnav_menu">
-      <a class="topnav_link" href="/about">ABOUT</a>
+      <a class="topnav_link" href="/addUsers">ADD USER</a>
       <a class="topnav_link" href="/counter">COUNTER</a>
       <a class="topnav_link" href="/users">USER</a>
     </nav>
@@ -21,7 +21,7 @@
     <nav role="navigation" id="topnav_responsive_menu">
       <ul>
         <li><a href="/">HOME</a></li>
-        <li><a href="/about">ABOUT</a></li>
+        <li><a href="/addUsers">ADD USER</a></li>
         <li><a href="/contact-us">CONTACT</a></li>
         <li><a href="/privacy-policy">PRIVACY POLICY</a></li>
         <li><a href="/terms-and-conditions">TERMS AND CONDITIONS</a></li>
@@ -55,7 +55,7 @@ export default {
 <style scoped>
 /* ******************** NAV BAR ******************** */
 .topnav {
-  background-color: #912F56;
+  background-color: #150578;
   display: flex;
   align-items: center;
   width: 100%;

frontend/src/components/Footer.vue

 <template>
   <div class="footer">
-    <h5 >🍪 Ce site n'utilise pas de cookies mais il les mange 🍪</h5>
+    <h5 >Ce site n'utilise pas de cookies mais il les mange 🍪</h5>
   </div>
 </template>
 
@@ -14,8 +14,12 @@ export default {
 .footer {
   text-align: center;
   display: flex;
-  background-color: #912F56;
+  background-color: #150578;
   color: white;
   justify-content: center;
+  margin-top: 20px;
+  position:absolute;
+  left:0;
+  right:0;
 }
 </style>

frontend/src/router/index.js

@@ -2,7 +2,7 @@ import { createRouter, createWebHistory } from "vue-router";
 import Home from "../views/Home.vue";
 import Counter from "../views/Counter.vue";
 import Users from "../views/Users.vue";
-import About from "../views/About.vue";
+import AddUser from "../views/AddUsers.vue";
 
 const routes = [
   {
@@ -21,9 +21,9 @@ const routes = [
     component: Users,
   },
   {
-    path: "/about",
-    name: "About",
-    component: About,
+    path: "/addUsers",
+    name: "AddUsers",
+    component: AddUser,
   },
 ];
 

frontend/src/views/AddUsers.vue

+<template>
+  <h1>Users</h1>
+  <AddUser @userAdded="fetchUsers()" />
+  <UsersTable v-if="users.length" :users="users" @userDeleted="fetchUsers()" />
+  <div v-if="usersLoadingError">{{ usersLoadingError }}</div>
+</template>
+
+<script>
+// @ is an alias to /src
+import UsersTable from "@/components/UsersTable.vue";
+import AddUser from "@/components/AddUser.vue";
+import axios from "axios";
+
+export default {
+  name: "Users",
+  components: {
+    AddUser,
+    UsersTable,
+  },
+  data: function () {
+    return {
+      users: [],
+      usersLoadingError: "",
+    };
+  },
+  methods: {
+    fetchUsers: function () {
+      axios
+        .get(`${process.env.VUE_APP_BACKEND_BASE_URL}/users`)
+        .then((response) => {
+          this.users = response.data.users;
+        })
+        .catch((error) => {
+          this.usersLoadingError = "An error occured while fetching users.";
+          console.error(error);
+        });
+    },
+  },
+  mounted: function () {
+    this.fetchUsers();
+  },
+};
+</script>
\ No newline at end of file

frontend/src/views/Home.vue

@@ -100,10 +100,6 @@ li {
   display: inline-block;
   margin: 0 10px;
 }
-
-a {
-  color: #ff68ad;
-}
 .carousel {
   margin-top: 30px;
   margin-left: 5px;

frontend/src/views/Users.vue

 <template>
-  <h1>Users</h1>
-  <AddUser @userAdded="fetchUsers()" />
-  <UsersTable v-if="users.length" :users="users" @userDeleted="fetchUsers()" />
-  <div v-if="usersLoadingError">{{ usersLoadingError }}</div>
+<header>
+<div class="user">
+    <img class="photo" src="../assets/placeholder.jpeg" />
+    <br >
+  <div class="name">
+    <h1>Jeanne Dupont</h1>
+  </div>
+</div>
+</header>
+<div class="like">
+    <h4 class="texte" >Films que vous avez aimés ></h4>
+</div>
 </template>
 
 <script>
-// @ is an alias to /src
-import UsersTable from "@/components/UsersTable.vue";
-import AddUser from "@/components/AddUser.vue";
-import axios from "axios";
 
-export default {
-  name: "Users",
-  components: {
-    AddUser,
-    UsersTable,
-  },
-  data: function () {
-    return {
-      users: [],
-      usersLoadingError: "",
-    };
-  },
-  methods: {
-    fetchUsers: function () {
-      axios
-        .get(`${process.env.VUE_APP_BACKEND_BASE_URL}/users`)
-        .then((response) => {
-          this.users = response.data.users;
-        })
-        .catch((error) => {
-          this.usersLoadingError = "An error occured while fetching users.";
-          console.error(error);
-        });
-    },
-  },
-  mounted: function () {
-    this.fetchUsers();
-  },
-};
 </script>
+
+<style scoped>
+.user {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: row;
+}
+.photo {
+  width: 200px;
+  height: 200px;
+  border-radius: 100px;
+  align-items: center;
+  margin-right: 20px;
+  margin-top: 10px;
+}
+.like {
+  text-align: center;
+  display: flex;
+  background-color: #449DD1;
+  color: white;
+  max-height: 100px;
+  justify-content: center;
+  max-width: 250px;
+  border-radius:10px;
+  margin-left:20px;
+}
+.texte {
+  justify-items:flex-end;
+  margin-left: 5px;
+}
+.name {
+  background-color: #EAF2EF;
+}
+
+</style> 
\ No newline at end of file