{"version":3,"file":"C6pvrVZp.js","sources":["../../../../src/components/formFields/passwordValidation/vdv/password.vue","../../../../src/components/formFields/passwordValidation/vdv/passwordValidation.vue"],"sourcesContent":["<template>\n  <div class=\"inputText\">\n    <FormKit\n      :id=\"id\"\n      v-model=\"value\"\n      :type=\"'password'\"\n      :name=\"name ?? id\"\n      :label=\"t(label)\"\n      :placeholder=\"t('formFields.password.placeholder')\"\n      input-class=\"input\"\n      :outer-class=\"'mb-sm'\"\n      :validation-visibility=\"validationVisible ? 'live' : 'dirty'\"\n      :validation-messages=\"{\n        required: t(requiredMessage),\n        confirm: t('formFields.password.confirmError'),\n      }\"\n      :validation=\"getValidationRules()\"\n      label-class=\"text-md !leading-[19px] font-bold\"\n      inner-class=\"pt-[5px] relative': true\"\n      :messages-class=\"'!bg-vdv-bg-base px-sm py-[2px] text-sign-red'\"\n      @node=\"(n: FormKitNode) => (node = n)\"\n      @focus=\"() => (focus = true)\"\n      @blur=\"() => (focus = false)\"\n    >\n      <template #messages=\"{ messages }\">\n        <div\n          v-if=\"\n            messages['rule_matches'] ||\n            messages['rule_required'] ||\n            messages['rule_confirm'] ||\n            (focus && !isValid && !confirmField)\n          \"\n          class=\"bg-vdv-bg-base px-sm py-[2px]\"\n        >\n          <div\n            v-if=\"\n              messages['rule_matches'] || (focus && !isValid && !confirmField)\n            \"\n          >\n            <div>\n              <div class=\"font-bold\">\n                <span>\n                  {{\n                    t('formFields.password.validation.strength.label')\n                  }} </span\n                >:\n                <span\n                  :class=\"{\n                    'text-sign-green': isValid,\n                    'text-sign-red': !isValid,\n                  }\"\n                >\n                  {{\n                    t(\n                      isValid\n                        ? 'formFields.password.validation.strength.secure'\n                        : 'formFields.password.validation.strength.weak',\n                    )\n                  }}\n                </span>\n              </div>\n              <div\n                v-for=\"condition in passwordConditions\"\n                :key=\"condition.name\"\n                class=\"flex flex-row items-center gap-xs\"\n              >\n                <div>\n                  <FaIcon\n                    v-if=\"condition.valid.value\"\n                    classes=\"text-sign-green\"\n                    icon-class=\"fas fa-circle-check\"\n                  />\n                  <FaIcon\n                    v-else\n                    icon-class=\"fas fa-circle-xmark\"\n                    classes=\"text-sign-red\"\n                  />\n                </div>\n                <div>{{ t(condition.token) }}</div>\n              </div>\n            </div>\n          </div>\n          <div v-if=\"messages['rule_required']\" class=\"text-sign-red\">\n            {{ t(requiredMessage) }}\n          </div>\n          <div v-if=\"messages['rule_confirm']\" class=\"text-sign-red\">\n            {{ t('formFields.password.validation.confirmError') }}\n          </div>\n        </div>\n      </template>\n    </FormKit>\n  </div>\n</template>\n<script setup lang=\"ts\">\nimport type { FormKitNode } from '@formkit/core';\nimport FaIcon from '~~/src/components/fa-icon.vue';\nimport { FormKit } from '@formkit/vue';\n\nconst { t } = useTrans();\nconst props = defineProps({\n  id: {\n    type: String,\n    required: true,\n  },\n  label: {\n    type: String,\n    required: true,\n  },\n  name: {\n    type: String,\n    default: undefined,\n  },\n  requiredMessage: {\n    type: String,\n    default: '',\n  },\n  confirmField: {\n    type: String,\n    default: '',\n  },\n  validationVisible: {\n    type: Boolean,\n    default: false,\n  },\n  autofocus: {\n    type: Boolean,\n    required: false,\n    default: false,\n  },\n});\n\nconst emit = defineEmits<{\n  (e: 'change'): void;\n}>();\n\nonMounted(() => {\n  const input: HTMLElement = document.querySelector(\n    `input[name='${props.name}']`,\n  );\n  if (props.autofocus) {\n    input.focus();\n  }\n});\n\nconst validRegex =\n  /^(?=.*[a-z])(?=.*[A-Z])(?=.*[!@#$%^&(){}[\\]:;<>,.?\\/~_+\\-=|\\\\]).{12,50}$/;\n\nfunction getValidationRules() {\n  const rules: [string, ...any][] = [['required']];\n\n  if (props.confirmField) {\n    rules.push(['confirm', props.confirmField]);\n  } else {\n    rules.push(['matches', validRegex]);\n  }\n\n  return rules;\n}\n\nconst node = ref<FormKitNode | null>();\nconst focus = ref<boolean>(false);\nconst value = ref<string>('');\n\nwatch(value, () => {\n  emit('change');\n});\n\nconst isValid = computed<boolean>(() => {\n  return validRegex.test(value.value);\n});\n\nconst passwordConditions = [\n  {\n    name: 'length',\n    token: 'formFields.password.validation.condition.length',\n    valid: computed<boolean>(() => {\n      return value.value.length >= 12 && value.value.length <= 50;\n    }),\n  },\n  {\n    name: 'lowercase',\n    token: 'formFields.password.validation.condition.lowercase',\n    valid: computed<boolean>(() => {\n      return /[a-z]/g.test(value.value);\n    }),\n  },\n  {\n    name: 'uppercase',\n    token: 'formFields.password.validation.condition.uppercase',\n    valid: computed<boolean>(() => {\n      return /[A-Z]/g.test(value.value);\n    }),\n  },\n  {\n    name: 'special',\n    token: 'formFields.password.validation.condition.special',\n    valid: computed<boolean>(() => {\n      return /[!@#$%^&(){}[\\]:;<>,.?\\/~_+\\-=|\\\\]/g.test(value.value);\n    }),\n  },\n];\n</script>\n<style lang=\"postcss\" scoped>\n.inputText :deep(input.input) {\n  @apply border-l-1 border-r-1 border-t-1 outline-0 border-b-[3px] h-9 px-2 md:px-4 pt-2 text-md text-vdv-font ring-0 focus:border-b-[3px] shadow-none z-100;\n  @apply focus:border-b-vdv-base  border-vdv-border-light;\n  @apply w-full;\n}\n\n.inputText :deep([data-invalid='true']) {\n  input.input {\n    @apply !border-b-sign-red;\n  }\n}\n</style>\n","<template>\n  <FormKit type=\"group\" name=\"password\">\n    <Password\n      id=\"password\"\n      name=\"password\"\n      :label=\"label\"\n      required-message=\"formFields.password.emptyError\"\n      :validation-visible=\"validationVisible\"\n      :autofocus=\"autofocus\"\n    />\n    <Password\n      id=\"passwordConfirm\"\n      name=\"passwordConfirm\"\n      :label=\"confirmLabel\"\n      required-message=\"formFields.password.confirmEmptyError\"\n      confirm-field=\"password\"\n      @change=\"() => (validationVisible = true)\"\n    />\n  </FormKit>\n</template>\n<script setup lang=\"ts\">\nimport Password from '~~/src/components/formFields/passwordValidation/vdv/password.vue';\nimport { FormKit } from '@formkit/vue';\ndefineProps({\n  label: {\n    type: String,\n    required: false,\n    default: 'formFields.password.label',\n  },\n  confirmLabel: {\n    type: String,\n    required: false,\n    default: 'formFields.password.confirmLabel',\n  },\n  autofocus: {\n    type: Boolean,\n    required: false,\n    default: false,\n  },\n});\nconst validationVisible = ref(false);\n</script>\n"],"names":["t","useTrans","props","__props","emit","__emit","onMounted","input","validRegex","getValidationRules","rules","node","ref","focus","value","watch","isValid","computed","passwordConditions","validationVisible"],"mappings":"kwBAkGM,KAAA,CAAE,EAAAA,GAAMC,IACRC,EAAQC,EAgCRC,EAAOC,EAIbC,EAAU,IAAM,CACd,MAAMC,EAAqB,SAAS,cAClC,eAAeL,EAAM,IAAI,IAAA,EAEvBA,EAAM,WACRK,EAAM,MAAM,CACd,CACD,EAED,MAAMC,EACJ,2EAEF,SAASC,GAAqB,CAC5B,MAAMC,EAA4B,CAAC,CAAC,UAAU,CAAC,EAE/C,OAAIR,EAAM,aACRQ,EAAM,KAAK,CAAC,UAAWR,EAAM,YAAY,CAAC,EAE1CQ,EAAM,KAAK,CAAC,UAAWF,CAAU,CAAC,EAG7BE,CACT,CAEA,MAAMC,EAAOC,IACPC,EAAQD,EAAa,EAAK,EAC1BE,EAAQF,EAAY,EAAE,EAE5BG,EAAMD,EAAO,IAAM,CACjBV,EAAK,QAAQ,CAAA,CACd,EAEK,MAAAY,EAAUC,EAAkB,IACzBT,EAAW,KAAKM,EAAM,KAAK,CACnC,EAEKI,EAAqB,CACzB,CACE,KAAM,SACN,MAAO,kDACP,MAAOD,EAAkB,IAChBH,EAAM,MAAM,QAAU,IAAMA,EAAM,MAAM,QAAU,EAC1D,CACH,EACA,CACE,KAAM,YACN,MAAO,qDACP,MAAOG,EAAkB,IAChB,SAAS,KAAKH,EAAM,KAAK,CACjC,CACH,EACA,CACE,KAAM,YACN,MAAO,qDACP,MAAOG,EAAkB,IAChB,SAAS,KAAKH,EAAM,KAAK,CACjC,CACH,EACA,CACE,KAAM,UACN,MAAO,mDACP,MAAOG,EAAkB,IAChB,sCAAsC,KAAKH,EAAM,KAAK,CAC9D,CACH,CAAA,0jEC/JI,MAAAK,EAAoBP,EAAI,EAAK"}