Better handling of login form status

Author: Bernardo-MG

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

@@ -1,28 +1,30 @@
 <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]="loginForm" (ngSubmit)="onSubmit()">
-              <div class="form-group">
-                  <label for="username">Username</label>
-                  <input type="text" formControlName="username" class="form-control" [ngClass]="{ 'is-invalid': submitted && f['username'].errors }" />
-                  <div *ngIf="submitted && f['username'].errors" class="invalid-feedback">
-                      <div *ngIf="f['username'].errors['required']">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': submitted && f['password'].errors }" />
-                  <div *ngIf="submitted && f['password'].errors" class="invalid-feedback">
-                      <div *ngIf="f['password'].errors['required']">Password is required</div>
-                  </div>
-              </div>
-              <button [disabled]="loading" class="btn btn-primary">
-                  <span *ngIf="loading" class="spinner-border spinner-border-sm mr-1"></span>
-                  Login
-              </button>
-              <div *ngIf="error" class="alert alert-danger mt-3 mb-0">{{error}}</div>
-          </form>
-      </div>
-  </div>
+    <div class="card">
+        <h4 class="card-header">Login</h4>
+        <div class="card-body">
+            <form [formGroup]="form" (ngSubmit)="onSubmit()">
+                <div class="form-group">
+                    <label for="username">Username</label>
+                    <input type="text" formControlName="username" class="form-control"
+                        [ngClass]="{ 'is-invalid': isFormInvalid() && form.get('username')?.errors }" />
+                    <div *ngIf="isFormInvalid() && 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() && form.get('password')?.errors }" />
+                    <div *ngIf="isFormInvalid() && form.get('password')?.hasError('required')" class="invalid-feedback">
+                        Password is required
+                    </div>
+                </div>
+                <button [disabled]="!canLogin()" class="btn btn-primary">
+                    <span *ngIf="loading" class="spinner-border spinner-border-sm mr-1"></span>
+                    Login
+                </button>
+                <div *ngIf="error" class="alert alert-danger mt-3 mb-0">{{error}}</div>
+            </form>
+        </div>
+    </div>
 </div>

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

@@ -10,59 +10,63 @@ import { AuthenticationService } from '@app/authentication/service/authenticatio
 })
 export class LoginFormComponent implements OnInit {
 
-  loginForm: FormGroup;
-  loading = false;
-  submitted = false;
-  returnUrl: string = '';
-  error = '';
+  public form = this.formBuilder.group({
+    username: ['', Validators.required],
+    password: ['', Validators.required]
+  });
+
+  public loading = false;
+
+  public submitted = false;
+
+  public error = '';
+
+  private returnUrl: string = '';
 
   constructor(
     private formBuilder: FormBuilder,
     private route: ActivatedRoute,
     private router: Router,
     private authenticationService: AuthenticationService
-  ) {
+  ) { }
+
+  ngOnInit() {
     // redirect to home if already logged in
     if (this.authenticationService.getUser().logged) {
       this.router.navigate(['/']);
     }
-
-    this.loginForm = this.formBuilder.group({
-      username: ['', Validators.required],
-      password: ['', Validators.required]
-    });
-  }
-
-  ngOnInit() {
     // get return url from route parameters or default to '/'
     this.returnUrl = this.route.snapshot.queryParams['returnUrl'] || '/';
   }
 
-  // convenience getter for easy access to form fields
-  get f() { return this.loginForm.controls; }
-
-  onSubmit() {
+  public onSubmit() {
     this.submitted = true;
 
     // stop here if form is invalid
-    if (this.loginForm.invalid) {
-      return;
+    if (this.form.valid) {
+      this.loading = true;
+      this.authenticationService.login(this.form.value.username, this.form.value.password)
+        .subscribe({
+          next: user => {
+            this.loading = false;
+            if (user.logged) {
+              this.router.navigate([this.returnUrl]);
+            }
+          },
+          error: error => {
+            this.error = error;
+            this.loading = false;
+          }
+        });
     }
+  }
 
-    this.loading = true;
-    this.authenticationService.login(this.f['username'].value, this.f['password'].value)
-      .subscribe({
-        next: user => {
-          this.loading = false;
-          if (user.logged) {
-            this.router.navigate([this.returnUrl]);
-          }
-        },
-        error: error => {
-          this.error = error;
-          this.loading = false;
-        }
-      });
+  public isFormInvalid(): boolean {
+    return this.form.invalid && (this.form.dirty || this.form.touched);
+  }
+
+  public canLogin(): boolean {
+    return this.form.valid;
   }
 
 }