mirror of
https://github.com/h44z/wg-portal.git
synced 2025-10-05 07:56:17 +00:00
219 lines
8.6 KiB
Vue
219 lines
8.6 KiB
Vue
<script setup>
|
|
import Modal from "./Modal.vue";
|
|
import {userStore} from "@/stores/users";
|
|
import {computed, ref, watch} from "vue";
|
|
import { useI18n } from 'vue-i18n';
|
|
import { notify } from "@kyvg/vue3-notification";
|
|
import {freshUser} from "@/helpers/models";
|
|
import {settingsStore} from "@/stores/settings";
|
|
|
|
const { t } = useI18n()
|
|
|
|
const users = userStore()
|
|
const settings = settingsStore()
|
|
|
|
const props = defineProps({
|
|
userId: String,
|
|
visible: Boolean,
|
|
})
|
|
|
|
const emit = defineEmits(['close'])
|
|
|
|
const selectedUser = computed(() => {
|
|
return users.Find(props.userId)
|
|
})
|
|
|
|
const title = computed(() => {
|
|
if (!props.visible) {
|
|
return "" // otherwise interfaces.GetSelected will die...
|
|
}
|
|
if (selectedUser.value) {
|
|
return t("modals.user-edit.headline-edit") + " " + selectedUser.value.Identifier
|
|
}
|
|
return t("modals.user-edit.headline-new")
|
|
})
|
|
|
|
const formData = ref(freshUser())
|
|
const isSaving = ref(false)
|
|
const isDeleting = ref(false)
|
|
|
|
const passwordWeak = computed(() => {
|
|
return formData.value.Password && formData.value.Password.length > 0 && formData.value.Password.length < settings.Setting('MinPasswordLength')
|
|
})
|
|
|
|
const formValid = computed(() => {
|
|
if (formData.value.Source !== 'db') {
|
|
return true // nothing to validate
|
|
}
|
|
if (props.userId !== '#NEW#' && passwordWeak.value) {
|
|
return false
|
|
}
|
|
if (props.userId === '#NEW#' && (!formData.value.Password || formData.value.Password.length < 1)) {
|
|
return false
|
|
}
|
|
if (props.userId === '#NEW#' && passwordWeak.value) {
|
|
return false
|
|
}
|
|
if (!formData.value.Identifier || formData.value.Identifier.length < 1) {
|
|
return false
|
|
}
|
|
return true
|
|
})
|
|
|
|
|
|
// functions
|
|
|
|
watch(() => props.visible, async (newValue, oldValue) => {
|
|
if (oldValue === false && newValue === true) { // if modal is shown
|
|
if (!selectedUser.value) {
|
|
formData.value = freshUser()
|
|
} else { // fill existing userdata
|
|
formData.value.Identifier = selectedUser.value.Identifier
|
|
formData.value.Email = selectedUser.value.Email
|
|
formData.value.Source = selectedUser.value.Source
|
|
formData.value.IsAdmin = selectedUser.value.IsAdmin
|
|
formData.value.Firstname = selectedUser.value.Firstname
|
|
formData.value.Lastname = selectedUser.value.Lastname
|
|
formData.value.Phone = selectedUser.value.Phone
|
|
formData.value.Department = selectedUser.value.Department
|
|
formData.value.Notes = selectedUser.value.Notes
|
|
formData.value.Password = ""
|
|
formData.value.Disabled = selectedUser.value.Disabled
|
|
formData.value.Locked = selectedUser.value.Locked
|
|
}
|
|
}
|
|
}
|
|
)
|
|
|
|
function close() {
|
|
formData.value = freshUser()
|
|
emit('close')
|
|
}
|
|
|
|
async function save() {
|
|
if (isSaving.value) return
|
|
isSaving.value = true
|
|
try {
|
|
if (props.userId!=='#NEW#') {
|
|
await users.UpdateUser(selectedUser.value.Identifier, formData.value)
|
|
} else {
|
|
await users.CreateUser(formData.value)
|
|
}
|
|
close()
|
|
} catch (e) {
|
|
notify({
|
|
title: "Failed to save user!",
|
|
text: e.toString(),
|
|
type: 'error',
|
|
})
|
|
} finally {
|
|
isSaving.value = false
|
|
}
|
|
}
|
|
|
|
async function del() {
|
|
if (isDeleting.value) return
|
|
isDeleting.value = true
|
|
try {
|
|
await users.DeleteUser(selectedUser.value.Identifier)
|
|
close()
|
|
} catch (e) {
|
|
notify({
|
|
title: "Failed to delete user!",
|
|
text: e.toString(),
|
|
type: 'error',
|
|
})
|
|
} finally {
|
|
isDeleting.value = false
|
|
}
|
|
}
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<Modal :title="title" :visible="visible" @close="close">
|
|
<template #default>
|
|
<fieldset v-if="formData.Source==='db'">
|
|
<legend class="mt-4">{{ $t('modals.user-edit.header-general') }}</legend>
|
|
<div v-if="props.userId==='#NEW#'" class="form-group">
|
|
<label class="form-label mt-4">{{ $t('modals.user-edit.identifier.label') }}</label>
|
|
<input v-model="formData.Identifier" class="form-control" :placeholder="$t('modals.user-edit.identifier.placeholder')" type="text">
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label mt-4">{{ $t('modals.user-edit.source.label') }}</label>
|
|
<input v-model="formData.Source" class="form-control" disabled="disabled" :placeholder="$t('modals.user-edit.source.placeholder')" type="text">
|
|
</div>
|
|
<div v-if="formData.Source==='db'" class="form-group">
|
|
<label class="form-label mt-4">{{ $t('modals.user-edit.password.label') }}</label>
|
|
<input v-model="formData.Password" aria-describedby="passwordHelp" class="form-control" :class="{ 'is-invalid': passwordWeak, 'is-valid': formData.Password !== '' && !passwordWeak }" :placeholder="$t('modals.user-edit.password.placeholder')" type="password">
|
|
<div class="invalid-feedback">{{ $t('modals.user-edit.password.too-weak') }}</div>
|
|
<small v-if="props.userId!=='#NEW#'" id="passwordHelp" class="form-text text-muted">{{ $t('modals.user-edit.password.description') }}</small>
|
|
</div>
|
|
</fieldset>
|
|
<fieldset v-if="formData.Source==='db'">
|
|
<legend class="mt-4">{{ $t('modals.user-edit.header-personal') }}</legend>
|
|
<div class="form-group">
|
|
<label class="form-label mt-4">{{ $t('modals.user-edit.email.label') }}</label>
|
|
<input v-model="formData.Email" class="form-control" :placeholder="$t('modals.user-edit.email.placeholder')" type="email">
|
|
</div>
|
|
<div class="row">
|
|
<div class="form-group col-md-6">
|
|
<label class="form-label mt-4">{{ $t('modals.user-edit.firstname.label') }}</label>
|
|
<input v-model="formData.Firstname" class="form-control" :placeholder="$t('modals.user-edit.firstname.placeholder')" type="text">
|
|
</div>
|
|
<div class="form-group col-md-6">
|
|
<label class="form-label mt-4">{{ $t('modals.user-edit.lastname.label') }}</label>
|
|
<input v-model="formData.Lastname" class="form-control" :placeholder="$t('modals.user-edit.lastname.placeholder')" type="text">
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="form-group col-md-6">
|
|
<label class="form-label mt-4">{{ $t('modals.user-edit.phone.label') }}</label>
|
|
<input v-model="formData.Phone" class="form-control" :placeholder="$t('modals.user-edit.phone.placeholder')" type="text">
|
|
</div>
|
|
<div class="form-group col-md-6">
|
|
<label class="form-label mt-4">{{ $t('modals.user-edit.department.label') }}</label>
|
|
<input v-model="formData.Department" class="form-control" :placeholder="$t('modals.user-edit.department.placeholder')" type="text">
|
|
</div>
|
|
</div>
|
|
</fieldset>
|
|
<fieldset>
|
|
<legend class="mt-4">{{ $t('modals.user-edit.header-notes') }}</legend>
|
|
<div class="form-group">
|
|
<label class="form-label mt-4">{{ $t('modals.user-edit.notes.label') }}</label>
|
|
<textarea v-model="formData.Notes" class="form-control" rows="2"></textarea>
|
|
</div>
|
|
</fieldset>
|
|
<fieldset>
|
|
<legend class="mt-4">{{ $t('modals.user-edit.header-state') }}</legend>
|
|
<div class="form-check form-switch">
|
|
<input v-model="formData.Disabled" class="form-check-input" type="checkbox">
|
|
<label class="form-check-label" >{{ $t('modals.user-edit.disabled.label') }}</label>
|
|
</div>
|
|
<div class="form-check form-switch">
|
|
<input v-model="formData.Locked" class="form-check-input" type="checkbox">
|
|
<label class="form-check-label" >{{ $t('modals.user-edit.locked.label') }}</label>
|
|
</div>
|
|
<div class="form-check form-switch" v-if="formData.Source==='db'">
|
|
<input v-model="formData.IsAdmin" checked="" class="form-check-input" type="checkbox">
|
|
<label class="form-check-label">{{ $t('modals.user-edit.admin.label') }}</label>
|
|
</div>
|
|
</fieldset>
|
|
|
|
</template>
|
|
<template #footer>
|
|
<div class="flex-fill text-start">
|
|
<button v-if="props.userId!=='#NEW#'" class="btn btn-danger me-1" type="button" @click.prevent="del" :disabled="isDeleting">
|
|
<span v-if="isDeleting" class="spinner-border spinner-border-sm me-1" role="status" aria-hidden="true"></span>
|
|
{{ $t('general.delete') }}
|
|
</button>
|
|
</div>
|
|
<button class="btn btn-primary me-1" type="button" @click.prevent="save" :disabled="!formValid || isSaving">
|
|
<span v-if="isSaving" class="spinner-border spinner-border-sm me-1" role="status" aria-hidden="true"></span>
|
|
{{ $t('general.save') }}
|
|
</button>
|
|
<button class="btn btn-secondary" type="button" @click.prevent="close">{{ $t('general.close') }}</button>
|
|
</template>
|
|
</Modal>
|
|
</template>
|