début d'une page d'accueil

src/components/Authenticate.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { AuthenticationService } from '@/services/authentication.service';
 import { ref } from 'vue';
+import { useRouter } from 'vue-router';
 import { useToast } from 'vue-toast-notification';
 
 const username = ref<string>('')
@@ -11,16 +12,18 @@ const passwordErrorDetail = ref<string>('')
 const generalErrorDetail = ref<string>('')
 
 const toastService = useToast();
+const router = useRouter()
 const authenticationService = new AuthenticationService()
 
 async function submit() {
   try {
     await authenticationService.authenticate(username.value, password.value)
-    toastService.success(`Heureux de vous revoir ${username}!`, {
+    toastService.success(`Heureux de vous revoir ${username.value}!`, {
       position: 'top-right',
       pauseOnHover: true,
       dismissible: true,
     })
+    router.push('/');
   } catch (error: any) {
     usernameErrorDetail.value = ''
     passwordErrorDetail.value = ''

src/components/Home.vue

@@ -1,23 +1,23 @@
 <script setup lang="ts">
-import {type Ref, ref} from "vue";
+import type { Book } from "@/models/book";
+import { BookService } from "@/services/book.service";
+import { onMounted, ref } from "vue";
 
-const count: Ref<number> = ref(0);
+const books = ref<Book[]>([])
 
-function increment(): void {
-  count.value++;
-}
+const bookService = new BookService();
+
+onMounted(async () => {
+  books.value = await bookService.findBooks()
+});
 </script>
 
 <template>
-  <main>
-  </main>
+  <pre></pre>
+  <div v-for="book in books">
+    {{ book.title }}
+  </div>
+
 </template>
 
-<style scoped>
-main {
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-  align-items: center;
-}
-</style>
+<style scoped></style>

src/const.ts

@@ -0,0 +1,4 @@
+export const PLAN_TO_READ = 'PLAN'
+export const READING = 'READING'
+export const COMPLETED = 'COMPLETED'
+export const DROPPED = 'DROPPED'

src/models/book.ts

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

src/routes.ts

@@ -4,13 +4,12 @@ import Home from './components/Home.vue'
 
 const routes = [
   {
-    path: '/home',
+    path: '/',
     component: Home,
     name: "Home",
-    meta: { requiresAuth: true }
   },
   {
-    path: '/',
+    path: '/authenticate',
     component: Authenticate,
     name: "Authenticate", 
     meta: { guestOnly: true }
@@ -25,10 +24,6 @@ export const router = createRouter({
 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' };
   }

src/services/book.service.ts

@@ -0,0 +1,21 @@
+import type { Book } from "@/models/book";
+import axios from "axios";
+
+export const MBL_API_URL = "http://localhost:8000";
+
+export class BookService {
+  constructor() {
+    axios.defaults.baseURL = `${MBL_API_URL}/api/books`;
+  }
+
+  async findBooks() {
+    return await axios
+      .get("")
+      .then((res) => {
+        return res.data as Book[];
+      })
+      .catch((error) => {
+        throw error;
+      });
+  }
+}