From 8e7e0414a6adea2db236ab72cf1565cfec9f6900 Mon Sep 17 00:00:00 2001
From: cupcakearmy <hi@nicco.io>
Date: Tue, 1 Mar 2022 01:16:31 +0100
Subject: [PATCH] add copy to clipboard note

---
 frontend/locales/de.json             |  3 ++-
 frontend/locales/en.json             |  3 ++-
 frontend/locales/es.json             |  3 ++-
 frontend/locales/fr.json             |  3 ++-
 frontend/locales/it.json             |  3 ++-
 frontend/src/lib/ui/TextInput.svelte | 25 +++++++++++++++++++++++++
 6 files changed, 35 insertions(+), 5 deletions(-)

diff --git a/frontend/locales/de.json b/frontend/locales/de.json
index 311ca16..a7c6bb0 100644
--- a/frontend/locales/de.json
+++ b/frontend/locales/de.json
@@ -20,7 +20,8 @@
 		"errors": {
 			"note_to_big": "Notiz konnte nicht erstellt werden. Notiz ist zu groß",
 			"note_error": "konnte keine Notiz erstellen. Bitte versuchen Sie es erneut."
-		}
+		},
+		"copied_to_clipboard": "in die Zwischenablage kopiert 🔗"
 	},
 	"show": {
 		"errors": {
diff --git a/frontend/locales/en.json b/frontend/locales/en.json
index 47c31df..60741e6 100644
--- a/frontend/locales/en.json
+++ b/frontend/locales/en.json
@@ -20,7 +20,8 @@
 		"errors": {
 			"note_to_big": "could not create note. note is to big",
 			"note_error": "could not create note. please try again."
-		}
+		},
+		"copied_to_clipboard": "copied to clipboard 🔗"
 	},
 	"show": {
 		"errors": {
diff --git a/frontend/locales/es.json b/frontend/locales/es.json
index 005cbc2..f2cf547 100644
--- a/frontend/locales/es.json
+++ b/frontend/locales/es.json
@@ -20,7 +20,8 @@
 		"errors": {
 			"note_to_big": "no se pudo crear la nota. la nota es demasiado grande",
 			"note_error": "No se ha podido crear la nota. Por favor, inténtelo de nuevo."
-		}
+		},
+		"copied_to_clipboard": "copiado al portapapeles 🔗"
 	},
 	"show": {
 		"errors": {
diff --git a/frontend/locales/fr.json b/frontend/locales/fr.json
index 9e6d933..48f6d5d 100644
--- a/frontend/locales/fr.json
+++ b/frontend/locales/fr.json
@@ -20,7 +20,8 @@
 		"errors": {
 			"note_to_big": "Impossible de créer une note. La note est trop grande",
 			"note_error": "n'a pas pu créer de note. Veuillez réessayer."
-		}
+		},
+		"copied_to_clipboard": "copié dans le presse-papiers 🔗"
 	},
 	"show": {
 		"errors": {
diff --git a/frontend/locales/it.json b/frontend/locales/it.json
index a46da1a..100355e 100644
--- a/frontend/locales/it.json
+++ b/frontend/locales/it.json
@@ -20,7 +20,8 @@
 		"errors": {
 			"note_to_big": "impossibile creare una nota. la nota è troppo grande",
 			"note_error": "Impossibile creare la nota. Riprova."
-		}
+		},
+		"copied_to_clipboard": "copiato negli appunti 🔗"
 	},
 	"show": {
 		"errors": {
diff --git a/frontend/src/lib/ui/TextInput.svelte b/frontend/src/lib/ui/TextInput.svelte
index 4360f37..8f5fc7d 100644
--- a/frontend/src/lib/ui/TextInput.svelte
+++ b/frontend/src/lib/ui/TextInput.svelte
@@ -1,6 +1,8 @@
 <script lang="ts">
 	import { getRandomBytes, Hex } from '$lib/crypto'
 
+	import { fade } from 'svelte/transition'
+	import { t } from 'svelte-intl-precompile'
 	import copyToClipboard from 'copy-to-clipboard'
 
 	import Icon from './Icon.svelte'
@@ -14,6 +16,8 @@
 	const initialType = $$restProps.type
 	const isPassword = initialType === 'password'
 	let hidden = true
+	let notification: string | null = null
+	let notificationTimeout: NodeJS.Timeout | null = null
 
 	$: if (isPassword) {
 		value
@@ -25,10 +29,21 @@
 	}
 	function copyFN() {
 		copyToClipboard(value)
+		notify($t('home.copied_to_clipboard'))
 	}
 	function randomFN() {
 		value = Hex.encode(getRandomBytes(20))
 	}
+
+	function notify(msg: string, delay: number = 2000) {
+		if (notificationTimeout) {
+			clearTimeout(notificationTimeout)
+		}
+		notificationTimeout = setTimeout(() => {
+			notification = null
+		}, delay)
+		notification = msg
+	}
 </script>
 
 <label>
@@ -47,6 +62,9 @@
 			<Icon class="icon" icon="copy-sharp" on:click={copyFN} />
 		{/if}
 	</div>
+	{#if notification}
+		<div class="notification" transition:fade><small>{notification}</small></div>
+	{/if}
 </label>
 
 <style>
@@ -88,4 +106,11 @@
 	.icons > :global(.icon:hover) {
 		border-color: var(--ui-clr-primary);
 	}
+
+	.notification {
+		text-align: right;
+		position: absolute;
+		right: 0;
+		bottom: -1.5em;
+	}
 </style>