123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417 |
- <script setup lang="ts">
- import { defineAsyncComponent, watch, onMounted, onBeforeUnmount } from "vue";
- import Toast from "toasters";
- import validation from "@/validation";
- import { useWebsocketsStore } from "@/stores/websockets";
- import { useModalsStore } from "@/stores/modals";
- import { useUserAuthStore } from "@/stores/userAuth";
- import { useForm } from "@/composables/useForm";
- const Modal = defineAsyncComponent(() => import("@/components/Modal.vue"));
- const QuickConfirm = defineAsyncComponent(
- () => import("@/components/QuickConfirm.vue")
- );
- const props = defineProps({
- modalUuid: { type: String, required: true },
- userId: { type: String, required: true }
- });
- const { socket } = useWebsocketsStore();
- const { closeCurrentModal, preventCloseUnsaved } = useModalsStore();
- const { hasPermission } = useUserAuthStore();
- const {
- inputs: usernameInputs,
- unsavedChanges: usernameUnsaved,
- save: saveUsername,
- setOriginalValue: setUsername
- } = useForm(
- {
- username: {
- value: "",
- validate: value => {
- if (!validation.isLength(value, 2, 32))
- return "Username must have between 2 and 32 characters.";
- if (!validation.regex.custom("a-zA-Z0-9_-").test(value))
- return "Invalid username format. Allowed characters: a-z, A-Z, 0-9, _ and -.";
- return true;
- }
- }
- },
- ({ status, messages, values }, resolve, reject) => {
- if (status === "success")
- socket.dispatch(
- "users.updateUsername",
- props.userId,
- values.username,
- res => {
- if (res.status === "success") {
- resolve();
- new Toast(res.message);
- } else reject(new Error(res.message));
- }
- );
- else {
- Object.values(messages).forEach(message => {
- new Toast({ content: message, timeout: 8000 });
- });
- resolve();
- }
- },
- {
- modalUuid: props.modalUuid,
- preventCloseUnsaved: false
- }
- );
- const {
- inputs: emailInputs,
- unsavedChanges: emailUnsaved,
- save: saveEmail,
- setOriginalValue: setEmail
- } = useForm(
- {
- email: {
- value: "",
- validate: value => {
- if (!validation.isLength(value, 3, 254))
- return "Email must have between 3 and 254 characters.";
- if (
- value.indexOf("@") !== value.lastIndexOf("@") ||
- !validation.regex.emailSimple.test(value) ||
- !validation.regex.ascii.test(value)
- )
- return "Invalid email format.";
- return true;
- }
- }
- },
- ({ status, messages, values }, resolve, reject) => {
- if (status === "success")
- socket.dispatch(
- "users.updateEmail",
- props.userId,
- values.email,
- res => {
- if (res.status === "success") {
- resolve();
- new Toast(res.message);
- } else reject(new Error(res.message));
- }
- );
- else {
- Object.values(messages).forEach(message => {
- new Toast({ content: message, timeout: 8000 });
- });
- resolve();
- }
- },
- {
- modalUuid: props.modalUuid,
- preventCloseUnsaved: false
- }
- );
- const {
- inputs: roleInputs,
- unsavedChanges: roleUnsaved,
- save: saveRole,
- setOriginalValue: setRole
- } = useForm(
- { role: "" },
- ({ status, messages, values }, resolve, reject) => {
- if (status === "success")
- socket.dispatch(
- "users.updateRole",
- props.userId,
- values.role,
- res => {
- if (res.status === "success") {
- resolve();
- new Toast(res.message);
- } else reject(new Error(res.message));
- }
- );
- else {
- Object.values(messages).forEach(message => {
- new Toast({ content: message, timeout: 8000 });
- });
- resolve();
- }
- },
- {
- modalUuid: props.modalUuid,
- preventCloseUnsaved: false
- }
- );
- const {
- inputs: banInputs,
- unsavedChanges: banUnsaved,
- save: saveBan
- } = useForm(
- {
- reason: {
- value: "",
- validate: value => {
- if (!validation.isLength(value, 1, 64))
- return "Reason must have between 1 and 64 characters.";
- if (!validation.regex.ascii.test(value))
- return "Invalid reason format. Only ascii characters are allowed.";
- return true;
- }
- },
- expiresAt: "1h"
- },
- ({ status, messages, values }, resolve, reject) => {
- if (status === "success")
- socket.dispatch(
- "users.banUserById",
- props.userId,
- values.reason,
- values.expiresAt,
- res => {
- new Toast(res.message);
- if (res.status === "success") resolve();
- else reject(new Error(res.message));
- }
- );
- else {
- Object.values(messages).forEach(message => {
- new Toast({ content: message, timeout: 8000 });
- });
- resolve();
- }
- },
- {
- modalUuid: props.modalUuid,
- preventCloseUnsaved: false
- }
- );
- const resendVerificationEmail = () => {
- socket.dispatch(`users.resendVerifyEmail`, props.userId, res => {
- new Toast(res.message);
- });
- };
- const requestPasswordReset = () => {
- socket.dispatch(`users.adminRequestPasswordReset`, props.userId, res => {
- new Toast(res.message);
- });
- };
- const removeAccount = () => {
- socket.dispatch(`users.adminRemove`, props.userId, res => {
- new Toast(res.message);
- });
- };
- const removeSessions = () => {
- socket.dispatch(`users.removeSessions`, props.userId, res => {
- new Toast(res.message);
- });
- };
- watch(
- () => hasPermission("users.get") && hasPermission("users.update"),
- value => {
- if (!value) closeCurrentModal(true);
- }
- );
- onMounted(() => {
- preventCloseUnsaved[props.modalUuid] = () =>
- usernameUnsaved.value.length +
- emailUnsaved.value.length +
- roleUnsaved.value.length +
- banUnsaved.value.length >
- 0;
- socket.onConnect(() => {
- socket.dispatch(`users.getUserFromId`, props.userId, res => {
- if (res.status === "success") {
- setUsername({ username: res.data.username });
- setEmail({ email: res.data.email.address });
- setRole({ role: res.data.role });
- socket.dispatch("apis.joinRoom", `edit-user.${props.userId}`);
- } else {
- new Toast("User with that ID not found");
- closeCurrentModal();
- }
- });
- });
- socket.on(
- "event:user.removed",
- res => {
- if (res.data.userId === props.userId) closeCurrentModal(true);
- },
- { modalUuid: props.modalUuid }
- );
- });
- onBeforeUnmount(() => {
- delete preventCloseUnsaved[props.modalUuid];
- socket.dispatch("apis.leaveRoom", `edit-user.${props.userId}`, () => {});
- });
- </script>
- <template>
- <div>
- <modal title="Edit User">
- <template #body>
- <div class="section">
- <label class="label"> Change username </label>
- <p class="control is-grouped">
- <span class="control is-expanded">
- <input
- v-model="usernameInputs['username'].value"
- class="input"
- type="text"
- placeholder="Username"
- autofocus
- />
- </span>
- <span
- v-if="hasPermission('users.update')"
- class="control"
- >
- <a class="button is-info" @click="saveUsername()"
- >Update Username</a
- >
- </span>
- </p>
- <label class="label"> Change email address </label>
- <p class="control is-grouped">
- <span class="control is-expanded">
- <input
- v-model="emailInputs['email'].value"
- class="input"
- type="text"
- placeholder="Email Address"
- autofocus
- :disabled="
- !hasPermission('users.update.restricted')
- "
- />
- </span>
- <span
- v-if="hasPermission('users.update.restricted')"
- class="control"
- >
- <a class="button is-info" @click="saveEmail()"
- >Update Email Address</a
- >
- </span>
- </p>
- <label class="label"> Change user role </label>
- <div class="control is-grouped">
- <div class="control is-expanded select">
- <select
- v-model="roleInputs['role'].value"
- :disabled="
- !hasPermission('users.update.restricted')
- "
- >
- <option>user</option>
- <option>moderator</option>
- <option>admin</option>
- </select>
- </div>
- <p
- v-if="hasPermission('users.update.restricted')"
- class="control"
- >
- <a class="button is-info" @click="saveRole()"
- >Update Role</a
- >
- </p>
- </div>
- </div>
- <div v-if="hasPermission('users.ban')" class="section">
- <label class="label"> Punish/Ban User </label>
- <p class="control is-grouped">
- <span class="control select">
- <select v-model="banInputs['expiresAt'].value">
- <option value="1h">1 Hour</option>
- <option value="12h">12 Hours</option>
- <option value="1d">1 Day</option>
- <option value="1w">1 Week</option>
- <option value="1m">1 Month</option>
- <option value="3m">3 Months</option>
- <option value="6m">6 Months</option>
- <option value="1y">1 Year</option>
- </select>
- </span>
- <span class="control is-expanded">
- <input
- v-model="banInputs['reason'].value"
- class="input"
- type="text"
- placeholder="Ban reason"
- autofocus
- />
- </span>
- <span class="control">
- <a class="button is-danger" @click="saveBan()">
- Ban user
- </a>
- </span>
- </p>
- </div>
- </template>
- <template #footer>
- <quick-confirm
- v-if="hasPermission('users.resendVerifyEmail')"
- @confirm="resendVerificationEmail()"
- >
- <a class="button is-warning"> Resend verification email </a>
- </quick-confirm>
- <quick-confirm
- v-if="hasPermission('users.requestPasswordReset')"
- @confirm="requestPasswordReset()"
- >
- <a class="button is-warning"> Request password reset </a>
- </quick-confirm>
- <quick-confirm
- v-if="hasPermission('users.remove.sessions')"
- @confirm="removeSessions()"
- >
- <a class="button is-warning"> Remove all sessions </a>
- </quick-confirm>
- <quick-confirm
- v-if="hasPermission('users.remove')"
- @confirm="removeAccount()"
- >
- <a class="button is-danger"> Remove account </a>
- </quick-confirm>
- </template>
- </modal>
- </div>
- </template>
- <style lang="less" scoped>
- .night-mode .section {
- background-color: transparent !important;
- }
- .section {
- padding: 15px 0 !important;
- }
- .save-changes {
- color: var(--white);
- }
- .select:after {
- border-color: var(--primary-color);
- }
- </style>
|