fix(web): repair bare-domain key redirect, enforce https providers, and polish profile UI

Author: shibme

web/css/app.css

@@ -94,13 +94,15 @@
 
 /* ---- Profile button ----------------------------------------------------- */
 
-/* When a name is set the button widens from a circle into a pill with the name
-   beside the icon; with no name it stays the plain round icon button. */
+/* When a name is set (the .has-name class) the button widens from a circle into
+   a pill with the icon + name; with no name it stays the plain round icon button.
+   On narrow viewports the pill collapses back to a round badge showing initials
+   (see the mobile override) so a long name can't overflow the top bar. */
 .profile-button {
     gap: 7px;
 }
 
-.profile-button:has(.profile-button-name:not([hidden])) {
+.profile-button.has-name {
     width: auto;
     padding: 0 14px 0 11px;
 }
@@ -119,6 +121,15 @@
     white-space: nowrap;
 }
 
+/* Initials badge: hidden by default (the name is shown instead); revealed only
+   in the narrow-viewport override below. */
+.profile-button-initials {
+    display: none;
+    font-weight: 700;
+    font-size: 13px;
+    line-height: 1;
+}
+
 /* ---- Identity card (profile modal) -------------------------------------- */
 
 .identity-card {
@@ -723,6 +734,27 @@ textarea:focus::placeholder {
         gap: 6px;
     }
 
+    /* Collapse the named profile pill back to a round badge so a long name can't
+       overflow the bar: hide the name, hide the person icon, show the initials
+       centred in the circular button. */
+    .profile-button.has-name {
+        width: 38px;
+        padding: 0;
+        gap: 0;
+    }
+
+    .profile-button.has-name .profile-button-name {
+        display: none;
+    }
+
+    .profile-button.has-name .profile-button-icon {
+        display: none;
+    }
+
+    .profile-button.has-name .profile-button-initials {
+        display: inline-flex;
+    }
+
     .app-container {
         padding: 20px 18px;
         border-radius: var(--radius-md);

web/css/objects.css

@@ -70,16 +70,21 @@
     height: 38px;
     border: 1px solid var(--border-color);
     background: var(--surface-2);
+    /* Explicit colour so SVG icons (stroke: currentColor) and any button text
+       stay legible in both themes; without it they inherited an ambient colour
+       that washed out against the dark surface. */
+    color: var(--text-color);
     border-radius: var(--radius-pill);
     cursor: pointer;
     font-size: 16px;
     text-decoration: none;
-    transition: background 0.2s var(--ease), transform 0.2s var(--ease), border-color 0.2s var(--ease);
+    transition: background 0.2s var(--ease), transform 0.2s var(--ease), border-color 0.2s var(--ease), color 0.2s var(--ease);
 }
 
 .topbar-icon-button:hover {
     background: var(--surface-color);
     border-color: var(--border-strong);
+    color: var(--text-color);
     transform: translateY(-1px);
 }
 

web/docs/index.html

@@ -610,7 +610,7 @@ <h3>Opening the app</h3>
                                 <tr><th>Parameter</th><th>Required</th><th>Description</th></tr>
                             </thead>
                             <tbody>
-                                <tr><td><code>provider</code></td><td>Yes</td><td>Your provider URL (HTTPS, or <code>http</code> only for loopback hosts). A bare domain is promoted to HTTPS.</td></tr>
+                                <tr><td><code>provider</code></td><td>Yes</td><td>Your provider URL. The scheme is optional: a bare host like <code>auth.example.com</code> is promoted to HTTPS automatically. If you do include a scheme it must be <code>https://</code> (only loopback hosts may use <code>http://</code>, for local development); any other scheme is rejected.</td></tr>
                                 <tr><td><code>provider_ecc</code></td><td>No</td><td>Set (e.g. <code>provider_ecc=1</code>) to request the compact X25519 key up front instead of the hybrid one. Use this when you know your server caps request URLs below ~4&nbsp;KB, to skip the hybrid attempt. Omit it to get the stronger hybrid key with automatic fallback.</td></tr>
                             </tbody>
                         </table>

web/index.html

@@ -67,6 +67,7 @@
             <button type="button" id="settings-button" class="topbar-icon-button profile-button"
                 title="Your profile: identity, key, password, and encryption options" aria-label="Open profile">
                 <svg class="profile-button-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="8" r="4"></circle><path d="M4 20c0-4 3.6-7 8-7s8 3 8 7"></path></svg>
+                <span id="profile-button-initials" class="profile-button-initials" aria-hidden="true"></span>
                 <span id="profile-button-name" class="profile-button-name" hidden></span>
             </button>
         </nav>

web/js/main.js

@@ -21,7 +21,6 @@ const publinkCopyButton = document.getElementById("publink-copy-button");
 const publinkShareButton = document.getElementById("publink-share-button");
 const modeBadge = document.getElementById("mode-badge");
 const modeBadgeText = document.getElementById("mode-badge-text");
-const { xk, xt, xn, redirecting } = initParams();
 
 // Matches a bare host (optionally with a port/path) that has no URL scheme,
 // e.g. "alice.com" or "alice.com/keys". Mirrors domainRegex in resolver.go.
@@ -115,6 +114,11 @@ function initParams() {
     return { xk: null, xt: null };
 }
 
+// Resolve URL params now that initParams and the regexes/helpers it relies on are
+// all declared. (Calling it earlier hit the const temporal dead zone for the
+// regexes, throwing on bare-domain refs like ?xk=shib.me and halting startup.)
+const { xk, xt, xn, redirecting } = initParams();
+
 function getEncryptionTarget() {
     if (!xk) {
         return "with your Key";
@@ -478,6 +482,13 @@ function setupModeUI() {
             ? `Encrypting for ${xn}`
             : "Encrypting for the shared recipient";
         modeBadge.hidden = false;
+        // Reflect the recipient in the page title so the tab is identifiable,
+        // preferring the resolved name when the key URL provided one.
+        if (xn) {
+            document.title = `Encrypting for ${xn} · Xipher`;
+        } else {
+            document.title = "Encrypting a secret · Xipher";
+        }
         // The visitor's own receive-link is not relevant in this flow.
         if (linkSection) {
             linkSection.hidden = true;

web/js/provider.js

@@ -56,27 +56,43 @@ function buildProviderUrl(providerUrl, publicKey, state) {
     return target.toString();
 }
 
-// normalizeProviderUrl applies the same scheme rules as key URLs (see main.js):
-// https anywhere, http only for loopback hosts, bare domains promoted to https.
-// Returns the absolute URL string, or null if not permitted.
+// normalizeProviderUrl resolves a provider reference to an absolute URL the app
+// will redirect to. A scheme is optional: a schemeless host is promoted to
+// https (http for loopback hosts during local development), so "shib.me" and
+// "shib.me/issue" both work. If a scheme IS given it must be https, since the
+// provider receives the ephemeral public key and we never want it sent in the
+// clear; the only exception is http to a loopback host for development.
+// Returns { url } on success or { error } with a short reason otherwise.
 function normalizeProviderUrl(value) {
     if (!value) {
-        return null;
+        return { error: "invalid" };
     }
     value = value.trim();
-    if (isFetchableUrl(value)) {
-        return value;
-    }
-    if (!SCHEME_REGEX.test(value)) {
-        const host = value.split("/")[0].split(":")[0];
-        if (isLoopbackHost(host)) {
-            return "http://" + value;
+
+    if (SCHEME_REGEX.test(value)) {
+        let u;
+        try {
+            u = new URL(value);
+        } catch (e) {
+            return { error: "invalid" };
         }
-        if (DOMAIN_REGEX.test(value)) {
-            return "https://" + value;
+        if (u.protocol === "https:" || (u.protocol === "http:" && isLoopbackHost(u.hostname))) {
+            return { url: value };
         }
+        // A scheme was supplied but it isn't allowed (e.g. http to a public host).
+        return { error: "insecure" };
     }
-    return null;
+
+    // Schemeless: promote to a scheme. Loopback hosts use http for local dev;
+    // everything else uses https.
+    const host = value.split("/")[0].split(":")[0];
+    if (isLoopbackHost(host)) {
+        return { url: "http://" + value };
+    }
+    if (DOMAIN_REGEX.test(value)) {
+        return { url: "https://" + value };
+    }
+    return { error: "invalid" };
 }
 
 // Maps a provider-returned error code to a user-facing message.
@@ -111,6 +127,12 @@ const providerModalClose = document.getElementById("provider-modal-close");
 // opts: { title, message, confirmLabel, confirmClass, detailLabel, detailValue }.
 function askProviderConsent(opts) {
     return new Promise((resolve) => {
+        // The provider flow runs during startup while the preloader is still up
+        // (z-index 2000). Hide it first so this modal (z-index 1500) is actually
+        // visible and clickable, otherwise the consent sits behind the loader.
+        if (typeof hidePreloader === "function") {
+            hidePreloader();
+        }
         providerModalTitle.textContent = opts.title;
         providerModalMessage.textContent = opts.message;
         providerModalConfirm.textContent = opts.confirmLabel || "Continue";
@@ -167,12 +189,18 @@ function clearProviderUrl() {
 // forceEcc is true the request uses the compact X25519 key directly. Returns
 // "redirecting" if it navigates away to the provider, otherwise null.
 async function initiateProviderFlow(rawProviderUrl, forceEcc) {
-    const providerUrl = normalizeProviderUrl(rawProviderUrl);
-    if (!providerUrl) {
-        showToast("That credential provider URL is not valid.", "error");
+    const resolved = normalizeProviderUrl(rawProviderUrl);
+    if (resolved.error) {
+        showToast(
+            resolved.error === "insecure"
+                ? "Credential providers must use https. That provider URL was rejected."
+                : "That credential provider URL is not valid.",
+            "error"
+        );
         clearProviderUrl();
         return null;
     }
+    const providerUrl = resolved.url;
 
     const host = new URL(providerUrl).host;
     const ok = await askProviderConsent({

web/js/service-worker.js

@@ -1,4 +1,7 @@
-const CACHE_NAME = 'xipher-cache-v4';
+// The release workflow rewrites "xipher-cache" to "xipher-v<release-version>"
+// (see .github/workflows/release.yaml), so the cache name tracks the release and
+// busts on every version. Leave this placeholder as-is; do not hand-version it.
+const CACHE_NAME = 'xipher-cache';
 const urlsToCache = [
   '/',
   '/index.html',

web/js/ui.js

@@ -114,23 +114,45 @@ const keySecretInput = document.getElementById("key-secret-input");
 const keySecretReveal = document.getElementById("key-secret-reveal");
 const keySecretGenerate = document.getElementById("key-secret-generate");
 const quantumSafeToggle = document.getElementById("quantum-safe-toggle");
+const profileButton = document.getElementById("settings-button");
 const profileButtonName = document.getElementById("profile-button-name");
+const profileButtonInitials = document.getElementById("profile-button-initials");
 const identityName = document.getElementById("identity-name");
 const identityContact = document.getElementById("identity-contact");
 const identityProvider = document.getElementById("identity-provider");
 const identityNameInput = document.getElementById("identity-name-input");
 const identityNameManaged = document.getElementById("identity-name-managed");
 
-// Reflects the current identity onto the topbar profile button: shows the name
-// next to the icon when one is set, otherwise just the icon.
+// Derives up to two uppercase initials from a display name (e.g. "Alice Example"
+// -> "AE", "shibme" -> "S"). Falls back to "" when there's nothing usable.
+function initialsFromName(name) {
+    const words = (name || "").trim().split(/\s+/).filter(Boolean);
+    if (words.length === 0) {
+        return "";
+    }
+    const first = Array.from(words[0])[0] || "";
+    const last = words.length > 1 ? (Array.from(words[words.length - 1])[0] || "") : "";
+    return (first + last).toUpperCase();
+}
+
+// Reflects the current identity onto the topbar profile button. With a name set,
+// the button shows the name beside the icon on wider screens; on narrow viewports
+// it collapses to a round badge with the initials (see the has-name styles). With
+// no name it stays the plain round icon button.
 function renderProfileButton() {
     const { name } = getIdentity();
     if (name) {
         profileButtonName.textContent = name;
         profileButtonName.hidden = false;
+        profileButtonInitials.textContent = initialsFromName(name);
+        profileButton.classList.add("has-name");
+        profileButton.setAttribute("title", `${name} · open profile`);
     } else {
         profileButtonName.textContent = "";
         profileButtonName.hidden = true;
+        profileButtonInitials.textContent = "";
+        profileButton.classList.remove("has-name");
+        profileButton.setAttribute("title", "Your profile: identity, key, password, and encryption options");
     }
 }