connection page

frontend/src/components/Connexion.vue

+<template>
+  <h1 class="add-user-title">Connexion</h1>
+  <div class="add-user-form-container">
+    <form ref="addUserForm">
+      <input
+        class="add-user-input"
+        v-model="user.email"
+        type="email"
+        placeholder="Email"
+        required
+      />
+      <input
+        class="add-user-input"
+        v-model="user.firstName"
+        placeholder="Password"
+      />
+    </form>
+    <button class="add-user-button" @click="addUser()">Connexion</button>
+    <div v-if="userCreationError">{{ userCreationError }}</div>
+  </div>
+</template>
+
+<script>
+import axios from "axios";
+
+export default {
+  name: "AddUser",
+  emits: ["userAdded"],
+  data: function () {
+    return {
+      user: {
+        email: "",
+        firstName: "",
+        lastName: "",
+      },
+      userCreationError: "",
+    };
+  },
+  methods: {
+    addUser: function () {
+      if (!this.$refs.addUserForm.checkValidity()) {
+        this.$refs.addUserForm.reportValidity();
+        return;
+      }
+
+      axios
+        .post(`${process.env.VUE_APP_BACKEND_BASE_URL}/users/new`, this.user)
+        .then(() => {
+          this.$emit("userAdded");
+          this.user = {
+            email: "",
+            firstName: "",
+            lastName: "",
+          };
+        })
+        .catch((error) => {
+          this.userCreationError = "An error occured while creating new user.";
+          console.error(error);
+        });
+    },
+  },
+};
+</script>
+<style scoped>
+.add-user-title {
+  margin-bottom: 10px;
+}
+
+.add-user-form-container {
+  display: flex;
+  margin-bottom: 20px;
+}
+
+.add-user-input {
+  margin-right: 10px;
+  padding: 5px;
+}
+
+.add-user-button {
+  cursor: pointer;
+  padding: 5px;
+}
+</style>

frontend/src/views/Connexion.vue

 <template>
-  <h1>This is a Connexion example</h1>
-  <div class="Connexion-value">Connexion value is: {{ Connexion }}</div>
-  <button @click="increment()">Increment</button>
+  <AddUser @userAdded="fetchUsers()" />
+  <div v-if="usersLoadingError">{{ usersLoadingError }}</div>
 </template>
 
 <script>
+// @ is an alias to /src
+import AddUser from "@/components/Connexion.vue";
+import axios from "axios";
+
 export default {
-  name: "Connexion",
+  name: "Users",
+  components: {
+    AddUser,
+  },
   data: function () {
     return {
-      Connexion: 0,
+      users: [],
+      usersLoadingError: "",
     };
   },
   methods: {
-    increment: function () {
-      this.Connexion++;
+    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>
-.Connexion-value {
-  margin-bottom: 5px;
-}
-</style>