diff --git a/src/pages/profile/messaging.ts b/src/pages/profile/messaging.ts index a596754..683c886 100644 --- a/src/pages/profile/messaging.ts +++ b/src/pages/profile/messaging.ts @@ -203,6 +203,7 @@ class MessageHistoryComponent messages: Message[] = [] content: string = "" contact: Contact + private didCopied: boolean = false private editMode: boolean = false private contactHover: boolean = false private editedContactLabel: string = "" @@ -266,6 +267,54 @@ class MessageHistoryComponent ContactService.addContact(this.contact as Contact) } + private showToast(message: string, duration: number = 2000) { + // Create a div element for the toast + const toast = document.createElement("div") + toast.className = "toast" + toast.textContent = message + + // Append it to the body + document.body.appendChild(toast) + + // Force a reflow to trigger the transition + void toast.offsetWidth + + // Show the toast + toast.classList.add("show") + + // Remove the toast after the specified duration + setTimeout(() => { + toast.classList.remove("show") + + // Wait for the transition to finish before removing the element + toast.addEventListener("transitionend", () => { + document.body.removeChild(toast) + }) + }, duration) + } + + private copyToClipboard(text: string) { + navigator.clipboard + .writeText(text) + .then(() => { + this.didCopied = true + m.redraw() // Inform Mithril to redraw the component + + // Reset after some time (e.g., 2 seconds) + setTimeout(() => { + this.didCopied = false + m.redraw() + }, 2000) + + // Show the toast + // Assuming you have a toast library/method named `showToast` + this.showToast("Copied!") + }) + .catch(err => { + console.error("Failed to copy text: ", err) + }) + } + viewMessage(message: Message) { switch (message.type) { case "https://didcomm.org/basicmessage/2.0/message": @@ -475,6 +524,9 @@ class MessageHistoryComponent onmouseout: () => { this.contactHover = false }, + onclick: () => { + this.copyToClipboard(this.contact.did) + }, }, this.contactHover ? this.contact.did