M1CK431
1 year ago
parent
1e7ec18a2f
commit
5a16af40fd
@ -0,0 +1,94 @@
|
|||||||
|
<template>
|
||||||
|
<h4 class="mt-4">
|
||||||
|
{{ $t("Create an admin account") }}
|
||||||
|
</h4>
|
||||||
|
|
||||||
|
<form data-cy="setup-form" @submit.prevent="create">
|
||||||
|
<div class="my-3">
|
||||||
|
<label class="form-label d-block">
|
||||||
|
{{ $t("Username") }}
|
||||||
|
<input
|
||||||
|
v-model="username"
|
||||||
|
type="text"
|
||||||
|
class="form-control mt-2"
|
||||||
|
:placeholder="$t('Username')"
|
||||||
|
required
|
||||||
|
:disabled="creating"
|
||||||
|
data-cy="username-input"
|
||||||
|
>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="mb-3">
|
||||||
|
<label class="form-label d-block">
|
||||||
|
{{ $t("Password") }}
|
||||||
|
<input
|
||||||
|
v-model="password"
|
||||||
|
type="password"
|
||||||
|
class="form-control mt-2"
|
||||||
|
:placeholder="$t('Password')"
|
||||||
|
required
|
||||||
|
:disabled="creating"
|
||||||
|
data-cy="password-input"
|
||||||
|
>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="mb-3">
|
||||||
|
<label class="form-label d-block">
|
||||||
|
{{ $t("Repeat Password") }}
|
||||||
|
<input
|
||||||
|
v-model="repeatPassword"
|
||||||
|
type="password"
|
||||||
|
class="form-control mt-2"
|
||||||
|
:placeholder="$t('Repeat Password')"
|
||||||
|
required
|
||||||
|
:disabled="creating"
|
||||||
|
data-cy="password-repeat-input"
|
||||||
|
>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button class="btn btn-primary" type="submit" :disabled="creating" data-cy="submit-create-admin-form">
|
||||||
|
<span v-show="creating" class="spinner-border spinner-border-sm" role="status" aria-hidden="true" />
|
||||||
|
{{ $t("Create") }}
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { useToast } from "vue-toastification";
|
||||||
|
const toast = useToast();
|
||||||
|
|
||||||
|
export default {
|
||||||
|
data: () => ({
|
||||||
|
creating: false,
|
||||||
|
username: "",
|
||||||
|
password: "",
|
||||||
|
repeatPassword: "",
|
||||||
|
}),
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
/**
|
||||||
|
* Create an admin account
|
||||||
|
* @returns {void}
|
||||||
|
*/
|
||||||
|
create() {
|
||||||
|
this.creating = true;
|
||||||
|
|
||||||
|
if (this.password !== this.repeatPassword) {
|
||||||
|
toast.error(this.$t("PasswordsDoNotMatch"));
|
||||||
|
this.creating = false;
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.$root.getSocket().emit("setup", this.username, this.password, (res) => {
|
||||||
|
this.creating = false;
|
||||||
|
this.$root.toastRes(res);
|
||||||
|
|
||||||
|
res.ok && this.$router.push({ name: "settings.users" });
|
||||||
|
});
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
@ -0,0 +1,205 @@
|
|||||||
|
<template>
|
||||||
|
<div v-if="loading" class="d-flex align-items-center justify-content-center my-3 spinner">
|
||||||
|
<font-awesome-icon icon="spinner" size="2x" spin />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<template v-else>
|
||||||
|
<h5 class="my-4 settings-subheading">{{ $t("Identity") }}</h5>
|
||||||
|
<form @submit.prevent="save({ username })">
|
||||||
|
<label class="form-label d-block mb-3">
|
||||||
|
{{ $t("Username") }}
|
||||||
|
<input
|
||||||
|
v-model="username"
|
||||||
|
:placeholder="$t('Username')"
|
||||||
|
class="form-control mt-2"
|
||||||
|
required
|
||||||
|
:disabled="saving"
|
||||||
|
/>
|
||||||
|
</label>
|
||||||
|
|
||||||
|
<button class="btn btn-primary" type="submit" :disabled="saving">
|
||||||
|
<span v-show="saving" class="spinner-border spinner-border-sm" role="status" aria-hidden="true" />
|
||||||
|
{{ $t("Update Username") }}
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
|
||||||
|
<h5 class="mt-5 mb-4 settings-subheading">{{ $t("Change Password") }}</h5>
|
||||||
|
<form class="mb-3" @submit.prevent="savePassword">
|
||||||
|
<div class="mb-3">
|
||||||
|
<label class="form-label d-block">
|
||||||
|
{{ $t("Current Password") }}
|
||||||
|
<input
|
||||||
|
v-model="currentPassword"
|
||||||
|
type="password"
|
||||||
|
:placeholder="$t('Current Password')"
|
||||||
|
class="form-control mt-2"
|
||||||
|
required
|
||||||
|
:disabled="savingPassword"
|
||||||
|
/>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="mb-3">
|
||||||
|
<label class="form-label d-block">
|
||||||
|
{{ $t("New Password") }}
|
||||||
|
<input
|
||||||
|
v-model="newPassword"
|
||||||
|
type="password"
|
||||||
|
:placeholder="$t('New Password')"
|
||||||
|
class="form-control mt-2"
|
||||||
|
required
|
||||||
|
:disabled="savingPassword"
|
||||||
|
/>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="mb-3">
|
||||||
|
<label class="form-label d-block">
|
||||||
|
{{ $t("Repeat New Password") }}
|
||||||
|
<input
|
||||||
|
v-model="repeatNewPassword"
|
||||||
|
type="password"
|
||||||
|
:placeholder="$t('Repeat New Password')"
|
||||||
|
class="form-control mt-2"
|
||||||
|
required
|
||||||
|
:disabled="savingPassword"
|
||||||
|
/>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button class="btn btn-primary" type="submit" :disabled="savingPassword">
|
||||||
|
<span v-show="savingPassword" class="spinner-border spinner-border-sm" role="status" aria-hidden="true" />
|
||||||
|
{{ $t("Update Password") }}
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
|
||||||
|
<h5 class="mt-5 mb-4 settings-subheading">{{ $t("Permissions") }}</h5>
|
||||||
|
<div class="form-check form-switch">
|
||||||
|
<label class="form-check-label">
|
||||||
|
<input
|
||||||
|
:checked="active"
|
||||||
|
class="form-check-input"
|
||||||
|
style="scale: 1.4; cursor: pointer;"
|
||||||
|
type="checkbox"
|
||||||
|
:disabled="saving"
|
||||||
|
@click="debounceCheckboxClick(() => { active = !active; save({ active }); })"
|
||||||
|
>
|
||||||
|
<div class="ps-2">{{ $t("Active") }}</div>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { Debounce } from "../../../util-frontend.js";
|
||||||
|
import { useToast } from "vue-toastification";
|
||||||
|
const toast = useToast();
|
||||||
|
|
||||||
|
export default {
|
||||||
|
props: {
|
||||||
|
id: {
|
||||||
|
type: String,
|
||||||
|
required: true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
data: () => ({
|
||||||
|
loading: false,
|
||||||
|
username: "",
|
||||||
|
saving: false,
|
||||||
|
currentPassword: "",
|
||||||
|
newPassword: "",
|
||||||
|
repeatNewPassword: "",
|
||||||
|
savingPassword: false,
|
||||||
|
active: false
|
||||||
|
}),
|
||||||
|
|
||||||
|
mounted() {
|
||||||
|
this.getUser();
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
// Used to ignore one of the two "click" events fired when clicking on the checkbox label
|
||||||
|
debounceCheckboxClick: new Debounce(),
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Get user from server
|
||||||
|
* @returns {void}
|
||||||
|
*/
|
||||||
|
getUser() {
|
||||||
|
this.loading = true;
|
||||||
|
this.$root.getSocket().emit("getUser", this.id, (res) => {
|
||||||
|
this.loading = false;
|
||||||
|
if (res.ok) {
|
||||||
|
const { username, active } = res.user;
|
||||||
|
|
||||||
|
this.username = username;
|
||||||
|
this.active = active;
|
||||||
|
} else {
|
||||||
|
toast.error(res.msg);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Check new passwords match before saving it
|
||||||
|
* @returns {void}
|
||||||
|
*/
|
||||||
|
savePassword() {
|
||||||
|
this.savingPassword = true;
|
||||||
|
const { currentPassword, newPassword, repeatNewPassword } = this;
|
||||||
|
|
||||||
|
if (newPassword !== repeatNewPassword) {
|
||||||
|
toast.error(this.$t("PasswordsDoNotMatch"));
|
||||||
|
this.savingPassword = false;
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.$root
|
||||||
|
.getSocket()
|
||||||
|
.emit(
|
||||||
|
"changePassword",
|
||||||
|
this.id,
|
||||||
|
{
|
||||||
|
currentPassword,
|
||||||
|
newPassword
|
||||||
|
},
|
||||||
|
(res) => {
|
||||||
|
this.savingPassword = false;
|
||||||
|
this.$root.toastRes(res);
|
||||||
|
|
||||||
|
if (res.ok) {
|
||||||
|
this.currentPassword = "";
|
||||||
|
this.newPassword = "";
|
||||||
|
this.repeatNewPassword = "";
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Save user changes
|
||||||
|
* @param {object} user user to save
|
||||||
|
* @param {string} [user.username] username used as login identifier.
|
||||||
|
* @param {boolean} [user.active] is the user authorized to login?
|
||||||
|
* @returns {void}
|
||||||
|
*/
|
||||||
|
save(user) {
|
||||||
|
this.saving = true;
|
||||||
|
|
||||||
|
this.$root
|
||||||
|
.getSocket()
|
||||||
|
.emit(
|
||||||
|
"saveUser",
|
||||||
|
{
|
||||||
|
id: this.id,
|
||||||
|
...user
|
||||||
|
},
|
||||||
|
(res) => {
|
||||||
|
this.saving = false;
|
||||||
|
this.$root.toastRes(res);
|
||||||
|
});
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
@ -0,0 +1,153 @@
|
|||||||
|
<template>
|
||||||
|
<div class="my-4">
|
||||||
|
<div class="mx-0 mx-lg-4 pt-1 mb-4">
|
||||||
|
<button class="btn btn-primary" @click="$router.push({ name: 'settings.users.add' })">
|
||||||
|
<font-awesome-icon icon="plus" /> {{ $t("Add New User") }}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div v-if="loading" class="d-flex align-items-center justify-content-center my-3 spinner">
|
||||||
|
<font-awesome-icon icon="spinner" size="2x" spin />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div v-else class="my-3">
|
||||||
|
<RouterLink
|
||||||
|
v-for="({ id, username, active }, index) in usersList"
|
||||||
|
:key="id"
|
||||||
|
class="d-flex align-items-center mx-0 mx-lg-4 py-1 text-decoration-none users-list-row"
|
||||||
|
:to="{ name: 'settings.users.edit', params: { id } }"
|
||||||
|
>
|
||||||
|
<div class="col-10 col-sm-5 m-2 flex-shrink-1 fw-bold">
|
||||||
|
{{ username }}
|
||||||
|
</div>
|
||||||
|
<div class="col-5 px-1 flex-shrink-1 d-none d-sm-flex gap-2 align-items-center">
|
||||||
|
<font-awesome-icon :class="active ? 'text-success' : 'text-muted'" :icon="active ? 'check-circle' : 'times-circle'" />
|
||||||
|
<div>{{ $t(active ? "Active" : "Inactive") }}</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-2 pe-2 pe-lg-3 d-flex justify-content-end">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
class="btn-ban-user btn ms-2 py-1"
|
||||||
|
:class="active ? 'btn-outline-danger' : 'btn-outline-success'"
|
||||||
|
:disabled="processing"
|
||||||
|
@click.prevent="active ? disableConfirm(usersList[index]) : toggleActiveUser(usersList[index])"
|
||||||
|
>
|
||||||
|
<font-awesome-icon class="" :icon="active ? 'user-slash' : 'user-check'" />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</RouterLink>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Confirm
|
||||||
|
ref="confirmDisable"
|
||||||
|
btn-style="btn-danger"
|
||||||
|
:yes-text="$t('Yes')"
|
||||||
|
:no-text="$t('No')"
|
||||||
|
@yes="toggleActiveUser(disablingUser)"
|
||||||
|
@no="disablingUser = null"
|
||||||
|
>
|
||||||
|
{{ $t("confirmDisableUserMsg") }}
|
||||||
|
</Confirm>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { useToast } from "vue-toastification";
|
||||||
|
import Confirm from "../../Confirm.vue";
|
||||||
|
const toast = useToast();
|
||||||
|
|
||||||
|
export default {
|
||||||
|
components: { Confirm },
|
||||||
|
|
||||||
|
data: () => ({
|
||||||
|
loading: false,
|
||||||
|
processing: false,
|
||||||
|
usersList: null,
|
||||||
|
disablingUser: null,
|
||||||
|
}),
|
||||||
|
|
||||||
|
mounted() {
|
||||||
|
this.getUsers();
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
/**
|
||||||
|
* Get list of users from server
|
||||||
|
* @returns {void}
|
||||||
|
*/
|
||||||
|
getUsers() {
|
||||||
|
this.loading = true;
|
||||||
|
this.$root.getSocket().emit("getUsers", (res) => {
|
||||||
|
this.loading = false;
|
||||||
|
if (res.ok) {
|
||||||
|
this.usersList = res.users;
|
||||||
|
} else {
|
||||||
|
toast.error(res.msg);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Show confirmation for disabling a user
|
||||||
|
* @param {object} user the user to confirm disable in the local usersList
|
||||||
|
* @returns {void}
|
||||||
|
*/
|
||||||
|
disableConfirm(user) {
|
||||||
|
this.disablingUser = user;
|
||||||
|
this.$refs.confirmDisable.show();
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Disable a user from server
|
||||||
|
* @param {object} user the user to disable in the local usersList
|
||||||
|
* @param {boolean} user.active is the user authorized to login?
|
||||||
|
* @returns {void}
|
||||||
|
*/
|
||||||
|
toggleActiveUser({ active, ...rest }) {
|
||||||
|
this.processing = true;
|
||||||
|
this.$root.getSocket().emit(
|
||||||
|
"saveUser",
|
||||||
|
{
|
||||||
|
...rest,
|
||||||
|
active: !active
|
||||||
|
},
|
||||||
|
(res) => {
|
||||||
|
this.$root.toastRes(res);
|
||||||
|
this.processing = false;
|
||||||
|
this.disablingUser &&= null;
|
||||||
|
|
||||||
|
if (res.ok) {
|
||||||
|
this.getUsers();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
@import "../../../assets/vars.scss";
|
||||||
|
|
||||||
|
.btn-ban-user {
|
||||||
|
padding-left: 7px;
|
||||||
|
padding-right: 7px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.users-list-row {
|
||||||
|
cursor: pointer;
|
||||||
|
border-top: 1px solid rgba(0, 0, 0, 0.125);
|
||||||
|
|
||||||
|
.dark & {
|
||||||
|
border-top: 1px solid $dark-border-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: $highlight-white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dark &:hover {
|
||||||
|
background-color: $dark-bg2;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
@ -0,0 +1,29 @@
|
|||||||
|
import { h } from "vue";
|
||||||
|
import { RouterView } from "vue-router";
|
||||||
|
|
||||||
|
// Needed for settings enter/leave CSS animation
|
||||||
|
const AnimatedRouterView = () => h("div", [ h(RouterView) ]);
|
||||||
|
AnimatedRouterView.displayName = "AnimatedRouterView";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
path: "users",
|
||||||
|
component: AnimatedRouterView,
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
path: "",
|
||||||
|
name: "settings.users",
|
||||||
|
component: () => import("./Users.vue")
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: "add",
|
||||||
|
name: "settings.users.add",
|
||||||
|
component: () => import("./AddUser.vue")
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: "edit/:id",
|
||||||
|
name: "settings.users.edit",
|
||||||
|
props: true,
|
||||||
|
component: () => import("./EditUser.vue")
|
||||||
|
},
|
||||||
|
]
|
||||||
|
};
|
||||||
Loading…
Reference in new issue