Add password-remember + warning on save

frontend/src/components/RepeaterDashboard.tsx

@@ -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 { useRememberedServerPassword } from '../hooks/useRememberedServerPassword';
 import { useRepeaterDashboard } from '../hooks/useRepeaterDashboard';
 import { isFavorite } from '../utils/favorites';
 import { handleKeyboardActivate } from '../utils/a11y';
@@ -81,8 +82,18 @@ export function RepeaterDashboard({
     rebootRepeater,
     syncClock,
   } = useRepeaterDashboard(conversation, { hasAdvertLocation });
+  const { password, setPassword, rememberPassword, setRememberPassword, persistAfterLogin } =
+    useRememberedServerPassword('repeater', conversation.id);
 
   const isFav = isFavorite(favorites, 'contact', conversation.id);
+  const handleRepeaterLogin = async (nextPassword: string) => {
+    await login(nextPassword);
+    persistAfterLogin(nextPassword);
+  };
+  const handleRepeaterGuestLogin = async () => {
+    await loginAsGuest();
+    persistAfterLogin('');
+  };
 
   // Loading all panes indicator
   const anyLoading = Object.values(paneStates).some((s) => s.loading);
@@ -221,8 +232,12 @@ export function RepeaterDashboard({
             repeaterName={conversation.name}
             loading={loginLoading}
             error={loginError}
-            onLogin={login}
-            onLoginAsGuest={loginAsGuest}
+            password={password}
+            onPasswordChange={setPassword}
+            rememberPassword={rememberPassword}
+            onRememberPasswordChange={setRememberPassword}
+            onLogin={handleRepeaterLogin}
+            onLoginAsGuest={handleRepeaterGuestLogin}
           />
         ) : (
           <div className="space-y-4">

frontend/src/components/RepeaterLogin.tsx

@@ -1,11 +1,16 @@
-import { useState, useCallback, type FormEvent } from 'react';
+import { useCallback, type FormEvent } from 'react';
 import { Input } from './ui/input';
 import { Button } from './ui/button';
+import { Checkbox } from './ui/checkbox';
 
 interface RepeaterLoginProps {
   repeaterName: string;
   loading: boolean;
   error: string | null;
+  password: string;
+  onPasswordChange: (password: string) => void;
+  rememberPassword: boolean;
+  onRememberPasswordChange: (checked: boolean) => void;
   onLogin: (password: string) => Promise<void>;
   onLoginAsGuest: () => Promise<void>;
   description?: string;
@@ -18,6 +23,10 @@ export function RepeaterLogin({
   repeaterName,
   loading,
   error,
+  password,
+  onPasswordChange,
+  rememberPassword,
+  onRememberPasswordChange,
   onLogin,
   onLoginAsGuest,
   description = 'Log in to access repeater dashboard',
@@ -25,8 +34,6 @@ export function RepeaterLogin({
   loginLabel = 'Login with Password',
   guestLabel = 'Login as Guest / ACLs',
 }: RepeaterLoginProps) {
-  const [password, setPassword] = useState('');
-
   const handleSubmit = useCallback(
     async (e: FormEvent) => {
       e.preventDefault();
@@ -53,13 +60,34 @@ export function RepeaterLogin({
             data-1p-ignore="true"
             data-bwignore="true"
             value={password}
-            onChange={(e) => setPassword(e.target.value)}
+            onChange={(e) => onPasswordChange(e.target.value)}
             placeholder={passwordPlaceholder}
             aria-label="Repeater password"
             disabled={loading}
             autoFocus
           />
 
+          <label
+            htmlFor="remember-server-password"
+            className="flex items-center gap-2 text-sm text-muted-foreground"
+          >
+            <Checkbox
+              id="remember-server-password"
+              checked={rememberPassword}
+              disabled={loading}
+              onCheckedChange={(checked) => onRememberPasswordChange(checked === true)}
+            />
+            <span>Remember password</span>
+          </label>
+
+          {rememberPassword && (
+            <p className="text-xs text-muted-foreground">
+              Passwords are stored unencrypted in local browser storage for this domain. It is
+              highly recommended to login via ACLs after your first successful login; saving the
+              password is not recommended.
+            </p>
+          )}
+
           {error && (
             <p className="text-sm text-destructive text-center" role="alert">
               {error}

frontend/src/components/RoomServerPanel.tsx

@@ -15,6 +15,7 @@ import { AclPane } from './repeater/RepeaterAclPane';
 import { LppTelemetryPane } from './repeater/RepeaterLppTelemetryPane';
 import { ConsolePane } from './repeater/RepeaterConsolePane';
 import { RepeaterLogin } from './RepeaterLogin';
+import { useRememberedServerPassword } from '../hooks/useRememberedServerPassword';
 
 interface RoomServerPanelProps {
   contact: Contact;
@@ -54,6 +55,8 @@ function createInitialPaneStates(): RoomPaneStates {
 }
 
 export function RoomServerPanel({ contact, onAuthenticatedChange }: RoomServerPanelProps) {
+  const { password, setPassword, rememberPassword, setRememberPassword, persistAfterLogin } =
+    useRememberedServerPassword('room', contact.public_key);
   const [loginLoading, setLoginLoading] = useState(false);
   const [loginError, setLoginError] = useState<string | null>(null);
   const [loginMessage, setLoginMessage] = useState<string | null>(null);
@@ -162,13 +165,15 @@ export function RoomServerPanel({ contact, onAuthenticatedChange }: RoomServerPa
   const handleLogin = useCallback(
     async (password: string) => {
       await performLogin(password);
+      persistAfterLogin(password);
     },
-    [performLogin]
+    [performLogin, persistAfterLogin]
   );
 
   const handleLoginAsGuest = useCallback(async () => {
     await performLogin('');
-  }, [performLogin]);
+    persistAfterLogin('');
+  }, [performLogin, persistAfterLogin]);
 
   const handleConsoleCommand = useCallback(
     async (command: string) => {
@@ -211,17 +216,35 @@ export function RoomServerPanel({ contact, onAuthenticatedChange }: RoomServerPa
 
   if (!authenticated) {
     return (
-      <div className="flex-1 overflow-y-auto">
-        <RepeaterLogin
-          repeaterName={panelTitle}
-          loading={loginLoading}
-          error={loginError}
-          onLogin={handleLogin}
-          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"
-        />
+      <div className="flex-1 overflow-y-auto p-4">
+        <div className="mx-auto flex w-full max-w-sm flex-col gap-4">
+          <div className="rounded-md border border-warning/30 bg-warning/10 px-4 py-3 text-sm text-warning">
+            Room server access is experimental and in public alpha. Please report any issues on{' '}
+            <a
+              href="https://github.com/jkingsman/Remote-Terminal-for-MeshCore/issues"
+              target="_blank"
+              rel="noreferrer"
+              className="font-medium underline underline-offset-2 hover:text-warning/80"
+            >
+              GitHub
+            </a>
+            .
+          </div>
+          <RepeaterLogin
+            repeaterName={panelTitle}
+            loading={loginLoading}
+            error={loginError}
+            password={password}
+            onPasswordChange={setPassword}
+            rememberPassword={rememberPassword}
+            onRememberPasswordChange={setRememberPassword}
+            onLogin={handleLogin}
+            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"
+          />
+        </div>
       </div>
     );
   }