From cf46ff849c42b2e7e92dcbccb4509569d9ca3d1a Mon Sep 17 00:00:00 2001 From: nazeh Date: Mon, 2 Sep 2024 00:19:19 +0300 Subject: [PATCH] examples(authz): update svgs and add copied to clipboard note --- examples/authz/3rd-party-app/index.html | 2 +- examples/authz/3rd-party-app/public/pubky.svg | 1 + examples/authz/3rd-party-app/public/vite.svg | 1 - .../3rd-party-app/src/pubky-auth-widget.js | 53 ++++++++++++++++--- 4 files changed, 48 insertions(+), 9 deletions(-) create mode 100644 examples/authz/3rd-party-app/public/pubky.svg delete mode 100644 examples/authz/3rd-party-app/public/vite.svg diff --git a/examples/authz/3rd-party-app/index.html b/examples/authz/3rd-party-app/index.html index ef83865..3eafca8 100644 --- a/examples/authz/3rd-party-app/index.html +++ b/examples/authz/3rd-party-app/index.html @@ -2,7 +2,7 @@ - + Vite + Lit diff --git a/examples/authz/3rd-party-app/public/pubky.svg b/examples/authz/3rd-party-app/public/pubky.svg new file mode 100644 index 0000000..6802915 --- /dev/null +++ b/examples/authz/3rd-party-app/public/pubky.svg @@ -0,0 +1 @@ + diff --git a/examples/authz/3rd-party-app/public/vite.svg b/examples/authz/3rd-party-app/public/vite.svg deleted file mode 100644 index ee9fada..0000000 --- a/examples/authz/3rd-party-app/public/vite.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/examples/authz/3rd-party-app/src/pubky-auth-widget.js b/examples/authz/3rd-party-app/src/pubky-auth-widget.js index 4535840..49ebe4c 100644 --- a/examples/authz/3rd-party-app/src/pubky-auth-widget.js +++ b/examples/authz/3rd-party-app/src/pubky-auth-widget.js @@ -27,6 +27,10 @@ export class PubkyAuthWidget extends LitElement { * Widget's state (open or closed) */ open: { type: Boolean }, + /** + * Show "copied to clipboard" note + */ + showCopied: { type: Boolean }, } } @@ -58,10 +62,10 @@ export class PubkyAuthWidget extends LitElement { ) : DEFAULT_HTTP_RELAY - callbackUrl.pathname = callbackUrl.pathname + "/" + this.channelId - this.authUrl = `pubkyauth://${callbackUrl.hostname + callbackUrl.pathname}?capabilities=${this.caps}&secret=${base64url(this.secret)}`; - console.log({ url: this.authUrl }); + this.authUrl = `pubkyauth:///?relay=${callbackUrl.toString()}&capabilities=${this.caps}&secret=${base64url(this.secret)}`; + + callbackUrl.pathname = callbackUrl.pathname + "/" + this.channelId fetch(callbackUrl) .catch(error => console.error("PubkyAuthWidget: Failed to subscribe to http relay channel", error)) @@ -86,10 +90,11 @@ export class PubkyAuthWidget extends LitElement {
- + ` @@ -130,6 +135,16 @@ export class PubkyAuthWidget extends LitElement { } } + async _copyToClipboard() { + try { + await navigator.clipboard.writeText(this.authUrl); + this.showCopied = true; + setTimeout(() => { this.showCopied = false }, 1000) + } catch (error) { + console.error('Failed to copy text: ', error); + } + } + static get styles() { return css` * { @@ -148,6 +163,7 @@ export class PubkyAuthWidget extends LitElement { } button { + padding: 0; background: none; border: none; color: inherit; @@ -236,7 +252,7 @@ export class PubkyAuthWidget extends LitElement { line-height: 1rem; text-align: center; color: #fff; - opacity: .3; + opacity: .5; /* Fix flash wrap in open animation */ text-wrap: nowrap; @@ -248,6 +264,7 @@ export class PubkyAuthWidget extends LitElement { } .card { + position: relative; background: #3b3b3b; border-radius: 5px; padding: 1rem; @@ -268,7 +285,7 @@ export class PubkyAuthWidget extends LitElement { align-items: center; line-height: 1!important; - width: 90%; + width: 93%; overflow: hidden; text-overflow: ellipsis; text-wrap: nowrap; @@ -280,6 +297,28 @@ export class PubkyAuthWidget extends LitElement { flex: 1 1; margin-bottom: 1rem; } + + .copied { + will-change: opacity; + transition-property: opacity; + transition-duration: 80ms; + transition-timing-function: ease-in; + + opacity: 0; + + position: absolute; + right: 0; + top: -1.6rem; + font-size: 0.9em; + background: rgb(43 43 43 / 98%); + padding: .5rem; + border-radius: .3rem; + color: #ddd; + } + + .copied.show { + opacity:1 + } ` } }