<div class="plugin-user">
    <h4>Login to Peek</h4>

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

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

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

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

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

    <button
        (click)="doLogin()"
        [class.btn-success]="isLoginEnabled()"
        [disabled]="!isLoginEnabled()"
        class="form-control"
    >
        <i nz-icon nzTheme="outline" nzType="login"></i>
        {{loginText()}}
    </button>
</div>
