Fix clipboard on webkit

frontend/src/app/components/copy-field/copy-field.component.ts

@@ -1,11 +1,11 @@
-import { Clipboard } from '@angular/cdk/clipboard';
 import { Component, EventEmitter, Input, Output } from '@angular/core';
 import {
   MatFormFieldAppearance,
   SubscriptSizing,
 } from '@angular/material/form-field';
-import { Fail, FT } from 'picsur-shared/dist/types';
+import { FT, Fail } from 'picsur-shared/dist/types';
 import { Logger } from 'src/app/services/logger/logger.service';
+import { ClipboardService } from 'src/app/util/clipboard.service';
 import { ErrorService } from 'src/app/util/error-manager/error.service';
 
 @Component({
@@ -31,12 +31,12 @@ export class CopyFieldComponent {
   @Output('hide') onHide = new EventEmitter<boolean>();
 
   constructor(
-    private readonly clipboard: Clipboard,
+    private readonly clipboard: ClipboardService,
     private readonly errorService: ErrorService,
   ) {}
 
-  public copy() {
-    if (this.clipboard.copy(this.value)) {
+  public async copy() {
+    if (await this.clipboard.copy(this.value)) {
       this.errorService.info(`Copied ${this.label}!`);
       this.onCopy.emit(this.value);
       return;

frontend/src/app/components/copy-field/copy-field.module.ts

@@ -1,4 +1,3 @@
-import { ClipboardModule } from '@angular/cdk/clipboard';
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
@@ -15,7 +14,6 @@ import { CopyFieldComponent } from './copy-field.component';
     MatInputModule,
     MatIconModule,
     MatButtonModule,
-    ClipboardModule,
   ],
   exports: [CopyFieldComponent],
 })

frontend/src/app/routes/settings/apikeys/settings-apikeys.component.ts

@@ -1,14 +1,14 @@
-import { Clipboard } from '@angular/cdk/clipboard';
 import { Component, OnInit, ViewChild } from '@angular/core';
 import { MatPaginator, PageEvent } from '@angular/material/paginator';
 import { AutoUnsubscribe } from 'ngx-auto-unsubscribe-decorator';
 import { EApiKey } from 'picsur-shared/dist/entities/apikey.entity';
-import { Fail, FT, HasFailed } from 'picsur-shared/dist/types';
+import { FT, Fail, HasFailed } from 'picsur-shared/dist/types';
 import { BehaviorSubject, Subject } from 'rxjs';
 import { ApiKeysService } from 'src/app/services/api/apikeys.service';
 import { UserService } from 'src/app/services/api/user.service';
 import { Logger } from 'src/app/services/logger/logger.service';
 import { BootstrapService } from 'src/app/util/bootstrap.service';
+import { ClipboardService } from 'src/app/util/clipboard.service';
 import { DialogService } from 'src/app/util/dialog-manager/dialog.service';
 import { ErrorService } from 'src/app/util/error-manager/error.service';
 import { Throttle } from 'src/app/util/throttle';
@@ -38,7 +38,7 @@ export class SettingsApiKeysComponent implements OnInit {
   constructor(
     private readonly apikeysService: ApiKeysService,
     private readonly userService: UserService,
-    private readonly clipboard: Clipboard,
+    private readonly clipboard: ClipboardService,
     private readonly errorService: ErrorService,
     private readonly dialogService: DialogService,
     // Public because used in template
@@ -64,7 +64,7 @@ export class SettingsApiKeysComponent implements OnInit {
       this.paginator.firstPage();
     }
 
-    const clipboardResult = this.clipboard.copy(result.key);
+    const clipboardResult = await this.clipboard.copy(result.key);
     if (!clipboardResult) {
       return this.errorService.showFailure(
         Fail(FT.Internal, 'Failed to copy api key to clipboard'),
@@ -75,8 +75,8 @@ export class SettingsApiKeysComponent implements OnInit {
     this.errorService.success('Api key created and copied to clipboard');
   }
 
-  public copyKey(apikey: string) {
-    const result = this.clipboard.copy(apikey);
+  public async copyKey(apikey: string) {
+    const result = await this.clipboard.copy(apikey);
     if (!result) {
       return this.errorService.showFailure(
         Fail(FT.Internal, 'Failed to copy api key to clipboard'),

frontend/src/app/routes/settings/apikeys/settings-apikeys.module.ts

@@ -1,4 +1,3 @@
-import { ClipboardModule } from '@angular/cdk/clipboard';
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { ReactiveFormsModule } from '@angular/forms';
@@ -29,7 +28,6 @@ import { SettingsApiKeysRoutingModule } from './settings-apikeys.routing.module'
     MatPaginatorModule,
     MatInputModule,
     MomentModule,
-    ClipboardModule,
     ReactiveFormsModule,
     FabModule,
   ],

frontend/src/app/util/clipboard.service.ts

@@ -0,0 +1,16 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'any',
+})
+export class ClipboardService {
+  async copy(text: string): Promise<boolean> {
+    if (!navigator.clipboard) return false;
+    try {
+      const result = await navigator.clipboard.writeText(text);
+      return result === undefined;
+    } catch (err) {
+      return false;
+    }
+  }
+}