mirror of
https://github.com/mealie-recipes/mealie.git
synced 2026-04-09 06:25:35 -04:00
chore: migrate remaining pages to script setup (#7310)
This commit is contained in:
Kuchenpirat
GitHub
@@ -137,7 +137,7 @@
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
<script setup lang="ts">
|
||||
import { useAdminApi, useUserApi } from "~/composables/api";
|
||||
import { useGroups } from "~/composables/use-groups";
|
||||
import { useAdminHouseholds } from "~/composables/use-households";
|
||||
@@ -146,103 +146,83 @@ import { useUserForm } from "~/composables/use-users";
|
||||
import { validators } from "~/composables/use-validators";
|
||||
import type { UserOut } from "~/lib/api/types/user";
|
||||
|
||||
export default defineNuxtComponent({
|
||||
setup() {
|
||||
definePageMeta({
|
||||
layout: "admin",
|
||||
});
|
||||
|
||||
const { userForm } = useUserForm();
|
||||
const { groups } = useGroups();
|
||||
const { useHouseholdsInGroup } = useAdminHouseholds();
|
||||
const i18n = useI18n();
|
||||
const route = useRoute();
|
||||
|
||||
const userId = route.params.id as string;
|
||||
|
||||
// ==============================================
|
||||
// New User Form
|
||||
|
||||
const refNewUserForm = ref<VForm | null>(null);
|
||||
|
||||
const adminApi = useAdminApi();
|
||||
|
||||
const user = ref<UserOut | null>(null);
|
||||
const households = useHouseholdsInGroup(computed(() => user.value?.groupId || ""));
|
||||
|
||||
const disabledFields = computed(() => {
|
||||
return user.value?.authMethod !== "Mealie" ? ["admin"] : [];
|
||||
});
|
||||
|
||||
const userError = ref(false);
|
||||
|
||||
const resetUrl = ref<string | null>(null);
|
||||
const generatingToken = ref(false);
|
||||
|
||||
onMounted(async () => {
|
||||
const { data, error } = await adminApi.users.getOne(userId);
|
||||
|
||||
if (error?.response?.status === 404) {
|
||||
alert.error(i18n.t("user.user-not-found"));
|
||||
userError.value = true;
|
||||
}
|
||||
|
||||
if (data) {
|
||||
user.value = data;
|
||||
}
|
||||
});
|
||||
|
||||
async function handleSubmit() {
|
||||
if (!refNewUserForm.value?.validate() || user.value === null) return;
|
||||
|
||||
const { response, data } = await adminApi.users.updateOne(user.value.id, user.value);
|
||||
|
||||
if (response?.status === 200 && data) {
|
||||
user.value = data;
|
||||
}
|
||||
}
|
||||
|
||||
async function handlePasswordReset() {
|
||||
if (user.value === null) return;
|
||||
generatingToken.value = true;
|
||||
|
||||
const { response, data } = await adminApi.users.generatePasswordResetToken({ email: user.value.email });
|
||||
|
||||
if (response?.status === 201 && data) {
|
||||
const token: string = data.token;
|
||||
resetUrl.value = `${window.location.origin}/reset-password/?token=${token}`;
|
||||
}
|
||||
|
||||
generatingToken.value = false;
|
||||
}
|
||||
|
||||
const userApi = useUserApi();
|
||||
async function sendResetEmail() {
|
||||
if (!user.value?.email) return;
|
||||
const { response } = await userApi.email.sendForgotPassword({ email: user.value.email });
|
||||
if (response && response.status === 200) {
|
||||
alert.success(i18n.t("profile.email-sent"));
|
||||
}
|
||||
else {
|
||||
alert.error(i18n.t("profile.error-sending-email"));
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
user,
|
||||
disabledFields,
|
||||
userError,
|
||||
userForm,
|
||||
refNewUserForm,
|
||||
handleSubmit,
|
||||
groups,
|
||||
households,
|
||||
validators,
|
||||
handlePasswordReset,
|
||||
resetUrl,
|
||||
generatingToken,
|
||||
sendResetEmail,
|
||||
};
|
||||
},
|
||||
definePageMeta({
|
||||
layout: "admin",
|
||||
});
|
||||
|
||||
const { userForm } = useUserForm();
|
||||
const { groups } = useGroups();
|
||||
const { useHouseholdsInGroup } = useAdminHouseholds();
|
||||
const i18n = useI18n();
|
||||
const route = useRoute();
|
||||
|
||||
const userId = route.params.id as string;
|
||||
|
||||
// ==============================================
|
||||
// New User Form
|
||||
|
||||
const refNewUserForm = ref<VForm | null>(null);
|
||||
|
||||
const adminApi = useAdminApi();
|
||||
|
||||
const user = ref<UserOut | null>(null);
|
||||
const households = useHouseholdsInGroup(computed(() => user.value?.groupId || ""));
|
||||
|
||||
const disabledFields = computed(() => {
|
||||
return user.value?.authMethod !== "Mealie" ? ["admin"] : [];
|
||||
});
|
||||
|
||||
const userError = ref(false);
|
||||
|
||||
const resetUrl = ref<string | null>(null);
|
||||
const generatingToken = ref(false);
|
||||
|
||||
onMounted(async () => {
|
||||
const { data, error } = await adminApi.users.getOne(userId);
|
||||
|
||||
if (error?.response?.status === 404) {
|
||||
alert.error(i18n.t("user.user-not-found"));
|
||||
userError.value = true;
|
||||
}
|
||||
|
||||
if (data) {
|
||||
user.value = data;
|
||||
}
|
||||
});
|
||||
|
||||
async function handleSubmit() {
|
||||
if (!refNewUserForm.value?.validate() || user.value === null) return;
|
||||
|
||||
const { response, data } = await adminApi.users.updateOne(user.value.id, user.value);
|
||||
|
||||
if (response?.status === 200 && data) {
|
||||
user.value = data;
|
||||
}
|
||||
}
|
||||
|
||||
async function handlePasswordReset() {
|
||||
if (user.value === null) return;
|
||||
generatingToken.value = true;
|
||||
|
||||
const { response, data } = await adminApi.users.generatePasswordResetToken({ email: user.value.email });
|
||||
|
||||
if (response?.status === 201 && data) {
|
||||
const token: string = data.token;
|
||||
resetUrl.value = `${window.location.origin}/reset-password/?token=${token}`;
|
||||
}
|
||||
|
||||
generatingToken.value = false;
|
||||
}
|
||||
|
||||
const userApi = useUserApi();
|
||||
async function sendResetEmail() {
|
||||
if (!user.value?.email) return;
|
||||
const { response } = await userApi.email.sendForgotPassword({ email: user.value.email });
|
||||
if (response && response.status === 200) {
|
||||
alert.success(i18n.t("profile.email-sent"));
|
||||
}
|
||||
else {
|
||||
alert.error(i18n.t("profile.error-sending-email"));
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -2,11 +2,11 @@
|
||||
<v-container fluid>
|
||||
<UserInviteDialog v-model="inviteDialog" />
|
||||
<BaseDialog
|
||||
v-model="deleteDialog"
|
||||
v-model="state.deleteDialog"
|
||||
:title="$t('general.confirm')"
|
||||
color="error"
|
||||
can-confirm
|
||||
@confirm="deleteUser(deleteTargetId)"
|
||||
@confirm="deleteUser(state.deleteTargetId)"
|
||||
>
|
||||
<template #activator />
|
||||
|
||||
@@ -60,7 +60,7 @@
|
||||
:items-per-page="-1"
|
||||
hide-default-footer
|
||||
disable-pagination
|
||||
:search="search"
|
||||
:search="state.search"
|
||||
@click:row="($event, { item }) => handleRowClick(item)"
|
||||
>
|
||||
<template #[`item.admin`]="{ item }">
|
||||
@@ -78,8 +78,8 @@
|
||||
color="error"
|
||||
variant="text"
|
||||
@click.stop="
|
||||
deleteDialog = true;
|
||||
deleteTargetId = item.id;
|
||||
state.deleteDialog = true;
|
||||
state.deleteTargetId = item.id;
|
||||
"
|
||||
>
|
||||
<v-icon>
|
||||
@@ -93,123 +93,99 @@
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
<script setup lang="ts">
|
||||
import { useAdminApi } from "~/composables/api";
|
||||
import { alert } from "~/composables/use-toast";
|
||||
import { useUser, useAllUsers } from "~/composables/use-user";
|
||||
import type { UserOut } from "~/lib/api/types/user";
|
||||
import UserInviteDialog from "~/components/Domain/User/UserInviteDialog.vue";
|
||||
|
||||
export default defineNuxtComponent({
|
||||
components: {
|
||||
UserInviteDialog,
|
||||
definePageMeta({
|
||||
layout: "admin",
|
||||
});
|
||||
const i18n = useI18n();
|
||||
|
||||
useHead({
|
||||
title: i18n.t("sidebar.manage-users"),
|
||||
});
|
||||
|
||||
const api = useAdminApi();
|
||||
const inviteDialog = ref();
|
||||
const auth = useMealieAuth();
|
||||
|
||||
const user = computed(() => auth.user.value);
|
||||
|
||||
const { $globals } = useNuxtApp();
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
const isUserOwnAccount = computed(() => {
|
||||
return state.deleteTargetId === user.value?.id;
|
||||
});
|
||||
|
||||
const ACTIONS_OPTIONS = [
|
||||
{
|
||||
text: i18n.t("user.reset-locked-users"),
|
||||
icon: $globals.icons.lock,
|
||||
event: "unlock-all-users",
|
||||
},
|
||||
setup() {
|
||||
definePageMeta({
|
||||
layout: "admin",
|
||||
});
|
||||
];
|
||||
|
||||
const api = useAdminApi();
|
||||
const refUserDialog = ref();
|
||||
const inviteDialog = ref();
|
||||
const auth = useMealieAuth();
|
||||
const state = reactive({
|
||||
deleteDialog: false,
|
||||
deleteTargetId: "",
|
||||
search: "",
|
||||
groups: [],
|
||||
households: [],
|
||||
sendTo: "",
|
||||
});
|
||||
|
||||
const user = computed(() => auth.user.value);
|
||||
const { users, refreshAllUsers } = useAllUsers();
|
||||
const { deleteUser: deleteUserMixin } = useUser(refreshAllUsers);
|
||||
|
||||
const i18n = useI18n();
|
||||
const { $globals } = useNuxtApp();
|
||||
function deleteUser(id: string) {
|
||||
deleteUserMixin(id);
|
||||
|
||||
const router = useRouter();
|
||||
if (isUserOwnAccount.value) {
|
||||
auth.refresh();
|
||||
}
|
||||
}
|
||||
|
||||
const isUserOwnAccount = computed(() => {
|
||||
return state.deleteTargetId === user.value?.id;
|
||||
});
|
||||
function handleRowClick(item: UserOut) {
|
||||
router.push(`/admin/manage/users/${item.id}`);
|
||||
}
|
||||
|
||||
const ACTIONS_OPTIONS = [
|
||||
{
|
||||
text: i18n.t("user.reset-locked-users"),
|
||||
icon: $globals.icons.lock,
|
||||
event: "unlock-all-users",
|
||||
},
|
||||
];
|
||||
// ==========================================================
|
||||
// Constants / Non-reactive
|
||||
|
||||
const state = reactive({
|
||||
deleteDialog: false,
|
||||
deleteTargetId: "",
|
||||
search: "",
|
||||
groups: [],
|
||||
households: [],
|
||||
sendTo: "",
|
||||
});
|
||||
|
||||
const { users, refreshAllUsers } = useAllUsers();
|
||||
const { loading, deleteUser: deleteUserMixin } = useUser(refreshAllUsers);
|
||||
|
||||
function deleteUser(id: string) {
|
||||
deleteUserMixin(id);
|
||||
|
||||
if (isUserOwnAccount.value) {
|
||||
auth.refresh();
|
||||
}
|
||||
}
|
||||
|
||||
function handleRowClick(item: UserOut) {
|
||||
router.push(`/admin/manage/users/${item.id}`);
|
||||
}
|
||||
|
||||
// ==========================================================
|
||||
// Constants / Non-reactive
|
||||
|
||||
const headers = [
|
||||
{
|
||||
title: i18n.t("user.user-id"),
|
||||
align: "start",
|
||||
value: "id",
|
||||
},
|
||||
{ title: i18n.t("user.username"), value: "username" },
|
||||
{ title: i18n.t("user.full-name"), value: "fullName" },
|
||||
{ title: i18n.t("user.email"), value: "email" },
|
||||
{ title: i18n.t("group.group"), value: "group" },
|
||||
{ title: i18n.t("household.household"), value: "household" },
|
||||
{ title: i18n.t("user.auth-method"), value: "authMethod" },
|
||||
{ title: i18n.t("user.admin"), value: "admin" },
|
||||
{ title: i18n.t("general.delete"), value: "actions", sortable: false, align: "center" },
|
||||
];
|
||||
|
||||
async function unlockAllUsers(): Promise<void> {
|
||||
const { data } = await api.users.unlockAllUsers(true);
|
||||
|
||||
if (data) {
|
||||
const unlocked = data.unlocked ?? 0;
|
||||
|
||||
alert.success(`${unlocked} user(s) unlocked`);
|
||||
refreshAllUsers();
|
||||
}
|
||||
}
|
||||
|
||||
useSeoMeta({
|
||||
title: i18n.t("sidebar.manage-users"),
|
||||
});
|
||||
|
||||
return {
|
||||
isUserOwnAccount,
|
||||
unlockAllUsers,
|
||||
...toRefs(state),
|
||||
headers,
|
||||
deleteUser,
|
||||
loading,
|
||||
refUserDialog,
|
||||
inviteDialog,
|
||||
users,
|
||||
user,
|
||||
handleRowClick,
|
||||
ACTIONS_OPTIONS,
|
||||
};
|
||||
},
|
||||
head() {
|
||||
return {
|
||||
title: useI18n().t("sidebar.manage-users"),
|
||||
};
|
||||
const headers = [
|
||||
{
|
||||
title: i18n.t("user.user-id"),
|
||||
align: "start",
|
||||
value: "id",
|
||||
},
|
||||
{ title: i18n.t("user.username"), value: "username" },
|
||||
{ title: i18n.t("user.full-name"), value: "fullName" },
|
||||
{ title: i18n.t("user.email"), value: "email" },
|
||||
{ title: i18n.t("group.group"), value: "group" },
|
||||
{ title: i18n.t("household.household"), value: "household" },
|
||||
{ title: i18n.t("user.auth-method"), value: "authMethod" },
|
||||
{ title: i18n.t("user.admin"), value: "admin" },
|
||||
{ title: i18n.t("general.delete"), value: "actions", sortable: false, align: "center" },
|
||||
];
|
||||
|
||||
async function unlockAllUsers(): Promise<void> {
|
||||
const { data } = await api.users.unlockAllUsers(true);
|
||||
|
||||
if (data) {
|
||||
const unlocked = data.unlocked ?? 0;
|
||||
|
||||
alert.success(`${unlocked} user(s) unlocked`);
|
||||
refreshAllUsers();
|
||||
}
|
||||
}
|
||||
|
||||
useSeoMeta({
|
||||
title: i18n.t("sidebar.manage-users"),
|
||||
});
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user