<div class="page-header">
    <h1>{{'changePasswordHtmlTitle' | translate}}</h1>
</div>

<div class="row">
    <div class="col-md-10">
    </div>
    <div class="col-md-2 subtitle">
        <span class="subtitle">{{'allFieldsRequired' | translate}}</span>
    </div>
    <hr/>
</div>

<form #formGroup="ngForm" (ngSubmit)="changePassword()" class="form-horizontal">
    <input readonly="" value="this is not a login form" style="display: none;" type="text">
    <input readonly="" value="this is not a login form" style="display: none;" type="password">

    <div class="form-group">
        <div class="col-sm-2 col-md-2">
            <label for="password" class="control-label">{{'password' | translate}}</label>
        </div>

        <div class="col-sm-10 col-md-10">
            <input ngModel class="form-control" id="password" name="password" autofocus="" autocomplete="off" type="password">
        </div>
    </div>

    <div class="form-group">
        <div class="col-sm-2 col-md-2">
            <label for="password-new" class="control-label">{{'passwordNew' | translate}}</label>
        </div>

        <div class="col-sm-10 col-md-10">
            <input ngModel class="form-control" id="newPassword" name="newPassword" autocomplete="off" type="password">
        </div>
    </div>

    <div class="form-group">
        <div class="col-sm-2 col-md-2">
            <label for="password-confirm" class="control-label">{{'passwordConfirm' | translate}}</label>
        </div>

        <div class="col-sm-10 col-md-10">
            <input ngModel class="form-control" id="confirmation" name="confirmation" autocomplete="off" type="password">
        </div>
    </div>

    <div class="form-group">
        <div id="kc-form-buttons" class="col-md-offset-2 col-md-10 submit">
            <div class="">
                <button type="submit" class="btn btn-primary btn-lg" name="submitAction">{{'doSave' | translate}}</button>
            </div>
        </div>
    </div>
</form>