Improved UI feedback on registration link creation.

This commit is contained in:
2026-02-05 14:26:11 +00:00
parent 0537b85085
commit 291a665e21
4 changed files with 21 additions and 4 deletions
+1 -1
View File
@@ -196,7 +196,7 @@ defineExpose({ focusFirstElement })
class="btn-primary"
@click="$emit('generateUserRegistrationLink', selectedUser)"
:disabled="loading"
>Registration Link</button>
>{{ userDetail?.credentials?.length ? 'Recovery Link' : 'Registration Link' }}</button>
<button
class="btn-danger"
@click="handleDeleteUser"
@@ -3,14 +3,14 @@
<div class="device-dialog" role="dialog" aria-modal="true" aria-labelledby="regTitle">
<div class="reg-header-row">
<h2 id="regTitle" class="reg-title">
📱 <span v-if="userName">Registration for {{ userName }}</span><span v-else>Add Another Device</span>
📱 <span v-if="userName">{{ tokenType === 'account recovery' ? 'Recovery' : 'Registration' }} for {{ userName }}</span><span v-else>Add Another Device</span>
</h2>
<button class="icon-btn" @click="$emit('close')" aria-label="Close" tabindex="-1"></button>
</div>
<div class="device-link-section">
<p class="reg-help">
Scan this QR code on the new device, or copy the link and open it there.
{{ helpText }}
</p>
<QRCodeDisplay
@@ -33,7 +33,7 @@
</template>
<script setup>
import { ref, onMounted, onUnmounted, nextTick } from 'vue'
import { ref, computed, onMounted, onUnmounted, nextTick } from 'vue'
import QRCodeDisplay from '@/components/QRCodeDisplay.vue'
import { apiJson } from 'paskia'
import { formatDate } from '@/utils/helpers'
@@ -51,16 +51,31 @@ const authStore = useAuthStore()
const dialog = ref(null)
const linkUrl = ref(null)
const expiresAt = ref(null)
const tokenType = ref(null)
const actionsRow = ref(null)
// Store the element that had focus before modal opened
const previouslyFocusedElement = ref(null)
// Determine if this is an admin action for another user
const isAdminAction = computed(() => !!props.userName)
// Compute the help text based on token type and context
const helpText = computed(() => {
if (!isAdminAction.value) {
// User adding their own device
return 'Scan this QR code on the new device, or copy the link and open it there.'
}
// Admin action for another user
return `Send this link to ${props.userName}, or have them scan the QR code.`
})
async function generateLink() {
try {
const data = await apiJson(props.endpoint, { method: 'POST' })
if (data.url) {
linkUrl.value = data.url
expiresAt.value = data.expires ? new Date(data.expires) : null
tokenType.value = data.token_type || null
// Show the dialog as modal
await nextTick()