@drax/identity-vue 3.20.0 → 3.22.1

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "3.20.0",
+  "version": "3.22.1",
   "type": "module",
   "main": "./src/index.ts",
   "module": "./src/index.ts",
@@ -26,11 +26,11 @@
   "dependencies": {
     "@drax/common-front": "^3.19.0",
     "@drax/common-vue": "^3.19.0",
-    "@drax/crud-front": "^3.20.0",
-    "@drax/crud-share": "^3.20.0",
-    "@drax/crud-vue": "^3.20.0",
-    "@drax/identity-front": "^3.20.0",
-    "@drax/identity-share": "^3.15.0"
+    "@drax/crud-front": "^3.21.0",
+    "@drax/crud-share": "^3.21.0",
+    "@drax/crud-vue": "^3.21.0",
+    "@drax/identity-front": "^3.22.1",
+    "@drax/identity-share": "^3.21.0"
   },
   "peerDependencies": {
     "pinia": "^3.0.4",
@@ -55,5 +55,5 @@
     "vue-tsc": "^3.2.4",
     "vuetify": "^3.11.8"
   },
-  "gitHead": "6d4aea4d05133be679166e398ec6a3ae61503d9e"
+  "gitHead": "9a2d949464ddf1a3b2da49be53d73f7d5b8955b4"
 }

package/src/components/IdentityChangeOwnPassword/IdentityChangeOwnPassword.vue

@@ -5,6 +5,7 @@ import {ClientError} from "@drax/common-front";
 import type {IClientInputError} from "@drax/common-front";
 import {useI18nValidation} from "@drax/common-vue";
 import {useI18n} from "vue-i18n";
+import PasswordPolicyInput from "../PasswordPolicy/PasswordPolicyInput.vue";
 
 const {t,te} = useI18n()
 const {$ta} = useI18nValidation()
@@ -86,18 +87,14 @@ async function submitChangePassword() {
                     :error-messages="$ta(inputErrors?.currentPassword)"
                 ></v-text-field>
                 <div class="text-subtitle-1 text-medium-emphasis">{{ t('user.field.newPassword') }}</div>
-                <v-text-field
+                <PasswordPolicyInput
                     variant="outlined"
                     id="new-password-input"
                     v-model="newPassword"
-                    :type="newPasswordVisibility ? 'text': 'password'"
                     required
-                    prepend-inner-icon="mdi-lock-outline"
-                    :append-inner-icon="newPasswordVisibility ? 'mdi-eye-off': 'mdi-eye'"
-                    @click:append-inner="newPasswordVisibility = !newPasswordVisibility"
                     autocomplete="new-password"
                     :error-messages="$ta(inputErrors?.newPassword)"
-                ></v-text-field>
+                />
                 <div class="text-subtitle-1 text-medium-emphasis">{{ t('user.field.confirmPassword') }}</div>
                 <v-text-field
                     variant="outlined"

package/src/components/IdentityRecoveryPasswordComplete/IdentityRecoveryPasswordComplete.vue

@@ -6,6 +6,7 @@ import type {IClientInputError} from "@drax/common-front";
 import {useI18nValidation} from "@drax/common-vue";
 import {useI18n} from "vue-i18n";
 import {useRoute, useRouter} from "vue-router"
+import PasswordPolicyInput from "../PasswordPolicy/PasswordPolicyInput.vue";
 
 const {t,te} = useI18n()
 const {$ta} = useI18nValidation()
@@ -22,9 +23,7 @@ const inputErrors = ref<IClientInputError|undefined>({currentPassword: [], newPa
 const errorMsg = ref('')
 const loading = ref(false)
 const success = ref(false)
-
-let newPasswordVisibility = ref(false)
-
+const newPasswordVisibility = ref(false)
 
 const isFormValid = computed(() =>
     recoveryCode.value.trim() !== '' && newPassword.value.trim() !== ''
@@ -107,18 +106,14 @@ async function submitResetPassword() {
 
                 <div class="text-subtitle-1 text-medium-emphasis">{{ t('user.field.newPassword') }}</div>
                 <!-- NEW PASSWORD-->
-                <v-text-field
+                <PasswordPolicyInput
                     variant="outlined"
                     id="new-password-input"
                     v-model="newPassword"
-                    :type="newPasswordVisibility ? 'text': 'password'"
                     required
-                    prepend-inner-icon="mdi-lock-outline"
-                    :append-inner-icon="newPasswordVisibility ? 'mdi-eye-off': 'mdi-eye'"
-                    @click:append-inner="newPasswordVisibility = !newPasswordVisibility"
                     autocomplete="new-password"
                     :error-messages="$ta(inputErrors?.newPassword)"
-                ></v-text-field>
+                />
                 <div class="text-subtitle-1 text-medium-emphasis">{{ t('user.field.confirmPassword') }}</div>
                 <!-- CONFIRM PASSWORD-->
                 <v-text-field

package/src/components/PasswordPolicy/PasswordPolicyInput.vue

@@ -0,0 +1,118 @@
+<script setup lang="ts">
+import {computed, ref, useAttrs} from "vue";
+import {useI18n} from "vue-i18n";
+import {useDisplay} from "vuetify";
+import PasswordPolicySummary from "./PasswordPolicySummary.vue";
+
+defineOptions({
+  inheritAttrs: false
+})
+
+const modelValue = defineModel<string>({
+  default: ''
+})
+
+const attrs = useAttrs()
+const {t} = useI18n()
+const {xs} = useDisplay()
+
+const props = withDefaults(defineProps<{
+  id?: string
+  label?: string
+  variant?: 'outlined' | 'plain' | 'filled' | 'solo' | 'solo-filled' | 'solo-inverted' | 'underlined'
+  rules?: Array<(value: string) => boolean | string>
+  errorMessages?: string | string[]
+  readonly?: boolean
+  required?: boolean
+  autocomplete?: string
+  prependInnerIcon?: string
+  showPolicyLink?: boolean
+}>(), {
+  id: undefined,
+  label: undefined,
+  variant: 'outlined',
+  rules: () => [],
+  errorMessages: () => [],
+  readonly: false,
+  required: false,
+  autocomplete: 'new-password',
+  prependInnerIcon: 'mdi-lock-outline',
+  showPolicyLink: true
+})
+
+const isVisible = ref(false)
+const inputType = computed(() => isVisible.value ? 'text' : 'password')
+const visibilityIcon = computed(() => isVisible.value ? 'mdi-eye-off' : 'mdi-eye')
+const policyLinkLabel = computed(() => t(xs.value ? 'user.passwordPolicy.linkShort' : 'user.passwordPolicy.link'))
+
+function toggleVisibility() {
+  isVisible.value = !isVisible.value
+}
+</script>
+
+<template>
+  <v-text-field
+      v-bind="attrs"
+      :id="id"
+      v-model="modelValue"
+      :label="label"
+      :type="inputType"
+      :variant="variant"
+      :rules="rules"
+      :required="required"
+      :prepend-inner-icon="prependInnerIcon"
+      :autocomplete="autocomplete"
+      :error-messages="errorMessages"
+      :readonly="readonly"
+  >
+    <template #append-inner>
+      <div
+          v-if="showPolicyLink"
+          class="password-policy-link-wrapper mb-2"
+      >
+        <v-menu
+            open-on-hover
+            location="top end"
+            :close-delay="120"
+            :open-delay="120"
+        >
+          <template #activator="{ props: menuProps }">
+            <v-btn
+                v-bind="menuProps"
+                tabindex="-1"
+                variant="text"
+                color="grey"
+                size="small"
+                class="mt-2"
+            >
+              {{ policyLinkLabel }}
+            </v-btn>
+          </template>
+
+          <v-card class="password-policy-menu" rounded="lg">
+            <v-card-text class="pa-3">
+              <PasswordPolicySummary variant="compact" />
+            </v-card-text>
+          </v-card>
+        </v-menu>
+      </div>
+
+      <v-icon
+          :icon="visibilityIcon"
+          @click="toggleVisibility"
+      />
+    </template>
+  </v-text-field>
+</template>
+
+<style scoped>
+.password-policy-link-wrapper {
+  display: flex;
+  justify-content: flex-start;
+  margin-bottom: 4px;
+}
+
+.password-policy-menu {
+  max-width: 400px;
+}
+</style>

package/src/components/PasswordPolicy/PasswordPolicySummary.vue

@@ -0,0 +1,244 @@
+<script setup lang="ts">
+import {computed, onMounted, ref} from "vue";
+import {useI18n} from "vue-i18n";
+import {useAuth} from "../../composables/useAuth";
+import type {IPasswordPolicy} from "@drax/identity-front";
+
+const props = withDefaults(defineProps<{
+  variant?: 'compact' | 'full'
+}>(), {
+  variant: 'full'
+})
+
+const {t} = useI18n()
+const {passwordPolicy} = useAuth()
+
+const loading = ref(true)
+const errorMsg = ref('')
+const policy = ref<IPasswordPolicy | null>(null)
+
+const compact = computed(() => props.variant === 'compact')
+
+const rules = computed(() => {
+  if (!policy.value) {
+    return []
+  }
+
+  return [
+    {
+      label: t('user.passwordPolicy.minLength', {count: policy.value.minLength}),
+      enabled: true,
+      icon: 'mdi-format-letter-case'
+    },
+    {
+      label: t('user.passwordPolicy.maxLength', {count: policy.value.maxLength}),
+      enabled: true,
+      icon: 'mdi-ruler'
+    },
+    {
+      label: t('user.passwordPolicy.requireUppercase'),
+      enabled: policy.value.requireUppercase,
+      icon: 'mdi-format-letter-case-upper'
+    },
+    {
+      label: t('user.passwordPolicy.requireLowercase'),
+      enabled: policy.value.requireLowercase,
+      icon: 'mdi-format-letter-case-lower'
+    },
+    {
+      label: t('user.passwordPolicy.requireNumber'),
+      enabled: policy.value.requireNumber,
+      icon: 'mdi-numeric'
+    },
+    {
+      label: t('user.passwordPolicy.requireSpecialChar'),
+      description: policy.value.allowedSpecialChars
+          ? t('user.passwordPolicy.specialCharsAllowed', {chars: policy.value.allowedSpecialChars})
+          : undefined,
+      enabled: policy.value.requireSpecialChar,
+      icon: 'mdi-asterisk'
+    },
+    {
+      label: t('user.passwordPolicy.disallowSpaces'),
+      enabled: policy.value.disallowSpaces,
+      icon: 'mdi-keyboard-space'
+    }
+  ]
+})
+
+const metadata = computed(() => {
+  if (!policy.value) {
+    return []
+  }
+
+  const items = [
+    {
+      label: t('user.passwordPolicy.reuseLabel'),
+      value: policy.value.preventReuse > 0
+          ? t('user.passwordPolicy.reuseValue', {count: policy.value.preventReuse})
+          : t('user.passwordPolicy.reuseNone')
+    },
+    {
+      label: t('user.passwordPolicy.expirationLabel'),
+      value: policy.value.expirationDays
+          ? t('user.passwordPolicy.expirationValue', {count: policy.value.expirationDays})
+          : t('user.passwordPolicy.expirationNone')
+    }
+  ]
+
+  if (policy.value.requireSpecialChar && policy.value.allowedSpecialChars) {
+    items.push({
+      label: t('user.passwordPolicy.specialCharsLabel'),
+      value: policy.value.allowedSpecialChars
+    })
+  }
+
+  return items
+})
+
+async function loadPolicy() {
+  try {
+    loading.value = true
+    errorMsg.value = ''
+    policy.value = await passwordPolicy()
+  } catch (error) {
+    const err = error as Error
+    errorMsg.value = err.message || t('user.passwordPolicy.loadError')
+  } finally {
+    loading.value = false
+  }
+}
+
+onMounted(loadPolicy)
+</script>
+
+<template>
+  <div>
+    <div
+        v-if="loading"
+        :class="compact ? 'text-caption text-medium-emphasis' : 'text-medium-emphasis'"
+    >
+      {{ t('user.passwordPolicy.loading') }}
+    </div>
+
+    <v-alert
+        v-else-if="errorMsg"
+        type="error"
+        variant="tonal"
+        :density="compact ? 'compact' : 'default'"
+    >
+      {{ errorMsg }}
+    </v-alert>
+
+    <template v-else-if="policy">
+      <template v-if="compact">
+        <div class="text-caption text-medium-emphasis mb-2">
+          {{ t('user.passwordPolicy.description') }}
+        </div>
+
+        <v-list class="py-0" density="compact" lines="two">
+          <v-list-item
+              v-for="rule in rules"
+              :key="rule.label"
+              class="px-0"
+              :prepend-icon="rule.icon"
+          >
+            <v-list-item-title class="text-body-2 policy-text-wrap">
+              {{ rule.label }}
+            </v-list-item-title>
+            <v-list-item-subtitle v-if="rule.enabled && rule.description" class="text-caption policy-text-wrap">
+              {{ rule.description }}
+            </v-list-item-subtitle>
+            <template #append>
+              <v-chip
+                  :color="rule.enabled ? 'success' : 'default'"
+                  size="x-small"
+                  variant="tonal"
+              >
+                {{ rule.enabled ? t('user.passwordPolicy.required') : t('user.passwordPolicy.optional') }}
+              </v-chip>
+            </template>
+          </v-list-item>
+        </v-list>
+
+        <v-divider class="my-2" />
+
+        <div class="compact-meta">
+          <div v-for="item in metadata" :key="item.label" class="compact-meta-item">
+            <span class="text-caption text-medium-emphasis">{{ item.label }}:</span>
+            <span class="text-body-2">{{ item.value }}</span>
+          </div>
+        </div>
+      </template>
+
+      <template v-else>
+        <div class="text-body-1 mb-4">
+          {{ t('user.passwordPolicy.description') }}
+        </div>
+
+        <v-list lines="two">
+          <v-list-item
+              v-for="rule in rules"
+              :key="rule.label"
+              :prepend-icon="rule.icon"
+          >
+            <v-list-item-title>{{ rule.label }}</v-list-item-title>
+            <v-list-item-subtitle v-if="rule.enabled && rule.description">
+              {{ rule.description }}
+            </v-list-item-subtitle>
+            <template #append>
+              <v-chip
+                  :color="rule.enabled ? 'success' : 'default'"
+                  size="small"
+                  variant="tonal"
+              >
+                {{ rule.enabled ? t('user.passwordPolicy.required') : t('user.passwordPolicy.optional') }}
+              </v-chip>
+            </template>
+          </v-list-item>
+        </v-list>
+
+        <v-divider />
+
+        <v-row class="mt-1">
+          <v-col
+              v-for="item in metadata"
+              :key="item.label"
+              cols="12"
+              sm="6"
+          >
+            <v-sheet class="info-box pa-4 fill-height" rounded>
+              <div class="text-caption text-medium-emphasis">{{ item.label }}</div>
+              <div class="text-body-1">{{ item.value }}</div>
+            </v-sheet>
+          </v-col>
+        </v-row>
+      </template>
+    </template>
+  </div>
+</template>
+
+<style scoped>
+.compact-meta {
+  display: grid;
+  gap: 6px;
+}
+
+.compact-meta-item {
+  display: flex;
+  gap: 6px;
+  align-items: baseline;
+  flex-wrap: wrap;
+}
+
+.policy-text-wrap {
+  white-space: normal;
+  overflow: visible;
+  text-overflow: unset;
+  word-break: break-word;
+}
+
+.info-box {
+  border: 1px solid rgba(var(--v-theme-on-surface), 0.12);
+}
+</style>

package/src/cruds/user-crud/UserForm.vue

@@ -7,10 +7,10 @@ import TenantCombobox from "../../combobox/TenantCombobox.vue";
 import {useAuth} from "../../composables/useAuth";
 import {useI18n} from "vue-i18n";
 import {useIdentityCrudStore} from "../../stores/IdentityCrudStore";
+import PasswordPolicyInput from "../../components/PasswordPolicy/PasswordPolicyInput.vue";
 
 const {$ta} = useI18nValidation()
 const {t, te} = useI18n()
-
 const {hasPermission} = useAuth()
 
 
@@ -25,7 +25,6 @@ const store = useCrudStore(entity.name)
 const enablePassword = store.operation === 'create'
 
 
-
 const valid = ref()
 const formRef = ref()
 
@@ -33,12 +32,11 @@ const formRef = ref()
 const isTenantEnabled = computed(() => import.meta.env.VITE_DRAX_TENANT === 'ENABLE')
 
 
-
 async function submit() {
   store.resetErrors()
 
-  if(store.operation === 'delete') {
-    emit('submit',valueModel.value)
+  if (store.operation === 'delete') {
+    emit('submit', valueModel.value)
     return
   }
 
@@ -55,7 +53,7 @@ function cancel() {
 }
 
 const {
-   submitColor, readonly
+  submitColor, readonly
 } = useFormUtils(store.operation)
 
 
@@ -74,6 +72,11 @@ const variant = computed(() => {
 
 
 let passwordVisibility = ref(false)
+const confirmPassword = ref('')
+
+function confirmPasswordRule(value: string) {
+  return value === valueModel.value.password || t('validation.password.confirmed')
+}
 
 </script>
 
@@ -93,96 +96,135 @@ let passwordVisibility = ref(false)
 
       <v-card-text>
 
-        <v-text-field
-            id="name-input"
-            :label="t('user.field.name')"
-            v-model="valueModel.name"
-            prepend-inner-icon="mdi-card-account-details"
-            :variant="variant"
-            :rules="[v => !!v || t('validation.required')]"
-            :error-messages="$ta(store.inputErrors?.name)"
-            :readonly="readonly"
-        ></v-text-field>
-
-        <v-text-field
-            id="username-input"
-            :label="t('user.field.username')"
-            v-model="valueModel.username"
-            prepend-inner-icon="mdi-account-question"
-            :variant="variant"
-            :rules="[v => !!v || t('validation.required')]"
-            autocomplete="new-username"
-            :error-messages="$ta(store.inputErrors?.username)"
-            :readonly="readonly"
-        ></v-text-field>
-
-        <v-text-field
-            v-if="enablePassword"
-            id="password-input"
-            :label="t('user.field.password')"
-            v-model="valueModel.password"
-            :type="passwordVisibility ? 'text': 'password'"
-            :variant="variant"
-            :rules="[v => !!v || t('validation.required')]"
-            prepend-inner-icon="mdi-lock-outline"
-            :append-inner-icon="passwordVisibility ? 'mdi-eye-off': 'mdi-eye'"
-            @click:append-inner="passwordVisibility = !passwordVisibility"
-            autocomplete="new-password"
-            :error-messages="$ta(store.inputErrors?.password)"
-            :readonly="readonly"
-        ></v-text-field>
-
-        <RoleCombobox
-            v-model="valueModel.role"
-            :label="t('user.field.role')"
-            :variant="variant"
-            :rules="[(v:any) => !!v || t('validation.required')]"
-            :error-messages="$ta(store.inputErrors?.role)"
-            :readonly="readonly"
-        ></RoleCombobox>
-
-        <TenantCombobox
-            v-if="isTenantEnabled && hasPermission('tenant:manage')"
-            v-model="valueModel.tenant"
-            :label="t('user.field.tenant')"
-            :variant="variant"
-            :error-messages="$ta(store.inputErrors?.tenant)"
-            clearable
-            :readonly="readonly"
-        ></TenantCombobox>
-
-        <v-text-field
-            v-model="valueModel.email"
-            :variant="variant"
-            id="email-input"
-            :label="t('user.field.email')"
-            prepend-inner-icon="mdi-email"
-            :rules="[(v:any) => !!v || t('validation.required')]"
-            :error-messages="$ta(store.inputErrors?.email)"
-            :readonly="readonly"
-        ></v-text-field>
-
-        <v-text-field
-            v-model="valueModel.phone"
-            :variant="variant"
-            id="phone-input"
-            :label="t('user.field.phone')"
-            prepend-inner-icon="mdi-phone"
-            :rules="[(v:any) => !!v || t('validation.required')]"
-            :error-messages="$ta(store.inputErrors?.phone)"
-            :readonly="readonly"
-        ></v-text-field>
-
-        <v-switch
-            id="active-input"
-            v-model="valueModel.active"
-            color="primary"
-            label="Active"
-            :true-value="true"
-            :false-value="false"
-            :readonly="readonly"
-        ></v-switch>
-
+        <v-row>
+
+          <v-col cols="12">
+            <v-text-field
+                id="name-input"
+                :label="t('user.field.name')"
+                v-model="valueModel.name"
+                prepend-inner-icon="mdi-card-account-details"
+                :variant="variant"
+                :rules="[v => !!v || t('validation.required')]"
+                :error-messages="$ta(store.inputErrors?.name)"
+                :readonly="readonly"
+            ></v-text-field>
+          </v-col>
+
+          <v-col cols="12">
+            <v-text-field
+                id="username-input"
+                :label="t('user.field.username')"
+                v-model="valueModel.username"
+                prepend-inner-icon="mdi-account-question"
+                :variant="variant"
+                :rules="[v => !!v || t('validation.required')]"
+                autocomplete="new-username"
+                :error-messages="$ta(store.inputErrors?.username)"
+                :readonly="readonly"
+            ></v-text-field>
+          </v-col>
+
+          <v-col cols="12">
+            <template v-if="enablePassword">
+
+
+              <PasswordPolicyInput
+                  id="password-input"
+                  :label="t('user.field.password')"
+                  v-model="valueModel.password"
+                  :variant="variant"
+                  :rules="[v => !!v || t('validation.required')]"
+                  autocomplete="new-password"
+                  :error-messages="$ta(store.inputErrors?.password)"
+                  :readonly="readonly"
+              />
+
+
+            </template>
+          </v-col>
+
+          <v-col cols="12">
+            <v-text-field
+                v-if="enablePassword"
+                id="confirm-password-input"
+                :label="t('user.field.confirmPassword')"
+                v-model="confirmPassword"
+                :type="passwordVisibility ? 'text': 'password'"
+                :variant="variant"
+                :rules="[
+                v => !!v || t('validation.required'),
+                confirmPasswordRule
+            ]"
+                prepend-inner-icon="mdi-lock-outline"
+                :append-inner-icon="passwordVisibility ? 'mdi-eye-off': 'mdi-eye'"
+                @click:append-inner="passwordVisibility = !passwordVisibility"
+                autocomplete="new-password"
+                :readonly="readonly"
+            ></v-text-field>
+          </v-col>
+
+          <v-col cols="12">
+            <RoleCombobox
+                v-model="valueModel.role"
+                :label="t('user.field.role')"
+                :variant="variant"
+                :rules="[(v:any) => !!v || t('validation.required')]"
+                :error-messages="$ta(store.inputErrors?.role)"
+                :readonly="readonly"
+            ></RoleCombobox>
+          </v-col>
+
+          <v-col cols="12">
+            <TenantCombobox
+                v-if="isTenantEnabled && hasPermission('tenant:manage')"
+                v-model="valueModel.tenant"
+                :label="t('user.field.tenant')"
+                :variant="variant"
+                :error-messages="$ta(store.inputErrors?.tenant)"
+                clearable
+                :readonly="readonly"
+            ></TenantCombobox>
+          </v-col>
+
+          <v-col cols="12">
+            <v-text-field
+                v-model="valueModel.email"
+                :variant="variant"
+                id="email-input"
+                :label="t('user.field.email')"
+                prepend-inner-icon="mdi-email"
+                :rules="[(v:any) => !!v || t('validation.required')]"
+                :error-messages="$ta(store.inputErrors?.email)"
+                :readonly="readonly"
+            ></v-text-field>
+          </v-col>
+
+          <v-col cols="12">
+            <v-text-field
+                v-model="valueModel.phone"
+                :variant="variant"
+                id="phone-input"
+                :label="t('user.field.phone')"
+                prepend-inner-icon="mdi-phone"
+                :rules="[(v:any) => !!v || t('validation.required')]"
+                :error-messages="$ta(store.inputErrors?.phone)"
+                :readonly="readonly"
+            ></v-text-field>
+          </v-col>
+
+          <v-col cols="12">
+            <v-switch
+                id="active-input"
+                v-model="valueModel.active"
+                color="primary"
+                label="Active"
+                :true-value="true"
+                :false-value="false"
+                :readonly="readonly"
+            ></v-switch>
+          </v-col>
+        </v-row>
       </v-card-text>
 
       <v-card-actions>
@@ -207,5 +249,4 @@ let passwordVisibility = ref(false)
 </template>
 
 <style scoped>
-
 </style>

package/src/cruds/user-crud/UserPasswordDialog.vue

@@ -22,9 +22,11 @@ let passwordChanged = ref(false);
 let inputErrors = ref<IClientInputError>()
 let loading = ref(false);
 let userError = ref<string>('')
+let form = ref()
 
 async function savePassword() {
-  if (passwordForm.value.newPassword === passwordForm.value.confirmPassword) {
+  const result = await form.value?.validate()
+  if (result?.valid && passwordForm.value.newPassword === passwordForm.value.confirmPassword) {
     await changeUserPassword(user._id, passwordForm.value.newPassword)
     passwordChanged.value = true
   }
@@ -56,6 +58,7 @@ async function changeUserPassword(id: string, newPassword: string) {
       <v-card-subtitle>{{ t('user.field.username') }}: {{ user.username }}</v-card-subtitle>
       <v-card-text>
         <user-password-form
+            ref="form"
             v-model="passwordForm"
             :inputErrors="inputErrors"
             :passwordChanged="passwordChanged"

package/src/cruds/user-crud/UserPasswordForm.vue

@@ -4,12 +4,14 @@ import type {IClientInputError} from "@drax/common-front";
 import type {IUserPassword} from "@drax/identity-front";
 import {useI18nValidation} from "@drax/common-vue";
 import {useI18n} from "vue-i18n";
+import PasswordPolicyInput from "../../components/PasswordPolicy/PasswordPolicyInput.vue";
 
 const {t} = useI18n()
 const {$ta} = useI18nValidation()
 
-let newPasswordVisibility = ref(false)
+const formRef = ref()
 
+const newPasswordVisibility = ref(false)
 
 defineProps({
   inputErrors: {
@@ -34,10 +36,17 @@ function confirmPasswordRule(value: string) {
 // Define emits
 const emits = defineEmits(['formSubmit'])
 
+async function validate() {
+  return await formRef.value?.validate()
+}
+
 // Function to call when form is attempted to be submitted
 const onSubmit = () => {
   emits('formSubmit', form); // Emitting an event with the form data
 }
+
+defineExpose({validate})
+
 </script>
 
 <template>
@@ -48,21 +57,17 @@ const onSubmit = () => {
     </v-alert>
   </v-sheet>
   <v-sheet v-else>
-    <form ref="changeUserPassword" @submit.prevent="onSubmit">
+    <v-form ref="formRef" @submit.prevent="onSubmit">
 
       <div class="text-subtitle-1 text-medium-emphasis">{{ t('user.field.newPassword') }}</div>
-      <v-text-field
+      <PasswordPolicyInput
           variant="outlined"
           id="new-password-input"
           v-model="form.newPassword"
-          :type="newPasswordVisibility ? 'text': 'password'"
           required
-          prepend-inner-icon="mdi-lock-outline"
-          :append-inner-icon="newPasswordVisibility ? 'mdi-eye-off': 'mdi-eye'"
-          @click:append-inner="newPasswordVisibility = !newPasswordVisibility"
           autocomplete="new-password"
           :error-messages="$ta(inputErrors.newPassword)"
-      ></v-text-field>
+      />
 
       <div class="text-subtitle-1 text-medium-emphasis">{{ t('user.field.confirmPassword') }}</div>
 
@@ -79,7 +84,7 @@ const onSubmit = () => {
           :error-messages="$ta(inputErrors.confirmPassword)"
           :rules="[confirmPasswordRule]"
       ></v-text-field>
-    </form>
+    </v-form>
   </v-sheet>
 
 </template>

package/src/pages/PasswordPolicyPage.vue

@@ -1,93 +1,8 @@
 <script setup lang="ts">
-import {computed, onMounted, ref} from "vue";
-import {useAuth} from "../composables/useAuth";
-import type {IPasswordPolicy} from "@drax/identity-front";
+import {useI18n} from "vue-i18n";
+import PasswordPolicySummary from "../components/PasswordPolicy/PasswordPolicySummary.vue";
 
-const {passwordPolicy} = useAuth()
-
-const loading = ref(true)
-const errorMsg = ref('')
-const policy = ref<IPasswordPolicy | null>(null)
-
-const rules = computed(() => {
-  if (!policy.value) {
-    return []
-  }
-
-  return [
-    {
-      label: `Longitud mínima de ${policy.value.minLength} caracteres`,
-      enabled: true,
-      icon: 'mdi-format-letter-case'
-    },
-    {
-      label: `Longitud máxima de ${policy.value.maxLength} caracteres`,
-      enabled: true,
-      icon: 'mdi-ruler'
-    },
-    {
-      label: 'Debe incluir al menos una mayúscula',
-      enabled: policy.value.requireUppercase,
-      icon: 'mdi-format-letter-case-upper'
-    },
-    {
-      label: 'Debe incluir al menos una minúscula',
-      enabled: policy.value.requireLowercase,
-      icon: 'mdi-format-letter-case-lower'
-    },
-    {
-      label: 'Debe incluir al menos un número',
-      enabled: policy.value.requireNumber,
-      icon: 'mdi-numeric'
-    },
-    {
-      label: 'Debe incluir al menos un carácter especial',
-      enabled: policy.value.requireSpecialChar,
-      icon: 'mdi-asterisk'
-    },
-    {
-      label: 'No se permiten espacios',
-      enabled: policy.value.disallowSpaces,
-      icon: 'mdi-keyboard-space'
-    }
-  ]
-})
-
-const metadata = computed(() => {
-  if (!policy.value) {
-    return []
-  }
-
-  return [
-    {
-      label: 'Reutilización',
-      value: policy.value.preventReuse > 0
-          ? `No se pueden repetir las últimas ${policy.value.preventReuse} contraseñas`
-          : 'Sin restricción de reutilización'
-    },
-    {
-      label: 'Expiración',
-      value: policy.value.expirationDays
-          ? `La contraseña expira cada ${policy.value.expirationDays} días`
-          : 'Sin expiración configurada'
-    }
-  ]
-})
-
-async function loadPolicy() {
-  try {
-    loading.value = true
-    errorMsg.value = ''
-    policy.value = await passwordPolicy()
-  } catch (error) {
-    const err = error as Error
-    errorMsg.value = err.message || 'No se pudo obtener la política de contraseñas'
-  } finally {
-    loading.value = false
-  }
-}
-
-onMounted(loadPolicy)
+const {t} = useI18n()
 </script>
 
 <template>
@@ -96,71 +11,13 @@ onMounted(loadPolicy)
       <v-col cols="12" md="8" lg="6">
         <v-card variant="elevated">
           <v-card-title class="pa-4">
-            Política de contraseñas
+            {{ t('user.passwordPolicy.title') }}
           </v-card-title>
-
-          <v-card-text v-if="loading">
-            <div class="text-medium-emphasis">Cargando política...</div>
+          <v-card-text>
+            <PasswordPolicySummary variant="full" />
           </v-card-text>
-
-          <v-card-text v-else-if="errorMsg">
-            <v-alert type="error" variant="tonal">
-              {{ errorMsg }}
-            </v-alert>
-          </v-card-text>
-
-          <template v-else-if="policy">
-            <v-card-text class="pb-2">
-              Requisitos que debe cumplir una contraseña válida.
-            </v-card-text>
-
-            <v-card-text class="pt-0">
-              <v-list lines="two">
-                <v-list-item
-                    v-for="rule in rules"
-                    :key="rule.label"
-                    :prepend-icon="rule.icon"
-                >
-                  <v-list-item-title>{{ rule.label }}</v-list-item-title>
-                  <template #append>
-                    <v-chip
-                        :color="rule.enabled ? 'success' : 'default'"
-                        size="small"
-                        variant="tonal"
-                    >
-                      {{ rule.enabled ? 'Requerido' : 'Opcional' }}
-                    </v-chip>
-                  </template>
-                </v-list-item>
-              </v-list>
-            </v-card-text>
-
-            <v-divider />
-
-            <v-card-text>
-              <v-row>
-                <v-col
-                    v-for="item in metadata"
-                    :key="item.label"
-                    cols="12"
-                    sm="6"
-                >
-                  <v-sheet class="info-box pa-4 fill-height" rounded>
-                    <div class="text-caption text-medium-emphasis">{{ item.label }}</div>
-                    <div class="text-body-1">{{ item.value }}</div>
-                  </v-sheet>
-                </v-col>
-              </v-row>
-            </v-card-text>
-          </template>
         </v-card>
       </v-col>
     </v-row>
   </v-container>
 </template>
-
-<style scoped>
-.info-box {
-  border: 1px solid rgba(var(--v-theme-on-surface), 0.12);
-}
-</style>