mirror of
https://github.com/mealie-recipes/mealie.git
synced 2025-08-05 13:35:23 +02:00
feat(backend): ✨ start multi-tenant support (WIP) (#680)
* fix ts types * feat(code-generation): ♻️ update code-generation formats * new scope * add step button * fix linter error * update code-generation tags * feat(backend): ✨ start multi-tenant support * feat(backend): ✨ group invitation token generation and signup * refactor(backend): ♻️ move group admin actions to admin router * set url base to include `/admin` * feat(frontend): ✨ generate user sign-up links * test(backend): ✅ refactor test-suite to further decouple tests (WIP) * feat(backend): 🐛 assign owner on backup import for recipes * fix(backend): 🐛 assign recipe owner on migration from other service Co-authored-by: hay-kot <hay-kot@pm.me>
This commit is contained in:
parent
3c504e7048
commit
bdaf758712
90 changed files with 1793 additions and 949 deletions
|
@ -174,50 +174,44 @@
|
|||
type="password"
|
||||
/>
|
||||
<v-btn :loading="loggingIn" color="primary" type="submit" large rounded class="rounded-xl" block>
|
||||
Login
|
||||
{{ $t("user.login") }}
|
||||
</v-btn>
|
||||
</v-form>
|
||||
</v-card-text>
|
||||
<v-btn v-if="$config.ALLOW_SIGNUP" class="mx-auto" text to="/register"> Register </v-btn>
|
||||
<v-btn v-else class="mx-auto" text disabled> Invite Only </v-btn>
|
||||
<v-btn v-if="allowSignup" class="mx-auto" text to="/register"> {{ $t("user.register") }} </v-btn>
|
||||
<v-btn v-else class="mx-auto" text disabled> {{ $t("user.invite-only") }} </v-btn>
|
||||
</v-card>
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from "@nuxtjs/composition-api";
|
||||
<script lang="ts" setup>
|
||||
import { defineComponent, ref, useContext } from "@nuxtjs/composition-api";
|
||||
import { computed, reactive } from "@vue/reactivity";
|
||||
|
||||
const { $auth } = useContext();
|
||||
|
||||
const form = reactive({
|
||||
email: "changeme@email.com",
|
||||
password: "MyPassword",
|
||||
});
|
||||
|
||||
const loggingIn = ref(false);
|
||||
|
||||
const allowSignup = computed(() => process.env.ALLOW_SIGNUP);
|
||||
|
||||
async function authenticate() {
|
||||
loggingIn.value = true;
|
||||
const formData = new FormData();
|
||||
formData.append("username", form.email);
|
||||
formData.append("password", form.password);
|
||||
|
||||
await $auth.loginWith("local", { data: formData });
|
||||
loggingIn.value = false;
|
||||
}
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export default defineComponent({
|
||||
layout: "basic",
|
||||
setup() {
|
||||
return {};
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
loggingIn: false,
|
||||
form: {
|
||||
email: "changeme@email.com",
|
||||
password: "MyPassword",
|
||||
},
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
allowSignup(): boolean {
|
||||
// @ts-ignore
|
||||
return process.env.ALLOW_SIGNUP;
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
async authenticate() {
|
||||
this.loggingIn = true;
|
||||
const formData = new FormData();
|
||||
formData.append("username", this.form.email);
|
||||
formData.append("password", this.form.password);
|
||||
|
||||
await this.$auth.loginWith("local", { data: formData });
|
||||
this.loggingIn = false;
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
</script>
|
||||
|
|
|
@ -222,6 +222,9 @@
|
|||
|
||||
<v-col cols="12" sm="12" md="8" lg="8">
|
||||
<RecipeInstructions v-model="recipe.recipeInstructions" :edit="form" />
|
||||
<div class="d-flex">
|
||||
<BaseButton v-if="form" class="ml-auto my-2" @click="addStep()"> {{ $t("general.new") }}</BaseButton>
|
||||
</div>
|
||||
<RecipeNotes v-model="recipe.notes" :edit="form" />
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
@ -346,6 +349,22 @@ export default defineComponent({
|
|||
list.splice(index, 1);
|
||||
}
|
||||
|
||||
function addStep(steps: Array<string> | null = null) {
|
||||
if (!recipe.value?.recipeInstructions) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (steps) {
|
||||
const cleanedSteps = steps.map((step) => {
|
||||
return { text: step, title: "" };
|
||||
});
|
||||
|
||||
recipe.value.recipeInstructions.push(...cleanedSteps);
|
||||
} else {
|
||||
recipe.value.recipeInstructions.push({ text: "", title: "" });
|
||||
}
|
||||
}
|
||||
|
||||
function addIngredient(ingredients: Array<string> | null = null) {
|
||||
if (ingredients?.length) {
|
||||
const newIngredients = ingredients.map((x) => {
|
||||
|
@ -386,6 +405,7 @@ export default defineComponent({
|
|||
api,
|
||||
form,
|
||||
loading,
|
||||
addStep,
|
||||
deleteRecipe,
|
||||
updateRecipe,
|
||||
uploadImage,
|
||||
|
|
|
@ -4,41 +4,35 @@
|
|||
<v-card-title class="headline"> User Registration </v-card-title>
|
||||
<v-card-text>
|
||||
<v-form ref="domRegisterForm" @submit.prevent="register()">
|
||||
<ToggleState>
|
||||
<template #activator="{ toggle }">
|
||||
<div class="d-flex justify-center my-2">
|
||||
<v-btn-toggle tile mandatory group color="primary">
|
||||
<v-btn small @click="toggle(false)"> Create a Group </v-btn>
|
||||
<v-btn small @click="toggle(true)"> Join a Group </v-btn>
|
||||
</v-btn-toggle>
|
||||
</div>
|
||||
</template>
|
||||
<template #default="{ state }">
|
||||
<v-text-field
|
||||
v-if="!state"
|
||||
v-model="form.group"
|
||||
filled
|
||||
rounded
|
||||
autofocus
|
||||
validate-on-blur
|
||||
class="rounded-lg"
|
||||
:prepend-icon="$globals.icons.group"
|
||||
:rules="[tokenOrGroup]"
|
||||
label="New Group Name"
|
||||
/>
|
||||
<v-text-field
|
||||
v-else
|
||||
v-model="form.groupToken"
|
||||
filled
|
||||
rounded
|
||||
validate-on-blur
|
||||
:rules="[tokenOrGroup]"
|
||||
class="rounded-lg"
|
||||
:prepend-icon="$globals.icons.group"
|
||||
label="Group Token"
|
||||
/>
|
||||
</template>
|
||||
</ToggleState>
|
||||
<div class="d-flex justify-center my-2">
|
||||
<v-btn-toggle v-model="joinGroup" mandatory tile group color="primary">
|
||||
<v-btn :value="false" small @click="joinGroup = false"> Create a Group </v-btn>
|
||||
<v-btn :value="true" small @click="joinGroup = true"> Join a Group </v-btn>
|
||||
</v-btn-toggle>
|
||||
</div>
|
||||
<v-text-field
|
||||
v-if="!joinGroup"
|
||||
v-model="form.group"
|
||||
filled
|
||||
rounded
|
||||
autofocus
|
||||
validate-on-blur
|
||||
class="rounded-lg"
|
||||
:prepend-icon="$globals.icons.group"
|
||||
:rules="[tokenOrGroup]"
|
||||
label="New Group Name"
|
||||
/>
|
||||
<v-text-field
|
||||
v-else
|
||||
v-model="form.groupToken"
|
||||
filled
|
||||
rounded
|
||||
validate-on-blur
|
||||
:rules="[tokenOrGroup]"
|
||||
class="rounded-lg"
|
||||
:prepend-icon="$globals.icons.group"
|
||||
label="Group Token"
|
||||
/>
|
||||
<v-text-field
|
||||
v-model="form.email"
|
||||
filled
|
||||
|
@ -105,29 +99,42 @@
|
|||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { computed, defineComponent, reactive, toRefs, ref, useRouter } from "@nuxtjs/composition-api";
|
||||
import { computed, defineComponent, reactive, toRefs, ref, useRouter, watch } from "@nuxtjs/composition-api";
|
||||
import { validators } from "@/composables/use-validators";
|
||||
import { useApiSingleton } from "~/composables/use-api";
|
||||
import { alert } from "~/composables/use-toast";
|
||||
import { useRouterQuery } from "@/composables/use-router";
|
||||
|
||||
export default defineComponent({
|
||||
layout: "basic",
|
||||
setup() {
|
||||
const api = useApiSingleton();
|
||||
const state = reactive({
|
||||
joinGroup: false,
|
||||
loggingIn: false,
|
||||
success: false,
|
||||
});
|
||||
const allowSignup = computed(() => process.env.AllOW_SIGNUP);
|
||||
|
||||
const router = useRouter();
|
||||
const token = useRouterQuery("token");
|
||||
|
||||
watch(token, (newToken) => {
|
||||
if (newToken) {
|
||||
console.log(token);
|
||||
form.groupToken = newToken;
|
||||
}
|
||||
});
|
||||
|
||||
if (token) {
|
||||
state.joinGroup = true;
|
||||
}
|
||||
|
||||
// @ts-ignore
|
||||
const domRegisterForm = ref<VForm>(null);
|
||||
|
||||
const form = reactive({
|
||||
group: "",
|
||||
groupToken: "",
|
||||
groupToken: token,
|
||||
email: "",
|
||||
username: "",
|
||||
password: "",
|
||||
|
@ -139,23 +146,24 @@ export default defineComponent({
|
|||
const passwordMatch = () => form.password === form.passwordConfirm || "Passwords do not match";
|
||||
const tokenOrGroup = () => form.group !== "" || form.groupToken !== "" || "Group name or token must be given";
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
async function register() {
|
||||
if (!domRegisterForm.value?.validate()) {
|
||||
return;
|
||||
}
|
||||
|
||||
const { data, response } = await api.register.register(form);
|
||||
const { response } = await api.register.register(form);
|
||||
|
||||
if (response?.status === 201) {
|
||||
state.success = true;
|
||||
alert.success("Registration Success");
|
||||
router.push("/user/login");
|
||||
}
|
||||
|
||||
console.log(data, response);
|
||||
}
|
||||
|
||||
return {
|
||||
token,
|
||||
domRegisterForm,
|
||||
validators,
|
||||
allowSignup,
|
||||
|
|
|
@ -5,8 +5,10 @@
|
|||
<v-img max-height="200" max-width="200" class="mb-2" :src="require('~/static/svgs/manage-profile.svg')"></v-img>
|
||||
</template>
|
||||
<template #title> Your Profile Settings </template>
|
||||
Some text here...
|
||||
</BasePageTitle>
|
||||
|
||||
|
||||
|
||||
<section>
|
||||
<ToggleState tag="article">
|
||||
<template #activator="{ toggle, state }">
|
||||
|
@ -19,9 +21,8 @@
|
|||
{{ $t("settings.profile") }}
|
||||
</v-btn>
|
||||
</template>
|
||||
|
||||
<template #default="{ state }">
|
||||
<v-slide-x-transition group mode="in" hide-on-leave>
|
||||
<v-slide-x-transition>
|
||||
<div v-if="!state" key="personal-info">
|
||||
<BaseCardSectionTitle class="mt-10" title="Personal Information"> </BaseCardSectionTitle>
|
||||
<v-card tag="article" outlined>
|
||||
|
@ -90,8 +91,14 @@
|
|||
label="Show advanced features (API Keys, Webhooks, and Data Management)"
|
||||
@change="updateUser"
|
||||
></v-checkbox>
|
||||
<div class="d-flex justify-center mt-5">
|
||||
<v-btn outlined class="rounded-xl" to="/user/group"> Looking for Privacy Settings? </v-btn>
|
||||
<div class="d-flex flex-wrap justify-center mt-5">
|
||||
<v-btn outlined class="rounded-xl my-1 mx-1" to="/user/profile" nuxt exact>
|
||||
<v-icon left>
|
||||
{{ $globals.icons.backArrow }}
|
||||
</v-icon>
|
||||
Back to Profile
|
||||
</v-btn>
|
||||
<v-btn outlined class="rounded-xl my-1 mx-1" to="/user/group"> Looking for Privacy Settings? </v-btn>
|
||||
</div>
|
||||
</section>
|
||||
</v-container>
|
||||
|
|
|
@ -9,6 +9,23 @@
|
|||
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-actions class="d-flex justify-center">
|
||||
<v-btn outlined rounded @click="getSignupLink()">
|
||||
<v-icon left>
|
||||
{{ $globals.icons.createAlt }}
|
||||
</v-icon>
|
||||
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>
|
||||
</v-card>
|
||||
</section>
|
||||
<section>
|
||||
<div>
|
||||
|
@ -21,7 +38,7 @@
|
|||
:link="{ text: 'Manage User Profile', to: '/user/profile/edit' }"
|
||||
:image="require('~/static/svgs/manage-profile.svg')"
|
||||
>
|
||||
<template #title> User Profile </template>
|
||||
<template #title> User Settings </template>
|
||||
Manage your preferences, change your password, and update your email
|
||||
</UserProfileLinkCard>
|
||||
</v-col>
|
||||
|
@ -78,8 +95,9 @@
|
|||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { computed, defineComponent, useContext } from "@nuxtjs/composition-api";
|
||||
import { computed, defineComponent, useContext, ref } from "@nuxtjs/composition-api";
|
||||
import UserProfileLinkCard from "@/components/Domain/User/UserProfileLinkCard.vue";
|
||||
import { useApiSingleton } from "~/composables/use-api";
|
||||
|
||||
export default defineComponent({
|
||||
components: {
|
||||
|
@ -88,7 +106,23 @@ export default defineComponent({
|
|||
setup() {
|
||||
const user = computed(() => useContext().$auth.user);
|
||||
|
||||
return { user };
|
||||
const generatedLink = ref("");
|
||||
|
||||
const api = useApiSingleton();
|
||||
|
||||
async function getSignupLink() {
|
||||
const { data } = await api.groups.createInvitation({ uses: 1 });
|
||||
|
||||
if (data) {
|
||||
generatedLink.value = constructLink(data.token);
|
||||
}
|
||||
}
|
||||
|
||||
function constructLink(token: string) {
|
||||
return `${window.location.origin}/register?token=${token}`;
|
||||
}
|
||||
|
||||
return { user, constructLink, generatedLink, getSignupLink };
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue