Add user InvitationDialog

dashboard/src/components/InvitationDialog.vue

@@ -0,0 +1,77 @@
+<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>