fix: add password constraint validation to all password-set/change forms

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>

apps/app/src/pages/reset-password.vue

@@ -6,6 +6,7 @@ import authV2MaskDark from '@images/pages/misc-mask-dark.png'
 import authV2MaskLight from '@images/pages/misc-mask-light.png'
 import { VNodeRenderer } from '@layouts/components/VNodeRenderer'
 import { themeConfig } from '@themeConfig'
+import PasswordRequirements from '@/components/auth/PasswordRequirements.vue'
 import { apiClient } from '@/lib/axios'
 
 definePage({
@@ -27,6 +28,20 @@ const showPasswordConfirmation = ref(false)
 
 const errorMessage = ref('')
 const isSubmitting = ref(false)
+const passwordReqsRef = ref<InstanceType<typeof PasswordRequirements>>()
+
+const confirmationError = computed(() => {
+  if (!passwordConfirmation.value) return ''
+  if (password.value !== passwordConfirmation.value) return 'Wachtwoorden komen niet overeen'
+  return ''
+})
+
+const canSubmit = computed(() =>
+  password.value.length > 0
+  && passwordConfirmation.value.length > 0
+  && password.value === passwordConfirmation.value
+  && (passwordReqsRef.value?.allMet ?? false),
+)
 
 const authThemeImg = useGenerateImageVariant(
   authV2ResetPasswordIllustrationLight,
@@ -40,6 +55,7 @@ async function onSubmit(): Promise<void> {
     errorMessage.value = 'Ongeldige resetlink. Vraag een nieuwe link aan.'
     return
   }
+  if (!canSubmit.value) return
   isSubmitting.value = true
   try {
     await apiClient.post('/auth/reset-password', {
@@ -153,6 +169,10 @@ async function onSubmit(): Promise<void> {
                   autocomplete="new-password"
                   @click:append-inner="showPassword = !showPassword"
                 />
+                <PasswordRequirements
+                  ref="passwordReqsRef"
+                  :password="password"
+                />
               </VCol>
 
               <VCol cols="12">
@@ -161,6 +181,7 @@ async function onSubmit(): Promise<void> {
                   label="Bevestig wachtwoord"
                   :type="showPasswordConfirmation ? 'text' : 'password'"
                   :append-inner-icon="showPasswordConfirmation ? 'tabler-eye-off' : 'tabler-eye'"
+                  :error-messages="confirmationError ? [confirmationError] : undefined"
                   autocomplete="new-password"
                   @click:append-inner="showPasswordConfirmation = !showPasswordConfirmation"
                 />
@@ -171,6 +192,7 @@ async function onSubmit(): Promise<void> {
                   block
                   type="submit"
                   :loading="isSubmitting"
+                  :disabled="!canSubmit"
                 >
                   Wachtwoord opslaan
                 </VBtn>