koel/resources/assets/js/components/user/AddUserForm.vue

96 lines
2.7 KiB
Vue
Raw Normal View History

2022-04-15 14:24:30 +00:00
<template>
<form @submit.prevent="submit" @keydown.esc="maybeClose">
<header>
<h1>Add New User</h1>
</header>
2022-04-15 14:24:30 +00:00
2024-04-04 22:20:42 +00:00
<main class="space-y-5">
<FormRow>
<template #label>Name</template>
<TextInput v-model="newUser.name" v-koel-focus name="name" required title="Name" />
</FormRow>
<FormRow>
<template #label>Email</template>
<TextInput v-model="newUser.email" name="email" required title="Email" type="email" />
</FormRow>
<FormRow>
<template #label>Password</template>
<TextInput
v-model="newUser.password"
autocomplete="new-password"
name="password"
required
title="Password"
type="password"
/>
<template #help>Min. 10 characters. Should be a mix of characters, numbers, and symbols.</template>
</FormRow>
<FormRow>
<div>
2024-04-23 21:01:27 +00:00
<CheckBox v-model="newUser.is_admin" name="is_admin" />
User is an admin
2022-12-02 16:17:37 +00:00
<TooltipIcon title="Admins can perform administrative tasks like managing users and uploading songs." />
2024-04-04 22:20:42 +00:00
</div>
</FormRow>
</main>
2022-04-15 14:24:30 +00:00
<footer>
<Btn class="btn-add" type="submit">Save</Btn>
<Btn class="btn-cancel" white @click.prevent="maybeClose">Cancel</Btn>
</footer>
</form>
2022-04-15 14:24:30 +00:00
</template>
2022-04-15 17:00:08 +00:00
<script lang="ts" setup>
2022-04-15 14:24:30 +00:00
import { isEqual } from 'lodash'
import { reactive } from 'vue'
import type { CreateUserData } from '@/stores'
import { userStore } from '@/stores'
import { useDialogBox, useErrorHandler, useMessageToaster, useOverlay } from '@/composables'
2022-04-15 14:24:30 +00:00
2024-04-04 22:20:42 +00:00
import Btn from '@/components/ui/form/Btn.vue'
import TooltipIcon from '@/components/ui/TooltipIcon.vue'
2024-04-04 22:20:42 +00:00
import CheckBox from '@/components/ui/form/CheckBox.vue'
import TextInput from '@/components/ui/form/TextInput.vue'
import FormRow from '@/components/ui/form/FormRow.vue'
2022-04-15 14:24:30 +00:00
const emit = defineEmits<{ (e: 'close'): void }>()
const { showOverlay, hideOverlay } = useOverlay()
const { toastSuccess } = useMessageToaster()
const { showConfirmDialog } = useDialogBox()
2022-04-23 21:36:19 +00:00
const emptyUserData: CreateUserData = {
2022-04-15 17:00:08 +00:00
name: '',
email: '',
password: '',
is_admin: false,
2022-04-23 21:36:19 +00:00
}
2022-04-15 14:24:30 +00:00
2022-04-23 21:36:19 +00:00
const newUser = reactive<CreateUserData>(Object.assign({}, emptyUserData))
2022-04-15 14:24:30 +00:00
const close = () => emit('close')
2022-04-15 17:00:08 +00:00
const submit = async () => {
showOverlay()
2022-04-15 14:24:30 +00:00
2022-04-15 17:00:08 +00:00
try {
await userStore.store(newUser)
toastSuccess(`New user "${newUser.name}" created.`)
2022-04-15 17:00:08 +00:00
close()
} catch (error: unknown) {
useErrorHandler('dialog').handleHttpError(error)
2022-04-15 17:00:08 +00:00
} finally {
hideOverlay()
2022-04-15 17:00:08 +00:00
}
}
2022-04-15 14:24:30 +00:00
const maybeClose = async () => {
2022-04-15 17:00:08 +00:00
if (isEqual(newUser, emptyUserData)) {
close()
return
2022-04-15 14:24:30 +00:00
}
2022-04-15 17:00:08 +00:00
await showConfirmDialog('Discard all changes?') && close()
2022-04-15 17:00:08 +00:00
}
2022-04-15 14:24:30 +00:00
</script>