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

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>