Merge remote-tracking branch 'origin/main' into task/migrate-deprecated-webpack-executor

CHANGELOG.md

@@ -7,9 +7,14 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## Unreleased
 
+### Added
+
+- Added support for a copy-to-clipboard action in the alert dialog component
+
 ### Changed
 
 - Set the change detection strategy to `OnPush` in the _FIRE_ page
+- Improved the language localization for French (`fr`)
 - Improved the language localization for German (`de`)
 
 ## 3.21.0 - 2026-07-05

apps/client/src/app/components/admin-overview/admin-overview.component.ts

@@ -90,7 +90,12 @@ export class GfAdminOverviewComponent implements OnInit {
   protected activitiesCount: number;
   protected couponDuration: StringValue = '14 days';
   protected readonly couponsDataSource = new MatTableDataSource<Coupon>();
-  protected readonly couponsDisplayedColumns = ['code', 'duration', 'actions'];
+  protected readonly couponsDisplayedColumns = [
+    'code',
+    'duration',
+    'createdAt',
+    'actions'
+  ];
   protected hasPermissionForSubscription: boolean;
   protected hasPermissionForSystemMessage: boolean;
   protected hasPermissionToSyncDemoUserAccount: boolean;
@@ -201,6 +206,7 @@ export class GfAdminOverviewComponent implements OnInit {
   protected onAddCoupon() {
     const newCoupon: Coupon = {
       code: `${ghostfolioPrefix}${this.generateCouponCode(14)}`,
+      createdAt: new Date().toISOString(),
       duration: this.couponDuration
     };
 

apps/client/src/app/components/admin-overview/admin-overview.html

@@ -180,6 +180,28 @@
                   </td>
                 </ng-container>
 
+                <ng-container matColumnDef="createdAt">
+                  <th *matHeaderCellDef class="px-1 text-right" mat-header-cell>
+                    <ng-container i18n>Creation</ng-container>
+                  </th>
+                  <td
+                    *matCellDef="let element"
+                    class="px-1 text-right"
+                    mat-cell
+                  >
+                    @if (element.createdAt) {
+                      <gf-value
+                        class="d-inline-block justify-content-end"
+                        [isDate]="true"
+                        [locale]="user?.settings?.locale"
+                        [value]="element.createdAt"
+                      />
+                    } @else {
+                      <span>-</span>
+                    }
+                  </td>
+                </ng-container>
+
                 <ng-container matColumnDef="actions" stickyEnd>
                   <th
                     *matHeaderCellDef

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

@@ -146,11 +146,9 @@ export class GfUserAccountMembershipComponent {
           )
           .subscribe(({ apiKey }) => {
             this.notificationService.alert({
+              copyValue: apiKey,
               discardLabel: $localize`Okay`,
-              message:
+              message: $localize`Set this API key in your self-hosted environment:`,
-                $localize`Set this API key in your self-hosted environment:` +
-                '<br />' +
-                apiKey,
               title: $localize`Ghostfolio Premium Data Provider API Key`
             });
           });

apps/client/src/app/pages/resources/personal-finance-tools/interfaces/interfaces.ts

@@ -0,0 +1,6 @@
+import type { Product } from '@ghostfolio/common/interfaces';
+
+export type ResolvedProduct = Omit<Product, 'categories' | 'platforms'> & {
+  categories?: string[];
+  platforms?: string[];
+};

apps/client/src/app/pages/resources/personal-finance-tools/product-page.component.ts

@@ -1,5 +1,4 @@
 import { getCountryName } from '@ghostfolio/common/helper';
-import { Product } from '@ghostfolio/common/interfaces';
 import { personalFinanceTools } from '@ghostfolio/common/personal-finance-tools';
 import { publicRoutes } from '@ghostfolio/common/routes/routes';
 import { translate } from '@ghostfolio/ui/i18n';
@@ -14,6 +13,8 @@ import {
 import { MatButtonModule } from '@angular/material/button';
 import { ActivatedRoute, RouterModule } from '@angular/router';
 
+import { ResolvedProduct } from './interfaces/interfaces';
+
 @Component({
   changeDetection: ChangeDetectionStrategy.OnPush,
   host: { class: 'page' },
@@ -28,8 +29,12 @@ export class GfProductPageComponent {
     return subscriptionOffer?.price;
   });
 
-  protected readonly product1 = computed<Product>(() => ({
+  protected readonly product1 = computed<ResolvedProduct>(() => ({
-    categories: ['FINANCIAL_PLANNING', 'NET_WORTH_TRACKING', 'STOCK_TRACKING'],
+    categories: this.getSortedTranslations([
+      'FINANCIAL_PLANNING',
+      'NET_WORTH_TRACKING',
+      'STOCK_TRACKING'
+    ]),
     founded: 2021,
     hasFreePlan: true,
     hasSelfHostingAbility: true,
@@ -50,21 +55,23 @@ export class GfProductPageComponent {
     ],
     name: 'Ghostfolio',
     origin: getCountryName({ code: 'CH' }),
-    platforms: ['ANDROID', 'WEB'],
+    platforms: this.getSortedTranslations(['ANDROID', 'WEB']),
     regions: [$localize`Global`],
     slogan: 'Open Source Wealth Management',
     useAnonymously: true
   }));
 
-  protected readonly product2 = computed<Product>(() => {
+  protected readonly product2 = computed<ResolvedProduct>(() => {
     const product = personalFinanceTools.find(({ key }) => {
       return key === this.route.snapshot.data['key'];
     });
 
-    const mappedProduct = {
+    const mappedProduct: ResolvedProduct = {
       key: product?.key ?? '',
       name: product?.name ?? '',
-      ...product
+      ...product,
+      categories: this.getSortedTranslations(product?.categories),
+      platforms: this.getSortedTranslations(product?.platforms)
     };
 
     if (mappedProduct.origin) {
@@ -97,9 +104,8 @@ export class GfProductPageComponent {
           ...[product1, product2].flatMap(
             ({ categories, name, origin, platforms }) => {
               return [
-                ...[...(categories ?? []), ...(platforms ?? [])].map((key) => {
+                ...(categories ?? []),
-                  return translate(key);
+                ...(platforms ?? []),
-                }),
                 name,
                 origin
               ];
@@ -130,8 +136,16 @@ export class GfProductPageComponent {
     });
   });
 
-  protected readonly translate = translate;
-
   private readonly dataService = inject(DataService);
   private readonly route = inject(ActivatedRoute);
+
+  private getSortedTranslations(values?: string[]) {
+    return values
+      ?.map((value) => {
+        return translate(value);
+      })
+      .sort((a, b) => {
+        return a.localeCompare(b, undefined, { sensitivity: 'base' });
+      });
+  }
 }

apps/client/src/app/pages/resources/personal-finance-tools/product-page.html

@@ -81,7 +81,7 @@
                     track category;
                     let isLast = $last
                   ) {
-                    {{ translate(category) }}{{ isLast ? '' : ', ' }}
+                    {{ category }}{{ isLast ? '' : ', ' }}
                   }
                 </td>
                 <td class="mat-mdc-cell px-1 py-2">
@@ -90,7 +90,7 @@
                     track category;
                     let isLast = $last
                   ) {
-                    {{ translate(category) }}{{ isLast ? '' : ', ' }}
+                    {{ category }}{{ isLast ? '' : ', ' }}
                   }
                 </td>
               </tr>
@@ -135,7 +135,7 @@
                     track platform;
                     let isLast = $last
                   ) {
-                    {{ translate(platform) }}{{ isLast ? '' : ', ' }}
+                    {{ platform }}{{ isLast ? '' : ', ' }}
                   }
                 </td>
                 <td class="mat-mdc-cell px-1 py-2">
@@ -144,7 +144,7 @@
                     track platform;
                     let isLast = $last
                   ) {
-                    {{ translate(platform) }}{{ isLast ? '' : ', ' }}
+                    {{ platform }}{{ isLast ? '' : ', ' }}
                   }
                 </td>
               </tr>

libs/common/src/lib/interfaces/coupon.interface.ts

@@ -2,5 +2,6 @@ import { StringValue } from 'ms';
 
 export interface Coupon {
   code: string;
-  duration?: StringValue;
+  createdAt: string;
+  duration: StringValue;
 }

libs/ui/src/lib/notifications/alert-dialog/alert-dialog.component.ts

@@ -1,6 +1,9 @@
+import { Clipboard } from '@angular/cdk/clipboard';
 import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { MatDialogModule, MatDialogRef } from '@angular/material/dialog';
+import { MatSnackBar } from '@angular/material/snack-bar';
+import ms from 'ms';
 
 import { AlertDialogParams } from './interfaces/interfaces';
 
@@ -12,6 +15,7 @@ import { AlertDialogParams } from './interfaces/interfaces';
   templateUrl: './alert-dialog.html'
 })
 export class GfAlertDialogComponent {
+  public copyValue?: string;
   public discardLabel: string;
   public message?: string;
   public title: string;
@@ -19,9 +23,32 @@ export class GfAlertDialogComponent {
   protected readonly dialogRef =
     inject<MatDialogRef<GfAlertDialogComponent>>(MatDialogRef);
 
-  public initialize({ discardLabel, message, title }: AlertDialogParams) {
+  private readonly clipboard = inject(Clipboard);
+  private readonly snackBar = inject(MatSnackBar);
+
+  public initialize({
+    copyValue,
+    discardLabel,
+    message,
+    title
+  }: AlertDialogParams) {
+    this.copyValue = copyValue;
     this.discardLabel = discardLabel;
     this.message = message;
     this.title = title;
   }
+
+  public onCopyToClipboard() {
+    if (this.copyValue) {
+      this.clipboard.copy(this.copyValue);
+
+      this.snackBar.open(
+        '✅ ' + $localize`The value has been copied to the clipboard`,
+        undefined,
+        {
+          duration: ms('3 seconds')
+        }
+      );
+    }
+  }
 }

libs/ui/src/lib/notifications/alert-dialog/alert-dialog.html

@@ -2,10 +2,22 @@
   <div mat-dialog-title [innerHTML]="title"></div>
 }
 
-@if (message) {
+@if (message || copyValue) {
-  <div mat-dialog-content [innerHTML]="message"></div>
+  <div mat-dialog-content>
+    @if (message) {
+      <div [innerHTML]="message"></div>
+    }
+    @if (copyValue) {
+      <div class="mt-2">{{ copyValue }}</div>
+    }
+  </div>
 }
 
 <div align="end" mat-dialog-actions>
   <button mat-button (click)="dialogRef.close()">{{ discardLabel }}</button>
+  @if (copyValue) {
+    <button color="primary" mat-flat-button (click)="onCopyToClipboard()">
+      <ng-container i18n>Copy</ng-container>
+    </button>
+  }
 </div>

libs/ui/src/lib/notifications/alert-dialog/interfaces/interfaces.ts

@@ -1,4 +1,5 @@
 export interface AlertDialogParams {
+  copyValue?: string;
   discardLabel: string;
   message?: string;
   title: string;

libs/ui/src/lib/notifications/interfaces/interfaces.ts

@@ -1,6 +1,7 @@
 import { ConfirmationDialogType } from '@ghostfolio/common/enums';
 
 export interface AlertParams {
+  copyValue?: string;
   discardFn?: () => void;
   discardLabel?: string;
   message?: string;

libs/ui/src/lib/notifications/notification.service.ts

@@ -31,6 +31,7 @@ export class NotificationService {
     });
 
     dialog.componentInstance.initialize({
+      copyValue: aParams.copyValue,
       discardLabel: aParams.discardLabel,
       message: aParams.message,
       title: aParams.title