<div class="plugin-user">

    <h4>Login to Peek</h4>

    <form autocomplete="off" novalidate (keyup.enter)="doLogin()">
        <fieldset [disabled]="isAuthenticating">
            <div class="form-group">
                <input class="form-control" type="text" id="username"
                       name="password"
                       placeholder="Username"
                       [(ngModel)]="selectedUser.userName">
            </div>

            <!-- Login with user input box -->
            <div class="form-group">
                <input class="form-control" type="password" id="password"
                       name="password"
                       placeholder="password"
                       [(ngModel)]="selectedUser.password">
            </div>
        </fieldset>
    </form>

    <p class="form-control bg-danger" *ngFor="let error of errors">
        {{error}}
    </p>

    <p class="form-control bg-warning" *ngFor="let warning of warnings">
        {{warning}}
    </p>

    <p class="form-control bg-info" *ngIf="warnings != null && warnings.length != 0">
        Click 'Login' a second time to ignore these warnings.
    </p>

    <button class="form-control"
            [class.btn-success]="isLoginEnabled()"
            [disabled]="!isLoginEnabled()"
            (click)="doLogin()">
        <fa name="sign-in"></fa>
        {{loginText()}}
    </button>
</div>

