login has proper indicators

package-lock.json

@@ -2182,6 +2182,22 @@
         }
       }
     },
+    "@progress/kendo-angular-notification": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/@progress/kendo-angular-notification/-/kendo-angular-notification-2.1.3.tgz",
+      "integrity": "sha512-/xr8UCGKFN7Ha0JzMLCBRIj9AyOEyf6WWZrUJJQMEL/3aAnIXkpL90PEQ0vg9bTQvOPVTXk7q1TUBHIsfCjxDg==",
+      "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-pdf-export": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/@progress/kendo-angular-pdf-export/-/kendo-angular-pdf-export-2.0.4.tgz",

package.json

@@ -39,6 +39,7 @@
     "@progress/kendo-angular-layout": "^5.0.4",
     "@progress/kendo-angular-menu": "^2.0.4",
     "@progress/kendo-angular-navigation": "^0.2.0",
+    "@progress/kendo-angular-notification": "^2.1.3",
     "@progress/kendo-angular-pdf-export": "^2.0.0",
     "@progress/kendo-angular-popup": "^3.0.0",
     "@progress/kendo-angular-progressbar": "^0.2.3",

src/app/app.module.ts

@@ -28,6 +28,8 @@ import { IndicatorsModule } from '@progress/kendo-angular-indicators';
 import { LabelModule } from '@progress/kendo-angular-label';
 import { AuthService } from './service/auth.service';
 import { AuthGuard } from './service/auth-guard.service';
+import { NotificationModule } from '@progress/kendo-angular-notification';
+
 
 
 
@@ -58,7 +60,8 @@ import { AuthGuard } from './service/auth-guard.service';
     NavigationModule,
     LayoutModule,
     IndicatorsModule,
-    LabelModule
+    LabelModule,
+    NotificationModule
   ],
   providers: [MenuService, AuthGuard, AuthService],
   bootstrap: [AppComponent]

src/app/auth/auth.component.html

@@ -1,6 +1,5 @@
 <div class='parent'>
     <div class="form_login">
-
         <form *ngIf='!loading' class="k-form " [formGroup]="userForm">
             <fieldset class="k-form-fieldset">
                 <legend class="k-form-legend">Login to Supercredit</legend>
@@ -33,6 +32,11 @@
             </fieldset>
         </form>
 
-        <div *ngIf='loading' style="min-height: 200px;">  auth loading...</div>
+        <kendo-loader *ngIf='loading'
+            type="converging-spinner"
+            themeColor="info"
+            size="large"
+        >
+        </kendo-loader>
     </div>
 </div>

src/app/auth/auth.component.ts

@@ -1,6 +1,7 @@
 import { Component, OnDestroy, OnInit } from '@angular/core';
 import { FormControl, FormGroup, Validators } from '@angular/forms';
 import { Router } from '@angular/router';
+import { NotificationService } from '@progress/kendo-angular-notification';
 import { Subscription } from 'rxjs';
 import { AuthService } from '../service/auth.service';
 
@@ -19,7 +20,7 @@ export class AuthComponent implements OnInit, OnDestroy{
     email: new FormControl('email@email.com', Validators.email)
   });
 
-  constructor(private authService: AuthService, private rounter: Router) { }
+  constructor(private authService: AuthService, private rounter: Router, private notificationService: NotificationService) { }
 
   ngOnInit(): void {
     this.loginSub = this.authService.loginSuccess.subscribe(
@@ -29,7 +30,7 @@ export class AuthComponent implements OnInit, OnDestroy{
        if (ok)
            this.rounter.navigate(["/dashboard"]);
         else
-          alert('fuck this is wrong');
+          this.show();
      }
     );
   }
@@ -44,4 +45,16 @@ export class AuthComponent implements OnInit, OnDestroy{
     this.authService.login(this.userForm.value.email, this.userForm.value.password);
 
   }
+
+
+  public show(): void {
+    this.notificationService.show({
+        content: 'Your loggin is failed, please try again.',
+        cssClass: 'button-notification',
+        animation: { type: 'slide', duration: 400 },
+        position: { horizontal: 'center', vertical: 'bottom' },
+        type: { style: 'error', icon: true },
+        closable: true
+    });
+}
 }

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

@@ -10,9 +10,10 @@ exports.AuthComponent = void 0;
 var core_1 = require("@angular/core");
 var forms_1 = require("@angular/forms");
 var AuthComponent = /** @class */ (function () {
-    function AuthComponent(authService, rounter) {
+    function AuthComponent(authService, rounter, notificationService) {
         this.authService = authService;
         this.rounter = rounter;
+        this.notificationService = notificationService;
         this.userForm = new forms_1.FormGroup({
             password: new forms_1.FormControl('abcdefg', [forms_1.Validators.minLength(3), forms_1.Validators.maxLength(20)]),
             email: new forms_1.FormControl('email@email.com', forms_1.Validators.email)
@@ -26,7 +27,7 @@ var AuthComponent = /** @class */ (function () {
             if (ok)
                 _this.rounter.navigate(["/dashboard"]);
             else
-                alert('fuck this is wrong');
+                _this.show();
         });
     };
     AuthComponent.prototype.ngOnDestroy = function () {
@@ -37,6 +38,16 @@ var AuthComponent = /** @class */ (function () {
         this.loading = true;
         this.authService.login(this.userForm.value.email, this.userForm.value.password);
     };
+    AuthComponent.prototype.show = function () {
+        this.notificationService.show({
+            content: 'Your loggin is failed, please try again.',
+            cssClass: 'button-notification',
+            animation: { type: 'slide', duration: 400 },
+            position: { horizontal: 'center', vertical: 'bottom' },
+            type: { style: 'error', icon: true },
+            closable: true
+        });
+    };
     AuthComponent = __decorate([
         core_1.Component({
             selector: 'app-auth',

src/app/service/auth.service.ts

@@ -1,11 +1,13 @@
 import { EventEmitter, Injectable } from '@angular/core';
-import { BooleanFilterComponent } from '@progress/kendo-angular-grid';
+import { NotificationService } from '@progress/kendo-angular-notification';
 
 @Injectable()
 export class AuthService {
     private loggedIn: boolean  = false; 
     loginSuccess = new EventEmitter <any>();
     
+
+
     isAuthenticated()  {
       return this.loggedIn;
     }
@@ -30,4 +32,7 @@ export class AuthService {
     logout() {
         this.loggedIn = false;
     }
+
+
+
 }