Corrected login failure warning

Author: Bernardo-MG

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

@@ -1,30 +1,29 @@
 <form [formGroup]="form" (ngSubmit)="onLogin()" class="needs-validation" novalidate>
-   <div class="text-center">
-      <!-- Username -->
-      <div class="mb-2">
-         <input placeholder="Username" type="text" id="usernameInput" formControlName="username" class="form-control"
-            [ngClass]="{ 'is-invalid': isFieldInvalid('username') }" />
-      </div>
-      <!-- Password -->
-      <div class="mb-2">
-         <input placeholder="Password" type="password" id="passwordInput" formControlName="password"
-            class="form-control" [ngClass]="{ 'is-invalid': isFieldInvalid('password') }" />
-      </div>
-      <!-- Remember me check -->
-      <div class="row mb-2">
-         <div class="d-flex justify-content-center">
-            <div class="form-check form-switch mb-3 mb-md-0">
-               <input id="rememberMe" type="checkbox" (change)="onRememberMe($event.target)" class="form-check-input">
-               <label for="rememberMe" class="form-check-label">Remember me</label>
-            </div>
+   <div *ngIf="failed" class="text-danger text-center">Invalid user</div>
+   <!-- Username -->
+   <div class="mb-2">
+      <input placeholder="Username" type="text" id="usernameInput" formControlName="username" class="form-control"
+         [ngClass]="{ 'is-invalid': isFieldInvalid('username') }" />
+   </div>
+   <!-- Password -->
+   <div class="mb-2">
+      <input placeholder="Password" type="password" id="passwordInput" formControlName="password" class="form-control"
+         [ngClass]="{ 'is-invalid': isFieldInvalid('password') }" />
+   </div>
+   <!-- Remember me check -->
+   <div class="row mb-2">
+      <div class="d-flex justify-content-center">
+         <div class="form-check form-switch mb-3 mb-md-0">
+            <input id="rememberMe" type="checkbox" (change)="onRememberMe($event.target)" class="form-check-input">
+            <label for="rememberMe" class="form-check-label">Remember me</label>
          </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>
+   </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>
 </form>

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

@@ -16,6 +16,11 @@ export class LoginFormComponent {
    */
   @Input() public loading = false;
 
+  /**
+   * Failed login flag. Shows the failure warning.
+   */
+  @Input() public failed = false;
+
   /**
    * Login event. Sent when the user accepts the data in the form.
    */

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

@@ -1,7 +1,6 @@
 <div class="card">
    <div class="card-body">
-      <authentication-login-form [loading]="loading" (login)="onLogin($event)"
+      <authentication-login-form [loading]="loading" [failed]="failed" (login)="onLogin($event)"
          (rememberMe)="onRememberMe($event)"></authentication-login-form>
-      <div *ngIf="failed" class="alert alert-danger mt-3 mb-0">Invalid user</div>
    </div>
 </div>