This commit is contained in:
miah 2025-08-19 23:21:15 +02:00 committed by GitHub
commit ddc3399e2b
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
7 changed files with 173 additions and 292 deletions

View file

@ -1051,7 +1051,8 @@
"dont-want-to-see-this-anymore-be-sure-to-change-your-email": "Don't want to see this anymore? Be sure to change your email in your user settings!",
"forgot-password": "Forgot Password",
"forgot-password-text": "Please enter your email address and we will send you a link to reset your password.",
"changes-reflected-immediately": "Changes to this user will be reflected immediately."
"changes-reflected-immediately": "Changes to this user will be reflected immediately.",
"default-activity": "Default Activity"
},
"language-dialog": {
"translated": "translated",

View file

@ -194,6 +194,7 @@ export interface UserBase {
group?: string | null;
household?: string | null;
advanced?: boolean;
defaultActivity?: string;
canInvite?: boolean;
canManage?: boolean;
canManageHousehold?: boolean;
@ -209,6 +210,7 @@ export interface UserIn {
group?: string | null;
household?: string | null;
advanced?: boolean;
defaultActivity?: string;
canInvite?: boolean;
canManage?: boolean;
canManageHousehold?: boolean;
@ -225,6 +227,7 @@ export interface UserOut {
group: string;
household: string;
advanced?: boolean;
defaultActivity?: string;
canInvite?: boolean;
canManage?: boolean;
canManageHousehold?: boolean;

View file

@ -1,18 +1,8 @@
<template>
<v-container
fluid
class="d-flex justify-center align-center flex-column fill-height"
:class="{
'bg-off-white': !$vuetify.theme.current.dark && !isDark,
}"
>
<v-alert
v-if="isFirstLogin"
class="my-4"
type="info"
:icon="$globals.icons.information"
:style="{ flex: 'none' }"
>
<v-container fluid class="d-flex justify-center align-center flex-column fill-height" :class="{
'bg-off-white': !$vuetify.theme.current.dark && !isDark,
}">
<v-alert v-if="isFirstLogin" class="my-4" type="info" :icon="$globals.icons.information" :style="{ flex: 'none' }">
<div>
<p class="mb-3">
{{ $t('user.it-looks-like-this-is-your-first-time-logging-in') }}
@ -38,16 +28,8 @@
</p>
</div>
</v-alert>
<v-card
tag="section"
class="d-flex flex-column align-center w-100"
max-width="600"
>
<v-toolbar
color="primary"
class="d-flex justify-center mb-4"
dark
>
<v-card tag="section" class="d-flex flex-column align-center w-100" max-width="600">
<v-toolbar color="primary" class="d-flex justify-center mb-4" dark>
<v-toolbar-title class="text-h4 text-center">
Mealie
</v-toolbar-title>
@ -55,19 +37,10 @@
<div class="icon-container">
<v-divider class="icon-divider" />
<v-avatar
class="pa-2 icon-avatar"
color="primary"
size="100"
>
<svg
class="icon-white"
style="width: 100px; height: 100px"
viewBox="0 0 24 24"
>
<v-avatar class="pa-2 icon-avatar" color="primary" size="100">
<svg class="icon-white" style="width: 100px; height: 100px" viewBox="0 0 24 24">
<path
d="M8.1,13.34L3.91,9.16C2.35,7.59 2.35,5.06 3.91,3.5L10.93,10.5L8.1,13.34M13.41,13L20.29,19.88L18.88,21.29L12,14.41L5.12,21.29L3.71,19.88L13.36,10.22L13.16,10C12.38,9.23 12.38,7.97 13.16,7.19L17.5,2.82L18.43,3.74L15.19,7L16.15,7.94L19.39,4.69L20.31,5.61L17.06,8.85L18,9.81L21.26,6.56L22.18,7.5L17.81,11.84C17.03,12.62 15.77,12.62 15,11.84L14.78,11.64L13.41,13Z"
/>
d="M8.1,13.34L3.91,9.16C2.35,7.59 2.35,5.06 3.91,3.5L10.93,10.5L8.1,13.34M13.41,13L20.29,19.88L18.88,21.29L12,14.41L5.12,21.29L3.71,19.88L13.36,10.22L13.16,10C12.38,9.23 12.38,7.97 13.16,7.19L17.5,2.82L18.43,3.74L15.19,7L16.15,7.94L19.39,4.69L20.31,5.61L17.06,8.85L18,9.81L21.26,6.56L22.18,7.5L17.81,11.84C17.03,12.62 15.77,12.62 15,11.84L14.78,11.64L13.41,13Z" />
</svg>
</v-avatar>
</div>
@ -77,88 +50,37 @@
</v-card-title>
<v-card-text class="w-100">
<v-form @submit.prevent="authenticate">
<v-text-field
v-if="allowPasswordLogin"
v-model="form.email"
:prepend-inner-icon="$globals.icons.email"
variant="solo-filled"
flat
width="100%"
autofocus
autocomplete="username"
name="login"
:label="$t('user.email-or-username')"
type="text"
/>
<v-text-field
v-if="allowPasswordLogin"
id="password"
v-model="form.password"
:prepend-inner-icon="$globals.icons.lock"
:append-inner-icon="passwordIcon"
variant="solo-filled"
flat
autocomplete="current-password"
name="password"
:label="$t('user.password')"
:type="inputType"
@click:append-inner="togglePasswordShow"
/>
<v-checkbox
v-if="allowPasswordLogin"
v-model="form.remember"
class="ml-2 mt-n2"
:label="$t('user.remember-me')"
/>
<v-text-field v-if="allowPasswordLogin" v-model="form.email" :prepend-inner-icon="$globals.icons.email"
variant="solo-filled" flat width="100%" autofocus autocomplete="username" name="login"
:label="$t('user.email-or-username')" type="text" />
<v-text-field v-if="allowPasswordLogin" id="password" v-model="form.password"
:prepend-inner-icon="$globals.icons.lock" :append-inner-icon="passwordIcon" variant="solo-filled" flat
autocomplete="current-password" name="password" :label="$t('user.password')" :type="inputType"
@click:append-inner="togglePasswordShow" />
<v-checkbox v-if="allowPasswordLogin" v-model="form.remember" class="ml-2 mt-n2"
:label="$t('user.remember-me')" />
<v-card-actions v-if="allowPasswordLogin" class="justify-center pt-0">
<div class="max-button">
<v-btn
:loading="loggingIn"
:disabled="oidcLoggingIn"
variant="elevated"
color="primary"
type="submit"
size="large"
rounded
class="rounded-xl"
block
>
<v-btn :loading="loggingIn" :disabled="oidcLoggingIn" variant="elevated" color="primary" type="submit"
size="large" rounded class="rounded-xl" block>
{{ $t("user.login") }}
</v-btn>
</div>
</v-card-actions>
<div
v-if="allowOidc && allowPasswordLogin"
class="d-flex my-4 justify-center align-center"
width="80%"
>
<div v-if="allowOidc && allowPasswordLogin" class="d-flex my-4 justify-center align-center" width="80%">
<v-divider class="div-width" />
<span
class="absolute px-2"
:class="{
'bg-white': !$vuetify.theme.current.dark && !isDark,
'bg-grey-darken-4': $vuetify.theme.current.dark || isDark,
}"
>
<span class="absolute px-2" :class="{
'bg-white': !$vuetify.theme.current.dark && !isDark,
'bg-grey-darken-4': $vuetify.theme.current.dark || isDark,
}">
{{ $t("user.or") }}
</span>
</div>
<v-card-actions
v-if="allowOidc"
class="justify-center"
>
<v-card-actions v-if="allowOidc" class="justify-center">
<div class="max-button">
<v-btn
:loading="oidcLoggingIn"
color="primary"
size="large"
variant="elevated"
rounded
class="rounded-xl"
block
@click="() => oidcAuthenticate()"
>
<v-btn :loading="oidcLoggingIn" color="primary" size="large" variant="elevated" rounded class="rounded-xl"
block @click="() => oidcAuthenticate()">
{{ $t("user.login-oidc") }} {{ oidcProviderName }}
</v-btn>
</div>
@ -166,57 +88,36 @@
</v-form>
</v-card-text>
<v-card-actions class="d-flex justify-center flex-column flex-sm-row">
<v-btn
v-if="allowSignup && allowPasswordLogin"
variant="text"
to="/register"
>
<v-btn v-if="allowSignup && allowPasswordLogin" variant="text" to="/register">
{{ $t("user.register") }}
</v-btn>
<v-btn
v-else
variant="text"
disabled
>
<v-btn v-else variant="text" disabled>
{{ $t("user.invite-only") }}
</v-btn>
<v-btn
v-if="allowPasswordLogin"
class="mr-auto"
variant="text"
to="/forgot-password"
>
<v-btn v-if="allowPasswordLogin" class="mr-auto" variant="text" to="/forgot-password">
{{ $t("user.reset-password") }}
</v-btn>
</v-card-actions>
<v-card-text class="d-flex justify-center flex-column flex-sm-row">
<div
v-for="link in [
{
text: $t('about.sponsor'),
icon: $globals.icons.heart,
href: 'https://github.com/sponsors/hay-kot',
},
{
text: $t('about.github'),
icon: $globals.icons.github,
href: 'https://github.com/mealie-recipes/mealie',
},
{
text: $t('about.docs'),
icon: $globals.icons.folderOutline,
href: 'https://docs.mealie.io/',
},
]"
:key="link.text"
class="text-center"
>
<v-btn
variant="text"
:href="link.href"
target="_blank"
>
<div v-for="link in [
{
text: $t('about.sponsor'),
icon: $globals.icons.heart,
href: 'https://github.com/sponsors/hay-kot',
},
{
text: $t('about.github'),
icon: $globals.icons.github,
href: 'https://github.com/mealie-recipes/mealie',
},
{
text: $t('about.docs'),
icon: $globals.icons.folderOutline,
href: 'https://docs.mealie.io/',
},
]" :key="link.text" class="text-center">
<v-btn variant="text" :href="link.href" target="_blank">
<v-icon start>
{{ link.icon }}
</v-icon>
@ -274,8 +175,9 @@ export default defineNuxtComponent({
() => {
if (!isDemo.value && isFirstLogin.value && $auth.user.value?.admin) {
router.push("/admin/setup");
}
else {
} else if ($auth.user?.defaultActivity) {
router.push($auth.user.defaultActivity)
} else {
router.push(`/g/${groupSlug.value || ""}`);
}
},

View file

@ -3,18 +3,9 @@
<BasePageTitle divider>
<template #header>
<div class="d-flex flex-column align-center justify-center">
<UserAvatar
:tooltip="false"
size="96"
:user-id="userCopy.id!"
/>
<AppButtonUpload
class="my-1"
file-name="profile"
accept="image/*"
:url="`/api/users/${userCopy.id}/image`"
@uploaded="$auth.refresh()"
/>
<UserAvatar :tooltip="false" size="96" :user-id="userCopy.id!" />
<AppButtonUpload class="my-1" file-name="profile" accept="image/*" :url="`/api/users/${userCopy.id}/image`"
@uploaded="$auth.refresh()" />
</div>
</template>
<template #title>
@ -25,23 +16,13 @@
<section class="mt-5">
<ToggleState tag="article">
<template #activator="{ toggle, state }">
<v-btn
v-if="!state"
color="info"
class="mt-2 mb-n3"
@click="toggle"
>
<v-btn v-if="!state" color="info" class="mt-2 mb-n3" @click="toggle">
<v-icon start>
{{ $globals.icons.lock }}
</v-icon>
{{ $t("settings.change-password") }}
</v-btn>
<v-btn
v-else
color="info"
class="mt-2 mb-n3"
@click="toggle"
>
<v-btn v-else color="info" class="mt-2 mb-n3" @click="toggle">
<v-icon start>
{{ $globals.icons.user }}
</v-icon>
@ -49,116 +30,59 @@
</v-btn>
</template>
<template #default="{ state }">
<v-slide-x-transition
leave-absolute
hide-on-leave
>
<div
v-if="!state"
key="personal-info"
>
<BaseCardSectionTitle
class="mt-10"
:title="$t('profile.personal-information')"
/>
<v-card
tag="article"
variant="outlined"
style="border-color: lightgrey;"
>
<v-slide-x-transition leave-absolute hide-on-leave>
<div v-if="!state" key="personal-info">
<BaseCardSectionTitle class="mt-10" :title="$t('profile.personal-information')" />
<v-card tag="article" variant="outlined" style="border-color: lightgrey;">
<v-card-text class="pb-0">
<v-form ref="userUpdate">
<v-text-field
v-model="userCopy.username"
:label="$t('user.username')"
required
validate-on="blur"
density="comfortable"
variant="underlined"
/>
<v-text-field
v-model="userCopy.fullName"
:label="$t('user.full-name')"
required
validate-on="blur"
density="comfortable"
variant="underlined"
/>
<v-text-field
v-model="userCopy.email"
:label="$t('user.email')"
validate-on="blur"
required
density="comfortable"
variant="underlined"
/>
<v-text-field v-model="userCopy.username" :label="$t('user.username')" required validate-on="blur"
density="comfortable" variant="underlined" />
<v-text-field v-model="userCopy.fullName" :label="$t('user.full-name')" required validate-on="blur"
density="comfortable" variant="underlined" />
<v-text-field v-model="userCopy.email" :label="$t('user.email')" validate-on="blur" required
density="comfortable" variant="underlined" />
<v-text-field v-model="userCopy.defaultActivity" :label="'Default Activity'" validate-on-blur
required>
</v-text-field>
<v-combobox v-model="selectedDefaultActivity" :label="$t('user.default-activity')"
:items="activityOptions" validate-on-blur />
</v-form>
</v-card-text>
<v-card-actions>
<v-spacer />
<BaseButton
update
@click="updateUser"
/>
<BaseButton update @click="updateUser" />
</v-card-actions>
</v-card>
</div>
<div
v-else
key="change-password"
>
<BaseCardSectionTitle
class="mt-10"
:title="$t('settings.change-password')"
/>
<div v-else key="change-password">
<BaseCardSectionTitle class="mt-10" :title="$t('settings.change-password')" />
<v-card variant="outlined">
<v-card-text class="pb-0">
<v-form ref="passChange">
<v-text-field
v-model="password.current"
:prepend-icon="$globals.icons.lock"
:label="$t('user.current-password')"
validate-on="blur"
:type="showPassword ? 'text' : 'password'"
<v-text-field v-model="password.current" :prepend-icon="$globals.icons.lock"
:label="$t('user.current-password')" validate-on="blur" :type="showPassword ? 'text' : 'password'"
:append-icon="showPassword ? $globals.icons.eye : $globals.icons.eyeOff"
:rules="[validators.minLength(1)]"
density="comfortable"
variant="underlined"
@click:append="showPassword = !showPassword"
/>
<v-text-field
v-model="password.newOne"
:prepend-icon="$globals.icons.lock"
:label="$t('user.new-password')"
:type="showPassword ? 'text' : 'password'"
:rules="[validators.minLength(1)]" density="comfortable" variant="underlined"
@click:append="showPassword = !showPassword" />
<v-text-field v-model="password.newOne" :prepend-icon="$globals.icons.lock"
:label="$t('user.new-password')" :type="showPassword ? 'text' : 'password'"
:append-icon="showPassword ? $globals.icons.eye : $globals.icons.eyeOff"
:rules="[validators.minLength(8)]"
density="comfortable"
variant="underlined"
@click:append="showPassword = !showPassword"
/>
<v-text-field
v-model="password.newTwo"
:prepend-icon="$globals.icons.lock"
:rules="[validators.minLength(8)]" density="comfortable" variant="underlined"
@click:append="showPassword = !showPassword" />
<v-text-field v-model="password.newTwo" :prepend-icon="$globals.icons.lock"
:label="$t('user.confirm-password')"
:rules="[password.newOne === password.newTwo || $t('user.password-must-match')]"
validate-on="blur"
:type="showPassword ? 'text' : 'password'"
:append-icon="showPassword ? $globals.icons.eye : $globals.icons.eyeOff"
density="comfortable"
variant="underlined"
@click:append="showPassword = !showPassword"
/>
validate-on="blur" :type="showPassword ? 'text' : 'password'"
:append-icon="showPassword ? $globals.icons.eye : $globals.icons.eyeOff" density="comfortable"
variant="underlined" @click:append="showPassword = !showPassword" />
<UserPasswordStrength v-model="password.newOne" />
</v-form>
</v-card-text>
<v-card-actions>
<v-spacer />
<BaseButton
update
:disabled="!passwordsMatch || password.current.length < 0"
@click="updatePassword"
/>
<BaseButton update :disabled="!passwordsMatch || password.current.length < 0"
@click="updatePassword" />
</v-card-actions>
</v-card>
</div>
@ -167,30 +91,13 @@
</ToggleState>
</section>
<section>
<BaseCardSectionTitle
class="mt-10"
:title="$t('profile.preferences')"
/>
<v-checkbox
v-model="userCopy.advanced"
class="mt-n4"
:label="$t('profile.show-advanced-description')"
color="primary"
@change="updateUser"
/>
<nuxt-link
class="mt-5 d-flex flex-column justify-center text-center"
:to="`/group`"
> {{
<BaseCardSectionTitle class="mt-10" :title="$t('profile.preferences')" />
<v-checkbox v-model="userCopy.advanced" class="mt-n4" :label="$t('profile.show-advanced-description')"
color="primary" @change="updateUser" />
<nuxt-link class="mt-5 d-flex flex-column justify-center text-center" :to="`/group`"> {{
$t('profile.looking-for-privacy-settings') }} </nuxt-link>
<div class="d-flex flex-wrap justify-center mt-5">
<v-btn
variant="outlined"
class="rounded-xl my-1 mx-1"
:to="`/user/profile`"
nuxt
exact
>
<v-btn variant="outlined" class="rounded-xl my-1 mx-1" :to="`/user/profile`" nuxt exact>
<v-icon start>
{{ $globals.icons.backArrow }}
</v-icon>
@ -202,12 +109,19 @@
</template>
<script lang="ts">
import { ref, reactive, defineComponent, computed, useContext, watch, toRefs } from "@nuxtjs/composition-api";
import { TranslateResult } from "vue-i18n";
import { useUserApi } from "~/composables/api";
import UserAvatar from "~/components/Domain/User/UserAvatar.vue";
import UserPasswordStrength from "~/components/Domain/User/UserPasswordStrength.vue";
import { validators } from "~/composables/use-validators";
import type { VForm } from "~/types/auto-forms";
type TRoute = string;
type TActivityLabel = TranslateResult;
const DEFAULT_ACTIVITY = "/g/home"
export default defineNuxtComponent({
components: {
UserAvatar,
@ -215,18 +129,43 @@ export default defineNuxtComponent({
},
middleware: "sidebase-auth",
setup() {
const i18n = useI18n();
const $auth = useMealieAuth();
const user = computed(() => $auth.user.value);
const { $auth, i18n } = useContext();
const user = computed(() => $auth.user as unknown as UserOut);
const groupSlug = computed(() => user.value.groupSlug)
useSeoMeta({
title: i18n.t("settings.profile"),
});
const selectableActivities = new Map<TActivityLabel, TRoute>([
[i18n.t("general.recipes"), groupSlug ? `/g/${groupSlug.value}` : DEFAULT_ACTIVITY],
[i18n.t("recipe-finder.recipe-finder"), `/g/${groupSlug.value}/recipes/finder`],
[i18n.t("meal-plan.meal-planner"), "/household/mealplan/planner/view"],
[i18n.t("shopping-list.shopping-lists"), "/shopping-lists"],
[i18n.t("recipe.timeline"), `/g/${groupSlug.value}/recipes/timeline`],
[i18n.t("cookbook.cookbooks"), `/g/${groupSlug.value}/cookbooks`],
])
function getActivityRoute(label?: TActivityLabel): TRoute {
return selectableActivities.get(label ?? "") ?? DEFAULT_ACTIVITY
}
function getActivityLabel(route?: TRoute): TActivityLabel {
return selectableActivities
.keys()
.find(label => selectableActivities.get(label as string) === (route ?? DEFAULT_ACTIVITY)) as string
// Safe assertion: DEFAULT_ACTIVITY will always exist in the map
}
const selectedDefaultActivity = ref(getActivityLabel(user.value.defaultActivity))
const activityOptions = [...selectableActivities.keys()]
watch(user, () => {
userCopy.value = { ...user.value };
});
watch(selectedDefaultActivity, () => {
userCopy.value = {
...userCopy.value,
defaultActivity: getActivityRoute(selectedDefaultActivity.value)
}
})
const userCopy = ref({ ...user.value });
const api = useUserApi();
@ -274,6 +213,8 @@ export default defineNuxtComponent({
updateUser,
updatePassword,
userCopy,
selectedDefaultActivity,
activityOptions,
password,
domUpdatePassword,
passwordsMatch,

View file

@ -0,0 +1,32 @@
"""'support default activity'
Revision ID: 766c23cf0a3a
Revises: 7cf3054cbbcc
Create Date: 2025-02-27 21:22:50.172425
"""
import sqlalchemy as sa
from alembic import op
# revision identifiers, used by Alembic.
revision = "766c23cf0a3a"
down_revision: str | None = "7cf3054cbbcc"
branch_labels: str | tuple[str, ...] | None = None
depends_on: str | tuple[str, ...] | None = None
def upgrade():
# ### commands auto generated by Alembic - please adjust! ###
with op.batch_alter_table("users", schema=None) as batch_op:
batch_op.add_column(sa.Column("default_activity", sa.String(), nullable=True))
# ### end Alembic commands ###
def downgrade():
# ### commands auto generated by Alembic - please adjust! ###
with op.batch_alter_table("users", schema=None) as batch_op:
batch_op.drop_column("default_activity")
# ### end Alembic commands ###

View file

@ -58,6 +58,7 @@ class User(SqlAlchemyBase, BaseMixins):
auth_method: Mapped[Enum[AuthMethod]] = mapped_column(Enum(AuthMethod), default=AuthMethod.MEALIE)
admin: Mapped[bool | None] = mapped_column(Boolean, default=False)
advanced: Mapped[bool | None] = mapped_column(Boolean, default=False)
default_activity: Mapped[str | None] = mapped_column(String, default=None)
group_id: Mapped[GUID] = mapped_column(GUID, ForeignKey("groups.id"), nullable=False, index=True)
group: Mapped["Group"] = orm.relationship("Group", back_populates="users")

View file

@ -115,6 +115,7 @@ class UserBase(MealieModel):
group: str | None = None
household: str | None = None
advanced: bool = False
default_activity: str | None = None
can_invite: bool = False
can_manage: bool = False