feat: Groups/households custom invitations (#4252)

Co-authored-by: Michael Genson <71845777+michael-genson@users.noreply.github.com>

frontend/pages/admin/manage/users/index.vue

@@ -1,5 +1,6 @@
 <template>
   <v-container fluid>
+    <UserInviteDialog v-model="inviteDialog" />
     <BaseDialog
       v-model="deleteDialog"
       :title="$tc('general.confirm')"
@@ -22,6 +23,9 @@
         <BaseButton to="/admin/manage/users/create" class="mr-2">
           {{ $t("general.create") }}
         </BaseButton>
+        <BaseButton class="mr-2" color="info" :icon="$globals.icons.link" @click="inviteDialog = true">
+          {{ $t("group.invite") }}
+        </BaseButton>
 
         <BaseOverflowButton mode="event" :items="ACTIONS_OPTIONS" @unlock-all-users="unlockAllUsers">
         </BaseOverflowButton>
@@ -69,12 +73,17 @@ import { useAdminApi } from "~/composables/api";
 import { alert } from "~/composables/use-toast";
 import { useUser, useAllUsers } from "~/composables/use-user";
 import { UserOut } from "~/lib/api/types/user";
+import UserInviteDialog from "~/components/Domain/User/UserInviteDialog.vue";
 
 export default defineComponent({
+  components: {
+    UserInviteDialog,
+  },
   layout: "admin",
   setup() {
     const api = useAdminApi();
     const refUserDialog = ref();
+    const inviteDialog = ref();
     const { $auth } = useContext();
 
     const user = computed(() => $auth.user);
@@ -99,6 +108,9 @@ export default defineComponent({
       deleteDialog: false,
       deleteTargetId: "",
       search: "",
+      groups: [],
+      households: [],
+      sendTo: "",
     });
 
     const { users, refreshAllUsers } = useAllUsers();
@@ -154,6 +166,7 @@ export default defineComponent({
       deleteUser,
       loading,
       refUserDialog,
+      inviteDialog,
       users,
       user,
       handleRowClick,

frontend/pages/user/profile/index.vue

@@ -9,44 +9,14 @@
       </p>
       <v-card flat color="transparent" width="100%" max-width="600px">
         <v-card-actions class="d-flex justify-center my-4">
-          <v-btn v-if="user.canInvite"  outlined rounded @click="getSignupLink()">
+          <v-btn v-if="user.canInvite" outlined rounded @click="inviteDialog = true">
             <v-icon left>
               {{ $globals.icons.createAlt }}
             </v-icon>
             {{ $t('profile.get-invite-link') }}
           </v-btn>
         </v-card-actions>
-        <div v-show="generatedSignupLink !== ''">
-          <v-card-text>
-            <p class="text-center pb-0">
-              {{ generatedSignupLink }}
-            </p>
-            <v-text-field v-model="sendTo" :label="$t('user.email')" :rules="[validators.email]"> </v-text-field>
-          </v-card-text>
-          <v-card-actions class="py-0 align-center" style="gap: 4px">
-            <BaseButton cancel @click="generatedSignupLink = ''"> {{ $t("general.close") }} </BaseButton>
-            <v-spacer></v-spacer>
-            <AppButtonCopy :icon="false" color="info" :copy-text="generatedSignupLink" />
-            <BaseButton color="info" :disabled="!validEmail" :loading="loading" @click="sendInvite">
-              <template #icon>
-                {{ $globals.icons.email }}
-              </template>
-              {{ $t("user.email") }}
-            </BaseButton>
-          </v-card-actions>
-        </div>
-        <div v-show="showPublicLink">
-          <v-card-text>
-            <p class="text-center pb-0">
-              {{ publicLink }}
-            </p>
-          </v-card-text>
-          <v-card-actions class="py-0 align-center" style="gap: 4px">
-            <BaseButton cancel @click="showPublicLink = false"> {{ $t("general.close") }} </BaseButton>
-            <v-spacer></v-spacer>
-            <AppButtonCopy :icon="false" color="info" :copy-text="publicLink" />
-          </v-card-actions>
-        </div>
+        <UserInviteDialog v-model="inviteDialog" />
       </v-card>
     </section>
     <section class="my-3">
@@ -206,19 +176,19 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, useContext, ref, toRefs, reactive, useAsync, useRoute } from "@nuxtjs/composition-api";
+import { computed, defineComponent, useContext, ref, useAsync, useRoute } from "@nuxtjs/composition-api";
 import UserProfileLinkCard from "@/components/Domain/User/UserProfileLinkCard.vue";
 import { useUserApi } from "~/composables/api";
-import { validators } from "~/composables/use-validators";
-import { alert } from "~/composables/use-toast";
 import UserAvatar from "@/components/Domain/User/UserAvatar.vue";
 import { useAsyncKey } from "~/composables/use-utils";
 import StatsCards from "~/components/global/StatsCards.vue";
 import { UserOut } from "~/lib/api/types/user";
+import UserInviteDialog from "~/components/Domain/User/UserInviteDialog.vue";
 
 export default defineComponent({
   name: "UserProfile",
   components: {
+    UserInviteDialog,
     UserProfileLinkCard,
     UserAvatar,
     StatsCards,
@@ -233,61 +203,9 @@ export default defineComponent({
     // @ts-ignore $auth.user is typed as unknown, but it's a user
     const user = computed<UserOut | null>(() => $auth.user);
 
-    const showPublicLink = ref(false);
-    const publicLink = ref("");
-
-    const generatedSignupLink = ref("");
-    const token = ref("");
+    const inviteDialog = ref(false);
     const api = useUserApi();
 
-    async function getSignupLink() {
-      const { data } = await api.households.createInvitation({ uses: 1 });
-      if (data) {
-        token.value = data.token;
-        generatedSignupLink.value = constructLink(data.token);
-        showPublicLink.value = false;
-      }
-    }
-
-    function constructLink(token: string) {
-      return `${window.location.origin}/register?token=${token}`;
-    }
-
-    // =================================================
-    // Email Invitation
-    const state = reactive({
-      loading: false,
-      sendTo: "",
-    });
-
-    async function sendInvite() {
-      state.loading = true;
-      const { data } = await api.email.sendInvitation({
-        email: state.sendTo,
-        token: token.value,
-      });
-
-      if (data && data.success) {
-        alert.success(i18n.tc("profile.email-sent"));
-      } else {
-        alert.error(i18n.tc("profile.error-sending-email"));
-      }
-      state.loading = false;
-    }
-
-    const validEmail = computed(() => {
-      if (state.sendTo === "") {
-        return false;
-      }
-      const valid = validators.email(state.sendTo);
-
-      // Explicit bool check because validators.email sometimes returns a string
-      if (valid === true) {
-        return true;
-      }
-      return false;
-    });
-
     const stats = useAsync(async () => {
       const { data } = await api.households.statistics();
 
@@ -321,13 +239,15 @@ export default defineComponent({
       return iconText[key] ?? $globals.icons.primary;
     }
 
-    const statsTo = computed<{ [key: string]: string }>(() => { return {
-      totalRecipes: `/g/${groupSlug.value}/`,
-      totalUsers: "/household/members",
-      totalCategories: `/g/${groupSlug.value}/recipes/categories`,
-      totalTags: `/g/${groupSlug.value}/recipes/tags`,
-      totalTools: `/g/${groupSlug.value}/recipes/tools`,
-    }});
+    const statsTo = computed<{ [key: string]: string }>(() => {
+      return {
+        totalRecipes: `/g/${groupSlug.value}/`,
+        totalUsers: "/household/members",
+        totalCategories: `/g/${groupSlug.value}/recipes/categories`,
+        totalTags: `/g/${groupSlug.value}/recipes/tags`,
+        totalTools: `/g/${groupSlug.value}/recipes/tools`,
+      }
+    });
 
     function getStatsTo(key: string) {
       return statsTo.value[key] ?? "unknown";
@@ -338,17 +258,9 @@ export default defineComponent({
       getStatsTitle,
       getStatsIcon,
       getStatsTo,
+      inviteDialog,
       stats,
       user,
-      constructLink,
-      generatedSignupLink,
-      showPublicLink,
-      publicLink,
-      getSignupLink,
-      sendInvite,
-      validators,
-      validEmail,
-      ...toRefs(state),
     };
   },
   head() {