pip-webui/pip-webui-settings/src/user_settings/user_settings_change_password.html

HTML5 UI for LOB applications

<md-dialog class="pip-dialog layout-column"  width="440">
    <form name="form" ng-submit="onApply()" >
    <div class="pip-header">
        <h3 class="m0">
            {{::'SETTINGS_CHANGE_PASSWORD_TITLE' | translate : module}}
        </h3>
    </div>
    <div class="pip-body">
        <div class="pip-content">
            <div class="text-error bm8"
                 ng-messages="form.$serverError">
                <div ng-message="ERROR_UNKNOWN">
                    {{ form.$serverError.ERROR_UNKNOWN | translate }}
                </div>
            </div>

            <md-input-container class="md-block">
                <label>{{::'SETTINGS_CHANGE_PASSWORD_CURRENT_PASSWORD' | translate }}</label>
                <input name="oldPassword" type="password"
                       ng-model="changePasData.old_password"
                       ng-required="change_password.$submitted"
                       pip-clear-errors/>

                <div ng-messages="errorsWithHint(form, form.oldPassword)">
                    <div ng-message="required">
                        {{::'ERROR_REQUIRED' | translate }}
                    </div>
                    <div ng-message="ERROR_1107">
                        {{::'ERROR_WRONG_PASSWORD' | translate }}
                    </div>
                </div>

            </md-input-container>

            <md-input-container class="md-block">
                <label>{{'SETTINGS_CHANGE_PASSWORD_NEW_PASSWORD' | translate }}</label>
                <input name="newPassword" type="password"
                       ng-model="changePasData.new_password"
                       ng-change="onCheckRepeatPassword()"
                       ng-required="change_password.$submitted"
                       ng-minlength="6"
                       pip-clear-errors/>
                <div class="hint"
                     ng-if="errorsWithHint(form, form.newPassword).hint">
                    {{ 'HINT_PASSWORD' | translate }}
                </div>
                <div ng-messages="errorsWithHint(form, form.newPassword)">
                    <div ng-message="required">
                        {{::'ERROR_REQUIRED' | translate}}
                    </div>
                    <div ng-message="minlength">
                        {{::'HINT_PASSWORD' | translate }}
                    </div>
                    <div ng-message="ERROR_1105">
                        {{::'ERROR_IDENTICAL_PASSWORDS' | translate }}
                    </div>
                </div>
            </md-input-container>

            <md-input-container class="md-block">
                <label>{{ 'SETTINGS_CHANGE_PASSWORD_REPEAT_RASSWORD' | translate }}</label>
                <input name="repeat"  type="password"
                       ng-model="repeat"
                       ng-change="onCheckRepeatPassword()"
                       ng-required="change_password.$submitted"
                       ng-minlength="6" />

                <div class="hint"
                     ng-if="errorsRepeatWithHint(form.repeat).hint">
                    {{::'HINT_REPEAT_PASSWORD' | translate }}
                </div>

                <div ng-messages="errorsRepeatWithHint(form.repeat)">
                    <div ng-message="required">{{::'ERROR_REQUIRED' | translate }}</div>
                    <div ng-message="minlength">{{::'HINT_PASSWORD' | translate }}</div>
                    <div ng-message="repeat">{{::'REPEAT_PASSWORD_INVALID' | translate }}</div>
                </div>

            </md-input-container>
        </div>
    </div>
    <div class="pip-footer">
        <div>
            <md-button aria-label="xxx"
                       ng-click="onCancel()">
                {{::'CANCEL' | translate }}
            </md-button>
            <md-button type="submit" class="md-accent" aria-label="xxx">
                {{::'APPLY' | translate : module}}
            </md-button>
        </div>
    </div>
    </form>
</md-dialog>