RLH-12 - Implement account page basic func with sidebar

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="nav flex-column nav-pills">
-    <div>
-      <rlh-button
-        [button]="accountManagementButton"
-      ></rlh-button>
-    </div>
-    <div>
-      <rlh-button
-        [button]="publicProfileButton"
-      ></rlh-button>
+  <div class="row-3">
+    <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>
 </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,