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
@@ -1,10 +1,15 @@
import { afterAll, afterEach, beforeAll, beforeEach, describe, expect, it } from 'bun:test';
import bcrypt from 'bcrypt';
import express from 'express';
import type { Server } from 'http';
import * as fs from 'fs';
import * as os from 'os';
import * as path from 'path';
import { apiRoutes } from '../../../src/web-server/routes';
import {
authMiddleware,
createSessionMiddleware,
} from '../../../src/web-server/middleware/auth-middleware';
describe('api-routes remote write guard', () => {
let server: Server;
@@ -107,12 +112,93 @@ describe('api-routes remote write guard', () => {
});
});
it('allows remote writes again when dashboard auth is enabled', async () => {
process.env.CCS_DASHBOARD_AUTH_ENABLED = 'true';
it('blocks remote PUT requests when dashboard auth is disabled', async () => {
const response = await fetch(`${baseUrl}/api/cliproxy-server`, {
method: 'PUT',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({}),
});
const response = await fetch(`${baseUrl}/api/profiles`, {
expect(response.status).toBe(403);
expect(await response.json()).toEqual({
error: 'Remote dashboard writes require localhost access when dashboard auth is disabled.',
});
});
it('blocks remote PATCH requests when dashboard auth is disabled', async () => {
const response = await fetch(`${baseUrl}/api/codex/config/patch`, {
method: 'PATCH',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({}),
});
expect(response.status).toBe(403);
expect(await response.json()).toEqual({
error: 'Remote dashboard writes require localhost access when dashboard auth is disabled.',
});
});
it('blocks remote DELETE requests when dashboard auth is disabled', async () => {
const response = await fetch(`${baseUrl}/api/profiles/demo`, {
method: 'DELETE',
});
expect(response.status).toBe(403);
expect(await response.json()).toEqual({
error: 'Remote dashboard writes require localhost access when dashboard auth is disabled.',
});
});
it('allows remote writes again when dashboard auth is enabled', async () => {
const password = 'testpassword123';
process.env.CCS_DASHBOARD_AUTH_ENABLED = 'true';
process.env.CCS_DASHBOARD_USERNAME = 'admin';
process.env.CCS_DASHBOARD_PASSWORD_HASH = await bcrypt.hash(password, 10);
const authApp = express();
authApp.use(express.json());
authApp.use((req, _res, next) => {
Object.defineProperty(req.socket, 'remoteAddress', {
value: forcedRemoteAddress,
configurable: true,
});
next();
});
authApp.use(createSessionMiddleware());
authApp.use(authMiddleware);
authApp.use('/api', apiRoutes);
const authServer = await new Promise<Server>((resolve, reject) => {
const instance = authApp.listen(0, '127.0.0.1');
instance.once('error', reject);
instance.once('listening', () => resolve(instance));
});
const address = authServer.address();
if (!address || typeof address === 'string') {
throw new Error('Unable to resolve auth-enabled test server port');
}
const authBaseUrl = `http://127.0.0.1:${address.port}`;
const loginResponse = await fetch(`${authBaseUrl}/api/auth/login`, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
username: 'admin',
password,
}),
});
const cookie = loginResponse.headers.get('set-cookie');
expect(loginResponse.status).toBe(200);
expect(cookie).toBeTruthy();
const response = await fetch(`${authBaseUrl}/api/profiles`, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
Cookie: cookie as string,
},
body: JSON.stringify({
name: 'demo',
baseUrl: 'https://api.example.com',
@@ -120,6 +206,11 @@ describe('api-routes remote write guard', () => {
}),
});
expect(response.status).not.toBe(403);
expect(response.status).toBe(201);
await new Promise<void>((resolve) => authServer.close(() => resolve()));
delete process.env.CCS_DASHBOARD_USERNAME;
delete process.env.CCS_DASHBOARD_PASSWORD_HASH;
});
});
@@ -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>
);
@@ -18,6 +18,7 @@ describe('LocalhostDisclaimer', () => {
it('shows the local safety copy for loopback sessions', () => {
useAuthMock.mockReturnValue({
authEnabled: false,
authConfigured: false,
isLocalAccess: true,
loading: false,
});
@@ -32,6 +33,7 @@ describe('LocalhostDisclaimer', () => {
it('shows the remote read-only copy when auth is disabled for remote access', () => {
useAuthMock.mockReturnValue({
authEnabled: false,
authConfigured: false,
isLocalAccess: false,
loading: false,
});
@@ -43,5 +45,24 @@ describe('LocalhostDisclaimer', () => {
'Remote dashboard access is read-only until you run ccs config auth setup on the host.'
)
).toBeVisible();
expect(screen.queryByLabelText('Dismiss disclaimer')).toBeNull();
});
it('shows the re-enable message when host credentials already exist', () => {
useAuthMock.mockReturnValue({
authEnabled: false,
authConfigured: true,
isLocalAccess: false,
loading: false,
});
render(<LocalhostDisclaimer />);
expect(
screen.getByText(
'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.'
)
).toBeVisible();
expect(screen.queryByLabelText('Dismiss disclaimer')).toBeNull();
});
});