From e18b3099d475d446965d5c9d76b6902b85e63fc9 Mon Sep 17 00:00:00 2001 From: Patrick Sun Date: Sun, 22 Nov 2020 17:53:14 +1100 Subject: [PATCH] login has proper indicators --- package-lock.json | 16 ++++++++++++++++ package.json | 1 + src/app/app.module.ts | 5 ++++- src/app/auth/auth.component.html | 8 ++++++-- src/app/auth/auth.component.ts | 17 +++++++++++++++-- src/app/auth/dist/auth.component.js | 15 +++++++++++++-- src/app/service/auth.service.ts | 7 ++++++- 7 files changed, 61 insertions(+), 8 deletions(-) diff --git a/package-lock.json b/package-lock.json index 118f66b..0b5e44e 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index b5652b7..a253bb7 100644 --- a/package.json +++ b/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", diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 74b99ae..0a722a9 100644 --- a/src/app/app.module.ts +++ b/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] diff --git a/src/app/auth/auth.component.html b/src/app/auth/auth.component.html index 334f72f..edb6bf8 100644 --- a/src/app/auth/auth.component.html +++ b/src/app/auth/auth.component.html @@ -1,6 +1,5 @@
\ No newline at end of file diff --git a/src/app/auth/auth.component.ts b/src/app/auth/auth.component.ts index 31083ba..8e9a548 100644 --- a/src/app/auth/auth.component.ts +++ b/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 + }); +} } diff --git a/src/app/auth/dist/auth.component.js b/src/app/auth/dist/auth.component.js index 06f7c70..46abeed 100644 --- a/src/app/auth/dist/auth.component.js +++ b/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', diff --git a/src/app/service/auth.service.ts b/src/app/service/auth.service.ts index b8b517c..24430a4 100644 --- a/src/app/service/auth.service.ts +++ b/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 (); + + isAuthenticated() { return this.loggedIn; } @@ -30,4 +32,7 @@ export class AuthService { logout() { this.loggedIn = false; } + + + } \ No newline at end of file