From 243b7c2716b6e3d8918ee806b173b9905d4a7e0c Mon Sep 17 00:00:00 2001 From: im-adithya Date: Wed, 4 Oct 2023 13:05:05 +0530 Subject: [PATCH] feat: ui for copying and redirecting --- public/css/application.css | 188 +++++++++++++++++-------------------- public/images/copy.svg | 4 - public/images/visible.svg | 4 - views/apps/create.html | 146 ++++++++++++---------------- views/layout.html | 2 +- 5 files changed, 145 insertions(+), 199 deletions(-) delete mode 100644 public/images/copy.svg delete mode 100644 public/images/visible.svg diff --git a/public/css/application.css b/public/css/application.css index 741712d7..63712e4d 100644 --- a/public/css/application.css +++ b/public/css/application.css @@ -726,6 +726,10 @@ select { pointer-events: none; } +.fixed { + position: fixed; +} + .absolute { position: absolute; } @@ -734,6 +738,10 @@ select { position: relative; } +.inset-0 { + inset: 0px; +} + .left-0 { left: 0px; } @@ -757,11 +765,6 @@ select { margin-bottom: 1rem; } -.my-6 { - margin-top: 1.5rem; - margin-bottom: 1.5rem; -} - .mb-1 { margin-bottom: 0.25rem; } @@ -802,18 +805,14 @@ select { margin-right: 0.5rem; } -.mr-3 { - margin-right: 0.75rem; -} - -.mr-4 { - margin-right: 1rem; -} - .mt-10 { margin-top: 2.5rem; } +.mt-2 { + margin-top: 0.5rem; +} + .mt-4 { margin-top: 1rem; } @@ -826,10 +825,6 @@ select { margin-top: 2rem; } -.mt-2 { - margin-top: 0.5rem; -} - .block { display: block; } @@ -858,10 +853,6 @@ select { height: 1rem; } -.h-6 { - height: 1.5rem; -} - .w-1\/5 { width: 20%; } @@ -874,10 +865,6 @@ select { width: 1rem; } -.w-6 { - width: 1.5rem; -} - .w-8 { width: 2rem; } @@ -894,10 +881,19 @@ select { width: 65px; } +.w-fit { + width: -moz-fit-content; + width: fit-content; +} + .w-full { width: 100%; } +.max-w-sm { + max-width: 24rem; +} + .table-fixed { table-layout: fixed; } @@ -978,6 +974,10 @@ select { border-width: 1px; } +.border-4 { + border-width: 4px; +} + .border-b { border-bottom-width: 1px; } @@ -986,10 +986,6 @@ select { border-top-width: 1px; } -.border-t-4 { - border-top-width: 4px; -} - .border-gray-200 { --tw-border-opacity: 1; border-color: rgb(229 231 235 / var(--tw-border-opacity)); @@ -1000,9 +996,14 @@ select { border-color: rgb(209 213 219 / var(--tw-border-opacity)); } -.border-green-500 { +.border-orange-200 { --tw-border-opacity: 1; - border-color: rgb(34 197 94 / var(--tw-border-opacity)); + border-color: rgb(254 215 170 / var(--tw-border-opacity)); +} + +.border-purple-600 { + --tw-border-opacity: 1; + border-color: rgb(147 51 234 / var(--tw-border-opacity)); } .border-red-400 { @@ -1025,9 +1026,14 @@ select { background-color: rgb(249 250 251 / var(--tw-bg-opacity)); } -.bg-green-100 { +.bg-gray-900 { + --tw-bg-opacity: 1; + background-color: rgb(17 24 39 / var(--tw-bg-opacity)); +} + +.bg-green-600 { --tw-bg-opacity: 1; - background-color: rgb(220 252 231 / var(--tw-bg-opacity)); + background-color: rgb(22 163 74 / var(--tw-bg-opacity)); } .bg-orange-50 { @@ -1045,8 +1051,8 @@ select { background-color: rgb(255 255 255 / var(--tw-bg-opacity)); } -.fill-current { - fill: currentColor; +.bg-origin-border { + background-origin: border-box; } .p-2 { @@ -1061,8 +1067,8 @@ select { padding: 0.75rem; } -.p-6 { - padding: 1.5rem; +.p-4 { + padding: 1rem; } .px-1 { @@ -1075,6 +1081,11 @@ select { padding-right: 2.5rem; } +.px-3 { + padding-left: 0.75rem; + padding-right: 0.75rem; +} + .px-4 { padding-left: 1rem; padding-right: 1rem; @@ -1090,11 +1101,6 @@ select { padding-right: 1.5rem; } -.py-1 { - padding-top: 0.25rem; - padding-bottom: 0.25rem; -} - .py-16 { padding-top: 4rem; padding-bottom: 4rem; @@ -1205,6 +1211,10 @@ select { font-weight: 500; } +.font-semibold { + font-weight: 600; +} + .uppercase { text-transform: uppercase; } @@ -1248,11 +1258,6 @@ select { color: rgb(34 197 94 / var(--tw-text-opacity)); } -.text-green-700 { - --tw-text-opacity: 1; - color: rgb(21 128 61 / var(--tw-text-opacity)); -} - .text-orange-700 { --tw-text-opacity: 1; color: rgb(194 65 12 / var(--tw-text-opacity)); @@ -1291,12 +1296,6 @@ select { box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } -.shadow-md { - --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); - --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); - box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); -} - .transition { transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; @@ -1315,11 +1314,6 @@ select { transition-duration: 150ms; } -.hover\:bg-gray-100:hover { - --tw-bg-opacity: 1; - background-color: rgb(243 244 246 / var(--tw-bg-opacity)); -} - .hover\:bg-gray-50:hover { --tw-bg-opacity: 1; background-color: rgb(249 250 251 / var(--tw-bg-opacity)); @@ -1340,11 +1334,6 @@ select { color: rgb(75 85 99 / var(--tw-text-opacity)); } -.focus\:border-purple-500:focus { - --tw-border-opacity: 1; - border-color: rgb(168 85 247 / var(--tw-border-opacity)); -} - .focus\:outline-none:focus { outline: 2px solid transparent; outline-offset: 2px; @@ -1372,6 +1361,11 @@ select { box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); } +.focus-visible\:ring-primary:focus-visible { + --tw-ring-opacity: 1; + --tw-ring-color: rgb(248 196 85 / var(--tw-ring-opacity)); +} + .focus-visible\:ring-offset-2:focus-visible { --tw-ring-offset-width: 2px; } @@ -1386,11 +1380,6 @@ select { border-color: rgb(107 114 128 / var(--tw-border-opacity)); } - .dark\:border-gray-600 { - --tw-border-opacity: 1; - border-color: rgb(75 85 99 / var(--tw-border-opacity)); - } - .dark\:border-gray-700 { --tw-border-opacity: 1; border-color: rgb(55 65 81 / var(--tw-border-opacity)); @@ -1405,26 +1394,11 @@ select { border-color: rgb(255 255 255 / 0.1); } - .dark\:border-gray-800 { - --tw-border-opacity: 1; - border-color: rgb(31 41 55 / var(--tw-border-opacity)); - } - .dark\:bg-gray-600 { --tw-bg-opacity: 1; background-color: rgb(75 85 99 / var(--tw-bg-opacity)); } - .dark\:bg-gray-700 { - --tw-bg-opacity: 1; - background-color: rgb(55 65 81 / var(--tw-bg-opacity)); - } - - .dark\:bg-green-900 { - --tw-bg-opacity: 1; - background-color: rgb(20 83 45 / var(--tw-bg-opacity)); - } - .dark\:bg-orange-900 { --tw-bg-opacity: 1; background-color: rgb(124 45 18 / var(--tw-bg-opacity)); @@ -1465,11 +1439,6 @@ select { color: rgb(156 163 175 / var(--tw-text-opacity)); } - .dark\:text-green-400 { - --tw-text-opacity: 1; - color: rgb(74 222 128 / var(--tw-text-opacity)); - } - .dark\:text-neutral-200 { --tw-text-opacity: 1; color: rgb(229 229 229 / var(--tw-text-opacity)); @@ -1500,11 +1469,6 @@ select { color: rgb(255 255 255 / var(--tw-text-opacity)); } - .dark\:text-gray-200 { - --tw-text-opacity: 1; - color: rgb(229 231 235 / var(--tw-text-opacity)); - } - .dark\:placeholder-gray-400::-moz-placeholder { --tw-placeholder-opacity: 1; color: rgb(156 163 175 / var(--tw-placeholder-opacity)); @@ -1537,16 +1501,6 @@ select { color: rgb(209 213 219 / var(--tw-text-opacity)); } - .dark\:focus\:border-purple-500:focus { - --tw-border-opacity: 1; - border-color: rgb(168 85 247 / var(--tw-border-opacity)); - } - - .dark\:focus\:ring-purple-500:focus { - --tw-ring-opacity: 1; - --tw-ring-color: rgb(168 85 247 / var(--tw-ring-opacity)); - } - .dark\:focus\:ring-purple-600:focus { --tw-ring-opacity: 1; --tw-ring-color: rgb(147 51 234 / var(--tw-ring-opacity)); @@ -1621,17 +1575,45 @@ select { } @media (min-width: 1024px) { + .lg\:mb-6 { + margin-bottom: 1.5rem; + } + .lg\:w-8\/12 { width: 66.666667%; } + .lg\:p-6 { + padding: 1.5rem; + } + .lg\:px-12 { padding-left: 3rem; padding-right: 3rem; } + .lg\:px-6 { + padding-left: 1.5rem; + padding-right: 1.5rem; + } + + .lg\:px-8 { + padding-left: 2rem; + padding-right: 2rem; + } + .lg\:py-12 { padding-top: 3rem; padding-bottom: 3rem; } + + .lg\:py-6 { + padding-top: 1.5rem; + padding-bottom: 1.5rem; + } + + .lg\:text-xl { + font-size: 1.25rem; + line-height: 1.75rem; + } } \ No newline at end of file diff --git a/public/images/copy.svg b/public/images/copy.svg deleted file mode 100644 index 473a627e..00000000 --- a/public/images/copy.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/public/images/visible.svg b/public/images/visible.svg deleted file mode 100644 index 3d9ca936..00000000 --- a/public/images/visible.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/views/apps/create.html b/views/apps/create.html index 6dc86ffe..9c40d7ca 100644 --- a/views/apps/create.html +++ b/views/apps/create.html @@ -1,90 +1,61 @@ {{define "body"}}
-

{{.Name}}

+

Pair with app to finalize

- +
Open, paste or scan your connection’s pairing secret in the desired app to finalise the connection.
- {{if not (eq .PairingSecret "")}} -

Use the pairing secret to connect to your app.

+ -

- ⚠️ This pairing secret is only shown once. Don’t show it to anyone. Use it - only with apps you trust. -

+ {{if not (eq .PairingSecret "")}} + -

- - + {{end}} -

@@ -95,8 +66,8 @@

{{.Name}}

// dispatch a success event which can be listened to by the opener or by the app that embeddes the webview // this gives thoes apps the chance to know the user has enabled the connection - const event = new CustomEvent("nwc:success", { detail: {} }); - window.dispatchEvent(event); + const nwcEvent = new CustomEvent("nwc:success", { detail: {} }); + window.dispatchEvent(nwcEvent); // notify the opener of the successful connection if (window.opener) { @@ -115,24 +86,23 @@

{{.Name}}

{ fill: window.matchMedia('(prefers-color-scheme: dark)').matches ? "#FFF" : "#000", text: "{{.PairingUri}}", - size: 384, // in pixels + size: 250, // in pixels }, //window.matchMedia('(prefers-color-scheme: dark)').matches ? "#FFF" : document.getElementById("connect-qrcode") ); document - .getElementById("copy-link") + .getElementById("copy-button") .addEventListener("click", async (event) => { event.preventDefault(); + const copyButton = document.getElementById("copy-button") const copyText = document.getElementById("copy-text"); - const copyIcon = document.getElementById("copy-icon-rect"); - const value = document.getElementById("pairing-input").value; if (navigator.clipboard && window.isSecureContext) { - navigator.clipboard.writeText(value); + navigator.clipboard.writeText("{{.PairingUri}}"); } else { const textArea = document.createElement("textarea"); - textArea.value = value; + textArea.value = "{{.PairingUri}}"; textArea.style.position = "absolute"; textArea.style.opacity = 0; document.body.appendChild(textArea); @@ -140,11 +110,13 @@

{{.Name}}

await document.execCommand("copy"); textArea.remove(); } - copyIcon.style.fill = "currentColor"; - copyText.textContent = "Copied" + + const classesToToggle = ["hover:bg-gray-50", "bg-green-600", "bg-white", "text-white", "text-purple-700"]; + classesToToggle.forEach(className => copyButton.classList.toggle(className)); + copyText.textContent = "Copied to clipboard!" setTimeout(() => { - copyIcon.style.fill = "transparent" - copyText.textContent = "Copy Secret" + classesToToggle.forEach(className => copyButton.classList.toggle(className)); + copyText.textContent = "Copy pairing secret" }, 2000); }); }); diff --git a/views/layout.html b/views/layout.html index ecbd8fde..b6e60545 100644 --- a/views/layout.html +++ b/views/layout.html @@ -12,7 +12,7 @@