Converted settings/User.vue & UserForm.vue to Composition api
This commit is contained in:
Joep
parent
a14adb7cfd
commit
bb6470edb7
16
frontend/package-lock.json
generated
16
frontend/package-lock.json
generated
@ -33,6 +33,7 @@
|
||||
},
|
||||
"devDependencies": {
|
||||
"@intlify/unplugin-vue-i18n": "^0.12.3",
|
||||
"@types/lodash-es": "^4.17.9",
|
||||
"@typescript-eslint/eslint-plugin": "^6.6.0",
|
||||
"@vitejs/plugin-legacy": "^4.1.1",
|
||||
"@vitejs/plugin-vue": "^4.3.3",
|
||||
@ -2495,6 +2496,21 @@
|
||||
"integrity": "sha512-Hr5Jfhc9eYOQNPYO5WLDq/n4jqijdHNlDXjuAQkkt+mWdQR+XJToOHrsD4cPaMXpn6KO7y2+wM8AZEs8VpBLVA==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/@types/lodash": {
|
||||
"version": "4.14.198",
|
||||
"resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.198.tgz",
|
||||
"integrity": "sha512-trNJ/vtMZYMLhfN45uLq4ShQSw0/S7xCTLLVM+WM1rmFpba/VS42jVUgaO3w/NOLiWR/09lnYk0yMaA/atdIsg==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/@types/lodash-es": {
|
||||
"version": "4.17.9",
|
||||
"resolved": "https://registry.npmjs.org/@types/lodash-es/-/lodash-es-4.17.9.tgz",
|
||||
"integrity": "sha512-ZTcmhiI3NNU7dEvWLZJkzG6ao49zOIjEgIE0RgV7wbPxU0f2xT3VSAHw2gmst8swH6V0YkLRGp4qPlX/6I90MQ==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"@types/lodash": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/@types/semver": {
|
||||
"version": "7.5.1",
|
||||
"resolved": "https://registry.npmjs.org/@types/semver/-/semver-7.5.1.tgz",
|
||||
|
||||
@ -39,6 +39,7 @@
|
||||
},
|
||||
"devDependencies": {
|
||||
"@intlify/unplugin-vue-i18n": "^0.12.3",
|
||||
"@types/lodash-es": "^4.17.9",
|
||||
"@typescript-eslint/eslint-plugin": "^6.6.0",
|
||||
"@vitejs/plugin-legacy": "^4.1.1",
|
||||
"@vitejs/plugin-vue": "^4.3.3",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div>
|
||||
<p v-if="!isDefault">
|
||||
<p v-if="!isDefault && props.user !== null">
|
||||
<label for="username">{{ $t("settings.username") }}</label>
|
||||
<input
|
||||
class="input input--block"
|
||||
@ -24,7 +24,7 @@
|
||||
<p>
|
||||
<label for="scope">{{ $t("settings.scope") }}</label>
|
||||
<input
|
||||
:disabled="createUserDirData"
|
||||
:disabled="createUserDirData ?? false"
|
||||
:placeholder="scopePlaceholder"
|
||||
class="input input--block"
|
||||
type="text"
|
||||
@ -56,7 +56,7 @@
|
||||
</p>
|
||||
|
||||
<permissions v-model:perm="user.perm" />
|
||||
<commands v-if="isExecEnabled" v-model:commands="user.commands" />
|
||||
<commands v-if="enableExec " v-model:commands="user.commands" />
|
||||
|
||||
<div v-if="!isDefault">
|
||||
<h3>{{ $t("settings.rules") }}</h3>
|
||||
@ -66,54 +66,52 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
<script setup lang="ts">
|
||||
import Languages from "./Languages.vue";
|
||||
import Rules from "./Rules.vue";
|
||||
import Permissions from "./Permissions.vue";
|
||||
import Commands from "./Commands.vue";
|
||||
import { enableExec } from "@/utils/constants";
|
||||
import { computed, onMounted, ref, watch } from "vue";
|
||||
import { useI18n } from "vue-i18n";
|
||||
|
||||
export default {
|
||||
name: "user",
|
||||
data: () => {
|
||||
return {
|
||||
createUserDirData: false,
|
||||
originalUserScope: "/",
|
||||
};
|
||||
},
|
||||
components: {
|
||||
Permissions,
|
||||
Languages,
|
||||
Rules,
|
||||
Commands,
|
||||
},
|
||||
props: ["user", "createUserDir", "isNew", "isDefault"],
|
||||
created() {
|
||||
this.originalUserScope = this.user.scope;
|
||||
this.createUserDirData = this.createUserDir;
|
||||
},
|
||||
computed: {
|
||||
passwordPlaceholder() {
|
||||
return this.isNew ? "" : this.$t("settings.avoidChanges");
|
||||
},
|
||||
scopePlaceholder() {
|
||||
return this.createUserDir
|
||||
? this.$t("settings.userScopeGenerationPlaceholder")
|
||||
: "";
|
||||
},
|
||||
displayHomeDirectoryCheckbox() {
|
||||
return this.isNew && this.createUserDir;
|
||||
},
|
||||
isExecEnabled: () => enableExec,
|
||||
},
|
||||
watch: {
|
||||
"user.perm.admin": function () {
|
||||
if (!this.user.perm.admin) return;
|
||||
this.user.lockPassword = false;
|
||||
},
|
||||
createUserDirData() {
|
||||
this.user.scope = this.createUserDirData ? "" : this.originalUserScope;
|
||||
},
|
||||
},
|
||||
};
|
||||
const { t } = useI18n();
|
||||
|
||||
const createUserDirData = ref<boolean | null>(null);
|
||||
const originalUserScope = ref<string | null>(null);
|
||||
|
||||
const props = defineProps<{
|
||||
user: IUser;
|
||||
createUserDir: boolean;
|
||||
isNew: boolean;
|
||||
isDefault: boolean;
|
||||
}>();
|
||||
|
||||
onMounted(() => {
|
||||
originalUserScope.value = props.user.scope;
|
||||
createUserDirData.value = props.createUserDir;
|
||||
});
|
||||
|
||||
const passwordPlaceholder = computed(() =>
|
||||
props.isNew ? "" : t("settings.avoidChanges")
|
||||
);
|
||||
const scopePlaceholder = computed(() =>
|
||||
createUserDirData.value ? t("settings.userScopeGenerationPlaceholder") : ""
|
||||
);
|
||||
const displayHomeDirectoryCheckbox = computed(
|
||||
() => props.isNew && createUserDirData.value
|
||||
);
|
||||
|
||||
watch(props.user, () => {
|
||||
if (!props.user.perm.admin) return;
|
||||
props.user.lockPassword = false;
|
||||
});
|
||||
|
||||
watch(createUserDirData, () => {
|
||||
if (props.user?.scope) {
|
||||
props.user.scope = createUserDirData.value
|
||||
? ""
|
||||
: originalUserScope.value ?? "";
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
@ -7,7 +7,7 @@ import { cloneDeep } from "lodash-es";
|
||||
export const useAuthStore = defineStore("auth", {
|
||||
// convert to a function
|
||||
state: (): {
|
||||
user: user | null;
|
||||
user: IUser | null;
|
||||
jwt: string;
|
||||
} => ({
|
||||
user: null,
|
||||
|
||||
@ -1,14 +1,14 @@
|
||||
<template>
|
||||
<errors v-if="error" :errorCode="error.status" />
|
||||
<div class="row" v-else-if="!loading">
|
||||
<div class="row" v-else-if="!layoutStore.loading">
|
||||
<div class="column">
|
||||
<form @submit="save" class="card">
|
||||
<div class="card-title">
|
||||
<h2 v-if="user.id === 0">{{ $t("settings.newUser") }}</h2>
|
||||
<h2 v-else>{{ $t("settings.user") }} {{ user.username }}</h2>
|
||||
<h2 v-if="user?.id === 0">{{ $t("settings.newUser") }}</h2>
|
||||
<h2 v-else>{{ $t("settings.user") }} {{ user?.username }}</h2>
|
||||
</div>
|
||||
|
||||
<div class="card-content">
|
||||
<div class="card-content" v-if="user">
|
||||
<user-form
|
||||
v-model:user="user"
|
||||
v-model:createUserDir="createUserDir"
|
||||
@ -46,7 +46,7 @@
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div v-if="show === 'deleteUser'" class="card floating">
|
||||
<div v-if="layoutStore.show === 'deleteUser'" class="card floating">
|
||||
<div class="card-content">
|
||||
<p>Are you sure you want to delete this user?</p>
|
||||
</div>
|
||||
@ -54,7 +54,7 @@
|
||||
<div class="card-action">
|
||||
<button
|
||||
class="button button--flat button--grey"
|
||||
@click="closeHovers"
|
||||
@click="layoutStore.closeHovers"
|
||||
v-focus
|
||||
:aria-label="$t('buttons.cancel')"
|
||||
:title="$t('buttons.cancel')"
|
||||
@ -69,117 +69,119 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapActions, mapState, mapWritableState } from "pinia";
|
||||
<script setup lang="ts">
|
||||
import { useAuthStore } from "@/stores/auth";
|
||||
import { useLayoutStore } from "@/stores/layout";
|
||||
import { users as api, settings } from "@/api";
|
||||
import UserForm from "@/components/settings/UserForm.vue";
|
||||
import Errors from "@/views/Errors.vue";
|
||||
// @ts-ignore
|
||||
import { cloneDeep } from "lodash-es";
|
||||
import { computed, inject, onMounted, ref, watch } from "vue";
|
||||
import { useRoute, useRouter } from "vue-router";
|
||||
import { useI18n } from "vue-i18n";
|
||||
|
||||
export default {
|
||||
name: "user",
|
||||
components: {
|
||||
UserForm,
|
||||
Errors,
|
||||
},
|
||||
data: () => {
|
||||
return {
|
||||
error: null,
|
||||
originalUser: null,
|
||||
user: {},
|
||||
createUserDir: false,
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.fetchData();
|
||||
},
|
||||
inject: ["$showError", "$showSuccess"],
|
||||
computed: {
|
||||
...mapState(useAuthStore, { sUser: "user" }),
|
||||
...mapState(useLayoutStore, ["show"]),
|
||||
...mapWritableState(useLayoutStore, ["loading"]),
|
||||
isNew() {
|
||||
return this.$route.path === "/settings/users/new";
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
$route: "fetchData",
|
||||
"user.perm.admin": function () {
|
||||
if (!this.user.perm.admin) return;
|
||||
this.user.lockPassword = false;
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
...mapActions(useAuthStore, ["setUser"]),
|
||||
...mapActions(useLayoutStore, ["closeHovers", "showHover"]),
|
||||
async fetchData() {
|
||||
this.loading = true;
|
||||
const error = ref<any | null>(null);
|
||||
const originalUser = ref<IUser | null>(null);
|
||||
const user = ref<IUser | null>(null);
|
||||
const createUserDir = ref<boolean>(false);
|
||||
|
||||
try {
|
||||
if (this.isNew) {
|
||||
let { defaults, createUserDir } = await settings.get();
|
||||
this.createUserDir = createUserDir;
|
||||
this.user = {
|
||||
...defaults,
|
||||
username: "",
|
||||
passsword: "",
|
||||
rules: [],
|
||||
lockPassword: false,
|
||||
id: 0,
|
||||
};
|
||||
} else {
|
||||
const id = this.$route.params.id;
|
||||
this.user = { ...(await api.get(id)) };
|
||||
}
|
||||
} catch (e) {
|
||||
this.error = e;
|
||||
} finally {
|
||||
this.loading = false;
|
||||
}
|
||||
},
|
||||
deletePrompt() {
|
||||
this.showHover("deleteUser");
|
||||
},
|
||||
async deleteUser(event) {
|
||||
event.preventDefault();
|
||||
const $showError = inject("$showError") as TToast;
|
||||
const $showSuccess = inject("$showSuccess") as TToast;
|
||||
|
||||
try {
|
||||
await api.remove(this.user.id);
|
||||
this.$router.push({ path: "/settings/users" });
|
||||
this.$showSuccess(this.$t("settings.userDeleted"));
|
||||
} catch (e) {
|
||||
e.message === "403"
|
||||
? this.$showError(this.$t("errors.forbidden"), false)
|
||||
: this.$showError(e);
|
||||
}
|
||||
},
|
||||
async save(event) {
|
||||
event.preventDefault();
|
||||
let user = {
|
||||
...this.originalUser,
|
||||
...this.user,
|
||||
const authStore = useAuthStore();
|
||||
const layoutStore = useLayoutStore();
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
const { t } = useI18n();
|
||||
|
||||
onMounted(() => {
|
||||
fetchData();
|
||||
});
|
||||
|
||||
const isNew = computed(() => route.path === "/settings/users/new");
|
||||
|
||||
watch(route, () => fetchData());
|
||||
watch(user, () => {
|
||||
if (!user.value?.perm.admin) return;
|
||||
user.value.lockPassword = false;
|
||||
});
|
||||
|
||||
// ...mapState(useAuthStore, { sUser: "user" }),
|
||||
// ...mapState(useLayoutStore, ["show"]),
|
||||
// ...mapWritableState(useLayoutStore, ["loading"]),
|
||||
// ...mapActions(useAuthStore, ["setUser"]),
|
||||
// ...mapActions(useLayoutStore, ["closeHovers", "showHover"]),
|
||||
|
||||
const fetchData = async () => {
|
||||
layoutStore.loading = true;
|
||||
|
||||
try {
|
||||
if (isNew.value) {
|
||||
let { defaults, _createUserDir } = await settings.get();
|
||||
createUserDir.value = _createUserDir;
|
||||
user.value = {
|
||||
...defaults,
|
||||
username: "",
|
||||
passsword: "",
|
||||
rules: [],
|
||||
lockPassword: false,
|
||||
id: 0,
|
||||
};
|
||||
} else {
|
||||
const id = Array.isArray(route.params.id)
|
||||
? route.params.id.join("")
|
||||
: route.params.id;
|
||||
user.value = { ...(await api.get(parseInt(id))) };
|
||||
}
|
||||
} catch (e) {
|
||||
error.value = e;
|
||||
} finally {
|
||||
layoutStore.loading = false;
|
||||
}
|
||||
};
|
||||
|
||||
try {
|
||||
if (this.isNew) {
|
||||
const loc = await api.create(user);
|
||||
this.$router.push({ path: loc });
|
||||
this.$showSuccess(this.$t("settings.userCreated"));
|
||||
} else {
|
||||
await api.update(user);
|
||||
const deletePrompt = () => layoutStore.showHover("deleteUser");
|
||||
|
||||
if (user.id === this.sUser.id) {
|
||||
this.setUser({ ...cloneDeep(user) });
|
||||
}
|
||||
const deleteUser = async (e: Event) => {
|
||||
e.preventDefault();
|
||||
if (user.value === null) {
|
||||
return false;
|
||||
}
|
||||
try {
|
||||
await api.remove(user.value.id);
|
||||
router.push({ path: "/settings/users" });
|
||||
$showSuccess(t("settings.userDeleted"));
|
||||
} catch (e: any) {
|
||||
e.message === "403" ? $showError(t("errors.forbidden")) : $showError(e);
|
||||
}
|
||||
};
|
||||
const save = async (event: Event) => {
|
||||
event.preventDefault();
|
||||
if (originalUser.value === null || user.value === null) {
|
||||
return false;
|
||||
}
|
||||
let newUser: IUser = {
|
||||
...originalUser.value,
|
||||
...user.value,
|
||||
};
|
||||
|
||||
this.$showSuccess(this.$t("settings.userUpdated"));
|
||||
}
|
||||
} catch (e) {
|
||||
this.$showError(e);
|
||||
try {
|
||||
if (isNew.value) {
|
||||
const loc = (await api.create(newUser)) as string;
|
||||
router.push({ path: loc });
|
||||
$showSuccess(t("settings.userCreated"));
|
||||
} else {
|
||||
await api.update(user);
|
||||
|
||||
if (user.value.id === authStore.user?.id) {
|
||||
authStore.setUser({ ...cloneDeep(user) });
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
$showSuccess(t("settings.userUpdated"));
|
||||
}
|
||||
} catch (e: any) {
|
||||
$showError(e);
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user