From e09f661cdf11b898a84dc3a9fe236223f8900eba Mon Sep 17 00:00:00 2001 From: Caramel Date: Tue, 6 Jun 2023 00:39:59 +0200 Subject: [PATCH] Fix clipboard on webkit --- .../copy-field/copy-field.component.ts | 10 +++++----- .../components/copy-field/copy-field.module.ts | 2 -- .../apikeys/settings-apikeys.component.ts | 12 ++++++------ .../settings/apikeys/settings-apikeys.module.ts | 2 -- frontend/src/app/util/clipboard.service.ts | 16 ++++++++++++++++ 5 files changed, 27 insertions(+), 15 deletions(-) create mode 100644 frontend/src/app/util/clipboard.service.ts diff --git a/frontend/src/app/components/copy-field/copy-field.component.ts b/frontend/src/app/components/copy-field/copy-field.component.ts index b7c1cc3..81062e9 100644 --- a/frontend/src/app/components/copy-field/copy-field.component.ts +++ b/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(); 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; diff --git a/frontend/src/app/components/copy-field/copy-field.module.ts b/frontend/src/app/components/copy-field/copy-field.module.ts index c8e441b..f31fc26 100644 --- a/frontend/src/app/components/copy-field/copy-field.module.ts +++ b/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], }) diff --git a/frontend/src/app/routes/settings/apikeys/settings-apikeys.component.ts b/frontend/src/app/routes/settings/apikeys/settings-apikeys.component.ts index 6cee42a..1459e4f 100644 --- a/frontend/src/app/routes/settings/apikeys/settings-apikeys.component.ts +++ b/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'), diff --git a/frontend/src/app/routes/settings/apikeys/settings-apikeys.module.ts b/frontend/src/app/routes/settings/apikeys/settings-apikeys.module.ts index f92a669..cfdb504 100644 --- a/frontend/src/app/routes/settings/apikeys/settings-apikeys.module.ts +++ b/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, ], diff --git a/frontend/src/app/util/clipboard.service.ts b/frontend/src/app/util/clipboard.service.ts new file mode 100644 index 0000000..cd16a85 --- /dev/null +++ b/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 { + if (!navigator.clipboard) return false; + try { + const result = await navigator.clipboard.writeText(text); + return result === undefined; + } catch (err) { + return false; + } + } +}