Configure app routes (#7)

* run docker componse in detached mode

* add master component with home page

todo-client/angular.json

@@ -25,7 +25,10 @@
             "aot": false,
             "assets": ["src/favicon.ico", "src/assets"],
             "styles": ["src/styles.scss"],
-            "scripts": []
+            "scripts": [
+              "./node_modules/jquery/dist/jquery.min.js",
+              "./node_modules/bootstrap/dist/js/bootstrap.min.js"
+            ]
           },
           "configurations": {
             "production": {
@@ -169,9 +172,7 @@
               "projects/app-common/tsconfig.lib.json",
               "projects/app-common/tsconfig.spec.json"
             ],
-            "exclude": [
-              "**/node_modules/**"
-            ]
+            "exclude": ["**/node_modules/**"]
           }
         }
       }

todo-client/package.json

@@ -20,6 +20,7 @@
     "@angular/platform-browser-dynamic": "~8.1.1",
     "@angular/router": "~8.1.1",
     "bootstrap": "^4.3.1",
+    "jquery": "^3.4.1",
     "rxjs": "~6.4.0",
     "tslib": "^1.9.0",
     "zone.js": "~0.9.1"

todo-client/projects/auth/src/lib/services/auth.service.ts

@@ -9,7 +9,7 @@ import { HttpClient } from '@angular/common/http';
 import { map } from 'rxjs/operators';
 
 export interface ApplicationUser {
-	access_token: string;
+	accessToken: string;
 	expiresIn: Date;
 	username: string;
 }
@@ -36,7 +36,7 @@ export class AuthService {
 		return this.http.post<any>('/auth/login', { username, password }).pipe(
 			map(user => {
 				// login successful if there's a jwt token in the response
-				if (user && user.access_token) {
+				if (user && user.accessToken) {
 					// store; user; details; and; jwt; token in local
 					// storage; to; keep; user; logged in between; page; refreshes;
 

todo-client/projects/auth/src/lib/services/jwt-interceptor.ts

@@ -19,10 +19,10 @@ export class JwtInterceptor implements HttpInterceptor {
 	): Observable<HttpEvent<any>> {
 		// add authorization header with jwt token if available
 		const currentUser = this.authService.currentUserValue;
-		if (currentUser && currentUser.access_token) {
+		if (currentUser && currentUser.accessToken) {
 			request = request.clone({
 				setHeaders: {
-					Authorization: `Bearer ${currentUser.access_token}`
+					Authorization: `Bearer ${currentUser.accessToken}`
 				}
 			});
 		}

todo-client/src/app/app-routing.module.ts

@@ -1,11 +1,28 @@
 import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
 import { LoginComponent } from 'projects/auth/src/public-api';
+import { MasterComponent } from './shared/master/master.component';
+import { HomeComponent } from './shared/home/home.component';
 
 const routes: Routes = [
 	{
 		path: '',
-		component: LoginComponent
+		component: MasterComponent,
+		children: [
+			{
+				path: '',
+				component: HomeComponent
+			}
+		]
+	},
+	{
+		path: '',
+		children: [
+			{
+				path: 'login',
+				component: LoginComponent
+			}
+		]
 	}
 ];
 

todo-client/src/app/app.module.ts

@@ -8,9 +8,11 @@ import {
 	jwtInterceptorProvider
 } from 'projects/auth/src/public-api';
 import { AppCommonModule } from 'projects/app-common/src/public-api';
+import { MasterComponent } from './shared/master/master.component';
+import { HomeComponent } from './shared/home/home.component';
 
 @NgModule({
-	declarations: [AppComponent],
+	declarations: [AppComponent, MasterComponent, HomeComponent],
 	imports: [BrowserModule, AppRoutingModule, AppCommonModule, AuthModule],
 	providers: [jwtInterceptorProvider],
 	bootstrap: [AppComponent]

todo-client/src/app/shared/home/home.component.html

@@ -0,0 +1,7 @@
+<div class="row text-center">
+  <div class="col-md-12">
+    <h2 class="">Welcome to Todozz App!</h2>
+
+    <p>Here you can manage your Todo Lists in a breeze!</p>
+  </div>
+</div>

todo-client/src/app/shared/home/home.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-home',
+  templateUrl: './home.component.html',
+  styleUrls: ['./home.component.scss']
+})
+export class HomeComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

todo-client/src/app/shared/master/master.component.html

@@ -0,0 +1,38 @@
+<div class="navbar navbar-expand-lg navbar-light bg-light shadow fixed-top">
+  <div class="container">
+    <a class="navbar-brand" href="#">
+      <i class="fas fa-tasks"></i>&nbsp;Todozz</a
+    >
+    <button
+      class="navbar-toggler"
+      type="button"
+      data-toggle="collapse"
+      data-target="#navbarResponsive"
+      aria-controls="navbarResponsive"
+      aria-expanded="false"
+      aria-label="Toggle navigation"
+    >
+      <span class="navbar-toggler-icon"></span>
+    </button>
+    <div class="collapse navbar-collapse" id="navbarResponsive">
+      <ul class="navbar-nav ml-auto">
+        <li class="nav-item" routerLinkActive="active">
+          <a class="nav-link" [routerLink]="['/']">
+            Home
+          </a>
+        </li>
+        <li class="nav-item" routerLinkActive="active">
+          <a class="nav-link" href="#">Todo</a>
+        </li>
+        <li *ngIf="loggedIn" class="nav-item" routerLinkActive="active">
+          <a class="nav-link" href="#">Logout</a>
+        </li>
+      </ul>
+    </div>
+  </div>
+</div>
+<section class="py-5 mt-5">
+  <div class="container">
+    <router-outlet></router-outlet>
+  </div>
+</section>

todo-client/src/app/shared/master/master.component.ts

@@ -0,0 +1,17 @@
+import { Component, OnInit } from '@angular/core';
+import { AuthService } from 'projects/auth/src/public-api';
+
+@Component({
+	selector: 'app-master',
+	templateUrl: './master.component.html',
+	styleUrls: ['./master.component.scss']
+})
+export class MasterComponent implements OnInit {
+	public loggedIn = false;
+
+	constructor(private readonly authService: AuthService) {}
+
+	ngOnInit() {
+		this.loggedIn = !!this.authService.currentUserValue;
+	}
+}

todo-client/src/index.html

@@ -1,14 +1,21 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
-<head>
-  <meta charset="utf-8">
-  <title>TodoClient</title>
-  <base href="/">
+  <head>
+    <meta charset="utf-8" />
+    <title>TodoClient</title>
+    <base href="/" />
 
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <link rel="icon" type="image/x-icon" href="favicon.ico">
-</head>
-<body>
-  <app-root></app-root>
-</body>
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link
+      rel="stylesheet"
+      href="https://use.fontawesome.com/releases/v5.7.0/css/all.css"
+      integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ"
+      crossorigin="anonymous"
+    />
+
+    <link rel="icon" type="image/x-icon" href="favicon.ico" />
+  </head>
+  <body>
+    <app-root></app-root>
+  </body>
 </html>