From 32eb20b5a041a6aa07324bae1c110d296e9ed556 Mon Sep 17 00:00:00 2001
From: pr-daaif <prof-daaif@enset-media.ac.ma>
Date: Thu, 16 Jul 2026 21:11:46 +0100
Subject: [PATCH] =?UTF-8?q?fix(web):=20connexion=20=E2=80=94=20signaler=20?=
 =?UTF-8?q?clairement=20une=20API=20injoignable?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Le formulaire email/mot de passe s'affichait seul, sans explication, quand
l'API locale n'était pas démarrée (la liste démo était masquée comme si
DEMO_MODE était absent). Une erreur réseau affiche désormais « L'API ne
répond pas — démarrez-la avec pnpm dev » ; le 404 (pas de mode démo)
reste silencieux, c'est le comportement ADR-002.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 apps/web/src/auth/use-auth.ts    | 9 ++++++---
 apps/web/src/pages/connexion.tsx | 8 +++++++-
 2 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/apps/web/src/auth/use-auth.ts b/apps/web/src/auth/use-auth.ts
index 54ba465..a170b85 100644
--- a/apps/web/src/auth/use-auth.ts
+++ b/apps/web/src/auth/use-auth.ts
@@ -21,7 +21,9 @@ export function useMe() {
 }
 
 /** ADR-002 : la liste n'existe qu'en DEMO_MODE — un 404 signifie « pas de
- *  mode démo », le web n'affiche alors rien (null). */
+ *  mode démo », le web n'affiche alors rien (null). Une ERREUR RÉSEAU, en
+ *  revanche, signifie que l'API est injoignable : l'écran de connexion
+ *  l'affiche clairement (isError) au lieu de masquer la démo en silence. */
 export function useDemoAccounts() {
   return useQuery({
     queryKey: ['demo-accounts'],
@@ -29,8 +31,9 @@ export function useDemoAccounts() {
     staleTime: 5 * 60_000,
     queryFn: async () => {
       const { data, response } = await api.GET('/auth/demo-accounts');
-      if (response.status === 404) return null;
-      return data?.accounts ?? null;
+      if (response.status === 404) return null; // pas de mode démo : normal
+      if (!data) throw new Error(`API : ${response.status}`);
+      return data.accounts;
     },
   });
 }
diff --git a/apps/web/src/pages/connexion.tsx b/apps/web/src/pages/connexion.tsx
index 552a861..9487bdc 100644
--- a/apps/web/src/pages/connexion.tsx
+++ b/apps/web/src/pages/connexion.tsx
@@ -11,7 +11,7 @@ export default function PageConnexion() {
   const navigate = useNavigate();
   const login = useLogin();
   const demoLogin = useDemoLogin();
-  const { data: demoAccounts } = useDemoAccounts();
+  const { data: demoAccounts, isError: apiInjoignable } = useDemoAccounts();
   const [email, setEmail] = useState('');
   const [password, setPassword] = useState('');
 
@@ -33,6 +33,12 @@ export default function PageConnexion() {
     <div className="conn">
       <div className="carte-conn">
         <Logo sousTitre="Maintenance d'ascenseurs" />
+        {apiInjoignable ? (
+          <p className="erreur-form" role="alert">
+            L'API ne répond pas — en local, démarrez-la avec <code>pnpm dev</code>{' '}
+            (à la racine, elle lance l'API et le web ensemble).
+          </p>
+        ) : null}
         <form
           onSubmit={surConnexion}
           className="flex flex-col gap-[14px]"