@atlasauth/svelte 0.5.0 → 0.5.1

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @atlasauth/svelte changelog
 
+## 0.5.1
+- **Fixed: email-code sign-in on instances without password sign-in.** After the email step the sign-in form now
+  sends the code itself (`prepare_first_factor`), shows "We sent a code to …" with the code field and a
+  "Resend code" action, and completes with `attempt_first_factor { strategy: "email_code", code }`. A password field
+  is drawn only when the server offers `password`; when it is offered, password stays the default and the emailed
+  code is one click away. If the automatic send is refused (a 429, or the app can't send email), the step shows the
+  server's error and a button to try again.
+- The email-link step also has "Resend link". New catalog keys: `signIn.codeSentTo`, `signIn.linkSentTo`, `signIn.sending`, `signIn.resendCode`, `signIn.resendLink`, `signIn.passwordOption`.
+
 ## 0.5.0
 Requires `@atlasauth/js` 0.9.0.
 - **Server errors render in the app's language.** `<SignIn>` / `<SignUp>` show the catalog string

package/dist/components/AttemptFlow.svelte

@@ -1,7 +1,8 @@
 <script>import {
   localizedErrorMessage,
   nextStep,
-  offeredFirstFactors
+  offeredFirstFactors,
+  planFirstFactor
 } from "@atlasauth/js";
 import { useAtlas } from "../context";
 import { classFor } from "../appearance";
@@ -24,6 +25,7 @@ $: step = attempt ? nextStep(attempt) : { kind: "collect_identifier" };
 const strategyName = (s) => typeof s === "string" ? s : String(s?.strategy ?? "");
 $: offered = step.kind === "collect_first_factor" ? offeredFirstFactors(step.strategies.map(strategyName), emailDelivery) : [];
 $: emailOptions = onPrepare ? offered.filter((s) => s === "email_code" || s === "email_link") : [];
+$: plan = planFirstFactor(offered);
 $: showPassword = offered.includes("password") || emailOptions.length === 0;
 let prepared = null;
 $: sent = prepared && prepared.attemptId === (attempt?.id ?? null) ? prepared.strategy : null;
@@ -32,6 +34,17 @@ async function prepare(strategy) {
   const attemptId = attempt?.id ?? null;
   if (await onPrepare(strategy)) prepared = { strategy, attemptId };
 }
+let autoSentFor = null;
+$: if (step.kind === "collect_first_factor" && onPrepare && plan.autoSend && attempt?.id && autoSentFor !== attempt.id && sent === null) {
+  autoSentFor = attempt.id;
+  void prepare(plan.autoSend);
+}
+$: sending = step.kind === "collect_first_factor" && sent === null && !!onPrepare && !plan.password && emailOptions.length > 0;
+$: identifier = attempt?.identifier ?? "";
+function usePassword() {
+  prepared = null;
+  values = {};
+}
 $: fields = (() => {
   switch (step.kind) {
     case "collect_identifier":
@@ -40,6 +53,7 @@ $: fields = (() => {
       if (sent === "email_code") {
         return [{ name: "code", labelKey: "signIn.emailCodeLabel", type: "text" }];
       }
+      if (sending || sent === "email_link") return [];
       return showPassword ? [{ name: "password", labelKey: "signIn.passwordLabel", type: "password" }] : [];
     case "collect_second_factor":
       return [{ name: "code", labelKey: "mfa.codeLabel", type: "text" }];
@@ -65,7 +79,7 @@ $: message = (() => {
     case "restart":
       return t("error.generic");
     case "collect_first_factor":
-      return sent === "email_link" ? t("signIn.magicLinkSent") : null;
+      return null;
     case "collect_captcha":
     case "collect_identifier":
     case "collect_second_factor":
@@ -79,10 +93,14 @@ $: message = (() => {
 })();
 $: showSubmit = step.kind !== "done" && step.kind !== "await_oauth" && message === null && // Only emailed factors on offer: the option buttons are the way forward.
 (step.kind !== "collect_first_factor" || fields.length > 0);
-$: showEmailOptions = step.kind === "collect_first_factor" && message === null && sent === null && emailOptions.length > 0;
+$: showEmailOptions = step.kind === "collect_first_factor" && message === null && sent === null && emailOptions.length > 0 && !(sending && busy);
 $: showCaptcha = !!captcha && (step.kind === "collect_identifier" || step.kind === "collect_captcha");
 function handleSubmit(event) {
   event.preventDefault();
+  if (step.kind === "collect_first_factor") {
+    onSubmit(sent === "email_code" ? { code: values.code ?? "" } : { password: values.password ?? "" });
+    return;
+  }
   onSubmit(values);
 }
 </script>
@@ -103,6 +121,15 @@ function handleSubmit(event) {
              the widget resubmits the identifier on its own; the button retries. -->
         <p class="atlas-text">{t('captcha.prompt')}</p>
       {/if}
+      {#if step.kind === 'collect_first_factor' && sent === 'email_code'}
+        <p class="atlas-text" data-atlas-code-sent>{t('signIn.codeSentTo', { email: identifier })}</p>
+      {/if}
+      {#if step.kind === 'collect_first_factor' && sent === 'email_link'}
+        <p class="atlas-text" data-atlas-link-sent>{t('signIn.linkSentTo', { email: identifier })}</p>
+      {/if}
+      {#if sending}
+        <p class="atlas-text" aria-live="polite">{t('signIn.sending')}</p>
+      {/if}
       {#each fields as f (f.name)}
         <label class="atlas-field">
           <span>{t(f.labelKey)}</span>
@@ -118,6 +145,28 @@ function handleSubmit(event) {
           {/each}
         </label>
       {/each}
+      {#if step.kind === 'collect_first_factor' && sent !== null}
+        <button
+          class={cls('formButtonSecondary', 'atlas-button-secondary')}
+          type="button"
+          data-atlas-resend
+          disabled={busy}
+          on:click={() => void prepare(sent)}
+        >
+          {t(sent === 'email_code' ? 'signIn.resendCode' : 'signIn.resendLink')}
+        </button>
+        {#if plan.password}
+          <button
+            class={cls('formButtonSecondary', 'atlas-button-secondary')}
+            type="button"
+            data-strategy="password"
+            disabled={busy}
+            on:click={usePassword}
+          >
+            {t('signIn.passwordOption')}
+          </button>
+        {/if}
+      {/if}
       {#if showEmailOptions}
         {#each emailOptions as strategy (strategy)}
           <button

package/dist/i18n.js

@@ -25,6 +25,12 @@ export const EN_US = {
     'signIn.emailCodeOption': 'Email me a code',
     'signIn.emailLinkOption': 'Email me a sign-in link',
     'signIn.magicLinkSent': 'Check your email for a sign-in link.',
+    'signIn.codeSentTo': 'We sent a code to {email}. Enter it below.',
+    'signIn.linkSentTo': 'We sent a sign-in link to {email}. Open it on any device to continue.',
+    'signIn.sending': 'Sending…',
+    'signIn.resendCode': 'Resend code',
+    'signIn.resendLink': 'Resend link',
+    'signIn.passwordOption': 'Use your password instead',
     'signIn.checkOtherTab': 'You can close this tab — you are signed in where you started.',
     'signUp.title': 'Create your account',
     'signUp.submit': 'Continue',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlasauth/svelte",
-  "version": "0.5.0",
+  "version": "0.5.1",
   "type": "module",
   "svelte": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -23,9 +23,9 @@
   },
   "dependencies": {
     "@atlasauth/design": "0.2.0",
-    "@atlasauth/js": "0.9.0",
     "@atlasauth/authz": "0.1.1",
-    "@atlasauth/backend": "0.7.2"
+    "@atlasauth/backend": "0.7.3",
+    "@atlasauth/js": "0.10.0"
   },
   "peerDependencies": {
     "svelte": ">=4",