feat(frontend): ✨ add group permissions (#721)

* style(frontend): 💄 add darktheme custom

* add dummy users in dev mode

* feat(frontend): ✨ add group permissions editor UI

* feat(backend): ✨ add group permissions setters

* test(backend): ✅ tests for basic permission get/set (WIP)

Needs more testing

* remove old test

* chore(backend): copy template.env on setup

* feat(frontend): ✨ enable send invitation via email

* feat(backend): ✨ enable send invitation via email

* feat: ✨ add app config checker for site-settings

* refactor(frontend): ♻️ consolidate bool checks

Co-authored-by: Hayden <hay-kot@pm.me>

frontend/pages/user/profile/index.vue

@@ -9,7 +9,7 @@
         Manage your profile, recipes, and group settings.
         <a href="https://hay-kot.github.io/mealie/" target="_blank"> Learn More </a>
       </p>
-      <v-card flat width="100%" max-width="600px">
+      <v-card v-if="$auth.user.canInvite" flat color="background" width="100%" max-width="600px">
         <v-card-actions class="d-flex justify-center">
           <v-btn outlined rounded @click="getSignupLink()">
             <v-icon left>
@@ -18,13 +18,25 @@
             Get Invite Link
           </v-btn>
         </v-card-actions>
-        <v-card-text v-if="generatedLink !== ''" class="d-flex">
-          <v-text-field v-model="generatedLink" solo  readonly>
-            <template #append>
-              <AppButtonCopy :copy-text="generatedLink" />
-            </template>
-          </v-text-field>
-        </v-card-text>
+        <div v-show="generatedLink !== ''">
+          <v-card-text>
+            <p class="text-center pb-0">
+              {{ generatedLink }}
+            </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="generatedLink = ''"> {{ $t("general.close") }} </BaseButton>
+            <v-spacer></v-spacer>
+            <AppButtonCopy :icon="false" color="info" :copy-text="generatedLink" />
+            <BaseButton color="info" :disabled="!validEmail" :loading="loading" @click="sendInvite">
+              <template #icon>
+                {{ $globals.icons.email }}
+              </template>
+              {{ $t("user.email") }}
+            </BaseButton>
+          </v-card-actions>
+        </div>
       </v-card>
     </section>
     <section>
@@ -89,31 +101,44 @@
             Setup webhooks that trigger on days that you have have mealplan scheduled.
           </UserProfileLinkCard>
         </v-col>
+        <v-col cols="12" sm="12" md="6">
+          <UserProfileLinkCard
+            v-if="user.canManage"
+            :link="{ text: 'Manage Members', to: '/user/group/members' }"
+            :image="require('~/static/svgs/manage-members.svg')"
+          >
+            <template #title> Members </template>
+            See who's in your group and manage their permissions.
+          </UserProfileLinkCard>
+        </v-col>
       </v-row>
     </section>
   </v-container>
 </template>
     
 <script lang="ts">
-import { computed, defineComponent, useContext, ref } from "@nuxtjs/composition-api";
+import { computed, defineComponent, useContext, ref, toRefs, reactive } from "@nuxtjs/composition-api";
 import UserProfileLinkCard from "@/components/Domain/User/UserProfileLinkCard.vue";
 import { useApiSingleton } from "~/composables/use-api";
+import { validators } from "~/composables/use-validators";
+import { alert } from "~/composables/use-toast";
 
 export default defineComponent({
   components: {
     UserProfileLinkCard,
   },
   setup() {
-    const user = computed(() => useContext().$auth.user);
+    const { $auth } = useContext();
+
+    const user = computed(() => $auth.user);
 
     const generatedLink = ref("");
-
+    const token = ref("");
     const api = useApiSingleton();
-
     async function getSignupLink() {
       const { data } = await api.groups.createInvitation({ uses: 1 });
-
       if (data) {
+        token.value = data.token;
         generatedLink.value = constructLink(data.token);
       }
     }
@@ -122,7 +147,51 @@ export default defineComponent({
       return `${window.location.origin}/register?token=${token}`;
     }
 
-    return { user, constructLink, generatedLink, getSignupLink };
+    // =================================================
+    // 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("Email Sent");
+      } else {
+        alert.error("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;
+    });
+
+    return {
+      user,
+      constructLink,
+      generatedLink,
+      getSignupLink,
+      sendInvite,
+      validators,
+      validEmail,
+      ...toRefs(state),
+    };
   },
 });
 </script>