Finished basic login app

src/app/app-routing.module.ts

@@ -4,6 +4,7 @@ import { RouterModule, Routes } from '@angular/router';
 import { HomeComponent } from './home/home.component';
 import { LoginComponent } from './login/login.component';
 import { DashboardComponent } from './dashboard/dashboard.component';
+import { CanActivateRoutesGuard } from './can-activate-routes.guard';
 
 const routes: Routes = [
   {
@@ -21,12 +22,14 @@ const routes: Routes = [
   },
   {
     path: 'dashboard',
-    component: DashboardComponent
+    component: DashboardComponent,
+    canActivate: [CanActivateRoutesGuard]
   }
 ];
 
 @NgModule({
   imports: [RouterModule.forRoot(routes)],
-  exports: [RouterModule]
+  exports: [RouterModule],
+  providers: [CanActivateRoutesGuard]
 })
 export class AppRoutingModule {}

src/app/auth.service.ts

@@ -12,10 +12,10 @@ export class AuthService {
     return !!this.sessionService.getUser();
   }
 
-  public authenticate(user: String, pass: String): void {
+  public authenticate(user: String, pass: String) {
     if (user === 'admin' && pass === 'pass') {
       this.signIn();
-    }
+    } else return false;
   }
 
   public signIn(): void {

src/app/can-activate-routes.guard.spec.ts

@@ -0,0 +1,7 @@
+import { CanActivateRoutes } from './can-activate-routes.guard';
+
+describe('CanActivateRoutes', () => {
+  it('should create an instance', () => {
+    expect(new CanActivateRoutes()).toBeTruthy();
+  });
+});

src/app/can-activate-routes.guard.ts

@@ -0,0 +1,17 @@
+import { Injectable } from '@angular/core';
+import { AuthService } from './auth.service';
+import { Router, CanActivate } from '@angular/router';
+import { Observable } from 'rxjs';
+
+@Injectable()
+export class CanActivateRoutesGuard implements CanActivate {
+  constructor(private authService: AuthService, private router: Router) {}
+
+  public canActivate(): Observable<boolean> | Promise<boolean> | boolean {
+    if (!this.authService.isSignedIn()) {
+      this.router.navigate(['/login']);
+      return false;
+    }
+    return true;
+  }
+}

src/app/login/login.component.html

@@ -14,9 +14,13 @@
         <label for="">Password</label>
         <input formControlName="password" type="password" class="form-control" id="" placeholder="password" />
       </div>
+      <br />
+      <div class="form-group mx-4">
+        <span class="text-danger" *ngIf="hasError">Incorrect username or password!</span>
+      </div>
 
       <div class="form-group mx-5">
-        <button type="submit" class="btn btn-primary">Submit</button>
+        <button [disabled]="form.invalid" type="submit" class="btn btn-primary">Submit</button>
       </div>
     </form>
   </div>

src/app/login/login.component.ts

@@ -9,6 +9,7 @@ import { AuthService } from '../auth.service';
 })
 export class LoginComponent implements OnInit {
   constructor(private formBuilder: FormBuilder, private authService: AuthService) {}
+  hasError: boolean = false;
 
   form = this.formBuilder.group({
     username: ['', Validators.required],
@@ -18,6 +19,8 @@ export class LoginComponent implements OnInit {
   ngOnInit() {}
 
   onSubmit() {
-    this.authService.authenticate(this.form.get('username').value, this.form.get('password').value);
+    if (!this.authService.authenticate(this.form.get('username').value, this.form.get('password').value)) {
+      this.hasError = true;
+    }
   }
 }

src/app/navbar/navbar.component.html

@@ -1,22 +1,26 @@
 <nav class="navbar navbar-expand-sm navbar-light bg-light">
-  <a class="navbar-brand text-primary" [routerLink]="['/home']" routerLinkActive="active">Jest Practice Tutorial</a>
+  <a [class.disabled]="isSignedIn()" class="nav-link text-primary" [routerLink]="['/home']" routerLinkActive="active"
+    ><h4>
+      Jest Practice Tutorial
+    </h4></a
+  >
   <button class="navbar-toggler d-lg-none" type="button" data-toggle="collapse" data-target="#collapsibleNavId" aria-controls="collapsibleNavId" aria-expanded="false" aria-label="Toggle navigation">
     <span class="navbar-toggler-icon"></span>
   </button>
   <div class="collapse navbar-collapse" id="collapsibleNavId">
     <ul class="navbar-nav nav-pills mr-auto mt-2 mt-lg-0">
       <li class="nav-item">
-        <a class="nav-link" [routerLink]="['/home']" routerLinkActive="active">Home</a>
+        <a class="nav-link" [class.disabled]="isSignedIn()" [routerLink]="['/home']" routerLinkActive="active">Home</a>
       </li>
       <li class="nav-item">
-        <a class="nav-link" [routerLink]="['/login']" routerLinkActive="active">Login</a>
+        <a class="nav-link" [class.disabled]="isSignedIn()" [routerLink]="['/login']" routerLinkActive="active">Login</a>
       </li>
     </ul>
-    <ul class="navbar-nav nav-pills mt-2 mt-lg-0">
+    <ul class="navbar-nav nav-pills mt-2 mt-lg-0" *ngIf="isSignedIn()">
       <li class="nav-item dropdown">
         <a class="nav-link dropdown-toggle" id="dropdownId" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></a>
         <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownId">
-          <a class="dropdown-item" [routerLink]="['/home']">Logout</a>
+          <a class="dropdown-item" (click)="doSignOut()">Logout</a>
         </div>
       </li>
     </ul>

src/app/navbar/navbar.component.ts

@@ -1,15 +1,21 @@
 import { Component, OnInit } from '@angular/core';
+import { AuthService } from '../auth.service';
 
 @Component({
   selector: 'app-navbar',
   templateUrl: './navbar.component.html',
   styleUrls: ['./navbar.component.css']
 })
 export class NavbarComponent implements OnInit {
+  constructor(private authService: AuthService) {}
 
-  constructor() { }
+  ngOnInit() {}
 
-  ngOnInit() {
+  isSignedIn() {
+    return this.authService.isSignedIn();
   }
 
+  doSignOut() {
+    this.authService.signOut();
+  }
 }