RLH-12 | Start implementing /account page

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