From 9289d80e32a94233ac628e6c7bb2e51a8dfe4c4c Mon Sep 17 00:00:00 2001
From: Johannes Zellner <johannes@cloudron.io>
Date: Mon, 2 Jun 2025 22:20:20 +0200
Subject: [PATCH] Indicate busy state in invitation dialog

---
 dashboard/src/components/InvitationDialog.vue | 40 +++++++++++--------
 1 file changed, 23 insertions(+), 17 deletions(-)

diff --git a/dashboard/src/components/InvitationDialog.vue b/dashboard/src/components/InvitationDialog.vue
index a2d3d5298..cc00ff5bb 100644
--- a/dashboard/src/components/InvitationDialog.vue
+++ b/dashboard/src/components/InvitationDialog.vue
@@ -5,7 +5,7 @@ const i18n = useI18n();
 const t = i18n.t;
 
 import { ref, useTemplateRef } from 'vue';
-import { Dialog, TextInput, EmailInput, FormGroup, Button, InputGroup } from 'pankow';
+import { Dialog, TextInput, EmailInput, FormGroup, Button, InputGroup, Spinner } from 'pankow';
 import { copyToClipboard } from 'pankow/utils';
 import UsersModel from '../models/UsersModel.js';
 
@@ -39,12 +39,13 @@ defineExpose({
     success.value = false;
     email.value = u.email || '';
     formError.value = '';
+    inviteLink.value = '';
+
+    dialog.value.open();
 
     const [error, result] = await usersModel.inviteLink(u.id);
     if (error) return console.error(error);
     inviteLink.value = result;
-
-    dialog.value.open();
   }
 });
 
@@ -57,21 +58,26 @@ defineExpose({
      reject-style="secondary"
   >
     <div>
-      <FormGroup>
-        <label>{{ $t('users.invitationDialog.descriptionLink') }}</label>
-        <InputGroup>
-          <TextInput style="flex-grow: 1;" v-model="inviteLink" readonly/>
-          <Button @click="onCopyToClipboard()" icon="fa fa-clipboard"/>
-        </InputGroup>
-      </FormGroup>
+      <div v-if="!inviteLink" style="text-align: center;">
+        <Spinner class="pankow-spinner-large"/>
+      </div>
+      <div v-else>
+        <FormGroup>
+          <label>{{ $t('users.invitationDialog.descriptionLink') }}</label>
+          <InputGroup>
+            <TextInput style="flex-grow: 1;" v-model="inviteLink" readonly/>
+            <Button @click="onCopyToClipboard()" icon="fa fa-clipboard"/>
+          </InputGroup>
+        </FormGroup>
 
-      <FormGroup>
-        <label>{{ $t('users.invitationDialog.descriptionEmail') }}</label>
-        <InputGroup>
-          <EmailInput style="flex-grow: 1;" v-model="email"/>
-          <Button @click="onSendInvite()" ng-disabled="invitation.busy" :loading="busy">{{ $t('users.invitationDialog.sendAction') }}</Button>
-        </InputGroup>
-      </FormGroup>
+        <FormGroup>
+          <label>{{ $t('users.invitationDialog.descriptionEmail') }}</label>
+          <InputGroup>
+            <EmailInput style="flex-grow: 1;" v-model="email"/>
+            <Button @click="onSendInvite()" ng-disabled="invitation.busy" :loading="busy">{{ $t('users.invitationDialog.sendAction') }}</Button>
+          </InputGroup>
+        </FormGroup>
+      </div>
     </div>
   </Dialog>
 </template>