mirror of
https://github.com/koel/koel
synced 2024-12-21 10:03:10 +00:00
105 lines
3.1 KiB
Vue
105 lines
3.1 KiB
Vue
<template>
|
|
<div class="edit-user" @keydown.esc="maybeClose">
|
|
<SoundBar v-if="loading"/>
|
|
<form class="user-edit" @submit.prevent="submit" v-else data-testid="edit-user-form">
|
|
<header>
|
|
<h1>Edit User</h1>
|
|
</header>
|
|
|
|
<div>
|
|
<div class="form-row">
|
|
<label>Name</label>
|
|
<input title="Name" type="text" name="name" v-model="updateData.name" required v-koel-focus>
|
|
</div>
|
|
<div class="form-row">
|
|
<label>Email</label>
|
|
<input title="Email" type="email" name="email" v-model="updateData.email" required>
|
|
</div>
|
|
<div class="form-row">
|
|
<label>Password</label>
|
|
<input
|
|
name="password"
|
|
placeholder="Leave blank for no changes"
|
|
type="password"
|
|
v-model="updateData.password"
|
|
autocomplete="new-password"
|
|
>
|
|
<p class="help">Min. 10 characters. Must be a mix of characters, numbers, and symbols.</p>
|
|
</div>
|
|
<div class="form-row">
|
|
<label>
|
|
<input type="checkbox" name="is_admin" v-model="updateData.is_admin"> User is an admin
|
|
<TooltipIcon title="Admins can perform administrative tasks like managing users and uploading songs."/>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<footer>
|
|
<Btn class="btn-update" type="submit">Update</Btn>
|
|
<Btn class="btn-cancel" @click.prevent="maybeClose" white data-test="cancel-btn">Cancel</Btn>
|
|
</footer>
|
|
</form>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { defineAsyncComponent, onMounted, reactive, ref, toRefs } from 'vue'
|
|
import { isEqual } from 'lodash'
|
|
import { alerts, parseValidationError } from '@/utils'
|
|
import { UpdateUserData, userStore } from '@/stores'
|
|
|
|
const Btn = defineAsyncComponent(() => import('@/components/ui/Btn.vue'))
|
|
const SoundBar = defineAsyncComponent(() => import('@/components/ui/sound-bar.vue'))
|
|
const TooltipIcon = defineAsyncComponent(() => import('@/components/ui/tooltip-icon.vue'))
|
|
|
|
const props = defineProps<{ user: User }>()
|
|
const { user } = toRefs(props)
|
|
|
|
const loading = ref(false)
|
|
const updateData = reactive({} as unknown as UpdateUserData)
|
|
const originalData = reactive({} as unknown as UpdateUserData)
|
|
|
|
const submit = async () => {
|
|
loading.value = true
|
|
|
|
try {
|
|
await userStore.update(user.value, updateData)
|
|
alerts.success('User profile updated.')
|
|
close()
|
|
} catch (err: any) {
|
|
const msg = err.response.status === 422 ? parseValidationError(err.response.data)[0] : 'Unknown error.'
|
|
alerts.error(msg)
|
|
} finally {
|
|
loading.value = false
|
|
}
|
|
}
|
|
|
|
const emit = defineEmits(['close'])
|
|
|
|
const close = () => emit('close')
|
|
|
|
const maybeClose = () => {
|
|
if (isEqual(originalData, updateData)) {
|
|
close()
|
|
return
|
|
}
|
|
|
|
alerts.confirm('Discard all changes?', close)
|
|
}
|
|
|
|
onMounted(() => {
|
|
Object.assign(updateData, {
|
|
name: user.value.name,
|
|
email: user.value.email,
|
|
is_admin: user.value.is_admin
|
|
})
|
|
|
|
Object.assign(originalData, updateData)
|
|
})
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.help {
|
|
margin-top: .75rem;
|
|
}
|
|
</style>
|