Simplified login ux

project.inlang/messages/de.json

@@ -91,6 +91,7 @@
 		"usePasskey": "Passkey verwenden",
 		"usePassphrase": "Passphrase verwenden",
 		"title": "Anmelden",
+		"description_passkey": "Gib Deine E-Mail-Adresse ein und klicke/tippe um Passkey hinzuzufügen.",
 		"description_passphrase": "Gib Deine E-Mail-Adresse und Deinen Passphrase ein, um Dich anzumelden.",
 		"action": "Anmelden",
 		"error": "Anmeldung fehlgeschlagen. Bitte erneut versuchen"

project.inlang/messages/en.json

@@ -108,6 +108,7 @@
 		"usePassphrase": "use passphrase",
 		"orUse": "Or {button}",
 		"title": "Login",
+		"description_passkey": "Enter your email and click/tap to add passkey.",
 		"description_passphrase": "Enter your email and passphrase below to access your account.",
 		"action": "Login",
 		"error": "Login failed. Please retry",

src/lib/components/ui/form/form-root.svelte

@@ -3,7 +3,10 @@
   import type { Action } from "svelte/action";
   import type { HTMLAttributes } from "svelte/elements";
 
-  export type EventReporter = (params: { isSubmitting?: boolean }) => void;
+  export type EventReporter = (params: {
+    isSubmitting?: boolean;
+    isHidingSubmit?: boolean;
+  }) => void;
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   type EnhanceFunction = Action<HTMLFormElement, any>;
 

src/routes/(pages)/login/+page.svelte

@@ -9,14 +9,18 @@
   import { ROUTES } from "$lib/const/routes";
 
   const formId = "create-account-form";
+  let isHidingSubmit = $state(true);
   let isSubmitting = $state(false);
 
   const onEvent: EventReporter = (params) => {
     if (params.isSubmitting) {
       isSubmitting = true;
-    }
-    if (params.isSubmitting === false) {
+    } else if (params.isSubmitting === false) {
       isSubmitting = false;
+    } else if (params.isHidingSubmit === true) {
+      isHidingSubmit = true;
+    } else if (params.isHidingSubmit === false) {
+      isHidingSubmit = false;
     }
   };
 </script>
@@ -34,23 +38,31 @@
       <CenteredCard.Title>
         {m["login.title"]()}
       </CenteredCard.Title>
-      <CenteredCard.Description>
-        {m["login.description_passphrase"]()}
-      </CenteredCard.Description>
+      {#if isHidingSubmit}
+        <CenteredCard.Description>
+          {m["login.description_passkey"]()}
+        </CenteredCard.Description>
+      {:else}
+        <CenteredCard.Description>
+          {m["login.description_passphrase"]()}
+        </CenteredCard.Description>
+      {/if}
     </CenteredCard.Header>
     <CenteredCard.Main>
       <LoginForm {formId} {onEvent} />
     </CenteredCard.Main>
-    <CenteredCard.Action>
-      <Form.Button
-        size="lg"
-        class="w-full"
-        form={formId}
-        isLoading={isSubmitting}
-        disabled={isSubmitting}
-      >
-        {m["login.action"]()}
-      </Form.Button>
-    </CenteredCard.Action>
+    {#if !isHidingSubmit}
+      <CenteredCard.Action>
+        <Form.Button
+          size="lg"
+          class="w-full"
+          form={formId}
+          isLoading={isSubmitting}
+          disabled={isSubmitting}
+        >
+          {m["login.action"]()}
+        </Form.Button>
+      </CenteredCard.Action>
+    {/if}
   </CenteredCard.Root>
 </PageWithClaim>

src/routes/(pages)/login/login-form.svelte

@@ -68,6 +68,7 @@
         type: "passphrase",
         passphrase: "",
       };
+      onEvent({ isHidingSubmit: false });
     } else {
       $formData = {
         ...$formData,
@@ -78,6 +79,7 @@
         signatureBase64: "",
       };
       setProperPasskeyState();
+      onEvent({ isHidingSubmit: true });
     }
   };
 
@@ -246,7 +248,7 @@
         {m["login.or"]()}
         <Button variant="link" size="xs" onclick={onToggle} class="text-inherit">
           {m["login.usePassphrase"]()}
-        </Button>.
+        </Button>
       </Text>
     </div>
   {/if}