@structured-id/ui-core 1.2.0 → 2.0.0

package/src/profile/components/SidRegistrationForm.test.ts

@@ -10,7 +10,9 @@ const quasarStubs = {
   "q-icon": { template: "<span />" },
   "q-chip": { template: "<span />" },
   "q-form": {
-    template: "<form @submit.prevent=\"$emit('submit')\"><slot /></form>",
+    // QForm emits submit with the DOM event; the form's .prevent needs it.
+    template:
+      "<form @submit.prevent=\"$emit('submit', $event)\"><slot /></form>",
     emits: ["submit"],
   },
   "q-input": {
@@ -68,6 +70,61 @@ describe("SidRegistrationForm", () => {
     expect(inputs.length).toBeGreaterThanOrEqual(4);
   });
 
+  // While the installation has no administrator the claim token is the only
+  // admission: the form asks for it and never for an invite code.
+  it("asks for the claim token instead of an invite while unclaimed", () => {
+    const w = mountForm({ claimRequired: true, inviteRequired: true });
+    expect(w.text()).toContain("This installation has no administrator yet");
+    expect(w.text()).not.toContain("Registration requires an invite code");
+    // claim token, principal, password, confirm; no invite field
+    expect(w.findAll("input")).toHaveLength(4);
+  });
+
+  it("does not ask for the claim token once claimed", () => {
+    const w = mountForm({ claimRequired: false });
+    expect(w.text()).not.toContain(
+      "This installation has no administrator yet",
+    );
+    // principal, password, confirm
+    expect(w.findAll("input")).toHaveLength(3);
+  });
+
+  // The pasted token reaches registerFn trimmed, and no invite code with it.
+  it("submits the trimmed claim token", async () => {
+    registerFn.mockClear();
+    const w = mountForm({ claimRequired: true });
+    const [claim, principal, password, confirm] = w.findAll("input");
+    await claim.setValue("  sidclaim_abc \n");
+    await principal.setValue("owner@example.com");
+    await password.setValue("Secret-Pass-123");
+    await confirm.setValue("Secret-Pass-123");
+    await w.find("form").trigger("submit");
+
+    expect(registerFn).toHaveBeenCalledWith(
+      "owner@example.com",
+      "Secret-Pass-123",
+      { claimToken: "sidclaim_abc" },
+      expect.any(Function),
+    );
+  });
+
+  it("submits the invite code when the installation is claimed", async () => {
+    registerFn.mockClear();
+    const w = mountForm({ initialInviteCode: "ABCD1234" });
+    const [, principal, password, confirm] = w.findAll("input");
+    await principal.setValue("user@example.com");
+    await password.setValue("Secret-Pass-123");
+    await confirm.setValue("Secret-Pass-123");
+    await w.find("form").trigger("submit");
+
+    expect(registerFn).toHaveBeenCalledWith(
+      "user@example.com",
+      "Secret-Pass-123",
+      { inviteCode: "ABCD1234" },
+      expect.any(Function),
+    );
+  });
+
   it("renders footer slot", () => {
     const w = mount(SidRegistrationForm, {
       props: { registerFn },

package/src/profile/components/SidRegistrationForm.vue

@@ -11,7 +11,17 @@
 
     <q-card-section>
       <q-banner
-        v-if="inviteRequired && !inviteCode"
+        v-if="claimRequired"
+        class="bg-info text-white q-mb-md"
+        rounded
+        dense
+        icon="sym_o_admin_panel_settings"
+      >
+        {{ claimRequiredText }}
+      </q-banner>
+
+      <q-banner
+        v-if="inviteRequired && !inviteCode && !claimRequired"
         class="bg-warning text-dark q-mb-md"
         rounded
         dense
@@ -38,7 +48,48 @@
         {{ successText }}
       </q-banner>
 
+      <slot name="progress" :progress="progress">
+        <div v-if="progress" class="q-mb-md">
+          <q-linear-progress
+            :value="progress.fraction"
+            color="primary"
+            class="q-mb-sm"
+          />
+          <div class="text-caption text-center text-grey-7">
+            <q-icon name="sym_o_lock" size="xs" class="q-mr-xs" />
+            {{ progress.label }}
+          </div>
+        </div>
+      </slot>
+
       <q-form @submit.prevent="onSubmit" class="q-gutter-y-md">
+        <q-input
+          v-if="claimRequired"
+          v-model="claimToken"
+          :type="showClaimToken ? 'text' : 'password'"
+          :label="claimTokenLabel"
+          :hint="claimTokenHint"
+          outlined
+          autocomplete="off"
+          spellcheck="false"
+          :disable="loading"
+          :rules="[(v: string) => !!v.trim() || claimTokenRequiredText]"
+          data-test="claim-token"
+        >
+          <template v-slot:prepend>
+            <q-icon name="sym_o_key" />
+          </template>
+          <template v-slot:append>
+            <q-icon
+              :name="
+                showClaimToken ? 'sym_o_visibility_off' : 'sym_o_visibility'
+              "
+              class="cursor-pointer"
+              @click="showClaimToken = !showClaimToken"
+            />
+          </template>
+        </q-input>
+
         <q-input
           v-if="showInviteField"
           v-model="inviteCode"
@@ -74,6 +125,7 @@
           :label="identifierLabel"
           :lazy-rules="false"
           :min-username-length="usernameMinLength"
+          data-test="principal"
           @update:principal-type="principalType = $event"
         />
 
@@ -88,6 +140,7 @@
           :disable="loading"
           :lazy-rules="false"
           :rules="passwordRules"
+          data-test="password"
           @update:model-value="onPasswordInput"
         >
           <template v-slot:prepend>
@@ -115,6 +168,7 @@
             (v: string) => !!v || passwordRequiredText,
             (v: string) => v === password || passwordsMismatchText,
           ]"
+          data-test="confirm-password"
         >
           <template v-slot:prepend>
             <q-icon name="sym_o_lock" />
@@ -131,8 +185,10 @@
             !identifier ||
             !password ||
             (showConfirmPassword && !confirmPassword) ||
-            (inviteRequired && !inviteCode)
+            (claimRequired && !claimToken.trim()) ||
+            (inviteRequired && !claimRequired && !inviteCode)
           "
+          data-test="submit"
         />
       </q-form>
 
@@ -160,7 +216,21 @@ interface ValidatableInput {
   validate: () => boolean | Promise<boolean>;
 }
 import type { PrincipalType } from "../../quasar";
-import { normalizePrincipal } from "../../index";
+import { normalizePrincipal, refusalMessage } from "../../index";
+
+/** What the form collected besides the identifier and password. */
+export interface RegistrationExtras {
+  /** Invite code, when the enrollment policy asks for one. */
+  inviteCode?: string;
+  /** Instance claim token from the service log, while the installation has no administrator. */
+  claimToken?: string;
+}
+
+/** Progress of the registration (the password proof takes seconds): 0..1 and a label. */
+export interface RegistrationProgress {
+  fraction: number;
+  label: string;
+}
 
 void SidPrincipalInput;
 
@@ -206,11 +276,26 @@ const props = withDefaults(
     inviteRequired?: boolean;
     /** Pre-filled invite code (e.g. from URL) */
     initialInviteCode?: string;
-    /** External register function — receives (identifier, password, inviteCode?) */
+    /**
+     * The installation has no administrator yet (GetInstanceStatus). The form
+     * then asks for the claim token and the new account becomes administrator;
+     * the invite code is not asked for.
+     */
+    claimRequired?: boolean;
+    /** Claim token input label */
+    claimTokenLabel?: string;
+    /** Claim token hint text */
+    claimTokenHint?: string;
+    /** Claim token required validation text */
+    claimTokenRequiredText?: string;
+    /** Banner shown while the installation waits for its first administrator */
+    claimRequiredText?: string;
+    /** External register function; `onProgress` drives the progress gauge. */
     registerFn: (
       identifier: string,
       password: string,
-      inviteCode?: string,
+      extras: RegistrationExtras,
+      onProgress?: (p: RegistrationProgress) => void,
     ) => Promise<void>;
     /** Min password length (default 12 — NIST SP 800-63B 4th draft baseline). */
     passwordMinLength?: number;
@@ -243,6 +328,12 @@ const props = withDefaults(
     loginUrl: undefined,
     inviteRequired: false,
     initialInviteCode: "",
+    claimRequired: false,
+    claimTokenLabel: "Claim token",
+    claimTokenHint: "The sidclaim_ token from the service log",
+    claimTokenRequiredText: "Claim token required",
+    claimRequiredText:
+      "This installation has no administrator yet. Enter the claim token from the service log; the account you create becomes its administrator.",
     showConfirmPassword: true,
     usernameMinLength: 6,
   },
@@ -261,6 +352,7 @@ const showPassword = ref(false);
 const loading = ref(false);
 const error = ref<string | null>(null);
 const success = ref(false);
+const progress = ref<RegistrationProgress | null>(null);
 
 const passwordRef = ref<ValidatableInput | null>(null);
 const confirmRef = ref<ValidatableInput | null>(null);
@@ -289,10 +381,14 @@ function onPasswordInput() {
 
 const inviteCode = ref(props.initialInviteCode);
 const inviteFromUrl = ref(!!props.initialInviteCode);
+// While unclaimed the claim token is the only admission, whatever the mode.
 const showInviteField = computed(
-  () => props.inviteRequired || !!inviteCode.value,
+  () => !props.claimRequired && (props.inviteRequired || !!inviteCode.value),
 );
 
+const claimToken = ref("");
+const showClaimToken = ref(false);
+
 async function onSubmit() {
   if (props.showConfirmPassword && password.value !== confirmPassword.value) {
     error.value = props.passwordsMismatchText;
@@ -307,11 +403,12 @@ async function onSubmit() {
       identifier.value,
       props.usernameMinLength,
     );
-    await props.registerFn(
-      normalized.value,
-      password.value,
-      inviteCode.value || undefined,
-    );
+    const extras: RegistrationExtras = props.claimRequired
+      ? { claimToken: claimToken.value.trim() }
+      : { inviteCode: inviteCode.value || undefined };
+    await props.registerFn(normalized.value, password.value, extras, (p) => {
+      progress.value = p;
+    });
     success.value = true;
     emit("success", {
       identifier: normalized.value,
@@ -320,10 +417,11 @@ async function onSubmit() {
   } catch (e) {
     success.value = false;
     const err = e instanceof Error ? e : new Error("Registration failed");
-    error.value = err.message;
+    error.value = refusalMessage(e, "Registration failed");
     emit("error", err);
   } finally {
     loading.value = false;
+    progress.value = null;
   }
 }
 </script>

package/src/profile/components/index.ts

@@ -1,6 +1,10 @@
 // Slot-based auth forms
 export { default as SidLoginForm } from "./SidLoginForm.vue";
 export { default as SidRegistrationForm } from "./SidRegistrationForm.vue";
+export type {
+  RegistrationExtras,
+  RegistrationProgress,
+} from "./SidRegistrationForm.vue";
 export { default as SidMfaChallenge } from "./SidMfaChallenge.vue";
 export type { MfaMethod } from "./SidMfaChallenge.vue";
 

package/src/profile/composables/index.ts

@@ -1,6 +1,7 @@
 export * from "./useAuthApi";
-export * from "./useOpaqueAuth";
+export * from "./useAuth";
 export * from "./useLoginSuccess";
 export * from "./useAccountApi";
+export * from "./useEnrollmentApi";
 export * from "./useIdentityApi";
 export * from "./useSecurityLevel";

package/src/profile/composables/useAccountApi.ts

@@ -1,11 +1,12 @@
 /**
  * Profile account API composable.
  *
- * Wraps AccountServiceClient proto calls with Bearer auth.
+ * The account API through the BFF (`getAccountTransport`), which adds the
+ * session's Bearer token.
  * Covers: consents, activity, linked accounts, app launcher, passwordless.
  */
 import {
-  getTransport,
+  getAccountTransport,
   AccountServiceClient,
   type ConsentInfo,
   type ClaimConsent,
@@ -31,7 +32,7 @@ import {
 import { authMeta } from "../auth";
 
 function client(): AccountServiceClient {
-  return new AccountServiceClient(getTransport());
+  return new AccountServiceClient(getAccountTransport());
 }
 
 // ── Consents ──
@@ -129,7 +130,10 @@ export async function reportSuspiciousEvent(
 export type { LinkedAccount, ListLinkedAccountsResponse };
 
 export async function listLinkedAccounts(): Promise<ListLinkedAccountsResponse> {
-  const { response } = await client().listLinkedAccounts({}, { meta: authMeta() });
+  const { response } = await client().listLinkedAccounts(
+    {},
+    { meta: authMeta() },
+  );
   return response;
 }
 
@@ -164,12 +168,18 @@ export async function reauthenticateLink(
 export type { AvailableApp, PasswordlessStatus, DisablePasswordlessResponse };
 
 export async function listAvailableApps(): Promise<AvailableApp[]> {
-  const { response } = await client().listAvailableApps({}, { meta: authMeta() });
+  const { response } = await client().listAvailableApps(
+    {},
+    { meta: authMeta() },
+  );
   return response.apps;
 }
 
 export async function launchApp(appId: string): Promise<LaunchAppResponse> {
-  const { response } = await client().launchApp({ appId }, { meta: authMeta() });
+  const { response } = await client().launchApp(
+    { appId },
+    { meta: authMeta() },
+  );
   return response;
 }
 
@@ -188,7 +198,10 @@ export async function enablePasswordless(): Promise<void> {
 }
 
 export async function disablePasswordless(): Promise<DisablePasswordlessResponse> {
-  const { response } = await client().disablePasswordless({}, { meta: authMeta() });
+  const { response } = await client().disablePasswordless(
+    {},
+    { meta: authMeta() },
+  );
   return response;
 }