From bd1f3707607c582f86f03537c7156f9a88fd3e0c Mon Sep 17 00:00:00 2001
From: Dorian <dorian@Dorians-MacBook-Air.local>
Date: Tue, 17 Feb 2026 04:08:33 +0000
Subject: [PATCH] feat: enhance Nostr login options in AuthModal

- Added a new login button for Nostr using Primal, providing a default option for users.
- Implemented handling for blocked pop-ups, allowing users to open Primal directly if the login pop-up is blocked.
- Updated the existing Nostr login button to improve layout and spacing.

These changes improve the user experience by offering additional login methods and addressing common issues with pop-up blockers.
---
 src/assets/images/primal-icon.svg  | 24 ++++++++++++++
 src/components/AuthModal.vue       | 53 +++++++++++++++++++++---------
 src/composables/useNostrConnect.ts | 16 ++++++---
 3 files changed, 73 insertions(+), 20 deletions(-)
 create mode 100644 src/assets/images/primal-icon.svg

diff --git a/src/assets/images/primal-icon.svg b/src/assets/images/primal-icon.svg
new file mode 100644
index 0000000..709d25d
--- /dev/null
+++ b/src/assets/images/primal-icon.svg
@@ -0,0 +1,24 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 256 256">
+<g clip-path="url(#clip0_1_943)">
+<path d="M155.506 253.036C146.645 254.976 137.44 255.999 127.997 255.999C102.077 255.999 77.9567 248.295 57.8008 235.051C52.7974 227.894 50.5525 223.955 48.915 221.081C48.1036 219.657 47.4413 218.495 46.6664 217.332C39.0311 205.053 35.0362 189.28 34.1651 170.748C31.4666 113.326 66.3642 76.6573 102.015 70.6387C124.613 66.8235 142.572 70.6872 156.347 78.0534C144.169 74.666 129.652 74.4622 113.102 79.2C72.9831 92.1309 59.6091 131.451 65.3414 174.994C75.3453 229.555 128.842 249.111 155.506 253.036Z" fill="url(#paint0_linear_1_943)"/>
+<path d="M41.2387 222.111C33.7762 208.86 27.0184 189.088 26.1739 171.123C23.3092 110.164 60.5628 69.5235 100.683 62.7503C155.371 53.5175 185.775 85.8934 196.256 109.923C196.695 109.628 196.873 109.043 196.641 108.539C179.408 71.0662 143.765 45.3331 102.592 45.3331C55.8419 45.3331 14.127 78.8691 0 128.71C0.200633 165.642 16.0426 198.871 41.2387 222.111Z" fill="url(#paint1_linear_1_943)"/>
+<path d="M199.997 233.844C190.764 240.137 180.665 245.253 169.916 248.977C164.755 248.078 159.037 246.959 155.011 246.171C153.103 245.797 151.574 245.498 150.666 245.332C126.318 240.885 82.7834 225.195 73.246 173.749C70.5513 153.063 72.4812 134.02 79.3156 118.916C86.0487 104.035 97.6686 92.6275 115.39 86.8682C135.987 81.2567 153.055 84.0378 165.732 90.8469C162.612 90.1887 159.386 89.8437 156.085 89.8437C128.652 89.8437 106.414 113.671 106.414 143.063C106.414 154.799 109.959 165.648 115.966 174.447C115.966 174.447 133.16 206.926 179.966 204.023C221.7 201.434 243.373 163.999 245.956 150.172C247.298 142.986 248 135.575 248 127.999C248 61.7256 194.274 7.99997 128.001 7.99997C77.851 7.99997 34.8866 38.7631 16.9488 82.4478C10.8898 90.3409 5.6727 99.0914 1.46875 108.554C10.8367 47.0899 63.9194 0 128.001 0C198.693 0 256 57.3073 256 127.999C256 171.996 233.803 210.805 199.997 233.844Z" fill="url(#paint2_linear_1_943)"/>
+</g>
+<defs>
+<linearGradient id="paint0_linear_1_943" x1="79.9357" y1="106.044" x2="79.7404" y2="219.805" gradientUnits="userSpaceOnUse">
+<stop offset="0.0297309" stop-color="#FA3C3C"/>
+<stop offset="1" stop-color="#BC1870"/>
+</linearGradient>
+<linearGradient id="paint1_linear_1_943" x1="62.5099" y1="52.0175" x2="56.1717" y2="165.81" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FF9F2F"/>
+<stop offset="1" stop-color="#FA3C3C"/>
+</linearGradient>
+<linearGradient id="paint2_linear_1_943" x1="151.999" y1="253.332" x2="152.351" y2="121.334" gradientUnits="userSpaceOnUse">
+<stop stop-color="#5B09AD"/>
+<stop offset="1" stop-color="#BC1870"/>
+</linearGradient>
+<clipPath id="clip0_1_943">
+<rect width="256" height="256" fill="white"/>
+</clipPath>
+</defs>
+</svg>
\ No newline at end of file
diff --git a/src/components/AuthModal.vue b/src/components/AuthModal.vue
index cedfb82..7840d2d 100644
--- a/src/components/AuthModal.vue
+++ b/src/components/AuthModal.vue
@@ -54,11 +54,46 @@
               </button>
             </form>
 
-            <!-- Nostr Login Button (NIP-07 Browser Extension) -->
+            <!-- Login with Nostr (Primal) — default / first option -->
+            <div class="mt-4 space-y-2">
+              <button
+                v-if="!popupBlockedUri"
+                @click="handleNostrConnectLogin"
+                :disabled="isLoading"
+                class="nostr-login-button w-full flex items-center justify-center gap-2"
+              >
+                <img
+                  src="@/assets/images/primal-icon.svg"
+                  alt="Primal"
+                  class="w-5 h-5 shrink-0"
+                />
+                {{ nostrConnectLoading ? 'Waiting for Primal...' : 'Login with Nostr (Primal)' }}
+              </button>
+              <template v-else>
+                <p class="text-sm text-white/70 text-center">
+                  Tap below to open Primal and sign in:
+                </p>
+                <a
+                  :href="popupBlockedUri"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  class="nostr-login-button w-full flex items-center justify-center gap-2 no-underline"
+                >
+                  <img
+                    src="@/assets/images/primal-icon.svg"
+                    alt="Primal"
+                    class="w-5 h-5 shrink-0"
+                  />
+                  Open Primal
+                </a>
+              </template>
+            </div>
+
+            <!-- Sign in with Nostr Extension (NIP-07) -->
             <button
               @click="handleNostrLogin"
               :disabled="isLoading"
-              class="nostr-login-button w-full flex items-center justify-center gap-2 mt-4"
+              class="nostr-login-button w-full flex items-center justify-center gap-2 mt-3"
             >
               <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z" />
@@ -66,18 +101,6 @@
               Sign in with Nostr Extension
             </button>
 
-            <!-- Login with Nostr (Remote Signer / Primal) -->
-            <button
-              @click="handleNostrConnectLogin"
-              :disabled="isLoading"
-              class="nostr-login-button w-full flex items-center justify-center gap-2 mt-3"
-            >
-              <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 18h.01M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v14a2 2 0 002 2z" />
-              </svg>
-              {{ nostrConnectLoading ? 'Waiting for Primal...' : 'Login with Nostr (Primal)' }}
-            </button>
-
             <!-- nsec login (hidden by default; tap to reveal field) -->
             <template v-if="!showNsecField">
               <button
@@ -326,7 +349,7 @@ const emit = defineEmits<Emits>()
 
 const { loginWithNostr, isLoading: authLoading } = useAuth()
 const { loginWithExtension, loginWithPrivateKey } = useAccounts()
-const { loginWithRemoteSigner, isLoading: nostrConnectLoading, error: nostrConnectError } = useNostrConnect()
+const { loginWithRemoteSigner, isLoading: nostrConnectLoading, error: nostrConnectError, popupBlockedUri } = useNostrConnect()
 
 const mode = ref<'login' | 'register' | 'forgot'>(props.defaultMode)
 const errorMessage = ref<string | null>(null)
diff --git a/src/composables/useNostrConnect.ts b/src/composables/useNostrConnect.ts
index 3289ef6..f46ecec 100644
--- a/src/composables/useNostrConnect.ts
+++ b/src/composables/useNostrConnect.ts
@@ -19,6 +19,8 @@ export function useNostrConnect() {
   const authStore = useAuthStore()
   const isConnecting = ref(false)
   const error = ref<string | null>(null)
+  /** When pop-up is blocked, we show a tappable link — direct user tap often bypasses blockers */
+  const popupBlockedUri = ref<string | null>(null)
 
   const isLoading = computed(() => isConnecting.value)
 
@@ -46,6 +48,7 @@ export function useNostrConnect() {
   async function loginWithRemoteSigner(): Promise<void> {
     isConnecting.value = true
     error.value = null
+    popupBlockedUri.value = null
 
     let signer: NostrConnectSigner | null = null
 
@@ -64,13 +67,14 @@ export function useNostrConnect() {
 
       const uri = appendCallbackToUri(baseUri)
 
-      // Open the signer (Primal, etc.) - use new tab so our page stays and can receive the connection
-      const signerWindow = window.open(uri, '_blank', 'noopener,noreferrer')
+      // On mobile, window.open is almost always blocked. Use the tappable link immediately —
+      // direct user tap on a link bypasses blockers better than programmatic window.open.
+      const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)
+      const signerWindow = isMobile ? null : window.open(uri, '_blank', 'noopener,noreferrer')
 
       if (!signerWindow) {
-        throw new Error(
-          'Pop-up was blocked. Please allow pop-ups for this site and try again, or use another sign-in method.',
-        )
+        // Mobile or pop-up blocked: show tappable link — direct tap often bypasses blockers
+        popupBlockedUri.value = uri
       }
 
       // Wait for remote signer to connect (with timeout)
@@ -105,6 +109,7 @@ export function useNostrConnect() {
       throw err
     } finally {
       isConnecting.value = false
+      popupBlockedUri.value = null
       if (signer && !signer.isConnected) {
         signer.close().catch(() => {})
       }
@@ -115,6 +120,7 @@ export function useNostrConnect() {
     isConnecting,
     isLoading,
     error,
+    popupBlockedUri,
     loginWithRemoteSigner,
     getCallbackUrl,
   }