Reworked waiting cue on login form

Author: Bernardo-MG

src/app/core/login/components/login-form/login-form.component.html

@@ -3,12 +3,14 @@
    <!-- Username -->
    <div class="mb-2">
       <input placeholder="Username" type="text" id="usernameInput" formControlName="username" class="form-control"
-         [ngClass]="{ 'is-invalid': isFieldInvalid('username') }" />
+         [ngClass]="{ 'is-invalid': isInvalid('username') }" [disabled]="!isInputEnabled()"
+         [attr.aria-disabled]="!isInputEnabled()" />
    </div>
    <!-- Password -->
    <div class="mb-2">
       <input placeholder="Password" type="password" id="passwordInput" formControlName="password" class="form-control"
-         [ngClass]="{ 'is-invalid': isFieldInvalid('password') }" />
+         [ngClass]="{ 'is-invalid': isInvalid('password') }" [disabled]="!isInputEnabled()"
+         [attr.aria-disabled]="!isInputEnabled()" />
    </div>
    <!-- Remember me check -->
    <div class="row mb-2">
@@ -19,11 +21,19 @@
          </div>
       </div>
    </div>
-   <!-- Login button -->
    <div class="d-grid gap-2">
-      <button [disabled]="!isLoginEnabled()" class="btn btn-primary" [attr.aria-disabled]="!isLoginEnabled()"
-         aria-label="Login">
-         <icon-waiting *ngIf="loading"></icon-waiting> Login
-      </button>
+      <div *ngIf="waiting; then waiting_cue else login_button"></div>
+      <ng-template #waiting_cue>
+         <!-- Waiting cue -->
+         <button type="submit" class="btn btn-primary" aria-label="Login"
+            disabled><icon-waiting></icon-waiting></button>
+      </ng-template>
+      <ng-template #login_button>
+         <!-- Login button -->
+         <button type="submit" [disabled]="!isLoginEnabled()" class="btn btn-primary"
+            [attr.aria-disabled]="!isLoginEnabled()" aria-label="Login">
+            <icon-waiting *ngIf="waiting"></icon-waiting> Login
+         </button>
+      </ng-template>
    </div>
 </form>

src/app/core/login/components/login-form/login-form.component.spec.ts

@@ -70,15 +70,15 @@ describe('LoginFormComponent', () => {
   it('should disable the login button when the form is valid but it is loading', () => {
     component.form.controls['username'].setValue('username');
     component.form.controls['password'].setValue('password');
-    component.loading = true;
+    component.waiting = true;
     fixture.detectChanges();
 
     const button = fixture.nativeElement.querySelector('form button');
     expect(button.disabled).toEqual(true);
   });
 
   it('should disable the login button when the form is loading', () => {
-    component.loading = true;
+    component.waiting = true;
     fixture.detectChanges();
 
     const button = fixture.nativeElement.querySelector('form button');

src/app/core/login/components/login-form/login-form.component.ts

@@ -12,15 +12,20 @@ import { LoginFormUser } from '../../models/login-form-user';
 export class LoginFormComponent {
 
   /**
-   * Loading flag. Shows the loading visual cue and disables the form.
+   * Waiting flag. Shows the waiting visual cue and disables the form.
    */
-  @Input() public loading = false;
+  @Input() public waiting = false;
 
   /**
    * Failed login flag. Shows the failure warning.
    */
   @Input() public failed = false;
 
+  /**
+   * Disabled form flag.
+   */
+  @Input() public disabled = false;
+
   /**
    * Login event. Sent when the user accepts the data in the form.
    */
@@ -76,7 +81,7 @@ export class LoginFormComponent {
    * @param field field to check
    * @returns true if the form is invalid, false otherwise
    */
-  public isFieldInvalid(field: string): boolean {
+  public isInvalid(field: string): boolean {
     let invalid: boolean;
 
     if (this.form.invalid) {
@@ -93,8 +98,22 @@ export class LoginFormComponent {
     return invalid;
   }
 
+  /**
+   * Returns true if the login button is enabled.
+   * 
+   * @returns true if the login button is enabled, false otherwise
+   */
   public isLoginEnabled(): boolean {
-    return ((this.form.valid) && (!this.loading));
+    return ((this.form.valid) && (!this.waiting) && (!this.disabled));
+  }
+
+  /**
+   * Returns true if the inputs are enabled.
+   * 
+   * @returns true if the inputs are enabled, false otherwise
+   */
+  public isInputEnabled(): boolean {
+    return ((!this.waiting) && (!this.disabled));
   }
 
 }

src/app/core/login/containers/login/login.component.html

@@ -1,6 +1,6 @@
 <div class="card">
    <div class="card-body">
-      <authentication-login-form [loading]="loading" [failed]="failed" (login)="onLogin($event)"
+      <authentication-login-form [waiting]="loading" [failed]="failed" (login)="onLogin($event)"
          (rememberMe)="onRememberMe($event)"></authentication-login-form>
    </div>
 </div>