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:
@@ -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()
|
||||
|
||||
@@ -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,
|
||||
|
||||
Reference in New Issue
Block a user