From b862f83d234ba5ca4fce8935c9d0d1ab447a8844 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Beatrice=20Dellac=C3=A0?= Date: Mon, 4 Nov 2024 02:11:28 +0100 Subject: [PATCH] RLH-12 - Start implementing /account page --- angular.json | 12 +++++- package-lock.json | 27 ++++++++++--- package.json | 5 ++- src/app/app.routes.ts | 4 +- .../components/button/button.component.html | 7 ++++ .../components/button/button.component.scss | 0 .../button/button.component.spec.ts | 23 +++++++++++ .../components/button/button.component.ts | 40 +++++++++++++++++++ .../components/button/models/button.model.ts | 5 +++ .../account-navigation.component.html | 15 +++++++ .../account-navigation.component.scss | 0 .../account-navigation.component.spec.ts | 23 +++++++++++ .../account-navigation.component.ts | 38 ++++++++++++++++++ src/app/views/account/account.component.html | 15 +++++++ src/app/views/account/account.component.scss | 0 .../views/account/account.component.spec.ts | 23 +++++++++++ src/app/views/account/account.component.ts | 30 ++++++++++++++ .../views/dashboard/dashboard.component.html | 4 +- src/styles.scss | 8 ---- tsconfig.json | 3 +- 20 files changed, 259 insertions(+), 23 deletions(-) create mode 100644 src/app/libraries/components/button/button.component.html create mode 100644 src/app/libraries/components/button/button.component.scss create mode 100644 src/app/libraries/components/button/button.component.spec.ts create mode 100644 src/app/libraries/components/button/button.component.ts create mode 100644 src/app/libraries/components/button/models/button.model.ts create mode 100644 src/app/views/account/account-navigation/account-navigation.component.html create mode 100644 src/app/views/account/account-navigation/account-navigation.component.scss create mode 100644 src/app/views/account/account-navigation/account-navigation.component.spec.ts create mode 100644 src/app/views/account/account-navigation/account-navigation.component.ts create mode 100644 src/app/views/account/account.component.html create mode 100644 src/app/views/account/account.component.scss create mode 100644 src/app/views/account/account.component.spec.ts create mode 100644 src/app/views/account/account.component.ts diff --git a/angular.json b/angular.json index 696d486..0dd35fe 100644 --- a/angular.json +++ b/angular.json @@ -30,9 +30,13 @@ "src/assets" ], "styles": [ + "node_modules/bootstrap/scss/bootstrap.scss", + "node_modules/bootstrap-icons/font/bootstrap-icons.css", "src/styles.scss" ], - "scripts": [] + "scripts": [ + "node_modules/bootstrap/dist/js/bootstrap.bundle.min.js" + ] }, "configurations": { "production": { @@ -90,9 +94,13 @@ "src/assets" ], "styles": [ + "node_modules/bootstrap/scss/bootstrap.scss", + "node_modules/bootstrap-icons/font/bootstrap-icons.css", "src/styles.scss" ], - "scripts": [] + "scripts": [ + "node_modules/bootstrap/dist/js/bootstrap.bundle.min.js" + ] } } } diff --git a/package-lock.json b/package-lock.json index c295a4f..a278112 100644 --- a/package-lock.json +++ b/package-lock.json @@ -16,9 +16,10 @@ "@angular/platform-browser": "^17.3.0", "@angular/platform-browser-dynamic": "^17.3.0", "@angular/router": "^17.3.0", - "@ng-bootstrap/ng-bootstrap": "^16.0.0", + "@ng-bootstrap/ng-bootstrap": "^16.0.0-rc.2", "@popperjs/core": "^2.11.8", - "bootstrap": "^5.3.2", + "bootstrap": "^5.3.3", + "bootstrap-icons": "^1.11.3", "mdb-ui-kit": "^8.0.0", "moment": "^2.30.1", "rxjs": "~7.8.0", @@ -3078,9 +3079,9 @@ } }, "node_modules/@ng-bootstrap/ng-bootstrap": { - "version": "16.0.0", - "resolved": "https://registry.npmjs.org/@ng-bootstrap/ng-bootstrap/-/ng-bootstrap-16.0.0.tgz", - "integrity": "sha512-+FJ3e6cX9DW2t7021Ji3oz433rk3+4jLfqzU+Jyx6/vJz1dIOaML3EAY6lYuW4TLiXgMPOMvs6KzPFALGh4Lag==", + "version": "16.0.0-rc.2", + "resolved": "https://registry.npmjs.org/@ng-bootstrap/ng-bootstrap/-/ng-bootstrap-16.0.0-rc.2.tgz", + "integrity": "sha512-XQUOr6OfAYA9FK1e9tsKJiuKYGkNeO3vCkbCryWDWZzWaehvOWLcB214RUVBeoxynd4c/n2PmQRGnKcJLTAeSA==", "license": "MIT", "dependencies": { "tslib": "^2.3.0" @@ -4945,6 +4946,22 @@ "@popperjs/core": "^2.11.8" } }, + "node_modules/bootstrap-icons": { + "version": "1.11.3", + "resolved": "https://registry.npmjs.org/bootstrap-icons/-/bootstrap-icons-1.11.3.tgz", + "integrity": "sha512-+3lpHrCw/it2/7lBL15VR0HEumaBss0+f/Lb6ZvHISn1mlK83jjFpooTLsMWbIjJMDjDjOExMsTxnXSIT4k4ww==", + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/twbs" + }, + { + "type": "opencollective", + "url": "https://opencollective.com/bootstrap" + } + ], + "license": "MIT" + }, "node_modules/brace-expansion": { "version": "1.1.11", "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz", diff --git a/package.json b/package.json index 3a49b6d..be8e35b 100644 --- a/package.json +++ b/package.json @@ -18,9 +18,10 @@ "@angular/platform-browser": "^17.3.0", "@angular/platform-browser-dynamic": "^17.3.0", "@angular/router": "^17.3.0", - "@ng-bootstrap/ng-bootstrap": "^16.0.0", + "@ng-bootstrap/ng-bootstrap": "^16.0.0-rc.2", "@popperjs/core": "^2.11.8", - "bootstrap": "^5.3.2", + "bootstrap": "^5.3.3", + "bootstrap-icons": "^1.11.3", "mdb-ui-kit": "^8.0.0", "moment": "^2.30.1", "rxjs": "~7.8.0", diff --git a/src/app/app.routes.ts b/src/app/app.routes.ts index 5251d98..2163f50 100644 --- a/src/app/app.routes.ts +++ b/src/app/app.routes.ts @@ -1,14 +1,14 @@ import {Routes} from '@angular/router'; import {DashboardComponent} from "./views/dashboard/dashboard.component"; import {AppComponent} from "./app.component"; -import {LoginComponent} from "./views/login/login.component"; import {AuthFormComponent} from "./views/beta/auth-form/auth-form.component"; -import {RegisterComponent} from "./views/register/register.component"; import {AuthGuardService} from "./services/auth-guard.service"; +import {AccountComponent} from "./views/account/account.component"; export const routes: Routes = [ {path: '', redirectTo: '/dashboard', pathMatch: 'full'}, {path: 'dashboard', component: DashboardComponent, canActivate: [AuthGuardService]}, + {path: 'account', component: AccountComponent, canActivate: [AuthGuardService]}, {path: 'login', component: AuthFormComponent}, {path: 'beta/authForm', component: AuthFormComponent}, {path: '**', component: AppComponent}, diff --git a/src/app/libraries/components/button/button.component.html b/src/app/libraries/components/button/button.component.html new file mode 100644 index 0000000..9f97a8c --- /dev/null +++ b/src/app/libraries/components/button/button.component.html @@ -0,0 +1,7 @@ + diff --git a/src/app/libraries/components/button/button.component.scss b/src/app/libraries/components/button/button.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/app/libraries/components/button/button.component.spec.ts b/src/app/libraries/components/button/button.component.spec.ts new file mode 100644 index 0000000..d4ad18e --- /dev/null +++ b/src/app/libraries/components/button/button.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { ButtonComponent } from './button.component'; + +describe('ButtonComponent', () => { + let component: ButtonComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [ButtonComponent] + }) + .compileComponents(); + + fixture = TestBed.createComponent(ButtonComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/libraries/components/button/button.component.ts b/src/app/libraries/components/button/button.component.ts new file mode 100644 index 0000000..de44ddc --- /dev/null +++ b/src/app/libraries/components/button/button.component.ts @@ -0,0 +1,40 @@ +import {booleanAttribute, Component, Input, OnInit} from '@angular/core'; +import {ButtonModel} from "./models/button.model"; + +@Component({ + selector: 'rlh-button', + standalone: true, + imports: [], + templateUrl: './button.component.html', + styleUrl: './button.component.scss' +}) +export class ButtonComponent implements OnInit +{ + + @Input() button: ButtonModel = { + text: 'text', + disabled: () => false, + click: () => {} + }; + + buttonDisabled: () => boolean = () => { + return false; + // tslint:disable-next-line: semicolon + }; + + ngOnInit() { + this.button.disabled = this.button.disabled + ? this.button.disabled + : () => false; + // + setTimeout(() => { + this.buttonDisabled = () => { + return this.button.disabled(); + }; + }); + } + + + + +} diff --git a/src/app/libraries/components/button/models/button.model.ts b/src/app/libraries/components/button/models/button.model.ts new file mode 100644 index 0000000..1bfa2e3 --- /dev/null +++ b/src/app/libraries/components/button/models/button.model.ts @@ -0,0 +1,5 @@ +export class ButtonModel { + text: string = "text"; + disabled: () => boolean; + click: () => void; +} diff --git a/src/app/views/account/account-navigation/account-navigation.component.html b/src/app/views/account/account-navigation/account-navigation.component.html new file mode 100644 index 0000000..0c184ab --- /dev/null +++ b/src/app/views/account/account-navigation/account-navigation.component.html @@ -0,0 +1,15 @@ +
+ Profile Management +
+
+ +
+
+ +
+
+
diff --git a/src/app/views/account/account-navigation/account-navigation.component.scss b/src/app/views/account/account-navigation/account-navigation.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/app/views/account/account-navigation/account-navigation.component.spec.ts b/src/app/views/account/account-navigation/account-navigation.component.spec.ts new file mode 100644 index 0000000..59ac17f --- /dev/null +++ b/src/app/views/account/account-navigation/account-navigation.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { AccountNavigationComponent } from './account-navigation.component'; + +describe('AccountNavigationComponent', () => { + let component: AccountNavigationComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [AccountNavigationComponent] + }) + .compileComponents(); + + fixture = TestBed.createComponent(AccountNavigationComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/views/account/account-navigation/account-navigation.component.ts b/src/app/views/account/account-navigation/account-navigation.component.ts new file mode 100644 index 0000000..a7fc3cb --- /dev/null +++ b/src/app/views/account/account-navigation/account-navigation.component.ts @@ -0,0 +1,38 @@ +import {Component, EventEmitter, Output} from '@angular/core'; +import {ButtonComponent} from "../../../libraries/components/button/button.component"; +import {ButtonModel} from "../../../libraries/components/button/models/button.model"; + +@Component({ + selector: 'app-account-navigation', + standalone: true, + imports: [ + ButtonComponent + ], + templateUrl: './account-navigation.component.html', + styleUrl: './account-navigation.component.scss' +}) +export class AccountNavigationComponent { + + @Output() onNavChange = new EventEmitter(); + + selectedMenu = "ACC"; + + accountManagementButton: ButtonModel = { + disabled: () => this.selectedMenu === 'ACC', + click: () => + { + this.selectedMenu = 'ACC'; + this.onNavChange.emit(this.selectedMenu); + }, + text: 'Account Management' + } + + publicProfileButton: ButtonModel = { + disabled: () => this.selectedMenu === 'PPF', + click: () => { + this.selectedMenu = 'PPF'; + this.onNavChange.emit(this.selectedMenu); + }, + text: 'Public Profile' + } +} diff --git a/src/app/views/account/account.component.html b/src/app/views/account/account.component.html new file mode 100644 index 0000000..64adae1 --- /dev/null +++ b/src/app/views/account/account.component.html @@ -0,0 +1,15 @@ +
+
+
+ + +
+
+
+ +
+
+
+
diff --git a/src/app/views/account/account.component.scss b/src/app/views/account/account.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/app/views/account/account.component.spec.ts b/src/app/views/account/account.component.spec.ts new file mode 100644 index 0000000..07d869b --- /dev/null +++ b/src/app/views/account/account.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { AccountComponent } from './account.component'; + +describe('AccountComponent', () => { + let component: AccountComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [AccountComponent] + }) + .compileComponents(); + + fixture = TestBed.createComponent(AccountComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/views/account/account.component.ts b/src/app/views/account/account.component.ts new file mode 100644 index 0000000..0ff8d00 --- /dev/null +++ b/src/app/views/account/account.component.ts @@ -0,0 +1,30 @@ +import { Component } from '@angular/core'; +import {ButtonComponent} from "../../libraries/components/button/button.component"; +import {ButtonModel} from "../../libraries/components/button/models/button.model"; +import {DashboardComponent} from "../dashboard/dashboard.component"; +import {NgIf} from "@angular/common"; +import {LoginComponent} from "../login/login.component"; +import {AccountNavigationComponent} from "./account-navigation/account-navigation.component"; + +@Component({ + selector: 'app-account', + standalone: true, + imports: [ + ButtonComponent, + DashboardComponent, + NgIf, + LoginComponent, + AccountNavigationComponent + ], + templateUrl: './account.component.html', + styleUrl: './account.component.scss' +}) +export class AccountComponent { + + selectedMenu = 'ACC'; + + public navChanged(selected: string) { + this.selectedMenu = selected; + } + +} diff --git a/src/app/views/dashboard/dashboard.component.html b/src/app/views/dashboard/dashboard.component.html index cbb0ee1..2b156cc 100644 --- a/src/app/views/dashboard/dashboard.component.html +++ b/src/app/views/dashboard/dashboard.component.html @@ -1,10 +1,8 @@ -
-
+

Username: {{userData.username}} | eMail: {{userData.email}} | UUID: {{userData.uuid}} | Created At: {{userData.createdAt}}

-
diff --git a/src/styles.scss b/src/styles.scss index 03d7d41..dd3e7eb 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -1,10 +1,2 @@ /* You can add global styles to this file, and also import other style files */ -@import 'mdb-ui-kit/css/mdb.min.css'; -@import 'bootstrap/scss/mixins'; -@import 'bootstrap/scss/functions'; -@import 'bootstrap/scss/variables'; -@import 'bootstrap/scss/variables-dark'; -@import 'bootstrap/scss/maps'; -@import 'bootstrap/scss/utilities'; -@import 'bootstrap/scss/grid'; diff --git a/tsconfig.json b/tsconfig.json index eb49734..8e05c0f 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -3,7 +3,8 @@ "compileOnSave": false, "compilerOptions": { "outDir": "./dist/out-tsc", - "strict": true, + "strictPropertyInitialization": false, + "strict": false, "noImplicitOverride": true, "noPropertyAccessFromIndexSignature": true, "noImplicitReturns": true,