mirror of
https://github.com/Zproger/Aurum.git
synced 2026-10-13 02:56:39 +07:00
feat: заменить баннер отсутствия auth на модальное окно с согласием
Дизайн-баннер был легко закрываем и появлялся заново каждую сессию. Теперь показывается блокирующее модальное окно без кнопки закрытия/ Escape/клика по фону — пройти дальше можно только явным подтверждением 'Я понимаю риски'. Согласие сохраняется в localStorage и не запрашивается повторно.
This commit is contained in:
@@ -1,13 +1,13 @@
|
|||||||
import { type ReactNode, useEffect, useState } from "react";
|
import { type ReactNode, useEffect, useState } from "react";
|
||||||
import { Logo } from "@/components/layout/Logo";
|
import { Logo } from "@/components/layout/Logo";
|
||||||
import { LoginScreen } from "@/components/auth/LoginScreen";
|
import { LoginScreen } from "@/components/auth/LoginScreen";
|
||||||
import { NoAuthBanner } from "@/components/auth/NoAuthBanner";
|
import { NoAuthModal } from "@/components/auth/NoAuthModal";
|
||||||
import { checkCredentials, useAuthHeader } from "@/lib/auth";
|
import { checkCredentials, useAuthHeader } from "@/lib/auth";
|
||||||
|
|
||||||
// "not-configured" and "authenticated" both render `children` the same way,
|
// "not-configured" and "authenticated" both render `children` the same way,
|
||||||
// but they must stay distinct: only "not-configured" means this instance has
|
// but they must stay distinct: only "not-configured" means this instance has
|
||||||
// no AURUM_BASIC_AUTH_USER/PASSWORD at all (nginx never sent 401 to our
|
// no AURUM_BASIC_AUTH_USER/PASSWORD at all (nginx never sent 401 to our
|
||||||
// deliberately-wrong probe header), which is what triggers NoAuthBanner.
|
// deliberately-wrong probe header), which is what triggers NoAuthModal.
|
||||||
// Collapsing them back into one "not-required" state would make an
|
// Collapsing them back into one "not-required" state would make an
|
||||||
// authenticated session with valid stored credentials show the "this
|
// authenticated session with valid stored credentials show the "this
|
||||||
// instance has no password" warning too.
|
// instance has no password" warning too.
|
||||||
@@ -56,7 +56,7 @@ export function LoginGate({ children }: { children: ReactNode }) {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
{probe === "not-configured" && <NoAuthBanner />}
|
{probe === "not-configured" && <NoAuthModal />}
|
||||||
{children}
|
{children}
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -1,48 +0,0 @@
|
|||||||
import { useState } from "react";
|
|
||||||
import { TriangleAlert, X } from "lucide-react";
|
|
||||||
import { useTranslation } from "@/lib/i18n";
|
|
||||||
|
|
||||||
const DISMISS_KEY = "aurum:noAuthBanner:dismissed";
|
|
||||||
|
|
||||||
/** Shown by LoginGate for the entire session whenever this instance has no
|
|
||||||
* AURUM_BASIC_AUTH_USER/PASSWORD configured (see frontend/docker-entrypoint.d/
|
|
||||||
* 20-basic-auth.sh) — that state is otherwise only logged to the container's
|
|
||||||
* stderr at startup, which most self-hosters never look at. Dismissal is
|
|
||||||
* remembered only in sessionStorage, not localStorage, so the warning comes
|
|
||||||
* back on the next visit instead of being silence-able forever. */
|
|
||||||
export function NoAuthBanner() {
|
|
||||||
const { t } = useTranslation();
|
|
||||||
const [dismissed, setDismissed] = useState(() => {
|
|
||||||
try {
|
|
||||||
return sessionStorage.getItem(DISMISS_KEY) === "1";
|
|
||||||
} catch {
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
if (dismissed) return null;
|
|
||||||
|
|
||||||
function handleDismiss() {
|
|
||||||
setDismissed(true);
|
|
||||||
try {
|
|
||||||
sessionStorage.setItem(DISMISS_KEY, "1");
|
|
||||||
} catch {
|
|
||||||
// storage unavailable — banner just reappears on next render, harmless
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="flex items-start gap-2.5 border-b border-danger/30 bg-danger/10 px-4 py-2.5 text-sm text-danger">
|
|
||||||
<TriangleAlert size={16} className="mt-0.5 shrink-0" />
|
|
||||||
<span className="flex-1">{t("auth.noAuthBanner")}</span>
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
onClick={handleDismiss}
|
|
||||||
aria-label={t("auth.noAuthBannerDismiss")}
|
|
||||||
className="shrink-0 rounded p-0.5 hover:bg-danger/20"
|
|
||||||
>
|
|
||||||
<X size={16} />
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
53
frontend/src/components/auth/NoAuthModal.tsx
Normal file
53
frontend/src/components/auth/NoAuthModal.tsx
Normal file
@@ -0,0 +1,53 @@
|
|||||||
|
import { useState } from "react";
|
||||||
|
import { ShieldAlert } from "lucide-react";
|
||||||
|
import { useTranslation } from "@/lib/i18n";
|
||||||
|
|
||||||
|
const ACK_KEY = "aurum:noAuthAcknowledged";
|
||||||
|
|
||||||
|
/** Shown by LoginGate once (ever, per browser) when this instance has no
|
||||||
|
* AURUM_BASIC_AUTH_USER/PASSWORD configured (see frontend/docker-entrypoint.d/
|
||||||
|
* 20-basic-auth.sh) — that state is otherwise only logged to the container's
|
||||||
|
* stderr at startup, which most self-hosters never look at. Unlike a normal
|
||||||
|
* Dialog, there is deliberately no backdrop-click, Escape, or X-button way
|
||||||
|
* out — the only way past it is the explicit "I understand the risk" button,
|
||||||
|
* whose click is what persists the acknowledgement. */
|
||||||
|
export function NoAuthModal() {
|
||||||
|
const { t } = useTranslation();
|
||||||
|
const [acknowledged, setAcknowledged] = useState(() => {
|
||||||
|
try {
|
||||||
|
return localStorage.getItem(ACK_KEY) === "1";
|
||||||
|
} catch {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
if (acknowledged) return null;
|
||||||
|
|
||||||
|
function handleAccept() {
|
||||||
|
setAcknowledged(true);
|
||||||
|
try {
|
||||||
|
localStorage.setItem(ACK_KEY, "1");
|
||||||
|
} catch {
|
||||||
|
// storage unavailable — modal just reappears next reload, harmless
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 p-4">
|
||||||
|
<div className="w-full max-w-sm rounded-2xl border border-danger/30 bg-surface-1 p-6 text-center shadow-xl">
|
||||||
|
<div className="mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-danger/10 text-danger">
|
||||||
|
<ShieldAlert size={24} />
|
||||||
|
</div>
|
||||||
|
<h2 className="mb-2 text-base font-semibold text-text-primary">{t("auth.noAuthModalTitle")}</h2>
|
||||||
|
<p className="mb-6 text-sm text-text-secondary">{t("auth.noAuthModalBody")}</p>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={handleAccept}
|
||||||
|
className="inline-flex h-10 w-full items-center justify-center rounded-lg bg-danger px-4 text-sm font-medium text-white transition-colors hover:opacity-90"
|
||||||
|
>
|
||||||
|
{t("auth.noAuthModalAccept")}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -54,8 +54,9 @@ const ru = {
|
|||||||
"auth.submitting": "Вход…",
|
"auth.submitting": "Вход…",
|
||||||
"auth.errorInvalidCredentials": "Неверный логин или пароль",
|
"auth.errorInvalidCredentials": "Неверный логин или пароль",
|
||||||
"auth.errorUnreachable": "Не удалось подключиться к серверу. Проверьте соединение и попробуйте снова.",
|
"auth.errorUnreachable": "Не удалось подключиться к серверу. Проверьте соединение и попробуйте снова.",
|
||||||
"auth.noAuthBanner": "Этот экземпляр Aurum не защищён паролем — все данные доступны любому, кто до него достучится. Задайте AURUM_BASIC_AUTH_USER и AURUM_BASIC_AUTH_PASSWORD в .env, чтобы включить вход.",
|
"auth.noAuthModalTitle": "Авторизация не настроена",
|
||||||
"auth.noAuthBannerDismiss": "Понятно",
|
"auth.noAuthModalBody": "Этот экземпляр Aurum не защищён паролем — все данные доступны любому, кто до него достучится. Задайте AURUM_BASIC_AUTH_USER и AURUM_BASIC_AUTH_PASSWORD в .env, чтобы включить вход.",
|
||||||
|
"auth.noAuthModalAccept": "Я понимаю риски и хочу продолжить",
|
||||||
|
|
||||||
"dashboard.errorLoading": "Не удалось загрузить данные дашборда. Проверьте, что backend запущен.",
|
"dashboard.errorLoading": "Не удалось загрузить данные дашборда. Проверьте, что backend запущен.",
|
||||||
"dashboard.statRealIncomeLabel": "Реальный доход",
|
"dashboard.statRealIncomeLabel": "Реальный доход",
|
||||||
@@ -560,8 +561,9 @@ const en: Record<keyof typeof ru, string> = {
|
|||||||
"auth.submitting": "Signing in…",
|
"auth.submitting": "Signing in…",
|
||||||
"auth.errorInvalidCredentials": "Incorrect username or password",
|
"auth.errorInvalidCredentials": "Incorrect username or password",
|
||||||
"auth.errorUnreachable": "Couldn't reach the server. Check your connection and try again.",
|
"auth.errorUnreachable": "Couldn't reach the server. Check your connection and try again.",
|
||||||
"auth.noAuthBanner": "This Aurum instance has no password protection — all data is accessible to anyone who can reach it. Set AURUM_BASIC_AUTH_USER and AURUM_BASIC_AUTH_PASSWORD in .env to enable login.",
|
"auth.noAuthModalTitle": "Authentication not configured",
|
||||||
"auth.noAuthBannerDismiss": "Got it",
|
"auth.noAuthModalBody": "This Aurum instance has no password protection — all data is accessible to anyone who can reach it. Set AURUM_BASIC_AUTH_USER and AURUM_BASIC_AUTH_PASSWORD in .env to enable login.",
|
||||||
|
"auth.noAuthModalAccept": "I understand the risk and want to continue",
|
||||||
|
|
||||||
"dashboard.errorLoading": "Failed to load dashboard data. Check that the backend is running.",
|
"dashboard.errorLoading": "Failed to load dashboard data. Check that the backend is running.",
|
||||||
"dashboard.statRealIncomeLabel": "Real income",
|
"dashboard.statRealIncomeLabel": "Real income",
|
||||||
|
|||||||
Reference in New Issue
Block a user