Files
wg-portal/frontend/src/components/UserEditModal.vue
h44z 112f6bfb77
Some checks failed
Docker / Build and Push (push) Has been cancelled
github-pages / deploy (push) Has been cancelled
Docker / release (push) Has been cancelled
Mikrotik integration (#467)
Allow MikroTik routes as WireGuard backends
2025-08-10 14:42:02 +02:00

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>