From b3e97a1a0c6abe194abd8ff472dfa81c8afd04a4 Mon Sep 17 00:00:00 2001
From: Alex <alex.tran1502@gmail.com>
Date: Tue, 27 Jun 2023 08:49:20 -0500
Subject: [PATCH] chore(web): Only show Copy button in HTTPS context (#2983)

---
 web/src/lib/components/forms/api-key-secret.svelte   | 12 ++++++++++--
 .../create-shared-link-modal.svelte                  | 11 ++++++++---
 2 files changed, 18 insertions(+), 5 deletions(-)

diff --git a/web/src/lib/components/forms/api-key-secret.svelte b/web/src/lib/components/forms/api-key-secret.svelte
index 1a801db35f..1786215754 100644
--- a/web/src/lib/components/forms/api-key-secret.svelte
+++ b/web/src/lib/components/forms/api-key-secret.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { createEventDispatcher } from 'svelte';
+	import { createEventDispatcher, onMount } from 'svelte';
 	import KeyVariant from 'svelte-material-icons/KeyVariant.svelte';
 	import { handleError } from '../../utils/handle-error';
 	import FullScreenModal from '../shared-components/full-screen-modal.svelte';
@@ -13,6 +13,12 @@
 
 	const dispatch = createEventDispatcher();
 	const handleDone = () => dispatch('done');
+	let canCopyImagesToClipboard = true;
+
+	onMount(async () => {
+		const module = await import('copy-image-clipboard');
+		canCopyImagesToClipboard = module.canCopyImagesToClipboard();
+	});
 	const handleCopy = async () => {
 		try {
 			await navigator.clipboard.writeText(secret);
@@ -55,7 +61,9 @@
 		</div>
 
 		<div class="flex w-full px-4 gap-4 mt-8">
-			<Button on:click={() => handleCopy()} fullwidth>Copy to Clipboard</Button>
+			{#if canCopyImagesToClipboard}
+				<Button on:click={() => handleCopy()} fullwidth>Copy to Clipboard</Button>
+			{/if}
 			<Button on:click={() => handleDone()} fullwidth>Done</Button>
 		</div>
 	</div>
diff --git a/web/src/lib/components/shared-components/create-share-link-modal/create-shared-link-modal.svelte b/web/src/lib/components/shared-components/create-share-link-modal/create-shared-link-modal.svelte
index 236e7e40f6..b15dc0e61d 100644
--- a/web/src/lib/components/shared-components/create-share-link-modal/create-shared-link-modal.svelte
+++ b/web/src/lib/components/shared-components/create-share-link-modal/create-shared-link-modal.svelte
@@ -31,7 +31,7 @@
 	let showExif = true;
 	let expirationTime = '';
 	let shouldChangeExpirationTime = false;
-
+	let canCopyImagesToClipboard = true;
 	const dispatch = createEventDispatcher();
 
 	const expiredDateOption: ImmichDropDownOption = {
@@ -39,7 +39,7 @@
 		options: ['Never', '30 minutes', '1 hour', '6 hours', '1 day', '7 days', '30 days']
 	};
 
-	onMount(() => {
+	onMount(async () => {
 		if (editingLink) {
 			if (editingLink.description) {
 				description = editingLink.description;
@@ -48,6 +48,9 @@
 			allowDownload = editingLink.allowDownload;
 			showExif = editingLink.showExif;
 		}
+
+		const module = await import('copy-image-clipboard');
+		canCopyImagesToClipboard = module.canCopyImagesToClipboard();
 	});
 
 	const handleCreateSharedLink = async () => {
@@ -247,7 +250,9 @@
 			<div class="flex w-full gap-4">
 				<input class="immich-form-input w-full" bind:value={sharedLink} disabled />
 
-				<Button on:click={() => handleCopy()}>Copy</Button>
+				{#if canCopyImagesToClipboard}
+					<Button on:click={() => handleCopy()}>Copy</Button>
+				{/if}
 			</div>
 		{/if}
 	</section>