Merge branch 'main' of https://github.com/EsraDoerksen/All-In-Banking

EsraDoerksen · Oct 29, 2023 · 5cc83f0 · 5cc83f0
2 parents aa97499 + c3eff88
commit 5cc83f0
Show file tree

Hide file tree

Showing 11 changed files with 129 additions and 46 deletions.
diff --git a/bank/frontend/src/app/app.component.html b/bank/frontend/src/app/app.component.html
@@ -2,3 +2,4 @@
 <div>
   <router-outlet></router-outlet>
 </div>
+<app-footer></app-footer>
diff --git 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<State>,
-              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
@@ -22,14 +22,16 @@ 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: [
     AppComponent,
     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
@@ -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
@@ -1,5 +1,4 @@
-<div class="red">
-  <div class="app-general-text">
+ <div class="app-general-text">
     <p>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.</p>
   </div>
@@ -19,4 +18,3 @@ <h2 class="centered-title">{{ item.name }}</h2>
       </mat-grid-list>
     </div>
   </div>
-</div>
diff --git a/bank/frontend/src/app/components/footer/footer.component.css 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
@@ -0,0 +1,6 @@
+<div class="footer-container">
+  <div class="footer-content">
+    <!-- Place footer content here, for example: -->
+    <p>© 2023 Your Company Name. All rights reserved.</p>
+  </div>
+</div>
diff --git a/bank/frontend/src/app/components/footer/footer.component.spec.ts 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<FooterComponent>;
+
+  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
@@ -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
@@ -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
@@ -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<boolean>;
 
   constructor(private store: Store<State>,
-              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() {