Revamp login modal auth provider cards

js/services/authProviders/index.js

@@ -59,8 +59,8 @@ if (!Object.prototype.hasOwnProperty.call(providerMap, "nip07")) {
 const builtInMetadata = [
   {
     id: "nsec",
-    label: "Direct key",
-    description: "Use a saved nsec key stored locally.",
+    label: "nsec or seed (direct private key)",
+    description: "Use a saved private key stored locally.",
     badgeVariant: "warning",
   },
 ];

js/services/authProviders/nip07.js

@@ -1,7 +1,7 @@
 const PROVIDER_ID = "nip07";
-const PROVIDER_LABEL = "Login with Extension";
+const PROVIDER_LABEL = "extension (nip-07)";
 const PROVIDER_DESCRIPTION =
-  "Use a NIP-07 compatible browser extension to authenticate.";
+  "Authorize with a NIP-07 browser extension like Alby or nos2x.";
 const PROVIDER_CAPABILITIES = Object.freeze([
   Object.freeze({
     id: "signing",
@@ -47,6 +47,8 @@ export default {
   id: PROVIDER_ID,
   label: PROVIDER_LABEL,
   description: PROVIDER_DESCRIPTION,
+  eyebrow: "Recommended",
+  tone: "accent",
   badgeVariant: "info",
   capabilities: PROVIDER_CAPABILITIES,
   button: PROVIDER_BUTTON,

js/services/authProviders/nip46.js

@@ -1,6 +1,7 @@
 const PROVIDER_ID = "nip46";
-const PROVIDER_LABEL = "Remote signer";
-const PROVIDER_DESCRIPTION = "Connect to a NIP-46 compatible signer via Nostr Connect.";
+const PROVIDER_LABEL = "remote signer (nip-46)";
+const PROVIDER_DESCRIPTION =
+  "Connect to a remote signer via Nostr Connect for hardware or mobile approvals.";
 const PROVIDER_CAPABILITIES = Object.freeze([
   Object.freeze({
     id: "signing",
@@ -63,6 +64,8 @@ export default {
   id: PROVIDER_ID,
   label: PROVIDER_LABEL,
   description: PROVIDER_DESCRIPTION,
+  eyebrow: "Nostr Connect",
+  tone: "accent",
   badgeVariant: "info",
   capabilities: PROVIDER_CAPABILITIES,
   button: PROVIDER_BUTTON,

js/services/authProviders/nsec.js

@@ -1,6 +1,7 @@
 const PROVIDER_ID = "nsec";
-const PROVIDER_LABEL = "Direct key";
-const PROVIDER_DESCRIPTION = "Import an nsec or mnemonic seed.";
+const PROVIDER_LABEL = "nsec or seed (direct private key)";
+const PROVIDER_DESCRIPTION =
+  "Paste an nsec, hex key, or BIP-39 seed. Keep it encrypted on this device if you choose.";
 const PROVIDER_CAPABILITIES = Object.freeze([
   Object.freeze({
     id: "signing",
@@ -64,6 +65,8 @@ export default {
   id: PROVIDER_ID,
   label: PROVIDER_LABEL,
   description: PROVIDER_DESCRIPTION,
+  eyebrow: "Advanced",
+  tone: "warning",
   badgeVariant: "warning",
   capabilities: PROVIDER_CAPABILITIES,
   button: PROVIDER_BUTTON,

js/ui/loginModalController.js

@@ -40,11 +40,23 @@ function normalizeProvider(provider, fallbackId, index) {
       ? provider.label.trim()
       : rawId;
 
+  const eyebrow =
+    typeof provider.eyebrow === "string" && provider.eyebrow.trim()
+      ? provider.eyebrow.trim()
+      : "";
+
   const description =
     typeof provider.description === "string" && provider.description.trim()
       ? provider.description.trim()
       : "";
 
+  const rawTone =
+    typeof provider.tone === "string" && provider.tone.trim()
+      ? provider.tone.trim().toLowerCase()
+      : "";
+
+  const tone = rawTone ? rawTone : "";
+
   const button = provider.button && typeof provider.button === "object"
     ? provider.button
     : {};
@@ -66,11 +78,13 @@ function normalizeProvider(provider, fallbackId, index) {
     id: rawId,
     source: provider,
     label,
+    eyebrow,
     description,
     button,
     messages,
     capabilities,
     order,
+    tone,
     disabled: provider.disabled === true || provider.available === false,
     errorMessage:
       typeof provider.errorMessage === "string" && provider.errorMessage.trim()
@@ -949,6 +963,12 @@ export default class LoginModalController {
       provider.button?.variant,
       provider.button?.className,
     );
+    if (provider.tone) {
+      button.dataset.tone = provider.tone;
+    } else {
+      delete button.dataset.tone;
+      button.removeAttribute("data-tone");
+    }
     button.disabled = provider.disabled;
     if (provider.disabled) {
       button.setAttribute("aria-disabled", "true");
@@ -956,6 +976,12 @@ export default class LoginModalController {
       button.removeAttribute("aria-disabled");
     }
 
+    const eyebrowNode = button.querySelector("[data-provider-eyebrow]");
+    if (eyebrowNode instanceof HTMLElement) {
+      eyebrowNode.textContent = provider.eyebrow || "";
+      eyebrowNode.classList.toggle("hidden", !provider.eyebrow);
+    }
+
     const labelNode = button.querySelector("[data-provider-label]");
     if (labelNode instanceof HTMLElement) {
       labelNode.textContent = provider.label;