Docker/mealie
Docker/mealie
1
0
Fork 0
mirror of https://github.com/mealie-recipes/mealie.git synced 2025-08-02 20:15:24 +02:00
Code Issues Releases Activity

feat: Groups/households custom invitations (#4252)

Browse source 
Co-authored-by: Michael Genson <71845777+michael-genson@users.noreply.github.com>
This commit is contained in:
Arsène Reymond 2024-11-12 04:30:08 +01:00 • committed by GitHub
parent 7ada42a791
commit 622c1b11f5
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
8 changed files with 276 additions and 106 deletions
Download patch file Download diff file Expand all files Collapse all files

120
frontend/pages/user/profile/index.vue
View file

@ -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() {