lfg2025/indee-demo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: enhance Nostr login options in AuthModal

Browse Source 
- 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.
This commit is contained in:
Dorian
2026-02-17 04:08:33 +00:00
parent cef73f9694
commit bd1f370760
3 changed files with 73 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
src/components/AuthModal.vue
View File

@@ -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)