feat : config + login

frontend/.gitignore

@@ -0,0 +1,24 @@
+# Nuxt dev/build outputs
+.output
+.data
+.nuxt
+.nitro
+.cache
+dist
+
+# Node dependencies
+node_modules
+
+# Logs
+logs
+*.log
+
+# Misc
+.DS_Store
+.fleet
+.idea
+
+# Local env files
+.env
+.env.*
+!.env.example

frontend/app.vue

@@ -0,0 +1,13 @@
+<template>
+    <NuxtLayout>
+        <NuxtPage />
+    </NuxtLayout>
+</template>
+
+<script setup lang="ts">
+const { load } = useAppVersion()
+
+onMounted(() => {
+    load()
+})
+</script>

frontend/components/AppTopNav.vue

@@ -0,0 +1,42 @@
+<template>
+  <header class="border-b border-neutral-200 bg-primary-500 p-5 text-white">
+    <div class="flex h-full items-center justify-end">
+      <div class="flex gap-12 text-xl text-white">
+        <div class="group relative flex gap-4">
+          <Icon name="mdi:account-circle-outline" class="self-center cursor-pointer" size="36" />
+          <p class="self-center cursor-pointer">{{ user?.username }}</p>
+          <div class="invisible absolute right-0 top-full z-20 mt-2 w-44 rounded-md border border-neutral-200 bg-white py-1 text-sm text-neutral-800 opacity-0 shadow-lg transition-all group-hover:visible group-hover:opacity-100">
+            <button
+              type="button"
+              class="block w-full px-3 py-2 text-left hover:bg-neutral-100"
+            >
+              Mon profil
+            </button>
+            <button
+              type="button"
+              class="block w-full px-3 py-2 text-left hover:bg-neutral-100"
+              @click="handleLogout"
+            >
+              Déconnexion
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </header>
+</template>
+
+<script setup lang="ts">
+import type { UserData } from '~/services/dto/user-data'
+
+defineProps<{
+  user?: UserData
+}>()
+
+const auth = useAuthStore()
+
+const handleLogout = async () => {
+  await auth.logout()
+  await navigateTo('/login')
+}
+</script>

frontend/composables/useApi.ts

@@ -0,0 +1,213 @@
+import type { FetchOptions } from 'ofetch'
+import { $fetch, FetchError } from 'ofetch'
+import { useAuthStore } from '~/stores/auth'
+
+export type AnyObject = Record<string, unknown>
+
+export type BlobResponse = {
+  data: Blob
+  headers: Headers
+}
+
+export type ApiClient = {
+  get<T>(url: string, query?: AnyObject, options?: ApiFetchOptions<'json'>): Promise<T>
+  getBlob(url: string, query?: AnyObject, options?: ApiFetchOptions<'blob'>): Promise<BlobResponse>
+  post<T>(url: string, body?: AnyObject, options?: ApiFetchOptions<'json'>): Promise<T>
+  put<T>(url: string, body?: AnyObject, options?: ApiFetchOptions<'json'>): Promise<T>
+  patch<T>(url: string, body?: AnyObject, options?: ApiFetchOptions<'json'>): Promise<T>
+  delete<T>(url: string, query?: AnyObject, options?: ApiFetchOptions<'json'>): Promise<T>
+}
+
+export type ApiFetchOptions<ResponseType extends 'json' | 'blob'> =
+  FetchOptions<ResponseType> & {
+    toast?: boolean
+    toastOn401?: boolean
+    toastTitle?: string
+    toastErrorMessage?: string
+    toastSuccessMessage?: string
+    toastErrorKey?: string
+    toastSuccessKey?: string
+  }
+
+export const useApi = (): ApiClient => {
+  const config = useRuntimeConfig()
+  const baseURL = config.public.apiBase ?? '/api'
+  const toast = useToast()
+  const auth = useAuthStore()
+  const nuxtApp = useNuxtApp()
+  let isHandlingUnauthorized = false
+  const i18n = nuxtApp.$i18n as
+    | {
+        t: (key: string) => string
+        te?: (key: string) => boolean
+      }
+    | undefined
+  const t = (key: string) => (i18n?.t ? String(i18n.t(key)) : key)
+  const te = (key: string) => (i18n?.te ? i18n.te(key) : false)
+
+  const extractErrorMessage = (error: unknown, responseData?: unknown): string => {
+    const data = responseData ?? (error as FetchError)?.data
+
+    if (typeof data === 'string') {
+      return data
+    }
+
+    if (data && typeof data === 'object') {
+      const record = data as Record<string, unknown>
+      return (
+        (record['hydra:description'] as string) ||
+        (record.detail as string) ||
+        (record.message as string) ||
+        (record.error as string) ||
+        (record.title as string) ||
+        (record['hydra:title'] as string) ||
+        ''
+      )
+    }
+
+    return (error as FetchError)?.message ?? 'Erreur inconnue.'
+  }
+
+  const methodErrorKeys: Record<string, string> = {
+    GET: 'errors.http.get',
+    POST: 'errors.http.post',
+    PUT: 'errors.http.put',
+    PATCH: 'errors.http.patch',
+    DELETE: 'errors.http.delete'
+  }
+
+  const client = $fetch.create({
+    baseURL,
+    retry: 0,
+    credentials: 'include',
+    onResponse({ options, response }) {
+      const apiOptions = options as ApiFetchOptions<'json'>
+      if (apiOptions?.toast === false) {
+        return
+      }
+
+      if (response?.status && response.status >= 400) {
+        return
+      }
+
+      const successKey = apiOptions?.toastSuccessKey
+      const successMessage =
+        apiOptions?.toastSuccessMessage ||
+        (successKey ? (te(successKey) ? t(successKey) : successKey) : '')
+
+      if (successMessage) {
+        toast.success({
+          title: 'Succès',
+          message: successMessage
+        })
+      }
+    },
+    async onResponseError({ response, error, options }) {
+      const apiOptions = options as ApiFetchOptions<'json'>
+      if (response?.status === 401) {
+        const requestUrl = typeof options?.url === 'string' ? options.url : ''
+        const isLoginCheck = requestUrl.includes('/login_check')
+        const isLogout = requestUrl.includes('/logout')
+        const shouldToast401 = apiOptions?.toastOn401 === true && apiOptions?.toast !== false
+
+        if (shouldToast401) {
+          const errorKey = apiOptions?.toastErrorKey
+          const errorMessage =
+            errorKey ? (te(errorKey) ? t(errorKey) : errorKey) : ''
+          const extractedMessage = extractErrorMessage(error, response?._data)
+          const message =
+            apiOptions?.toastErrorMessage ||
+            errorMessage ||
+            extractedMessage ||
+            'Une erreur est survenue.'
+
+          toast.error({
+            title: apiOptions?.toastTitle ?? 'Erreur',
+            message
+          })
+        }
+
+        if (!isLoginCheck && !isLogout) {
+          if (!isHandlingUnauthorized) {
+            isHandlingUnauthorized = true
+            auth.clearSession()
+            const route = useRoute()
+            if (route.path !== '/login') {
+              await navigateTo('/login')
+            }
+            isHandlingUnauthorized = false
+          }
+        }
+
+        return
+      }
+
+      if (apiOptions?.toast === false) {
+        return
+      }
+
+      const method =
+        typeof options?.method === 'string' ? options.method.toUpperCase() : 'GET'
+      const defaultKey = methodErrorKeys[method]
+      const defaultMessage =
+        defaultKey && te(defaultKey) ? t(defaultKey) : ''
+      const errorKey = apiOptions?.toastErrorKey
+      const errorMessage =
+        errorKey ? (te(errorKey) ? t(errorKey) : errorKey) : ''
+      const extractedMessage = extractErrorMessage(error, response?._data)
+      const message =
+        apiOptions?.toastErrorMessage ||
+        errorMessage ||
+        defaultMessage ||
+        extractedMessage ||
+        'Une erreur est survenue.'
+
+      toast.error({
+        title: apiOptions?.toastTitle ?? 'Erreur',
+        message
+      })
+    }
+  })
+
+  const request = <T>(
+    method: 'GET' | 'POST' | 'PUT' | 'PATCH' | 'DELETE',
+    url: string,
+    options: ApiFetchOptions<'json'> = {}
+  ) => {
+    const needsJsonBody = method === 'POST' || method === 'PUT'
+    const needsMergePatch = method === 'PATCH'
+
+    const headers = new Headers(options.headers as HeadersInit | undefined)
+
+    if (needsMergePatch && !headers.has('Content-Type')) {
+      headers.set('Content-Type', 'application/merge-patch+json')
+    } else if (needsJsonBody && !headers.has('Content-Type')) {
+      headers.set('Content-Type', 'application/json')
+    }
+
+    return client<T>(url, { ...options, method, headers })
+  }
+
+  return {
+    get<T>(url: string, query: AnyObject = {}, options: ApiFetchOptions<'json'> = {}) {
+      return request<T>('GET', url, { ...options, query })
+    },
+    getBlob(url: string, query: AnyObject = {}, options: ApiFetchOptions<'blob'> = {}) {
+      return client
+        .raw(url, { ...options, method: 'GET', query, responseType: 'blob' })
+        .then((res) => ({ data: res._data as Blob, headers: res.headers }))
+    },
+    post<T>(url: string, body: AnyObject = {}, options: ApiFetchOptions<'json'> = {}) {
+      return request<T>('POST', url, { ...options, body })
+    },
+    put<T>(url: string, body: AnyObject = {}, options: ApiFetchOptions<'json'> = {}) {
+      return request<T>('PUT', url, { ...options, body })
+    },
+    patch<T>(url: string, body: AnyObject = {}, options: ApiFetchOptions<'json'> = {}) {
+      return request<T>('PATCH', url, { ...options, body })
+    },
+    delete<T>(url: string, query: AnyObject = {}, options: ApiFetchOptions<'json'> = {}) {
+      return request<T>('DELETE', url, { ...options, query })
+    }
+  }
+}

frontend/composables/useAppVersion.ts

@@ -0,0 +1,17 @@
+export const useAppVersion = () => {
+    const api = useApi()
+    const version = useState<string | null>('app-version', () => null)
+
+    const load = async () => {
+        if (version.value) {
+            return version.value
+        }
+        const response = await api.get<{ version: string }>('version', {}, {
+            toast: false
+        })
+        version.value = response.version
+        return version.value
+    }
+
+    return { version, load }
+}

frontend/i18n.config.ts

@@ -0,0 +1,4 @@
+export default defineI18nConfig(() => ({
+    legacy: false,
+    locale: 'fr'
+}))

frontend/i18n/locales/fr.json

@@ -0,0 +1,22 @@
+{
+    "errors": {
+        "http": {
+            "get": "Impossible de récupérer les données.",
+            "post": "Impossible de créer la ressource.",
+            "put": "Impossible de mettre à jour la ressource.",
+            "patch": "Impossible de mettre à jour la ressource.",
+            "delete": "Impossible de supprimer la ressource."
+        },
+        "auth": {
+            "login": "Identifiants invalides.",
+            "logout": "Impossible de se déconnecter.",
+            "session": "Session expirée"
+        }
+    },
+    "success": {
+        "auth": {
+            "login": "Connexion réussie.",
+            "logout": "Déconnexion réussie."
+        }
+    }
+}

frontend/layouts/auth.vue

@@ -0,0 +1,11 @@
+<template>
+  <div class="min-h-screen bg-tertiary-500 from-tertiary-500 via-white to-neutral-100 text-neutral-900">
+    <main class="mx-auto flex min-h-screen w-full max-w-[720px] items-center px-6 py-12">
+      <slot />
+    </main>
+  </div>
+</template>
+
+<script setup lang="ts">
+const { version } = useAppVersion()
+</script>

frontend/layouts/default.vue

@@ -0,0 +1,52 @@
+<template>
+    <div class="h-screen overflow-hidden">
+        <div class="flex h-full">
+            <aside class="flex h-full w-64 flex-shrink-0 flex-col border-r border-neutral-200 bg-tertiary-500">
+                <div>
+                    <img src="/malio.png" alt="Logo" class="w-auto"/>
+                </div>
+                <nav class="flex-1 px-4 pb-6">
+                    <NuxtLink
+                        to="/"
+                        class="flex items-center gap-3 px-4 pb-3 pt-6 text-md font-semibold text-black hover:bg-tertiary-500 hover:text-primary-500 border-t border-secondary-500"
+                        active-class="bg-tertiary-500 text-primary-500"
+                    >
+                        <Icon name="mdi:question-mark" size="24"/>
+                        <span class="self-baseline text-md">Tableau de bord</span>
+                    </NuxtLink>
+                    <NuxtLink
+                        to="/project-list"
+                        class="flex gap-3 px-4 py-3 text-md font-semibold text-black hover:bg-tertiary-500 hover:text-primary-500"
+                        active-class="bg-tertiary-500 text-primary-500"
+                    >
+                        <Icon name="mdi:folder-outline" size="24"/>
+                        <span class="self-baseline text-md">Projets</span>
+                    </NuxtLink>
+                </nav>
+
+                <div class="flex flex-col gap-2 items-center p-4">
+                    <p class="font-bold">v 0.0.0</p>
+                </div>
+            </aside>
+
+            <div class="h-full flex-1 overflow-hidden flex flex-col">
+                <AppTopNav :user="auth.user" />
+                <main class="flex-1 overflow-y-auto px-8 py-12">
+                    <slot/>
+                </main>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import {useAppVersion} from "~/composables/useAppVersion";
+
+const auth = useAuthStore()
+const {version} = useAppVersion()
+
+const handleLogout = async () => {
+    await auth.logout()
+    await navigateTo('/login')
+}
+</script>

frontend/middleware/auth.global.ts

@@ -0,0 +1,16 @@
+export default defineNuxtRouteMiddleware(async (to) => {
+  const auth = useAuthStore()
+  const isLogin = to.path === '/login'
+
+  if (!auth.checked) {
+    await auth.ensureSession()
+  }
+
+  if (!isLogin && !auth.isAuthenticated) {
+    return navigateTo('/login')
+  }
+
+  if (isLogin && auth.isAuthenticated) {
+    return navigateTo('/')
+  }
+})

frontend/nuxt.config.ts

@@ -0,0 +1,41 @@
+export default defineNuxtConfig({
+    compatibilityDate: '2025-07-15',
+    devtools: {enabled: false},
+    ssr: false,
+    app: {
+        baseURL: process.env.NODE_ENV === 'production'
+            ? (process.env.NUXT_PUBLIC_APP_BASE || '/')
+            : '/'
+    },
+    modules: [
+        '@nuxtjs/tailwindcss',
+        '@pinia/nuxt',
+        'nuxt-toast',
+        '@nuxtjs/i18n',
+        '@nuxt/icon'
+    ],
+    runtimeConfig: {
+        public: {
+            apiBase: process.env.NUXT_PUBLIC_API_BASE
+        }
+    },
+    devServer: {port: 3002},
+    toast: {
+        settings: {
+            timeout: 2000,
+            closeOnClick: true,
+            progressBar: false
+        }
+    },
+    i18n: {
+        strategy: 'no_prefix',
+        defaultLocale: 'fr',
+        langDir: 'locales',
+        locales: [
+            {code: 'fr', file: 'fr.json', name: 'Français'}
+        ],
+    },
+    typescript: {
+        strict: true
+    }
+})

frontend/package.json

@@ -0,0 +1,24 @@
+{
+    "name": "nuxt-app",
+    "type": "module",
+    "private": true,
+    "scripts": {
+        "build": "nuxt build",
+        "dev": "nuxt dev",
+        "generate": "nuxt generate",
+        "preview": "nuxt preview",
+        "postinstall": "nuxt prepare",
+        "build:dist": "nuxt generate && rm -rf dist && cp -R .output/public dist"
+    },
+    "dependencies": {
+        "@nuxt/icon": "^2.2.1",
+        "@nuxtjs/i18n": "^10.2.3",
+        "@nuxtjs/tailwindcss": "^6.14.0",
+        "@pinia/nuxt": "^0.11.3",
+        "nuxt": "^4.3.1",
+        "nuxt-toast": "^1.4.0",
+        "pinia": "^3.0.4",
+        "vue": "^3.5.29",
+        "vue-router": "^4.6.4"
+    }
+}

frontend/pages/index.vue

@@ -0,0 +1,7 @@
+<template>
+    <h1 class="text-primary-500">Tableau de bord</h1>
+</template>
+
+<script setup lang="ts">
+
+</script>

frontend/pages/login.vue

@@ -0,0 +1,76 @@
+<template>
+    <div class="mx-auto w-full max-w-lg">
+    <span
+        class="flex items-center justify-center bg-white text-xl font-bold uppercase text-primary-500 p-4"
+    >
+        <img src="/malio.png" alt="Logo" class="w-[150px]"/>
+    </span>
+        <form
+            class="mt-8 space-y-6 rounded-lg border border-neutral-200 bg-white p-6 shadow-sm"
+            @submit.prevent="handleSubmit"
+        >
+            <div>
+                <label class="text-sm font-semibold text-neutral-700" for="username">
+                    Nom d'utilisateur
+                </label>
+                <input
+                    id="username"
+                    v-model="username"
+                    type="text"
+                    autocomplete="username"
+                    class="mt-2 w-full rounded-md border border-neutral-300 bg-white px-3 py-2 text-base text-neutral-900 focus:border-primary-500 focus:outline-none focus:ring-2 focus:ring-secondary-500/20"
+                />
+            </div>
+
+            <div>
+                <label class="text-sm font-semibold text-neutral-700" for="password">
+                    Mot de passe
+                </label>
+                <input
+                    id="password"
+                    v-model="password"
+                    type="password"
+                    autocomplete="current-password"
+                    class="mt-2 w-full rounded-md border border-neutral-300 bg-white px-3 py-2 text-base text-neutral-900 focus:border-primary-500 focus:outline-none focus:ring-2 focus:ring-secondary-500/20"
+                />
+            </div>
+
+            <button
+                type="submit"
+                class="w-full rounded-md bg-primary-500 px-4 py-2 text-base font-semibold text-white transition hover:bg-secondary-500 disabled:cursor-not-allowed disabled:opacity-60"
+                :disabled="isSubmitting"
+            >
+                Se connecter
+            </button>
+            <p class="font-bold">v{{ version }}</p>
+        </form>
+    </div>
+</template>
+
+<script setup lang="ts">
+definePageMeta({layout: 'auth'})
+useHead({
+    title: 'Connexion'
+})
+
+const router = useRouter()
+const auth = useAuthStore()
+const { version } = useAppVersion()
+
+const username = ref('')
+const password = ref('')
+const isSubmitting = ref(false)
+
+const handleSubmit = async () => {
+    if (isSubmitting.value) return
+
+    isSubmitting.value = true
+    try {
+        await auth.login(username.value, password.value)
+
+        await router.push('/')
+    } finally {
+        isSubmitting.value = false
+    }
+}
+</script>

frontend/public/robots.txt

@@ -0,0 +1,2 @@
+User-Agent: *
+Disallow:

frontend/services/auth.ts

@@ -0,0 +1,22 @@
+import type { UserData } from './dto/user-data'
+
+export const getCurrentUser = () => {
+  const api = useApi()
+  return api.get<UserData>('/me', {}, { toastErrorKey: 'errors.auth.session' })
+}
+
+export const login = (username: string, password: string) => {
+  const api = useApi()
+  return api.post('/login_check', { username, password }, {
+    toastOn401: true,
+    toastErrorKey: 'errors.auth.login'
+  })
+}
+
+export const logout = () => {
+  const api = useApi()
+  return api.post('/logout', {}, {
+    toastErrorKey: 'errors.auth.logout',
+    toastSuccessKey: 'success.auth.logout'
+  })
+}

frontend/services/dto/user-data.ts

@@ -0,0 +1,5 @@
+export type UserData = {
+  id: number
+  username: string
+  roles: string[]
+}

frontend/stores/auth.ts

@@ -0,0 +1,63 @@
+import { defineStore } from 'pinia'
+import type { UserData } from '~/services/dto/user-data'
+import { getCurrentUser, login, logout } from '~/services/auth'
+
+export const useAuthStore = defineStore('auth', {
+    state: () => ({
+        user: null as UserData | null,
+        isLoading: false,
+        checked: false
+    }),
+    getters: {
+        isAuthenticated: (state) => Boolean(state.user)
+    },
+    actions: {
+        clearSession() {
+            this.user = null
+            this.checked = true
+            this.isLoading = false
+        },
+        async ensureSession() {
+            if (this.checked) {
+                return this.user
+            }
+
+            this.checked = true
+
+            try {
+                const me = await getCurrentUser()
+                this.user = me
+                return me
+            } catch {
+                this.user = null
+                return null
+            }
+        },
+        async login(username: string, password: string) {
+            this.isLoading = true
+
+            try {
+                await login(username, password)
+                const me = await getCurrentUser()
+                this.user = me
+                this.checked = true
+                return me
+            } finally {
+                this.isLoading = false
+            }
+        },
+        async logout() {
+            this.isLoading = true
+
+            try {
+                await logout()
+            } catch {
+                // Ignore logout errors so we can still clear local auth state.
+            } finally {
+                this.user = null
+                this.checked = true
+                this.isLoading = false
+            }
+        }
+    }
+})

frontend/tailwind.config.ts

@@ -0,0 +1,25 @@
+import type {Config} from 'tailwindcss'
+
+export default <Partial<Config>>{
+    theme: {
+        extend: {
+            fontFamily: {
+                sans: ['"Helvetica Neue"', 'Helvetica', 'Arial', 'sans-serif']
+            },
+            colors: {
+                primary: {
+                    500: '#222783',
+                },
+                secondary: {
+                    500: '#304998'
+                },
+                tertiary: {
+                    500: '#F3F4F8'
+                },
+                blue: {
+                    500: '#056CF2'
+                }
+            }
+        }
+    }
+}

frontend/tsconfig.json

@@ -0,0 +1,18 @@
+{
+  // https://nuxt.com/docs/guide/concepts/typescript
+  "files": [],
+  "references": [
+    {
+      "path": "./.nuxt/tsconfig.app.json"
+    },
+    {
+      "path": "./.nuxt/tsconfig.server.json"
+    },
+    {
+      "path": "./.nuxt/tsconfig.shared.json"
+    },
+    {
+      "path": "./.nuxt/tsconfig.node.json"
+    }
+  ]
+}