mirror of
https://github.com/mealie-recipes/mealie.git
synced 2025-08-05 05:25:26 +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:
Hayden
GitHub
parent
3c504e7048
commit
bdaf758712
90 changed files with 1793 additions and 949 deletions
|
|
@ -4,13 +4,15 @@ import { GroupInDB } from "~/types/api-types/user";
|
|||
const prefix = "/api";
|
||||
|
||||
const routes = {
|
||||
groups: `${prefix}/groups`,
|
||||
groups: `${prefix}/admin/groups`,
|
||||
groupsSelf: `${prefix}/groups/self`,
|
||||
categories: `${prefix}/groups/categories`,
|
||||
|
||||
preferences: `${prefix}/groups/preferences`,
|
||||
|
||||
groupsId: (id: string | number) => `${prefix}/groups/${id}`,
|
||||
invitation: `${prefix}/groups/invitations`,
|
||||
|
||||
groupsId: (id: string | number) => `${prefix}/admin/groups/${id}`,
|
||||
};
|
||||
|
||||
interface Category {
|
||||
|
|
@ -44,6 +46,16 @@ export interface Group extends CreateGroup {
|
|||
preferences: Preferences;
|
||||
}
|
||||
|
||||
export interface CreateInvitation {
|
||||
uses: number;
|
||||
}
|
||||
|
||||
export interface Invitation {
|
||||
group_id: number;
|
||||
token: string;
|
||||
uses_left: number;
|
||||
}
|
||||
|
||||
export class GroupAPI extends BaseCRUDAPI<GroupInDB, CreateGroup> {
|
||||
baseRoute = routes.groups;
|
||||
itemRoute = routes.groupsId;
|
||||
|
|
@ -68,4 +80,8 @@ export class GroupAPI extends BaseCRUDAPI<GroupInDB, CreateGroup> {
|
|||
async setPreferences(payload: UpdatePreferences) {
|
||||
return await this.requests.put<Preferences>(routes.preferences, payload);
|
||||
}
|
||||
|
||||
async createInvitation(payload: CreateInvitation) {
|
||||
return await this.requests.post<Invitation>(routes.invitation, payload);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,82 +1,80 @@
|
|||
<template>
|
||||
<div>
|
||||
<section>
|
||||
<h2 class="mb-4">{{ $t("recipe.instructions") }}</h2>
|
||||
<div>
|
||||
<draggable
|
||||
:disabled="!edit"
|
||||
:value="value"
|
||||
handle=".handle"
|
||||
@input="updateIndex"
|
||||
@start="drag = true"
|
||||
@end="drag = false"
|
||||
>
|
||||
<div v-for="(step, index) in value" :key="index">
|
||||
<v-app-bar v-if="showTitleEditor[index]" class="primary mx-1 mt-6" dark dense rounded>
|
||||
<v-toolbar-title v-if="!edit" class="headline">
|
||||
<v-app-bar-title v-text="step.title"> </v-app-bar-title>
|
||||
</v-toolbar-title>
|
||||
<v-text-field
|
||||
v-if="edit"
|
||||
v-model="step.title"
|
||||
class="headline pa-0 mt-5"
|
||||
dense
|
||||
solo
|
||||
flat
|
||||
:placeholder="$t('recipe.section-title')"
|
||||
background-color="primary"
|
||||
>
|
||||
</v-text-field>
|
||||
</v-app-bar>
|
||||
<v-hover v-slot="{ hover }">
|
||||
<v-card
|
||||
class="ma-1"
|
||||
:class="[{ 'on-hover': hover }, isChecked(index)]"
|
||||
:elevation="hover ? 12 : 2"
|
||||
:ripple="false"
|
||||
@click="toggleDisabled(index)"
|
||||
>
|
||||
<v-card-title :class="{ 'pb-0': !isChecked(index) }">
|
||||
<v-btn
|
||||
v-if="edit"
|
||||
fab
|
||||
x-small
|
||||
color="white"
|
||||
class="mr-2"
|
||||
elevation="0"
|
||||
@click="removeByIndex(value, index)"
|
||||
>
|
||||
<v-icon size="24" color="error">{{ $globals.icons.delete }}</v-icon>
|
||||
</v-btn>
|
||||
<draggable
|
||||
:disabled="!edit"
|
||||
:value="value"
|
||||
handle=".handle"
|
||||
@input="updateIndex"
|
||||
@start="drag = true"
|
||||
@end="drag = false"
|
||||
>
|
||||
<div v-for="(step, index) in value" :key="index">
|
||||
<v-app-bar v-if="showTitleEditor[index]" class="primary mx-1 mt-6" dark dense rounded>
|
||||
<v-toolbar-title v-if="!edit" class="headline">
|
||||
<v-app-bar-title v-text="step.title"> </v-app-bar-title>
|
||||
</v-toolbar-title>
|
||||
<v-text-field
|
||||
v-if="edit"
|
||||
v-model="step.title"
|
||||
class="headline pa-0 mt-5"
|
||||
dense
|
||||
solo
|
||||
flat
|
||||
:placeholder="$t('recipe.section-title')"
|
||||
background-color="primary"
|
||||
>
|
||||
</v-text-field>
|
||||
</v-app-bar>
|
||||
<v-hover v-slot="{ hover }">
|
||||
<v-card
|
||||
class="ma-1"
|
||||
:class="[{ 'on-hover': hover }, isChecked(index)]"
|
||||
:elevation="hover ? 12 : 2"
|
||||
:ripple="false"
|
||||
@click="toggleDisabled(index)"
|
||||
>
|
||||
<v-card-title :class="{ 'pb-0': !isChecked(index) }">
|
||||
<v-btn
|
||||
v-if="edit"
|
||||
fab
|
||||
x-small
|
||||
color="white"
|
||||
class="mr-2"
|
||||
elevation="0"
|
||||
@click="removeByIndex(value, index)"
|
||||
>
|
||||
<v-icon size="24" color="error">{{ $globals.icons.delete }}</v-icon>
|
||||
</v-btn>
|
||||
|
||||
{{ $t("recipe.step-index", { step: index + 1 }) }}
|
||||
{{ $t("recipe.step-index", { step: index + 1 }) }}
|
||||
|
||||
<v-btn v-if="edit" text color="primary" class="ml-auto" @click="toggleShowTitle(index)">
|
||||
{{ !showTitleEditor[index] ? $t("recipe.insert-section") : $t("recipe.remove-section") }}
|
||||
</v-btn>
|
||||
<v-icon v-if="edit" class="handle">{{ $globals.icons.arrowUpDown }}</v-icon>
|
||||
<v-fade-transition>
|
||||
<v-icon v-show="isChecked(index)" size="24" class="ml-auto" color="success">
|
||||
{{ $globals.icons.checkboxMarkedCircle }}
|
||||
</v-icon>
|
||||
</v-fade-transition>
|
||||
</v-card-title>
|
||||
<v-card-text v-if="edit">
|
||||
<v-textarea :key="'instructions' + index" v-model="value[index]['text']" auto-grow dense rows="4">
|
||||
</v-textarea>
|
||||
</v-card-text>
|
||||
<v-expand-transition>
|
||||
<div v-show="!isChecked(index) && !edit" class="m-0 p-0">
|
||||
<v-card-text>
|
||||
<VueMarkdown :source="step.text"> </VueMarkdown>
|
||||
</v-card-text>
|
||||
</div>
|
||||
</v-expand-transition>
|
||||
</v-card>
|
||||
</v-hover>
|
||||
</div>
|
||||
</draggable>
|
||||
</div>
|
||||
</div>
|
||||
<v-btn v-if="edit" text color="primary" class="ml-auto" @click="toggleShowTitle(index)">
|
||||
{{ !showTitleEditor[index] ? $t("recipe.insert-section") : $t("recipe.remove-section") }}
|
||||
</v-btn>
|
||||
<v-icon v-if="edit" class="handle">{{ $globals.icons.arrowUpDown }}</v-icon>
|
||||
<v-fade-transition>
|
||||
<v-icon v-show="isChecked(index)" size="24" class="ml-auto" color="success">
|
||||
{{ $globals.icons.checkboxMarkedCircle }}
|
||||
</v-icon>
|
||||
</v-fade-transition>
|
||||
</v-card-title>
|
||||
<v-card-text v-if="edit">
|
||||
<v-textarea :key="'instructions' + index" v-model="value[index]['text']" auto-grow dense rows="4">
|
||||
</v-textarea>
|
||||
</v-card-text>
|
||||
<v-expand-transition>
|
||||
<div v-show="!isChecked(index) && !edit" class="m-0 p-0">
|
||||
<v-card-text>
|
||||
<VueMarkdown :source="step.text"> </VueMarkdown>
|
||||
</v-card-text>
|
||||
</div>
|
||||
</v-expand-transition>
|
||||
</v-card>
|
||||
</v-hover>
|
||||
</div>
|
||||
</draggable>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
|
|||
18
frontend/composables/use-router.ts
Normal file
18
frontend/composables/use-router.ts
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
import { useRoute, WritableComputedRef, computed } from "@nuxtjs/composition-api";
|
||||
|
||||
export function useRouterQuery(query: string) {
|
||||
const router = useRoute();
|
||||
// TODO FUTURE: Remove when migrating to Vue 3
|
||||
|
||||
const param: WritableComputedRef<string> = computed({
|
||||
get(): string {
|
||||
// @ts-ignore
|
||||
return router.value?.query[query] || "";
|
||||
},
|
||||
set(v: string): void {
|
||||
router.value.query[query] = v;
|
||||
},
|
||||
});
|
||||
|
||||
return param;
|
||||
}
|
||||
|
|
@ -452,6 +452,7 @@
|
|||
"error-cannot-delete-super-user": "Error! Cannot Delete Super User",
|
||||
"existing-password-does-not-match": "Existing password does not match",
|
||||
"full-name": "Full Name",
|
||||
"invite-only": "Invite Only",
|
||||
"link-id": "Link ID",
|
||||
"link-name": "Link Name",
|
||||
"login": "Login",
|
||||
|
|
@ -459,30 +460,31 @@
|
|||
"manage-users": "Manage Users",
|
||||
"new-password": "New Password",
|
||||
"new-user": "New User",
|
||||
"password": "Password",
|
||||
"password-has-been-reset-to-the-default-password": "Password has been reset to the default password",
|
||||
"password-must-match": "Password must match",
|
||||
"password-reset-failed": "Password reset failed",
|
||||
"password-updated": "Password updated",
|
||||
"password": "Password",
|
||||
"register": "Register",
|
||||
"reset-password": "Reset Password",
|
||||
"sign-in": "Sign in",
|
||||
"total-mealplans": "Total MealPlans",
|
||||
"total-users": "Total Users",
|
||||
"upload-photo": "Upload Photo",
|
||||
"use-8-characters-or-more-for-your-password": "Use 8 characters or more for your password",
|
||||
"user": "User",
|
||||
"user-created": "User created",
|
||||
"user-creation-failed": "User creation failed",
|
||||
"user-deleted": "User deleted",
|
||||
"user-id": "User ID",
|
||||
"user-id-with-value": "User ID: {id}",
|
||||
"user-id": "User ID",
|
||||
"user-password": "User Password",
|
||||
"user-successfully-logged-in": "User Successfully Logged In",
|
||||
"user-update-failed": "User update failed",
|
||||
"user-updated": "User updated",
|
||||
"user": "User",
|
||||
"username": "Username",
|
||||
"users": "Users",
|
||||
"users-header": "USERS",
|
||||
"users": "Users",
|
||||
"webhook-time": "Webhook Time",
|
||||
"webhooks-enabled": "Webhooks Enabled",
|
||||
"you-are-not-allowed-to-create-a-user": "You are not allowed to create a user",
|
||||
|
|
|
|||
|
|
@ -40,6 +40,7 @@ export default {
|
|||
// https://go.nuxtjs.dev/typescript
|
||||
"@nuxt/typescript-build",
|
||||
// https://go.nuxtjs.dev/vuetify
|
||||
// https://go.nuxtjs.dev/vuetify
|
||||
"@nuxtjs/vuetify",
|
||||
// https://composition-api.nuxtjs.org/getting-started/setup
|
||||
"@nuxtjs/composition-api/module",
|
||||
|
|
@ -115,7 +116,7 @@ export default {
|
|||
|
||||
i18n: {
|
||||
locales: [
|
||||
// Auto Generated from "generate_nuxt_locales.py"
|
||||
// CODE_GEN_ID: MESSAGE_LOCALES
|
||||
{ code: "el-GR", file: "el-GR.json" },
|
||||
{ code: "it-IT", file: "it-IT.json" },
|
||||
{ code: "ko-KR", file: "ko-KR.json" },
|
||||
|
|
@ -147,13 +148,14 @@ export default {
|
|||
{ code: "en-GB", file: "en-GB.json" },
|
||||
{ code: "fi-FI", file: "fi-FI.json" },
|
||||
{ code: "vi-VN", file: "vi-VN.json" },
|
||||
// END: MESSAGE_LOCALES
|
||||
],
|
||||
lazy: true,
|
||||
langDir: "lang/messages",
|
||||
defaultLocale: "en-US",
|
||||
vueI18n: {
|
||||
dateTimeFormats: {
|
||||
// Auto Generated from "generate_nuxt_locales.py"
|
||||
// CODE_GEN_ID: DATE_LOCALES
|
||||
"el-GR": require("./lang/dateTimeFormats/el-GR.json"),
|
||||
"it-IT": require("./lang/dateTimeFormats/it-IT.json"),
|
||||
"ko-KR": require("./lang/dateTimeFormats/ko-KR.json"),
|
||||
|
|
@ -185,6 +187,7 @@ export default {
|
|||
"en-GB": require("./lang/dateTimeFormats/en-GB.json"),
|
||||
"fi-FI": require("./lang/dateTimeFormats/fi-FI.json"),
|
||||
"vi-VN": require("./lang/dateTimeFormats/vi-VN.json"),
|
||||
// END: DATE_LOCALES
|
||||
},
|
||||
},
|
||||
fallbackLocale: "es",
|
||||
|
|
|
|||
|
|
@ -37,6 +37,7 @@
|
|||
"@nuxtjs/eslint-config-typescript": "^6.0.1",
|
||||
"@nuxtjs/eslint-module": "^3.0.2",
|
||||
"@nuxtjs/vuetify": "^1.12.1",
|
||||
"@vue/runtime-dom": "^3.2.9",
|
||||
"eslint": "^7.29.0",
|
||||
"eslint-config-prettier": "^8.3.0",
|
||||
"eslint-plugin-nuxt": "^2.0.0",
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -94,6 +94,7 @@ import {
|
|||
mdiFolderZipOutline,
|
||||
mdiFoodApple,
|
||||
mdiBeakerOutline,
|
||||
mdiArrowLeftBoldOutline,
|
||||
} from "@mdi/js";
|
||||
|
||||
const icons = {
|
||||
|
|
@ -184,6 +185,7 @@ const icons = {
|
|||
zip: mdiFolderZipOutline,
|
||||
|
||||
// Crud
|
||||
backArrow: mdiArrowLeftBoldOutline,
|
||||
createAlt: mdiPlus,
|
||||
create: mdiPlusCircle,
|
||||
delete: mdiDelete,
|
||||
|
|
|
|||
|
|
@ -18,5 +18,8 @@
|
|||
},
|
||||
"types": ["@nuxt/types", "@nuxtjs/axios", "@types/node", "@nuxtjs/i18n", "@nuxtjs/auth-next"]
|
||||
},
|
||||
"exclude": ["node_modules", ".nuxt", "dist"]
|
||||
"exclude": ["node_modules", ".nuxt", "dist"],
|
||||
"vueCompilerOptions": {
|
||||
"experimentalCompatMode": 2
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
import { TranslateResult } from "vue-i18n";
|
||||
|
||||
export interface SideBarLink {
|
||||
icon: string
|
||||
to: string
|
||||
title: TranslateResult
|
||||
icon: string;
|
||||
to: string;
|
||||
title: TranslateResult;
|
||||
}
|
||||
|
||||
export type SidebarLinks = Array<SideBarLink>
|
||||
export type SidebarLinks = Array<SideBarLink>;
|
||||
|
|
|
|||
49
frontend/types/components.d.ts
vendored
Normal file
49
frontend/types/components.d.ts
vendored
Normal file
|
|
@ -0,0 +1,49 @@
|
|||
// This Code is auto generated by gen_global_componenets.py
|
||||
import BaseCardSectionTitle from "@/components/global/BaseCardSectionTitle.vue";
|
||||
import AppLoader from "@/components/global/AppLoader.vue";
|
||||
import BaseButton from "@/components/global/BaseButton.vue";
|
||||
import BaseDialog from "@/components/global/BaseDialog.vue";
|
||||
import BaseStatCard from "@/components/global/BaseStatCard.vue";
|
||||
import ToggleState from "@/components/global/ToggleState.vue";
|
||||
import AppButtonCopy from "@/components/global/AppButtonCopy.vue";
|
||||
import BaseColorPicker from "@/components/global/BaseColorPicker.vue";
|
||||
import BaseDivider from "@/components/global/BaseDivider.vue";
|
||||
import AutoForm from "@/components/global/AutoForm.vue";
|
||||
import AppButtonUpload from "@/components/global/AppButtonUpload.vue";
|
||||
import BasePageTitle from "@/components/global/BasePageTitle.vue";
|
||||
import BaseAutoForm from "@/components/global/BaseAutoForm.vue";
|
||||
|
||||
import TheSnackbar from "@/components/layout/TheSnackbar.vue";
|
||||
import AppFloatingButton from "@/components/layout/AppFloatingButton.vue";
|
||||
import AppHeader from "@/components/layout/AppHeader.vue";
|
||||
import AppSidebar from "@/components/layout/AppSidebar.vue";
|
||||
import AppFooter from "@/components/layout/AppFooter.vue";
|
||||
|
||||
|
||||
declare module "vue" {
|
||||
export interface GlobalComponents {
|
||||
// Global Components
|
||||
BaseCardSectionTitle: typeof BaseCardSectionTitle;
|
||||
AppLoader: typeof AppLoader;
|
||||
BaseButton: typeof BaseButton;
|
||||
BaseDialog: typeof BaseDialog;
|
||||
BaseStatCard: typeof BaseStatCard;
|
||||
ToggleState: typeof ToggleState;
|
||||
AppButtonCopy: typeof AppButtonCopy;
|
||||
BaseColorPicker: typeof BaseColorPicker;
|
||||
BaseDivider: typeof BaseDivider;
|
||||
AutoForm: typeof AutoForm;
|
||||
AppButtonUpload: typeof AppButtonUpload;
|
||||
BasePageTitle: typeof BasePageTitle;
|
||||
BaseAutoForm: typeof BaseAutoForm;
|
||||
// Layout Components
|
||||
TheSnackbar: typeof TheSnackbar;
|
||||
AppFloatingButton: typeof AppFloatingButton;
|
||||
AppHeader: typeof AppHeader;
|
||||
AppSidebar: typeof AppSidebar;
|
||||
AppFooter: typeof AppFooter;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
export {};
|
||||
7
frontend/types/index.d.ts
vendored
Normal file
7
frontend/types/index.d.ts
vendored
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
import Auth from "@nuxtjs/auth-next/dist/core/auth";
|
||||
|
||||
declare module "vue/types/vue" {
|
||||
interface Vue {
|
||||
$auth: Auth;
|
||||
}
|
||||
}
|
||||
|
|
@ -2097,6 +2097,13 @@
|
|||
dependencies:
|
||||
tslib "^2.3.0"
|
||||
|
||||
"@vue/reactivity@3.2.9":
|
||||
version "3.2.9"
|
||||
resolved "https://registry.yarnpkg.com/@vue/reactivity/-/reactivity-3.2.9.tgz#f4ec61519f4779224d98a23ac07b481d95687cae"
|
||||
integrity sha512-V0me78KlETt/9u3S9BoViEZNCFr/fDWodLq/KqYbFj+YySnCDD0clmjgBSQvIM63D+z3iUXftJyv08vAjlWrvw==
|
||||
dependencies:
|
||||
"@vue/shared" "3.2.9"
|
||||
|
||||
"@vue/ref-transform@^3.2.6":
|
||||
version "3.2.8"
|
||||
resolved "https://registry.yarnpkg.com/@vue/ref-transform/-/ref-transform-3.2.8.tgz#a527047bab43ce50ef3d400ce71312ab30f825dc"
|
||||
|
|
@ -2108,11 +2115,33 @@
|
|||
estree-walker "^2.0.2"
|
||||
magic-string "^0.25.7"
|
||||
|
||||
"@vue/runtime-core@3.2.9":
|
||||
version "3.2.9"
|
||||
resolved "https://registry.yarnpkg.com/@vue/runtime-core/-/runtime-core-3.2.9.tgz#32854c9d9853aa2075fcecfc762b5f033a6bae1e"
|
||||
integrity sha512-CaSjy/kBrSFtSwyW2sY7RTN5YGmcDg8xLzKmFmIrkI9AXv/YjViQjSKUNHTAhnGq0K739vhFO4r3meBNEWqiOw==
|
||||
dependencies:
|
||||
"@vue/reactivity" "3.2.9"
|
||||
"@vue/shared" "3.2.9"
|
||||
|
||||
"@vue/runtime-dom@^3.2.9":
|
||||
version "3.2.9"
|
||||
resolved "https://registry.yarnpkg.com/@vue/runtime-dom/-/runtime-dom-3.2.9.tgz#397572a142db2772fb4b7f0a2bc06b5486e5db81"
|
||||
integrity sha512-Vi8eOaP7/8NYSWIl8/klPtkiI+IQq/gPAI77U7PVoJ22tTcK/+9IIrMEN2TD+jUkHTRRIymMECEv+hWQT1Mo1g==
|
||||
dependencies:
|
||||
"@vue/runtime-core" "3.2.9"
|
||||
"@vue/shared" "3.2.9"
|
||||
csstype "^2.6.8"
|
||||
|
||||
"@vue/shared@3.2.8", "@vue/shared@^3.2.4", "@vue/shared@^3.2.6":
|
||||
version "3.2.8"
|
||||
resolved "https://registry.yarnpkg.com/@vue/shared/-/shared-3.2.8.tgz#2f918e330aeb3f56ab1031ca60a5b30672512457"
|
||||
integrity sha512-E2DQQnG7Qr4GwTs3GlfPPlHliGVADoufTnhpwfoViw7JlyLMmYtjfnTwM6nXAwvSJWiF7D+7AxpnWBBT3VWo6Q==
|
||||
|
||||
"@vue/shared@3.2.9":
|
||||
version "3.2.9"
|
||||
resolved "https://registry.yarnpkg.com/@vue/shared/-/shared-3.2.9.tgz#44e44dbd82819997f192fb7dbdb90af5715dbf52"
|
||||
integrity sha512-+CifxkLVhjKT14g/LMZil8//SdCzkMkS8VfRX0cqNJiFKK4AWvxj0KV1dhbr8czikY0DZUGQew3tRMRRChMGtA==
|
||||
|
||||
"@vueuse/core@^5.2.0":
|
||||
version "5.3.0"
|
||||
resolved "https://registry.yarnpkg.com/@vueuse/core/-/core-5.3.0.tgz#d8c6e939e18089afa224fab6e443fae2bdb57a51"
|
||||
|
|
@ -4174,6 +4203,11 @@ csso@^4.0.2:
|
|||
dependencies:
|
||||
css-tree "^1.1.2"
|
||||
|
||||
csstype@^2.6.8:
|
||||
version "2.6.17"
|
||||
resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.6.17.tgz#4cf30eb87e1d1a005d8b6510f95292413f6a1c0e"
|
||||
integrity sha512-u1wmTI1jJGzCJzWndZo8mk4wnPTZd1eOIYTYvuEyOQGfmDl3TrabCCfKnOC86FZwW/9djqTl933UF/cS425i9A==
|
||||
|
||||
cuint@^0.2.2:
|
||||
version "0.2.2"
|
||||
resolved "https://registry.yarnpkg.com/cuint/-/cuint-0.2.2.tgz#408086d409550c2631155619e9fa7bcadc3b991b"
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue