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",
+      "version": "5.0.8",
-      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-5.0.8.tgz",
-      "integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==",
+      "integrity": "sha512-TcJPw+9RV9dibz1hHUzlLVy8N4X9TnwirAjrU08Juo6BNKggzVfP2ZJ/3ZUSq15Xl5i85i+Z89XBO90pB2PghQ==",
-      "dev": true,
       "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/views/account/account-navigation/account-navigation.component.html

@@ -1,15 +1,17 @@
 <div class="row border p-4">
-  <b>Profile Management</b>
+  <div class="row-3">
-  <div class="nav flex-column nav-pills">
+    <b>Profile Management</b>
-    <div>
+    <div class="nav flex-column nav-pills">
-      <rlh-button
+      <div>
-        [button]="accountManagementButton"
+        <rlh-button
-      ></rlh-button>
+          [button]="accountManagementButton"
-    </div>
+        ></rlh-button>
-    <div>
+      </div>
-      <rlh-button
+      <div>
-        [button]="publicProfileButton"
+        <rlh-button
-      ></rlh-button>
+          [button]="publicProfileButton"
+        ></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">
+  <h2 class="p-3">Account Management</h2>
-      <b>Username: </b>{{userData.username}} |
+  <div class="p-4">
-      <b>eMail: </b>{{userData.email}} |
+    <div class="row">
-      <b>UUID: </b>{{userData.uuid}} |
+      <div class="col-4">
-      <b>Created At: </b>{{userData.createdAt}}
+        <b>Username</b>
-    </p>
+        <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,