78 lines
2.2 KiB
Vue
78 lines
2.2 KiB
Vue
<script setup>
|
|
|
|
import { useI18n } from 'vue-i18n';
|
|
const i18n = useI18n();
|
|
const t = i18n.t;
|
|
|
|
import { ref, useTemplateRef } from 'vue';
|
|
import { Dialog, TextInput, EmailInput, FormGroup, Button, InputGroup } from 'pankow';
|
|
import { copyToClipboard } from 'pankow/utils';
|
|
import UsersModel from '../models/UsersModel.js';
|
|
|
|
const usersModel = UsersModel.create();
|
|
|
|
const dialog = useTemplateRef('dialog');
|
|
const user = ref({});
|
|
const formError = ref('');
|
|
const inviteLink = ref('');
|
|
const email = ref('');
|
|
const success = ref(false);
|
|
const busy = ref(false);
|
|
|
|
function onCopyToClipboard() {
|
|
copyToClipboard(inviteLink.value);
|
|
window.pankow.notify({ type: 'success', text: 'Copied to clipboard!' });
|
|
}
|
|
|
|
async function onSendInvite() {
|
|
const [error] = await usersModel.sendInviteEmail(user.value.id, email.value);
|
|
if (error) return console.error(error);
|
|
|
|
window.pankow.notify({ type: 'success', text: t('users.invitationNotification.body', { email: email.value })});
|
|
|
|
dialog.value.close();
|
|
}
|
|
|
|
defineExpose({
|
|
async open(u) {
|
|
user.value = u;
|
|
success.value = false;
|
|
email.value = u.email || '';
|
|
formError.value = '';
|
|
|
|
const [error, result] = await usersModel.inviteLink(u.id);
|
|
if (error) return console.error(error);
|
|
inviteLink.value = result;
|
|
|
|
dialog.value.open();
|
|
}
|
|
});
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<Dialog ref="dialog"
|
|
:title="$t('users.invitationDialog.title', { username: user? (user.username || user.email) : '' })"
|
|
:reject-label="$t('main.dialog.close')"
|
|
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>
|
|
|
|
<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>
|
|
</Dialog>
|
|
</template>
|