110 lines
3.0 KiB
Vue
110 lines
3.0 KiB
Vue
<template>
|
|
<n-form
|
|
:model="userModel"
|
|
:rules="rules"
|
|
label-placement="left"
|
|
require-mark-placement="right-hanging"
|
|
label-width="auto"
|
|
@submit.prevent="$emit('submit')"
|
|
>
|
|
<n-form-item label="Benutzername" path="username">
|
|
<n-input
|
|
v-model:value="userModel.username"
|
|
/>
|
|
</n-form-item>
|
|
|
|
<n-form-item label="Ist Admin?" path="is_admin">
|
|
<n-checkbox v-model:checked="userModel.is_admin" />
|
|
</n-form-item>
|
|
|
|
<n-form-item label="Passwort" path="password">
|
|
<n-input
|
|
type="password"
|
|
show-password-on="mouseclick"
|
|
placeholder="Passwort"
|
|
v-model:value="userModel.password"
|
|
@input="handlePasswordInput"
|
|
/>
|
|
</n-form-item>
|
|
|
|
<n-form-item label="Password wiederholen" path="password_repeat" ref="passwordRepeatRef">
|
|
<n-input
|
|
type="password"
|
|
:disabled="!userModel.password"
|
|
show-password-on="mouseclick"
|
|
placeholder="Passwort wiederholen"
|
|
v-model:value="userModel.password_repeat"
|
|
/>
|
|
</n-form-item>
|
|
</n-form>
|
|
<n-button
|
|
@click="validate"
|
|
>
|
|
validate
|
|
</n-button>
|
|
<div>
|
|
{{ userModel }}
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { router } from '@inertiajs/vue3';
|
|
import { reactive, ref } from 'vue'
|
|
|
|
const props = defineProps(['userModel'])
|
|
const emit = defineEmits(['validateUsername'])
|
|
|
|
const passwordRepeatRef = ref(null)
|
|
|
|
const rules = {
|
|
username: [{
|
|
required: true,
|
|
message: "Benutzername ist erforderlich",
|
|
}],
|
|
password: [{
|
|
required: true,
|
|
message: "Passwort ist erforderlich",
|
|
}],
|
|
password_repeat: [{
|
|
required: true,
|
|
message: "Wiederholtes Passwort ist erforderlich",
|
|
trigger: ["input", "blur"],
|
|
},{
|
|
validator: passwordStartsWith,
|
|
message: "Passwörter stimmen nicht überein",
|
|
trigger: "input",
|
|
},{
|
|
validator: passwordSame,
|
|
message: "Passwörter stimmen nicht überein",
|
|
trigger: ["blur", "password-input"],
|
|
}]
|
|
}
|
|
|
|
function passwordStartsWith(rule, value) {
|
|
return !!props.userModel.password && props.userModel.password.startsWith(value) && props.userModel.password.length >= value.length;
|
|
}
|
|
|
|
function passwordSame(rule, value) {
|
|
return value === props.userModel.password;
|
|
}
|
|
|
|
function usernameUnique(rule, value) {
|
|
}
|
|
|
|
function validate() {
|
|
console.log("vue validate")
|
|
|
|
router.post('/users?validate=true', {
|
|
username: props.userModel.username,
|
|
is_admin: props.userModel.is_admin,
|
|
password: props.userModel.password,
|
|
password_repeat: props.userModel.password_repeat,
|
|
} )
|
|
}
|
|
|
|
function handlePasswordInput() {
|
|
if(props.userModel.password_repeat) {
|
|
passwordRepeatRef.value?.validate({ trigger: "password-input" })
|
|
}
|
|
}
|
|
</script> |