Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
11 changed files
with
233 additions
and
23 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
4 changes: 0 additions & 4 deletions
4
bank/frontend/src/app/components/apps-list/apps-list.component.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
4 changes: 2 additions & 2 deletions
4
bank/frontend/src/app/components/footer/footer.component.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,6 +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> | ||
| <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> | ||
| </div> |
1 change: 1 addition & 0 deletions
1
bank/frontend/src/app/components/homepage/homepage.component.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,2 +1,3 @@ | ||
| <app-user-info></app-user-info> | ||
| <app-apps-list></app-apps-list> | ||
|
|
95 changes: 95 additions & 0 deletions
95
bank/frontend/src/app/components/user-info/user-info.component.css
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,95 @@ | ||
| .app-general-text { | ||
| background: linear-gradient(135deg, #6c5ce7, #a29bfe); | ||
| padding: 30px 40px; | ||
| margin-bottom: 40px; | ||
| box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); | ||
| text-align: center; | ||
| } | ||
|
|
||
| .app-general-text p { | ||
| font-family: 'Helvetica Neue', Arial, sans-serif; | ||
| font-size: 24px; | ||
| font-weight: 500; | ||
| color: #ffffff; | ||
| margin: 0; | ||
| } | ||
|
|
||
| .user-info-container { | ||
| display: flex; | ||
| flex-direction: column; | ||
| max-width: 800px; | ||
| margin: 0 auto; | ||
| } | ||
|
|
||
| .user-details { | ||
| text-align: center; | ||
| margin-bottom: 40px; | ||
| } | ||
|
|
||
| h2 { | ||
| margin-top: 0; | ||
| color: #333; | ||
| font-size: 24px; | ||
| } | ||
|
|
||
| .balance-amount { | ||
| font-size: 48px; | ||
| font-weight: bold; | ||
| color: #6c5ce7; | ||
| margin: 20px 0; | ||
| } | ||
|
|
||
| .transaction-container { | ||
| background: #f5f5f5; | ||
| padding: 20px; | ||
| border-radius: 10px; | ||
| } | ||
|
|
||
| .transaction-card { | ||
| background: #ffffff; | ||
| padding: 15px; | ||
| border-radius: 10px; | ||
| box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); | ||
| margin-bottom: 15px; | ||
| } | ||
|
|
||
| .transaction-description { | ||
| font-size: 18px; | ||
| font-weight: bold; | ||
| color: #333; | ||
| } | ||
|
|
||
| .transaction-amount { | ||
| font-size: 20px; | ||
| color: #6c5ce7; | ||
| } | ||
|
|
||
| .transaction-location, .transaction-date { | ||
| font-size: 16px; | ||
| color: #777; | ||
| margin: 5px 0; | ||
| } | ||
|
|
||
| .profile-container { | ||
| background: #f5f5f5; | ||
| padding: 30px; | ||
| margin-bottom: 40px; | ||
| border-radius: 10px; | ||
| text-align: center; | ||
| } | ||
|
|
||
| .profile-details { | ||
| max-width: 500px; | ||
| margin: 0 auto; | ||
| } | ||
|
|
||
| .profile-label { | ||
| font-weight: bold; | ||
| color: #6c5ce7; | ||
| margin-right: 10px; | ||
| } | ||
|
|
||
| h2 { | ||
| /* ... existing styles ... */ | ||
| margin-bottom: 20px; | ||
| } |
30 changes: 30 additions & 0 deletions
30
bank/frontend/src/app/components/user-info/user-info.component.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,30 @@ | ||
| <div class="app-general-text"> | ||
| <p>Welcome to your secure apps, {{ profile.firstname }}.</p> | ||
| </div> | ||
|
|
||
| <div class="user-info-container"> | ||
| <div class="profile-container"> | ||
| <h2>My profile</h2> | ||
| <div class="profile-details"> | ||
| <p><span class="profile-label">Name:</span> {{ profile.firstname }} {{ profile.lastname }}</p> | ||
| <p><span class="profile-label">Birthdate:</span> {{ profile.birthdate | date:'longDate' }}</p> | ||
| <p><span class="profile-label">Sex:</span> {{ profile.sex }}</p> | ||
| <p><span class="profile-label">City:</span> {{ profile.city }}</p> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div class="transaction-container"> | ||
| <h2>Transactions (Balance: 5000)</h2> | ||
| <ng-container *ngFor="let transaction of transactions"> | ||
| <div class="transaction-card"> | ||
| <p class="transaction-description">{{ transaction.description }}</p> | ||
| <p class="transaction-amount">${{ transaction.amount.toFixed(2) }}</p> | ||
| <p class="transaction-location">{{ transaction.location }}</p> | ||
| <p class="transaction-date">{{ transaction.timestamp }}</p> | ||
| </div> | ||
| </ng-container> | ||
| <ng-template #noTransactions> | ||
| <p>No transactions available.</p> | ||
| </ng-template> | ||
| </div> | ||
| </div> |
21 changes: 21 additions & 0 deletions
21
bank/frontend/src/app/components/user-info/user-info.component.spec.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,21 @@ | ||
| import { ComponentFixture, TestBed } from '@angular/core/testing'; | ||
|
|
||
| import { UserInfoComponent } from './user-info.component'; | ||
|
|
||
| describe('UserInfoComponent', () => { | ||
| let component: UserInfoComponent; | ||
| let fixture: ComponentFixture<UserInfoComponent>; | ||
|
|
||
| beforeEach(() => { | ||
| TestBed.configureTestingModule({ | ||
| declarations: [UserInfoComponent] | ||
| }); | ||
| fixture = TestBed.createComponent(UserInfoComponent); | ||
| component = fixture.componentInstance; | ||
| fixture.detectChanges(); | ||
| }); | ||
|
|
||
| it('should create', () => { | ||
| expect(component).toBeTruthy(); | ||
| }); | ||
| }); |
59 changes: 59 additions & 0 deletions
59
bank/frontend/src/app/components/user-info/user-info.component.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,59 @@ | ||
| import { Component } from '@angular/core'; | ||
| import {Store} from "@ngrx/store"; | ||
| import {State} from "../../store/state/app.state"; | ||
| import {BreakpointObserver} from "@angular/cdk/layout"; | ||
| import {OidcSecurityService} from "angular-auth-oidc-client"; | ||
| import axios from "axios"; | ||
|
|
||
| @Component({ | ||
| selector: 'app-user-info', | ||
| templateUrl: './user-info.component.html', | ||
| styleUrls: ['./user-info.component.css'] | ||
| }) | ||
| export class UserInfoComponent { | ||
| displayedColumns: string[] = ['description', 'amount', 'location', 'timestamp']; | ||
| accessToken: string | null = null; | ||
|
|
||
| profile = { | ||
| firstname: 'Penny', | ||
| lastname: 'Pennyworth', | ||
| birthdate: new Date(1991, 5, 10), | ||
| sex: 'Female', | ||
| city: 'Zürich' | ||
| }; | ||
|
|
||
| transactions = [ | ||
| { | ||
| timestamp: '27.10.2023, 14:20', | ||
| description: 'Purchase at Coop', | ||
| amount: -25.00, | ||
| location: 'Zürich HB', | ||
| }, | ||
| { | ||
| timestamp: '26.10.2023, 21:00', | ||
| description: 'Purchase at Myprotein.ch', | ||
| amount: -101.00, | ||
| location: 'Switzerland' | ||
| }, | ||
| { | ||
| timestamp: '25.10.2023, 12:10', | ||
| description: 'Purchase at Shell Station', | ||
| amount: -118.00, | ||
| location: 'Zürich' | ||
| }, | ||
| { | ||
| timestamp: '25.10.2023, 08:00', | ||
| description: 'Purchase at Zürich Versicherung', | ||
| amount: -500.00, | ||
| location: 'Zürich' | ||
| }, | ||
| { | ||
| timestamp: '25.10.2023, 18:00', | ||
| description: 'Purchase at Restaurant Aurora', | ||
| amount: -80.00, | ||
| location: 'Zürich' | ||
| }, | ||
| ]; | ||
|
|
||
| constructor() {} | ||
| } |