Merge branch 'add-user' into 'master'

Add user and other

See merge request !18

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/BurgerMenu.vue

@@ -5,8 +5,8 @@
 
     <!-- Classic Menu -->
     <nav role="navigation" id="topnav_menu">
-      <a class="topnav_link" href="/about">ABOUT</a>
-      <a class="topnav_link" href="/counter">COUNTER</a>
+      <a class="topnav_link" href="/addUsers">INSCRIPTION</a>
+      <a class="topnav_link" href="/Connexion">CONNEXION</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">INSCRIPTION</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>
@@ -129,7 +129,6 @@ export default {
     list-style-type: none;
     -webkit-font-smoothing: antialiased;
   }
-
   #topnav_responsive_menu li {
     padding: 12px 24px;
   }

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>
 
@@ -17,5 +17,9 @@ export default {
   background-color: #912F56;
   color: white;
   justify-content: center;
+  margin-top: 20px;
+  position:absolute;
+  left:0;
+  right:0;
 }
 </style>

frontend/src/components/SearchBar.vue

@@ -3,32 +3,7 @@
 </template>
 
 <script>
-import axios from "axios";
 
-export default  {
-  data: function () {
-    return {
-      moviename: "",
-      movies: [],
-      moviesLoadingError: "",
-    };
-  },
-  methods: {
-    fetchMovies: function () {
-      axios
-        .get(
-          `https://api.themoviedb.org/3/movie/popular?api_key=522d421671cf75c2cba341597d86403a`
-        )
-        .then((response) => {
-          this.movies = response.data.results;
-        })
-        .catch((error) => {
-          this.moviesLoadingError = "An error occured while e ing movies.";
-          console.error(error);
-        });
-    },
-  },
-};
 </script>
 
 <style scoped>

frontend/src/router/index.js

 import { createRouter, createWebHistory } from "vue-router";
 import Home from "../views/Home.vue";
-import Counter from "../views/Counter.vue";
+import Connexion from "../views/Connexion.vue";
 import Users from "../views/Users.vue";
-import About from "../views/About.vue";
-import MoviePage from "../views/MoviePage";
+import AddUser from "../views/AddUsers.vue";
 
 const routes = [
   {
@@ -12,9 +11,9 @@ const routes = [
     component: Home,
   },
   {
-    path: "/counter",
-    name: "Counter",
-    component: Counter,
+    path: "/Connexion",
+    name: "Connexion",
+    component: Connexion,
   },
   {
     path: "/users",
@@ -22,14 +21,9 @@ const routes = [
     component: Users,
   },
   {
-    path: "/about",
-    name: "About",
-    component: About,
-  },
-  {
-    path: "/movie/:id",
-    name: "MoviePage",
-    component: MoviePage,
+    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/Counter.vue → frontend/src/views/Connexion.vue

 <template>
-  <h1>This is a counter example</h1>
-  <div class="counter-value">Counter value is: {{ counter }}</div>
+  <h1>This is a Connexion example</h1>
+  <div class="Connexion-value">Connexion value is: {{ Connexion }}</div>
   <button @click="increment()">Increment</button>
 </template>
 
 <script>
 export default {
-  name: "Counter",
+  name: "Connexion",
   data: function () {
     return {
-      counter: 0,
+      Connexion: 0,
     };
   },
   methods: {
     increment: function () {
-      this.counter++;
+      this.Connexion++;
     },
   },
 };
 </script>
 
 <style scoped>
-.counter-value {
+.Connexion-value {
   margin-bottom: 5px;
 }
 </style>

frontend/src/views/Home.vue

@@ -20,7 +20,6 @@
   <div class="type">
     <MovieType />
   </div>
-    <div class="film-name">Le film est : {{ moviename }}</div>
     <li v-for="movie in movies" :key="movie.id">
       <p class="movie-title">
         {{ movie.title }}
@@ -100,10 +99,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: #912F56;
+  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