RLH-12 - Implement account page basic func with sidebar
This commit is contained in:
parent
ddfe5e7f02
commit
5e5b81743a
31
package-lock.json
generated
31
package-lock.json
generated
@ -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",
|
||||
|
||||
@ -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"
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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
|
||||
}
|
||||
}
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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,
|
||||
|
||||
Loading…
Reference in New Issue
Block a user