feat(web): patient web app with ЕМИАС (demo) and anonymous sign-in

A second channel to the same dialog engine as the Telegram bot: consent, onboarding, scales and check-ins come from app/dialog; the bot is unchanged. - API: /auth/emias (doctor's one-time connect code via EmiasMock), /auth/emias/demo (synthetic personas), /auth/anonymous (random token, nothing stored in the identity DB), /crisis/resources from crisis.yaml - web/: React + TS + Vite, mobile-first, safe areas, hash routing, tokens and texts isolated for a Capacitor mobile build Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
2026-10-04 07:57:00 +03:00
parent 4d331e4c05
commit b8a93ce9d4
28 changed files with 4697 additions and 5 deletions
@@ -0,0 +1,137 @@
+import { useEffect, useState, type FormEvent } from "react";
+import { useNavigate } from "react-router-dom";
+
+import { ApiError, api } from "../api/client";
+import type { AuthResult, DemoPersona } from "../api/types";
+import { AppShell, BackLink, Notice } from "../components/AppShell";
+import { Icon } from "../components/Icon";
+import { ru } from "../content/ru";
+import { useSession } from "../session/SessionContext";
+
+export function EmiasSignIn() {
+  const t = ru.emias;
+  const navigate = useNavigate();
+  const { signIn } = useSession();
+  const [code, setCode] = useState("");
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [personas, setPersonas] = useState<DemoPersona[] | null>(null);
+
+  useEffect(() => {
+    api
+      .demoPersonas()
+      .then(setPersonas)
+      .catch(() => setPersonas([]));
+  }, []);
+
+  const finish = (auth: AuthResult) => {
+    signIn(auth);
+    navigate("/chat", { replace: true });
+  };
+
+  const fail = (e: unknown) => {
+    setError(e instanceof ApiError && e.status === 401 ? t.codeError : t.networkError);
+    setBusy(false);
+  };
+
+  const submit = async (e: FormEvent) => {
+    e.preventDefault();
+    if (!code.trim() || busy) return;
+    setBusy(true);
+    setError(null);
+    try {
+      finish(await api.signInEmias(code.trim()));
+    } catch (err) {
+      fail(err);
+    }
+  };
+
+  const demo = async (persona: DemoPersona) => {
+    setBusy(true);
+    setError(null);
+    try {
+      finish(await api.signInEmiasDemo(persona.token));
+    } catch (err) {
+      fail(err);
+    }
+  };
+
+  return (
+    <AppShell>
+      <main className="page" id="main">
+        <div className="narrow">
+          <BackLink to="/">{t.back}</BackLink>
+          <section className="panel" aria-labelledby="emias-title">
+            <h1 id="emias-title" className="h2">
+              {t.title}
+            </h1>
+            <Notice>{t.demoNotice}</Notice>
+
+            <form className="form" onSubmit={submit} noValidate>
+              <div className={error ? "field field--error" : "field"}>
+                <label htmlFor="code" className="field__label">
+                  {t.codeLabel}
+                </label>
+                <input
+                  id="code"
+                  className="input"
+                  value={code}
+                  onChange={(e) => setCode(e.target.value)}
+                  placeholder={t.codePlaceholder}
+                  autoComplete="one-time-code"
+                  autoCapitalize="characters"
+                  spellCheck={false}
+                  maxLength={32}
+                  aria-invalid={error ? true : undefined}
+                  aria-describedby={error ? "code-error" : "code-hint"}
+                />
+                {error ? (
+                  <p id="code-error" className="field__error" role="alert">
+                    {error}
+                  </p>
+                ) : (
+                  <p id="code-hint" className="field__hint">
+                    {t.codeHint}
+                  </p>
+                )}
+              </div>
+              <button type="submit" className="btn btn--primary btn--block" disabled={busy || !code.trim()}>
+                {busy ? t.submitting : t.submit}
+              </button>
+            </form>
+
+            <div className="divider" role="separator">
+              <span>{t.or}</span>
+            </div>
+
+            <h2 className="h3">{t.demoTitle}</h2>
+            <p className="muted">{t.demoLead}</p>
+            {personas === null ? null : personas.length === 0 ? (
+              <p className="muted">{t.demoEmpty}</p>
+            ) : (
+              <ul className="list">
+                {personas.map((p) => (
+                  <li key={p.token}>
+                    <button type="button" className="list-row" onClick={() => demo(p)} disabled={busy}>
+                      <span className="avatar" aria-hidden="true">
+                        {p.display_name.charAt(0)}
+                      </span>
+                      <span className="list-row__text">
+                        <span className="list-row__title">{p.display_name}</span>
+                        <span className="list-row__sub">{t.demoDay(p.therapy_day)}</span>
+                      </span>
+                      <span className="list-row__action">
+                        {t.demoAction}
+                        <Icon name="arrowRight" size={18} />
+                      </span>
+                    </button>
+                  </li>
+                ))}
+              </ul>
+            )}
+          </section>
+        </div>
+      </main>
+    </AppShell>
+  );
+}