<form name="passwordChangeForm">
  <input class="d-none" type="password" name="disable-autocomplete-hack" />

  <div class="form-group" data-ng-if='!resources.preferences.password_change_needed'>
    <label>
      <span data-translate>Current password</span>
      <span class="text-danger" data-uib-tooltip="{{'This field is mandatory' | translate}}">*</span>
    </label>
    <input class="form-control" name="current" data-ng-model="changePasswordArgs.current" type="password" autocomplete="off" data-ng-class="{'is-invalid': changePasswordArgs.password && passwordChangeForm.current.$error.required}" required />
  </div>

  <div class="form-group">
    <label>
      <span data-translate>New password</span>
      <span class="text-danger" data-uib-tooltip="{{'This field is mandatory' | translate}}">*</span>
    </label>
    <input class="form-control" name="password" data-ng-model="changePasswordArgs.password" type="password" autocomplete="off" data-password-strength-validator data-ng-class="{'is-invalid': changePasswordArgs.password && passwordChangeForm.password.$error.passwordStrengthValidator}" required />
    <password-meter data-ng-show="passwordStrengthScore" value="passwordStrengthScore"></password-meter>
    <div class="text-danger" data-ng-show="passwordStrengthScore && passwordStrengthScore < 2">
      <p data-translate>The chosen password is too weak. A valid password should be at least 12 characters long and contain a variety of characters including at least a lowercase character, a capital character, a number and a special character.</p>
     </div>
    <div class="text-danger" data-ng-show="changePasswordArgs.password && changePasswordArgs.password === changePasswordArgs.current">
      <p data-translate>The new password must be different from the current one.</p>
    </div>
  </div>

  <div class="form-group">
    <label>
      <span data-translate>Type your new password again</span>
      <span class="text-danger" data-uib-tooltip="{{'This field is mandatory' | translate}}">*</span>
    </label>
    <input class="form-control" name="confirm" data-ng-model="changePasswordArgs.confirm" type="password" autocomplete="off" data-ng-class="{'is-invalid': changePasswordArgs.password && !passwordChangeForm.password.$error && (passwordChangeForm.confirm.$error.required || changePasswordArgs.password !== changePasswordArgs.confirm)}" required/>
    <p class="text-danger" data-ng-show="changePasswordArgs.password && !passwordChangeForm.password.$error.passwordStrengthValidator && (changePasswordArgs.password !== changePasswordArgs.confirm)">
      <span data-translate>The two passwords do not match</span>
    </p>
  </div>

  <br />

  <button type="submit" class="btn btn-primary" data-ng-disabled="passwordChangeForm.$invalid || passwordChangeForm.$pristine || changePasswordArgs.password !== changePasswordArgs.confirm || (changePasswordArgs.password && changePasswordArgs.password === changePasswordArgs.current)" data-ng-click="changePassword()">
    <i class="fa-solid fa-check"></i>
    <span data-translate>Save</span>
  </button>
</form>
<div class="mt-2 alert alert-danger" data-ng-show="error.code === 11">
  <span data-translate>The new password must be different from the current one.</span>
</div>
