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(backend): ✨ refactor/fix group management for admins (#838)

Browse source 
* fix(frontend): 🐛 update dialog implementation to simplify state management

* test(backend): ✅ refactor test fixtures + admin group tests

* chore(backend): 🔨 add launcher.json for python debugging (tests)

* fix typing

* feat(backend): ✨ refactor/fix group management for admins

* feat(frontend): ✨ add/fix admin group management

* add LDAP checker

Co-authored-by: hay-kot <hay-kot@pm.me>
This commit is contained in:
Hayden 2021-11-25 14:17:02 -09:00 • committed by GitHub
parent 0db8a58963
commit 791aa8c610
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
52 changed files with 881 additions and 331 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -6,7 +6,7 @@
<!-- Delete Dialog -->
<BaseDialog
ref="domDeleteConfirmation"
v-model="deleteDialog"
:title="$t('settings.backup.delete-backup')"
color="error"
:icon="$globals.icons.alertCircle"
@ -19,7 +19,7 @@
<!-- Import Dialog -->
<BaseDialog
ref="domImportDialog"
v-model="importDialog"
:title="selected.name"
:icon="$globals.icons.database"
:submit-text="$t('general.import')"
@ -38,6 +38,7 @@
<BaseButton class="mr-2" @click="createBackup(null)" />
<!-- Backup Creation Dialog -->
<BaseDialog
v-model="createDialog"
:title="$t('settings.backup.create-heading')"
:icon="$globals.icons.database"
:submit-text="$t('general.create')"
@ -82,7 +83,7 @@
class="mx-1"
delete
@click.stop="
domDeleteConfirmation.open();
deleteDialog = true;
deleteTarget = item.name;
"
/>
@ -105,7 +106,7 @@
</template>
<script lang="ts">
import { defineComponent, reactive, toRefs, useContext, ref } from "@nuxtjs/composition-api";
import { defineComponent, reactive, toRefs, useContext } from "@nuxtjs/composition-api";
import AdminBackupImportOptions from "@/components/Domain/Admin/AdminBackupImportOptions.vue";
import { useBackups } from "~/composables/use-backups";
@ -118,9 +119,10 @@ export default defineComponent({
const { selected, backups, backupOptions, deleteTarget, refreshBackups, importBackup, createBackup, deleteBackup } =
useBackups();
const domDeleteConfirmation = ref(null);
const domImportDialog = ref(null);
const state = reactive({
deleteDialog: false,
createDialog: false,
importDialog: false,
search: "",
headers: [
{ text: i18n.t("general.name"), value: "name" },
@ -135,8 +137,7 @@ export default defineComponent({
return;
}
selected.value.name = data.name;
// @ts-ignore - Calling Child Method
domImportDialog.value.open();
state.importDialog = true;
}
const backupsFileNameDownload = (fileName: string) => `api/backups/${fileName}/download`;
@ -150,8 +151,6 @@ export default defineComponent({
deleteBackup,
setSelected,
deleteTarget,
domDeleteConfirmation,
domImportDialog,
importBackup,
refreshBackups,
backupsFileNameDownload,

96
frontend/pages/admin/manage/groups/_id.vue Normal file
View file

@ -0,0 +1,96 @@
<template>
<v-container v-if="group" class="narrow-container">
<BasePageTitle>
<template #header>
<v-img max-height="125" max-width="125" :src="require('~/static/svgs/manage-group-settings.svg')"></v-img>
</template>
<template #title> Admin Group Management </template>
Changes to this group will be reflected immediately.
</BasePageTitle>
<AppToolbar back> </AppToolbar>
<v-card-text> Group Id: {{ group.id }} </v-card-text>
<v-form v-if="!userError" ref="refGroupEditForm" @submit.prevent="handleSubmit">
<v-card outlined>
<v-card-text>
<v-text-field v-model="group.name" label="Group Name"> </v-text-field>
<GroupPreferencesEditor v-if="group.preferences" v-model="group.preferences" />
</v-card-text>
</v-card>
<div class="d-flex pa-2">
<BaseButton type="submit" edit class="ml-auto"> {{ $t("general.update") }}</BaseButton>
</div>
</v-form>
</v-container>
</template>
<script lang="ts">
import { defineComponent, useRoute, onMounted, ref } from "@nuxtjs/composition-api";
import GroupPreferencesEditor from "~/components/Domain/Group/GroupPreferencesEditor.vue";
import { useAdminApi } from "~/composables/api";
import { useGroups } from "~/composables/use-groups";
import { alert } from "~/composables/use-toast";
import { useUserForm } from "~/composables/use-users";
import { validators } from "~/composables/use-validators";
export default defineComponent({
components: {
GroupPreferencesEditor,
},
layout: "admin",
setup() {
const { userForm } = useUserForm();
const { groups } = useGroups();
const route = useRoute();
const groupId = route.value.params.id;
// ==============================================
// New User Form
const refGroupEditForm = ref<VForm | null>(null);
const adminApi = useAdminApi();
const group = ref({});
const userError = ref(false);
onMounted(async () => {
const { data, error } = await adminApi.groups.getOne(groupId);
if (error?.response?.status === 404) {
alert.error("User Not Found");
userError.value = true;
}
if (data) {
// @ts-ignore
group.value = data;
}
});
async function handleSubmit() {
if (!refGroupEditForm.value?.validate()) {
return;
}
// @ts-ignore
const { response, data } = await adminApi.groups.updateOne(group.value.id, group.value);
if (response?.status === 200 && data) {
// @ts-ignore
group.value = data;
}
}
return {
group,
userError,
userForm,
refGroupEditForm,
handleSubmit,
groups,
validators,
};
},
});
</script>

100
frontend/pages/admin/manage/group/index.vue → frontend/pages/admin/manage/groups/index.vue
View file

@ -1,23 +1,36 @@
// TODO: Edit Group
<template>
<v-container fluid>
<BaseDialog
v-model="createDialog"
:title="$t('group.create-group')"
:icon="$globals.icons.group"
@submit="createGroup(createUserForm.data)"
>
<template #activator> </template>
<v-card-text>
<AutoForm v-model="createUserForm.data" :update-mode="updateMode" :items="createUserForm.items" />
</v-card-text>
</BaseDialog>
<BaseDialog
v-model="confirmDialog"
:title="$t('general.confirm')"
color="error"
@confirm="deleteGroup(deleteTarget)"
>
<template #activator> </template>
<v-card-text>
{{ $t("general.confirm-delete-generic") }}
</v-card-text>
</BaseDialog>
<BaseCardSectionTitle title="Group Management"> </BaseCardSectionTitle>
<section>
<v-toolbar flat color="background" class="justify-between">
<BaseDialog
ref="refUserDialog"
top
:title="$t('group.create-group')"
@submit="createGroup(createUserForm.data)"
>
<template #activator="{ open }">
<BaseButton @click="open"> {{ $t("group.create-group") }} </BaseButton>
</template>
<v-card-text>
<AutoForm v-model="createUserForm.data" :update-mode="updateMode" :items="createUserForm.items" />
</v-card-text>
</BaseDialog>
<BaseButton @click="openDialog"> {{ $t("general.create") }} </BaseButton>
</v-toolbar>
<v-data-table
:headers="headers"
:items="groups || []"
@ -26,10 +39,8 @@
hide-default-footer
disable-pagination
:search="search"
@click:row="handleRowClick"
>
<template #item.mealplans="{ item }">
{{ item.mealplans.length }}
</template>
<template #item.shoppingLists="{ item }">
{{ item.shoppingLists.length }}
</template>
@ -37,28 +48,23 @@
{{ item.users.length }}
</template>
<template #item.webhookEnable="{ item }">
{{ item.webhookEnabled ? $t("general.yes") : $t("general.no") }}
{{ item.webhooks.length > 0 ? $t("general.yes") : $t("general.no") }}
</template>
<template #item.actions="{ item }">
<BaseDialog :title="$t('general.confirm')" color="error" @confirm="deleteGroup(item.id)">
<template #activator="{ open }">
<v-btn :disabled="item && item.users.length > 0" class="mr-1" small color="error" @click="open">
<v-icon small left>
{{ $globals.icons.delete }}
</v-icon>
{{ $t("general.delete") }}
</v-btn>
<v-btn small color="success" @click="updateUser(item)">
<v-icon small left class="mr-2">
{{ $globals.icons.edit }}
</v-icon>
{{ $t("general.edit") }}
</v-btn>
</template>
<v-card-text>
{{ $t("general.confirm-delete-generic") }}
</v-card-text>
</BaseDialog>
<v-btn
:disabled="item && item.users.length > 0"
class="mr-1"
icon
color="error"
@click.stop="
confirmDialog = true;
deleteTarget = item.id;
"
>
<v-icon>
{{ $globals.icons.delete }}
</v-icon>
</v-btn>
</template>
</v-data-table>
<v-divider></v-divider>
@ -67,7 +73,8 @@
</template>
<script lang="ts">
import { defineComponent, reactive, toRefs, useContext } from "@nuxtjs/composition-api";
import { defineComponent, reactive, toRefs, useContext, useRouter } from "@nuxtjs/composition-api";
import { Group } from "~/api/class-interfaces/groups";
import { fieldTypes } from "~/composables/forms";
import { useGroups } from "~/composables/use-groups";
@ -78,6 +85,9 @@ export default defineComponent({
const { groups, refreshAllGroups, deleteGroup, createGroup } = useGroups();
const state = reactive({
createDialog: false,
confirmDialog: false,
deleteTarget: 0,
search: "",
headers: [
{
@ -89,9 +99,8 @@ export default defineComponent({
{ text: i18n.t("general.name"), value: "name" },
{ text: i18n.t("user.total-users"), value: "users" },
{ text: i18n.t("user.webhooks-enabled"), value: "webhookEnable" },
{ text: i18n.t("user.total-mealplans"), value: "mealplans" },
{ text: i18n.t("shopping-list.shopping-lists"), value: "shoppingLists" },
{ value: "actions" },
{ text: i18n.t("general.delete"), value: "actions" },
],
updateMode: false,
createUserForm: {
@ -109,7 +118,18 @@ export default defineComponent({
},
});
return { ...toRefs(state), groups, refreshAllGroups, deleteGroup, createGroup };
function openDialog() {
state.createDialog = true;
state.createUserForm.data.name = "";
}
const router = useRouter();
function handleRowClick(item: Group) {
router.push("/admin/manage/groups/" + item.id);
}
return { ...toRefs(state), groups, refreshAllGroups, deleteGroup, createGroup, openDialog, handleRowClick };
},
head() {
return {

2
frontend/pages/admin/manage/users/_id.vue
View file

@ -31,7 +31,7 @@
</v-card-text>
</v-card>
<div class="d-flex pa-2">
<BaseButton type="submit" class="ml-auto"></BaseButton>
<BaseButton type="submit" edit class="ml-auto"> {{ $t("general.update") }}</BaseButton>
</div>
</v-form>
</v-container>

35
frontend/pages/admin/manage/users/index.vue
View file

@ -1,6 +1,12 @@
// TODO: Edit User
<template>
<v-container fluid>
<BaseDialog v-model="deleteDialog" :title="$t('general.confirm')" color="error" @confirm="deleteUser(deleteTarget)">
<template #activator> </template>
<v-card-text>
{{ $t("general.confirm-delete-generic") }}
</v-card-text>
</BaseDialog>
<BaseCardSectionTitle title="User Management"> </BaseCardSectionTitle>
<section>
<v-toolbar color="background" flat class="justify-between">
@ -25,18 +31,19 @@
</v-icon>
</template>
<template #item.actions="{ item }">
<BaseDialog :title="$t('general.confirm')" color="error" @confirm="deleteUser(item.id)">
<template #activator="{ open }">
<v-btn icon :disabled="item.id == 1" color="error" @click.stop="open">
<v-icon>
{{ $globals.icons.delete }}
</v-icon>
</v-btn>
</template>
<v-card-text>
{{ $t("general.confirm-delete-generic") }}
</v-card-text>
</BaseDialog>
<v-btn
icon
:disabled="item.id == 1"
color="error"
@click.stop="
deleteDialog = true;
deleteTarget = item.id;
"
>
<v-icon>
{{ $globals.icons.delete }}
</v-icon>
</v-btn>
</template>
</v-data-table>
<v-divider></v-divider>
@ -61,6 +68,8 @@ export default defineComponent({
const router = useRouter();
const state = reactive({
deleteDialog: false,
deleteTarget: 0,
search: "",
});

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

@ -128,6 +128,7 @@ export default defineComponent({
emailReady: false,
baseUrlSet: false,
isSiteSecure: false,
ldapReady: false,
});
const api = useUserApi();
@ -140,10 +141,10 @@ export default defineComponent({
appConfig.value = data;
}
appConfig.value.isSiteSecure = isLocalhostorHttps();
appConfig.value.isSiteSecure = isLocalHostOrHttps();
});
function isLocalhostorHttps() {
function isLocalHostOrHttps() {
return window.location.hostname === "localhost" || window.location.protocol === "https:";
}
@ -152,15 +153,21 @@ export default defineComponent({
{
status: appConfig.value.baseUrlSet,
text: "Server Side Base URL",
errorText: "Error - `BASE_URL` still default on API Server",
errorText: "`BASE_URL` still default on API Server",
successText: "Server Side URL does not match the default",
},
{
status: appConfig.value.isSiteSecure,
text: "Secure Site",
errorText: "Error - Serve via localhost or secure with https.",
errorText: "Serve via localhost or secure with https.",
successText: "Site is accessed by localhost or https",
},
{
status: appConfig.value.ldapReady,
text: "LDAP Ready",
errorText: "Not all LDAP Values are configured",
successText: "Required LDAP variables are all set.",
},
];
});

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

@ -2,8 +2,9 @@
<v-container fluid>
<BaseCardSectionTitle title="Manage Units"> </BaseCardSectionTitle>
<v-toolbar flat color="background">
<!-- New/Edit Food Dialog -->
<BaseDialog
ref="domFoodDialog"
v-model="newFoodDialog"
:title="dialog.title"
:icon="$globals.icons.units"
:submit-text="dialog.text"
@ -18,12 +19,25 @@
</v-card-text>
</BaseDialog>
<!-- Delete Food Dialog -->
<BaseDialog
v-model="deleteFoodDialog"
:title="$t('general.confirm')"
color="error"
@confirm="actions.deleteOne(deleteTarget)"
>
<template #activator> </template>
<v-card-text>
{{ $t("general.confirm-delete-generic") }}
</v-card-text>
</BaseDialog>
<BaseButton
class="mr-1"
@click="
create = true;
actions.resetWorking();
domFoodDialog.open();
newFoodDialog = true;
"
></BaseButton>
<BaseButton secondary @click="filter = !filter"> Filter </BaseButton>
@ -45,17 +59,17 @@
@click="
create = false;
actions.setWorking(item);
domFoodDialog.open();
newFoodDialog = true;
"
></BaseButton>
<BaseButton
delete
small
@click="
deleteFoodDialog = true;
deleteTarget = item.id;
"
></BaseButton>
<BaseDialog :title="$t('general.confirm')" color="error" @confirm="actions.deleteOne(item.id)">
<template #activator="{ open }">
<BaseButton delete small @click="open"></BaseButton>
</template>
<v-card-text>
{{ $t("general.confirm-delete-generic") }}
</v-card-text>
</BaseDialog>
</div>
</template>
</v-data-table>
@ -90,6 +104,9 @@ export default defineComponent({
});
const state = reactive({
deleteFoodDialog: false,
newFoodDialog: false,
deleteTarget: 0,
headers: [
{ text: "Id", value: "id" },
{ text: "Name", value: "name" },

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

@ -1,30 +1,42 @@
<template>
<v-container fluid>
<!-- Create/Edit Unit Dialog -->
<BaseDialog
v-model="createUnitDialog"
:title="dialog.title"
:icon="$globals.icons.units"
:submit-text="dialog.text"
:keep-open="!validForm"
@submit="create ? actions.createOne(domCreateUnitForm) : actions.updateOne()"
>
<v-card-text>
<v-form ref="domCreateUnitForm">
<v-text-field v-model="workingUnitData.name" label="Name" :rules="[validators.required]"></v-text-field>
<v-text-field v-model="workingUnitData.abbreviation" label="Abbreviation"></v-text-field>
<v-text-field v-model="workingUnitData.description" label="Description"></v-text-field>
</v-form>
</v-card-text>
</BaseDialog>
<!-- Delete Unit Dialog -->
<BaseDialog
v-model="deleteUnitDialog"
:title="$t('general.confirm')"
color="error"
@confirm="actions.deleteOne(item.id)"
>
<v-card-text>
{{ $t("general.confirm-delete-generic") }}
</v-card-text>
</BaseDialog>
<BaseCardSectionTitle title="Manage Units"> </BaseCardSectionTitle>
<v-toolbar flat color="background">
<BaseDialog
ref="domUnitDialog"
:title="dialog.title"
:icon="$globals.icons.units"
:submit-text="dialog.text"
:keep-open="!validForm"
@submit="create ? actions.createOne(domCreateUnitForm) : actions.updateOne()"
>
<v-card-text>
<v-form ref="domCreateUnitForm">
<v-text-field v-model="workingUnitData.name" label="Name" :rules="[validators.required]"></v-text-field>
<v-text-field v-model="workingUnitData.abbreviation" label="Abbreviation"></v-text-field>
<v-text-field v-model="workingUnitData.description" label="Description"></v-text-field>
</v-form>
</v-card-text>
</BaseDialog>
<BaseButton
class="mr-1"
@click="
create = true;
actions.resetWorking();
domUnitDialog.open();
createUnitDialog = true;
"
></BaseButton>
<BaseButton secondary @click="filter = !filter"> Filter </BaseButton>
@ -46,17 +58,17 @@
@click="
create = false;
actions.setWorking(item);
domUnitDialog.open();
createUnitDialog = true;
"
></BaseButton>
<BaseButton
delete
small
@click="
deleteUnitDialog = true;
deleteUnitTarget = item.id;
"
></BaseButton>
<BaseDialog :title="$t('general.confirm')" color="error" @confirm="actions.deleteOne(item.id)">
<template #activator="{ open }">
<BaseButton delete small @click="open"></BaseButton>
</template>
<v-card-text>
{{ $t("general.confirm-delete-generic") }}
</v-card-text>
</BaseDialog>
</div>
</template>
</v-data-table>
@ -91,6 +103,9 @@ export default defineComponent({
});
const state = reactive({
createUnitDialog: false,
deleteUnitDialog: false,
deleteUnitTarget: 0,
headers: [
{ text: "Id", value: "id" },
{ text: "Name", value: "name" },

9
frontend/pages/meal-plan/planner.vue
View file

@ -2,7 +2,7 @@
<v-container>
<!-- Create Meal Dialog -->
<BaseDialog
ref="domMealDialog"
v-model="createMealDialog"
:title="$t('meal-plan.create-a-new-meal-plan')"
color="primary"
:icon="$globals.icons.foods"
@ -202,7 +202,7 @@
</template>
<script lang="ts">
import { computed, defineComponent, reactive, ref, toRefs, watch } from "@nuxtjs/composition-api";
import { computed, defineComponent, reactive, toRefs, watch } from "@nuxtjs/composition-api";
import { isSameDay, addDays, subDays, parseISO, format } from "date-fns";
import { SortableEvent } from "sortablejs"; // eslint-disable-line
import draggable from "vuedraggable";
@ -222,6 +222,7 @@ export default defineComponent({
useRecipes(true, true);
const state = reactive({
createMealDialog: false,
edit: false,
hover: {},
pickerMenu: null,
@ -300,7 +301,6 @@ export default defineComponent({
// =====================================================
// New Meal Dialog
const domMealDialog = ref(null);
const dialog = reactive({
loading: false,
error: false,
@ -326,7 +326,7 @@ export default defineComponent({
function openDialog(date: Date) {
newMeal.date = format(date, "yyyy-MM-dd");
// @ts-ignore
domMealDialog.value.open();
state.createMealDialog = true;
}
function resetDialog() {
@ -360,7 +360,6 @@ export default defineComponent({
backOneWeek,
days,
dialog,
domMealDialog,
forwardOneWeek,
loading,
mealplans,

2
frontend/pages/user/group/members.vue
View file

@ -4,7 +4,7 @@
<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>
<template #title> Manage Members </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.

11
frontend/pages/user/group/recipe-data/index.vue
View file

@ -1,8 +1,9 @@
<template>
<v-container fluid>
<!-- Dialog Object -->
<!-- Base Dialog Object -->
<BaseDialog
ref="domDialog"
v-model="dialog.state"
width="650px"
:icon="dialog.icon"
:title="dialog.title"
@ -23,6 +24,7 @@
</v-card-text>
<v-card-text v-else-if="dialog.mode == MODES.export"> TODO: Export Stuff Here </v-card-text>
</BaseDialog>
<BasePageTitle divider>
<template #header>
<v-img max-height="125" max-width="125" :src="require('~/static/svgs/manage-recipes.svg')"></v-img>
@ -207,9 +209,8 @@ export default defineComponent({
// ============================================================
// Dialog Management
const domDialog = ref(null);
const dialog = reactive({
state: false,
title: "Tag Recipes",
mode: MODES.tag,
tag: "",
@ -243,15 +244,13 @@ export default defineComponent({
dialog.title = titles[mode];
dialog.callback = callbacks[mode];
dialog.icon = icons[mode];
// @ts-ignore
domDialog.value.open();
dialog.state = true;
}
return {
toSetTags,
toSetCategories,
openDialog,
domDialog,
dialog,
MODES,
headers,