Cacher is the code snippet organizer for pro developers

form.form(
  id="changePasswordForm"
  name="changePasswordForm"
  ng-submit="vm.changePassword()"
  novalidate
)
  //- --- OLD PASSWORD ---
  .input-wrap
    input.input-wrap__input(
      id="oldPassword"
      name="oldPassword"
      type="text"
      ng-model="vm.oldPassword"
      required
      ng-change="vm.hideServerValidationError('oldPassword')"
    )
    label.input-wrap__label.input-wrap__label--animated(
      focus-shift
      focus-to="oldPassword"
    ) Старый пароль*
    .input-wrap__iconwrap
      .input-wrap__icon.input-wrap__icon--validate
    div(
      ng-messages="changePasswordForm.oldPassword.$error"
      ng-if="changePasswordForm.oldPassword.$touched"
    )
      .input-wrap__error-message(ng-message="required")
        | Поле обазательно для заполнения
    div(
      ng-messages="vm.serverValidationError.oldPassword"
      ng-if="vm.showServerValidationError"
    )
      .input-wrap__error-message(ng-message="validation")
        | {{vm.serverValidationError.oldPassword.message}}

  //- --- NEW PASSWORD ---
  .input-wrap
    input.input-wrap__input(
      id="password"
      name="password"
      type="password"
      ng-model="vm.password"
      ng-minlength="6"
      required
      ng-change="vm.hideServerValidationError('password')"
    )
    label.input-wrap__label.input-wrap__label--animated(
      focus-shift
      focus-to="password"
    ) Новый пароль*
    .input-wrap__iconwrap
      .input-wrap__icon.input-wrap__icon--validate
    div(
      ng-messages="changePasswordForm.password.$error"
      ng-if="changePasswordForm.password.$touched"
    )
      .input-wrap__error-message(ng-message="required")
        | Поле обазательно для заполнения
    div(
      ng-messages="changePasswordForm.password.$error"
      ng-if="changePasswordForm.password.$touched"
    )
      .input-wrap__error-message(ng-message="minlength")
        | Пароль должен содержать минимум 6 символов
    div(
      ng-messages="vm.serverValidationError.password"
      ng-if="vm.showServerValidationError"
    )
      .input-wrap__error-message(ng-message="validation")
        | {{vm.serverValidationError.password.message}}

  //- --- REPEATED PASSWORD ---
  .input-wrap
    input.input-wrap__input(
      id="repeatedPassword"
      name="repeatedPassword"
      type="password"
      ng-model="vm.repeatedPassword"
      ng-pattern="{{vm.password}}"
      required
    )
    label.input-wrap__label.input-wrap__label--animated(
      focus-shift
      focus-to="repeatedPassword"
    ) Повторите новый пароль*
    .input-wrap__iconwrap
      .input-wrap__icon.input-wrap__icon--validate
    div(
      ng-messages="changePasswordForm.repeatedPassword.$error"
      ng-if="changePasswordForm.repeatedPassword.$touched"
    )
      .input-wrap__error-message(ng-message="required")
        | Поле обазательно для заполнения
      .input-wrap__error-message(ng-message="pattern")
        | Пароли не совпадают

  div(layout="row" layout-align="end center")
    dk-button.dk-button.dk-button--primary.dk-button--with-border(
      label="Изменить"
      type="submit"
      form-id="changePasswordForm"
      disabled="!vm.canChange(changePasswordForm)"
    )