auth login box worked, but logout not working

package-lock.json

@@ -2118,6 +2118,22 @@
         }
       }
     },
+    "@progress/kendo-angular-label": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/@progress/kendo-angular-label/-/kendo-angular-label-2.3.3.tgz",
+      "integrity": "sha512-bu6LGH8GabpvTJA+884rsxwL2+ERteOkjZVrAoXTGnExOvjfO7VZrwe2PouB3pnQz/6XhSeKJWwZamEuVl8ZRw==",
+      "requires": {
+        "@progress/kendo-schematics": "^1.0.0",
+        "tslib": "^1.9.0"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "1.14.1",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
+          "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
+        }
+      }
+    },
     "@progress/kendo-angular-layout": {
       "version": "5.0.4",
       "resolved": "https://registry.npmjs.org/@progress/kendo-angular-layout/-/kendo-angular-layout-5.0.4.tgz",

package.json

@@ -35,6 +35,7 @@
     "@progress/kendo-angular-inputs": "^6.0.0",
     "@progress/kendo-angular-intl": "^2.0.0",
     "@progress/kendo-angular-l10n": "^2.0.0",
+    "@progress/kendo-angular-label": "^2.3.3",
     "@progress/kendo-angular-layout": "^5.0.4",
     "@progress/kendo-angular-menu": "^2.0.4",
     "@progress/kendo-angular-navigation": "^0.2.0",

src/app/app.component.html

@@ -1,4 +1,4 @@
-<kendo-appbar [position]="'top'" [positionMode]="'sticky'">
+<kendo-appbar *ngIf='login' [position]="'top'" [positionMode]="'sticky'">
   <kendo-appbar-section>
     <kendo-menu [items]="items" (select)="onSelect($event)"> 
       <ng-template kendoMenuItemTemplate let-item="item">

src/app/app.component.ts

@@ -1,4 +1,5 @@
-import { Component, ElementRef, ViewChild } from '@angular/core';
+import { Component, OnDestroy, OnInit, ViewChild } from '@angular/core';
+import { Subscription } from 'rxjs';
 import { LoanEditComponent } from './loan-edit/loan-edit.component';
 
 import { mainMenuItems } from './main-menu-items';
@@ -9,13 +10,14 @@ import { MenuService } from './service/menu.service';
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.scss']
 })
-export class AppComponent {
-
-  title = 'broker';
+export class AppComponent implements OnInit , OnDestroy {
+  title = 'SFM broker';
+  public login :boolean  = false;
   public items: any[] = mainMenuItems;
   kendokaAvatar = "./assets/img/avatar.png"
   @ViewChild('loanEditComponent', {static: true}) loanEdit: LoanEditComponent;
 
+  private loginSub: Subscription;
   
   constructor(private menuService: MenuService){
   }
@@ -37,6 +39,20 @@ export class AppComponent {
     }
   }  
 
+  ngOnInit (){
+    this.loginSub =  this.menuService.loginSuccess.subscribe(
+      (item: any) => {
+        console.log(item);
+        if (item != null)
+          this.login = true;
+        else
+          this.login = false; 
+      }
+    )
+  }
 
+  ngOnDestroy (){
+    this.loginSub.unsubscribe();
+  }
 
 }

src/app/app.module.ts

@@ -1,7 +1,9 @@
 
 //Angular
 import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
 import { BrowserModule } from '@angular/platform-browser';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 //Kendo
 import { MenuModule, ContextMenuModule } from '@progress/kendo-angular-menu';
@@ -23,6 +25,8 @@ import { LoanEditComponent } from './loan-edit/loan-edit.component';
 import { NavigationModule } from '@progress/kendo-angular-navigation';
 import { LayoutModule } from '@progress/kendo-angular-layout';
 import { IndicatorsModule } from '@progress/kendo-angular-indicators';
+import { LabelModule } from '@progress/kendo-angular-label';
+
 
 
 
@@ -40,6 +44,9 @@ import { IndicatorsModule } from '@progress/kendo-angular-indicators';
   ],
   imports: [
     BrowserModule,
+    FormsModule,
+    CommonModule,
+    ReactiveFormsModule,    
     AppRoutingModule,
     MenuModule,
     ContextMenuModule,
@@ -52,7 +59,8 @@ import { IndicatorsModule } from '@progress/kendo-angular-indicators';
     FontAwesomeModule,
     NavigationModule,
     LayoutModule,
-    IndicatorsModule
+    IndicatorsModule,
+    LabelModule
   ],
   providers: [MenuService],
   bootstrap: [AppComponent]

src/app/auth/auth.component.html

@@ -1 +1,35 @@
-<p>auth works!</p>
+<div class='parent'>
+    <div class="form_login">
+
+        <form class="k-form " [formGroup]="userForm">
+            <fieldset class="k-form-fieldset">
+                <legend class="k-form-legend">Login to Supercredit</legend>
+                <kendo-formfield [showErrors]="'initial'">
+                    <kendo-label [for]="email" text="Email"></kendo-label>
+                    <input formControlName="email" kendoTextBox #email required />
+
+                    <kendo-formerror *ngIf="userForm.controls.email.errors?.required">Error: Email is required
+                    </kendo-formerror>
+                    <kendo-formerror *ngIf="userForm.controls.email.errors?.email">Error: Not valid email format
+                    </kendo-formerror>
+                </kendo-formfield>
+
+                <kendo-formfield [showErrors]="'initial'">
+                    <kendo-label [for]="password" text="Password"></kendo-label>
+                    <input formControlName="password" type="password"   kendoTextBox #password required />
+
+                    <kendo-formerror *ngIf="userForm.controls.password.errors?.required">Error: Password is required
+                    </kendo-formerror>
+                    <kendo-formerror *ngIf="userForm.controls.password.errors?.minlength">Hint: Password has to be at
+                        least 3 characters</kendo-formerror>
+                    <kendo-formerror *ngIf="userForm.controls.password.errors?.maxlength">Error: Password has to be less
+                        than 20 characters</kendo-formerror>
+                </kendo-formfield>
+
+                <div class="k-form-buttons k-buttons-end">
+                    <button class="k-button k-primary" (click)="submitForm()">Submit</button>
+                </div>                
+            </fieldset>
+        </form>
+    </div>
+</div>

src/app/auth/auth.component.scss

@@ -0,0 +1,24 @@
+.k-form.none { width: 400px; }
+
+div.parent {
+    display: table;
+    width: 100%;
+    height: 100vh;
+    background: url('../../assets/img/body_bg.jpg') no-repeat center center fixed; 
+ }
+
+ .form_login {
+    margin-left: auto;
+    margin-right: auto;
+    margin-top: 10%;
+    max-width: 400px;
+    padding-top: 20px;
+    text-align: center;
+    vertical-align: middle;
+    padding-left: 20px;
+    padding-right: 20px;
+    padding-bottom: 20px;
+    box-shadow: 0 0 6px black;
+    border-radius: 5px;
+    opacity: 0.8;
+ }

src/app/auth/auth.component.ts

@@ -1,4 +1,8 @@
 import { Component, OnInit } from '@angular/core';
+import { FormControl, FormGroup, Validators } from '@angular/forms';
+import { Router } from '@angular/router';
+import { MenuService } from '../service/menu.service';
+
 
 @Component({
   selector: 'app-auth',
@@ -7,9 +11,20 @@ import { Component, OnInit } from '@angular/core';
 })
 export class AuthComponent implements OnInit {
 
-  constructor() { }
+  public userForm: FormGroup = new FormGroup({
+    password: new FormControl('', [Validators.minLength(3), Validators.maxLength(20)]),
+    email: new FormControl('', Validators.email)
+  });
+
+  constructor(private menuService: MenuService, private rounter: Router) { }
 
   ngOnInit(): void {
+    this.menuService.loginSuccess.emit(null);
   }
 
+  submitForm() {
+    console.log(this.userForm);
+    this.menuService.loginSuccess.emit(this.userForm)
+    this.rounter.navigate(["/dashboard"]);
+  }
 }

src/app/auth/dist/auth.component.css

@@ -0,0 +1,26 @@
+.k-form.none {
+  width: 400px;
+}
+
+div.parent {
+  display: table;
+  width: 100%;
+  height: 100vh;
+  background: url("../../assets/img/body_bg.jpg") no-repeat center center fixed;
+}
+
+.form_login {
+  margin-left: auto;
+  margin-right: auto;
+  margin-top: 10%;
+  max-width: 400px;
+  padding-top: 20px;
+  text-align: center;
+  vertical-align: middle;
+  padding-left: 20px;
+  padding-right: 20px;
+  padding-bottom: 20px;
+  box-shadow: 0 0 6px black;
+  border-radius: 5px;
+  opacity: 0.8;
+}

src/app/auth/dist/auth.component.js

@@ -0,0 +1,38 @@
+"use strict";
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+exports.__esModule = true;
+exports.AuthComponent = void 0;
+var core_1 = require("@angular/core");
+var forms_1 = require("@angular/forms");
+var AuthComponent = /** @class */ (function () {
+    function AuthComponent(menuService, rounter) {
+        this.menuService = menuService;
+        this.rounter = rounter;
+        this.userForm = new forms_1.FormGroup({
+            password: new forms_1.FormControl('', [forms_1.Validators.minLength(3), forms_1.Validators.maxLength(20)]),
+            email: new forms_1.FormControl('', forms_1.Validators.email)
+        });
+    }
+    AuthComponent.prototype.ngOnInit = function () {
+        this.menuService.loginSuccess.emit(null);
+    };
+    AuthComponent.prototype.submitForm = function () {
+        console.log(this.userForm);
+        this.menuService.loginSuccess.emit(this.userForm);
+        this.rounter.navigate(["/dashboard"]);
+    };
+    AuthComponent = __decorate([
+        core_1.Component({
+            selector: 'app-auth',
+            templateUrl: './auth.component.html',
+            styleUrls: ['./auth.component.scss']
+        })
+    ], AuthComponent);
+    return AuthComponent;
+}());
+exports.AuthComponent = AuthComponent;

src/app/dashboard/dashboard.component.html

@@ -1,23 +1,10 @@
-<p>dashboard works!</p>
 
-
-
-
-<!-- <div #target class="target">
-    <p class="placeholder">Right-click to open Context menu</p>
-  </div>
-  <kendo-contextmenu [target]="target" [items]="items">  </kendo-contextmenu> -->
-
-  <!-- <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
-  <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
-  <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> -->
-  <!------ Include the above in your HEAD tag ---------->
-  
-  <div class="container">
+  <div class="container outer">
+    <div class="container inner">
           <div class="row">
           <div class="col-md-12">
             <div class="page-header">
-              <h1>Horizontal timeline</h1>
+              <h3>Summary</h3>
             </div>
             <div style="display:inline-block;width:100%;overflow-y:auto;">
             <ul class="timeline timeline-horizontal">
@@ -156,4 +143,5 @@
             </ul>
           </div>
         </div>
-      </div>
+    </div>
+  </div>

src/app/dashboard/dashboard.component.scss

@@ -1,10 +1,22 @@
 /* Timeline */
+.container.outer{
+    width:100%;
+    background: url('../../assets/img/body_bg.jpg') no-repeat center center fixed; 
+    -webkit-background-size: cover;
+    -moz-background-size: cover;
+    -o-background-size: cover;
+    background-size: cover;          
+}
+.container.inner {
+    width: 99%;
+}
 .timeline,
 .timeline-horizontal {
   list-style: none;
   padding: 20px;
   position: relative;
 }
+
 .timeline:before {
   top: 40px;
   bottom: 0;
@@ -15,18 +27,22 @@
   left: 50%;
   margin-left: -1.5px;
 }
+
 .timeline .timeline-item {
   margin-bottom: 20px;
   position: relative;
 }
+
 .timeline .timeline-item:before,
 .timeline .timeline-item:after {
   content: "";
   display: table;
 }
+
 .timeline .timeline-item:after {
   clear: both;
 }
+
 .timeline .timeline-item .timeline-badge {
   color: #fff;
   width: 54px;
@@ -46,27 +62,34 @@
   border-bottom-right-radius: 50%;
   border-bottom-left-radius: 50%;
 }
+
 .timeline .timeline-item .timeline-badge i,
 .timeline .timeline-item .timeline-badge .fa,
 .timeline .timeline-item .timeline-badge .glyphicon {
   top: 2px;
   left: 0px;
 }
+
 .timeline .timeline-item .timeline-badge.primary {
   background-color: #1f9eba;
 }
+
 .timeline .timeline-item .timeline-badge.info {
   background-color: #5bc0de;
 }
+
 .timeline .timeline-item .timeline-badge.success {
   background-color: #59ba1f;
 }
+
 .timeline .timeline-item .timeline-badge.warning {
   background-color: #d1bd10;
 }
+
 .timeline .timeline-item .timeline-badge.danger {
   background-color: #ba1f1f;
 }
+
 .timeline .timeline-item .timeline-panel {
   position: relative;
   width: 46%;
@@ -79,6 +102,7 @@
   -webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175);
   box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175);
 }
+
 .timeline .timeline-item .timeline-panel:before {
   position: absolute;
   top: 26px;
@@ -90,36 +114,44 @@
   border-bottom: 16px solid transparent;
   content: " ";
 }
+
 .timeline .timeline-item .timeline-panel .timeline-title {
   margin-top: 0;
   color: inherit;
 }
-.timeline .timeline-item .timeline-panel .timeline-body > p,
-.timeline .timeline-item .timeline-panel .timeline-body > ul {
+
+.timeline .timeline-item .timeline-panel .timeline-body>p,
+.timeline .timeline-item .timeline-panel .timeline-body>ul {
   margin-bottom: 0;
 }
-.timeline .timeline-item .timeline-panel .timeline-body > p + p {
+
+.timeline .timeline-item .timeline-panel .timeline-body>p+p {
   margin-top: 5px;
 }
+
 .timeline .timeline-item:last-child:nth-child(even) {
   float: right;
 }
+
 .timeline .timeline-item:nth-child(even) .timeline-panel {
   float: right;
   left: 16px;
 }
+
 .timeline .timeline-item:nth-child(even) .timeline-panel:before {
   border-left-width: 0;
   border-right-width: 14px;
   left: -14px;
   right: auto;
 }
+
 .timeline-horizontal {
   list-style: none;
   position: relative;
   padding: 20px 0px 20px 0px;
   display: inline-block;
 }
+
 .timeline-horizontal:before {
   height: 3px;
   top: auto;
@@ -129,6 +161,7 @@
   width: 100%;
   margin-bottom: 20px;
 }
+
 .timeline-horizontal .timeline-item {
   display: table-cell;
   height: 280px;
@@ -140,6 +173,7 @@
   margin: 0 auto;
   vertical-align: bottom;
 }
+
 .timeline-horizontal .timeline-item .timeline-panel {
   top: auto;
   bottom: 64px;
@@ -150,6 +184,7 @@
   width: 100%;
   margin-bottom: 20px;
 }
+
 .timeline-horizontal .timeline-item .timeline-panel:before {
   top: auto;
   bottom: -16px;
@@ -160,12 +195,14 @@
   border-bottom: 0 solid #c0c0c0 !important;
   border-left: 16px solid transparent !important;
 }
+
 .timeline-horizontal .timeline-item:before,
 .timeline-horizontal .timeline-item:after {
   display: none;
 }
+
 .timeline-horizontal .timeline-item .timeline-badge {
   top: auto;
   bottom: 0px;
   left: 43px;
-}
+}

src/app/dashboard/dist/dashboard.component.css

@@ -1,4 +1,17 @@
 /* Timeline */
+.container.outer {
+  width: 100%;
+  background: url("../../assets/img/body_bg.jpg") no-repeat center center fixed;
+  -webkit-background-size: cover;
+  -moz-background-size: cover;
+  -o-background-size: cover;
+  background-size: cover;
+}
+
+.container.inner {
+  width: 99%;
+}
+
 .timeline,
 .timeline-horizontal {
   list-style: none;

src/app/service/dist/menu.service.js

@@ -11,6 +11,7 @@ var core_1 = require("@angular/core");
 var MenuService = /** @class */ (function () {
     function MenuService() {
         this.itemClicked = new core_1.EventEmitter();
+        this.loginSuccess = new core_1.EventEmitter();
     }
     MenuService = __decorate([
         core_1.Injectable()

src/app/service/menu.service.ts

@@ -3,5 +3,8 @@ import { EventEmitter, Injectable } from '@angular/core';
 
 @Injectable()
 export class MenuService {
+
     itemClicked = new EventEmitter <any>();
+    
+    loginSuccess = new EventEmitter <any>();
 }