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

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

Browse source 
* 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>
This commit is contained in:
Hayden 2021-10-04 20:16:37 -08:00 • committed by GitHub
parent b7b8aa9a08
commit 5d43fac7c9
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
43 changed files with 652 additions and 106 deletions
Download patch file Download diff file Expand all files Collapse all files

2
frontend/pages/admin/backups.vue
View file

@ -34,7 +34,7 @@
<v-divider></v-divider>
</BaseDialog>
<v-toolbar flat class="justify-between">
<v-toolbar flat color="background" class="justify-between">
<BaseButton class="mr-2" @click="createBackup(null)" />
<!-- Backup Creation Dialog -->
<BaseDialog

2
frontend/pages/admin/dashboard.vue
View file

@ -1,5 +1,3 @@
// TODO: Possibly add confirmation dialog? I'm not sure that it's really requried for events...
<template>
<v-container v-if="statistics" class="mt-10">
<v-row v-if="statistics">

2
frontend/pages/admin/manage-users/all-groups.vue
View file

@ -3,7 +3,7 @@
<v-container fluid>
<BaseCardSectionTitle title="Group Management"> </BaseCardSectionTitle>
<section>
<v-toolbar flat class="justify-between">
<v-toolbar flat color="background" class="justify-between">
<BaseDialog
ref="refUserDialog"
top

2
frontend/pages/admin/manage-users/all-users.vue
View file

@ -3,7 +3,7 @@
<v-container fluid>
<BaseCardSectionTitle title="User Management"> </BaseCardSectionTitle>
<section>
<v-toolbar flat class="justify-between">
<v-toolbar color="background" flat class="justify-between">
<BaseDialog
ref="refUserDialog"
top

113
frontend/pages/admin/site-settings.vue
View file

@ -11,64 +11,81 @@
</template>
<template #title> {{ $t("settings.site-settings") }} </template>
</BasePageTitle>
<BaseCardSectionTitle :icon="$globals.icons.email" title="Email Configuration"> </BaseCardSectionTitle>
<v-card>
<v-card-text>
<section>
<BaseCardSectionTitle :icon="$globals.icons.cog" title="General Configuration"> </BaseCardSectionTitle>
<v-card class="mb-4">
<v-list-item>
<v-list-item-avatar>
<v-icon :color="ready ? 'success' : 'error'">
{{ ready ? $globals.icons.check : $globals.icons.close }}
<v-icon :color="getColor(appConfig.baseUrlSet)">
{{ appConfig.baseUrlSet ? $globals.icons.checkboxMarkedCircle : $globals.icons.close }}
</v-icon>
</v-list-item-avatar>
<v-list-item-content>
<v-list-item-title
:class="{
'success--text': ready,
'error--text': !ready,
}"
>
Email Configuration Status
</v-list-item-title>
<v-list-item-subtitle
:class="{
'success--text': ready,
'error--text': !ready,
}"
>
{{ ready ? "Ready" : "Not Ready - Check Env Variables" }}
<v-list-item-title :class="getTextClass(appConfig.baseUrlSet)"> Server Side Base URL </v-list-item-title>
<v-list-item-subtitle :class="getTextClass(appConfig.baseUrlSet)">
{{ appConfig.baseUrlSet ? "Ready" : "Not Ready - `BASE_URL` still default on API Server" }}
</v-list-item-subtitle>
</v-list-item-content>
</v-list-item>
<v-card-actions>
<v-text-field v-model="address" class="mr-4" :label="$t('user.email')" :rules="[validators.email]">
</v-text-field>
<BaseButton color="info" :disabled="!ready || !validEmail" :loading="loading" @click="testEmail">
<template #icon> {{ $globals.icons.email }} </template>
{{ $t("general.test") }}
</BaseButton>
</v-card-actions>
</v-card-text>
<template v-if="tested">
<v-divider class="my-x"></v-divider>
</v-card>
</section>
<section>
<BaseCardSectionTitle class="pt-2" :icon="$globals.icons.email" title="Email Configuration">
</BaseCardSectionTitle>
<v-card>
<v-card-text>
Email Test Result: {{ success ? "Succeeded" : "Failed" }}
<div>Errors: {{ error }}</div>
<v-list-item>
<v-list-item-avatar>
<v-icon :color="getColor(appConfig.emailReady)">
{{ appConfig.emailReady ? $globals.icons.checkboxMarkedCircle : $globals.icons.close }}
</v-icon>
</v-list-item-avatar>
<v-list-item-content>
<v-list-item-title :class="getTextClass(appConfig.emailReady)">
Email Configuration Status
</v-list-item-title>
<v-list-item-subtitle :class="getTextClass(appConfig.emailReady)">
{{ appConfig.emailReady ? "Ready" : "Not Ready - Check Env Variables" }}
</v-list-item-subtitle>
</v-list-item-content>
</v-list-item>
<v-card-actions>
<v-text-field v-model="address" class="mr-4" :label="$t('user.email')" :rules="[validators.email]">
</v-text-field>
<BaseButton
color="info"
:disabled="!appConfig.emailReady || !validEmail"
:loading="loading"
@click="testEmail"
>
<template #icon> {{ $globals.icons.email }} </template>
{{ $t("general.test") }}
</BaseButton>
</v-card-actions>
</v-card-text>
</template>
</v-card>
<template v-if="tested">
<v-divider class="my-x"></v-divider>
<v-card-text>
Email Test Result: {{ success ? "Succeeded" : "Failed" }}
<div>Errors: {{ error }}</div>
</v-card-text>
</template>
</v-card>
</section>
</v-container>
</template>
<script lang="ts">
import { computed, defineComponent, onMounted, reactive, toRefs } from "@nuxtjs/composition-api";
import { useApiSingleton } from "~/composables/use-api";
import { computed, defineComponent, onMounted, reactive, toRefs, ref } from "@nuxtjs/composition-api";
import { CheckAppConfig } from "~/api/class-interfaces/admin-about";
import { useAdminApi, useApiSingleton } from "~/composables/use-api";
import { validators } from "~/composables/use-validators";
export default defineComponent({
layout: "admin",
setup() {
const state = reactive({
ready: true,
loading: false,
address: "",
success: false,
@ -76,13 +93,19 @@ export default defineComponent({
tested: false,
});
const appConfig = ref<CheckAppConfig>({
emailReady: false,
baseUrlSet: false,
});
const api = useApiSingleton();
const adminAPI = useAdminApi();
onMounted(async () => {
const { data } = await api.email.check();
const { data } = await adminAPI.about.checkApp();
if (data) {
state.ready = data.ready;
appConfig.value = data;
}
});
@ -116,7 +139,17 @@ export default defineComponent({
return false;
});
function getTextClass(booly: boolean | any) {
return booly ? "success--text" : "error--text";
}
function getColor(booly: boolean | any) {
return booly ? "success" : "error";
}
return {
getColor,
getTextClass,
appConfig,
validEmail,
validators,
...toRefs(state),

2
frontend/pages/admin/toolbox/foods.vue
View file

@ -1,7 +1,7 @@
<template>
<v-container fluid>
<BaseCardSectionTitle title="Manage Units"> </BaseCardSectionTitle>
<v-toolbar flat>
<v-toolbar flat color="background">
<BaseDialog
ref="domFoodDialog"
:title="dialog.title"

2
frontend/pages/admin/toolbox/notifications.vue
View file

@ -25,7 +25,7 @@
</v-card-text>
</BaseDialog>
<v-toolbar flat class="justify-between">
<v-toolbar color="background" flat class="justify-between">
<BaseDialog
:icon="$globals.icons.bellAlert"
:title="$t('general.new') + ' ' + $t('events.notification')"

2
frontend/pages/admin/toolbox/units.vue
View file

@ -1,7 +1,7 @@
<template>
<v-container fluid>
<BaseCardSectionTitle title="Manage Units"> </BaseCardSectionTitle>
<v-toolbar flat>
<v-toolbar flat color="background">
<BaseDialog
ref="domUnitDialog"
:title="dialog.title"

3
frontend/pages/login.vue
View file

@ -195,6 +195,7 @@ export default defineComponent({
setup() {
const { $auth } = useContext();
const context = useContext();
const form = reactive({
email: "changeme@email.com",
@ -203,7 +204,7 @@ export default defineComponent({
const loggingIn = ref(false);
const allowSignup = computed(() => process.env.ALLOW_SIGNUP);
const allowSignup = computed(() => context.env.ALLOW_SIGNUP);
async function authenticate() {
loggingIn.value = true;

2
frontend/pages/register.vue
View file

@ -158,7 +158,7 @@ export default defineComponent({
if (response?.status === 201) {
state.success = true;
alert.success("Registration Success");
router.push("/user/login");
router.push("/login");
}
}

113
frontend/pages/user/group/members.vue Normal file
View file

@ -0,0 +1,113 @@
<template>
<v-container>
<BasePageTitle divider>
<template #header>
<v-img max-height="125" max-width="125" :src="require('~/static/svgs/manage-members.svg')"></v-img>
</template>
<template #title> Manage Memebers </template>
Manage the permissions of the members in your groups. <b> Manage </b> allows the user to access the
data-management page <b> Invite </b> allows the user to generate invitation links for other users. Group owners
cannot change their own permissions.
</BasePageTitle>
<v-data-table
:headers="headers"
:items="members || []"
item-key="id"
class="elevation-0"
hide-default-footer
disable-pagination
>
<template #item.avatar="">
<v-avatar>
<img src="https://i.pravatar.cc/300" alt="John" />
</v-avatar>
</template>
<template #item.admin="{ item }">
{{ item.admin ? "Admin" : "User" }}
</template>
<template #item.manage="{ item }">
<div class="d-flex justify-center">
<v-checkbox
v-model="item.canManage"
:disabled="item.id === $auth.user.id || item.admin"
class=""
style="max-width: 30px"
@change="setPermissions(item)"
></v-checkbox>
</div>
</template>
<template #item.organize="{ item }">
<div class="d-flex justify-center">
<v-checkbox
v-model="item.canOrganize"
:disabled="item.id === $auth.user.id || item.admin"
class=""
style="max-width: 30px"
@change="setPermissions(item)"
></v-checkbox>
</div>
</template>
<template #item.invite="{ item }">
<div class="d-flex justify-center">
<v-checkbox
v-model="item.canInvite"
:disabled="item.id === $auth.user.id || item.admin"
class=""
style="max-width: 30px"
@change="setPermissions(item)"
></v-checkbox>
</div>
</template>
</v-data-table>
</v-container>
</template>
<script lang="ts">
import { defineComponent, ref, onMounted, useContext } from "@nuxtjs/composition-api";
import { useApiSingleton } from "~/composables/use-api";
import { UserOut } from "~/types/api-types/user";
export default defineComponent({
setup() {
const api = useApiSingleton();
const { i18n } = useContext();
const members = ref<UserOut[] | null[]>([]);
const headers = [
{ text: "", value: "avatar", sortable: false, align: "center" },
{ text: i18n.t("user.username"), value: "username" },
{ text: i18n.t("user.full-name"), value: "fullName" },
{ text: i18n.t("user.admin"), value: "admin" },
{ text: "Manage", value: "manage", sortable: false, align: "center" },
{ text: "Organize", value: "organize", sortable: false, align: "center" },
{ text: "Invite", value: "invite", sortable: false, align: "center" },
];
async function refreshMembers() {
const { data } = await api.groups.fetchMembers();
if (data) {
members.value = data;
}
}
async function setPermissions(user: UserOut) {
const payload = {
userId: user.id,
canInvite: user.canInvite,
canManage: user.canManage,
canOrganize: user.canOrganize,
};
await api.groups.setMemberPermissions(payload);
}
onMounted(async () => {
await refreshMembers();
});
return { members, headers, setPermissions };
},
});
</script>

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

@ -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>

2
frontend/pages/user/sign-up.vue
View file

@ -68,7 +68,7 @@
</v-btn>
</v-form>
</v-card-text>
<v-btn v-if="allowSignup" class="mx-auto" text to="/user/login"> Login </v-btn>
<v-btn v-if="allowSignup" class="mx-auto" text to="/login"> Login </v-btn>
</v-card>
<!-- <v-col class="fill-height"> </v-col> -->
</v-container>