bert.hausmans
dac6aa4c30
Login forms correctly only check for empty fields (no password constraints needed). But password-reset, password-set, and password-change forms now enforce constraints client-side: - App reset-password: add PasswordRequirements component, confirmation mismatch check, canSubmit guard, disabled button - Portal wachtwoord-resetten: add canSubmit guard, confirmation check, disabled button (PasswordRequirements was rendered but not enforced) - App SecurityTab (change password): replace static requirements list with interactive PasswordRequirements, add canSubmit guard Also created PasswordRequirements.vue component for the organizer app (portal already had one). Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
32 lines
875 B
Vue
32 lines
875 B
Vue
<script setup lang="ts">
|
|
const props = defineProps<{ password: string }>()
|
|
|
|
const requirements = computed(() => [
|
|
{ label: 'Minimaal 8 tekens', met: props.password.length >= 8 },
|
|
{ label: 'Een hoofdletter', met: /[A-Z]/.test(props.password) },
|
|
{ label: 'Een kleine letter', met: /[a-z]/.test(props.password) },
|
|
{ label: 'Een cijfer', met: /[0-9]/.test(props.password) },
|
|
])
|
|
|
|
const allMet = computed(() => requirements.value.every(r => r.met))
|
|
|
|
defineExpose({ allMet })
|
|
</script>
|
|
|
|
<template>
|
|
<div class="text-body-2 mt-2">
|
|
<div
|
|
v-for="req in requirements"
|
|
:key="req.label"
|
|
:class="req.met ? 'text-success' : 'text-medium-emphasis'"
|
|
class="d-flex align-center gap-1 mb-1"
|
|
>
|
|
<VIcon
|
|
:icon="req.met ? 'tabler-check' : 'tabler-x'"
|
|
size="14"
|
|
/>
|
|
<span>{{ req.label }}</span>
|
|
</div>
|
|
</div>
|
|
</template>
|