Implement DDS exercise, customer UI and local demo

frontend/src/features/auth/Login.tsx

@@ -1,9 +1,32 @@
 // Экран входа. Ставится перед всеми остальными: номер занятия перестал быть
 // пропуском, по ссылке пускает роль, а не знание адреса (lct-23).
 
-import { useState, type ReactNode } from "react";
+import { useState, type MouseEvent, type ReactNode } from "react";
 
-import { SCREENS, useLogin, useLogout, useMe } from "./useAuth";
+import { DEMO_MODE, SCREENS, useDemoLogin, useLogin, useLogout, useMe } from "./useAuth";
+
+function DemoLinks() {
+  const openScreen = (event: MouseEvent<HTMLAnchorElement>, path: string) => {
+    event.preventDefault();
+    const current = new URLSearchParams(window.location.search);
+    const session = current.get("session") || window.sessionStorage.getItem("demo_session");
+    if (session) window.sessionStorage.setItem("demo_session", session);
+    const target = new URL(path, window.location.origin);
+    if (session) target.searchParams.set("session", session);
+    if (path === "/dds") target.searchParams.set("role", current.get("role") || "dds_01");
+    window.location.assign(target.pathname + target.search);
+  };
+
+  return <nav className="demo-switcher" aria-label="Демо-переходы между АРМ">
+    <details><summary>Демо · экраны</summary>
+      <div>
+        <a href="/instructor" onClick={(event) => openScreen(event, "/instructor")}>Преподаватель</a>
+        <a href="/trainee" onClick={(event) => openScreen(event, "/trainee")}>Оператор 112</a>
+        <a href="/dds" onClick={(event) => openScreen(event, "/dds")}>ДДС</a>
+      </div>
+    </details>
+  </nav>;
+}
 
 export function RequireAuth({ screen, children }: { screen: string; children: ReactNode }) {
   const me = useMe();
@@ -14,7 +37,9 @@ export function RequireAuth({ screen, children }: { screen: string; children: Re
   }
   if (!me.data) return <Login />;
 
-  const allowed = SCREENS[me.data.role] ?? [];
+  const demoUser = DEMO_MODE && ["dev", "demo-instructor"].includes(me.data.login)
+    && me.data.role === "instructor";
+  const allowed = [...(SCREENS[me.data.role] ?? []), ...(demoUser ? ["/trainee"] : [])];
   if (!allowed.includes(screen)) {
     return (
       <main className="page">
@@ -27,11 +52,12 @@ export function RequireAuth({ screen, children }: { screen: string; children: Re
       </main>
     );
   }
-  return <>{children}</>;
+  return <>{children}{demoUser && <DemoLinks />}</>;
 }
 
 function Login() {
   const login = useLogin();
+  const demoLogin = useDemoLogin();
   const [name, setName] = useState("");
   const [password, setPassword] = useState("");
 
@@ -70,6 +96,17 @@ function Login() {
           </button>
         </p>
       </form>
+      {DEMO_MODE && <div className="demo-login">
+        <p>Локальный деморежим: вход без учётной записи доступен только при включённом обходе авторизации на backend.</p>
+        <button type="button" disabled={demoLogin.isPending} onClick={() => demoLogin.mutate()}>
+          {demoLogin.isPending ? "Входим…" : "Войти в демо одним нажатием"}
+        </button>
+        {demoLogin.isError && <p className="warn" role="alert">
+          {demoLogin.error instanceof Error && demoLogin.error.message === "404"
+            ? "Демо-вход выключен на сервере: запустите backend с DEV_AUTH_BYPASS=true."
+            : "Не удалось выполнить демо-вход. Проверьте подключение к локальному backend."}
+        </p>}
+      </div>}
       {/* Причину отказа не уточняем: «нет такого логина» — это список
           действующих учётных записей для того, кто подбирает. */}
       {login.isError && <p className="warn">Логин или пароль неверны</p>}

frontend/src/features/auth/useAuth.ts

@@ -5,6 +5,10 @@ import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 
 import type { Role } from "@/shared/types/generated";
 
+// Vite подставляет значение при сборке. В обычном стенде демо-вход и его
+// элементы интерфейса отсутствуют, даже если backend поддерживает endpoint.
+export const DEMO_MODE = import.meta.env.VITE_DEMO_MODE === "true";
+
 export interface Principal {
   login: string;
   full_name: string;
@@ -47,6 +51,17 @@ export function useLogin() {
   });
 }
 
+export function useDemoLogin() {
+  const cache = useQueryClient();
+  return useMutation({
+    mutationFn: () => {
+      if (!DEMO_MODE) throw new Error("demo_disabled");
+      return call<Principal>("/api/auth/dev-token", { method: "POST" });
+    },
+    onSuccess: (who) => cache.setQueryData(["me"], who),
+  });
+}
+
 export function useLogout() {
   const cache = useQueryClient();
   return useMutation({
@@ -58,7 +73,7 @@ export function useLogout() {
 /** Какие экраны открыты роли. Повторяет domain/roles.py: список короткий
  *  и меняется редко, а держать его на сервере ради двух строк — лишний запрос. */
 export const SCREENS: Record<Role, string[]> = {
-  admin: ["/admin", "/profile"],
-  instructor: ["/instructor", "/wall", "/profile", "/dds"],
+  admin: ["/admin", "/profile", "/groups"],
+  instructor: ["/instructor", "/wall", "/profile", "/dds", "/groups"],
   trainee: ["/trainee", "/dds", "/profile"],
 };