chore(apps): cleanup svelte dev app style

nextauthjs · May 19, 2024 · 4fc8fe8 · 4fc8fe8
1 parent 676165f
commit 4fc8fe8
Show file tree

Hide file tree

Showing 3 changed files with 90 additions and 61 deletions.
diff --git a/apps/dev/sveltekit/src/auth.ts b/apps/dev/sveltekit/src/auth.ts
@@ -37,7 +37,15 @@ export const { handle, signIn, signOut } = SvelteKitAuth({
     Google,
     Facebook,
     Discord,
-    Passkey,
+    Passkey({
+      formFields: {
+        email: {
+          label: "Username",
+          required: true,
+          autocomplete: "username webauthn",
+        },
+      },
+    }),
   ],
   theme: {
     logo: "https://authjs.dev/img/logo-sm.png",

diff --git a/apps/dev/sveltekit/src/routes/+page.svelte b/apps/dev/sveltekit/src/routes/+page.svelte
@@ -36,19 +36,33 @@
           <code>@auth/sveltekit/components</code> to run via form actions.
         </p>
         <div class="actions">
+          <SignIn provider="github">
+            <span slot="submitButton">
+              <img
+                src="https://authjs.dev/img/providers/github.svg"
+                alt="GitHub Logo"
+                width="20"
+                height="20"
+              />
+              GitHub
+            </span>
+          </SignIn>
+          <SignIn provider="discord">
+            <span slot="submitButton">
+              <img
+                src="https://authjs.dev/img/providers/discord.svg"
+                alt="Discord Logo"
+                width="20"
+                height="20"
+              />
+              Discord
+            </span>
+          </SignIn>
+          <div class="or-split">or</div>
           <SignIn provider="credentials">
             <span slot="submitButton">Sign In with Credentials</span>
             <div slot="credentials" style="width: 100%;">
               <div class="wrapper-form" style="width: 100%;">
-                <div class="input-wrapper">
-                  <label for="server-username">Username</label>
-                  <input
-                    placeholder="Anything"
-                    type="text"
-                    id="server-username"
-                    name="username"
-                  />
-                </div>
                 <div class="input-wrapper">
                   <label for="server-password">Password</label>
                   <input
@@ -62,26 +76,6 @@
               </div>
             </div>
           </SignIn>
-          <SignIn provider="github">
-            <span slot="submitButton">
-              <img
-                src="https://authjs.dev/img/providers/github.svg"
-                alt="GitHub Logo"
-                width="32"
-                height="32"
-              />
-            </span>
-          </SignIn>
-          <SignIn provider="discord">
-            <span slot="submitButton">
-              <img
-                src="https://authjs.dev/img/providers/discord.svg"
-                alt="Discord Logo"
-                width="32"
-                height="32"
-              />
-            </span>
-          </SignIn>
         </div>
       </div>
     </div>
@@ -95,16 +89,32 @@
           <code>@auth/sveltekit/client</code>
         </p>
         <div class="actions">
-          <div class="wrapper-form">
-            <div class="input-wrapper">
-              <label for="client-username">Username</label>
-              <input
-                placeholder="Anything"
-                type="text"
-                id="client-username"
-                name="username"
+          <div class="wrapper-form social-btn">
+            <button on:click={() => signIn("github")}>
+              <img
+                src="https://authjs.dev/img/providers/github.svg"
+                alt="GitHub Logo"
+                width="20"
+                height="20"
               />
-            </div>
+              GitHub
+            </button>
+          </div>
+          <div class="wrapper-form social-btn">
+            <button on:click={() => signIn("discord")}>
+              <img
+                src="https://authjs.dev/img/providers/discord.svg"
+                alt="Discord Logo"
+                width="20"
+                height="20"
+              />
+              Discord
+            </button>
+          </div>
+          <div class="or-split">
+            or
+          </div>
+          <div class="wrapper-form">
             <div class="input-wrapper">
               <label for="client-password">Password</label>
               <input
@@ -120,26 +130,6 @@
               Sign In with Credentials
             </button>
           </div>
-          <div class="wrapper-form">
-            <button on:click={() => signIn("github")}>
-              <img
-                src="https://authjs.dev/img/providers/github.svg"
-                alt="GitHub Logo"
-                width="32"
-                height="32"
-              />
-            </button>
-          </div>
-          <div class="wrapper-form">
-            <button on:click={() => signIn("discord")}>
-              <img
-                src="https://authjs.dev/img/providers/discord.svg"
-                alt="Discord Logo"
-                width="32"
-                height="32"
-              />
-            </button>
-          </div>
         </div>
       </div>
     </div>

diff --git a/apps/dev/sveltekit/src/style.css b/apps/dev/sveltekit/src/style.css
@@ -128,15 +128,31 @@ main {
       flex-wrap: wrap;
       gap: 1rem;
 
-      & > div:first-of-type {
+      &>div:last-of-type {
         flex-basis: 100%;
       }
 
-      & > form:first-of-type {
+      &>form:last-of-type {
         flex-basis: 100%;
       }
     }
 
+    .or-split {
+      text-align: center;
+      display: flex;
+      align-items: center;
+      justify-content: space-around;
+      width: 100%;
+
+      &::before,
+      &::after {
+        display: flex;
+        content: "";
+        width: 40%;
+        border-top: 1px solid #cccccc80;
+      }
+    }
+
     .wrapper-form,
     form {
       border-radius: 0.35rem;
@@ -160,6 +176,21 @@ main {
       }
     }
 
+    .signInButton button,
+    .social-btn button {
+      padding: 0.5rem;
+      display: flex;
+      gap: 1rem;
+      justify-content: center;
+      align-items: center;
+    }
+
+    .signInButton button span {
+      display: flex;
+      gap: 1rem;
+      align-items: center;
+    }
+
     &:has(button) {
       padding: 1.1rem;
     }