@atlasauth/svelte 0.6.0 → 0.6.1

package/CHANGELOG.md

@@ -1,5 +1,8 @@
 # @atlasauth/svelte changelog
 
+## 0.6.1
+- **`<UserProfile>` can verify an address.** Each unverified email address now has a **Verify** button: it emails a code (`POST /v1/client/me/email_addresses/{id}/prepare_verification`) and shows a field to enter it (`attempt_verification`), then reloads the user. This includes the sign-up address on an app that does not require email verification, which now reads unverified until it is proven. New catalog keys: `userProfile.verify`, `userProfile.verifyConfirm`, `userProfile.verifyCodePlaceholder`, `userProfile.verifySendFailed`, `userProfile.verifyCodeRejected`.
+
 ## 0.6.0
 - **New `initAtlas({ onSignOut })` and `client.onSignOut(listener)`**: `onSignOut({ reason, sessionId })` fired once each time a signed-in user becomes signed out, on every
   path: `reason` is `user` (this tab), `other_tab`, `session_expired`, `revoked` (the session was ended elsewhere,

package/dist/components/UserProfile.svelte

@@ -2,11 +2,50 @@
 import { getUser } from "../accessors";
 import { classFor } from "../appearance";
 import { translate } from "../i18n";
+import { FapiClient } from "../fapi";
+import { ATLAS_SVELTE_SDK } from "../version";
 const atlas = useAtlas();
 const user = getUser();
 const t = (key) => translate(atlas.catalog, key);
+const client = new FapiClient({
+  publishableKey: atlas.publishableKey,
+  baseUrl: atlas.frontendApi,
+  locale: atlas.locale,
+  sdk: ATLAS_SVELTE_SDK
+});
+let verifying = null;
+let code = "";
+let busy = false;
+let verifyError = null;
+async function sendCode(id) {
+  verifyError = null;
+  busy = true;
+  const res = await client.post(`/v1/client/me/email_addresses/${id}/prepare_verification`);
+  busy = false;
+  if (!res.ok) {
+    verifyError = t("userProfile.verifySendFailed");
+    return;
+  }
+  code = "";
+  verifying = id;
+}
+async function confirmCode() {
+  if (!verifying) return;
+  verifyError = null;
+  busy = true;
+  const res = await client.post(`/v1/client/me/email_addresses/${verifying}/attempt_verification`, { code });
+  busy = false;
+  if (!res.ok) {
+    verifyError = t("userProfile.verifyCodeRejected");
+    return;
+  }
+  verifying = null;
+  await atlas.reload();
+}
 $: current = $user.user;
 $: cardClass = classFor("card", atlas.appearance, "atlas-card");
+$: inputClass = classFor("formFieldInput", atlas.appearance, "atlas-account-input");
+$: buttonClass = classFor("formButtonSecondary", atlas.appearance, "atlas-button-secondary");
 </script>
 
 {#if current}
@@ -21,10 +60,31 @@ $: cardClass = classFor("card", atlas.appearance, "atlas-card");
             {email.email_address}
             {#if !email.verified}
               <em> — {t('userProfile.unverified')}</em>
+              {#if verifying === email.id}
+                <span data-atlas="email-verify">
+                  <input
+                    class={inputClass}
+                    inputmode="numeric"
+                    autocomplete="one-time-code"
+                    placeholder={t('userProfile.verifyCodePlaceholder')}
+                    bind:value={code}
+                  />
+                  <button class={buttonClass} type="button" disabled={busy} on:click={() => void confirmCode()}>
+                    {t('userProfile.verifyConfirm')}
+                  </button>
+                </span>
+              {:else}
+                <button class={buttonClass} type="button" disabled={busy} on:click={() => void sendCode(email.id)}>
+                  {t('userProfile.verify')}
+                </button>
+              {/if}
             {/if}
           </li>
         {/each}
       </ul>
+      {#if verifyError}
+        <p role="alert">{verifyError}</p>
+      {/if}
     </section>
 
     <section>

package/dist/i18n.js

@@ -79,6 +79,11 @@ export const EN_US = {
     'userProfile.addEmail': 'Add an email address',
     'userProfile.makePrimary': 'Make primary',
     'userProfile.unverified': 'Unverified',
+    'userProfile.verify': 'Verify',
+    'userProfile.verifyConfirm': 'Confirm',
+    'userProfile.verifyCodePlaceholder': 'Code from the email',
+    'userProfile.verifySendFailed': 'We could not send a code right now. Try again in a minute.',
+    'userProfile.verifyCodeRejected': 'That code was not accepted.',
     'userProfile.revokeDevice': 'Sign out',
     'userProfile.deleteAccount': 'Delete account',
     'organization.switcher': 'Switch organization',

package/dist/version.d.ts

@@ -1,4 +1,4 @@
 import type { AtlasSdkInfo } from '@atlasauth/js';
 /** This package's version, sent as `X-Atlas-SDK` (kept in step with package.json by a test). */
-export declare const ATLAS_SVELTE_VERSION = "0.6.0";
+export declare const ATLAS_SVELTE_VERSION = "0.6.1";
 export declare const ATLAS_SVELTE_SDK: AtlasSdkInfo;

package/dist/version.js

@@ -1,3 +1,3 @@
 /** This package's version, sent as `X-Atlas-SDK` (kept in step with package.json by a test). */
-export const ATLAS_SVELTE_VERSION = '0.6.0';
+export const ATLAS_SVELTE_VERSION = '0.6.1';
 export const ATLAS_SVELTE_SDK = { name: '@atlasauth/svelte', version: ATLAS_SVELTE_VERSION };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlasauth/svelte",
-  "version": "0.6.0",
+  "version": "0.6.1",
   "type": "module",
   "svelte": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -25,7 +25,7 @@
     "@atlasauth/design": "0.2.0",
     "@atlasauth/js": "0.12.0",
     "@atlasauth/authz": "0.1.1",
-    "@atlasauth/backend": "0.8.0"
+    "@atlasauth/backend": "0.9.0"
   },
   "peerDependencies": {
     "svelte": ">=4",