feat: add a debug page calling database debug functions from the backend

Reviewed-on: #67
Reviewed-by: kosssi <simon@p4pillon.org>

### Détails

- Ajout d'une interface "de base", avec une navbar (supprimée par la #65)
- Ajout d'un bouton de connexion, ouvrant une modale
- Sélection de l'utilisateur⋅ice au click ou par raccourci clavier
- Usage réactif d'un état partagé entre les composants, pour stocker l'information de l'utilisateur⋅ice connecté⋅e
- Menu dropdown de "profil" & Déconnexion

![Peek 24-09-2024 01-03](/attachments/4ceda5b3-26d9-4022-8923-e65a08da8dcd)

# Compatibilité

Les choix d'implémentation des éléments "dynamiques" de l'interface (modale, dropdown), encouragés par la documentation de DaisyUI, s'appuient sur les dernières évolutions de la norme HTML : il n'y a donc aucun javascript pour les gérer, c'est fait nativement par le navigateur.

Il faudrait vérifier si les librairies et framework qu'on utilise implémentent ces fonctionnements en "polyfill" pour les anciens navigateurs. Si ce n'est pas le cas, il faudra définir si :
- on cherche des polyfills adaptés
- on laisse comme ça sans rétro-compatibilité (pas très "numérique responsable")
- on fallback sur des implémentations plus "traditionnelles" mais rétro-compatibles

Closes #61

Cargo.toml

@@ -1,9 +1,9 @@
 [workspace]
 resolver = "2"
 members = [
-    "crates/app",
+    "crates/backend",
-    "crates/sesam-vitale",
     "crates/desktop",
+    "crates/sesam-vitale",
     "crates/utils",
     "migration",
     "entity",
@@ -12,9 +12,8 @@ members = [
 
 [workspace.dependencies]
 anyhow = "1.0"
-axum = "0.7.5"
 dotenv = "0.15"
 sea-orm-cli = "1.0.1"
 sea-orm = "1.0.1"
+serde = { version = "1.0.210", features = ["derive"] }
 thiserror = "1.0"
-tokio = "1.39.1"

README.md

@@ -2,12 +2,14 @@
 
 Logiciel de Pharmacie libre et open-source.
 
-## Crates
+## Modules applicatifs
 
-- `app`: Interface du logiciel, servie par un serveur web propulsé par Axum. Utilisable en mode endpoint ou encapsulé dans le client `desktop`
+- `crates`: Dossier racine des modules Rust
-- `desktop`: Client desktop propulsé par Tauri, encapsulant le serveur web `app`
+    - `crates/backend`: Serveur backend propulsé par Axum, exposant une API REST
-- `sesam-vitale`: Bibliothèque de gestion des services SESAM-Vitale (Lecture des cartes CPS et Vitale, téléservices ...)
+    - `crates/desktop`: Client desktop propulsé par Tauri, exposant le `frontend`
-- `utils`: Bibliothèque de fonctions utilitaires
+    - `crates/sesam-vitale`: Bibliothèque de gestion des services SESAM-Vitale (Lecture des cartes CPS et Vitale, téléservices ...)
+    - `crates/utils`: Bibliothèque de fonctions utilitaires
+- `frontend`: Interface web du logiciel, propulsée par Nuxt.js
 
 ## Installation
 
@@ -26,22 +28,21 @@ Des exemples de fichiers de configuration sont disponibles à la racine du proje
 
 ### Pré-requis
 
+#### Frontend (Nuxt + Typescript)
+
+Le frontend est propulsé par Nuxt.js, un framework TypeScript pour Vue.js. Pour le développement, il est nécessaire d'installer les dépendances suivantes :
+- [Bun](https://bun.sh/docs/installation), un gestionnaire de paquets, équivalent à `npm` en plus performant
+
 #### Tauri CLI
 
+TODO: Tauri CLI, réellement nécessaire ?
+
 La CLI Tauri est nécessaire au lancement du client `desktop`. Elle peut être installée via Cargo :
 
 ```bash
-cargo install tauri-cli --version "^2.0.0-beta"
+cargo install tauri-cli --version "^2.0.0-rc"
 ```
 
-#### Tailwindcss CLI
-
-Le CLI Tailwindcss est nécessaire pour la génération du fichier `crates/app/assets/css/style.css`.
-
-La documentation d'installation est disponible sur le site officiel de Tailwindcss : https://tailwindcss.com/blog/standalone-cli
-
-La version actuellement utilisée est la [`v3.4.7`](https://github.com/tailwindlabs/tailwindcss/releases/tag/v3.4.7)
-
 #### SeaORM CLI
 
 SeaORM est notre ORM. Le CLI SeaORM est nécessaire pour la génération des modèles de la base de données et des migrations associées. Elle peut être installée via Cargo :
@@ -64,37 +65,30 @@ Toutefois, l'usage de la CLI de SeaORM nécessite de renseigner les informations
 
 La crate `sesam-vitale` nécessite la présence des librairies dynamiques fournies par le package FSV et la CryptolibCPS. Les instructions d'installation sont disponibles dans le [README](crates/sesam-vitale/README.md) de la crate `sesam-vitale`.
 
+#### Backend Hot-reload
+
+Voir le [README](crates/backend/README.md) de la crate `backend` pour les prérequis de développement du serveur backend.
+
 ### Lancement
 
-Le logiciel dans sa globalité peut être lancé via la commande suivante :
+Pour lancer l'application en mode développement, il est nécessaire d'exécuter plusieurs composants simultanément :
 
 ```bash
+# Lancement du serveur backend
+systemfd --no-pid -s http::8080 -- cargo watch -x 'run --bin backend'
+```
+
+```bash
+# Lancement de l'interface utilisateur (frontend ou desktop)
+# - frontend (serveur web, accessible via navigateur)
+bun run --cwd frontend/ dev
+# - desktop (client desktop, basé sur Tauri)
 cargo tauri dev
 ```
 
-/!\ Attention, le lancement du client `desktop` ne génère pas le fichier `crates/app/assets/css/style.css` automatiquement pour le moment. En cas de modification des interfaces web, il est donc nécessaire de procéder à sa génération comme indiqué dans le [README](crates/app/README.md) de la crate `app`.
-
-Si vous souhaitez lancer les composants séparément, les indications de lancement sont disponibles dans les README des différents crates.
-
-- [app](crates/app/README.md)
-- [sesam-vitale](crates/sesam-vitale/README.md)
-
-## Rechargement automatique
-
-Pour permettre de développer plus rapidement, il existe une librairie qui recompile automatiquement nos modifications en cours : [`cargo-watch`](https://github.com/watchexec/cargo-watch) permet de relancer une commande `cargo` lorsqu'un fichier est modifié (example: `cargo run` --> `cargo watch -x run`).
-
-Voici la commande pour l'installer dans un _package_ :
-```bash
-cargo add cargo-watch --dev --package app
-```
-
-Le fichier [`.ignore`](./ignore) permet d'ignorer certains fichiers pour éviter de relancer la recompilation inutilement.
-
-⚠️ La librairie n'est pas compatible avec _Windows 7_ et les versions antérieurs de _Windows_.
-
 ## Build
 
-Packager le client desktop
+Pour packager le client `desktop`, il est nécessaire de faire appel à la CLI Tauri, qui se charge de gérer le build du `frontend` et son intégration au bundle :
 
 ```bash
 cargo tauri build
@@ -119,5 +113,5 @@ sea-orm-cli migrate up
 ### Génération des entitées
 
 ```bash
-sea-orm-cli generate entity -o entity/src/entities
+sea-orm-cli generate entity -o entity/src/entities --with-serde both
 ```

crates/app/.gitignore

@@ -1,4 +0,0 @@
-/target
-
-# Tailwind CSS CLI
-tailwindcss

crates/app/README.md

@@ -1,44 +0,0 @@
-## Pré-requis
-
-- Récupérer le binaire TailwindCSS : https://tailwindcss.com/blog/standalone-cli
-
-## Configuration
-
-> Astuce : lorsqu'on exécute directement la crate `App` à des fins de développement, le système de configuration n'utilisera pas l'éventuel fichier `.env` situé à la racine du workspace Rust. Pour éviter de dupliquer le fichier `.env`, il est possible de créer un lien symbolique vers le fichier `.env` de la crate `App` :
-
-```bash
-cd crates/app
-ln -s ../../.env .env
-```
-
-## Exécution
-
-- Lancer tailwindcss en mode watch dans un terminal : 
-```bash
-./tailwindcss -i css/input.css -o assets/css/style.css --watch
-```
-
-- Lancer le serveur web dans un autre terminal :
-```bash
-cargo run --bin app
-```
-
-## Rechargement automatique (_auto-reload_)
-
-Pour le projet `app`, nous utilisons en plus de `cargo-watch` ses librairies :
-- [`systemfd`](https://github.com/mitsuhiko/systemfd) permet de redémarrer un serveur sans interrompre les connexions en cours, il transmet le descripteur de fichier du socket à une nouvelle instance du serveur (exemple: `cargo watch -x run` --> `systemfd --no-pid -s http::3000 -- cargo watch -x run`). Si le port est déjà pris il en prendra un autre.
-- [`listenfd`](https://github.com/mitsuhiko/listenfd) permet, côté _Rust_, de démarrer un serveur en utilisant des connexions déjà ouvertes.
-
-Pour notre application voici la commande à lancer :
-
-```bash
-systemfd --no-pid -s http::3000 -- cargo watch -x 'run --bin app'
-```
-
-## Chargement à chaud (_livereload_)
-
-Pour que notre navigateur rafraîchisse automatique notre page lorsque le serveur a été recompilé, nous utilisons la librairie [`tower-livereload`](https://github.com/leotaku/tower-livereload).
-
-A chaque changement, que ça soit sur du code en _Rust_, _HTML_, _CSS_ ou _JS_ alors le navigateur va recharger entièrement la page.
-
-En Rust, il n'existe pas encore d'outil de _Hot Reload_ complet et intégré comme on en trouve dans d'autres environnements de développement web, comme pour _Node.js_.

crates/app/askama.toml

@@ -1,6 +0,0 @@
-[general]
-# Directories to search for templates, relative to the crate root.
-dirs = [
-    "src/pages",
-    "src/components",
-]

crates/app/css/input.css

@@ -1,3 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;

crates/app/src/components/base.html

@@ -1,23 +0,0 @@
-{% if hx_request %}
-  <title>{% block title %}{{ title }}{% endblock %}</title>
-  {% block body %}{% endblock %}
-{% else %}
-<!doctype html>
-<html lang="fr" class="h-full">
-  <head>
-    <title>{% block title %}{{ title }}{% endblock %}</title>
-
-    <script src="/assets/js/htmx@2.0.1.min.js"></script>
-    <script src="/assets/js/alpinejs@3.14.1.min.js" defer></script>
-    <script src="/assets/js/flowbite@2.5.1.min.js"></script>
-    <link href="/assets/css/style.css" rel="stylesheet">
-
-    {% block head %}{% endblock %}
-  </head>
-  <body class="h-full">
-    <div class="min-h-full">
-      {% block body %}{% endblock %}
-    </div>
-  </body>
-</html>
-{% endif %}

crates/app/src/components/navbar/menu-item.html

@@ -1,18 +0,0 @@
-{% set selected = item.id == current %}
-<li>
-    <a
-        href="{{ item.href }}"
-        {% if selected -%}
-            class="block py-2 px-3 text-white bg-blue-700 rounded md:bg-transparent md:text-blue-700 md:p-0 md:dark:text-blue-500"
-            aria-current="page"
-        {% else -%}
-            class="block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:hover:text-blue-700 md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700"
-        {% endif -%}
-        hx-get="{{ item.href }}"
-        hx-push-url="true"
-        hx-swap="outerHTML"
-        hx-select-oob="#menu-items,#page-header,#page-main"
-    >
-        {{ item.label }}
-    </a>
-</li>

crates/app/src/components/navbar/navbar.html

@@ -1,50 +0,0 @@
-{% macro navbar(current) %}
-
-{% let items=crate::menu::get_menu_items() %}
-
-<nav class="bg-white border-gray-200 dark:bg-gray-900">
-  <div class="max-w-screen-xl flex flex-wrap items-center justify-between mx-auto p-4">
-  <a href="/" class="flex items-center space-x-3 rtl:space-x-reverse">
-      <img src="https://flowbite.com/docs/images/logo.svg" class="h-8" alt="Flowbite Logo" />
-      <span class="self-center text-2xl font-semibold whitespace-nowrap dark:text-white">Krys4lide</span>
-  </a>
-  <div class="flex items-center md:order-2 space-x-3 md:space-x-0 rtl:space-x-reverse">
-      <button type="button" class="flex text-sm bg-gray-800 rounded-full md:me-0 focus:ring-4 focus:ring-gray-300 dark:focus:ring-gray-600" id="user-menu-button" aria-expanded="false" data-dropdown-toggle="user-dropdown" data-dropdown-placement="bottom">
-        <span class="sr-only">Ouvrir le menu de profil</span>
-        <img class="w-8 h-8 rounded-full" src="https://flowbite.com/docs/images/people/profile-picture-3.jpg" alt="user photo">
-      </button>
-      <!-- Dropdown menu -->
-      <div class="z-50 hidden my-4 text-base list-none bg-white divide-y divide-gray-100 rounded-lg shadow dark:bg-gray-700 dark:divide-gray-600" id="user-dropdown">
-        <div class="px-4 py-3">
-          <span class="block text-sm text-gray-900 dark:text-white">Bonnie Green</span>
-          <span class="block text-sm  text-gray-500 truncate dark:text-gray-400">name@flowbite.com</span>
-        </div>
-        <ul class="py-2" aria-labelledby="user-menu-button">
-          <li>
-            <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white">Profile</a>
-          </li>
-          <li>
-            <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white">Settings</a>
-          </li>
-          <li>
-            <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white">Sign out</a>
-          </li>
-        </ul>
-      </div>
-      <button data-collapse-toggle="navbar-user" type="button" class="inline-flex items-center p-2 w-10 h-10 justify-center text-sm text-gray-500 rounded-lg md:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600" aria-controls="navbar-user" aria-expanded="false">
-        <span class="sr-only">Ouvrir le menu de navigation</span>
-        <svg class="w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 17 14">
-            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 1h15M1 7h15M1 13h15"/>
-        </svg>
-    </button>
-  </div>
-  <div class="items-center justify-between hidden w-full md:flex md:w-auto md:order-1" id="navbar-user">
-    <ul id="menu-items" class="flex flex-col font-medium p-4 md:p-0 mt-4 border border-gray-100 rounded-lg bg-gray-50 md:space-x-8 rtl:space-x-reverse md:flex-row md:mt-0 md:border-0 md:bg-white dark:bg-gray-800 md:dark:bg-gray-900 dark:border-gray-700">
-      {% for item in items %}
-        {% include "navbar/menu-item.html" %}
-      {% endfor %}
-    </ul>
-  </div>
-  </div>
-</nav>
-{% endmacro %}

crates/app/src/components/skeletons/card.html

@@ -1,22 +0,0 @@
-<div role="status" class="animate-pulse max-w-sm p-4 border border-gray-200 rounded shadow md:p-6 dark:border-gray-700">
-    <div class="flex items-center justify-center h-48 mb-4 bg-gray-300 rounded dark:bg-gray-700">
-        <svg class="w-10 h-10 text-gray-200 dark:text-gray-600" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 16 20">
-            <path d="M14.066 0H7v5a2 2 0 0 1-2 2H0v11a1.97 1.97 0 0 0 1.934 2h12.132A1.97 1.97 0 0 0 16 18V2a1.97 1.97 0 0 0-1.934-2ZM10.5 6a1.5 1.5 0 1 1 0 2.999A1.5 1.5 0 0 1 10.5 6Zm2.221 10.515a1 1 0 0 1-.858.485h-8a1 1 0 0 1-.9-1.43L5.6 10.039a.978.978 0 0 1 .936-.57 1 1 0 0 1 .9.632l1.181 2.981.541-1a.945.945 0 0 1 .883-.522 1 1 0 0 1 .879.529l1.832 3.438a1 1 0 0 1-.031.988Z"/>
-            <path d="M5 5V.13a2.96 2.96 0 0 0-1.293.749L.879 3.707A2.98 2.98 0 0 0 .13 5H5Z"/>
-        </svg>
-    </div>
-    <div class="h-2.5 bg-gray-200 rounded-full dark:bg-gray-700 w-48 mb-4"></div>
-    <div class="h-2 bg-gray-200 rounded-full dark:bg-gray-700 mb-2.5"></div>
-    <div class="h-2 bg-gray-200 rounded-full dark:bg-gray-700 mb-2.5"></div>
-    <div class="h-2 bg-gray-200 rounded-full dark:bg-gray-700"></div>
-    <div class="flex items-center mt-4">
-       <svg class="w-10 h-10 me-3 text-gray-200 dark:text-gray-700" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
-            <path d="M10 0a10 10 0 1 0 10 10A10.011 10.011 0 0 0 10 0Zm0 5a3 3 0 1 1 0 6 3 3 0 0 1 0-6Zm0 13a8.949 8.949 0 0 1-4.951-1.488A3.987 3.987 0 0 1 9 13h2a3.987 3.987 0 0 1 3.951 3.512A8.949 8.949 0 0 1 10 18Z"/>
-        </svg>
-        <div>
-            <div class="h-2.5 bg-gray-200 rounded-full dark:bg-gray-700 w-32 mb-2"></div>
-            <div class="w-48 h-2 bg-gray-200 rounded-full dark:bg-gray-700"></div>
-        </div>
-    </div>
-    <span class="sr-only">Loading...</span>
-</div>

crates/app/src/components/skeletons/menu-items.html

@@ -1,4 +0,0 @@
-<div role="status" class="animate-pulse flex items-center justify-center h-full">
-    <div class="w-32 h-4 bg-gray-200 rounded-full dark:bg-gray-700 me-3"></div>
-    <div class="w-32 h-4 bg-gray-200 rounded-full dark:bg-gray-700"></div>
-</div>

crates/app/src/components/skeletons/page-title.html

@@ -1 +0,0 @@
-<div role="status" class="animate-pulse h-7 bg-gray-200 rounded-full dark:bg-gray-700 w-48 mt-3"></div>

crates/app/src/lib.rs

@@ -1,47 +0,0 @@
-use std::path::PathBuf;
-
-use axum::http::{StatusCode, Uri};
-use axum_htmx::AutoVaryLayer;
-use sea_orm::DatabaseConnection;
-use thiserror::Error;
-use tower_http::services::ServeDir;
-
-use ::utils::config::{load_config, ConfigError};
-
-pub mod db;
-
-mod menu;
-mod pages;
-
-async fn fallback(uri: Uri) -> (StatusCode, String) {
-    (StatusCode::NOT_FOUND, format!("No route for {uri}"))
-}
-
-#[derive(Error, Debug)]
-pub enum InitError {
-    #[error(transparent)]
-    ConfigError(#[from] ConfigError),
-}
-
-pub fn init() -> Result<(), InitError> {
-    load_config(None)?;
-    Ok(())
-}
-
-#[derive(Clone)]
-pub struct AppState {
-    db_connection: DatabaseConnection,
-}
-
-pub async fn get_router(assets_path: PathBuf) -> axum::Router<()> {
-    let db_connection = db::get_connection().await.unwrap();
-    let state: AppState = AppState { db_connection };
-
-    axum::Router::new()
-        .nest_service("/assets", ServeDir::new(assets_path))
-        .merge(pages::get_routes())
-        .fallback(fallback)
-        .with_state(state)
-        // The AutoVaryLayer is used to avoid cache issues with htmx (cf: https://github.com/robertwayne/axum-htmx?tab=readme-ov-file#auto-caching-management)
-        .layer(AutoVaryLayer)
-}

crates/app/src/main.rs

@@ -1,90 +0,0 @@
-use std::path::{Path, PathBuf};
-use std::{env, io};
-
-use axum::body::Body;
-use axum::http::Request;
-use listenfd::ListenFd;
-use notify::Watcher;
-use thiserror::Error;
-use tokio::net::TcpListener;
-use tower_livereload::predicate::Predicate;
-use tower_livereload::LiveReloadLayer;
-
-use ::app::{get_router, init, InitError};
-
-#[derive(Error, Debug)]
-pub enum AppError {
-    #[error("Unable to bind to TCP listener")]
-    TCPListener(#[from] std::io::Error),
-    #[error("Error with the notify watcher")]
-    NotifyWatcher(#[from] notify::Error),
-    #[error("Missing environment variable {var}")]
-    MissingEnvVar { var: &'static str },
-    #[error("Error with the database connection")]
-    DatabaseConnection(#[from] sea_orm::DbErr),
-    #[error("Error while initialising the app")]
-    Initialisation(#[from] InitError),
-}
-
-/// Nous filtrons les requêtes de `htmx` pour ne pas inclure le script _JS_ qui gère le rechargement
-/// Voir https://github.com/leotaku/tower-livereload/pull/3
-#[derive(Copy, Clone)]
-struct NotHtmxPredicate;
-impl<T> Predicate<Request<T>> for NotHtmxPredicate {
-    fn check(&mut self, req: &Request<T>) -> bool {
-        !(req.headers().contains_key("hx-request"))
-    }
-}
-
-const DEFAULT_LISTENER: &str = "localhost:3000";
-async fn get_tcp_listener() -> Result<TcpListener, io::Error> {
-    let mut listenfd = ListenFd::from_env();
-
-    match listenfd.take_tcp_listener(0)? {
-        // if we are given a tcp listener on listen fd 0, we use that one
-        Some(listener) => {
-            listener.set_nonblocking(true)?;
-            Ok(TcpListener::from_std(listener)?)
-        }
-        // otherwise fall back to local listening
-        None => Ok(TcpListener::bind(DEFAULT_LISTENER).await?),
-    }
-}
-
-fn get_livereload_layer(
-    templates_paths: Vec<PathBuf>,
-) -> Result<LiveReloadLayer<NotHtmxPredicate>, notify::Error> {
-    let livereload = LiveReloadLayer::new();
-    let reloader = livereload.reloader();
-    let mut watcher = notify::recommended_watcher(move |_| reloader.reload())?;
-    for templates_path in templates_paths {
-        watcher.watch(templates_path.as_path(), notify::RecursiveMode::Recursive)?;
-    }
-    Ok(livereload.request_predicate::<Body, NotHtmxPredicate>(NotHtmxPredicate))
-}
-
-#[tokio::main]
-async fn main() -> Result<(), AppError> {
-    init()?;
-
-    let manifest_dir = env::var("CARGO_MANIFEST_DIR").map_err(|_| AppError::MissingEnvVar {
-        var: "CARGO_MANIFEST_DIR",
-    })?;
-    let assets_path = Path::new(&manifest_dir).join("assets");
-    let templates_paths = vec![
-        Path::new(&manifest_dir).join("src/pages"),
-        Path::new(&manifest_dir).join("src/components"),
-    ];
-
-    let livereload_layer =
-        get_livereload_layer(templates_paths).map_err(AppError::NotifyWatcher)?;
-    let router = get_router(assets_path).await.layer(livereload_layer);
-
-    let listener: TcpListener = get_tcp_listener().await.map_err(AppError::TCPListener)?;
-    let local_addr = listener.local_addr().map_err(AppError::TCPListener)?;
-    println!("Listening on: http://{}", local_addr);
-
-    // Run the server with the router
-    axum::serve(listener, router.into_make_service()).await?;
-    Ok(())
-}

crates/app/src/menu.rs

@@ -1,28 +0,0 @@
-pub struct MenuItem {
-    pub id: String,
-    pub label: String,
-    pub href: String,
-}
-
-/// Get the menu items
-/// This function is the central place to define the menu items
-/// It can be used directly in templates, for example in the `navbar` component to render the menu
-pub fn get_menu_items() -> Vec<MenuItem> {
-    vec![
-        MenuItem {
-            id: "home".to_string(),
-            label: "Accueil".to_string(),
-            href: "/".to_string(),
-        },
-        MenuItem {
-            id: "cps".to_string(),
-            label: "CPS".to_string(),
-            href: "/cps".to_string(),
-        },
-        MenuItem {
-            id: "debug".to_string(),
-            label: "DEBUG".to_string(),
-            href: "/debug".to_string(),
-        },
-    ]
-}

crates/app/src/pages/cps.html

@@ -1,43 +0,0 @@
-{% extends "base.html" %}
-{% import "navbar/navbar.html" as navbar -%}
-
-{% block title %}Pharma Libre - CPS{% endblock %}
-
-{% block body %}
-{% call navbar::navbar(current="cps") %}
-<div class="py-10">
-  <header id="page-header">
-    <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
-      <h1
-        id="page-title"
-        class="text-3xl font-bold leading-tight tracking-tight text-gray-900"
-      >
-        CPS
-      </h1>
-    </div>
-  </header>
-  <main id="page-main">
-    <div
-      class="mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8"
-    >
-      <div
-        class="border-2 border-dashed rounded-lg border-gray-300 dark:border-gray-600 h-96 mb-4"
-      >A</div>
-      <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-4">
-        <div
-          class="border-2 border-dashed border-gray-300 rounded-lg dark:border-gray-600 h-32 md:h-64"
-        >B</div>
-        <div
-          class="border-2 border-dashed rounded-lg border-gray-300 dark:border-gray-600 h-32 md:h-64"
-        >C</div>
-        <div
-          class="border-2 border-dashed rounded-lg border-gray-300 dark:border-gray-600 h-32 md:h-64"
-        >D</div>
-        <div
-          class="border-2 border-dashed rounded-lg border-gray-300 dark:border-gray-600 h-32 md:h-64"
-        >E</div>
-      </div>
-    </div>
-  </main>
-</div>
-{% endblock %}

crates/app/src/pages/cps.rs

@@ -1,12 +0,0 @@
-use askama_axum::Template;
-use axum_htmx::HxRequest;
-
-#[derive(Template)]
-#[template(path = "cps.html")]
-pub struct CpsTemplate {
-    hx_request: bool,
-}
-
-pub async fn cps(HxRequest(hx_request): HxRequest) -> CpsTemplate {
-    CpsTemplate { hx_request }
-}

crates/app/src/pages/debug.html

@@ -1,72 +0,0 @@
-{% extends "base.html" %}
-{% import "navbar/navbar.html" as navbar -%}
-
-{% block title %}Pharma Libre - Debug{% endblock %}
-
-{% block body %}
-{% call navbar::navbar(current="debug") %}
-<div class="py-10">
-    <header id="page-header">
-        <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
-            <h1 id="page-title" class="text-3xl font-bold leading-tight tracking-tight text-gray-900">
-                DEBUG
-            </h1>
-        </div>
-    </header>
-    <main id="page-main">
-        <div class="mx-auto max-w-7xl py-12 sm:px-6 lg:px-8">
-            <div class="mx-auto max-w-3xl">
-                <div
-                    class="w-full p-6 bg-white rounded-lg shadow dark:border md:mt-0 sm:max-w-md dark:bg-gray-800 dark:border-gray-700 sm:p-8">
-                    <h1
-                        class="mb-1 text-xl font-bold leading-tight tracking-tight text-gray-900 md:text-2xl dark:text-white">
-                        Base de données
-                    </h1>
-                    <p class="font-light text-gray-500 dark:text-gray-400 mb-5">
-                        Données extraites de la base de donnée à des fins de debug
-                    </p>
-                    <table class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
-                        <thead class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
-                            <tr>
-                                <th scope="col" class="px-6 py-3">
-                                    ID
-                                </th>
-                                <th scope="col" class="px-6 py-3">
-                                    Value
-                                </th>
-                            </tr>
-                        </thead>
-                        <tbody>
-                            <tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700">
-                                <th scope="row"
-                                    class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
-                                    db_ping_status
-                                </th>
-                                <td class="px-6 py-4">
-                                    {{ db_ping_status }}
-                                </td>
-                            </tr>
-                            <tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700">
-                                <th scope="row"
-                                    class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
-                                    debug_entries_count
-                                </th>
-                                <td class="px-6 py-4">
-                                    {{ debug_entries_count }}
-                                </td>
-                            </tr>
-                        </tbody>
-                    </table>
-                    <div class="mt-4 space-y-4 lg:mt-5 md:space-y-5">
-                        <button type="button"
-                            class="w-full text-white bg-blue-600 hover:bg-blue-700 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
-                            hx-trigger="click" hx-post="/debug/add_random" hx-swap="none">
-                            Add random debug entry
-                        </button>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </main>
-</div>
-{% endblock %}

crates/app/src/pages/home.html

@@ -1,43 +0,0 @@
-{% extends "base.html" %}
-{% import "navbar/navbar.html" as navbar -%}
-
-{% block title %}Pharma Libre - Accueil{% endblock %}
-
-{% block body %}
-{% call navbar::navbar(current="home") %}
-<div class="py-10">
-  <header id="page-header">
-    <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
-      <h1
-        id="page-title"
-        class="text-3xl font-bold leading-tight tracking-tight text-gray-900"
-      >
-        Accueil
-      </h1>
-    </div>
-  </header>
-  <main id="page-main">
-    <div
-      class="mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8"
-    >
-      <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-4">
-        <div
-          class="border-2 border-dashed border-gray-300 rounded-lg dark:border-gray-600 h-32 md:h-64"
-        >A</div>
-        <div
-          class="border-2 border-dashed rounded-lg border-gray-300 dark:border-gray-600 h-32 md:h-64"
-        >B</div>
-        <div
-          class="border-2 border-dashed rounded-lg border-gray-300 dark:border-gray-600 h-32 md:h-64"
-        >C</div>
-        <div
-          class="border-2 border-dashed rounded-lg border-gray-300 dark:border-gray-600 h-32 md:h-64"
-        >D</div>
-      </div>
-      <div
-        class="border-2 border-dashed rounded-lg border-gray-300 dark:border-gray-600 h-96 mb-4"
-      >E</div>
-    </div>
-  </main>
-</div>
-{% endblock %}

crates/app/src/pages/home.rs

@@ -1,12 +0,0 @@
-use askama_axum::Template;
-use axum_htmx::HxRequest;
-
-#[derive(Template)]
-#[template(path = "home.html")]
-pub struct GetHomeTemplate {
-    hx_request: bool,
-}
-
-pub async fn home(HxRequest(hx_request): HxRequest) -> GetHomeTemplate {
-    GetHomeTemplate { hx_request }
-}

crates/app/src/pages/mod.rs

@@ -1,14 +0,0 @@
-use axum::{routing, Router};
-
-use crate::AppState;
-
-mod cps;
-mod debug;
-mod home;
-
-pub fn get_routes() -> Router<AppState> {
-    Router::new()
-        .route("/", routing::get(home::home))
-        .route("/cps", routing::get(cps::cps))
-        .nest("/debug", debug::get_routes())
-}

crates/app/tailwind.config.js

@@ -1,12 +0,0 @@
-/** @type {import('tailwindcss').Config} */
-module.exports = {
-  content: [
-    './src/**/*.html',
-    './css/**/*.css',
-  ],
-  theme: {
-    extend: {},
-  },
-  plugins: [],
-}
-

crates/backend/Cargo.toml

@@ -1,33 +1,29 @@
 [package]
-name = "app"
+name = "backend"
 version = "0.1.0"
 edition = "2021"
 
 [dependencies]
-askama = "0.12.1"
+anyhow = "1.0.89"
-askama_axum = "0.4.0"
+axum = { version = "0.7.6", features = ["macros"] }
-axum.workspace = true
-axum-htmx = { version = "0.6", features = ["auto-vary"] }
-futures = "0.3.30"
 listenfd = "1.0.1"
-notify = "6.1.1"
+tokio = { version = "1.40.0", features = ["macros", "rt-multi-thread"] }
+
 sea-orm = { workspace = true, features = [
     # Same `ASYNC_RUNTIME` and `DATABASE_DRIVER` as in the migration crate
     "sqlx-sqlite",
     "runtime-tokio-rustls",
     "macros",
 ] }
-serde = { version = "1.0.204", features = ["derive"] }
+serde.workspace = true
 thiserror.workspace = true
-tokio = { workspace = true, features = ["macros", "rt-multi-thread"] }
-tower-http = { version = "0.5.2", features = ["fs"] }
-tower-livereload = "0.9.3"
 
 entity = { path = "../../entity" }
 migration = { path = "../../migration" }
 utils = { path = "../utils" }
+tower-http = { version = "0.6.1", features = ["cors"] }
 
 [dev-dependencies]
-cargo-watch = "8.5.1"
+cargo-watch = "8.5.2"
-systemfd = "0.4.0"
 sea-orm-cli.workspace = true
+systemfd = "0.4.3"

crates/backend/README.md

@@ -0,0 +1,28 @@
+# Backend
+
+Ceci est un serveur backend, basé sur axum, et permettant d'offrir une gestion centralisée des accès aux données.
+
+## Prérequis
+
+En développement, le mécanisme de hot-reload nécessite de disposer de `cargo-watch` et `systemfd`. Pour les installer, exécutez la commande suivante :
+
+```bash
+cargo install cargo-watch systemfd
+```
+
+## Configuration
+
+> Astuce : lorsqu'on exécute directement la crate `backend` à des fins de développement, le système de configuration n'utilisera pas l'éventuel fichier `.env` situé à la racine du workspace Rust. Pour éviter de dupliquer le fichier `.env`, il est possible de créer un lien symbolique vers le fichier `.env` de la crate `backend` :
+
+```bash
+cd crates/backend
+ln -s ../../.env .env
+```
+
+## Développement
+
+Pour lancer le serveur en mode développement, exécutez la commande suivante :
+
+```bash
+systemfd --no-pid -s http::8080 -- cargo watch -x 'run --bin backend'
+```

crates/backend/src/api/debug.rs

@@ -1,11 +1,12 @@
-use askama_axum::Template;
+use axum::{extract::State, routing, Json};
-use axum::{extract::State, routing};
+use sea_orm::*;
+use serde::Serialize;
 
 use ::entity::{debug, debug::Entity as DebugEntity};
-use axum_htmx::HxRequest;
-use sea_orm::*;
 
-use crate::AppState;
+use crate::{AppError, AppState};
+
+// DATABASE DEBUG CONTROLLERS
 
 async fn get_debug_entries(db: &DatabaseConnection) -> Result<Vec<debug::Model>, DbErr> {
     DebugEntity::find().all(db).await
@@ -20,25 +21,24 @@ async fn add_random_debug_entry(State(AppState { db_connection }): State<AppStat
     random_entry.insert(&db_connection).await.unwrap();
 }
 
-#[derive(Template)]
+// API HANDLER
-#[template(path = "debug.html")]
+
-struct GetDebugTemplate {
+#[derive(Serialize, Debug)]
-    hx_request: bool,
+struct DebugResponse {
     db_ping_status: bool,
-    debug_entries_count: usize,
+    entries: Vec<debug::Model>,
 }
 
+#[axum::debug_handler]
 async fn debug(
-    HxRequest(hx_request): HxRequest,
     State(AppState { db_connection }): State<AppState>,
-) -> GetDebugTemplate {
+) -> Result<Json<DebugResponse>, AppError> {
     let db_ping_status = db_connection.ping().await.is_ok();
-    let debug_entries = get_debug_entries(&db_connection).await.unwrap();
+    let debug_entries = get_debug_entries(&db_connection).await?;
-    GetDebugTemplate {
+    Ok(Json(DebugResponse {
-        hx_request,
         db_ping_status,
-        debug_entries_count: debug_entries.len(),
+        entries: debug_entries,
-    }
+    }))
 }
 
 pub fn get_routes() -> axum::Router<crate::AppState> {

crates/backend/src/api/mod.rs

@@ -0,0 +1,9 @@
+use axum::Router;
+
+use crate::AppState;
+
+mod debug;
+
+pub fn get_routes() -> Router<AppState> {
+    Router::new().nest("/debug", debug::get_routes())
+}

crates/backend/src/lib.rs

@@ -0,0 +1,72 @@
+use anyhow::Error as AnyError;
+use axum::http::{header, StatusCode, Uri};
+use axum::response::{IntoResponse, Response};
+use axum::{routing::get, Router};
+use sea_orm::{DatabaseConnection, DbErr};
+use thiserror::Error;
+use tower_http::cors::{Any, CorsLayer};
+
+use ::utils::config::{load_config, ConfigError};
+
+mod api;
+mod db;
+
+#[derive(Error, Debug)]
+pub enum InitError {
+    #[error(transparent)]
+    ConfigError(#[from] ConfigError),
+}
+
+pub fn init() -> Result<(), InitError> {
+    load_config(None)?;
+    Ok(())
+}
+
+#[derive(Clone)]
+pub struct AppState {
+    db_connection: DatabaseConnection,
+}
+
+pub async fn get_router() -> Result<Router, DbErr> {
+    let db_connection = db::get_connection().await?;
+    let state: AppState = AppState { db_connection };
+
+    let cors = CorsLayer::new()
+        .allow_methods(Any)
+        .allow_origin(Any)
+        .allow_headers([header::CONTENT_TYPE]);
+
+    Ok(Router::new()
+        .route("/", get(|| async { "Hello, world!" }))
+        .merge(api::get_routes())
+        .fallback(fallback)
+        .with_state(state)
+        .layer(cors))
+}
+
+async fn fallback(uri: Uri) -> (StatusCode, String) {
+    (StatusCode::NOT_FOUND, format!("No route for {uri}"))
+}
+
+struct AppError(AnyError);
+
+// To automatically convert `AppError` into a response
+impl IntoResponse for AppError {
+    fn into_response(self) -> Response {
+        (
+            StatusCode::INTERNAL_SERVER_ERROR,
+            format!("Internal Server Error: {}", self.0),
+        )
+            .into_response()
+    }
+}
+
+// To automatically convert `AnyError` into `AppError`
+impl<E> From<E> for AppError
+where
+    E: Into<AnyError>,
+{
+    fn from(err: E) -> Self {
+        Self(err.into())
+    }
+}

crates/backend/src/main.rs

@@ -0,0 +1,39 @@
+use listenfd::ListenFd;
+use thiserror::Error;
+use tokio::net::TcpListener;
+
+use backend::{get_router, init, InitError};
+
+#[derive(Error, Debug)]
+pub enum BackendError {
+    #[error("Error while setting up or serving the TCP listener")]
+    ServeTCPListener(#[from] std::io::Error),
+    #[error("Error while initialising the backend")]
+    InitError(#[from] InitError),
+    #[error("Error with the database connection")]
+    DatabaseConnection(#[from] sea_orm::DbErr),
+}
+
+#[tokio::main]
+async fn main() -> Result<(), BackendError> {
+    init()?;
+
+    let app = get_router().await?;
+
+    let mut listenfd = ListenFd::from_env();
+    let listener = match listenfd.take_tcp_listener(0)? {
+        // if we are given a tcp listener on listen fd 0, we use that one
+        Some(listener) => {
+            listener.set_nonblocking(true)?;
+            TcpListener::from_std(listener)?
+        }
+        // otherwise fall back to local listening
+        None => TcpListener::bind("0.0.0.0:8080").await?,
+    };
+
+    let local_addr = listener.local_addr()?;
+    println!("Listening on http://{}", local_addr);
+    axum::serve(listener, app).await?;
+
+    Ok(())
+}

crates/desktop/Cargo.toml

@@ -10,16 +10,15 @@ name = "desktop_lib"
 crate-type = ["lib", "cdylib", "staticlib"]
 
 [build-dependencies]
-tauri-build = { version = "2.0.0-beta", features = [] }
+tauri-build = { version = "2.0.0-rc", features = [] }
 
 [dependencies]
-axum.workspace = true
 bytes = "1.6.1"
 http = "1.1.0"
-tauri = { version = "2.0.0-beta", features = [] }
+serde = { version = "1", features = ["derive"] }
-thiserror.workspace = true
+serde_json = "1"
+tauri = { version = "2.0.0-rc", features = [] }
+tauri-plugin-shell = "2.0.0-rc"
 tower = "0.4.13"
-tokio.workspace = true
-
-app = { path = "../app" }
 
+thiserror.workspace = true

crates/desktop/capabilities/default.json

@@ -0,0 +1,10 @@
+{
+  "$schema": "../gen/schemas/desktop-schema.json",
+  "identifier": "default",
+  "description": "Capability for the main window",
+  "windows": ["main"],
+  "permissions": [
+    "core:default",
+    "shell:allow-open"
+  ]
+}

crates/desktop/src/lib.rs

@@ -1,92 +1,14 @@
-use axum::body::{to_bytes, Body};
+// Learn more about Tauri commands at https://tauri.app/v1/guides/features/command
-use axum::Router;
+#[tauri::command]
-use bytes::Bytes;
+fn greet(name: &str) -> String {
-use http::{request, response, Request, Response};
+    format!("Hello, {}! You've been greeted from Rust!", name)
-use std::path::PathBuf;
-use std::sync::Arc;
-use tauri::path::BaseDirectory;
-use tauri::Manager;
-use thiserror::Error;
-use tokio::sync::{Mutex, MutexGuard};
-use tower::{Service, ServiceExt};
-
-use ::app::init;
-
-#[derive(Error, Debug)]
-pub enum DesktopError {
-    #[error("Axum error:\n{0}")]
-    Axum(#[from] axum::Error),
-    #[error("Infallible error")]
-    Infallible(#[from] std::convert::Infallible),
-}
-
-/// Process requests sent to Tauri (with the `axum://` protocol) and handle them with Axum
-/// When an error occurs, this function is expected to panic, which should result in a 500 error
-/// being sent to the client, so we let the client handle the error recovering
-async fn process_tauri_request(
-    tauri_request: Request<Vec<u8>>,
-    mut router: MutexGuard<'_, Router>,
-) -> Result<Response<Vec<u8>>, DesktopError> {
-    let (parts, body): (request::Parts, Vec<u8>) = tauri_request.into_parts();
-    let axum_request: Request<Body> = Request::from_parts(parts, body.into());
-
-    let axum_response: Response<Body> = router
-        .as_service()
-        .ready()
-        .await
-        .map_err(DesktopError::Infallible)?
-        .call(axum_request)
-        .await
-        .map_err(DesktopError::Infallible)?;
-
-    let (parts, body): (response::Parts, Body) = axum_response.into_parts();
-    let body: Bytes = to_bytes(body, usize::MAX).await?;
-
-    let tauri_response: Response<Vec<u8>> = Response::from_parts(parts, body.into());
-    Ok(tauri_response)
 }
 
 #[cfg_attr(mobile, tauri::mobile_entry_point)]
 pub fn run() {
-    init().expect("Failed to initialize the application");
-
     tauri::Builder::default()
-        .setup(|app| {
+        .plugin(tauri_plugin_shell::init())
-            let assets_path: PathBuf = app
+        .invoke_handler(tauri::generate_handler![greet])
-                .path()
-                .resolve("assets", BaseDirectory::Resource)
-                .expect("Assets path should be resolvable");
-
-            // Adds Axum router to application state
-            // This makes it so we can retrieve it from any app instance (see bellow)
-            let router = Arc::new(Mutex::new(app::get_router(assets_path)));
-
-            app.manage(router);
-
-            Ok(())
-        })
-        .register_asynchronous_uri_scheme_protocol("axum", move |app, request, responder| {
-            // Retrieve the router from the application state and clone it for the async block
-            let router = Arc::clone(&app.state::<Arc<Mutex<axum::Router>>>());
-
-            // Spawn a new async task to process the request
-            tauri::async_runtime::spawn(async move {
-                let router = router.lock().await;
-                match process_tauri_request(request, router).await {
-                    Ok(response) => responder.respond(response),
-                    Err(err) => {
-                        let body = format!("Failed to process an axum:// request:\n{}", err);
-                        responder.respond(
-                            http::Response::builder()
-                                .status(http::StatusCode::BAD_REQUEST)
-                                .header(http::header::CONTENT_TYPE, "text/plain")
-                                .body::<Vec<u8>>(body.into())
-                                .expect("BAD_REQUEST response should be valid"),
-                        )
-                    }
-                }
-            });
-        })
         .run(tauri::generate_context!())
         .expect("error while running tauri application");
 }

crates/desktop/tauri.conf.json

@@ -1,20 +1,24 @@
 {
-  "productName": "Logiciel Pharma",
+  "$schema": "https://schema.tauri.app/config/2.0.0-rc",
+  "productName": "Chrys4lide LGO",
   "version": "0.0.1",
-  "identifier": "org.p4pillon.pharma.desktop",
+  "identifier": "org.p4pillon.chrys4lide.lgo",
   "build": {
     "beforeDevCommand": {
-        "cwd": "../app",
+      "cwd": "../../frontend",
-        "script": "cargo run"
+      "script": "bun run dev"
     },
-    "devUrl": "http://localhost:3000",
+    "devUrl": "http://localhost:1420",
-    "frontendDist": "axum://place.holder/"
+    "beforeBuildCommand": {
+      "cwd": "../../frontend",
+      "script": "bun run generate"
+    },
+    "frontendDist": "../../frontend/dist"
   },
   "app": {
-    "withGlobalTauri": true,
     "windows": [
       {
-        "title": "Logiciel Pharma",
+        "title": "Chrys4lide | LG0",
         "width": 800,
         "height": 600
       }
@@ -25,9 +29,6 @@
   },
   "bundle": {
     "active": true,
-    "resources": {
-        "../app/assets/": "./assets/"
-    },
     "targets": "all",
     "icon": [
       "icons/32x32.png",
@@ -37,5 +38,4 @@
       "icons/icon.ico"
     ]
   }
-                
 }

entity/Cargo.toml

@@ -9,6 +9,7 @@ path = "src/lib.rs"
 
 [dependencies]
 sea-orm.workspace = true
+serde.workspace = true
 
 [dev-dependencies]
 sea-orm-cli.workspace = true

entity/src/entities/debug.rs

@@ -1,8 +1,9 @@
 //! `SeaORM` Entity, @generated by sea-orm-codegen 1.0.1
 
 use sea_orm::entity::prelude::*;
+use serde::{Deserialize, Serialize};
 
-#[derive(Clone, Debug, PartialEq, DeriveEntityModel, Eq)]
+#[derive(Clone, Debug, PartialEq, DeriveEntityModel, Eq, Serialize, Deserialize)]
 #[sea_orm(table_name = "debug")]
 pub struct Model {
     #[sea_orm(primary_key)]

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/README.md

@@ -0,0 +1,77 @@
+# Nuxt 3 Minimal Starter
+
+TODO : Faire un vrai README pour `frontend` (Nuxt 3)
+
+Look at the [Nuxt 3 documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.
+
+## Setup
+
+Make sure to install the dependencies:
+
+```bash
+# npm
+npm install
+
+# pnpm
+pnpm install
+
+# yarn
+yarn install
+
+# bun
+bun install
+```
+
+## Development Server
+
+Start the development server on `http://localhost:3000`:
+
+```bash
+# npm
+npm run dev
+
+# pnpm
+pnpm run dev
+
+# yarn
+yarn dev
+
+# bun
+bun run dev
+```
+
+## Production
+
+Build the application for production:
+
+```bash
+# npm
+npm run build
+
+# pnpm
+pnpm run build
+
+# yarn
+yarn build
+
+# bun
+bun run build
+```
+
+Locally preview production build:
+
+```bash
+# npm
+npm run preview
+
+# pnpm
+pnpm run preview
+
+# yarn
+yarn preview
+
+# bun
+bun run preview
+```
+
+Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.

frontend/app.vue

@@ -0,0 +1,8 @@
+<template>
+  <div>
+    <NuxtLoadingIndicator />
+    <NuxtRouteAnnouncer />
+    <NavBar />
+    <NuxtPage />
+  </div>
+</template>

frontend/app/spa-loading-template.html

@@ -0,0 +1,43 @@
+<!-- 
+    This component is used to show a loading spinner when the SPA is loading.
+    Source: https://github.com/barelyhuman/snips/blob/dev/pages/css-loader.md
+-->
+<div class="loader"></div>
+<style>
+.loader {
+  display: block;
+  position: fixed;
+  z-index: 1031;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 18px;
+  height: 18px;
+  box-sizing: border-box;
+  border: solid 2px transparent;
+  border-top-color: #000;
+  border-left-color: #000;
+  border-bottom-color: #efefef;
+  border-right-color: #efefef;
+  border-radius: 50%;
+  -webkit-animation: loader 400ms linear infinite;
+  animation: loader 400ms linear infinite;
+}
+
+\@-webkit-keyframes loader {
+  0% {
+    -webkit-transform: translate(-50%, -50%) rotate(0deg);
+  }
+  100% {
+    -webkit-transform: translate(-50%, -50%) rotate(360deg);
+  }
+}
+\@keyframes loader {
+  0% {
+    transform: translate(-50%, -50%) rotate(0deg);
+  }
+  100% {
+    transform: translate(-50%, -50%) rotate(360deg);
+  }
+}
+</style>

frontend/components/Avatar.vue

@@ -0,0 +1,22 @@
+<template>
+    <div class="avatar">
+        <div class="rounded-full">
+            <img :src="getAvatarUrl(user)" />
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+    import type { User } from '~/types/user';
+
+    const props = defineProps<{
+        user: User,
+    }>();
+
+    const getAvatarUrl = (user: User) => {
+        if (user.avatar) {
+            return user.avatar;
+        }
+        return 'https://avatar.iran.liara.run/username?username=' + user.name;
+    };
+</script>

frontend/components/LoginModal.vue

@@ -0,0 +1,71 @@
+<template>
+    <dialog
+        id="login_modal"
+        ref="login_modal"
+        @cancel.prevent=""
+        @keyup="handleKeyPress"
+        class="modal"
+    >
+        <div class="modal-box">
+            <h3 class="text-3xl text-center mb-6">Connexion</h3>
+            <div class="flex flex-wrap gap-5 justify-center">
+                <template v-for="(user, index) in users" :key="user.id">
+                    <LoginModalAvatar
+                        :user="user"
+                        :rank="index+1"
+                        @selectUser="login"
+                    />
+                </template>
+            </div>
+        </div>
+        <form method="dialog" class="modal-backdrop">
+            <button class="cursor-default">close</button>
+        </form>
+    </dialog>
+</template>
+
+<script setup lang="ts">
+    import type { User } from '~/types/user';
+
+    const users: User[] = [
+        { id: 1, name: 'John Doe', avatar: 'https://img.daisyui.com/images/stock/photo-1534528741775-53994a69daeb.webp' },
+        { id: 2, name: 'Jane Doe', avatar: 'https://avatar.iran.liara.run/public' },
+        { id: 3, name: 'Michel Moulin', avatar: '' },
+        { id: 4, name: 'Jean Paris', avatar: '' },
+        { id: 5, name: 'Marie Dupont', avatar: '' },
+        { id: 6, name: 'Émilie Fournier', avatar: '' },
+        { id: 7, name: 'Pierre Lefevre', avatar: '' },
+        { id: 8, name: 'Sophie Lemoine', avatar: '' },
+        { id: 9, name: 'Lucie Simon', avatar: '' },
+        { id: 10, name: 'Kevin Boucher', avatar: '' },
+    ];
+
+    const loginModal = useTemplateRef('login_modal');
+
+    const current_user = useCurrentUser();
+
+    const login = (user: User) => {
+        console.log('login', user);
+        current_user.value = user;
+        loginModal.value?.close();
+    };
+
+    const handleKeyPress = (event: KeyboardEvent) => {
+        // Extract the rank from the event.code : Digit7 -> 7
+        const rank = event.code.match(/\d/);
+        if (!rank) {
+            console.debug('Not handled key event', { event });
+            return;
+        }
+        const user = getUserByRank(parseInt(rank[0]));
+        if (user) {
+            login(user);
+        } else {
+            console.debug('Not handled key event', { event });
+        }
+    };
+
+    const getUserByRank = (rank: number): User => {
+        return users[rank - 1];
+    };
+</script>

frontend/components/LoginModalAvatar.vue

@@ -0,0 +1,17 @@
+<template>
+    <button class="relative" @click="$emit('selectUser', user)">
+        <Avatar class="w-24" :user="user" />
+        <div class="absolute w-fit mx-auto bottom-0 inset-x-0">
+            <kbd class="kbd kbd-sm">{{ rank }}</kbd>
+        </div>
+    </button>
+</template>
+
+<script setup lang="ts">
+    import type { User } from '~/types/user';
+
+    const props = defineProps<{
+        user: User,
+        rank: Number,
+    }>();
+</script>

frontend/components/NavBar.vue

@@ -0,0 +1,36 @@
+<template>
+    <div class="navbar">
+        <div class="navbar-start">
+            <a class="btn btn-ghost text-xl" href="/">Chrys4lide</a>
+        </div>
+        <nav class="navbar-center">
+            <NuxtLink to="/" class="btn btn-ghost">Accueil</NuxtLink>
+            <NuxtLink to="/CPS" class="btn btn-ghost">Carte CPS</NuxtLink>
+            <NuxtLink to="/debug" class="btn btn-ghost">Debug</NuxtLink>
+        </nav>
+        <div class="navbar-end">
+            <template v-if="!current_user">
+                <button class="btn btn-ghost" type="button" onclick="login_modal.showModal()">
+                    Connexion
+                </button>
+            </template>
+            <template v-else>
+                <details class="dropdown dropdown-end">
+                    <summary class="block"><Avatar :user="current_user" class="w-12" role="button" /></summary>
+                    <ul class="menu dropdown-content bg-base-100 rounded-box z-[1] w-52 p-2 shadow">
+                        <li><a @click="logout">Déconnexion</a></li>
+                    </ul>
+                </details>
+            </template>
+        </div>
+    </div>
+    <LoginModal />
+</template>
+
+<script setup lang="ts">
+    const current_user = useCurrentUser();
+
+    const logout = () => {
+        current_user.value = null;
+    };
+</script>

frontend/composables/currentUser.ts

@@ -0,0 +1,3 @@
+import type { User } from '@/types/user';
+
+export const useCurrentUser = () => useState<User | null>('currentUser', () => null);

frontend/nuxt.config.ts

@@ -0,0 +1,39 @@
+// https://nuxt.com/docs/api/configuration/nuxt-config
+export default defineNuxtConfig({
+  compatibilityDate: '2024-04-03',
+  // Enables the development server to be discoverable by other devices for mobile development
+  devServer: { host: '0.0.0.0', port: 1420 },
+  devtools: { enabled: true },
+  modules: [
+    '@nuxtjs/tailwindcss',
+    '@nuxtjs/color-mode',
+  ],
+  // Disable SSR for Tauri
+  ssr: false,
+  vite: {
+    // Better support for Tauri CLI output
+    clearScreen: false,
+    // Enable environment variables
+    // Additional environment variables can be found at
+    // https://v2.tauri.app/reference/environment-variables/
+    envPrefix: ['VITE_', 'TAURI_'],
+    server: {
+      // Tauri requires a consistent port
+      strictPort: true,
+      hmr: {
+        // Use websocket for mobile hot reloading
+        protocol: 'ws',
+        // Make sure it's available on the network
+        host: '0.0.0.0',
+        // Use a specific port for hmr
+        port: 5183,
+      },
+    },
+  },
+  colorMode: {
+    // Add `data-theme` attribute to the `html` tag, allowing DaisyUI to handle dark mode automatically
+    dataValue: 'theme',
+    // Remove the default `-mode` suffix from the class name, letting have `dark` and `light` as class names, for DaisyUI compatibility
+    classSuffix: '',
+  },
+})

frontend/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "nuxt-app",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "build": "nuxi build",
+    "dev": "nuxi dev",
+    "generate": "nuxi generate",
+    "preview": "nuxi preview",
+    "postinstall": "nuxi prepare"
+  },
+  "dependencies": {
+    "@nuxtjs/color-mode": "^3.5.1",
+    "daisyui": "^4.12.10",
+    "nuxt": "^3.13.0",
+    "vue": "latest",
+    "vue-router": "latest"
+  },
+  "devDependencies": {
+    "@nuxtjs/tailwindcss": "^6.12.1"
+  }
+}

frontend/pages/CPS.vue

@@ -0,0 +1,8 @@
+<template>
+    <div>
+        <h1 class="text-xl">Carte CPS</h1>
+    </div>
+</template>
+
+<script setup>
+</script>

frontend/pages/debug.vue

@@ -0,0 +1,67 @@
+<template>
+    <div>
+        <h1 class="text-3xl mb-8">Debug</h1>
+        <div class="stats shadow mb-8">
+            <div class="stat">
+                <div class="stat-title">DB Ping Status</div>
+                <div class="stat-value">{{ data?.db_ping_status || "?" }}</div>
+            </div>
+            <div class="stat">
+                <div class="stat-title">Entries Count</div>
+                <div class="stat-value">{{ data?.entries.length || "?" }}</div>
+                <div class="stat-actions">
+                    <button class="btn btn-sm" @click="addRandomEntry">Add entry</button>
+                </div>
+            </div>
+            <div class="stat">
+                <div class="stat-title">Network status</div>
+                <div class="stat-value">{{ status }}</div>
+                <div class="stat-description">{{ error }}</div>
+            </div>
+        </div>
+        <div>
+            <h2 class="text-2xl mb-4">Entries</h2>
+            <table class="table">
+                <thead>
+                    <tr>
+                        <th>Id</th>
+                        <th>Title</th>
+                        <th>Text</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr v-for="entry in data?.entries" :key="entry.id">
+                        <td>{{ entry.id }}</td>
+                        <td>{{ entry.title }}</td>
+                        <td>{{ entry.text }}</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+    type Entry = {
+        id: number;
+        title: string;
+        text: string;
+    };
+    type DebugResponse = {
+        db_ping_status: string;
+        entries: Entry[];
+    };
+
+    
+    // TODO : handle a default backend URL by building a custom `$fetch` and `useFetch` functions with a `baseURL` option : https://nuxt.com/docs/guide/recipes/custom-usefetch#custom-fetch
+    
+    const { data, refresh, error, status } = await useFetch<DebugResponse>('http://127.0.0.1:8080/debug');
+
+    async function addRandomEntry() {
+        await $fetch('http://127.0.0.1:8080/debug/add_random', {
+            method: 'POST',
+        });
+        refresh();
+    }
+
+</script>

frontend/pages/index.vue

@@ -0,0 +1,17 @@
+<template>
+    <div>
+        <h1 class="text-xl">Welcome to your {{ appName }}!</h1>
+        <p v-if="current_user">Logged in as {{ current_user.name }}</p>
+    </div>
+</template>
+
+<script setup lang="ts">
+    const current_user = useCurrentUser();
+    const appName = 'Nuxt App';
+</script>
+
+<style scoped>
+h1 {
+    color: #42b983;
+}
+</style>

frontend/public/robots.txt

@@ -0,0 +1 @@
+

frontend/server/tsconfig.json

@@ -0,0 +1,3 @@
+{
+  "extends": "../.nuxt/tsconfig.server.json"
+}

frontend/tailwind.config.ts

@@ -0,0 +1,7 @@
+import type { Config } from 'tailwindcss'
+
+export default <Partial<Config>>{
+    plugins: [
+        require('daisyui'),
+    ],
+}

frontend/tsconfig.json

@@ -0,0 +1,4 @@
+{
+  // https://nuxt.com/docs/guide/concepts/typescript
+  "extends": "./.nuxt/tsconfig.json"
+}

frontend/types/user.ts

@@ -0,0 +1,6 @@
+export declare interface User {
+    id: number;
+    name: string;
+    email?: string;
+    avatar?: string;
+}