Simplified login form

Author: Bernardo-MG

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

@@ -1,30 +1,22 @@
-<div class="col-md-6 offset-md-3 mt-5">
-    <div class="card">
-        <h4 class="card-header">Login</h4>
-        <div class="card-body">
-            <form [formGroup]="form" (ngSubmit)="onLogin()">
-                <div class="form-group">
-                    <label for="username">Username</label>
-                    <input type="text" formControlName="username" class="form-control"
-                        [ngClass]="{ 'is-invalid': isFormInvalid('username') }" />
-                    <div *ngIf="isFormInvalid('username') && form.get('username')?.hasError('required')" class="invalid-feedback">
-                        Username is required
-                    </div>
-                </div>
-                <div class="form-group">
-                    <label for="password">Password</label>
-                    <input type="password" formControlName="password" class="form-control"
-                        [ngClass]="{ 'is-invalid': isFormInvalid('password') }" />
-                    <div *ngIf="isFormInvalid('password') && form.get('password')?.hasError('required')" class="invalid-feedback">
-                        Password is required
-                    </div>
-                </div>
-                <button [disabled]="!canLogin()" class="btn btn-primary" [attr.aria-disabled]="!canLogin()" aria-label="Login">
-                    <span *ngIf="loading" class="spinner-border spinner-border-sm mr-1"></span>
-                    Login
-                </button>
-                <div *ngIf="failed" class="alert alert-danger mt-3 mb-0">Invalid user</div>
-            </form>
+<form [formGroup]="form" (ngSubmit)="onLogin()">
+    <div class="form-group">
+        <label for="username">Username</label>
+        <input type="text" formControlName="username" class="form-control"
+            [ngClass]="{ 'is-invalid': isFormInvalid('username') }" />
+        <div *ngIf="isFormInvalid('username') && form.get('username')?.hasError('required')" class="invalid-feedback">
+            Username is required
         </div>
     </div>
-</div>
+    <div class="form-group">
+        <label for="password">Password</label>
+        <input type="password" formControlName="password" class="form-control"
+            [ngClass]="{ 'is-invalid': isFormInvalid('password') }" />
+        <div *ngIf="isFormInvalid('password') && form.get('password')?.hasError('required')" class="invalid-feedback">
+            Password is required
+        </div>
+    </div>
+    <button [disabled]="!canLogin()" class="btn btn-primary" [attr.aria-disabled]="!canLogin()" aria-label="Login">
+        <span *ngIf="loading" class="spinner-border spinner-border-sm mr-1"></span>
+        Login
+    </button>
+</form>

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

@@ -11,8 +11,6 @@ export class LoginFormComponent {
 
   @Input() public loading = false;
 
-  @Input() public failed = false;
-
   @Output() public login = new EventEmitter<LoginUser>();
 
   public form = this.formBuilder.group({

src/app/login/view/login-view/login-view.component.html

@@ -1 +1,9 @@
-<login-form (login)="onLogin($event)" [failed]="failed" [loading]="loading"></login-form>
+<div class="col-md-6 offset-md-3 mt-5">
+    <div class="card">
+        <h4 class="card-header">Login</h4>
+        <div class="card-body">
+            <login-form (login)="onLogin($event)" [loading]="loading"></login-form>
+            <div *ngIf="failed" class="alert alert-danger mt-3 mb-0">Invalid user</div>
+        </div>
+    </div>
+</div>

tsconfig.json

@@ -10,6 +10,8 @@
     "outDir": "./dist/out-tsc",
     "forceConsistentCasingInFileNames": true,
     "strict": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
     "noImplicitReturns": true,
     "noFallthroughCasesInSwitch": true,
     "sourceMap": true,
@@ -18,10 +20,10 @@
     "experimentalDecorators": true,
     "moduleResolution": "node",
     "importHelpers": true,
-    "target": "es2017",
+    "target": "es2020",
     "module": "es2020",
     "lib": [
-      "es2018",
+      "es2020",
       "dom"
     ]
   },