RLH-12 - Implement account page basic func with sidebar

package-lock.json

@@ -22,6 +22,7 @@
         "bootstrap-icons": "^1.11.3",
         "mdb-ui-kit": "^8.0.0",
         "moment": "^2.30.1",
+        "nanoid": "^5.0.8",
         "rxjs": "~7.8.0",
         "tslib": "^2.3.0",
         "zone.js": "~0.14.3"
@@ -9052,10 +9053,9 @@
       }
     },
     "node_modules/nanoid": {
-      "version": "3.3.7",
-      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz",
-      "integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==",
-      "dev": true,
+      "version": "5.0.8",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-5.0.8.tgz",
+      "integrity": "sha512-TcJPw+9RV9dibz1hHUzlLVy8N4X9TnwirAjrU08Juo6BNKggzVfP2ZJ/3ZUSq15Xl5i85i+Z89XBO90pB2PghQ==",
       "funding": [
         {
           "type": "github",
@@ -9064,10 +9064,10 @@
       ],
       "license": "MIT",
       "bin": {
-        "nanoid": "bin/nanoid.cjs"
+        "nanoid": "bin/nanoid.js"
       },
       "engines": {
-        "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
+        "node": "^18 || >=20"
       }
     },
     "node_modules/needle": {
@@ -10178,6 +10178,25 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/postcss/node_modules/nanoid": {
+      "version": "3.3.7",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz",
+      "integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "bin": {
+        "nanoid": "bin/nanoid.cjs"
+      },
+      "engines": {
+        "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
+      }
+    },
     "node_modules/proc-log": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/proc-log/-/proc-log-3.0.0.tgz",

package.json

@@ -24,6 +24,7 @@
     "bootstrap-icons": "^1.11.3",
     "mdb-ui-kit": "^8.0.0",
     "moment": "^2.30.1",
+    "nanoid": "^5.0.8",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
     "zone.js": "~0.14.3"

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

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

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

@@ -1,5 +1,5 @@
-import {booleanAttribute, Component, Input, OnInit} from '@angular/core';
-import {ButtonModel} from "./models/button.model";
+import {Component, Input, OnInit} from '@angular/core';
+import {ButtonModel, ButtonType} from "./models/button.model";
 
 @Component({
   selector: 'rlh-button',
@@ -14,12 +14,12 @@ export class ButtonComponent implements OnInit
   @Input() button: ButtonModel = {
     text: 'text',
     disabled: () => false,
-    click: () => {}
+    click: () => {},
+    type: ButtonType.PRIMARY
   };
 
-  buttonDisabled: () => boolean = () => {
+  isDisabled: () => boolean = () => {
     return false;
-    // tslint:disable-next-line: semicolon
   };
 
   ngOnInit() {
@@ -28,12 +28,19 @@ export class ButtonComponent implements OnInit
       : () => false;
     //
     setTimeout(() => {
-      this.buttonDisabled = () => {
+      this.isDisabled = () => {
         return this.button.disabled();
       };
     });
   }
 
+    get classes(): string {
+      let classes = 'btn';
+        classes += ' ' + (this.button.type ? this.button.type : ButtonType.PRIMARY);
+
+      return classes;
+    }
+
 
 
 

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

@@ -1,5 +1,11 @@
 export class ButtonModel {
   text: string = "text";
+  type: ButtonType;
   disabled: () => boolean;
   click: () => void;
 }
+
+export enum ButtonType {
+  LINK = "btn-link",
+  PRIMARY = "btn-primary",
+}

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

@@ -0,0 +1,10 @@
+<input
+    [name]="input.id"
+    [id]="'input-' + input.id"
+    [disabled]="isDisabled()"
+    [type]="input.type"
+    (ngModelChange)="input.modelChange()"
+    class="form-control m-1"
+    [(ngModel)]="model"
+/>
+

src/app/libraries/components/input/input.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { InputComponent } from './input.component';
+
+describe('InputComponent', () => {
+  let component: InputComponent;
+  let fixture: ComponentFixture<InputComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [InputComponent]
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(InputComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/libraries/components/input/input.component.ts

@@ -0,0 +1,61 @@
+import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
+import {InputModel, InputType} from "./input.model";
+import {FormsModule} from "@angular/forms";
+import {nanoid} from "nanoid";
+
+@Component({
+  selector: 'rlh-input',
+  standalone: true,
+  imports: [
+    FormsModule
+  ],
+  templateUrl: './input.component.html',
+  styleUrl: './input.component.scss'
+})
+export class InputComponent implements OnInit {
+
+  renderModel: any
+
+  @Input() input: InputModel = {
+    type: InputType.TEXT,
+    disabled: () => false,
+    modelChange: () => {}
+  };
+
+  @Input()
+  get model() {
+    return this.renderModel;
+  }
+  set model(val: any) {
+    if (val !== this.renderModel) {
+      this.renderModel = val;
+      this.modelChange.emit(val);
+    }
+  }
+
+  @Output() modelChange = new EventEmitter<any>();
+
+
+  isDisabled: () => boolean = () => {
+    return false;
+  };
+
+  ngOnInit() {
+    this.input.disabled = this.input.disabled
+      ? this.input.disabled
+      : () => false;
+
+    setTimeout(() => {
+      this.isDisabled = () => {
+        return this.input.disabled();
+      };
+    });
+
+    if(!this.input.id || this.input.id.length < 1) {
+      this.input.id = nanoid(12);
+    }
+  }
+
+
+
+}

src/app/libraries/components/input/input.model.spec.ts

@@ -0,0 +1,7 @@
+import { InputModel } from './input.model';
+
+describe('InputModel', () => {
+  it('should create an instance', () => {
+    expect(new InputModel()).toBeTruthy();
+  });
+});

src/app/libraries/components/input/input.model.ts

@@ -0,0 +1,13 @@
+export class InputModel {
+  id?: string;
+  type: InputType;
+  disabled: () => boolean;
+  modelChange: () => void;
+}
+
+export enum InputType {
+  TEXT = 'text',
+  NUMBER = 'number',
+  EMAIL = 'email',
+  PASSWORD = 'password'
+}

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

@@ -1,4 +1,5 @@
 <div class="row border p-4">
+  <div class="row-3">
     <b>Profile Management</b>
     <div class="nav flex-column nav-pills">
       <div>
@@ -12,4 +13,5 @@
         ></rlh-button>
       </div>
     </div>
+  </div>
 </div>

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

@@ -1,6 +1,6 @@
 import {Component, EventEmitter, Output} from '@angular/core';
 import {ButtonComponent} from "../../../libraries/components/button/button.component";
-import {ButtonModel} from "../../../libraries/components/button/models/button.model";
+import {ButtonModel, ButtonType} from "../../../libraries/components/button/models/button.model";
 
 @Component({
   selector: 'app-account-navigation',
@@ -24,7 +24,8 @@ export class AccountNavigationComponent {
       this.selectedMenu = 'ACC';
       this.onNavChange.emit(this.selectedMenu);
     },
-    text: 'Account Management'
+    text: 'Account Management',
+    type: ButtonType.LINK
   }
 
   publicProfileButton: ButtonModel = {
@@ -33,6 +34,7 @@ export class AccountNavigationComponent {
       this.selectedMenu = 'PPF';
       this.onNavChange.emit(this.selectedMenu);
     },
-    text: 'Public Profile'
+    text: 'Public Profile',
+    type: ButtonType.LINK
   }
 }

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

@@ -1,8 +1,49 @@
 <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>
+  <h2 class="p-3">Account Management</h2>
+  <div class="p-4">
+    <div class="row">
+      <div class="col-4">
+        <b>Username</b>
+        <div>
+          <rlh-input
+            [input]="usernameInput"
+            [(model)]="userData.username">
+          </rlh-input>
+        </div>
+      </div>
+      <div class="col-2">
+        <i>Modify</i>
+        <div>
+          <rlh-button
+            [button]="editUserNameButton">
+          </rlh-button>
+        </div>
+      </div>
+    </div>
+    <div class="row">
+      <div class="col-4">
+        <b>Email</b>
+        <rlh-input
+          [input]="emailInput"
+          [(model)]="userData.email">
+        </rlh-input>
+      </div>
+    </div>
+    <div class="row">
+      <div class="col-4">
+        <b>UUID</b>
+        <rlh-input
+          [input]="uuidInput"
+          [(model)]="userData.uuid">
+        </rlh-input>
+      </div>
+      <div class="col-4">
+        <b>Created At</b>
+        <rlh-input
+          [input]="createdAtInput"
+          [(model)]="userData.createdAt">
+        </rlh-input>
+      </div>
+    </div>
+  </div>
 </div>

src/app/views/dashboard/dashboard.component.ts

@@ -2,10 +2,14 @@ import {Component, OnInit} from '@angular/core';
 import {UserData} from "../../interface/user";
 import {AuthService} from "../../services/auth.service";
 import {ApiService} from "../../services/api.service";
-import {NgbDatepicker, NgbDateStruct} from "@ng-bootstrap/ng-bootstrap";
+import {NgbDatepicker} from "@ng-bootstrap/ng-bootstrap";
 import {FormsModule} from "@angular/forms";
 import {NgIf} from "@angular/common";
 import {Router} from "@angular/router";
+import {InputComponent} from "../../libraries/components/input/input.component";
+import {InputModel, InputType} from "../../libraries/components/input/input.model";
+import {ButtonComponent} from "../../libraries/components/button/button.component";
+import {ButtonModel, ButtonType} from "../../libraries/components/button/models/button.model";
 
 @Component({
   selector: 'app-dashboard',
@@ -13,7 +17,9 @@ import {Router} from "@angular/router";
   imports: [
     NgbDatepicker,
     FormsModule,
-    NgIf
+    NgIf,
+    InputComponent,
+    ButtonComponent
   ],
   templateUrl: './dashboard.component.html',
   styleUrl: './dashboard.component.scss'
@@ -22,6 +28,39 @@ export class DashboardComponent implements OnInit {
 
   isLoggedIn = false;
 
+  usernameInput: InputModel = {
+    type: InputType.TEXT,
+    disabled: () => true,
+    modelChange: () => {}
+  }
+
+  emailInput: InputModel = {
+    type: InputType.EMAIL,
+    disabled: () => true,
+    modelChange: () => {}
+  }
+
+  uuidInput: InputModel = {
+    type: InputType.TEXT,
+    disabled: () => true,
+    modelChange: () => {}
+  }
+
+  createdAtInput: InputModel = {
+    type: InputType.TEXT,
+    disabled: () => true,
+    modelChange: () => {}
+  }
+
+  editUserNameButton: ButtonModel = {
+    disabled: () => false,
+    click: () => {
+      console.log(this.userData.username);
+    },
+    text: 'Edit',
+    type: ButtonType.PRIMARY
+  }
+
   userData: UserData = {
     uuid: null,
     username: null,