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

feat: enhance AuthModal loading indicators and button labels

Browse Source 
- Replaced static icons with animated SVG loaders for various authentication actions, improving user feedback during loading states.
- Updated button labels to reflect current actions, such as 'Signing in...' and 'Waiting...', enhancing clarity for users.
- Adjusted layout spacing for buttons to ensure consistent visual presentation.

These changes improve the user experience by providing clear visual cues during authentication processes.
This commit is contained in:
Dorian
2026-02-17 04:25:23 +00:00
parent d8f54a5032
commit ffad3eb6e8
1 changed files with 25 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
src/components/AuthModal.vue
View File

@@ -128,11 +128,11 @@
: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"
/>
<svg v-if="nostrConnectLoading" 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>
<img v-else src="@/assets/images/primal-icon.svg" alt="Primal" class="w-5 h-5 shrink-0" />
{{ nostrConnectLoading ? 'Waiting...' : 'Remote Signer' }}
</button>
<template v-else>
@@ -162,10 +162,14 @@
: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">
<svg v-if="authLoading" 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>
<svg v-else class="w-5 h-5 shrink-0" 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" />
</svg>
Sign in with Nostr Extension
{{ authLoading ? 'Signing in...' : 'Extension' }}
</button>
<!-- nsec login (hidden by default; tap to reveal field) -->
@@ -174,15 +178,15 @@
type="button"
@click="showNsecField = true"
:disabled="isLoading"
class="nostr-login-button w-full flex items-center justify-center gap-2 mt-6"
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 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
</svg>
Sign in with nsec (private key)
Private Key
</button>
</template>
<div v-else class="nsec-field-block mt-6">
<div v-else class="nsec-field-block mt-3">
<input
v-model="nsecInput"
type="password"
@@ -198,7 +202,11 @@
class="nostr-login-button flex-1 flex items-center justify-center gap-2"
:class="{ 'opacity-40 cursor-not-allowed': !nsecInput.trim() || isLoading }"
>
Sign in
<svg v-if="authLoading" 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>
{{ authLoading ? 'Signing in...' : 'Sign in' }}
</button>
<button
type="button"
@@ -342,10 +350,14 @@
:disabled="isLoading"
class="nostr-login-button sovereign-generate-btn w-full flex items-center justify-center gap-3"
>
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<svg v-if="sovereignGenerating" 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>
<svg v-else class="w-5 h-5 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
</svg>
{{ isLoading ? 'Generating...' : 'Generate Sovereign Identity' }}
{{ sovereignGenerating ? 'Generating...' : 'Generate Sovereign Identity' }}
</button>
<button
@click="sovereignDismissed = true; sovereignPhase = 'normal'"