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:
parent
b7b8aa9a08
commit
5d43fac7c9
43 changed files with 652 additions and 106 deletions
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -121,6 +121,7 @@
|
|||
</v-list-item>
|
||||
</template>
|
||||
</v-list-item-group>
|
||||
<slot name="bottom"></slot>
|
||||
</v-list>
|
||||
</template>
|
||||
</v-navigation-drawer>
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -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 }}
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -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",
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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">
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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),
|
||||
|
|
|
@ -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"
|
||||
|
|
|
@ -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')"
|
||||
|
|
|
@ -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"
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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
113
frontend/pages/user/group/members.vue
Normal 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>
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -1,3 +1,7 @@
|
|||
export default ({ $vuetify, $config }: any) => {
|
||||
$vuetify.theme.themes = $config.themes;
|
||||
|
||||
if ($config.useDark) {
|
||||
$vuetify.theme.dark = true;
|
||||
}
|
||||
};
|
||||
|
|
1
frontend/static/svgs/manage-members.svg
Normal file
1
frontend/static/svgs/manage-members.svg
Normal file
File diff suppressed because one or more lines are too long
After Width: | Height: | Size: 36 KiB |
|
@ -34,6 +34,9 @@ export interface GroupInDB {
|
|||
shoppingLists?: ShoppingListOut[];
|
||||
}
|
||||
export interface UserOut {
|
||||
canOrganize: boolean;
|
||||
canManage: boolean;
|
||||
canInvite: boolean;
|
||||
username?: string;
|
||||
fullName?: string;
|
||||
email: string;
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue