jjkiers/cloudron-box
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Indicate busy state in invitation dialog

Browse Source
This commit is contained in:
Johannes Zellner
2025-06-02 22:20:20 +02:00
parent d366e10cb9
commit 9289d80e32
1 changed files with 23 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
dashboard/src/components/InvitationDialog.vue
View File

@@ -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>