feat: způsob přihlášení a správa obchodů podle konfigurace serveru
CI / Generate TypeScript types (push) Successful in 12s
CI / Server unit tests (push) Successful in 26s
CI / Build server (push) Successful in 32s
CI / Build client (push) Successful in 41s
CI / Playwright E2E tests (push) Successful in 1m47s
CI / Build and push Docker image (push) Successful in 49s
CI / Notify (push) Successful in 2s

This commit is contained in:
2026-09-24 09:30:04 +02:00
parent 103445dba8
commit 5f54925808
10 changed files with 185 additions and 82 deletions
+2 -2
View File
@@ -5,8 +5,8 @@
- [ ] `easterEggRoutes.ts` — náhodně generované URL easter eggů jsou per-pod; URL funguje pouze na podu, který ji vygeneroval; zvážit deterministické seedy nebo sdílení přes Redis
- [ ] `service.ts` — komplexní víceúrovňové funkce (`addChoice`, `removeChoiceIfPresent`) provádějí více po sobě jdoucích zápisů do stejného Redis klíče; pro plnou atomicitu je potřeba per-klíčový distribuovaný zámek (Redlock nebo `SET NX EX`) nebo sloučení logiky do jednoho `updateData` volání
- [ ] HTTP_REMOTE_TRUSTED_IPS se nikde nevalidují, hlavičky jsou přijímány odkudkoli
- [ ] V případě zapnutí přihlašování přes trusted headers nefunguje standardní přihlášení (nevrátí žádnou odpověď)
- [ ] Nemělo by se jít dostat na přihlašovací formulář (měla by tam být nanejvýš hláška nebo přesměrování)
- [X] V případě zapnutí přihlašování přes trusted headers nefunguje standardní přihlášení (nevrátí žádnou odpověď)
- [X] Nemělo by se jít dostat na přihlašovací formulář (měla by tam být nanejvýš hláška nebo přesměrování)
- [ ] Možnost úhrady celé útraty jednou osobou
- Základní myšlenka: jedna osoba uhradí celou útratu (v zájmu rychlosti odbavení), ostatním se automaticky vygeneruje QR kód, kterým následně uhradí svoji část útraty
- Obecně to bude problém např. pokud si někdo objedná něco navíc (pití apod.)
+10
View File
@@ -87,3 +87,13 @@
font-weight: 600;
margin-top: 8px;
}
.login-card > .hint {
color: var(--luncher-text-muted);
}
.login-error {
color: var(--luncher-danger);
line-height: 1.5;
margin: 0;
}
+46 -14
View File
@@ -1,29 +1,37 @@
import React, { useCallback, useEffect, useRef } from 'react';
import React, { useCallback, useEffect, useRef, useState } from 'react';
import { Button } from 'react-bootstrap';
import { useAuth } from './context/auth';
import { login } from '../../types';
import { useAppConfig } from './hooks/useGroupLimits';
import './Login.css';
/**
* Formulář pro prvotní zadání přihlašovacího jména.
* Přihlášení. Podle konfigurace serveru buď přihlásí uživatele automaticky přes důvěryhodné
* hlavičky z proxy (bez formuláře), nebo zobrazí formulář pro zadání jména. Když se konfigurace
* nenačte, zkusí nejprve přihlášení „naprázdno" a jinak zobrazí formulář (původní chování).
*/
export default function Login() {
const auth = useAuth();
const { loaded, trustedHeaders } = useAppConfig();
const loginRef = useRef<HTMLInputElement>(null);
const [trustedError, setTrustedError] = useState<string>();
const [attempt, setAttempt] = useState(0);
useEffect(() => {
if (auth && !auth.login) {
// Vyzkoušíme přihlášení "naprázdno", pokud projde, přihlásili nás trusted headers
if (!auth || auth.login || !loaded || trustedHeaders === false) return;
// Přihlášení přes hlavičky z proxy (případně pokus „naprázdno", pokud nevíme, jak server přihlašuje)
setTrustedError(undefined);
login().then(response => {
const token = response.data;
if (token) {
auth?.setToken(token as unknown as string); // TODO vyřešit, API definice je špatně, je to skutečně string
auth.setToken(token as unknown as string); // TODO vyřešit, API definice je špatně, je to skutečně string
} else if (trustedHeaders) {
setTrustedError((response.error as any)?.error ?? 'Přihlášení přes proxy se nezdařilo.');
}
}).catch(error => {
// nezajímá nás
}).catch(() => {
if (trustedHeaders) setTrustedError('Server je nedostupný. Zkuste to prosím za chvíli.');
});
}
}, [auth]);
}, [auth, loaded, trustedHeaders, attempt]);
const doLogin = useCallback(async () => {
const length = loginRef?.current?.value.length && loginRef.current.value.replaceAll(/\s/g, '').length
@@ -35,12 +43,38 @@ export default function Login() {
}
}, [auth]);
if (!auth?.login) {
if (auth?.login) {
return <div>Neplatný stav</div>
}
const header = <>
<h1 className='login-logo'>Luncher</h1>
<p className='login-subtitle'>Aplikace pro profesionální management obědů</p>
</>;
// Přihlašuje proxy — formulář se jménem nedává smysl
if (!loaded || trustedHeaders) {
return (
<div className='login-page'>
<div className='login-card'>
<h1 className='login-logo'>Luncher</h1>
<p className='login-subtitle'>Aplikace pro profesionální management obědů</p>
{header}
{trustedError ? (
<div className='login-form'>
<p className='login-error'>{trustedError}</p>
<Button onClick={() => setAttempt(a => a + 1)}>Zkusit znovu</Button>
</div>
) : (
<p className='hint'>Přihlašuji…</p>
)}
</div>
</div>
);
}
return (
<div className='login-page'>
<div className='login-card'>
{header}
<div className='login-form'>
<div>
<label htmlFor="login-input">Zobrazované jméno</label>
@@ -66,5 +100,3 @@ export default function Login() {
</div>
);
}
return <div>Neplatný stav</div>
}
@@ -6,6 +6,7 @@ import { faArrowsRotate, faPen, faPlus, faUpRightFromSquare, faXmark } from "@fo
import { addStore, deleteStore, updateStore, getStoreMenuStatus, refreshStoreMenu, Store, StoreMenuProvider, StoreScrapeInfo, StoreScrapeStatus } from "../../../../types";
import { getHumanDateTime } from "../../Utils";
import PriceHistory from "../PriceHistory";
import { useAppConfig } from "../../hooks/useGroupLimits";
import { getStoreUrls, storeUrlLabel } from "../../utils/storeUrls";
type Props = {
@@ -52,6 +53,9 @@ export default function StoreAdminModal({ isOpen, onClose, stores, onStoresChang
const [heslo, setHeslo] = useState('');
const [loading, setLoading] = useState(false);
const [error, setError] = useState<string | null>(null);
// Server bez admin hesla — správa (přidání/úprava/odebrání/obnovení) nejde, zbývá jen přehled.
// undefined = konfigurace nenačtena, chováme se jako dřív (správa zapnutá).
const adminEnabled = useAppConfig().storeAdmin !== false;
const [scrapeInfo, setScrapeInfo] = useState<Record<string, StoreScrapeInfo>>({});
const [refreshing, setRefreshing] = useState<string | null>(null);
// Rozbalená historie cen („obchod|služba")
@@ -209,6 +213,14 @@ export default function StoreAdminModal({ isOpen, onClose, stores, onStoresChang
</Alert>
)}
{!adminEnabled && (
<Alert variant="info">
Správa obchodů není na tomto serveru zapnutá (chybí <code>ADMIN_PASSWORD</code>).
Seznam obchodů, stav nabídek a historii cen lze jen prohlížet.
</Alert>
)}
{adminEnabled && <>
<Form.Group className="mb-3">
<Form.Label>Admin heslo</Form.Label>
<Form.Control
@@ -239,6 +251,7 @@ export default function StoreAdminModal({ isOpen, onClose, stores, onStoresChang
Přidat
</Button>
</div>
</>}
<h6>Aktuální seznam</h6>
{stores.length === 0 ? (
@@ -307,7 +320,7 @@ export default function StoreAdminModal({ isOpen, onClose, stores, onStoresChang
<span className="text-nowrap text-muted">Menu {PROVIDER_LABELS[p.provider]}:</span>
<span className={className} title={title}>{text}</span>
{/* Zakázané tlačítko nezobrazí tooltip — obalení do span ho zobrazí i bez hesla */}
<OverlayTrigger
{adminEnabled && <OverlayTrigger
placement="top"
overlay={
<Tooltip>
@@ -330,7 +343,7 @@ export default function StoreAdminModal({ isOpen, onClose, stores, onStoresChang
<FontAwesomeIcon icon={faArrowsRotate} spin={refreshing === key} />
</Button>
</span>
</OverlayTrigger>
</OverlayTrigger>}
{p.dishCount > 0 && (
<Button variant="link" size="sm" className="p-0 text-nowrap"
onClick={() => setHistoryOpen(historyOpen === key ? null : key)}>
@@ -343,7 +356,7 @@ export default function StoreAdminModal({ isOpen, onClose, stores, onStoresChang
);
})}
</div>
<div className="d-flex gap-3">
{adminEnabled && <div className="d-flex gap-3">
<FontAwesomeIcon
icon={faPen}
className="action-icon"
@@ -358,7 +371,7 @@ export default function StoreAdminModal({ isOpen, onClose, stores, onStoresChang
onClick={() => handleRemove(s.name)}
style={{ cursor: 'pointer' }}
/>
</div>
</div>}
</ListGroup.Item>
);
})}
+7 -2
View File
@@ -1,7 +1,12 @@
import { useSyncExternalStore } from "react";
import { getGroupLimits, subscribeGroupLimits } from "../utils/appConfig";
import { getAppConfig, getGroupLimits, subscribeAppConfig } from "../utils/appConfig";
/** Aktuální limity skupinových objednávek (překreslí se po načtení konfigurace ze serveru). */
export function useGroupLimits() {
return useSyncExternalStore(subscribeGroupLimits, getGroupLimits);
return useSyncExternalStore(subscribeAppConfig, getGroupLimits);
}
/** Celá runtime konfigurace ze serveru (způsob přihlášení, zapnuté funkce, limity). */
export function useAppConfig() {
return useSyncExternalStore(subscribeAppConfig, getAppConfig);
}
+11 -3
View File
@@ -10,7 +10,7 @@ import { getConfig } from '../../types/gen/sdk.gen';
import { getToken } from './Utils';
import { toast } from 'react-toastify';
import * as Sentry from '@sentry/react';
import { setGroupLimits } from './utils/appConfig';
import { setAppConfig } from './utils/appConfig';
client.setConfig({
auth: () => getToken(),
@@ -20,14 +20,22 @@ client.setConfig({
// Sentry se inicializuje až podle runtime konfigurace ze serveru (bez DSN zůstává vypnuté).
// Klient je statický build, takže DSN ani limity nejde zapéct při buildu — server je zná z env.
getConfig().then(({ data }) => {
setGroupLimits(data?.limits?.group);
setAppConfig({
loaded: true,
trustedHeaders: data?.auth?.trustedHeaders,
storeAdmin: data?.features?.storeAdmin,
groupLimits: data?.limits?.group,
});
if (data?.sentry.dsn) {
Sentry.init({
dsn: data.sentry.dsn,
environment: data.sentry.environment,
});
}
}).catch(() => { /* config endpoint nedostupný — běžíme bez Sentry */ });
}).catch(() => {
// Config endpoint nedostupný — běžíme bez Sentry, s výchozími limity a původním chováním přihlášení
setAppConfig({ loaded: true });
});
// Interceptor na vyhození toasteru při chybě
client.interceptors.response.use(async response => {
+29 -10
View File
@@ -1,8 +1,8 @@
import type { GroupLimits } from "../../../types";
/**
* Runtime konfigurace ze serveru (GET /api/config). Do načtení (nebo když endpoint
* neodpoví) platí výchozí hodnoty — stejné jako výchozí hodnoty na serveru (server/src/limits.ts).
* Výchozí limity skupinových objednávek — stejné jako výchozí hodnoty na serveru
* (server/src/limits.ts). Platí do načtení konfigurace nebo když endpoint neodpoví.
*/
export const DEFAULT_GROUP_LIMITS: GroupLimits = {
maxNoteLength: 300,
@@ -14,21 +14,40 @@ export const DEFAULT_GROUP_LIMITS: GroupLimits = {
maxItems: 20,
};
let groupLimits: GroupLimits = DEFAULT_GROUP_LIMITS;
/** Runtime konfigurace ze serveru (GET /api/config). */
export type AppRuntimeConfig = {
/** Pokus o načtení konfigurace skončil (úspěšně i neúspěšně) */
loaded: boolean,
/** Přihlášení přes důvěryhodné hlavičky z proxy; undefined = nevíme (konfigurace se nenačetla) */
trustedHeaders?: boolean,
/** Správa obchodů je zapnutá (server má admin heslo); undefined = nevíme */
storeAdmin?: boolean,
groupLimits: GroupLimits,
};
let config: AppRuntimeConfig = { loaded: false, groupLimits: DEFAULT_GROUP_LIMITS };
const listeners = new Set<() => void>();
export function getGroupLimits(): GroupLimits {
return groupLimits;
export function getAppConfig(): AppRuntimeConfig {
return config;
}
/** Nastaví limity ze serveru (chybějící hodnoty doplní výchozími) a upozorní odběratele. */
export function setGroupLimits(limits: Partial<GroupLimits> | undefined): void {
if (!limits) return;
groupLimits = { ...DEFAULT_GROUP_LIMITS, ...limits };
export function getGroupLimits(): GroupLimits {
return config.groupLimits;
}
/** Uloží konfiguraci ze serveru (chybějící limity doplní výchozími) a upozorní odběratele. */
export function setAppConfig(patch: Partial<Omit<AppRuntimeConfig, 'groupLimits'>> & { groupLimits?: Partial<GroupLimits> }): void {
const { groupLimits, ...rest } = patch;
config = {
...config,
...rest,
groupLimits: groupLimits ? { ...DEFAULT_GROUP_LIMITS, ...groupLimits } : config.groupLimits,
};
listeners.forEach(l => l());
}
export function subscribeGroupLimits(listener: () => void): () => void {
export function subscribeAppConfig(listener: () => void): () => void {
listeners.add(listener);
return () => listeners.delete(listener);
}
+15 -20
View File
@@ -1,36 +1,31 @@
import { test, expect } from '@playwright/test';
// Tento test záměrně NEPOUŽÍVÁ trusted-header – testuje reálný login formulář.
// Tento soubor záměrně NEPOUŽÍVÁ výchozí trusted-header — testuje chování přihlašovací stránky.
test.use({ extraHTTPHeaders: {} });
test('uživatel se přihlásí formulářem a uvidí obsah aplikace', async ({ page }) => {
// Server běží s HTTP_REMOTE_USER_ENABLED=true, takže POST /api/login vždy vyžaduje
// hlavičku remote-user. Zachytíme požadavky z formuláře (mají tělo s polem login)
// a přidáme hlavičku; požadavek auto-loginu (bez těla) projde bez hlavičky a selže,
// čímž formulář zůstane viditelný.
test('při přihlášení přes proxy se formulář nezobrazí — bez hlavičky hláška, opakování s hlavičkou přihlásí', async ({ page }) => {
// Server běží s HTTP_REMOTE_USER_ENABLED=true (přihlašuje proxy), takže formulář se jménem
// nemá smysl. Bez hlavičky remote-user se zobrazí hláška s tlačítkem „Zkusit znovu".
let sendHeader = false;
await page.route('**/api/login', async (route) => {
const body = route.request().postData();
let login: string | undefined;
try { login = body ? JSON.parse(body)?.login : undefined; } catch {}
await route.continue({
headers: login
? { ...route.request().headers(), 'remote-user': login }
headers: sendHeader
? { ...route.request().headers(), 'remote-user': 'testuser' }
: route.request().headers(),
});
});
await page.goto('/');
// Formulář musí být viditelný – auto-login selhal (nepřišla hlavička)
const loginInput = page.locator('#login-input');
await expect(loginInput).toBeVisible({ timeout: 10_000 });
const retry = page.getByRole('button', { name: 'Zkusit znovu' });
await expect(retry).toBeVisible({ timeout: 10_000 });
await expect(page.getByText('Přihlášení probíhá přes firemní přihlášení (proxy)')).toBeVisible();
await expect(page.locator('#login-input')).toHaveCount(0);
// Vyplnění loginu a odeslání Enterem
await loginInput.fill('testuser');
await loginInput.press('Enter');
// Po přihlášení musí zmizet login formulář
await expect(loginInput).not.toBeVisible({ timeout: 10_000 });
// Proxy teď identitu pošle — opakování přihlásí
sendHeader = true;
await retry.click();
await expect(retry).not.toBeVisible({ timeout: 10_000 });
// JWT musí být uloženo v localStorage jako 3-dílný token
const token = await page.evaluate(() => localStorage.getItem('token'));
+8 -1
View File
@@ -140,6 +140,12 @@ app.get("/api/config", (_req, res) => {
limits: {
group: getGroupLimits(),
},
auth: {
trustedHeaders: HTTP_REMOTE_USER_ENABLED,
},
features: {
storeAdmin: !!process.env.ADMIN_PASSWORD,
},
});
});
@@ -160,7 +166,8 @@ app.post("/api/login", (req, res) => {
if (remoteUser && remoteUser.length > 0) {
res.status(200).json(generateToken(Buffer.from(remoteUser, 'latin1').toString(), true));
} else {
throw new Error("Je zapnuto přihlášení přes hlavičky, ale nepřišla hlavička nebo ??");
// Přihlašuje proxy (trusted headers) — bez hlavičky nejde o chybu serveru, ale o nepřihlášeného uživatele
res.status(401).json({ error: 'Přihlášení probíhá přes firemní přihlášení (proxy), ale nepřišla identita uživatele. Zkuste stránku obnovit nebo se přihlásit znovu.' });
}
} else {
if (!req.body?.login || req.body.login.trim().length === 0) {
+16 -2
View File
@@ -1,6 +1,6 @@
get:
operationId: getConfig
summary: Vrátí veřejnou runtime konfiguraci pro klienta (např. Sentry DSN, limity objednávek). Nevyžaduje autentizaci.
summary: Vrátí veřejnou runtime konfiguraci pro klienta (Sentry DSN, limity objednávek, způsob přihlášení, zapnuté funkce). Nevyžaduje autentizaci.
security: [] # Nevyžaduje autentizaci
responses:
"200":
@@ -9,8 +9,22 @@ get:
application/json:
schema:
type: object
required: [sentry, limits]
required: [sentry, limits, auth, features]
properties:
auth:
type: object
required: [trustedHeaders]
properties:
trustedHeaders:
type: boolean
description: Přihlášení probíhá přes důvěryhodné hlavičky z proxy (HTTP_REMOTE_USER_ENABLED) — klient nezobrazuje formulář se jménem
features:
type: object
required: [storeAdmin]
properties:
storeAdmin:
type: boolean
description: Správa obchodů je zapnutá (server má nastavené ADMIN_PASSWORD)
limits:
type: object
required: [group]