Add user InvitationDialog

2025-03-28 20:39:54 +01:00
parent b89f55f9b9
commit d68db98d62
5 changed files with 100 additions and 9 deletions
@@ -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>
@@ -157,6 +157,17 @@ function create() {
      if (result.status !== 202) return [result];
      return [null];
    },
+    async inviteLink(id) {
+      let result;
+      try {
+        result = await fetcher.get(`${API_ORIGIN}/api/v1/users/${id}/invite_link`, { access_token: accessToken });
+      } catch (e) {
+        return [e];
+      }
+
+      if (result.status !== 200) return [result];
+      return [null, result.body.inviteLink];
+    },
  };
 }

@@ -11,6 +11,7 @@ import Section from '../components/Section.vue';
 import UserDialog from '../components/UserDialog.vue';
 import GroupDialog from '../components/GroupDialog.vue';
 import ImpersonateDialog from '../components/ImpersonateDialog.vue';
+import InvitationDialog from '../components/InvitationDialog.vue';
 import PasswordResetDialog from '../components/PasswordResetDialog.vue';
 import UsersModel from '../models/UsersModel.js';
 import GroupsModel from '../models/GroupsModel.js';
@@ -146,8 +147,9 @@ function onEditOrAddUser(user = null) {
  userDialog.value.open(user);
 }

+const invitationDialog = useTemplateRef('invitationDialog');
 function onInvitation(user) {
-  // TODO
+  invitationDialog.value.open(user);
 }

 function onEditOrAddGroup(group = null) {
@@ -218,6 +220,7 @@ onMounted(async () => {
    <GroupDialog ref="groupDialog" @success="refreshGroups()"/>
    <ImpersonateDialog ref="impersonateDialog" />
    <PasswordResetDialog ref="passwordResetDialog" />
+    <InvitationDialog ref="invitationDialog" />

    <Section :title="$t('main.navbar.users')">
      <template #header-buttons>