<div>
    <div class="alert alert-success text-center" ng-hide="!vm.passwordValues.generatedPassword">
        <small>Password has been reset to:</small>
        <br />
        <strong>{{vm.passwordValues.generatedPassword}}</strong>
    </div>
    <div ng-switch="vm.changing">
        <div ng-switch-when="false">
            <button type="button" ng-click="vm.doChange()" class="btn umb-button__button btn-action umb-outline umb-outline--thin">
                <localize key="general_changePassword">Change password</localize>
            </button>
        </div>
        <div ng-switch-when="true">

            <ng-form name="changePasswordForm">

                <!-- we need to show the old pass field when the provider cannot retrieve the password -->
                <umb-control-group alias="oldPassword" label="@user_oldPassword" ng-if="vm.showOldPass()" required="true">
                    <input type="password" name="password" id="oldPassword" ng-model="vm.passwordValues.oldPassword"
                           class="input-block-level umb-textstring textstring"
                           autocomplete="current-password"
                           required
                           val-server-field="oldPassword"
                           no-dirty-check
                           spellcheck="false"
                    />
                    <span ng-messages="changePasswordForm.oldPassword.$error" show-validation-on-submit>
                        <span class="help-inline" ng-message="required">Required</span>
                        <span class="help-inline" ng-message="valServerField">{{changePasswordForm.oldPassword.errorMsg}}</span>
                    </span>
                </umb-control-group>

                <umb-control-group alias="password" label="@user_newPassword" required="true">
                    <input type="password" name="newPassword" id="password"
                           class="input-block-level umb-textstring textstring"
                           autocomplete="new-password"
                           required
                           val-server-field="password"
                           ng-model="vm.passwordValues.newPassword"
                           ng-minlength="{{vm.config.minPasswordLength}}"
                           no-dirty-check
                           ng-keyup="vm.newPasswordKeyUp($event)"
                           spellcheck="false"
                    />
                    <span ng-messages="changePasswordForm.password.$error" show-validation-on-submit>
                        <span class="help-inline" ng-message="required">Required</span>
                        <span class="help-inline" ng-message="minlength">Minimum {{vm.config.minPasswordLength}} characters</span>
                        <span class="help-inline" ng-message="valServerField">{{changePasswordForm.password.errorMsg}}</span>
                    </span>
                    <umb-password-tip password-val="vm.passwordVal" min-pwd-length="vm.config.minPasswordLength" min-pwd-non-alpha-num="vm.config.minNonAlphaNumericChars"></umb-password-tip>
                </umb-control-group>

                <umb-control-group alias="confirmPassword" label="@user_confirmNewPassword" required="true">
                    <input type="password" name="confirmPassword" id="confirmPassword" ng-model="vm.passwordValues.confirm"
                           class="input-block-level umb-textstring textstring"
                           autocomplete="new-password"
                           val-compare="newPassword"
                           no-dirty-check
                           spellcheck="false"
                    />
                    <span ng-messages="changePasswordForm.confirmPassword.$error" show-validation-on-submit>
                        <span class="help-inline" ng-message="valCompare"><localize key="user_passwordMismatch">The confirmed password doesn't match the new password!</localize></span>
                    </span>
                </umb-control-group>

                <button ng-click="vm.cancelChange()" ng-show="vm.showCancelBtn()" class="btn umb-button__button btn-cancel umb-button-- umb-outline umb-outline--thin">
                    <localize key="general_cancel">Cancel</localize>
                </button>

            </ng-form>
        </div>
    </div>

</div>
