aljaz/pubky-core
1
0
Fork 0
mirror of https://github.com/aljazceru/pubky-core.git synced 2025-12-31 04:44:37 +01:00
Code Issues Packages Projects Releases Wiki Activity

examples(authz): update svgs and add copied to clipboard note

Browse Source
This commit is contained in:
nazeh
2024-09-02 00:19:19 +03:00
parent 0fe5e1aa74
commit cf46ff849c
4 changed files with 48 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
examples/authz/3rd-party-app/index.html
View File

@@ -2,7 +2,7 @@
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<link rel="icon" type="image/svg+xml" href="/pubky.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + Lit</title>
<link rel="stylesheet" href="./src/index.css" />

1
examples/authz/3rd-party-app/public/pubky.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" version="1.2" viewBox="0 0 1511 1511" width="1511" height="1511"><style>.a{fill:#fff}</style><path d="m269 0h973c148.6 0 269 120.4 269 269v973c0 148.6-120.4 269-269 269h-973c-148.6 0-269-120.4-269-269v-973c0-148.6 120.4-269 269-269z"/><path fill-rule="evenodd" class="a" d="m630.1 1064.3l14.9-59.6c50.5-27.7 90.8-71.7 113.7-124.8-47.3 51.2-115.2 83.3-190.5 83.3-51.9 0-100.1-15.1-140.4-41.2l-39.8 142.3c0 0-199.3 0-200 0l162.4-619.3h210.5l-0.1 0.1q3.7-0.1 7.4-0.1c77.6 0 147.2 34 194.7 88l22-88h201.9l-46.9 180.8 183.7-180.8h248.8l-322.8 332.6 223.9 286.7h-290.8l-116.6-154.6-40.3 154.6c0 0-195 0-195.7 0z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 655 B

1
examples/authz/3rd-party-app/public/vite.svg
View File

@@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 1.5 KiB

53
examples/authz/3rd-party-app/src/pubky-auth-widget.js
View File

@@ -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 {
<div class="card">
<canvas id="qr" ${ref(this._setQr)}></canvas>
</div>
<a class="card url" href=${this.authUrl}>
<button class="card url" @click=${this._copyToClipboard}>
<div class="copied ${this.showCopied ? "show" : ""}">Copied to Clipboard</div>
<p>${this.authUrl}</p>
<svg width="14" height="16" viewBox="0 0 14 16" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="10" height="12" rx="2" fill="white"></rect><rect x="3" y="3" width="10" height="12" rx="2" fill="white" stroke="#3B3B3B"></rect></svg>
</a>
</button>
</div>
</div>
`
@@ -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
}
`
}
}