From d46f5f0f6de611e898edfd049faae137c1872cb5 Mon Sep 17 00:00:00 2001 From: Patrick Sun Date: Sun, 8 Nov 2020 03:32:04 +1100 Subject: [PATCH] auth login box worked, but logout not working --- package-lock.json | 16 +++++++ package.json | 1 + src/app/app.component.html | 2 +- src/app/app.component.ts | 24 ++++++++-- src/app/app.module.ts | 10 ++++- src/app/auth/auth.component.html | 36 ++++++++++++++- src/app/auth/auth.component.scss | 24 ++++++++++ src/app/auth/auth.component.ts | 17 ++++++- src/app/auth/dist/auth.component.css | 26 +++++++++++ src/app/auth/dist/auth.component.js | 38 ++++++++++++++++ src/app/dashboard/dashboard.component.html | 22 +++------ src/app/dashboard/dashboard.component.scss | 45 +++++++++++++++++-- .../dashboard/dist/dashboard.component.css | 13 ++++++ src/app/service/dist/menu.service.js | 1 + src/app/service/menu.service.ts | 3 ++ 15 files changed, 249 insertions(+), 29 deletions(-) create mode 100644 src/app/auth/dist/auth.component.css create mode 100644 src/app/auth/dist/auth.component.js diff --git a/package-lock.json b/package-lock.json index 3ed7f8b..118f66b 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index 07459ba..b5652b7 100644 --- a/package.json +++ b/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", diff --git a/src/app/app.component.html b/src/app/app.component.html index 7b5cd31..5b31cb9 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -1,4 +1,4 @@ - + diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 0117b57..607d8e8 100644 --- a/src/app/app.component.ts +++ b/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(); + } } diff --git a/src/app/app.module.ts b/src/app/app.module.ts index b229f2e..227ab70 100644 --- a/src/app/app.module.ts +++ b/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] diff --git a/src/app/auth/auth.component.html b/src/app/auth/auth.component.html index f66eb69..8295fec 100644 --- a/src/app/auth/auth.component.html +++ b/src/app/auth/auth.component.html @@ -1 +1,35 @@ -

auth works!

+
+ +
\ No newline at end of file diff --git a/src/app/auth/auth.component.scss b/src/app/auth/auth.component.scss index e69de29..c7b3106 100644 --- a/src/app/auth/auth.component.scss +++ b/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; + } \ No newline at end of file diff --git a/src/app/auth/auth.component.ts b/src/app/auth/auth.component.ts index e586c96..412cd22 100644 --- a/src/app/auth/auth.component.ts +++ b/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"]); + } } diff --git a/src/app/auth/dist/auth.component.css b/src/app/auth/dist/auth.component.css new file mode 100644 index 0000000..ec16487 --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/src/app/auth/dist/auth.component.js b/src/app/auth/dist/auth.component.js new file mode 100644 index 0000000..ea94eb7 --- /dev/null +++ b/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; diff --git a/src/app/dashboard/dashboard.component.html b/src/app/dashboard/dashboard.component.html index 4c5bc2b..b7d4d68 100644 --- a/src/app/dashboard/dashboard.component.html +++ b/src/app/dashboard/dashboard.component.html @@ -1,23 +1,10 @@ -

dashboard works!

- - - - - - - - -
+
+
-

Horizontal timeline

+

Summary

    @@ -156,4 +143,5 @@
-
\ No newline at end of file +
+
\ No newline at end of file diff --git a/src/app/dashboard/dashboard.component.scss b/src/app/dashboard/dashboard.component.scss index f78cc75..415e419 100644 --- a/src/app/dashboard/dashboard.component.scss +++ b/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; -} \ No newline at end of file +} diff --git a/src/app/dashboard/dist/dashboard.component.css b/src/app/dashboard/dist/dashboard.component.css index 4a4d892..3874bf4 100644 --- a/src/app/dashboard/dist/dashboard.component.css +++ b/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; diff --git a/src/app/service/dist/menu.service.js b/src/app/service/dist/menu.service.js index 00b4211..eb27e31 100644 --- a/src/app/service/dist/menu.service.js +++ b/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() diff --git a/src/app/service/menu.service.ts b/src/app/service/menu.service.ts index fa102e8..6d91def 100644 --- a/src/app/service/menu.service.ts +++ b/src/app/service/menu.service.ts @@ -3,5 +3,8 @@ import { EventEmitter, Injectable } from '@angular/core'; @Injectable() export class MenuService { + itemClicked = new EventEmitter (); + + loginSuccess = new EventEmitter (); } \ No newline at end of file