fix(console): signin with webauthn w.i.p

xmlking · Jun 20, 2024 · 49e07b5 · 49e07b5
1 parent 45930fb
commit 49e07b5
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 5 deletions.
diff --git a/apps/console/project.inlang/de.json b/apps/console/project.inlang/de.json
@@ -26,6 +26,7 @@
   "log": "Dieses Protokoll wurde von {fileName} aufgerufen!",
   "auth_labels_signin": "Anmelden",
   "auth_labels_signin_with_email": "Melden Sie sich mit E-Mail an",
+  "auth_labels_signin_with_webauthn": "With WebAuthn",
   "auth_labels_signin_problem": "Anmeldeproblem",
   "auth_labels_signup": "Registrieren",
   "auth_labels_signout": "Abmelden",

diff --git a/apps/console/project.inlang/en.json b/apps/console/project.inlang/en.json
@@ -25,7 +25,8 @@
   "messages_please_wait": "Please wait...",
   "log": "This log was called from {fileName}!",
   "auth_labels_signin": "Sign In",
-  "auth_labels_signin_with_email": "Sign In with Email",
+  "auth_labels_signin_with_email": "Sign In with",
+  "auth_labels_signin_with_webauthn": "Sign In with",
   "auth_labels_signin_problem": "Sign In Problem",
   "auth_labels_signup": "Sign Up",
   "auth_labels_signout": "Sign Out",

diff --git a/apps/console/src/routes/(auth)/signin/+page.svelte b/apps/console/src/routes/(auth)/signin/+page.svelte
@@ -8,10 +8,11 @@ import { getToastStore } from '@skeletonlabs/skeleton';
 import { DebugShell } from '@spectacular/skeleton/components';
 import { Icon } from '@spectacular/skeleton/components/icons';
 import { Logger } from '@spectacular/utils';
-import { AlertTriangle, Github, Loader, MoreHorizontal } from 'lucide-svelte';
+import { AlertTriangle, Github, Loader, Mail, MoreHorizontal } from 'lucide-svelte';
 import { fade } from 'svelte/transition';
 import SuperDebug, { superForm } from 'sveltekit-superforms';
 import { zodClient } from 'sveltekit-superforms/adapters';
+import { Fingerprint } from 'lucide-svelte';
 
 export let data;
 const log = new Logger('auth:signin');
@@ -254,14 +255,23 @@ $pwlForm.redirectTo = $page.url.searchParams.get('redirectTo') ?? $pwlForm.redir
       {/if}
     </label>
   </div>
-  <div class="mt-6">
-    <button type="submit" class="variant-filled-primary btn w-full">
+  <div class="mt-6 flex justify-between">
+    <button type="submit" class="variant-filled-primary btn">
+      {#if $pwlTimeout}
+        <MoreHorizontal class="animate-ping" />
+      {:else if $pwlDelayed}
+        <Loader class="animate-spin" />
+      {:else}
+        {m.auth_labels_signin_with_email()} <Mail class="pl-2" />
+      {/if}
+    </button>
+    <button type="submit" class="variant-filled-primary btn">
       {#if $pwlTimeout}
         <MoreHorizontal class="animate-ping" />
       {:else if $pwlDelayed}
         <Loader class="animate-spin" />
       {:else}
-        {m.auth_labels_signin_with_email()}
+        {m.auth_labels_signin_with_webauthn()} <Fingerprint class="pl-2"/>
       {/if}
     </button>
   </div>