Feature/extend user account settings with copy-to-clipboard button for user id (#7125)

* Extend settings with copy-to-clipboard button for user id

* Update changelog

CHANGELOG.md

@@ -9,6 +9,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Added
 
+- Extended the user account settings with a copy-to-clipboard button for the user id
 - Added pagination to the platform management of the admin control panel
 - Added pagination to the tag management of the admin control panel
 - Extended the asset profile details dialog of the admin control panel with a copy-to-clipboard button for the ISIN number

apps/client/src/app/components/user-account-settings/user-account-settings.component.ts

@@ -12,6 +12,7 @@ import { hasPermission, permissions } from '@ghostfolio/common/permissions';
 import { internalRoutes } from '@ghostfolio/common/routes/routes';
 import { NotificationService } from '@ghostfolio/ui/notifications';
 import { DataService } from '@ghostfolio/ui/services';
+import { GfValueComponent } from '@ghostfolio/ui/value';
 
 import {
   ChangeDetectionStrategy,
@@ -51,6 +52,7 @@ import { catchError } from 'rxjs/operators';
   changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [
     FormsModule,
+    GfValueComponent,
     IonIcon,
     MatButtonModule,
     MatCardModule,

apps/client/src/app/components/user-account-settings/user-account-settings.html

@@ -260,7 +260,13 @@
         <div class="pr-1 w-50">
           Ghostfolio <ng-container i18n>User ID</ng-container>
         </div>
-        <div class="pl-1 text-monospace w-50">{{ user?.id }}</div>
+        <div class="pl-1 w-50">
+          <gf-value
+            class="text-monospace"
+            [enableCopyToClipboardButton]="true"
+            [value]="user?.id"
+          />
+        </div>
       </div>
       <div class="align-items-center d-flex py-1">
         <div class="pr-1 w-50"></div>