sliftutils 1.7.9 → 1.7.11

package/storage/remoteStorage/ArchivesRemote.d.ts

@@ -1,22 +1,15 @@
 /// <reference types="node" />
 /// <reference types="node" />
-import { IArchives, ArchiveFileInfo } from "../IArchives";
+import { IArchives, ArchiveFileInfo, ArchivesConfig, ArchivesSyncStatus } from "../IArchives";
 export type ArchivesRemoteConfig = {
-    address: string;
-    port: number;
-    account: string;
-    bucketName: string;
-    public?: boolean;
-    fast?: boolean;
-    writeDelay?: number;
+    url: string;
+    accountName?: string;
+    waitForAccess?: boolean;
 };
-export declare function buildPublicFileURL(config: {
+export declare function parseStorageUrl(url: string): {
     address: string;
     port: number;
-    account: string;
-    bucketName: string;
-    path: string;
-}): string;
+};
 export declare function authenticateStorage(config: {
     address: string;
     port: number;
@@ -28,16 +21,24 @@ export declare function authenticateStorage(config: {
 export declare class ArchivesRemote implements IArchives {
     private config;
     constructor(config: ArchivesRemoteConfig);
+    private parsed;
+    private account;
+    private bucketName;
     private nodeId;
     private controller;
-    private setupDone;
     private lastDeniedLog;
     getDebugName(): string;
+    isConnected(): boolean;
+    ping(): Promise<void>;
     private authenticate;
     private callAuthed;
-    waitingForAccess(): Promise<string | undefined>;
-    private onAccessDenied;
-    private ensureSetup;
+    waitingForAccess(): Promise<{
+        link: string;
+        machineId: string;
+        ip: string;
+    } | undefined>;
+    hasWriteAccess(): Promise<boolean>;
+    private registerAccessRequest;
     private call;
     get(fileName: string, config?: {
         range?: {
@@ -45,7 +46,19 @@ export declare class ArchivesRemote implements IArchives {
             end: number;
         };
     }): Promise<Buffer | undefined>;
-    set(fileName: string, data: Buffer): Promise<void>;
+    get2(fileName: string, config?: {
+        range?: {
+            start: number;
+            end: number;
+        };
+    }): Promise<{
+        data: Buffer;
+        writeTime: number;
+        size: number;
+    } | undefined>;
+    set(fileName: string, data: Buffer, config?: {
+        lastModified?: number;
+    }): Promise<void>;
     del(fileName: string): Promise<void>;
     getInfo(fileName: string): Promise<{
         writeTime: number;
@@ -59,6 +72,9 @@ export declare class ArchivesRemote implements IArchives {
         shallow?: boolean;
         type: "files" | "folders";
     }): Promise<string[]>;
+    getChangesAfter(time: number): Promise<ArchiveFileInfo[]>;
+    getConfig(): Promise<ArchivesConfig>;
+    getSyncStatus(): Promise<ArchivesSyncStatus>;
     setLargeFile(config: {
         path: string;
         getNextData(): Promise<Buffer | undefined>;

package/storage/remoteStorage/ArchivesRemote.ts

@@ -4,37 +4,38 @@ import { SocketFunction } from "socket-function/SocketFunction";
 import { timeInMinute } from "socket-function/src/misc";
 import { delay } from "socket-function/src/batching";
 import { getIdentityCA, loadIdentityCA, sign } from "../../misc/https/certs";
-import { IArchives, ArchiveFileInfo } from "../IArchives";
+import { IArchives, ArchiveFileInfo, ArchivesConfig, ArchivesSyncStatus } from "../IArchives";
+import { parseHostedUrl, getBucketBaseUrl, buildFileUrl } from "./remoteConfig";
 import {
-    RemoteStorageController, REMOTE_STORAGE_CLASS_GUID, STORAGE_AUTH_PURPOSE,
+    RemoteStorageController, STORAGE_AUTH_PURPOSE,
     STORAGE_NOT_AUTHENTICATED, STORAGE_ACCESS_DENIED,
 } from "./storageController";
 
 // A bucket on our remote storage server (storageServer.ts), used like ArchivesBackblaze. Works in
 // Node.js and the browser. Authenticates with this machine's certs.ts identity; if the account
-// hasn't trusted this machine yet it requests access, waits, and logs instructions every minute
-// (calls block until access is granted).
+// hasn't trusted this machine yet it requests access, and by default waits, logging instructions
+// every minute (calls block until access is granted).
 
 const ACCESS_RETRY_DELAY = 1000 * 30;
 const LARGE_FILE_PART_SIZE = 8 * 1024 * 1024;
 
 export type ArchivesRemoteConfig = {
-    address: string;
-    port: number;
-    account: string;
-    bucketName: string;
-    // Public buckets are served over plain HTTPS GETs (getURL). Private buckets are API-access only.
-    public?: boolean;
-    // Fast mode: the server acknowledges writes once they are in memory, flushing to disk after
-    // writeDelay (default 5 minutes) and coalescing writes to the same file. A server crash loses
-    // writes that haven't flushed yet.
-    fast?: boolean;
-    writeDelay?: number;
+    // The bucket's routing URL, which addresses the server, account, and bucket in one:
+    //  https://storage.example.com:4444/file/<account>/<bucketName>/storage/storagerouting.json
+    url: string;
+    // Access is checked against this account (defaults to the account in the url)
+    accountName?: string;
+    // false: access-denied calls throw immediately (the error includes the access page link)
+    // instead of requesting access and blocking until it is granted (the default).
+    waitForAccess?: boolean;
 };
 
-export function buildPublicFileURL(config: { address: string; port: number; account: string; bucketName: string; path: string }): string {
-    let args = encodeURIComponent(JSON.stringify([config.account, config.bucketName, config.path]));
-    return `https://${config.address}:${config.port}/?classGuid=${REMOTE_STORAGE_CLASS_GUID}&functionName=getPublicFile&args=${args}`;
+export function parseStorageUrl(url: string): { address: string; port: number } {
+    let u = new URL(url);
+    if (u.protocol !== "https:") {
+        throw new Error(`Storage URL must use https, got ${JSON.stringify(u.protocol)} in ${JSON.stringify(url)}`);
+    }
+    return { address: u.hostname, port: +u.port || 443 };
 }
 
 // Authenticates a connection to a storage server with this machine's certs.ts identity
@@ -61,17 +62,27 @@ export class ArchivesRemote implements IArchives {
         SocketFunction.ENABLE_CLIENT_MODE = true;
     }
 
-    private nodeId = SocketFunction.connect({ address: this.config.address, port: this.config.port });
+    private parsed = parseHostedUrl(this.config.url);
+    private account = this.config.accountName || this.parsed.account;
+    private bucketName = this.parsed.bucketName;
+    private nodeId = SocketFunction.connect({ address: this.parsed.address, port: this.parsed.port });
     private controller = RemoteStorageController.nodes[this.nodeId];
-    private setupDone = false;
     private lastDeniedLog = 0;
 
     public getDebugName() {
-        return `remoteStorage/${this.config.address}:${this.config.port}/${this.config.account}/${this.config.bucketName}`;
+        return `remoteStorage/${this.parsed.address}:${this.parsed.port}/${this.account}/${this.bucketName}`;
+    }
+
+    public isConnected(): boolean {
+        return SocketFunction.isNodeConnected(this.nodeId);
+    }
+
+    public async ping(): Promise<void> {
+        await this.controller.ping();
     }
 
     private async authenticate(): Promise<void> {
-        await authenticateStorage({ address: this.config.address, port: this.config.port, nodeId: this.nodeId });
+        await authenticateStorage({ address: this.parsed.address, port: this.parsed.port, nodeId: this.nodeId });
     }
 
     // Runs a call, authenticating (and re-authenticating after reconnects) as needed. Unlike
@@ -87,50 +98,54 @@ export class ArchivesRemote implements IArchives {
     }
 
     // Returns undefined if this machine has access to the account. Otherwise puts in an access
-    // request and returns the link to the page where access can be granted.
-    public async waitingForAccess(): Promise<string | undefined> {
-        let state = await this.callAuthed(() => this.controller.getAccessState(this.config.account));
+    // request and returns our machineId + ip (so the caller can display them alongside the link,
+    // for the approver to match the incoming request) and the link to the grant page.
+    public async waitingForAccess(): Promise<{ link: string; machineId: string; ip: string } | undefined> {
+        let state = await this.callAuthed(() => this.controller.getAccessState(this.account));
         if (state.hasAccess) return undefined;
-        await this.callAuthed(() => this.controller.requestAccess(this.config.account));
-        return `https://${this.config.address}:${this.config.port}/${this.config.account}`;
+        let requested = await this.callAuthed(() => this.controller.requestAccess(this.account));
+        return {
+            link: `https://${this.parsed.address}:${this.parsed.port}/${this.account}`,
+            machineId: requested.machineId,
+            ip: requested.ip,
+        };
+    }
+
+    public async hasWriteAccess(): Promise<boolean> {
+        let state = await this.callAuthed(() => this.controller.getAccessState(this.account));
+        return !!state.hasAccess;
     }
 
-    private async onAccessDenied(): Promise<void> {
-        let requested = await this.callAuthed(() => this.controller.requestAccess(this.config.account));
+    // Registers our access request server-side (so an admin has a requestId to grant) and logs the
+    // grant instructions, at most once a minute
+    private async registerAccessRequest(): Promise<void> {
+        let requested = await this.callAuthed(() => this.controller.requestAccess(this.account));
         if (Date.now() - this.lastDeniedLog > timeInMinute) {
             this.lastDeniedLog = Date.now();
-            console.log(`No access to storage account ${JSON.stringify(this.config.account)} on ${this.config.address}:${this.config.port} (our machine ${requested.machineId}, ip ${requested.ip}). Waiting for access to be granted. See https://${this.config.address}:${this.config.port}/${this.config.account} - or grant it with: ${requested.grantAccessCommand}`);
+            console.log(`No access to storage account ${JSON.stringify(this.account)} on ${this.parsed.address}:${this.parsed.port} (our machine ${requested.machineId}, ip ${requested.ip}). See https://${this.parsed.address}:${this.parsed.port}/${this.account} - or grant it with: ${requested.grantAccessCommand}`);
         }
-        await delay(ACCESS_RETRY_DELAY);
-    }
-
-    private async ensureSetup(): Promise<void> {
-        if (this.setupDone) return;
-        await this.controller.ensureBucket(this.config.account, this.config.bucketName, {
-            public: this.config.public,
-            fast: this.config.fast,
-            writeDelay: this.config.writeDelay,
-        });
-        this.setupDone = true;
     }
 
     // Runs a call, authenticating (and re-authenticating after reconnects) and waiting for account
-    // access as needed.
+    // access as needed. With waitForAccess false, denied calls throw immediately instead - but the
+    // access request is still registered (in the background), so the denial is grantable.
     private async call<T>(fnc: () => Promise<T>): Promise<T> {
         while (true) {
             try {
-                await this.ensureSetup();
                 return await fnc();
             } catch (e: any) {
                 let message = String(e.stack || e);
                 if (message.includes(STORAGE_NOT_AUTHENTICATED)) {
-                    this.setupDone = false;
                     await this.authenticate();
                     continue;
                 }
                 if (message.includes(STORAGE_ACCESS_DENIED)) {
-                    this.setupDone = false;
-                    await this.onAccessDenied();
+                    if (this.config.waitForAccess === false) {
+                        void this.registerAccessRequest().catch(() => { });
+                        throw e;
+                    }
+                    await this.registerAccessRequest();
+                    await delay(ACCESS_RETRY_DELAY);
                     continue;
                 }
                 throw e;
@@ -139,30 +154,43 @@ export class ArchivesRemote implements IArchives {
     }
 
     public async get(fileName: string, config?: { range?: { start: number; end: number } }): Promise<Buffer | undefined> {
-        let result = await this.call(() => this.controller.get(this.config.account, this.config.bucketName, fileName, config?.range));
-        return result && Buffer.from(result) || undefined;
+        let result = await this.get2(fileName, config);
+        return result && result.data || undefined;
     }
-    public async set(fileName: string, data: Buffer): Promise<void> {
-        await this.call(() => this.controller.set(this.config.account, this.config.bucketName, fileName, data));
+    public async get2(fileName: string, config?: { range?: { start: number; end: number } }): Promise<{ data: Buffer; writeTime: number; size: number } | undefined> {
+        let result = await this.call(() => this.controller.get2(this.account, this.bucketName, fileName, config?.range));
+        return result && { data: Buffer.from(result.data), writeTime: result.writeTime, size: result.size } || undefined;
+    }
+    public async set(fileName: string, data: Buffer, config?: { lastModified?: number }): Promise<void> {
+        await this.call(() => this.controller.set(this.account, this.bucketName, fileName, data, config?.lastModified));
     }
     public async del(fileName: string): Promise<void> {
-        await this.call(() => this.controller.del(this.config.account, this.config.bucketName, fileName));
+        await this.call(() => this.controller.del(this.account, this.bucketName, fileName));
     }
     public async getInfo(fileName: string): Promise<{ writeTime: number; size: number } | undefined> {
-        return await this.call(() => this.controller.getInfo(this.config.account, this.config.bucketName, fileName));
+        return await this.call(() => this.controller.getInfo(this.account, this.bucketName, fileName));
     }
     public async findInfo(prefix: string, config?: { shallow?: boolean; type: "files" | "folders" }): Promise<ArchiveFileInfo[]> {
-        return await this.call(() => this.controller.findInfo(this.config.account, this.config.bucketName, prefix, config));
+        return await this.call(() => this.controller.findInfo(this.account, this.bucketName, prefix, config));
     }
     public async find(prefix: string, config?: { shallow?: boolean; type: "files" | "folders" }): Promise<string[]> {
         return (await this.findInfo(prefix, config)).map(x => x.path);
     }
+    public async getChangesAfter(time: number): Promise<ArchiveFileInfo[]> {
+        return await this.call(() => this.controller.getChangesAfter(this.account, this.bucketName, time));
+    }
+    public async getConfig(): Promise<ArchivesConfig> {
+        return await this.call(() => this.controller.getArchivesConfig(this.account, this.bucketName));
+    }
+    public async getSyncStatus(): Promise<ArchivesSyncStatus> {
+        return await this.call(() => this.controller.getSyncStatus(this.account, this.bucketName));
+    }
 
     public async setLargeFile(config: { path: string; getNextData(): Promise<Buffer | undefined> }): Promise<void> {
         // Ensure we're authenticated with access BEFORE consuming any data (the stream cannot be
         // rewound, so we can't use the retry loop around the actual upload)
-        await this.call(() => this.controller.getInfo(this.config.account, this.config.bucketName, config.path));
-        let uploadId = await this.controller.startLargeFile(this.config.account, this.config.bucketName, config.path);
+        await this.call(() => this.controller.getInfo(this.account, this.bucketName, config.path));
+        let uploadId = await this.controller.startLargeFile(this.account, this.bucketName, config.path);
         try {
             while (true) {
                 let data = await config.getNextData();
@@ -181,15 +209,7 @@ export class ArchivesRemote implements IArchives {
     }
 
     public async getURL(path: string): Promise<string> {
-        if (!this.config.public) {
-            throw new Error(`getURL only works on public buckets (private buckets are API-access only). Bucket: ${this.getDebugName()}`);
-        }
-        return buildPublicFileURL({
-            address: this.config.address,
-            port: this.config.port,
-            account: this.config.account,
-            bucketName: this.config.bucketName,
-            path,
-        });
+        // Only actually loads for public buckets (the server rejects plain URL reads otherwise)
+        return buildFileUrl(getBucketBaseUrl(this.config.url), path);
     }
 }

package/storage/remoteStorage/ArchivesUrl.d.ts

@@ -0,0 +1,48 @@
+/// <reference types="node" />
+/// <reference types="node" />
+import { IArchives, ArchiveFileInfo, ArchivesConfig } from "../IArchives";
+export declare class ArchivesUrl implements IArchives {
+    private base;
+    constructor(base: string);
+    getDebugName(): string;
+    private readOnlyError;
+    get(fileName: string, config?: {
+        range?: {
+            start: number;
+            end: number;
+        };
+    }): Promise<Buffer | undefined>;
+    get2(fileName: string, config?: {
+        range?: {
+            start: number;
+            end: number;
+        };
+    }): Promise<{
+        data: Buffer;
+        writeTime: number;
+        size: number;
+    } | undefined>;
+    getInfo(fileName: string): Promise<{
+        writeTime: number;
+        size: number;
+    } | undefined>;
+    set(fileName: string, data: Buffer, config?: {
+        lastModified?: number;
+    }): Promise<void>;
+    del(fileName: string): Promise<void>;
+    setLargeFile(config: {
+        path: string;
+        getNextData(): Promise<Buffer | undefined>;
+    }): Promise<void>;
+    find(prefix: string, config?: {
+        shallow?: boolean;
+        type: "files" | "folders";
+    }): Promise<string[]>;
+    findInfo(prefix: string, config?: {
+        shallow?: boolean;
+        type: "files" | "folders";
+    }): Promise<ArchiveFileInfo[]>;
+    getURL(path: string): Promise<string>;
+    getConfig(): Promise<ArchivesConfig>;
+    hasWriteAccess(): Promise<boolean>;
+}

package/storage/remoteStorage/ArchivesUrl.ts

@@ -0,0 +1,86 @@
+module.allowclient = true;
+
+import { IArchives, ArchiveFileInfo, ArchivesConfig } from "../IArchives";
+import { buildFileUrl } from "./remoteConfig";
+
+// Read-only IArchives over a public bucket's plain-URL form (our storage server's
+// /file/<account>/<bucketName>/... route, or a backblaze friendly URL). Used when we have no API
+// access to a source. Only single-file reads work: there is no listing, and writes always throw.
+
+export class ArchivesUrl implements IArchives {
+    // base is the bucket's public base URL, e.g. https://host:port/file/<account>/<bucketName>
+    constructor(private base: string) { }
+
+    public getDebugName() {
+        return `url/${this.base}`;
+    }
+
+    private readOnlyError(operation: string): Error {
+        return new Error(`${operation} is not supported over URL-form access (no API access to this source, only public URL reads). Source: ${this.base}`);
+    }
+
+    public async get(fileName: string, config?: { range?: { start: number; end: number } }): Promise<Buffer | undefined> {
+        let result = await this.get2(fileName, config);
+        return result && result.data || undefined;
+    }
+    public async get2(fileName: string, config?: { range?: { start: number; end: number } }): Promise<{ data: Buffer; writeTime: number; size: number } | undefined> {
+        let url = buildFileUrl(this.base, fileName);
+        let headers: Record<string, string> = {};
+        let range = config?.range;
+        if (range) {
+            headers["Range"] = `bytes=${range.start}-${range.end - 1}`;
+        }
+        let response = await fetch(url, { headers });
+        if (response.status === 404) return undefined;
+        if (!response.ok) {
+            throw new Error(`Read of ${url} failed: ${response.status} ${response.statusText}`);
+        }
+        let data = Buffer.from(await response.arrayBuffer());
+        // A real 206 only returns the requested slice, so the full size lives in Content-Range's total.
+        let size = data.length;
+        let contentRange = response.headers.get("content-range");
+        let total = contentRange && Number(contentRange.split("/")[1]);
+        if (total && Number.isFinite(total)) {
+            size = total;
+        }
+        // Servers that don't support ranges return the full file with a 200 (ours serves real
+        // 206s, but backblaze friendly URLs and proxies may not)
+        if (range && response.status === 200) {
+            data = data.subarray(Math.min(range.start, data.length), Math.min(range.end, data.length));
+        }
+        let lastModified = response.headers.get("last-modified");
+        let writeTime = lastModified && new Date(lastModified).getTime() || 0;
+        return { data, writeTime, size };
+    }
+    public async getInfo(fileName: string): Promise<{ writeTime: number; size: number } | undefined> {
+        let result = await this.get2(fileName);
+        return result && { writeTime: result.writeTime, size: result.size } || undefined;
+    }
+
+    public async set(fileName: string, data: Buffer, config?: { lastModified?: number }): Promise<void> {
+        throw this.readOnlyError("set");
+    }
+    public async del(fileName: string): Promise<void> {
+        throw this.readOnlyError("del");
+    }
+    public async setLargeFile(config: { path: string; getNextData(): Promise<Buffer | undefined> }): Promise<void> {
+        throw this.readOnlyError("setLargeFile");
+    }
+    public async find(prefix: string, config?: { shallow?: boolean; type: "files" | "folders" }): Promise<string[]> {
+        throw this.readOnlyError("find (listing)");
+    }
+    public async findInfo(prefix: string, config?: { shallow?: boolean; type: "files" | "folders" }): Promise<ArchiveFileInfo[]> {
+        throw this.readOnlyError("findInfo (listing)");
+    }
+
+    public async getURL(path: string): Promise<string> {
+        return buildFileUrl(this.base, path);
+    }
+    public async getConfig(): Promise<ArchivesConfig> {
+        return {};
+    }
+
+    public async hasWriteAccess(): Promise<boolean> {
+        return false;
+    }
+}

package/storage/remoteStorage/accessPage.tsx

@@ -6,12 +6,14 @@ import { observer } from "../../render-utils/observer";
 import { isNode } from "socket-function/src/misc";
 import { css } from "typesafecss";
 import { SocketFunction } from "socket-function/SocketFunction";
-import { RemoteStorageController, AccessState } from "./storageController";
+import { RemoteStorageController, AccessState, AccessRequest } from "./storageController";
 import { authenticateStorage } from "./ArchivesRemote";
 
 // The storage server's access page. Visit https://<storageDomain>:<port>/<accountName> to request
-// access to that account for this browser's machine identity. Shows the command to run on the
-// storage machine to grant it, and once granted, the machines with (or requesting) access.
+// access to that account for this browser's machine identity. Once granted, lists the machines that
+// have access. To approve someone else's request, the user must type in the requester's IP —
+// pending requests are NEVER shown unsolicited (so a trusted user can't accidentally approve a
+// random machine's request).
 
 const REFRESH_INTERVAL = 1000 * 15;
 const COPIED_RESET_DELAY = 2000;
@@ -47,6 +49,11 @@ class AccessPage extends preact.Component {
         account: "",
         state: undefined as AccessState | undefined,
         error: "",
+        lookupIp: "",
+        lookupResults: undefined as { ip: string; requests: AccessRequest[] } | undefined,
+        lookupError: "",
+        looking: false,
+        granting: "",
     });
 
     componentDidMount() {
@@ -67,22 +74,58 @@ class AccessPage extends preact.Component {
     }
 
     private authenticated = false;
-    private async refresh(account: string) {
+    private async controller() {
         let address = location.hostname;
         let port = +location.port || 443;
         let nodeId = SocketFunction.connect({ address, port });
-        let controller = RemoteStorageController.nodes[nodeId];
         if (!this.authenticated) {
             await authenticateStorage({ address, port, nodeId });
             this.authenticated = true;
         }
+        return RemoteStorageController.nodes[nodeId];
+    }
+    private async refresh(account: string) {
+        let controller = await this.controller();
         await controller.requestAccess(account);
         this.synced.state = await controller.getAccessState(account);
         this.synced.error = "";
     }
 
+    private lookupIP = async () => {
+        let ip = this.synced.lookupIp.trim();
+        if (!ip) return;
+        this.synced.looking = true;
+        this.synced.lookupError = "";
+        try {
+            let controller = await this.controller();
+            let requests = await controller.listRequestsForIP(this.synced.account, ip);
+            this.synced.lookupResults = { ip, requests };
+        } catch (e) {
+            this.synced.lookupError = String(e);
+        } finally {
+            this.synced.looking = false;
+        }
+    };
+
+    private approve = async (request: AccessRequest) => {
+        this.synced.granting = request.requestId;
+        try {
+            let controller = await this.controller();
+            await controller.grantAccess(request.requestId);
+            if (this.synced.lookupResults) {
+                this.synced.lookupResults.requests = this.synced.lookupResults.requests.filter(r => r.requestId !== request.requestId);
+            }
+            await this.refresh(this.synced.account);
+        } catch (e) {
+            this.synced.lookupError = String(e);
+        } finally {
+            this.synced.granting = "";
+        }
+    };
+
     render() {
-        let { account, state, error } = this.synced;
+        let synced = this.synced;
+        let { account, state, error } = synced;
         if (!account) {
             return <div className={css.vbox(8).pad2(16)}>
                 <div>Remote storage server.</div>
@@ -95,31 +138,71 @@ class AccessPage extends preact.Component {
             {!state && !error && <div>Requesting access...</div>}
             {state && !state.hasAccess && <div className={css.vbox(8)}>
                 <div>This machine ({state.machineId}, ip {state.ip}) does NOT have access yet.</div>
-                <div>An access request has been made. To grant it, run this single command (it sshes into the storage machine):</div>
-                <CopyableCommand command={state.grantAccessCommand || state.listAccessCommand} />
+                <div>An access request has been made. To grant it, run this command:</div>
+                {state.grantAccessCommand && <CopyableCommand command={state.grantAccessCommand} />}
                 <div>This page rechecks every {REFRESH_INTERVAL / 1000} seconds.</div>
             </div>}
-            {state && state.hasAccess && <div className={css.vbox(8)}>
+            {state && state.hasAccess && <div className={css.vbox(16)}>
                 <div>This machine ({state.machineId}, ip {state.ip}) has access.</div>
-                <div>Machines with or requesting access:</div>
-                <table>
-                    <thead>
-                        <tr>
-                            <th>Machine</th>
-                            <th>IP</th>
-                            <th>Time</th>
-                            <th>Status</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        {(state.machines || []).map(machine => <tr key={machine.machineId}>
-                            <td className={css.pad2(8, 2)}>{machine.machineId}</td>
-                            <td className={css.pad2(8, 2)}>{machine.ip}</td>
-                            <td className={css.pad2(8, 2)}>{new Date(machine.time).toLocaleString()}</td>
-                            <td className={css.pad2(8, 2)}>{machine.trusted && "has access" || "requesting access"}</td>
-                        </tr>)}
-                    </tbody>
-                </table>
+                <div className={css.vbox(6)}>
+                    <div>Machines with access:</div>
+                    <table>
+                        <thead>
+                            <tr>
+                                <th className={css.pad2(8, 2).textAlign("left")}>Machine</th>
+                                <th className={css.pad2(8, 2).textAlign("left")}>IP</th>
+                                <th className={css.pad2(8, 2).textAlign("left")}>Granted</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            {(state.trustedMachines || []).map(m => <tr key={m.machineId}>
+                                <td className={css.pad2(8, 2)}>{m.machineId}</td>
+                                <td className={css.pad2(8, 2)}>{m.ip}</td>
+                                <td className={css.pad2(8, 2)}>{new Date(m.time).toLocaleString()}</td>
+                            </tr>)}
+                        </tbody>
+                    </table>
+                </div>
+                <div className={css.vbox(6)}>
+                    <div>Approve request</div>
+                    <div className={css.hbox(8).alignItems("center")}>
+                        <input
+                            placeholder="ip"
+                            value={synced.lookupIp}
+                            onInput={e => { synced.lookupIp = (e.currentTarget as HTMLInputElement).value; }}
+                            onKeyDown={e => { if (e.key === "Enter") void this.lookupIP(); }}
+                        />
+                        <button disabled={synced.looking || !synced.lookupIp.trim()} onClick={this.lookupIP}>
+                            search
+                        </button>
+                    </div>
+                    {synced.lookupError && <div>Error: {synced.lookupError}</div>}
+                    {synced.lookupResults && synced.lookupResults.requests.length === 0 && <div>
+                        No pending requests for {synced.lookupResults.ip} on this account.
+                    </div>}
+                    {synced.lookupResults && synced.lookupResults.requests.length > 0 && <table>
+                        <thead>
+                            <tr>
+                                <th className={css.pad2(8, 2).textAlign("left")}>Machine</th>
+                                <th className={css.pad2(8, 2).textAlign("left")}>IP</th>
+                                <th className={css.pad2(8, 2).textAlign("left")}>Requested</th>
+                                <th className={css.pad2(8, 2).textAlign("left")}></th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            {synced.lookupResults.requests.map(r => <tr key={r.requestId}>
+                                <td className={css.pad2(8, 2)}>{r.machineId}</td>
+                                <td className={css.pad2(8, 2)}>{r.ip}</td>
+                                <td className={css.pad2(8, 2)}>{new Date(r.time).toLocaleString()}</td>
+                                <td className={css.pad2(8, 2)}>
+                                    <button disabled={!!synced.granting} onClick={async () => this.approve(r)}>
+                                        {synced.granting === r.requestId && "Approving..." || "Approve"}
+                                    </button>
+                                </td>
+                            </tr>)}
+                        </tbody>
+                    </table>}
+                </div>
             </div>}
         </div>;
     }