Ajout du linter et améliorations en conséquences

README.md

@@ -13,6 +13,13 @@ npm install
 
 ## Development Server
 
+Be sure there are no new dependency updates:
+
+```bash
+npx npm-check-updates -u
+npm install
+```
+
 Start the development server on `http://localhost:3000`:
 
 ```bash

assets/css/fonts.css

@@ -16,7 +16,7 @@ h1 { font-size: clamp(32px, 6vw, 36px); }
 h2 { font-size: clamp(24px, 5vw, 28px); }
 h3 { font-size: clamp(18px, 4vw, 22px); }
 p { font-size: clamp(14px, 3vw, 16px); }
-p p { font-size: clamp(12px, 2vw, 14px); }
+small { font-size: clamp(12px, 2vw, 14px); }
 
 div, p, .open-sans {
     font-family: "Open Sans", serif;

components/Placeholder.vue → components/AccountPlaceholder.vue

@@ -21,15 +21,6 @@ function getStatus(): "error" | "success" | "warning" | "neutral" | "primary" |
 }
 </script>
 
-<style>
-.chip {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: 1vh;
-}
-</style>
-
 <template>
     <div class="chip">
         <UTooltip :text="user.firstname + ' ' + user.lastname">
@@ -46,6 +37,15 @@ function getStatus(): "error" | "success" | "warning" | "neutral" | "primary" |
             <br>{{ user.role ?? 'Inconnu' }}
         </p>
         <USeparator label="Paramètres" class="m-2"/>
-        <ColorModeButton></ColorModeButton>
+        <ColorModeButton/>
     </div>
-</template>
\ No newline at end of file
+</template>
+
+<style>
+.chip {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 1vh;
+}
+</style>
\ No newline at end of file

components/AppFooter.vue

 <script setup lang="ts">
-const appConfig = useAppConfig()
 </script>
 
+<template>
+    <footer>
+        <p>&copy; 2025 3SPA</p>
+        <p>Accessibilité : non conforme</p>
+        <p><a href="">Conditions générales de ventes</a></p>
+        <p><a href="">Conditions générales d'utilisation</a></p>
+    </footer>
+</template>
+
 <style>
 footer {
     position: fixed;
@@ -17,13 +25,4 @@ footer > p {
     margin: 1vh;
     color: var(--color-secondary-500);
 }
-</style>
-
-<template>
-    <footer>
-        <p>&copy; 2025 3SPA</p>
-        <p>Accessibilité : non conforme</p>
-        <p><a href="">Conditions générales de ventes</a></p>
-        <p><a href="">Conditions générales d'utilisation</a></p>
-    </footer>
-</template>
\ No newline at end of file
+</style>
\ No newline at end of file

components/AppHeader.vue

@@ -3,6 +3,31 @@ const appConfig = useAppConfig()
 const open = ref(false)
 </script>
 
+<template>
+    <header>
+        <h1 class="title">
+            <NuxtLink to="/">
+                {{ appConfig.title }}
+            </NuxtLink>
+        </h1>
+        <USlideover
+            v-model:open="open"
+            aria-label="Modal de l'utilisateur"
+            :close="false"
+            :ui="{ footer: 'justify-center'}">
+            <UButton
+                icon="material-symbols:account-circle" size="xl" color="primary" variant="link" rounded-full
+                class="h-full w-full" aria-label="account"/>
+            <template #body>
+                <AccountPlaceholder class="h-full"/>
+            </template>
+            <template #footer>
+                <UButton color="neutral" label="Fermer" @click="open = false"/>
+            </template>
+        </USlideover>
+    </header>
+</template>
+
 <style>
 header {
     position: sticky;
@@ -26,27 +51,3 @@ header span {
     height: 100%;
 }
 </style>
-
-<template>
-    <header>
-        <h1 class="title">
-            <NuxtLink to="/">
-                {{ appConfig.title }}
-            </NuxtLink>
-        </h1>
-        <USlideover
-            aria-label="Modal de l'utilisateur"
-            v-model:open="open"
-            :close="false"
-            :ui="{ footer: 'justify-center'}">
-            <UButton icon="material-symbols:account-circle" size="xl" color="primary" variant="link" rounded-full
-                     class="h-full w-full" aria-label="account"/>
-            <template #body>
-                <Placeholder class="h-full"/>
-            </template>
-            <template #footer>
-                <UButton color="neutral" label="Fermer" @click="open = false"/>
-            </template>
-        </USlideover>
-    </header>
-</template>

components/ColorModeButton.vue

@@ -13,9 +13,9 @@ const isDark = computed({
 <template>
     <ClientOnly v-if="!colorMode?.forced">
         <USwitch
+            v-model="isDark"
             unchecked-icon="i-lucide-sun"
             checked-icon="i-lucide-moon"
-            v-model="isDark"
             size="xl"
             label="mode sombre"
         />

eslint.config.mjs

+// @ts-check
+import withNuxt from './.nuxt/eslint.config.mjs'
+
+export default withNuxt(
+  // Your custom configs here
+)

layouts/clear.vue

-<style>
-div#layout-clear {
-    height: 100vh;
-}
-</style>
-
 <template>
     <div id="layout-clear">
         <slot/>
     </div>
-</template>
\ No newline at end of file
+</template>
+
+<style>
+div#layout-clear {
+    height: 100vh;
+}
+</style>
\ No newline at end of file

layouts/default.vue

-<style>
-#layout-default {
-    height: 100vh;
-}
-</style>
-
 <template>
     <div id="layout-default">
         <AppHeader/>
         <slot/>
         <AppFooter/>
     </div>
-</template>
\ No newline at end of file
+</template>
+
+<style>
+#layout-default {
+    height: 100vh;
+}
+</style>
\ No newline at end of file

middleware/auth.ts

-function isAuthenticated(): boolean { return true }
-export default defineNuxtRouteMiddleware((to, from) => {
+function isAuthenticated(): boolean {
+    return true
+}
+
+export default defineNuxtRouteMiddleware((_, __) => {
     if (!isAuthenticated()) {
         return navigateTo('/login')
     }

nuxt.config.ts

@@ -60,7 +60,7 @@ export default defineNuxtConfig({
         ]
     },
 
-    modules: ['@nuxt/ui'],
+    modules: ['@nuxt/ui', '@nuxt/eslint'],
 
     icon: {
         serverBundle: {

package.json

@@ -6,17 +6,23 @@
     "build": "node_modules/.bin/nuxt build",
     "dev": "node_modules/.bin/nuxt dev",
     "generate": "node_modules/.bin/nuxt generate",
-    "preview": "node_modules/.bin/nuxt preview",
+    "lint": "eslint .",
     "postinstall": "node_modules/.bin/nuxt prepare",
-    "start": "node_modules/.bin/nuxt start",
-    "prod": " node .output/server/index.mjs"
+    "preview": "node_modules/.bin/nuxt preview",
+    "prod": " node .output/server/index.mjs",
+    "start": "node_modules/.bin/nuxt start"
   },
   "dependencies": {
     "@iconify-json/material-symbols": "^1.2.12",
+    "@nuxt/eslint": "^0.7.5",
     "@nuxt/ui": "^3.0.0-alpha.11",
-    "nuxt": "^3.15.1",
-    "valibot": "^1.0.0-beta.11",
+    "eslint": "^9.18.0",
+    "nuxt": "^3.15.2",
+    "valibot": "^1.0.0-beta.12",
     "vue": "latest",
     "vue-router": "latest"
+  },
+  "devDependencies": {
+    "typescript": "^5.7.3"
   }
 }

pages/exercices.vue

 <script setup lang="ts">
 import myData from '../data/mock/exercices.json';
 
-const router = useRouter()
-
 const exercices = ref(myData)
 </script>
 
-<style>
-div#exercices {
-    margin: 1vh 1vw 6vh 1vw;
-}
-</style>
-
 <template>
     <div id="exercices">
         <h2>Exercices</h2>
-        <p v-for="exercice in exercices">
+        <p v-for="exercice in exercices" :key="exercice.id">
             {{ exercice.name }} <br>
-            <p>{{ exercice.description }}</p>
+            <small>{{ exercice.description }}</small>
         </p>
-        <p v-for="exercice in exercices">
+        <p v-for="exercice in exercices" :key="exercice.id">
             {{ exercice.name }} <br>
-            <p>{{ exercice.description }}</p>
+            <small>{{ exercice.description }}</small>
         </p>
     </div>
 </template>
 
-<style scoped>
-
+<style>
+div#exercices {
+    margin: 1vh 1vw 6vh 1vw;
+}
 </style>
\ No newline at end of file

pages/exercices/[id].vue

-<script setup lang="ts">
-
-</script>
-
 <template>
-
-</template>
-
-<style scoped>
-
-</style>
\ No newline at end of file
+    <div/>
+</template>
\ No newline at end of file

pages/login.vue

 <script setup lang="ts">
+import * as v from 'valibot'
+import type {FormSubmitEvent} from '#ui/types'
+
 definePageMeta({
     layout: 'clear'
 })
-import * as v from 'valibot'
-import type {FormSubmitEvent} from '#ui/types'
 
 const schema = v.object({
     email: v.pipe(v.string(), v.email('Invalid email')),
@@ -38,27 +39,20 @@ async function onSubmit(event: FormSubmitEvent<Schema>) {
 }
 </script>
 
-<style>
-.page-login {
-    display: flex;
-    justify-content: center;
-    flex-direction: column;
-    align-items: center;
-}
-</style>
-
 <template>
     <div class="page-login h-full">
         <h1>Login</h1><br>
         <UForm :schema="v.safeParser(schema)" :state="state" class="space-y-4 page-login" @submit="onSubmit">
             <UFormField label="Email" name="email">
-                <UInput v-model="state.email" placeholder="e-mail" icon="material-symbols:account-circle"
-                        variant="outline" color="primary"/>
+                <UInput
+                    v-model="state.email" placeholder="e-mail" icon="material-symbols:account-circle"
+                    variant="outline" color="primary"/>
             </UFormField>
 
             <UFormField label="Password" name="password">
-                <UInput v-model="state.password" type="password" placeholder="password"
-                        icon="material-symbols:key-vertical" color="primary"/>
+                <UInput
+                    v-model="state.password" type="password" placeholder="password"
+                    icon="material-symbols:key-vertical" color="primary"/>
             </UFormField>
 
             <UButton type="submit" icon="material-symbols:login" :disabled="!v.is(schema, state)" loading-auto>
@@ -67,3 +61,12 @@ async function onSubmit(event: FormSubmitEvent<Schema>) {
         </UForm>
     </div>
 </template>
+
+<style>
+.page-login {
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    align-items: center;
+}
+</style>
\ No newline at end of file

utils/mapper/UserMapper.ts

 import {Role} from "~/types/enum/Role";
 import {Status} from "~/types/enum/Status";
 
-export class UserMapper {
-    static from(user: any): User {
+// FIXME : à déplacer dans un dossier DTO pour les retours de l'API
+interface UserDTO {
+    id: number;
+    lastname: string;
+    firstname: string;
+    username: string;
+    language: string;
+    icon: string;
+    role: string;
+    status: string;
+}
+
+export const UserMapper = {
+    from(user: UserDTO): User {
         return {
             id: user.id,
             lastname: user.lastname,
@@ -13,5 +25,5 @@ export class UserMapper {
             role: Role[user.role.toUpperCase() as keyof typeof Role],
             status: Status[user.status.toUpperCase() as keyof typeof Status],
         };
-    }
-}
\ No newline at end of file
+    },
+};