diff --git a/package-lock.json b/package-lock.json index a278112..d7fe4e2 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index be8e35b..b1c3182 100644 --- a/package.json +++ b/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" diff --git a/src/app/views/account/account-navigation/account-navigation.component.html b/src/app/views/account/account-navigation/account-navigation.component.html index 0c184ab..4f670fc 100644 --- a/src/app/views/account/account-navigation/account-navigation.component.html +++ b/src/app/views/account/account-navigation/account-navigation.component.html @@ -1,15 +1,17 @@
- Profile Management -
-
- -
-
- +
+ Profile Management +
+
+ +
+
+ +
diff --git a/src/app/views/account/account-navigation/account-navigation.component.ts b/src/app/views/account/account-navigation/account-navigation.component.ts index a7fc3cb..2dd36c0 100644 --- a/src/app/views/account/account-navigation/account-navigation.component.ts +++ b/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 } } diff --git a/src/app/views/dashboard/dashboard.component.html b/src/app/views/dashboard/dashboard.component.html index 2b156cc..c38c3b1 100644 --- a/src/app/views/dashboard/dashboard.component.html +++ b/src/app/views/dashboard/dashboard.component.html @@ -1,8 +1,49 @@
-

- Username: {{userData.username}} | - eMail: {{userData.email}} | - UUID: {{userData.uuid}} | - Created At: {{userData.createdAt}} -

+

Account Management

+
+
+
+ Username +
+ + +
+
+
+ Modify +
+ + +
+
+
+
+
+ Email + + +
+
+
+
+ UUID + + +
+
+ Created At + + +
+
+
diff --git a/src/app/views/dashboard/dashboard.component.ts b/src/app/views/dashboard/dashboard.component.ts index 9d6f9ef..a8ea8e4 100644 --- a/src/app/views/dashboard/dashboard.component.ts +++ b/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,