<!-- TODO: User generic form component; it needs to be implemented first!  -->
<div class="container col-md-6 col-md-offset-3">
  <h2>Sign In</h2>
  <form name="form" (ngSubmit)="f.form.valid && login()" #f="ngForm" novalidate>
    <div class="form-group" [ngClass]="{ 'has-error': f.submitted && !username.valid }">
      <label for="username">Username</label>
      <input type="text" class="form-control" name="username" [(ngModel)]="model.username" #username="ngModel" required />
      <div *ngIf="f.submitted && !username.valid" class="help-block">Username is required</div>
    </div>
    <div class="form-group" [ngClass]="{ 'has-error': f.submitted && !password.valid }">
      <label for="password">Password</label>
      <input type="password" class="form-control" name="password" [(ngModel)]="model.password" #password="ngModel" required />
      <div *ngIf="f.submitted && !password.valid" class="help-block">Password is required</div>
    </div>
    <div class="form-group">
      <button [disabled]="loading" class="btn btn-primary">Login</button>
    </div>
  </form>
</div>

<!-- TODO: User generic form component; it needs to be implemented first!  -->
<div class="container col-md-6 col-md-offset-3">
  <h2>Sign In</h2>
  <form name="form" (ngSubmit)="f.form.valid && login()" #f="ngForm" novalidate>
    <div class="form-group" [ngClass]="{ 'has-danger': f.submitted && !username.valid, 'has-success': username.valid }">
      <label for="username">Username</label>
      <input type="text" class="form-control" name="username" [(ngModel)]="model.username" #username="ngModel" [ngClass]="{ 'form-control-danger': f.submitted && !username.valid, 'form-control-success': username.valid }" required />
      <div *ngIf="f.submitted && !username.valid" class="form-control-feedback">Username is required</div>
    </div>
    <div class="form-group" [ngClass]="{ 'has-danger': f.submitted && !password.valid, 'has-success': password.valid }">
      <label for="password">Password</label>
      <input type="password" class="form-control" name="password" [(ngModel)]="model.password" #password="ngModel" [ngClass]="{ 'form-control-danger': f.submitted && !password.valid, 'form-control-success': password.valid }" required />
      <div *ngIf="f.submitted && !password.valid" class="form-control-feedback">Password is required</div>
    </div>
    <div class="form-group">
      <button [disabled]="loading" class="btn btn-primary">Login</button>
    </div>
  </form>
</div>

Use Bootstrap validation classes for login form.
Use Bootstrap validation classes for login form.
