initial commit

package.json

@@ -12,7 +12,10 @@
     "lint": "eslint . --fix"
   },
   "dependencies": {
-    "vue": "^3.5.17"
+    "axios": "^1.13.2",
+    "vue": "^3.5.17",
+    "vue-router": "^4.6.3",
+    "vue-toast-notification": "^3.1.3"
   },
   "devDependencies": {
     "@tsconfig/node22": "^22.0.2",

src/App.vue

@@ -1,34 +1,8 @@
 <script setup lang="ts">
-  import Counter from "@/components/Counter.vue";
-  import {
-    onBeforeMount,
-    onBeforeUnmount,
-    onMounted,
-    onUnmounted
-  } from "vue";
-
-  // Le cycle de vie d'un composant : https://vuejs.org/api/composition-api-lifecycle.html
-
-  onBeforeMount(() => {
-    console.log("Avant que le composant soit monté");
-  });
-
-  onMounted(() => {
-    console.log("Le composant a fini d'être monté");
-  });
-
-  onBeforeUnmount(() => {
-    console.log("Avant que le composant soit détruit");
-  });
-
-  onUnmounted(() => {
-    console.log("Une fois le composant détruit");
-  })
-
 </script>
 
 <template>
-  <Counter/>
+  <RouterView/>
 </template>
 
 <style scoped>

src/assets/base.css

@@ -1,86 +0,0 @@
-/* color palette from <https://github.com/vuejs/theme> */
-:root {
-  --vt-c-white: #ffffff;
-  --vt-c-white-soft: #f8f8f8;
-  --vt-c-white-mute: #f2f2f2;
-
-  --vt-c-black: #181818;
-  --vt-c-black-soft: #222222;
-  --vt-c-black-mute: #282828;
-
-  --vt-c-indigo: #2c3e50;
-
-  --vt-c-divider-light-1: rgba(60, 60, 60, 0.29);
-  --vt-c-divider-light-2: rgba(60, 60, 60, 0.12);
-  --vt-c-divider-dark-1: rgba(84, 84, 84, 0.65);
-  --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48);
-
-  --vt-c-text-light-1: var(--vt-c-indigo);
-  --vt-c-text-light-2: rgba(60, 60, 60, 0.66);
-  --vt-c-text-dark-1: var(--vt-c-white);
-  --vt-c-text-dark-2: rgba(235, 235, 235, 0.64);
-}
-
-/* semantic color variables for this project */
-:root {
-  --color-background: var(--vt-c-white);
-  --color-background-soft: var(--vt-c-white-soft);
-  --color-background-mute: var(--vt-c-white-mute);
-
-  --color-border: var(--vt-c-divider-light-2);
-  --color-border-hover: var(--vt-c-divider-light-1);
-
-  --color-heading: var(--vt-c-text-light-1);
-  --color-text: var(--vt-c-text-light-1);
-
-  --section-gap: 160px;
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    --color-background: var(--vt-c-black);
-    --color-background-soft: var(--vt-c-black-soft);
-    --color-background-mute: var(--vt-c-black-mute);
-
-    --color-border: var(--vt-c-divider-dark-2);
-    --color-border-hover: var(--vt-c-divider-dark-1);
-
-    --color-heading: var(--vt-c-text-dark-1);
-    --color-text: var(--vt-c-text-dark-2);
-  }
-}
-
-*,
-*::before,
-*::after {
-  box-sizing: border-box;
-  margin: 0;
-  font-weight: normal;
-}
-
-body {
-  min-height: 100vh;
-  color: var(--color-text);
-  background: var(--color-background);
-  transition:
-    color 0.5s,
-    background-color 0.5s;
-  line-height: 1.6;
-  font-family:
-    Inter,
-    -apple-system,
-    BlinkMacSystemFont,
-    'Segoe UI',
-    Roboto,
-    Oxygen,
-    Ubuntu,
-    Cantarell,
-    'Fira Sans',
-    'Droid Sans',
-    'Helvetica Neue',
-    sans-serif;
-  font-size: 15px;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}

src/assets/main.css

@@ -1,35 +0,0 @@
-@import './base.css';
-
-#app {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-  font-weight: normal;
-}
-
-a,
-.green {
-  text-decoration: none;
-  color: hsla(160, 100%, 37%, 1);
-  transition: 0.4s;
-  padding: 3px;
-}
-
-@media (hover: hover) {
-  a:hover {
-    background-color: hsla(160, 100%, 37%, 0.2);
-  }
-}
-
-@media (min-width: 1024px) {
-  body {
-    display: flex;
-    place-items: center;
-  }
-
-  #app {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    padding: 0 2rem;
-  }
-}

src/components/Authenticate.vue

@@ -0,0 +1,94 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { useToast } from 'vue-toast-notification';
+
+  const username = ref<string>('')
+  const password = ref<string>('')
+
+  const toastService = useToast();
+
+  function submit() {
+    
+  }
+</script>
+
+<template>
+  <main>
+    <form>
+      <h1>Se connecter</h1>
+      <input @keyup.enter="submit" v-model="username" placeholder="Nom d'utilisateur" type="text" required>
+      <input @keyup.enter="submit" v-model="password" placeholder="Mot de passe" type="password" required>
+      <button @click="submit">Submit</button>
+    </form> 
+  </main>
+</template>
+
+<style scoped>
+main {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: #f1f4f5;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: -1;
+}
+
+form {
+  box-sizing: border-box;
+  margin: 100px auto 0;
+  box-shadow: 2px 2px 5px 1px rgba(0,0,0,0.2);
+  padding-bottom: 40px;
+  border-radius: 3px;
+  h1 {
+    box-sizing: border-box;
+    padding: 20px;
+  }
+}
+
+input {
+  margin: 40px 25px;
+  width: 200px;
+  display: block;
+  border: none;
+  padding: 10px 0;
+  border-bottom: solid 1px #3b82ef;
+  transition: all 0.3s cubic-bezier(.64,.09,.08,1);
+  background: linear-gradient(to bottom, rgba(255,255,255,0) 96%, #3b82ef 4%);
+  background-position: -200px 0;
+  background-size: 200px 100%;
+  background-repeat: no-repeat;
+  color: darken(#3b82ef, 20%);
+  &:focus, &:valid {
+    box-shadow: none;
+    outline: none;
+    background-position: 0 0;
+    &::-webkit-input-placeholder {
+      color: #3b82ef;
+      font-size: 11px;
+      transform: translateY(-20px);
+      visibility: visible !important;
+    }
+  }
+}
+
+button {
+  border: none;
+  background: #3b82ef;
+  cursor: pointer;
+  border-radius: 3px;
+  padding: 6px;
+  width: 200px;
+  color: white;
+  margin-left: 25px;
+  box-shadow: 0 3px 6px 0 rgba(0,0,0,0.2);
+  &:hover { 
+    transition: 1s;
+    box-shadow: 0 6px 6px 0 rgba(0,0,0,0.2);
+  }
+}
+
+</style>

src/components/Counter.vue

@@ -1,32 +0,0 @@
-<script setup lang="ts">
-import {type Ref, ref} from "vue";
-
-const count: Ref<number> = ref(0);
-
-function increment(): void {
-  count.value++;
-}
-</script>
-
-<template>
-  <main>
-    <button @click="increment">Petit bouton :D</button>
-    <p>{{ count }}</p>
-    <!-- pareil que -->
-    <p v-text="count"></p>
-
-    <p v-show="true">Message visible :D !</p>
-    <p v-show="false">Message invisible :( !</p>
-
-    <!-- Plein d'autres directives sur : https://vuejs.org/api/built-in-directives.html -->
-  </main>
-</template>
-
-<style scoped>
-main {
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-  align-items: center;
-}
-</style>

src/components/Home.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import {type Ref, ref} from "vue";
+
+const count: Ref<number> = ref(0);
+
+function increment(): void {
+  count.value++;
+}
+</script>
+
+<template>
+  <main>
+  </main>
+</template>
+
+<style scoped>
+main {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  align-items: center;
+}
+</style>

src/main.ts

@@ -1,6 +1,6 @@
-import './assets/main.css'
-
 import { createApp } from 'vue'
 import App from './App.vue'
+import ToastPlugin from 'vue-toast-notification'
+import { router } from './routes'
 
-createApp(App).mount('#app')
+createApp(App).use(router).use(ToastPlugin).mount('#app')

src/models/book.ts

@@ -0,0 +1,9 @@
+export class Book {
+    id: number = 0
+    note: number = 0
+    title: string = ""
+    author: string = ""
+    state: string = "PLAN"
+    added_at: Date = new Date()
+    updated_at: Date = new Date()
+}

src/models/user.ts

@@ -0,0 +1,5 @@
+export class User {
+    id: number = 0;
+    username: string = ""
+    email: string = ""
+}

src/routes.ts

@@ -0,0 +1,37 @@
+import { createWebHistory, createRouter } from 'vue-router'
+import Authenticate from './components/Authenticate.vue'
+import Home from './components/Home.vue'
+
+const routes = [
+  {
+    path: '/home',
+    component: Home,
+    name: "Home",
+    meta: { requiresAuth: true }
+  },
+  {
+    path: '/',
+    component: Authenticate,
+    name: "Authenticate", 
+    meta: { guestOnly: true }
+  },
+]
+
+export const router = createRouter({
+  history: createWebHistory(),
+  routes,
+})
+
+router.beforeEach((to, from) => {
+  const authenticated = sessionStorage.getItem('access');
+
+  if (to.meta.requiresAuth && !authenticated) {
+    return { name: 'Authenticate' };
+  }
+
+  if (to.meta.guestOnly && authenticated) {
+    return { name: 'Home' };
+  }
+
+  return true;
+})

src/services/authentication.service.ts

@@ -0,0 +1,31 @@
+import type { User } from "@/models/user";
+import axios from "axios";
+
+export const MBL_API_URL = "http://localhost:8000/api/";
+
+export class AuthenticationService {
+  constructor() {
+    axios.defaults.baseURL = `${MBL_API_URL}/auth`
+  }
+
+  async findUsers() {
+    return await axios.get('users').then((res) => {
+      return res.data as User
+    })
+  }
+
+  async authenticate(username: string, password: string) {
+    return await axios
+      .post('token', {
+        username: username,
+        password: password,
+      })
+      .then((res) => {
+        localStorage.setItem('refresh', res.data.refresh)
+        sessionStorage.setItem('access', res.data.access)
+      })
+      .catch((error) => {
+        throw error;
+      })
+  }
+}