1
0
Fork 0
mirror of https://github.com/mealie-recipes/mealie.git synced 2025-08-05 13:35:23 +02:00

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

View file

@ -5,6 +5,7 @@ const prefix = "/api";
const routes = {
about: `${prefix}/admin/about`,
aboutStatistics: `${prefix}/admin/about/statistics`,
check: `${prefix}/admin/about/check`,
};
export interface AdminAboutInfo {
@ -26,6 +27,11 @@ export interface AdminStatistics {
untaggedRecipes: number;
}
export interface CheckAppConfig {
emailReady: boolean;
baseUrlSet: boolean;
}
export class AdminAboutAPI extends BaseAPI {
async about() {
return await this.requests.get<AdminAboutInfo>(routes.about);
@ -34,4 +40,8 @@ export class AdminAboutAPI extends BaseAPI {
async statistics() {
return await this.requests.get(routes.aboutStatistics);
}
async checkApp() {
return await this.requests.get<CheckAppConfig>(routes.check);
}
}

View file

@ -2,6 +2,8 @@ import { BaseAPI } from "./_base";
const routes = {
base: "/api/admin/email",
invitation: "/api/groups/invitations/email",
};
export interface CheckEmailResponse {
@ -17,6 +19,16 @@ export interface TestEmailPayload {
email: string;
}
export interface InvitationEmail {
email: string;
token: string;
}
export interface InvitationEmailResponse {
success: boolean;
error: string;
}
export class EmailAPI extends BaseAPI {
check() {
return this.requests.get<CheckEmailResponse>(routes.base);
@ -25,4 +37,8 @@ export class EmailAPI extends BaseAPI {
test(payload: TestEmailPayload) {
return this.requests.post<TestEmailResponse>(routes.base, payload);
}
sendInvitation(payload: InvitationEmail) {
return this.requests.post<InvitationEmailResponse>(routes.invitation, payload);
}
}

View file

@ -1,5 +1,5 @@
import { BaseCRUDAPI } from "./_base";
import { GroupInDB } from "~/types/api-types/user";
import { GroupInDB, UserOut } from "~/types/api-types/user";
const prefix = "/api";
@ -7,6 +7,8 @@ const routes = {
groups: `${prefix}/admin/groups`,
groupsSelf: `${prefix}/groups/self`,
categories: `${prefix}/groups/categories`,
members: `${prefix}/groups/members`,
permissions: `${prefix}/groups/permissions`,
preferences: `${prefix}/groups/preferences`,
@ -56,6 +58,13 @@ export interface Invitation {
uses_left: number;
}
export interface SetPermissions {
userId: number;
canInvite: boolean;
canManage: boolean;
canOrganize: boolean;
}
export class GroupAPI extends BaseCRUDAPI<GroupInDB, CreateGroup> {
baseRoute = routes.groups;
itemRoute = routes.groupsId;
@ -84,4 +93,12 @@ export class GroupAPI extends BaseCRUDAPI<GroupInDB, CreateGroup> {
async createInvitation(payload: CreateInvitation) {
return await this.requests.post<Invitation>(routes.invitation, payload);
}
async fetchMembers() {
return await this.requests.get<UserOut[]>(routes.members);
}
async setMemberPermissions(payload: SetPermissions) {
return await this.requests.put<UserOut>(routes.permissions, payload);
}
}

View file

@ -10,3 +10,21 @@
.narrow-container {
max-width: 700px !important;
}
.theme--dark.v-application {
background-color: var(--v-background-base, #121212) !important;
}
.theme--dark.v-navigation-drawer {
background-color: var(--v-background-base, #121212) !important;
}
/* 1E1E1E */
.theme--dark.v-card {
background-color: #2b2b2b !important;
}
.theme--light.v-application {
background-color: var(--v-background-base, white) !important;
}

View file

@ -35,7 +35,7 @@
<v-icon left>{{ $globals.icons.logout }}</v-icon>
{{ $t("user.logout") }}
</v-btn>
<v-btn v-else text nuxt to="/user/login">
<v-btn v-else text nuxt to="/login">
<v-icon left>{{ $globals.icons.user }}</v-icon>
{{ $t("user.login") }}
</v-btn>

View file

@ -121,6 +121,7 @@
</v-list-item>
</template>
</v-list-item-group>
<slot name="bottom"></slot>
</v-list>
</template>
</v-navigation-drawer>

View file

@ -11,7 +11,7 @@
>
<template #activator="{ on }">
<v-btn
icon
:icon="icon"
:color="color"
retain-focus-on-click
@click="
@ -21,6 +21,7 @@
@blur="on.blur"
>
<v-icon>{{ $globals.icons.contentCopy }}</v-icon>
{{ icon ? "" : "Copy" }}
</v-btn>
</template>
<span>
@ -43,6 +44,10 @@ export default {
type: String,
default: "primary",
},
icon: {
type: Boolean,
default: true,
},
},
data() {
return {

View file

@ -1,5 +1,5 @@
<template>
<v-card flat class="pb-2">
<v-card color="background" flat class="pb-2">
<v-card-title class="headline py-0">
<v-icon v-if="icon !== ''" left>
{{ icon }}

View file

@ -1,6 +1,6 @@
<template>
<v-app dark>
<!-- <TheSnackbar /> -->
<TheSnackbar />
<AppSidebar
v-model="sidebar"
@ -35,6 +35,16 @@
</template>
</v-list>
</v-menu>
<template #bottom>
<v-list-item @click="toggleDark">
<v-list-item-icon>
<v-icon>
{{ $vuetify.theme.dark ? $globals.icons.weatherSunny : $globals.icons.weatherNight }}
</v-icon>
</v-list-item-icon>
<v-list-item-title> {{ $vuetify.theme.dark ? "Light Mode" : "Dark Mode" }} </v-list-item-title>
</v-list-item>
</template>
</AppSidebar>
<AppHeader>
@ -55,19 +65,25 @@
import { computed, defineComponent, useContext } from "@nuxtjs/composition-api";
import AppHeader from "@/components/Layout/AppHeader.vue";
import AppSidebar from "@/components/Layout/AppSidebar.vue";
import TheSnackbar from "@/components/Layout/TheSnackbar.vue";
import { useCookbooks } from "~/composables/use-group-cookbooks";
export default defineComponent({
components: { AppHeader, AppSidebar },
components: { AppHeader, AppSidebar, TheSnackbar },
// @ts-ignore
middleware: "auth",
setup() {
const { cookbooks } = useCookbooks();
// @ts-ignore
const { $globals, $auth } = useContext();
const { $globals, $auth, $vuetify } = useContext();
const isAdmin = computed(() => $auth.user?.admin);
function toggleDark() {
$vuetify.theme.dark = !$vuetify.theme.dark;
console.log("toggleDark");
}
const cookbookLinks = computed(() => {
if (!cookbooks.value) return [];
return cookbooks.value.map((cookbook) => {
@ -78,7 +94,7 @@ export default defineComponent({
};
});
});
return { cookbookLinks, isAdmin };
return { cookbookLinks, isAdmin, toggleDark };
},
data() {
return {

View file

@ -201,10 +201,16 @@ export default {
publicRuntimeConfig: {
GLOBAL_MIDDLEWARE: process.env.GLOBAL_MIDDLEWARE || null,
ALLOW_SIGNUP: process.env.ALLOW_SIGNUP || true,
envProps: {
allowSignup: process.env.ALLOW_SIGNUP || true,
},
SUB_PATH: process.env.SUB_PATH || "",
axios: {
browserBaseURL: process.env.SUB_PATH || "",
},
// ==============================================
// Theme Runtime Config
useDark: process.env.THEME_USE_DARK || false,
themes: {
dark: {
primary: process.env.THEME_DARK_PRIMARY || "#E58325",
@ -214,6 +220,7 @@ export default {
info: process.env.THEME_DARK_INFO || "#1976d2",
warning: process.env.THEME_DARK_WARNING || "#FF6D00",
error: process.env.THEME_DARK_ERROR || "#EF5350",
background: "#202021",
},
light: {
primary: process.env.THEME_LIGHT_PRIMARY || "#007A99",

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

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

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

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

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),

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"

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')"

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"

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;

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");
}
}

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>

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>

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>

View file

@ -1,3 +1,7 @@
export default ({ $vuetify, $config }: any) => {
$vuetify.theme.themes = $config.themes;
if ($config.useDark) {
$vuetify.theme.dark = true;
}
};

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 36 KiB

View file

@ -34,6 +34,9 @@ export interface GroupInDB {
shoppingLists?: ShoppingListOut[];
}
export interface UserOut {
canOrganize: boolean;
canManage: boolean;
canInvite: boolean;
username?: string;
fullName?: string;
email: string;