mirror of
https://github.com/mealie-recipes/mealie.git
synced 2025-08-02 20:15:24 +02:00
refactor(frontend): ♻️ split user profile/management (#670)
* refactor(frontend): ♻️ major rewrite/improvement of use-profile pages * refactor(frontend): ♻️ split webhooks into their own page Co-authored-by: hay-kot <hay-kot@pm.me>
This commit is contained in:
Hayden
GitHub
parent
3d87ffc3a5
commit
e179dcdb10
40 changed files with 723 additions and 796 deletions
|
|
@ -1,159 +0,0 @@
|
|||
<template>
|
||||
<BaseStatCard :icon="$globals.icons.api" color="accent">
|
||||
<template #after-heading>
|
||||
<div class="ml-auto text-right">
|
||||
<h2 class="body-3 grey--text font-weight-light">
|
||||
{{ $t("settings.token.api-tokens") }}
|
||||
</h2>
|
||||
<h3 class="display-2 font-weight-light text--primary">
|
||||
<small> {{ tokens.length }} </small>
|
||||
</h3>
|
||||
</div>
|
||||
</template>
|
||||
<template #bottom>
|
||||
<v-subheader class="mb-n2">{{ $t("settings.token.active-tokens") }}</v-subheader>
|
||||
<v-virtual-scroll height="210" item-height="70" :items="tokens" class="mt-2">
|
||||
<template #default="{ item }">
|
||||
<v-divider></v-divider>
|
||||
<v-list-item @click.prevent>
|
||||
<v-list-item-avatar>
|
||||
<v-icon large dark color="accent">
|
||||
{{ $globals.icons.api }}
|
||||
</v-icon>
|
||||
</v-list-item-avatar>
|
||||
|
||||
<v-list-item-content>
|
||||
<v-list-item-title v-text="item.name"></v-list-item-title>
|
||||
</v-list-item-content>
|
||||
|
||||
<v-list-item-action class="ml-auto">
|
||||
<v-btn large icon @click.stop="deleteToken(item.id)">
|
||||
<v-icon color="accent">{{ $globals.icons.delete }}</v-icon>
|
||||
</v-btn>
|
||||
</v-list-item-action>
|
||||
</v-list-item>
|
||||
<v-divider></v-divider>
|
||||
</template>
|
||||
</v-virtual-scroll>
|
||||
|
||||
<v-divider></v-divider>
|
||||
<v-card-actions class="pb-1 pt-3">
|
||||
<v-spacer></v-spacer>
|
||||
<BaseDialog
|
||||
:title="$t('settings.token.create-an-api-token')"
|
||||
:title-icon="$globals.icons.api"
|
||||
:submit-text="buttonText"
|
||||
:loading="loading"
|
||||
@submit="createToken(name)"
|
||||
>
|
||||
<v-card-text>
|
||||
<v-form ref="domNewTokenForm" @submit.prevent>
|
||||
<v-text-field v-model="name" :label="$t('settings.token.token-name')" required> </v-text-field>
|
||||
</v-form>
|
||||
|
||||
<div v-if="createdToken != ''">
|
||||
<v-textarea
|
||||
v-model="createdToken"
|
||||
class="mb-0 pb-0"
|
||||
:label="$t('settings.token.api-token')"
|
||||
readonly
|
||||
:append-outer-icon="$globals.icons.contentCopy"
|
||||
@click="copyToken"
|
||||
@click:append-outer="copyToken"
|
||||
>
|
||||
</v-textarea>
|
||||
<v-subheader class="text-center">
|
||||
{{
|
||||
$t(
|
||||
"settings.token.copy-this-token-for-use-with-an-external-application-this-token-will-not-be-viewable-again"
|
||||
)
|
||||
}}
|
||||
</v-subheader>
|
||||
</div>
|
||||
</v-card-text>
|
||||
|
||||
<template #activator="{ open }">
|
||||
<BaseButton create @click="open" />
|
||||
</template>
|
||||
</BaseDialog>
|
||||
</v-card-actions>
|
||||
</template>
|
||||
</BaseStatCard>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, ref } from "@nuxtjs/composition-api";
|
||||
import { useApiSingleton } from "~/composables/use-api";
|
||||
|
||||
const REFRESH_EVENT = "refresh";
|
||||
|
||||
export default defineComponent({
|
||||
props: {
|
||||
tokens: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
},
|
||||
setup(_, context) {
|
||||
const api = useApiSingleton();
|
||||
|
||||
const domNewTokenForm = ref<VForm | null>(null);
|
||||
|
||||
const createdToken = ref("");
|
||||
const name = ref("");
|
||||
const loading = ref(false);
|
||||
|
||||
function resetCreate() {
|
||||
createdToken.value = "";
|
||||
loading.value = false;
|
||||
name.value = "";
|
||||
context.emit(REFRESH_EVENT);
|
||||
}
|
||||
|
||||
async function createToken(name: string) {
|
||||
if (loading.value) {
|
||||
resetCreate();
|
||||
return;
|
||||
}
|
||||
|
||||
loading.value = true;
|
||||
|
||||
if (domNewTokenForm?.value?.validate()) {
|
||||
console.log("Created");
|
||||
return;
|
||||
}
|
||||
|
||||
const { data } = await api.users.createAPIToken({ name });
|
||||
|
||||
if (data) {
|
||||
createdToken.value = data.token;
|
||||
}
|
||||
}
|
||||
|
||||
async function deleteToken(id: string | number) {
|
||||
const { data } = await api.users.deleteAPIToken(id);
|
||||
context.emit(REFRESH_EVENT);
|
||||
return data;
|
||||
}
|
||||
|
||||
function copyToken() {
|
||||
navigator.clipboard.writeText(createdToken.value).then(
|
||||
() => console.log("Copied", createdToken.value),
|
||||
() => console.log("Copied Failed", createdToken.value)
|
||||
);
|
||||
}
|
||||
|
||||
return { createToken, deleteToken, copyToken, createdToken, loading, name };
|
||||
},
|
||||
computed: {
|
||||
buttonText(): any {
|
||||
if (this.createdToken === "") {
|
||||
return this.$t("general.create");
|
||||
} else {
|
||||
return this.$t("general.close");
|
||||
}
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
|
|
@ -1,177 +0,0 @@
|
|||
<template>
|
||||
<BaseStatCard :icon="$globals.icons.user" color="accent">
|
||||
<template #after-heading>
|
||||
<div class="ml-auto text-right">
|
||||
<div class="body-3 grey--text font-weight-light" v-text="$t('user.user-id-with-value', { id: user.id })" />
|
||||
|
||||
<h3 class="display-2 font-weight-light text--primary">
|
||||
<small> {{ $t("group.group-with-value", { groupID: user.group }) }}</small>
|
||||
</h3>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- Change Password -->
|
||||
<template #actions>
|
||||
<BaseDialog
|
||||
:title="$t('user.reset-password')"
|
||||
:title-icon="$globals.icons.lock"
|
||||
:submit-text="$t('settings.change-password')"
|
||||
:loading="loading"
|
||||
:top="true"
|
||||
@submit="updatePassword"
|
||||
>
|
||||
<template #activator="{ open }">
|
||||
<v-btn color="info" class="mr-1" small @click="open">
|
||||
<v-icon left>{{ $globals.icons.lock }}</v-icon>
|
||||
{{ $t("settings.change-password") }}
|
||||
</v-btn>
|
||||
</template>
|
||||
|
||||
<v-card-text>
|
||||
<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'"
|
||||
@click:append="showPassword.current = !showPassword.current"
|
||||
></v-text-field>
|
||||
<v-text-field
|
||||
v-model="password.newOne"
|
||||
:prepend-icon="$globals.icons.lock"
|
||||
:label="$t('user.new-password')"
|
||||
:type="showPassword ? 'text' : 'password'"
|
||||
@click:append="showPassword.newOne = !showPassword.newOne"
|
||||
></v-text-field>
|
||||
<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'"
|
||||
@click:append="showPassword.newTwo = !showPassword.newTwo"
|
||||
></v-text-field>
|
||||
</v-form>
|
||||
</v-card-text>
|
||||
</BaseDialog>
|
||||
</template>
|
||||
|
||||
<!-- Update User -->
|
||||
<template #bottom>
|
||||
<v-card-text>
|
||||
<v-form ref="userUpdate">
|
||||
<v-text-field v-model="userCopy.username" :label="$t('user.username')" required validate-on-blur>
|
||||
</v-text-field>
|
||||
<v-text-field v-model="userCopy.fullName" :label="$t('user.full-name')" required validate-on-blur>
|
||||
</v-text-field>
|
||||
<v-text-field v-model="userCopy.email" :label="$t('user.email')" validate-on-blur required> </v-text-field>
|
||||
</v-form>
|
||||
</v-card-text>
|
||||
<v-divider></v-divider>
|
||||
<v-card-actions class="pb-1 pt-3">
|
||||
<AppButtonUpload :icon="$globals.icons.fileImage" :text="$t('user.upload-photo')" file-name="profile_image" />
|
||||
<v-spacer></v-spacer>
|
||||
<BaseButton update @click="updateUser" />
|
||||
</v-card-actions>
|
||||
</template>
|
||||
</BaseStatCard>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { ref, reactive, defineComponent } from "@nuxtjs/composition-api";
|
||||
import { useApiSingleton } from "~/composables/use-api";
|
||||
const events = {
|
||||
UPDATE_USER: "update",
|
||||
CHANGE_PASSWORD: "change-password",
|
||||
UPLOAD_PHOTO: "upload-photo",
|
||||
REFRESH: "refresh",
|
||||
};
|
||||
|
||||
export default defineComponent({
|
||||
props: {
|
||||
user: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
setup(props, context) {
|
||||
const userCopy = ref({ ...props.user });
|
||||
const api = useApiSingleton();
|
||||
|
||||
const domUpdatePassword = ref<VForm | null>(null);
|
||||
const password = reactive({
|
||||
current: "",
|
||||
newOne: "",
|
||||
newTwo: "",
|
||||
});
|
||||
|
||||
async function updateUser() {
|
||||
// @ts-ignore
|
||||
const { response } = await api.users.updateOne(userCopy.value.id, userCopy.value);
|
||||
if (response?.status === 200) {
|
||||
context.emit(events.REFRESH);
|
||||
}
|
||||
}
|
||||
|
||||
async function updatePassword() {
|
||||
const { response } = await api.users.changePassword(userCopy.value.id, {
|
||||
currentPassword: password.current,
|
||||
newPassword: password.newOne,
|
||||
});
|
||||
|
||||
if (response?.status === 200) {
|
||||
console.log("Password Changed");
|
||||
}
|
||||
}
|
||||
|
||||
return { updateUser, updatePassword, userCopy, password, domUpdatePassword };
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
hideImage: false,
|
||||
passwordLoading: false,
|
||||
showPassword: false,
|
||||
loading: false,
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
// async updateUser() {
|
||||
// if (!this.$refs.userUpdate.validate()) {
|
||||
// return;
|
||||
// }
|
||||
// this.loading = true;
|
||||
// const response = await api.users.update(this.user);
|
||||
// if (response) {
|
||||
// this.$store.commit("setToken", response.data.access_token);
|
||||
// this.refreshProfile();
|
||||
// this.loading = false;
|
||||
// this.$store.dispatch("requestUserData");
|
||||
// }
|
||||
// },
|
||||
async changePassword() {
|
||||
// @ts-ignore
|
||||
this.paswordLoading = true;
|
||||
const data = {
|
||||
currentPassword: this.password.current,
|
||||
newPassword: this.password.newOne,
|
||||
};
|
||||
|
||||
// @ts-ignore
|
||||
if (this.$refs.passChange.validate()) {
|
||||
// @ts-ignore
|
||||
if (await api.users.changePassword(this.user.id, data)) {
|
||||
this.$emit("refresh");
|
||||
}
|
||||
}
|
||||
|
||||
// @ts-ignore
|
||||
this.paswordLoading = false;
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
56
frontend/components/Domain/User/UserProfileLinkCard.vue
Normal file
56
frontend/components/Domain/User/UserProfileLinkCard.vue
Normal file
|
|
@ -0,0 +1,56 @@
|
|||
<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-img>
|
||||
</div>
|
||||
<div class="d-flex align-center justify-space-between">
|
||||
<div>
|
||||
<v-card-title class="headline pb-0">
|
||||
<slot name="title"> </slot>
|
||||
</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>
|
||||
</v-card-text>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="$vuetify.breakpoint.mdAndUp" class="px-10">
|
||||
<v-img max-width="150px" max-height="125" :src="image"></v-img>
|
||||
</div>
|
||||
</div>
|
||||
<v-divider class="mt-auto"></v-divider>
|
||||
<v-card-actions>
|
||||
<v-btn 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";
|
||||
|
||||
interface LinkProp {
|
||||
text: string;
|
||||
url?: string;
|
||||
to: string;
|
||||
}
|
||||
|
||||
export default defineComponent({
|
||||
props: {
|
||||
link: {
|
||||
type: Object as () => LinkProp,
|
||||
required: true,
|
||||
},
|
||||
image: {
|
||||
type: String,
|
||||
requried: false,
|
||||
default: "",
|
||||
},
|
||||
},
|
||||
setup() {
|
||||
return {};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
Loading…
Add table
Add a link
Reference in a new issue