feat: complete onboarding flow

app/pages/settings/instance/users.vue

@@ -187,38 +187,12 @@ const { data: instance } = await useFetch<{ registration: string }>('/api/admin/
     key: 'admin_instance',
 });
 
-const inviteBusy = ref(false);
-const inviteLink = ref('');
-const inviteCopied = ref(false);
-
-const createInvite = async () => {
-    if (inviteBusy.value) return;
-
-    inviteBusy.value = true;
-    actionError.value = '';
-    inviteCopied.value = false;
-
-    try {
-        const invite = await $fetch<{ token: string }>('/api/admin/invites', { method: 'POST' });
-        inviteLink.value = `${window.location.origin}/auth/register?invite=${invite.token}`;
+// the dialog asks for the details and shows the link to copy
+const createInvite = () => {
+    openDialog(DialogType.CreateInvite, () => {
         // the Instance page lists the links, so it has to load the new one
         clearNuxtData('admin_invites');
-    } catch (error) {
-        console.error('Failed to create invite:', error);
-        actionError.value = 'The invite link could not be created. Try again.';
-        inviteBusy.value = false;
-        return;
-    }
-
-    // copying can be refused by the browser, the link is shown either way
-    try {
-        await navigator.clipboard.writeText(inviteLink.value);
-        inviteCopied.value = true;
-    } catch (error) {
-        console.error('Failed to copy invite link:', error);
-    }
-
-    inviteBusy.value = false;
+    });
 };
 
 const openCreateUser = () => {
@@ -256,8 +230,7 @@ const openCreateUser = () => {
                     class="flex items-center h-8 px-3 text-[13px] rounded-md border border-[var(--color-border)] @hover:bg-[var(--color-hover)] transition-colors duration-200">
                     Create user
                 </button>
-                <button v-if="instance?.registration === 'invite'" type="button" :disabled="inviteBusy"
-                    @click="createInvite"
+                <button v-if="instance?.registration === 'invite'" type="button" @click="createInvite"
                     class="flex items-center gap-1.5 h-8 px-3 text-[13px] font-semibold rounded-md bg-[var(--color-accent)] text-[var(--color-accent-text)] disabled:opacity-50 disabled:cursor-not-allowed">
                     <span class="i-mynaui-link text-4" aria-hidden="true"></span>
                     Invite link
@@ -265,17 +238,6 @@ const openCreateUser = () => {
             </div>
         </div>
 
-        <div v-if="inviteLink" role="status"
-            class="flex flex-wrap items-center gap-x-3 gap-y-1 mb-3 px-3 py-2 rounded-lg bg-[var(--bg-container)] text-sm">
-            <span class="text-[var(--text-secondary)]">
-                {{ inviteCopied ? 'Invite link copied:' : 'New invite link:' }}
-            </span>
-            <span class="flex-1 min-w-55 font-mono text-[13px] overflow-hidden text-ellipsis whitespace-nowrap select-all">
-                {{ inviteLink }}
-            </span>
-            <span class="text-xs text-[var(--text-secondary)]">one use · expires in 7 days</span>
-        </div>
-
         <p v-if="loadError" role="alert" class="pb-3 text-sm text-red-400">The users could not be loaded.</p>
         <p v-if="actionError" role="alert" class="pb-3 text-sm text-red-400">{{ actionError }}</p>