fix(ui): keep remote read-only notice accurate

This commit is contained in:
Tam Nhu Tran
2026-04-07 07:08:32 -04:00
parent 1603f19388
commit 173149ba71
3 changed files with 149 additions and 20 deletions
@@ -4,11 +4,12 @@ import { useAuth } from '@/contexts/auth-context';
export function LocalhostDisclaimer() {
const [dismissed, setDismissed] = useState(false);
const { authEnabled, isLocalAccess, loading } = useAuth();
if (dismissed || loading) return null;
const { authEnabled, authConfigured, isLocalAccess, loading } = useAuth();
const isRemoteReadonly = !isLocalAccess && !authEnabled;
if ((dismissed && !isRemoteReadonly) || loading) return null;
const wrapperClasses = isRemoteReadonly
? 'w-full border-t border-amber-200 bg-amber-50 px-4 py-2 text-amber-900 transition-colors duration-200 dark:border-amber-800 dark:bg-amber-900/20 dark:text-amber-200'
: 'w-full border-t border-yellow-200 bg-yellow-50 px-4 py-2 text-yellow-800 transition-colors duration-200 dark:border-yellow-800 dark:bg-yellow-900/20 dark:text-yellow-200';
@@ -17,12 +18,26 @@ export function LocalhostDisclaimer() {
: 'text-yellow-600 hover:bg-yellow-100 hover:text-yellow-800 dark:text-yellow-400 dark:hover:bg-yellow-800/30';
const message = isRemoteReadonly ? (
<>
<span className="hidden sm:inline">
Remote dashboard access is read-only until you run ccs config auth setup on the host.
</span>
<span className="sm:hidden">
Remote dashboard is read-only until host auth is configured.
</span>
{authConfigured ? (
<>
<span className="hidden sm:inline">
Remote dashboard access is read-only because dashboard auth is currently disabled on the
host. Re-enable dashboard auth on the host to unlock remote changes.
</span>
<span className="sm:hidden">
Remote dashboard is read-only until dashboard auth is re-enabled on the host.
</span>
</>
) : (
<>
<span className="hidden sm:inline">
Remote dashboard access is read-only until you run ccs config auth setup on the host.
</span>
<span className="sm:hidden">
Remote dashboard is read-only until host auth is configured.
</span>
</>
)}
</>
) : (
<>
@@ -40,13 +55,15 @@ export function LocalhostDisclaimer() {
<Shield className="w-4 h-4 flex-shrink-0" />
{message}
</div>
<button
onClick={() => setDismissed(true)}
className={`flex-shrink-0 rounded p-1 transition-colors ${dismissClasses}`}
aria-label="Dismiss disclaimer"
>
<X className="w-4 h-4" />
</button>
{!isRemoteReadonly ? (
<button
onClick={() => setDismissed(true)}
className={`flex-shrink-0 rounded p-1 transition-colors ${dismissClasses}`}
aria-label="Dismiss disclaimer"
>
<X className="w-4 h-4" />
</button>
) : null}
</div>
</div>
);