Web UI link

Both cloud-share-sender and cloud-share-receiver include a built-in web UI that opens automatically in your default browser when you start the tool. The UI is built with Bootstrap 5, Alpine.js, and a dark theme — no installation required, everything is served by the tool itself (CDN resources loaded from jsDelivr).

Sender UI link

The sender UI is served at http://localhost:5000 (or your custom port), but direct navigation without a token returns 401 Unauthorized. The UI is protected by a one-time access token generated at sender startup.

UI authentication flow link

When the sender starts, it generates a random 128-bit UI access token (separate from the encryption secret). The browser is opened automatically to:

  http://localhost:{port}/?token=<uiToken>
  

On that first request the server:

1. Validates the token with a constant-time comparison
2. Sets an HttpOnly SameSite=Strict cookie (ui_token)
3. Redirects to http://localhost:{port}/

All subsequent page loads are validated against the cookie. If the cookie is missing or invalid, the server returns 401 Unauthorized.

ℹ️ Info: You never need to handle the token manually — your browser is opened to the correct URL automatically. If you close the tab and reopen http://localhost:5000 directly, the existing cookie keeps you authenticated for the lifetime of the sender session.

⚠️ Warning: The ?token= URL is single-machine only. Do not share it — it grants access to the sender UI on your local machine.

📸 Screenshot needed: web-ui-sender-overview.png Description: Full sender web UI showing the tab bar (Text, File, Zip Bundle), the queue table below, and the dark theme

Tab bar link

The sender UI has three tabs for different item types:

Text tab link

The Text tab contains:

• A large text area for entering or pasting content
• A character/byte counter showing current size vs. the 10 MB limit
• A Share button that encrypts and queues the text immediately

📸 Screenshot needed: web-ui-sender-text-tab.png Description: Text tab with a snippet of code in the text area and the Share button highlighted

File tab link

The File tab contains:

• A drag-and-drop zone with a visual drop indicator
• A Browse button for opening a file picker
• The selected file name and size displayed after selection
• An Upload button

📸 Screenshot needed: web-ui-sender-file-tab.png Description: File tab showing the drop zone and a selected file ready to upload

Zip Bundle tab link

The Zip Bundle tab contains:

• A multi-file drop zone
• A file list showing added files with remove (×) buttons
• An Add Files button
• An optional Zip Password field
• A Create & Queue button

📸 Screenshot needed: web-ui-sender-zip-tab.png Description: Zip Bundle tab with multiple files listed and a password field

Queue table link

Below the tabs, the queue table lists all items currently in the sender’s memory:

📸 Screenshot needed: web-ui-sender-queue.png Description: Queue table showing a mix of text, file, and zip items with various statuses

Status badges link

Delete button link

Clicking the delete button (🗑️) next to an item immediately removes it from the queue. The receiver queue updates in real time via SSE.

Toast notifications link

When an item is successfully queued, a toast notification briefly appears in the corner of the screen confirming the action.

📸 Screenshot needed: web-ui-sender-toast.png Description: Toast notification saying “Item queued successfully” in the bottom-right corner

Receiver UI link

The receiver UI is served at http://localhost:5001 (or your custom port). Like the sender, all receiver endpoints are protected by a local session token — a random 128-bit value generated at startup. The browser is opened automatically with this token embedded in the initial page load, so no manual action is required.

The local token prevents any other process on the machine (or a website mounting a DNS-rebinding attack) from accessing received files and text via localhost:5001.

📸 Screenshot needed: web-ui-receiver-overview.png Description: Full receiver web UI showing the queue list and connection status badge

Connection status badge link

At the top of the receiver UI, a connection status badge shows whether the SSE event stream to the sender is active:

📸 Screenshot needed: web-ui-receiver-status-badge.png Description: Receiver header showing the green “Connected” badge

Queue list link

The receiver queue list mirrors the sender queue, updating in real time. Each item shows:

• Item type icon
• Name or text preview
• Size
• A Receive button

📸 Screenshot needed: web-ui-receiver-queue.png Description: Receiver queue list showing several items ready to receive

Hash verification modal link

After clicking Receive, a modal appears showing the hash verification result:

✅ Success state:

• Green checkmark icon
• “Hash verified” message
• The expected SHA-512 hash (from sender)
• The computed SHA-512 hash (receiver-computed)
• Both hashes match and are highlighted in green
• Copy to Clipboard button (for text) or Download button (for files/zips)

❌ Failure state:

• Red X icon
• “Hash mismatch” error message
• Both hashes displayed (they differ)
• An explanation that the item has been deleted from the sender

📸 Screenshot needed: web-ui-receiver-hash-success.png Description: Hash verification modal showing the green success state with matching hashes

📸 Screenshot needed: web-ui-receiver-hash-failure.png Description: Hash verification modal showing the red failure state with mismatched hashes

Auto-open behavior link

By default, both tools open their web UI in your default browser on startup. To disable this:

  cloud-share-sender --no-auto-open
cloud-share-receiver --no-auto-open
  

This is useful when running the tools in headless environments, CI pipelines, or scripts.

CDN resources link

The UI loads the following resources from jsDelivr:

ℹ️ Info: If the receiving machine cannot reach cdn.jsdelivr.net, the UI will appear unstyled. See Network Requirements for firewall rules.