RLH-12 - Start implementing /account page

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"
+            ]
           }
         }
       }

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",

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",

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},

src/app/libraries/components/button/button.component.html

@@ -0,0 +1,7 @@
+<button
+  type="button"
+  class="btn btn-link"
+  [disabled]="buttonDisabled()"
+  (click)="button.click()">
+    {{button.text}}
+</button>

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<ButtonComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ButtonComponent]
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(ButtonComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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();
+      };
+    });
+  }
+
+
+
+
+}

src/app/libraries/components/button/models/button.model.ts

@@ -0,0 +1,5 @@
+export class ButtonModel {
+  text: string = "text";
+  disabled: () => boolean;
+  click: () => void;
+}

src/app/views/account/account-navigation/account-navigation.component.html

@@ -0,0 +1,15 @@
+<div class="row border p-4">
+  <b>Profile Management</b>
+  <div class="nav flex-column nav-pills">
+    <div>
+      <rlh-button
+        [button]="accountManagementButton"
+      ></rlh-button>
+    </div>
+    <div>
+      <rlh-button
+        [button]="publicProfileButton"
+      ></rlh-button>
+    </div>
+  </div>
+</div>

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<AccountNavigationComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [AccountNavigationComponent]
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(AccountNavigationComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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<string>();
+
+  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'
+  }
+}

src/app/views/account/account.component.html

@@ -0,0 +1,15 @@
+<div class="container">
+  <div class="row">
+    <div class="col-3">
+      <app-account-navigation
+      (onNavChange)="navChanged($event)"
+      >
+      </app-account-navigation>
+    </div>
+    <div class="col-9">
+      <div class="row" *ngIf="selectedMenu === 'ACC'">
+        <app-dashboard></app-dashboard>
+      </div>
+    </div>
+  </div>
+</div>

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<AccountComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [AccountComponent]
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(AccountComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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;
+  }
+
+}

src/app/views/dashboard/dashboard.component.html

@@ -1,10 +1,8 @@
-<div class="container" *ngIf="isLoggedIn">
-  <div class="row">
+<div *ngIf="isLoggedIn">
     <p class="border">
       <b>Username: </b>{{userData.username}} |
       <b>eMail: </b>{{userData.email}} |
       <b>UUID: </b>{{userData.uuid}} |
       <b>Created At: </b>{{userData.createdAt}}
     </p>
-  </div>
 </div>

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';

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,