From f98ee5f69b59d9d6104674969bb6968f403e8706 Mon Sep 17 00:00:00 2001 From: Marius Seufzer Date: Mon, 9 Oct 2023 11:25:46 +1300 Subject: [PATCH] add github links and update webauthn version --- Package.resolved | 4 +- Package.swift | 2 +- Public/images/github-mark.svg | 1 + Public/styles/tailwind.css | 163 +++++++++++++++++----------------- Resources/Utils/styles.css | 4 + Resources/Views/base.leaf | 14 ++- Resources/Views/index.leaf | 10 +-- 7 files changed, 106 insertions(+), 92 deletions(-) create mode 100644 Public/images/github-mark.svg diff --git a/Package.resolved b/Package.resolved index 86e0460..27b8beb 100644 --- a/Package.resolved +++ b/Package.resolved @@ -293,8 +293,8 @@ "kind" : "remoteSourceControl", "location" : "https://github.com/swift-server/webauthn-swift.git", "state" : { - "revision" : "a823806af73eeea9542e0f223bae8270b4f4e95e", - "version" : "0.0.2" + "revision" : "0e97beb4c868725707f0239cf9b664423f226ee9", + "version" : "1.0.0-alpha.1" } }, { diff --git a/Package.swift b/Package.swift index cc065d2..80d727e 100644 --- a/Package.swift +++ b/Package.swift @@ -12,7 +12,7 @@ let package = Package( .package(url: "https://github.com/vapor/fluent-sqlite-driver.git", from: "4.0.0"), .package(url: "https://github.com/m-barthelemy/vapor-queues-fluent-driver.git", from: "3.0.0-beta1"), .package(url: "https://github.com/vapor/leaf.git", from: "4.0.0"), - .package(url: "https://github.com/swift-server/webauthn-swift.git", from: "0.0.2") + .package(url: "https://github.com/swift-server/webauthn-swift.git", from: "1.0.0-alpha") ], targets: [ .target( diff --git a/Public/images/github-mark.svg b/Public/images/github-mark.svg new file mode 100644 index 0000000..37fa923 --- /dev/null +++ b/Public/images/github-mark.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/Public/styles/tailwind.css b/Public/styles/tailwind.css index 994291d..e9e773f 100644 --- a/Public/styles/tailwind.css +++ b/Public/styles/tailwind.css @@ -722,6 +722,40 @@ select { outline-color: #86198f; } +.btn-soft { + display: flex; + width: 100%; + align-items: center; + justify-content: center; + gap: 0.5rem; + border-radius: 0.5rem; + --tw-bg-opacity: 1; + background-color: rgb(241 245 249 / var(--tw-bg-opacity)); + padding-left: 1.5rem; + padding-right: 1.5rem; + padding-top: 0.75rem; + padding-bottom: 0.75rem; + font-weight: 500; + line-height: 1.5rem; + --tw-text-opacity: 1; + color: rgb(55 65 81 / var(--tw-text-opacity)); + --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); + --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); +} + +.btn-soft:hover { + --tw-bg-opacity: 1; + background-color: rgb(226 232 240 / var(--tw-bg-opacity)); +} + +.btn-soft:focus-visible { + outline-style: solid; + outline-width: 2px; + outline-offset: 2px; + outline-color: #e2e8f0; +} + .absolute { position: absolute; } @@ -743,6 +777,10 @@ select { margin-right: auto; } +.mb-3 { + margin-bottom: 0.75rem; +} + .mt-10 { margin-top: 2.5rem; } @@ -771,10 +809,26 @@ select { height: 5rem; } +.h-\[40px\] { + height: 40px; +} + .h-full { height: 100%; } +.h-\[30px\] { + height: 30px; +} + +.h-\[20px\] { + height: 20px; +} + +.h-\[25px\] { + height: 25px; +} + .min-h-full { min-height: 100%; } @@ -813,6 +867,10 @@ select { justify-content: center; } +.justify-around { + justify-content: space-around; +} + .gap-10 { gap: 2.5rem; } @@ -825,12 +883,20 @@ select { gap: 1.25rem; } +.gap-6 { + gap: 1.5rem; +} + .space-y-6 > :not([hidden]) ~ :not([hidden]) { --tw-space-y-reverse: 0; margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(1.5rem * var(--tw-space-y-reverse)); } +.rounded { + border-radius: 0.25rem; +} + .rounded-lg { border-radius: 0.5rem; } @@ -839,43 +905,11 @@ select { border-width: 0px; } -.border-2 { - border-width: 2px; -} - -.border-\[1px\] { - border-width: 1px; -} - -.border-\[0\.5px\] { - border-width: 0.5px; -} - -.border-gray-600 { - --tw-border-opacity: 1; - border-color: rgb(75 85 99 / var(--tw-border-opacity)); -} - .border-gray-400 { --tw-border-opacity: 1; border-color: rgb(156 163 175 / var(--tw-border-opacity)); } -.border-gray-900 { - --tw-border-opacity: 1; - border-color: rgb(17 24 39 / var(--tw-border-opacity)); -} - -.border-gray-500 { - --tw-border-opacity: 1; - border-color: rgb(107 114 128 / var(--tw-border-opacity)); -} - -.border-gray-300 { - --tw-border-opacity: 1; - border-color: rgb(209 213 219 / var(--tw-border-opacity)); -} - .bg-white { --tw-bg-opacity: 1; background-color: rgb(255 255 255 / var(--tw-bg-opacity)); @@ -895,6 +929,10 @@ select { --tw-gradient-to: #f0abfc var(--tw-gradient-to-position); } +.p-2 { + padding: 0.5rem; +} + .px-6 { padding-left: 1.5rem; padding-right: 1.5rem; @@ -914,10 +952,6 @@ select { text-align: center; } -.font-sans { - font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; -} - .text-2xl { font-size: 1.5rem; line-height: 2rem; @@ -928,11 +962,6 @@ select { line-height: 1.25rem; } -.text-lg { - font-size: 1.125rem; - line-height: 1.75rem; -} - .text-xl { font-size: 1.25rem; line-height: 1.75rem; @@ -946,10 +975,6 @@ select { font-weight: 500; } -.font-normal { - font-weight: 400; -} - .leading-6 { line-height: 1.5rem; } @@ -962,21 +987,6 @@ select { letter-spacing: -0.025em; } -.text-gray-500 { - --tw-text-opacity: 1; - color: rgb(107 114 128 / var(--tw-text-opacity)); -} - -.text-gray-900 { - --tw-text-opacity: 1; - color: rgb(17 24 39 / var(--tw-text-opacity)); -} - -.text-red-600 { - --tw-text-opacity: 1; - color: rgb(220 38 38 / var(--tw-text-opacity)); -} - .text-gray-600 { --tw-text-opacity: 1; color: rgb(75 85 99 / var(--tw-text-opacity)); @@ -987,12 +997,14 @@ select { color: rgb(31 41 55 / var(--tw-text-opacity)); } -.opacity-70 { - opacity: 0.7; +.text-gray-900 { + --tw-text-opacity: 1; + color: rgb(17 24 39 / var(--tw-text-opacity)); } -.opacity-20 { - opacity: 0.2; +.text-red-600 { + --tw-text-opacity: 1; + color: rgb(220 38 38 / var(--tw-text-opacity)); } .opacity-40 { @@ -1020,11 +1032,6 @@ select { --tw-ring-color: rgb(209 213 219 / var(--tw-ring-opacity)); } -.blur-\[150px\] { - --tw-blur: blur(150px); - filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); -} - .blur-3xl { --tw-blur: blur(64px); filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); @@ -1050,11 +1057,6 @@ select { --tw-ring-inset: inset; } -.focus\:ring-indigo-600:focus { - --tw-ring-opacity: 1; - --tw-ring-color: rgb(79 70 229 / var(--tw-ring-opacity)); -} - .focus\:ring-fuchsia-800:focus { --tw-ring-opacity: 1; --tw-ring-color: rgb(134 25 143 / var(--tw-ring-opacity)); @@ -1070,17 +1072,12 @@ select { width: 100%; } - .sm\:max-w-sm { - max-width: 24rem; - } - - .sm\:text-sm { - font-size: 0.875rem; - line-height: 1.25rem; + .sm\:max-w-md { + max-width: 28rem; } - .sm\:leading-6 { - line-height: 1.5rem; + .sm\:max-w-sm { + max-width: 24rem; } } diff --git a/Resources/Utils/styles.css b/Resources/Utils/styles.css index 45d8fb3..95e8ea1 100644 --- a/Resources/Utils/styles.css +++ b/Resources/Utils/styles.css @@ -6,4 +6,8 @@ .btn-primary { @apply flex gap-2 w-full items-center justify-center rounded-lg bg-fuchsia-700 px-6 py-3 font-semibold leading-6 text-white shadow-sm hover:bg-fuchsia-600 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-fuchsia-800; } + + .btn-soft { + @apply flex gap-2 w-full items-center justify-center rounded-lg bg-slate-100 px-6 py-3 font-medium leading-6 text-gray-700 shadow-sm hover:bg-slate-200 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-slate-200; + } } diff --git a/Resources/Views/base.leaf b/Resources/Views/base.leaf index ebe75ff..e25a217 100644 --- a/Resources/Views/base.leaf +++ b/Resources/Views/base.leaf @@ -20,7 +20,19 @@ - #import("body") +
+ #import("body") +
+ + GitHub logo +

Vapor Passkey Demo

+ + + GitHub logo +

Swift WebAuthn

+ +
+
diff --git a/Resources/Views/index.leaf b/Resources/Views/index.leaf index c03a82c..eef6bd5 100644 --- a/Resources/Views/index.leaf +++ b/Resources/Views/index.leaf @@ -1,12 +1,12 @@ #extend("base"): #export("body"): -
-
+
+
Vapor logo

Vapor Passkey Demo

-
+
@@ -21,7 +21,7 @@
-
+

@@ -29,7 +29,7 @@

-
+