1. <div class="col-md-12">
2.   <div class="card card-container">
3.     <form
4.       *ngIf="!isLoggedIn"
5.       name="form"
6.       (ngSubmit)="f.form.valid && onSubmit()"
7.       #f="ngForm"
8.       novalidate
9.     >
10.       <div class="form-group">
11.         <label for="username">Username</label>
12.         <input
13.           type="text"
14.           class="form-control"
15.           name="username"
16.           [(ngModel)]="form.username"
17.           required
18.           #username="ngModel"
19.         />
20.         <div
21.           class="alert alert-danger"
22.           role="alert"
23.           *ngIf="username.errors && f.submitted"
24.         >
25.           Username is required!
26.         </div>
27.       </div>
28.       <div class="form-group">
29.         <label for="password">Password</label>
30.         <input
31.           type="password"
32.           class="form-control"
33.           name="password"
34.           [(ngModel)]="form.password"
35.           required
36.           minlength="6"
37.           #password="ngModel"
38.         />
39.         <div
40.           class="alert alert-danger"
41.           role="alert"
42.           *ngIf="password.errors && f.submitted"
43.         >
44.           <div *ngIf="password.errors.required">Password is required</div>
45.           <div *ngIf="password.errors.minlength">
46.             Password must be at least 6 characters
47.           </div>
48.         </div>
49.       </div>
50.       <div class="form-group">
51.         <button class="btn btn-primary btn-block">
52.           Login
53.         </button>
54.       </div>
55.       <div class="form-group">
56.         <div
57.           class="alert alert-danger"
58.           role="alert"
59.           *ngIf="f.submitted && isLoginFailed"
60.         >
61.           Login failed: {{ errorMessage }}
62.         </div>
63.       </div>
64.     </form>
65.  
66.     <div class="alert alert-success" *ngIf="isLoggedIn">
67.       Logged in as {{ roles }}.
68.     </div>
69.   </div>
70. </div>
71.