From dccca9915e2ada56b9986b85d191f5896f72c859 Mon Sep 17 00:00:00 2001 From: Probst Date: Sun, 29 Oct 2023 11:17:42 +0100 Subject: [PATCH] add design --- bank/frontend/src/app/app.component.html | 1 + bank/frontend/src/app/app.component.ts | 45 ++++++++++--------- bank/frontend/src/app/app.module.ts | 4 +- .../apps-list/apps-list.component.css | 25 +++++------ .../apps-list/apps-list.component.html | 4 +- .../components/footer/footer.component.css | 27 +++++++++++ .../components/footer/footer.component.html | 6 +++ .../footer/footer.component.spec.ts | 21 +++++++++ .../app/components/footer/footer.component.ts | 10 +++++ .../components/header/header.component.css | 10 ++++- .../app/components/header/header.component.ts | 22 +++++++-- 11 files changed, 129 insertions(+), 46 deletions(-) create mode 100644 bank/frontend/src/app/components/footer/footer.component.css create mode 100644 bank/frontend/src/app/components/footer/footer.component.html create mode 100644 bank/frontend/src/app/components/footer/footer.component.spec.ts create mode 100644 bank/frontend/src/app/components/footer/footer.component.ts diff --git a/bank/frontend/src/app/app.component.html b/bank/frontend/src/app/app.component.html index 0e15bc3..724f3ef 100644 --- a/bank/frontend/src/app/app.component.html +++ b/bank/frontend/src/app/app.component.html @@ -2,3 +2,4 @@
+ diff --git a/bank/frontend/src/app/app.component.ts b/bank/frontend/src/app/app.component.ts index 5abad6f..64a9098 100644 --- a/bank/frontend/src/app/app.component.ts +++ b/bank/frontend/src/app/app.component.ts @@ -1,11 +1,13 @@ import {Component, OnInit} from '@angular/core'; -import { Store } from '@ngrx/store'; +import {Store} from '@ngrx/store'; import * as AppActions from './store/actions/app.actions'; -import { State } from './store/state/app.state' -import {selectCount} from "./store/selectors/app.selectors"; +import {State} from './store/state/app.state' +import {isUserLoggedIn, selectCount} from "./store/selectors/app.selectors"; import * as AuthActions from './auth/store/auth.actions'; import {checkAuth} from "./auth/store/auth.actions"; import {LoginResponse, OidcSecurityService} from "angular-auth-oidc-client"; +import {Router} from "@angular/router"; +import {Observable} from "rxjs"; @Component({ selector: 'app-root', @@ -16,32 +18,33 @@ export class AppComponent implements OnInit { count$ = this.store.select(selectCount); constructor(private store: Store, - public oidcSecurityService: OidcSecurityService) { - } + private router: Router, + public oidcSecurityService: OidcSecurityService) {} ngOnInit() { - //this.store.dispatch(AuthActions.checkAuth()); - console.log("checkauth"); - this.oidcSecurityService - .checkAuth() - .subscribe((loginResponse: LoginResponse) => { - const { isAuthenticated, userData, accessToken, idToken, configId } = - loginResponse; - if (!isAuthenticated) { - console.log("is not isAuthenticated"); - this.login(); - console.log(accessToken) - } else { - console.log("isAuthenticated"); - } - }); + this.oidcSecurityService + .checkAuth() + .subscribe((loginResponse: LoginResponse) => { + const {isAuthenticated, userData, accessToken, idToken, configId} = + loginResponse; + if (!isAuthenticated) { + console.log("is not isAuthenticated"); + this.login(); + console.log("is not Authenticated") + console.log("accessToken: ", accessToken) + } else { + console.log("isAuthenticated"); + this.store.dispatch(AppActions.login()); + console.log("accessToken: ", accessToken) + this.router.navigate(['/']); + } + }); } login() { this.oidcSecurityService.authorize(); } - increment() { this.store.dispatch(AppActions.increment()); } diff --git a/bank/frontend/src/app/app.module.ts b/bank/frontend/src/app/app.module.ts index 2adcfab..3c7d4aa 100644 --- a/bank/frontend/src/app/app.module.ts +++ b/bank/frontend/src/app/app.module.ts @@ -22,6 +22,7 @@ import { LoginPageComponent } from './components/login-page/login-page.component import { RouterModule } from '@angular/router'; import {AuthModule, LogLevel} from "angular-auth-oidc-client"; import {AuthEffects} from "./auth/store/auth.effects"; +import { FooterComponent } from './components/footer/footer.component'; @NgModule({ declarations: [ @@ -29,7 +30,8 @@ import {AuthEffects} from "./auth/store/auth.effects"; HeaderComponent, AppsListComponent, HomepageComponent, - LoginPageComponent + LoginPageComponent, + FooterComponent ], imports: [ RouterModule, diff --git a/bank/frontend/src/app/components/apps-list/apps-list.component.css b/bank/frontend/src/app/components/apps-list/apps-list.component.css index a0b0aab..3f7d80a 100644 --- a/bank/frontend/src/app/components/apps-list/apps-list.component.css +++ b/bank/frontend/src/app/components/apps-list/apps-list.component.css @@ -23,16 +23,24 @@ mat-card { mat-card h2 { font-size: 24px; margin-bottom: 12px; + color: #333; /* Dark color for headline for better readability */ } mat-card p { font-size: 18px; margin-bottom: 16px; + color: #555; /* Subtle gray for general text */ } .card-background { background-size: cover; - background: linear-gradient(#f5f5f5, #f6f6f6); + background: linear-gradient(#FAFAFA, #EDEDED); /* Soft gradient from light gray to gray */ + width: 90%; + height: 100%; + display: flex; + flex-direction: column; + justify-content: space-between; + margin-bottom: 10px; } .centered-title { @@ -44,21 +52,8 @@ mat-card p { margin: 48px 0; font-size: 18px; padding: 20px; - background-color: rgba(255, 255, 255, 0.1); + background-color: rgba(245, 245, 245, 0.9); /* Light gray background */ border-radius: 8px; text-align: center; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); } - -.card-background { - width: 90%; - height: 100%; - display: flex; - flex-direction: column; - justify-content: space-between; - margin-bottom: 10px; -} - -.centered-title { - text-align: center; -} diff --git a/bank/frontend/src/app/components/apps-list/apps-list.component.html b/bank/frontend/src/app/components/apps-list/apps-list.component.html index 04f2db5..86dd545 100644 --- a/bank/frontend/src/app/components/apps-list/apps-list.component.html +++ b/bank/frontend/src/app/components/apps-list/apps-list.component.html @@ -1,5 +1,4 @@ -
-
+

We're delighted to have you here. Feel free to open any app of your choice. Please note, third-party applications are prohibited from accessing your data, as it's securely managed internally by us.

@@ -19,4 +18,3 @@

{{ item.name }}

- diff --git a/bank/frontend/src/app/components/footer/footer.component.css b/bank/frontend/src/app/components/footer/footer.component.css new file mode 100644 index 0000000..6c5af47 --- /dev/null +++ b/bank/frontend/src/app/components/footer/footer.component.css @@ -0,0 +1,27 @@ +.footer-container { + width: 100%; + background-color: #2C3E50; /* Deep blue-gray background for the footer */ + padding: 10px 0; + position: fixed; + bottom: 0; + z-index: 1000; +} + +.footer-content { + width: 80%; + margin: 0 auto; + text-align: center; + color: #EAEDED; /* Light gray for readability against the footer background */ + font-size: 14px; +} + +.footer-content a { + color: #EAEDED; /* Matches the text color */ + text-decoration: none; + margin: 0 10px; + transition: color 0.3s; +} + +.footer-content a:hover { + color: #BDC3C7; /* Slightly darker gray for hover state */ +} diff --git a/bank/frontend/src/app/components/footer/footer.component.html b/bank/frontend/src/app/components/footer/footer.component.html new file mode 100644 index 0000000..3e28c35 --- /dev/null +++ b/bank/frontend/src/app/components/footer/footer.component.html @@ -0,0 +1,6 @@ +
+
+ +

© 2023 Your Company Name. All rights reserved.

+
+
diff --git a/bank/frontend/src/app/components/footer/footer.component.spec.ts b/bank/frontend/src/app/components/footer/footer.component.spec.ts new file mode 100644 index 0000000..832b03a --- /dev/null +++ b/bank/frontend/src/app/components/footer/footer.component.spec.ts @@ -0,0 +1,21 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { FooterComponent } from './footer.component'; + +describe('FooterComponent', () => { + let component: FooterComponent; + let fixture: ComponentFixture; + + beforeEach(() => { + TestBed.configureTestingModule({ + declarations: [FooterComponent] + }); + fixture = TestBed.createComponent(FooterComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/bank/frontend/src/app/components/footer/footer.component.ts b/bank/frontend/src/app/components/footer/footer.component.ts new file mode 100644 index 0000000..98c515e --- /dev/null +++ b/bank/frontend/src/app/components/footer/footer.component.ts @@ -0,0 +1,10 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-footer', + templateUrl: './footer.component.html', + styleUrls: ['./footer.component.css'] +}) +export class FooterComponent { + +} diff --git a/bank/frontend/src/app/components/header/header.component.css b/bank/frontend/src/app/components/header/header.component.css index 517ba5b..b0f71b7 100644 --- a/bank/frontend/src/app/components/header/header.component.css +++ b/bank/frontend/src/app/components/header/header.component.css @@ -1,6 +1,7 @@ .example-spacer { flex: 1 1 auto; } + .example-button-row button, .example-button-row a { margin-right: 8px; @@ -11,10 +12,15 @@ } mat-grid-tile { - background: lightblue; + background: #F1F5F8; /* Subtle blue-gray for a calm, professional feel */ } .mat-toolbar { - background-color: #3b5998 !important; + background-color: #1E3A5A !important; /* Dark blue */ } +/* This ensures that text in your toolbar is of color whitesmoke */ +.mat-toolbar, +.mat-toolbar * { + color: whitesmoke; +} diff --git a/bank/frontend/src/app/components/header/header.component.ts b/bank/frontend/src/app/components/header/header.component.ts index 10321c4..28859a7 100644 --- a/bank/frontend/src/app/components/header/header.component.ts +++ b/bank/frontend/src/app/components/header/header.component.ts @@ -5,6 +5,7 @@ import * as AppActions from "../../store/actions/app.actions"; import {Observable} from "rxjs"; import { isUserLoggedIn } from "../../store/selectors/app.selectors"; import {Router} from "@angular/router"; +import {OidcSecurityService} from "angular-auth-oidc-client"; @Component({ selector: 'app-header', @@ -15,15 +16,28 @@ export class HeaderComponent { isUserLoggedIn$: Observable; constructor(private store: Store, - private router: Router + private router: Router, + public oidcSecurityService: OidcSecurityService ) { this.isUserLoggedIn$ = this.store.select(isUserLoggedIn); } login() { - this.store.dispatch(AppActions.login()); - localStorage.setItem('authToken', 'your_token_here'); - this.router.navigate(['/']); + let token: string; + + this.oidcSecurityService.getAccessToken().subscribe( + accessToken => { + token = accessToken; + console.log("accessToken: " + accessToken) + this.store.dispatch(AppActions.login()); + this.router.navigate(['/']); + }, + error => { + console.error('Error getting access token:', error); + this.store.dispatch(AppActions.logout()); + this.router.navigate(['/login']); + } + ); } logout() {