ChangePasswordForm

This component allows you to create a form to change passwords. It depends on CardComponent, PasswordComponent and ValidationObserver from Vee Validate.

Example

ChangePasswordForm

<change-password-form
    class="ghost-card"
    :locale="locale"
    title="Title"
    :rounded-inputs="true"
    :expanded-inputs="true"
    :horizontal-inputs="false"
    inputs-size="is-medium"
    :vbtn="vbtn"
/>

export default {
  name: 'App',
  data() {
    return {
      vbtn: {
        close: {
          icon: 'close',
          label: "Label",
          props: {
            outlined: true,
            rounded: true,
            class: 'mr-3',
            size: 'is-medium'
          },
          show: false
        },
        save: {
          icon: 'key-chain',
          label: "Label",
          props: {
            rounded: true,
            size: 'is-medium'
          },
          show: true
        }
      }
    }
  }
}

Props

NameDescriptionTypeRequiredDefault
requiresCurrentPasswordSame as PasswordComponentBooleanfalsefalse
horizontalInputsSame as horizontal in PasswordComponentBooleanfalsetrue
expandedInputsSame as expanded in PasswordComponentBooleanfalsefalse
roundedInputsSame as rounded in PasswordComponentBooleanfalsefalse
inputsSizeSame as size in PasswordComponentStringfalseundefined
validationModeSame as PasswordComponentStringfalse"aggressive"
passwordRevealSame as PasswordComponentBooleanfalsetrue
minCharsPasswordInputsSame as min-chars in PasswordComponentNumberfalse8
labelInsideInputsSame as label-inside in PasswordComponentBooleanfalsefalse
labelOnBorderInputsSame as label-on-border in PasswordComponentBooleanfalsefalse
isModerateSame as is-moderate in PasswordComponentBooleanfalsefalse
isComplexSame as complex in PasswordComponentBooleanfalsefalse
titleSets the title of the cardStringfalse"Set Password"
titleClassSets the class of the title of the cardStringfalse"is-size-5"
subtitleSets the subtitle of the cardStringfalseundefined
subtitleClassSets the class of the subtitle of the cardStringfalse"is-size-6"
isInModalIndicates if the component es on a modalBooleanfalsefalse
isLoadingIndicates if the component is loadingBooleanfalsefalse
modalWidthSets the width of the componentNumberfalse550
localeLocale string {en, es ...} for display language on componentStringfalse"en"

Events

Event NameDescriptionParameters
save--
form-close--