diff --git a/project.inlang/messages/de.json b/project.inlang/messages/de.json index 0d4e8e4..777ced7 100644 --- a/project.inlang/messages/de.json +++ b/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" diff --git a/project.inlang/messages/en.json b/project.inlang/messages/en.json index 0b3158c..c692033 100644 --- a/project.inlang/messages/en.json +++ b/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", diff --git a/src/lib/components/ui/form/form-root.svelte b/src/lib/components/ui/form/form-root.svelte index be1a6a7..d7dc1f0 100644 --- a/src/lib/components/ui/form/form-root.svelte +++ b/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; diff --git a/src/routes/(pages)/login/+page.svelte b/src/routes/(pages)/login/+page.svelte index 5e39d05..d696c3d 100644 --- a/src/routes/(pages)/login/+page.svelte +++ b/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; } }; @@ -34,23 +38,31 @@ {m["login.title"]()} - - {m["login.description_passphrase"]()} - + {#if isHidingSubmit} + + {m["login.description_passkey"]()} + + {:else} + + {m["login.description_passphrase"]()} + + {/if} - - - {m["login.action"]()} - - + {#if !isHidingSubmit} + + + {m["login.action"]()} + + + {/if} diff --git a/src/routes/(pages)/login/login-form.svelte b/src/routes/(pages)/login/login-form.svelte index 2e3aa08..036eacc 100644 --- a/src/routes/(pages)/login/login-form.svelte +++ b/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"]()} . + {/if}