brokenhandsio · 0xTim · Oct 11, 2023 · Oct 8, 2023 · Oct 8, 2023
diff --git 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
@@ -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
diff --git 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
@@ -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
@@ -20,7 +20,19 @@
   </head>
   <body class="h-full">
     <span class="absolute top-1/2 left-1/2 -translate-y-1/2 -translate-x-1/2 -z-10 opacity-40 w-2/3 h-1/2 blur-3xl bg-gradient-to-tr from-cyan-300 to-fuchsia-300"></span>
-    #import("body")
+    <div class="sm:mx-auto sm:w-full sm:max-w-md h-full flex flex-col justify-around px-6 py-12 lg:px-8 gap-6">
+      #import("body")
+      <div>
+        <a href="https://github.com/brokenhandsio/Vapor-PasskeyDemo" target="_blank" class="btn-soft mb-3">
+          <img src="/images/github-mark.svg" alt="GitHub logo" class="h-[25px]"/>
+          <p>Vapor Passkey Demo</p>
+        </a>
+        <a href="https://github.com/swift-server/webauthn-swift" target="_blank" class="btn-soft">
+          <img src="/images/github-mark.svg" alt="GitHub logo" class="h-[25px]"/>
+          <p>Swift WebAuthn</p>
+        </a>
+      </div>
+    </div>
   </body>
 </html>
 
diff --git a/Resources/Views/index.leaf b/Resources/Views/index.leaf
@@ -1,12 +1,12 @@
 #extend("base"):
   #export("body"):
-    <div class="flex min-h-full flex-col justify-center px-6 py-12 lg:px-8 gap-10">
-      <div class="sm:mx-auto sm:w-full sm:max-w-sm">
+    <div class="flex flex-col justify-center gap-10">
+      <div>
         <img class="mx-auto h-20 w-auto" src="/images/vapor-logo.svg" alt="Vapor logo">
         <h2 class="mt-10 text-center text-2xl font-bold leading-9 tracking-tight text-gray-900">Vapor Passkey Demo</h2>
       </div>
 
-      <div class="sm:mx-auto sm:w-full sm:max-w-sm">
+      <div>
         <form id="signInForm" class="space-y-6">
           <div>
             <div class="flex flex-col gap-2 items-center">
@@ -21,15 +21,15 @@
       </div>
 
 
-      <div class="flex flex-col justify-center gap-5 sm:mx-auto sm:w-full sm:max-w-sm">
+      <div class="flex flex-col justify-center gap-5">
         <hr class="border-gray-400" />
 
         <p class="text-center font-medium text-gray-600">
           Don't have an account yet?
         </p>
 
 
-        <div class="sm:mx-auto sm:w-full sm:max-w-sm">
+        <div>
           <form class="space-y-6" id="createAccountForm">
             <div>
               <label for="name" class="block font-medium leading-6 text-gray-600">Username</label>

diff --git a/images/demo.png b/images/demo.png