mirror of
https://github.com/mealie-recipes/mealie.git
synced 2025-08-02 20:15:24 +02:00
feat: Migrate to Nuxt 3 framework (#5184)
Co-authored-by: Michael Genson <71845777+michael-genson@users.noreply.github.com> Co-authored-by: Kuchenpirat <24235032+Kuchenpirat@users.noreply.github.com>
This commit is contained in:
Hoa (Kyle) Trinh
GitHub
parent
89ab7fac25
commit
c24d532608
403 changed files with 23959 additions and 19557 deletions
|
|
@ -4,12 +4,29 @@
|
|||
:disabled="!user || !tooltip"
|
||||
right
|
||||
>
|
||||
<template #activator="{ on, attrs }">
|
||||
<v-list-item-avatar v-if="list" v-bind="attrs" v-on="on">
|
||||
<v-img :src="imageURL" :alt="userId" @load="error = false" @error="error = true"> </v-img>
|
||||
</v-list-item-avatar>
|
||||
<v-avatar v-else :size="size" v-bind="attrs" v-on="on">
|
||||
<v-img :src="imageURL" :alt="userId" @load="error = false" @error="error = true"> </v-img>
|
||||
<template #activator="{ props }">
|
||||
<v-avatar
|
||||
v-if="list"
|
||||
v-bind="props"
|
||||
>
|
||||
<v-img
|
||||
:src="imageURL"
|
||||
:alt="userId"
|
||||
@load="error = false"
|
||||
@error="error = true"
|
||||
/>
|
||||
</v-avatar>
|
||||
<v-avatar
|
||||
v-else
|
||||
:size="size"
|
||||
v-bind="props"
|
||||
>
|
||||
<v-img
|
||||
:src="imageURL"
|
||||
:alt="userId"
|
||||
@load="error = false"
|
||||
@error="error = true"
|
||||
/>
|
||||
</v-avatar>
|
||||
</template>
|
||||
<span v-if="user">
|
||||
|
|
@ -19,11 +36,9 @@
|
|||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, toRefs, reactive, useContext, computed } from "@nuxtjs/composition-api";
|
||||
import { useUserStore } from "~/composables/store/use-user-store";
|
||||
import { UserOut } from "~/lib/api/types/user";
|
||||
|
||||
export default defineComponent({
|
||||
export default defineNuxtComponent({
|
||||
props: {
|
||||
userId: {
|
||||
type: String,
|
||||
|
|
@ -40,22 +55,22 @@ export default defineComponent({
|
|||
tooltip: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
}
|
||||
},
|
||||
},
|
||||
setup(props) {
|
||||
const state = reactive({
|
||||
error: false,
|
||||
});
|
||||
|
||||
const { $auth } = useContext();
|
||||
const $auth = useMealieAuth();
|
||||
const { store: users } = useUserStore();
|
||||
const user = computed(() => {
|
||||
return users.value.find((user) => user.id === props.userId);
|
||||
})
|
||||
return users.value.find(user => user.id === props.userId);
|
||||
});
|
||||
|
||||
const imageURL = computed(() => {
|
||||
// TODO Setup correct user type for $auth.user
|
||||
const authUser = $auth.user as unknown as UserOut | null;
|
||||
// Note: $auth.user is a ref now
|
||||
const authUser = $auth.user.value;
|
||||
const key = authUser?.cacheKey ?? "";
|
||||
return `/api/media/users/${props.userId}/profile.webp?cacheKey=${key}`;
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,50 +1,63 @@
|
|||
<template>
|
||||
<BaseDialog
|
||||
v-model="inviteDialog"
|
||||
:title="$tc('profile.get-invite-link')"
|
||||
:title="$t('profile.get-invite-link')"
|
||||
:icon="$globals.icons.accountPlusOutline"
|
||||
color="primary">
|
||||
color="primary"
|
||||
>
|
||||
<v-container>
|
||||
<v-form class="mt-5">
|
||||
<v-select
|
||||
v-if="groups && groups.length"
|
||||
v-model="selectedGroup"
|
||||
:items="groups"
|
||||
item-text="name"
|
||||
item-title="name"
|
||||
item-value="id"
|
||||
:return-object="false"
|
||||
filled
|
||||
:label="$tc('group.user-group')"
|
||||
:rules="[validators.required]" />
|
||||
variant="filled"
|
||||
:label="$t('group.user-group')"
|
||||
:rules="[validators.required]"
|
||||
/>
|
||||
<v-select
|
||||
v-if="households && households.length"
|
||||
v-model="selectedHousehold"
|
||||
:items="filteredHouseholds"
|
||||
item-text="name" item-value="id"
|
||||
:return-object="false" filled
|
||||
:label="$tc('household.user-household')"
|
||||
:rules="[validators.required]" />
|
||||
item-title="name"
|
||||
item-value="id"
|
||||
:return-object="false"
|
||||
variant="filled"
|
||||
:label="$t('household.user-household')"
|
||||
:rules="[validators.required]"
|
||||
/>
|
||||
<v-row>
|
||||
<v-col cols="9">
|
||||
<v-text-field
|
||||
:label="$tc('profile.invite-link')"
|
||||
type="text" readonly filled
|
||||
:value="generatedSignupLink" />
|
||||
:label="$t('profile.invite-link')"
|
||||
type="text"
|
||||
readonly
|
||||
variant="filled"
|
||||
:value="generatedSignupLink"
|
||||
/>
|
||||
</v-col>
|
||||
<v-col cols="3" class="pl-1 mt-3">
|
||||
<v-col
|
||||
cols="3"
|
||||
class="pl-1 mt-3"
|
||||
>
|
||||
<AppButtonCopy
|
||||
:icon="false"
|
||||
color="info"
|
||||
:copy-text="generatedSignupLink"
|
||||
:disabled="generatedSignupLink" />
|
||||
:disabled="generatedSignupLink"
|
||||
/>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-text-field
|
||||
v-model="sendTo"
|
||||
:label="$t('user.email')"
|
||||
:rules="[validators.email]"
|
||||
outlined
|
||||
@keydown.enter="sendInvite" />
|
||||
variant="outlined"
|
||||
@keydown.enter="sendInvite"
|
||||
/>
|
||||
</v-form>
|
||||
</v-container>
|
||||
<template #custom-card-action>
|
||||
|
|
@ -52,15 +65,15 @@
|
|||
:disabled="!validEmail"
|
||||
:loading="loading"
|
||||
:icon="$globals.icons.email"
|
||||
@click="sendInvite">
|
||||
{{ $t("group.invite") }}
|
||||
@click="sendInvite"
|
||||
>
|
||||
{{ $t("group.invite") }}
|
||||
</BaseButton>
|
||||
</template>
|
||||
</BaseDialog>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { computed, defineComponent, useContext, ref, toRefs, reactive } from "@nuxtjs/composition-api";
|
||||
import { watchEffect } from "vue";
|
||||
import { useUserApi } from "@/composables/api";
|
||||
import BaseDialog from "~/components/global/BaseDialog.vue";
|
||||
|
|
@ -68,12 +81,12 @@ import AppButtonCopy from "~/components/global/AppButtonCopy.vue";
|
|||
import BaseButton from "~/components/global/BaseButton.vue";
|
||||
import { validators } from "~/composables/use-validators";
|
||||
import { alert } from "~/composables/use-toast";
|
||||
import { GroupInDB } from "~/lib/api/types/user";
|
||||
import { HouseholdInDB } from "~/lib/api/types/household";
|
||||
import type { GroupInDB } from "~/lib/api/types/user";
|
||||
import type { HouseholdInDB } from "~/lib/api/types/household";
|
||||
import { useGroups } from "~/composables/use-groups";
|
||||
import { useAdminHouseholds } from "~/composables/use-households";
|
||||
|
||||
export default defineComponent({
|
||||
export default defineNuxtComponent({
|
||||
name: "UserInviteDialog",
|
||||
components: {
|
||||
BaseDialog,
|
||||
|
|
@ -81,15 +94,17 @@ export default defineComponent({
|
|||
BaseButton,
|
||||
},
|
||||
props: {
|
||||
value: {
|
||||
modelValue: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
emits: ["update:modelValue"],
|
||||
setup(props, context) {
|
||||
const { $auth, i18n } = useContext();
|
||||
const i18n = useI18n();
|
||||
const $auth = useMealieAuth();
|
||||
|
||||
const isAdmin = computed(() => $auth.user?.admin);
|
||||
const isAdmin = computed(() => $auth.user.value?.admin);
|
||||
const token = ref("");
|
||||
const selectedGroup = ref<string | null>(null);
|
||||
const selectedHousehold = ref<string | null>(null);
|
||||
|
|
@ -98,7 +113,7 @@ export default defineComponent({
|
|||
const api = useUserApi();
|
||||
|
||||
const fetchGroupsAndHouseholds = () => {
|
||||
if (isAdmin) {
|
||||
if (isAdmin.value) {
|
||||
const groupsResponse = useGroups();
|
||||
const householdsResponse = useAdminHouseholds();
|
||||
watchEffect(() => {
|
||||
|
|
@ -110,10 +125,10 @@ export default defineComponent({
|
|||
|
||||
const inviteDialog = computed<boolean>({
|
||||
get() {
|
||||
return props.value;
|
||||
return props.modelValue;
|
||||
},
|
||||
set(val) {
|
||||
context.emit("input", val);
|
||||
context.emit("update:modelValue", val);
|
||||
},
|
||||
});
|
||||
|
||||
|
|
@ -156,9 +171,10 @@ export default defineComponent({
|
|||
});
|
||||
|
||||
if (data && data.success) {
|
||||
alert.success(i18n.tc("profile.email-sent"));
|
||||
} else {
|
||||
alert.error(i18n.tc("profile.error-sending-email"));
|
||||
alert.success(i18n.t("profile.email-sent"));
|
||||
}
|
||||
else {
|
||||
alert.error(i18n.t("profile.error-sending-email"));
|
||||
}
|
||||
state.loading = false;
|
||||
inviteDialog.value = false;
|
||||
|
|
@ -191,10 +207,11 @@ export default defineComponent({
|
|||
households,
|
||||
fetchGroupsAndHouseholds,
|
||||
...toRefs(state),
|
||||
isAdmin,
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
value: {
|
||||
modelValue: {
|
||||
immediate: false,
|
||||
handler(val) {
|
||||
if (val && !this.isAdmin) {
|
||||
|
|
|
|||
|
|
@ -13,19 +13,18 @@
|
|||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, toRef, useContext } from "@nuxtjs/composition-api";
|
||||
import { usePasswordStrength } from "~/composables/use-passwords";
|
||||
|
||||
export default defineComponent({
|
||||
export default defineNuxtComponent({
|
||||
props: {
|
||||
value: {
|
||||
modelValue: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
},
|
||||
setup(props) {
|
||||
const asRef = toRef(props, "value");
|
||||
const { i18n } = useContext();
|
||||
const asRef = toRef(props, "modelValue");
|
||||
const i18n = useI18n();
|
||||
|
||||
const pwStrength = usePasswordStrength(asRef, i18n);
|
||||
|
||||
|
|
|
|||
|
|
@ -1,55 +1,75 @@
|
|||
<template>
|
||||
<v-card outlined nuxt :to="link.to" height="100%" class="d-flex flex-column">
|
||||
<div v-if="$vuetify.breakpoint.smAndDown" class="pa-2 mx-auto">
|
||||
<v-img max-width="150px" max-height="125" :src="image" />
|
||||
<v-card
|
||||
variant="outlined"
|
||||
style="border-color: lightgrey;"
|
||||
:to="link.to"
|
||||
height="100%"
|
||||
class="d-flex flex-column mt-4"
|
||||
>
|
||||
<div
|
||||
v-if="$vuetify.display.smAndDown"
|
||||
class="pa-2 mx-auto"
|
||||
>
|
||||
<v-img
|
||||
width="150px"
|
||||
height="125"
|
||||
:src="image"
|
||||
/>
|
||||
</div>
|
||||
<div class="d-flex justify-space-between">
|
||||
<div>
|
||||
<v-card-title class="headline pb-0">
|
||||
<slot name="title"> </slot>
|
||||
<v-card-title class="text-subtitle-1 pb-0">
|
||||
<slot name="title" />
|
||||
</v-card-title>
|
||||
<div class="d-flex justify-center align-center">
|
||||
<v-card-text class="d-flex flex-row mb-auto">
|
||||
<slot name="default"></slot>
|
||||
<slot name="default" />
|
||||
</v-card-text>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="$vuetify.breakpoint.mdAndUp" class="py-2 px-10 my-auto">
|
||||
<v-img max-width="150px" max-height="125" :src="image"></v-img>
|
||||
<div
|
||||
v-if="$vuetify.display.mdAndUp"
|
||||
class="py-2 px-10 my-auto"
|
||||
>
|
||||
<v-img
|
||||
width="150px"
|
||||
height="125"
|
||||
:src="image"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<v-divider class="mt-auto"></v-divider>
|
||||
<v-spacer />
|
||||
<v-divider />
|
||||
<v-card-actions>
|
||||
<v-btn text color="info" :to="link.to">
|
||||
<v-btn
|
||||
variant="text"
|
||||
color="info"
|
||||
:to="link.to"
|
||||
>
|
||||
{{ link.text }}
|
||||
</v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from "@nuxtjs/composition-api";
|
||||
|
||||
<script lang="ts" setup>
|
||||
interface LinkProp {
|
||||
text: string;
|
||||
url?: string;
|
||||
to: string;
|
||||
}
|
||||
|
||||
export default defineComponent({
|
||||
props: {
|
||||
link: {
|
||||
type: Object as () => LinkProp,
|
||||
required: true,
|
||||
},
|
||||
image: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: "",
|
||||
},
|
||||
const props = defineProps({
|
||||
link: {
|
||||
type: Object as () => LinkProp,
|
||||
required: true,
|
||||
},
|
||||
setup() {
|
||||
return {};
|
||||
image: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: "",
|
||||
},
|
||||
});
|
||||
|
||||
console.log("Props", props);
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,17 +1,25 @@
|
|||
<template>
|
||||
<div>
|
||||
<v-card-title>
|
||||
<v-icon large class="mr-3"> {{ $globals.icons.user }}</v-icon>
|
||||
<v-icon
|
||||
size="large"
|
||||
class="mr-3"
|
||||
>
|
||||
{{ $globals.icons.user }}
|
||||
</v-icon>
|
||||
<span class="headline"> {{ $t("user-registration.account-details") }}</span>
|
||||
</v-card-title>
|
||||
<v-divider />
|
||||
<v-card-text>
|
||||
<v-form ref="domAccountForm" @submit.prevent>
|
||||
<v-form
|
||||
ref="domAccountForm"
|
||||
@submit.prevent
|
||||
>
|
||||
<v-text-field
|
||||
v-model="accountDetails.username.value"
|
||||
autofocus
|
||||
v-bind="inputAttrs"
|
||||
:label="$tc('user.username')"
|
||||
:label="$t('user.username')"
|
||||
:prepend-icon="$globals.icons.user"
|
||||
:rules="[validators.required]"
|
||||
:error-messages="usernameErrorMessages"
|
||||
|
|
@ -20,7 +28,7 @@
|
|||
<v-text-field
|
||||
v-model="accountDetails.fullName.value"
|
||||
v-bind="inputAttrs"
|
||||
:label="$tc('user.full-name')"
|
||||
:label="$t('user.full-name')"
|
||||
:prepend-icon="$globals.icons.user"
|
||||
:rules="[validators.required]"
|
||||
/>
|
||||
|
|
@ -28,7 +36,7 @@
|
|||
v-model="accountDetails.email.value"
|
||||
v-bind="inputAttrs"
|
||||
:prepend-icon="$globals.icons.email"
|
||||
:label="$tc('user.email')"
|
||||
:label="$t('user.email')"
|
||||
:rules="[validators.required, validators.email]"
|
||||
:error-messages="emailErrorMessages"
|
||||
@blur="validateEmail"
|
||||
|
|
@ -37,11 +45,11 @@
|
|||
v-model="credentials.password1.value"
|
||||
v-bind="inputAttrs"
|
||||
:type="pwFields.inputType.value"
|
||||
:append-icon="pwFields.passwordIcon.value"
|
||||
:append-inner-icon="pwFields.passwordIcon.value"
|
||||
:prepend-icon="$globals.icons.lock"
|
||||
:label="$tc('user.password')"
|
||||
:label="$t('user.password')"
|
||||
:rules="[validators.required, validators.minLength(8), validators.maxLength(258)]"
|
||||
@click:append="pwFields.togglePasswordShow"
|
||||
@click:append-inner="pwFields.togglePasswordShow"
|
||||
/>
|
||||
|
||||
<UserPasswordStrength :value="credentials.password1.value" />
|
||||
|
|
@ -50,19 +58,19 @@
|
|||
v-model="credentials.password2.value"
|
||||
v-bind="inputAttrs"
|
||||
:type="pwFields.inputType.value"
|
||||
:append-icon="pwFields.passwordIcon.value"
|
||||
:append-inner-icon="pwFields.passwordIcon.value"
|
||||
:prepend-icon="$globals.icons.lock"
|
||||
:label="$tc('user.confirm-password')"
|
||||
:label="$t('user.confirm-password')"
|
||||
:rules="[validators.required, credentials.passwordMatch]"
|
||||
@click:append="pwFields.togglePasswordShow"
|
||||
@click:append-inner="pwFields.togglePasswordShow"
|
||||
/>
|
||||
<div class="px-2">
|
||||
<v-checkbox
|
||||
v-model="accountDetails.advancedOptions.value"
|
||||
:label="$tc('user.enable-advanced-content')"
|
||||
:label="$t('user.enable-advanced-content')"
|
||||
/>
|
||||
<p class="text-caption mt-n4">
|
||||
{{ $tc("user.enable-advanced-content-description") }}
|
||||
{{ $t("user.enable-advanced-content-description") }}
|
||||
</p>
|
||||
</div>
|
||||
</v-form>
|
||||
|
|
@ -71,7 +79,6 @@
|
|||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, ref } from "@nuxtjs/composition-api";
|
||||
import { useDark } from "@vueuse/core";
|
||||
import { validators } from "~/composables/use-validators";
|
||||
import { useUserRegistrationForm } from "~/composables/use-users/user-registration-form";
|
||||
|
|
@ -79,16 +86,19 @@ import { usePasswordField } from "~/composables/use-passwords";
|
|||
import UserPasswordStrength from "~/components/Domain/User/UserPasswordStrength.vue";
|
||||
|
||||
const inputAttrs = {
|
||||
filled: true,
|
||||
rounded: true,
|
||||
validateOnBlur: true,
|
||||
class: "rounded-lg",
|
||||
class: "rounded-lg pb-1",
|
||||
variant: "solo-filled" as any,
|
||||
};
|
||||
|
||||
export default defineComponent({
|
||||
export default defineNuxtComponent({
|
||||
components: { UserPasswordStrength },
|
||||
layout: "blank",
|
||||
setup() {
|
||||
definePageMeta({
|
||||
layout: "blank",
|
||||
});
|
||||
|
||||
const isDark = useDark();
|
||||
const langDialog = ref(false);
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue