feat: improve AuthModal user feedback during login process

- Added a loading state for the signing process, displaying a spinner and disabling the button while completing login.
- Introduced a reactive variable to manage the completion state of the login process, enhancing user experience with clear visual indicators.
- Updated the UI to conditionally render messages and buttons based on the login state, improving clarity and responsiveness.

These changes enhance the user experience by providing immediate feedback during the authentication process, ensuring users are informed of their login status.
This commit is contained in:
Dorian
2026-02-17 04:29:04 +00:00
parent ffad3eb6e8
commit a88022f81d
2 changed files with 20 additions and 1 deletions

View File

@@ -136,10 +136,11 @@
{{ nostrConnectLoading ? 'Waiting...' : 'Remote Signer' }}
</button>
<template v-else>
<p class="text-sm text-white/70 text-center">
<p v-if="!nostrCompletingLogin" class="text-sm text-white/70 text-center">
Tap below to open your signer app:
</p>
<a
v-if="!nostrCompletingLogin"
:href="popupBlockedUri"
target="_blank"
rel="noopener noreferrer"
@@ -152,6 +153,17 @@
/>
Open Signer App
</a>
<button
v-else
disabled
class="nostr-login-button w-full flex items-center justify-center gap-2"
>
<svg class="w-5 h-5 shrink-0 animate-spin" fill="none" viewBox="0 0 24 24">
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" />
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
</svg>
Signing in...
</button>
</template>
</template>
</div>
@@ -434,6 +446,7 @@ const {
loginWithRemoteSigner,
startRemoteSignerQrFlow,
isLoading: nostrConnectLoading,
isCompletingLogin: nostrCompletingLogin,
error: nostrConnectError,
popupBlockedUri,
} = useNostrConnect()

View File

@@ -18,6 +18,8 @@ const WAIT_FOR_SIGNER_TIMEOUT_MS = 120_000
export function useNostrConnect() {
const authStore = useAuthStore()
const isConnecting = ref(false)
/** True when signer has connected and we're completing login (getPubkey, create account, backend auth) */
const isCompletingLogin = 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)
@@ -88,6 +90,8 @@ export function useNostrConnect() {
throw new Error('Connection was closed before the signer responded.')
}
isCompletingLogin.value = true
const pubkey = await signer.getPublicKey()
if (!pubkey) {
throw new Error('Could not get public key from signer.')
@@ -109,6 +113,7 @@ export function useNostrConnect() {
throw err
} finally {
isConnecting.value = false
isCompletingLogin.value = false
popupBlockedUri.value = null
if (signer && !signer.isConnected) {
signer.close().catch(() => {})
@@ -197,6 +202,7 @@ export function useNostrConnect() {
return {
isConnecting,
isCompletingLogin,
isLoading,
error,
popupBlockedUri,