Ajout du slider du compte et du mode Jour/Nuit

app.config.ts

@@ -28,6 +28,19 @@ export default defineAppConfig({
                 success: '#00aa00',
             }
         }
+    },
+    toaster: {
+        position: 'bottom-right' as const,
+        expand: true,
+        duration: 5000
+    },
+    ui: {
+        colors: {
+            primary: 'primary',
+            secondary: 'secondary',
+            success: 'success',
+            error: 'error',
+        }
     }
 })
 

app.vue

 <script setup lang="ts">
+import appConfig from "~/app.config";
+
 useHead({
     titleTemplate: (titleChunk) => {
         return titleChunk ? `3SPA | ${titleChunk}` : '3SPA';
@@ -8,7 +10,7 @@ useHead({
 
 <template>
     <div>
-        <UApp>
+        <UApp :toaster="appConfig.toaster">
             <NuxtLayout>
                 <NuxtPage/>
             </NuxtLayout>

assets/css/colors.css

+@import "tailwindcss";
+
+@theme {
+   /*created with https://www.tailwindshades.com/*/
+
+    --color-primary-50: #9DF5D8;
+    --color-primary-100: #8BF3D0;
+    --color-primary-200: #66F0C1;
+    --color-primary-300: #41ECB3;
+    --color-primary-400: #1CE8A4;
+    --color-primary-500: #14C78B;
+    --color-primary-600: #10A271;
+    --color-primary-700: #0D7D57;
+    --color-primary-800: #09583D;
+    --color-primary-900: #053323;
+    --color-primary-950: #032016;
+
+    --color-secondary-50: light-dark(#427684, #FDFEF8);
+    --color-secondary-100: light-dark(#3E6F7C, #FDFDF6);
+    --color-secondary-200: light-dark(#36606B, #FBFCF2);
+    --color-secondary-300: light-dark(#2D505A, #FAFCEE);
+    --color-secondary-400: light-dark(#254149, #F9FBE9);
+    --color-secondary-500: light-dark(#1C3238, #F8FAE5);
+    --color-secondary-600: light-dark(#192C31, #F7F9E1);
+    --color-secondary-700: light-dark(#15262A, #F6F8DC);
+    --color-secondary-800: light-dark(#122024, #F5F8D8);
+    --color-secondary-900: light-dark(#0E1A1D, #F3F7D4);
+    --color-secondary-950: light-dark(#0D1719, #F3F6D2);
+
+    --color-background-50: light-dark(#FDFEF8, #427684);
+    --color-background-100: light-dark(#FDFDF6, #3E6F7C);
+    --color-background-200: light-dark(#FBFCF2, #36606B);
+    --color-background-300: light-dark(#FAFCEE, #2D505A);
+    --color-background-400: light-dark(#F9FBE9, #254149);
+    --color-background-500: light-dark(#F8FAE5, #1C3238);
+    --color-background-600: light-dark(#F7F9E1, #192C31);
+    --color-background-700: light-dark(#F6F8DC, #15262A);
+    --color-background-800: light-dark(#F5F8D8, #122024);
+    --color-background-900: light-dark(#F3F7D4, #0E1A1D);
+    --color-background-950: light-dark(#F3F6D2, #0D1719);
+    
+    --color-error-50: #FFB8B8;
+    --color-error-100: #FFA3A3;
+    --color-error-200: #FF7A7A;
+    --color-error-300: #FF5252;
+    --color-error-400: #FF2929;
+    --color-error-500: #FF0000;
+    --color-error-600: #D60000;
+    --color-error-700: #AD0000;
+    --color-error-800: #850000;
+    --color-error-900: #5C0000;
+    --color-error-950: #470000;
+
+    --color-success-50: #07FF07;
+    --color-success-100: #00FC00;
+    --color-success-200: #00E700;
+    --color-success-300: #00D300;
+    --color-success-400: #00BE00;
+    --color-success-500: #00AA00;
+    --color-success-600: #009600;
+    --color-success-700: #008100;
+    --color-success-800: #006D00;
+    --color-success-900: #005800;
+    --color-success-950: #004E00;
+}
\ No newline at end of file

assets/css/main.css

 @import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Open+Sans:ital,wdth,wght@0,75..100,300..800;1,75..100,300..800&family=Oswald:wght@200..700&display=swap');
-@import "tailwindcss";
 @import "@nuxt/ui";

components/AppFooter.vue

@@ -4,22 +4,26 @@ const appConfig = useAppConfig()
 
 <style>
 footer {
-  position: fixed;
-  bottom: 0;
-  padding-left: 8px;
-  width: 100%;
+    position: fixed;
+    bottom: 0;
+    padding-left: 8px;
+    width: 100%;
 
-  display: flex;
-  background-color: v-bind(appConfig.theme.dark.colors.background);
+    display: flex;
+    background-color: var(--color-background-500);
 }
+
 footer > p {
-  margin: 1vh;
-  color: v-bind(appConfig.theme.dark.colors.primary);
+    margin: 1vh;
+    color: var(--color-secondary-500);
 }
 </style>
 
 <template>
-  <footer>
-    <p>&copy; 2025 3SPA</p>
-  </footer>
+    <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

components/AppHeader.vue

 <script setup lang="ts">
 const appConfig = useAppConfig()
+const open = ref(false)
 </script>
 
 <style>
@@ -12,17 +13,12 @@ header {
     justify-items: center;
     align-items: center;
     grid-template-columns:1fr 10vw;
-    background-color: v-bind(appConfig.theme.dark.colors.background);
+    background-color: var(--color-background-500);
 }
 
 .title {
     margin: 1vh;
-    color: v-bind(appConfig.theme.dark.colors.secondary);
-}
-
-header a {
-    width: 100%;
-    height: 100%;
+    color: var(--color-primary-500);
 }
 
 header span {
@@ -38,7 +34,19 @@ header span {
                 {{ appConfig.title }}
             </NuxtLink>
         </h1>
-        <UButton icon="material-symbols:account-circle" size="xl" color="primary" variant="link" rounded-full
-                 to="/login"/>
+        <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

+<script setup>
+const colorMode = useColorMode()
+const isDark = computed({
+    get() {
+        return colorMode.value === 'dark'
+    },
+    set() {
+        colorMode.preference = colorMode.value === 'dark' ? 'light' : 'dark'
+    }
+})
+</script>
+
+<template>
+    <ClientOnly v-if="!colorMode?.forced">
+        <USwitch
+            unchecked-icon="i-lucide-sun"
+            checked-icon="i-lucide-moon"
+            v-model="isDark"
+            size="xl"
+            label="mode sombre"
+        />
+    </ClientOnly>
+</template>

components/Placeholder.vue

+<script setup lang="ts">
+import userData from '../data/mock/user.json';
+import {UserMapper} from "~/utils/mapper/UserMapper";
+
+const user = ref<User>(UserMapper.from(userData));
+
+function getStatus(): "error" | "success" | "warning" | "neutral" | "primary" | "secondary" | "info" | undefined {
+    switch (user.value.status) {
+        case Status.ACTIVE:
+            return 'success';
+        case Status.ABSENT:
+            return 'warning';
+        case Status.DND:
+            return 'error';
+        case Status.INVISIBLE:
+        case Status.OFFLINE:
+            return 'neutral';
+        default:
+            return '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">
+            <UChip inset size="3xl" :color="getStatus()">
+                <UAvatar
+                    size="3xl"
+                    :src="user.icon"
+                    :alt="user.firstname + ' ' + user.lastname"
+                />
+            </UChip>
+        </UTooltip>
+        <p class="text-center">
+            <b>{{ user.lastname }}</b> {{ user.firstname }}
+            <br>{{ user.role ?? 'Inconnu' }}
+        </p>
+        <USeparator label="Paramètres" class="m-2"/>
+        <ColorModeButton></ColorModeButton>
+    </div>
+</template>
\ No newline at end of file

data/mock/user.json

+{
+  "id": 1,
+  "lastname": "Martin",
+  "firstname": "Pierre-Alexandre",
+  "username": "pmartin",
+  "language": "fr",
+  "icon": "https://randomuser.me/api/portraits/m",
+  "role": "admin",
+  "status": "active"
+}
\ No newline at end of file

nuxt.config.ts

@@ -31,6 +31,9 @@ export default defineNuxtConfig({
         head: {
             charset: 'utf-8',
             viewport: 'width=device-width, initial-scale=1',
+            htmlAttrs: {
+                lang: 'en'
+            }
         },
         pageTransition: {name: 'page', mode: 'out-in'},
         layoutTransition: {name: 'layout', mode: 'out-in'}
@@ -41,6 +44,7 @@ export default defineNuxtConfig({
         '~/assets/css/main.css',
         '~/assets/css/fonts.css',
         '~/assets/css/transitions.css',
+        '~/assets/css/colors.css',
     ],
 
     components: [
@@ -57,6 +61,7 @@ export default defineNuxtConfig({
     },
 
     modules: ['@nuxt/ui'],
+
     icon: {
         serverBundle: {
             collections: ['material-symbols']

pages/index.vue

@@ -17,5 +17,6 @@ definePageMeta({
         <NuxtLink to="/login">Log in</NuxtLink>
         <br>
         <NuxtLink to="/exercices">Exercices</NuxtLink>
+        <br>
     </div>
 </template>
\ No newline at end of file

pages/login.vue

 <script setup lang="ts">
 definePageMeta({
-    layout: 'login'
+    layout: 'clear'
 })
 import * as v from 'valibot'
 import type {FormSubmitEvent} from '#ui/types'
@@ -45,15 +45,11 @@ async function onSubmit(event: FormSubmitEvent<Schema>) {
     flex-direction: column;
     align-items: center;
 }
-
-div.page-login {
-    height: 100%;
-}
 </style>
 
 <template>
-    <div class="page-login">
-        <h2>Login</h2><br>
+    <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"

types/User.ts

+import type {Role} from "~/types/enum/Role";
+import type {Status} from "~/types/enum/Status";
+
+export interface User {
+    id: number;
+    lastname: string;
+    firstname: string;
+    username: string;
+    language: string;
+    icon: string;
+    role: Role;
+    status: Status;
+}
\ No newline at end of file

types/enum/ExerciseCategory.ts

 export enum ExerciseCategory {
-    Renforcement = 'Renforcement',
-    Cardio = 'Cardio',
-    Stretching = 'Stretching',
+    RENFORCEMENT = 'Renforcement',
+    CARDIO = 'Cardio',
+    STRETCHING = 'Stretching',
 }
\ No newline at end of file

types/enum/Role.ts

+export enum Role {
+    ADMIN = 'Administrateur',
+    A_USER = 'Utilisateur approuvé',
+    USER = "Utilisateur",
+    GUEST = 'Invité',
+}
\ No newline at end of file

types/enum/Status.ts

+export enum Status {
+    ACTIVE = 'active',
+    ABSENT = 'absent',
+    DND = 'dnd',
+    INVISIBLE = 'invisible',
+    OFFLINE = 'offline'
+}
\ 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 {
+        return {
+            id: user.id,
+            lastname: user.lastname,
+            firstname: user.firstname,
+            username: user.username,
+            language: user.language,
+            icon: user.icon,
+            role: Role[user.role.toUpperCase() as keyof typeof Role],
+            status: Status[user.status.toUpperCase() as keyof typeof Status],
+        };
+    }
+}
\ No newline at end of file