131 lines
3.4 KiB
Vue
131 lines
3.4 KiB
Vue
<template>
|
|
<errors v-if="error" :errorCode="error.status" />
|
|
<form @submit="save" class="card active">
|
|
<div class="card-title">
|
|
<h2 v-if="user.id === 0">{{ $t("settings.newUser") }}</h2>
|
|
<h2 v-else>{{ $t("settings.user") }} {{ user.username }}</h2>
|
|
</div>
|
|
|
|
<div class="card-content">
|
|
<user-form
|
|
v-model:user="user"
|
|
:createUserDir="createUserDir"
|
|
:isDefault="false"
|
|
:isNew="isNew"
|
|
@update:createUserDir="(updatedDir) => (createUserDir = updatedDir)"
|
|
/>
|
|
</div>
|
|
|
|
<div class="card-action">
|
|
<button
|
|
v-if="!isNew && user.perm.admin"
|
|
@click.prevent="deletePrompt"
|
|
type="button"
|
|
class="button button--flat button--red"
|
|
:aria-label="$t('buttons.delete')"
|
|
:title="$t('buttons.delete')"
|
|
>
|
|
{{ $t("buttons.delete") }}
|
|
</button>
|
|
<input class="button button--flat" type="submit" :value="$t('buttons.save')" />
|
|
</div>
|
|
</form>
|
|
</template>
|
|
|
|
<script>
|
|
import { getters, mutations, state } from "@/store";
|
|
import { usersApi, settingsApi } from "@/api";
|
|
import UserForm from "@/components/settings/UserForm.vue";
|
|
import Errors from "@/views/Errors.vue";
|
|
import { notify } from "@/notify";
|
|
|
|
export default {
|
|
name: "user",
|
|
components: {
|
|
UserForm,
|
|
Errors,
|
|
},
|
|
data() {
|
|
return {
|
|
error: null,
|
|
originalUser: null,
|
|
user: {
|
|
scope: ".",
|
|
username: "",
|
|
perm: { admin: false },
|
|
},
|
|
showDelete: false,
|
|
createUserDir: false,
|
|
};
|
|
},
|
|
created() {
|
|
this.fetchData();
|
|
},
|
|
computed: {
|
|
settings() {
|
|
return state.settings;
|
|
},
|
|
isNew() {
|
|
return getters.routePath().endsWith("settings/users/new");
|
|
},
|
|
userPayload() {
|
|
return JSON.parse(JSON.stringify(this.user)); // Deep copy for safety
|
|
},
|
|
},
|
|
methods: {
|
|
async fetchData() {
|
|
mutations.setLoading("users", true);
|
|
try {
|
|
if (this.isNew) {
|
|
let { defaults, createUserDir } = await settingsApi.get();
|
|
this.createUserDir = createUserDir;
|
|
this.user = {
|
|
...defaults,
|
|
username: "",
|
|
password: "",
|
|
rules: [],
|
|
lockPassword: false,
|
|
id: 0,
|
|
};
|
|
} else {
|
|
const id = Array.isArray(state.route.params.id)
|
|
? state.route.params.id.join("")
|
|
: state.route.params.id;
|
|
if (id === undefined) {
|
|
return;
|
|
}
|
|
this.user = { ...(await usersApi.get(id)) };
|
|
}
|
|
} catch (e) {
|
|
notify.showError(e);
|
|
this.error = e;
|
|
} finally {
|
|
mutations.setLoading("users", false);
|
|
}
|
|
},
|
|
deletePrompt() {
|
|
mutations.showHover({ name: "deleteUser", props: { user: this.user } });
|
|
},
|
|
async save(event) {
|
|
event.preventDefault();
|
|
try {
|
|
if (this.isNew) {
|
|
const loc = await usersApi.create(this.userPayload); // Use the computed property
|
|
this.$router.push({ path: loc });
|
|
notify.showSuccess(this.$t("settings.userCreated"));
|
|
} else {
|
|
let which = ["all"];
|
|
if (!this.user.perm.admin) {
|
|
which = ["password"]
|
|
}
|
|
await usersApi.update(this.userPayload,which);
|
|
notify.showSuccess(this.$t("settings.userUpdated"));
|
|
}
|
|
} catch (e) {
|
|
notify.showError(e);
|
|
}
|
|
},
|
|
},
|
|
};
|
|
</script>
|