bfg-common 1.4.317 → 1.4.319

package/components/common/layout/theHeader/userMenu/modals/changePassword/ChangePassword.vue

@@ -4,8 +4,8 @@
     v-model="form"
     :subtitle="props.hostname"
     :project="props.project"
-    @hide="onHideModal"
     @change-password="onChangePassword"
+    @hide="onHideModal"
   />
 
   <common-layout-the-header-user-menu-modals-change-password-old
@@ -13,8 +13,8 @@
     v-model="form"
     :hostname="props.hostname"
     :project="props.project"
-    @hide="onHideModal"
     @apply="onChangePassword"
+    @hide="onHideModal"
   />
 </template>
 
@@ -23,9 +23,10 @@ import type { UI_I_Localization } from '~/lib/models/interfaces'
 import type { API_UI_I_Error } from '~/lib/models/store/interfaces'
 import type {
   UI_I_ChangePasswordBodyRequest,
-  UI_I_FormChangePassword,
+  UI_I_ChangePasswordForm,
 } from '~/components/common/layout/theHeader/userMenu/modals/changePassword/lib/models/interfaces'
 import type { UI_T_Project } from '~/lib/models/types'
+import {} from '#build/components/common/layout/theHeader/userMenu/modals/changePassword/lib/models/interfaces'
 
 const props = defineProps<{
   newView: boolean
@@ -37,7 +38,7 @@ const isShowModalLocal = defineModel<boolean>({ required: true })
 const localization = computed<UI_I_Localization>(() => useLocal())
 const { $store }: any = useNuxtApp()
 
-const form = ref<UI_I_FormChangePassword>({
+const form = ref<UI_I_ChangePasswordForm>({
   current_password: '',
   new_password: '',
   confirm_password: '',

package/components/common/layout/theHeader/userMenu/modals/changePassword/ChangePasswordNew.vue

@@ -6,21 +6,21 @@
     :subtitle="props.subtitle"
     class="change-password"
     @submit="onSubmit"
+    @hide="onHideModal"
   >
     <template #content>
       <ui-modal-block-standard>
         <ui-alert
-          v-if="errorText"
+          v-if="alertErrorText"
           test-id="change-password-error-alert"
           type="error"
           hide-close-button
-          :messages="[errorText]"
+          :messages="[alertErrorText]"
           class="change-password__alert"
         />
 
         <p class="change-password__description">
-          To keep your account secure, please make sure that your new password
-          is different from any of your previous passwords.
+          {{ localization.common.changePasswordDesc }}
         </p>
 
         <div class="change-password__form">
@@ -30,6 +30,7 @@
             :label="localization.auth.password"
             :error="passwordErrorText"
             type="password"
+            :autocomplete="'new-password'"
           ></ui-input>
 
           <ui-input
@@ -57,10 +58,13 @@
 
 <script setup lang="ts">
 import type { UI_I_Localization } from '~//lib/models/interfaces'
-import type { UI_I_FormChangePassword } from '~/components/common/layout/theHeader/userMenu/modals/changePassword/lib/models/interfaces'
+import type { UI_I_ChangePasswordForm } from '~/components/common/layout/theHeader/userMenu/modals/changePassword/lib/models/interfaces'
 import type { UI_T_Project } from '~/lib/models/types'
 import type { UI_I_InitialValidationFields } from '~/components/common/layout/theHeader/userMenu/modals/changePassword/lib/models/interfaces'
-import { getPasswordMismatchError } from '~/components/common/layout/theHeader/userMenu/modals/changePassword/lib/utils'
+import {
+  validateField,
+  getPasswordMismatchError,
+} from '~/components/common/layout/theHeader/userMenu/modals/changePassword/lib/utils'
 
 const props = defineProps<{
   project: UI_T_Project
@@ -70,17 +74,25 @@ const emits = defineEmits<{
   (event: 'hide'): void
   (event: 'change-password'): void
 }>()
-const modelLocal = defineModel<UI_I_FormChangePassword>({ required: true })
+const modelLocal = defineModel<UI_I_ChangePasswordForm>({ required: true })
 
 const localization = computed<UI_I_Localization>(() => useLocal())
 
+
+const alertErrorText = ref<string>('')
 const initValidationFields = ref<UI_I_InitialValidationFields>({
   currentPassword: false,
   newPassword: false,
   confirmPassword: false,
 })
-const initValidation = (types: string[]): void => {
+const initValidation = (types: string[]): boolean => {
   types.forEach((type) => (initValidationFields.value[type] = true))
+
+  return (
+    !!passwordErrorText.value ||
+    !!newPasswordErrorText.value ||
+    !!confirmPasswordErrorText.value
+  )
 }
 
 const passwordErrorText = computed<string>(() => {
@@ -91,7 +103,7 @@ const passwordErrorText = computed<string>(() => {
     : ''
 })
 const newPasswordErrorText = computed<string>(() => {
-  if (!initValidationFields.value.new_password) return ''
+  if (!initValidationFields.value.newPassword) return ''
 
   const { new_password, confirm_password } = modelLocal.value
   return !new_password
@@ -103,7 +115,7 @@ const newPasswordErrorText = computed<string>(() => {
       )
 })
 const confirmPasswordErrorText = computed<string>(() => {
-  if (!initValidationFields.value.confirm_password) return ''
+  if (!initValidationFields.value.confirmPassword) return ''
   const { new_password, confirm_password } = modelLocal.value
   return !confirm_password
     ? localization.value.common.fieldRequired
@@ -113,25 +125,22 @@ const confirmPasswordErrorText = computed<string>(() => {
         confirm_password
       )
 })
-
-// const isValid = ref<boolean>(false)
-const errorText = ref<string>('')
-
-// const showValidationErrors = (text: string): void => {
-//   isValid.value = true
-//   errorText.value = text
-// }
-
-// const onHideModal = (): void => {
-//   emits('hide')
-//   setForm()
-//   isValid.value = false
-// }
-
 const onSubmit = (): void => {
-  initValidation(['currentPassword', 'newPassword', 'confirmPassword'])
-  // const {  } = modelLocal.value
-  errorText.value = 'asdaldjlkdjkadj'
+  const isFieldValid = initValidation([
+    'currentPassword',
+    'newPassword',
+    'confirmPassword',
+  ])
+
+  const { current_password, new_password } = modelLocal.value
+
+  if (!isFieldValid) {
+    alertErrorText.value = validateField(
+      localization.value,
+      current_password,
+      new_password
+    )
+  }
 
   const notReady = true
   if (notReady) {
@@ -139,6 +148,9 @@ const onSubmit = (): void => {
   }
   emits('change-password')
 }
+const onHideModal = (): void => {
+  emits('hide')
+}
 </script>
 
 <style lang="scss" scoped>

package/components/common/layout/theHeader/userMenu/modals/changePassword/lib/models/interfaces.ts

@@ -1,11 +1,16 @@
 import type { UI_I_Validation } from '~/lib/models/plugins/validation/interfaces'
 
-
 export interface UI_I_InitialValidationFields {
   currentPassword: boolean
   newPassword: boolean
   confirmPassword: boolean
 }
+
+export interface UI_I_ChangePasswordForm {
+  current_password: string
+  new_password: string
+  confirm_password: string
+}
 export interface UI_I_FormChangePassword {
   password: UI_I_Validation
   newPassword: UI_I_Validation

package/components/common/layout/theHeader/userMenu/modals/changePassword/lib/utils.ts

@@ -1,4 +1,5 @@
 import type { UI_I_Localization } from '~//lib/models/interfaces'
+import { RegExp } from '~/lib/config/regExp'
 
 export const getPasswordMismatchError = (
   localization: UI_I_Localization,
@@ -9,3 +10,19 @@ export const getPasswordMismatchError = (
     ? ''
     : localization.common.thePasswordsDoNotMatch
 }
+
+export const validateField = (
+  localization: UI_I_Localization,
+  password: string,
+  newPassword: string
+): string => {
+  if (!RegExp.password.test(newPassword)) {
+    return localization.common.currentPasswordIncorrect
+  }
+
+  if (password === newPassword) {
+    return localization.common.changePasswordPreviouslyUsed
+  }
+
+  return ''
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "bfg-common",
   "private": false,
-  "version": "1.4.317",
+  "version": "1.4.319",
   "scripts": {
     "build": "nuxt build",
     "dev": "nuxt dev --port=3002",