Be much, much clearer about room server ops. Closes #78.

2026-08-07 09:13:04 +02:00 · 2026-03-27 12:58:00 -07:00
parent 6e5256acce
commit 7151cf3846
12 changed files with 410 additions and 113 deletions
@@ -5,6 +5,7 @@ import { Button } from './ui/button';
 import { Bell, Route, Star, Trash2 } from 'lucide-react';
 import { DirectTraceIcon } from './DirectTraceIcon';
 import { RepeaterLogin } from './RepeaterLogin';
+import { ServerLoginStatusBanner } from './ServerLoginStatusBanner';
 import { useRememberedServerPassword } from '../hooks/useRememberedServerPassword';
 import { useRepeaterDashboard } from '../hooks/useRepeaterDashboard';
 import { isFavorite } from '../utils/favorites';
@@ -69,6 +70,7 @@ export function RepeaterDashboard({
    loggedIn,
    loginLoading,
    loginError,
+    lastLoginAttempt,
    paneData,
    paneStates,
    consoleHistory,
@@ -249,6 +251,14 @@ export function RepeaterDashboard({
          />
        ) : (
          <div className="space-y-4">
+            <ServerLoginStatusBanner
+              attempt={lastLoginAttempt}
+              loading={loginLoading}
+              canRetryPassword={password.trim().length > 0}
+              onRetryPassword={() => handleRepeaterLogin(password)}
+              onRetryBlank={handleRepeaterGuestLogin}
+              blankRetryLabel="Retry Existing-Access Login"
+            />
            {/* Top row: Telemetry + Radio Settings | Node Info + Neighbors */}
            <div className="grid grid-cols-1 gap-4 md:grid-cols-2 md:items-stretch">
              <div className="flex flex-col gap-4">
@@ -16,7 +16,13 @@ import { AclPane } from './repeater/RepeaterAclPane';
 import { LppTelemetryPane } from './repeater/RepeaterLppTelemetryPane';
 import { ConsolePane } from './repeater/RepeaterConsolePane';
 import { RepeaterLogin } from './RepeaterLogin';
+import { ServerLoginStatusBanner } from './ServerLoginStatusBanner';
 import { useRememberedServerPassword } from '../hooks/useRememberedServerPassword';
+import {
+  buildServerLoginAttemptFromError,
+  buildServerLoginAttemptFromResponse,
+  type ServerLoginAttemptState,
+} from '../utils/serverLoginState';

 interface RoomServerPanelProps {
  contact: Contact;
@@ -61,6 +67,7 @@ export function RoomServerPanel({ contact, onAuthenticatedChange }: RoomServerPa
  const [loginLoading, setLoginLoading] = useState(false);
  const [loginError, setLoginError] = useState<string | null>(null);
  const [authenticated, setAuthenticated] = useState(false);
+  const [lastLoginAttempt, setLastLoginAttempt] = useState<ServerLoginAttemptState | null>(null);
  const [advancedOpen, setAdvancedOpen] = useState(false);
  const [paneData, setPaneData] = useState<RoomPaneData>({
    status: null,
@@ -75,6 +82,7 @@ export function RoomServerPanel({ contact, onAuthenticatedChange }: RoomServerPa
    setLoginLoading(false);
    setLoginError(null);
    setAuthenticated(false);
+    setLastLoginAttempt(null);
    setAdvancedOpen(false);
    setPaneData({
      status: null,
@@ -129,26 +137,32 @@ export function RoomServerPanel({ contact, onAuthenticatedChange }: RoomServerPa
  );

  const performLogin = useCallback(
-    async (password: string) => {
+    async (nextPassword: string, method: 'password' | 'blank') => {
      if (loginLoading) return;

      setLoginLoading(true);
      setLoginError(null);
      try {
-        const result = await api.roomLogin(contact.public_key, password);
+        const result = await api.roomLogin(contact.public_key, nextPassword);
+        setLastLoginAttempt(buildServerLoginAttemptFromResponse(method, result, 'room server'));
        setAuthenticated(true);
        if (result.authenticated) {
-          toast.success('Room login confirmed');
+          toast.success('Login confirmed by the room server.');
        } else {
-          toast.warning('Room login not confirmed', {
-            description: result.message ?? 'Room login was not confirmed',
+          toast.warning("Couldn't confirm room login", {
+            description:
+              result.message ??
+              'No confirmation came back from the room server. You can still open tools and try again.',
          });
        }
      } catch (err) {
        const message = err instanceof Error ? err.message : 'Unknown error';
+        setLastLoginAttempt(buildServerLoginAttemptFromError(method, message, 'room server'));
        setAuthenticated(true);
        setLoginError(message);
-        toast.error('Room login failed', { description: message });
+        toast.error('Room login request failed', {
+          description: `${message}. You can still open tools and retry the login from here.`,
+        });
      } finally {
        setLoginLoading(false);
      }
@@ -157,15 +171,15 @@ export function RoomServerPanel({ contact, onAuthenticatedChange }: RoomServerPa
  );

  const handleLogin = useCallback(
-    async (password: string) => {
-      await performLogin(password);
-      persistAfterLogin(password);
+    async (nextPassword: string) => {
+      await performLogin(nextPassword, 'password');
+      persistAfterLogin(nextPassword);
    },
    [performLogin, persistAfterLogin]
  );

  const handleLoginAsGuest = useCallback(async () => {
-    await performLogin('');
+    await performLogin('', 'blank');
    persistAfterLogin('');
  }, [performLogin, persistAfterLogin]);

@@ -207,6 +221,8 @@ export function RoomServerPanel({ contact, onAuthenticatedChange }: RoomServerPa
  );

  const panelTitle = useMemo(() => contact.name || contact.public_key.slice(0, 12), [contact]);
+  const showLoginFailureState =
+    lastLoginAttempt !== null && lastLoginAttempt.outcome !== 'confirmed';

  if (!authenticated) {
    return (
@@ -236,7 +252,7 @@ export function RoomServerPanel({ contact, onAuthenticatedChange }: RoomServerPa
            onLoginAsGuest={handleLoginAsGuest}
            description="Log in with the room password or use ACL/guest access to enter this room server"
            passwordPlaceholder="Room server password..."
-            guestLabel="Login with ACL / Guest"
+            guestLabel="Login with Existing Access / Guest"
          />
        </div>
      </div>
@@ -245,15 +261,52 @@ export function RoomServerPanel({ contact, onAuthenticatedChange }: RoomServerPa

  return (
    <section className="border-b border-border bg-muted/20 px-4 py-3">
-      <div className="flex justify-end">
-        <Button
-          type="button"
-          variant="outline"
-          size="sm"
-          onClick={() => setAdvancedOpen((prev) => !prev)}
-        >
-          {advancedOpen ? 'Hide Tools' : 'Show Tools'}
-        </Button>
+      <div className="space-y-3">
+        {showLoginFailureState ? (
+          <ServerLoginStatusBanner
+            attempt={lastLoginAttempt}
+            loading={loginLoading}
+            canRetryPassword={password.trim().length > 0}
+            onRetryPassword={() => handleLogin(password)}
+            onRetryBlank={handleLoginAsGuest}
+            blankRetryLabel="Retry Existing-Access Login"
+            showRetryActions={false}
+          />
+        ) : null}
+        <div className="flex flex-wrap items-center justify-between gap-2">
+          {showLoginFailureState ? (
+            <div className="flex flex-wrap gap-2">
+              <Button
+                type="button"
+                variant="outline"
+                size="sm"
+                onClick={() => void handleLogin(password)}
+                disabled={loginLoading || password.trim().length === 0}
+              >
+                Retry Password Login
+              </Button>
+              <Button
+                type="button"
+                variant="outline"
+                size="sm"
+                onClick={handleLoginAsGuest}
+                disabled={loginLoading}
+              >
+                Retry Existing-Access Login
+              </Button>
+            </div>
+          ) : (
+            <div />
+          )}
+          <Button
+            type="button"
+            variant="outline"
+            size="sm"
+            onClick={() => setAdvancedOpen((prev) => !prev)}
+          >
+            {advancedOpen ? 'Hide Tools' : 'Show Tools'}
+          </Button>
+        </div>
      </div>
      <Sheet open={advancedOpen} onOpenChange={setAdvancedOpen}>
        <SheetContent side="right" className="w-full sm:max-w-4xl p-0 flex flex-col">
@@ -269,15 +322,6 @@ export function RoomServerPanel({ contact, onAuthenticatedChange }: RoomServerPa
                <h2 className="truncate text-base font-semibold">Room Server Tools</h2>
                <p className="text-sm text-muted-foreground">{panelTitle}</p>
              </div>
-              <Button
-                type="button"
-                variant="outline"
-                onClick={handleLoginAsGuest}
-                disabled={loginLoading}
-                className="self-start sm:self-auto"
-              >
-                Refresh ACL Login
-              </Button>
            </div>
          </div>
          <div className="flex-1 overflow-y-auto p-4">
@@ -0,0 +1,76 @@
+import { Button } from './ui/button';
+import type { ServerLoginAttemptState } from '../utils/serverLoginState';
+import { getServerLoginAttemptTone } from '../utils/serverLoginState';
+import { cn } from '../lib/utils';
+
+interface ServerLoginStatusBannerProps {
+  attempt: ServerLoginAttemptState | null;
+  loading: boolean;
+  canRetryPassword: boolean;
+  onRetryPassword: () => Promise<void> | void;
+  onRetryBlank: () => Promise<void> | void;
+  passwordRetryLabel?: string;
+  blankRetryLabel?: string;
+  showRetryActions?: boolean;
+}
+
+export function ServerLoginStatusBanner({
+  attempt,
+  loading,
+  canRetryPassword,
+  onRetryPassword,
+  onRetryBlank,
+  passwordRetryLabel = 'Retry Password Login',
+  blankRetryLabel = 'Retry Existing-Access Login',
+  showRetryActions = true,
+}: ServerLoginStatusBannerProps) {
+  if (attempt?.outcome === 'confirmed') {
+    return null;
+  }
+
+  const tone = getServerLoginAttemptTone(attempt);
+  const shouldShowActions = showRetryActions;
+  const toneClassName =
+    tone === 'success'
+      ? 'border-success/30 bg-success/10 text-success'
+      : tone === 'warning'
+        ? 'border-warning/30 bg-warning/10 text-warning'
+        : tone === 'destructive'
+          ? 'border-destructive/30 bg-destructive/10 text-destructive'
+          : 'border-border bg-muted/40 text-foreground';
+
+  return (
+    <div className={cn('rounded-md border px-4 py-3', toneClassName)}>
+      <div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
+        <div className="min-w-0 space-y-1">
+          <p className="text-sm font-medium">
+            {attempt?.summary ?? 'No server login attempt has been recorded in this view yet.'}
+          </p>
+          {attempt?.details && <p className="text-xs opacity-90">{attempt.details}</p>}
+        </div>
+        {shouldShowActions ? (
+          <div className="flex flex-wrap gap-2">
+            <Button
+              type="button"
+              variant="outline"
+              size="sm"
+              onClick={() => void onRetryPassword()}
+              disabled={loading || !canRetryPassword}
+            >
+              {passwordRetryLabel}
+            </Button>
+            <Button
+              type="button"
+              variant="outline"
+              size="sm"
+              onClick={() => void onRetryBlank()}
+              disabled={loading}
+            >
+              {blankRetryLabel}
+            </Button>
+          </div>
+        ) : null}
+      </div>
+    </div>
+  );
+}