Fix link copy toast messages, remove custom toast in favor of authStore, remove a component that was no longer used.

This commit is contained in:
2025-12-10 17:18:48 +00:00
parent 460094e4dd
commit 3f0de04a49
5 changed files with 6 additions and 108 deletions
-14
View File
@@ -372,20 +372,6 @@ function generateUserRegistrationLink(u) {
showRegModal.value = true
}
function onLinkCopied() {
authStore.showMessage('Link copied to clipboard!')
}
function copy(text) {
if (!text) return
navigator.clipboard.writeText(text)
.catch(()=>{})
}
function permissionDisplayName(id) {
return permissions.value.find(p => p.id === id)?.display_name || id
}
async function toggleOrgPermission(org, permId, checked) {
// Build next permission list
const has = org.permissions.includes(permId)
+1 -1
View File
@@ -35,7 +35,7 @@ const backButtonRef = ref(null)
const hasActiveModal = computed(() => props.showRegModal)
function onLinkCopied() {
authStore.showMessage('Link copied to clipboard!')
authStore.showMessage(`📋 Link copied! Send it to ${props.selectedUser.display_name}.`)
}
function handleEditName() {
@@ -1,62 +0,0 @@
<template>
<section class="view-root view-root--narrow view-device-link">
<header class="view-header">
<h1>📱 Add Another Device</h1>
<p class="view-lede">Generate a one-time link to set up passkeys on a new device.</p>
</header>
<div class="button-row" style="margin-top:1rem;">
<button @click="showModal = true" class="btn-primary">Generate Registration Link</button>
<button @click="authStore.currentView = 'profile'" class="btn-secondary">Back to Profile</button>
</div>
<RegistrationLinkModal
v-if="showModal"
endpoint="/auth/api/user/create-link"
:user-name="userName"
@close="showModal = false"
@copied="onCopied"
/>
</section>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import { useAuthStore } from '@/stores/auth'
import RegistrationLinkModal from '@/components/RegistrationLinkModal.vue'
const authStore = useAuthStore()
const userName = ref(null)
const showModal = ref(false)
const onCopied = () => {
authStore.showMessage('Link copied to clipboard!', 'success', 2500)
}
onMounted(async () => {
// Extract optional admin-provided query parameters (?user=Name&emoji=😀)
const params = new URLSearchParams(location.search)
const qUser = params.get('user')
if (qUser) userName.value = qUser.trim()
})
</script>
<style scoped>
.view-lede {
margin: 0;
color: var(--color-text-muted);
}
.qr-link {
text-decoration: none;
color: var(--color-text);
}
.button-row {
justify-content: flex-start;
}
.button-row button {
flex: 1;
min-width: 0;
}
</style>
+5
View File
@@ -108,6 +108,7 @@
v-if="showRegLink"
endpoint="/auth/api/user/create-link"
@close="showRegLink = false"
@copied="onLinkCopied"
/>
</section>
</template>
@@ -184,6 +185,10 @@ const handlePairingError = (message) => {
}
}
const onLinkCopied = () => {
authStore.showMessage('📋 Link copied! Send it to your other device.')
}
// Helper to focus preferred button in a row (primary first, or first button)
const focusPreferredButton = (container) => {
focusPreferred(container, { primarySelector: '.btn-primary', itemSelector: 'button' })
-31
View File
@@ -7,9 +7,6 @@
</a>
</div>
<div v-if="showCopyToast" class="copy-toast">
Link copied to clipboard
</div>
</div>
</template>
@@ -25,9 +22,6 @@ const props = defineProps({
const emit = defineEmits(['copied'])
const qrCanvas = ref(null)
const showCopyToast = ref(false)
let copyToastTimer = null
const displayUrl = computed(() => {
if (!props.url) return ''
@@ -65,13 +59,7 @@ async function copyLink() {
if (!props.url) return
try {
await navigator.clipboard.writeText(props.url)
showCopyToast.value = true
emit('copied')
if (copyToastTimer) clearTimeout(copyToastTimer)
copyToastTimer = setTimeout(() => {
showCopyToast.value = false
}, 2000)
} catch (err) {
console.error('Failed to copy link:', err)
}
@@ -139,23 +127,4 @@ watch(qrCanvas, () => {
.qr-link:hover .link-text {
color: var(--color-text);
}
.copy-toast {
position: absolute;
top: -2rem;
left: 50%;
transform: translateX(-50%);
background: var(--color-success);
color: white;
padding: 0.5rem 1rem;
border-radius: var(--radius-sm);
font-size: 0.875rem;
z-index: 10;
animation: fadeInOut 2s ease-in-out;
}
@keyframes fadeInOut {
0%, 100% { opacity: 0; }
10%, 90% { opacity: 1; }
}
</style>