From 49e07b5a87aa913d1947b35878e7494775420461 Mon Sep 17 00:00:00 2001
From: Sumanth Chinthagunta <xmlking@gmail.com>
Date: Thu, 20 Jun 2024 00:09:20 -0700
Subject: [PATCH] fix(console): signin with webauthn w.i.p

---
 apps/console/project.inlang/de.json            |  1 +
 apps/console/project.inlang/en.json            |  3 ++-
 .../src/routes/(auth)/signin/+page.svelte      | 18 ++++++++++++++----
 3 files changed, 17 insertions(+), 5 deletions(-)

diff --git a/apps/console/project.inlang/de.json b/apps/console/project.inlang/de.json
index 6b1f6e6c..e4e08336 100644
--- 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
index f137c64b..d5024263 100644
--- 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
index 69c9540e..2119cb0a 100644
--- 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>