@structured-id/ui-core 0.1.5

package/src/profile/components/SidMfaChallenge.vue

@@ -0,0 +1,243 @@
+<template>
+  <q-card flat bordered>
+    <q-card-section>
+      <slot name="header">
+        <div class="text-h6">{{ title }}</div>
+        <div class="text-caption text-grey">{{ subtitle }}</div>
+      </slot>
+    </q-card-section>
+
+    <q-separator />
+
+    <q-card-section>
+      <q-banner
+        v-if="error"
+        class="bg-negative text-white q-mb-md"
+        rounded
+        dense
+      >
+        {{ error }}
+      </q-banner>
+
+      <!-- Method selection -->
+      <template v-if="phase === 'select'">
+        <div class="text-center q-mb-md">
+          <q-icon name="sym_o_security" size="48px" color="warning" />
+          <div class="text-body2 text-grey-7 q-mt-sm">
+            {{ reason || "You need to verify your identity before continuing" }}
+          </div>
+        </div>
+
+        <div class="text-subtitle2 q-mb-sm">Verify using:</div>
+
+        <q-list separator>
+          <q-item
+            v-for="method in methods"
+            :key="method.type"
+            clickable
+            v-ripple
+            @click="selectMethod(method.type)"
+          >
+            <q-item-section avatar>
+              <q-icon :name="method.icon" :color="method.color" />
+            </q-item-section>
+            <q-item-section>
+              <q-item-label>{{ method.label }}</q-item-label>
+              <q-item-label caption>{{ method.description }}</q-item-label>
+            </q-item-section>
+            <q-item-section side>
+              <q-badge
+                v-if="method.recommended"
+                color="positive"
+                label="Recommended"
+              />
+              <q-icon v-else name="sym_o_chevron_right" />
+            </q-item-section>
+          </q-item>
+        </q-list>
+      </template>
+
+      <!-- TOTP code entry -->
+      <template v-if="phase === 'totp'">
+        <q-form @submit.prevent="submitCode('totp')" class="q-gutter-md">
+          <q-input
+            v-model="totpCode"
+            label="Authentication code"
+            outlined
+            autofocus
+            mask="### ###"
+            unmasked-value
+            :disable="loading"
+            :rules="[
+              (v: string) => (!!v && v.length === 6) || 'Enter 6-digit code',
+            ]"
+            input-class="text-center text-h5 letter-spacing-wide"
+            inputmode="numeric"
+            autocomplete="one-time-code"
+          >
+            <template v-slot:prepend>
+              <q-icon name="sym_o_timer" color="primary" />
+            </template>
+          </q-input>
+
+          <q-btn
+            type="submit"
+            label="Verify"
+            color="primary"
+            class="full-width"
+            :loading="loading"
+            :disable="!totpCode || totpCode.length < 6"
+          />
+        </q-form>
+
+        <div class="text-caption text-grey-6 text-center q-mt-md">
+          <q-icon name="sym_o_info" size="xs" class="q-mr-xs" />
+          Open your authenticator app to find the code
+        </div>
+      </template>
+
+      <!-- Recovery code entry -->
+      <template v-if="phase === 'recovery'">
+        <q-form @submit.prevent="submitCode('recovery')" class="q-gutter-md">
+          <q-input
+            v-model="recoveryCode"
+            label="Recovery code"
+            outlined
+            autofocus
+            :disable="loading"
+            :rules="[(v: string) => !!v || 'Enter recovery code']"
+            input-class="text-center text-h6 font-monospace"
+          >
+            <template v-slot:prepend>
+              <q-icon name="sym_o_key" color="warning" />
+            </template>
+          </q-input>
+
+          <q-btn
+            type="submit"
+            label="Verify"
+            color="primary"
+            class="full-width"
+            :loading="loading"
+            :disable="!recoveryCode"
+          />
+        </q-form>
+
+        <div class="text-caption text-grey-6 text-center q-mt-md">
+          <q-icon name="sym_o_warning" size="xs" class="q-mr-xs" />
+          Recovery codes are single-use
+        </div>
+      </template>
+
+      <!-- WebAuthn (passkey) -->
+      <template v-if="phase === 'webauthn'">
+        <div class="text-center q-pa-lg">
+          <q-spinner-dots v-if="loading" size="48px" color="primary" />
+          <q-icon v-else name="sym_o_passkey" size="48px" color="primary" />
+          <div class="text-body2 text-grey-7 q-mt-md">
+            {{
+              loading
+                ? "Waiting for authenticator\u2026"
+                : "Use your passkey or security key to verify"
+            }}
+          </div>
+        </div>
+      </template>
+
+      <!-- Success -->
+      <template v-if="phase === 'success'">
+        <div class="text-center q-pa-lg">
+          <q-icon name="sym_o_check_circle" size="48px" color="positive" />
+          <div class="text-body1 text-positive q-mt-sm">Verified</div>
+        </div>
+      </template>
+
+      <slot name="below-challenge" :phase="phase" />
+    </q-card-section>
+
+    <slot name="footer" />
+  </q-card>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+
+export interface MfaMethod {
+  type: "totp" | "webauthn" | "recovery";
+  icon: string;
+  label: string;
+  description: string;
+  color: string;
+  recommended?: boolean;
+}
+
+type Phase = "select" | "totp" | "webauthn" | "recovery" | "success";
+
+withDefaults(
+  defineProps<{
+    title?: string;
+    subtitle?: string;
+    reason?: string;
+    methods: MfaMethod[];
+  }>(),
+  {
+    title: "Additional verification required",
+    subtitle: "This action requires a higher authentication level",
+    reason: "",
+  },
+);
+
+const emit = defineEmits<{
+  "select-method": [method: string];
+  "submit-totp": [code: string];
+  "submit-recovery": [code: string];
+  "submit-webauthn": [];
+  verified: [];
+}>();
+
+const phase = ref<Phase>("select");
+const loading = ref(false);
+const error = ref<string | null>(null);
+const totpCode = ref("");
+const recoveryCode = ref("");
+
+function selectMethod(method: string) {
+  error.value = null;
+  phase.value = method as Phase;
+  emit("select-method", method);
+}
+
+function submitCode(method: "totp" | "recovery") {
+  if (method === "totp") {
+    emit("submit-totp", totpCode.value);
+  } else {
+    emit("submit-recovery", recoveryCode.value);
+  }
+}
+
+/** Called by parent to set loading state */
+function setLoading(val: boolean) {
+  loading.value = val;
+}
+
+/** Called by parent to set error */
+function setError(msg: string | null) {
+  error.value = msg;
+}
+
+/** Called by parent to show success */
+function setSuccess() {
+  phase.value = "success";
+  emit("verified");
+}
+
+/** Called by parent to reset to method selection */
+function reset() {
+  phase.value = "select";
+  error.value = null;
+  totpCode.value = "";
+  recoveryCode.value = "";
+}
+
+defineExpose({ setLoading, setError, setSuccess, reset, phase });
+</script>

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

@@ -0,0 +1,79 @@
+import { describe, it, expect, vi } from "vitest";
+import { mount } from "@vue/test-utils";
+import SidRegistrationForm from "./SidRegistrationForm.vue";
+
+const quasarStubs = {
+  "q-card": { template: "<div><slot /></div>" },
+  "q-card-section": { template: "<div><slot /></div>" },
+  "q-separator": { template: "<hr />" },
+  "q-banner": { template: "<div><slot /></div>" },
+  "q-icon": { template: "<span />" },
+  "q-chip": { template: "<span />" },
+  "q-form": {
+    template: "<form @submit.prevent=\"$emit('submit')\"><slot /></form>",
+    emits: ["submit"],
+  },
+  "q-input": {
+    props: ["modelValue"],
+    emits: ["update:modelValue"],
+    template:
+      '<input :value="modelValue" @input="$emit(\'update:modelValue\', $event.target.value)" />',
+  },
+  "q-btn": { template: '<button type="submit"><slot /></button>' },
+  "sid-principal-input": {
+    props: ["modelValue", "disable", "label"],
+    emits: ["update:modelValue", "update:principal-type"],
+    template:
+      '<input :value="modelValue" @input="$emit(\'update:modelValue\', $event.target.value)" />',
+  },
+};
+
+const registerFn = vi.fn().mockResolvedValue(undefined);
+
+function mountForm(props = {}) {
+  return mount(SidRegistrationForm, {
+    props: { registerFn, ...props },
+    global: { stubs: quasarStubs },
+  });
+}
+
+describe("SidRegistrationForm", () => {
+  it("renders with default title", () => {
+    const w = mountForm();
+    expect(w.text()).toContain("Create account");
+  });
+
+  it("renders custom title", () => {
+    const w = mountForm({ title: "Join us" });
+    expect(w.text()).toContain("Join us");
+  });
+
+  it("shows invite warning when required and no code", () => {
+    const w = mountForm({ inviteRequired: true });
+    expect(w.text()).toContain("Registration requires an invite code");
+  });
+
+  it("hides invite field when not required and no code", () => {
+    const w = mountForm({ inviteRequired: false });
+    expect(w.text()).not.toContain("Invite code");
+  });
+
+  it("shows invite field when code provided", () => {
+    const w = mountForm({ initialInviteCode: "ABCD1234" });
+    // showInviteField computed = true when code exists → invite input rendered
+    // q-input stub renders as <input>, look for it in the rendered HTML
+    const inputs = w.findAll("input");
+    // At minimum: invite, principal, password, confirm = 4 inputs.
+    // (given_name dropped — handled via OrgClaimPolicy after first login.)
+    expect(inputs.length).toBeGreaterThanOrEqual(4);
+  });
+
+  it("renders footer slot", () => {
+    const w = mount(SidRegistrationForm, {
+      props: { registerFn },
+      global: { stubs: quasarStubs },
+      slots: { footer: "<div>Sign in instead</div>" },
+    });
+    expect(w.text()).toContain("Sign in instead");
+  });
+});

package/src/profile/components/SidRegistrationForm.vue

@@ -0,0 +1,317 @@
+<template>
+  <q-card flat bordered>
+    <q-card-section>
+      <slot name="header">
+        <div class="text-h6">{{ title }}</div>
+        <div class="text-caption text-grey">{{ subtitle }}</div>
+      </slot>
+    </q-card-section>
+
+    <q-separator />
+
+    <q-card-section>
+      <q-banner
+        v-if="inviteRequired && !inviteCode"
+        class="bg-warning text-dark q-mb-md"
+        rounded
+        dense
+        icon="sym_o_lock"
+      >
+        {{ inviteRequiredText }}
+      </q-banner>
+
+      <q-banner
+        v-if="error"
+        class="bg-negative text-white q-mb-md"
+        rounded
+        dense
+      >
+        {{ error }}
+      </q-banner>
+
+      <q-banner
+        v-if="success"
+        class="bg-positive text-white q-mb-md"
+        rounded
+        dense
+      >
+        {{ successText }}
+      </q-banner>
+
+      <q-form @submit.prevent="onSubmit" class="q-gutter-y-md">
+        <q-input
+          v-if="showInviteField"
+          v-model="inviteCode"
+          :label="inviteCodeLabel"
+          outlined
+          :disable="loading || inviteFromUrl"
+          maxlength="8"
+          mask="XXXXXXXX"
+          :rules="
+            inviteRequired ? [(v: string) => !!v || inviteCodeRequiredText] : []
+          "
+          :hint="inviteCodeHint"
+        >
+          <template v-slot:prepend>
+            <q-icon name="sym_o_vpn_key" />
+          </template>
+          <template v-slot:append>
+            <q-chip
+              v-if="inviteFromUrl"
+              color="positive"
+              text-color="white"
+              dense
+              size="sm"
+              icon="sym_o_link"
+              :label="inviteFromUrlLabel"
+            />
+          </template>
+        </q-input>
+
+        <sid-principal-input
+          v-model="identifier"
+          :disable="loading"
+          :label="identifierLabel"
+          :lazy-rules="false"
+          @update:principal-type="principalType = $event"
+        />
+
+        <slot name="extra-fields" />
+
+        <q-input
+          ref="passwordRef"
+          v-model="password"
+          :type="showPassword ? 'text' : 'password'"
+          :label="passwordLabel"
+          outlined
+          :disable="loading"
+          :lazy-rules="false"
+          :rules="passwordRules"
+          @update:model-value="onPasswordInput"
+        >
+          <template v-slot:prepend>
+            <q-icon name="sym_o_lock" />
+          </template>
+          <template v-slot:append>
+            <q-icon
+              :name="showPassword ? 'sym_o_visibility_off' : 'sym_o_visibility'"
+              class="cursor-pointer"
+              @click="showPassword = !showPassword"
+            />
+          </template>
+        </q-input>
+
+        <q-input
+          ref="confirmRef"
+          v-model="confirmPassword"
+          :type="showPassword ? 'text' : 'password'"
+          :label="confirmPasswordLabel"
+          outlined
+          :disable="loading"
+          :lazy-rules="false"
+          :rules="[
+            (v: string) => !!v || passwordRequiredText,
+            (v: string) => v === password || passwordsMismatchText,
+          ]"
+        >
+          <template v-slot:prepend>
+            <q-icon name="sym_o_lock" />
+          </template>
+        </q-input>
+
+        <q-btn
+          type="submit"
+          :label="submitLabel"
+          color="primary"
+          class="full-width"
+          :loading="loading"
+          :disable="
+            !identifier ||
+            !password ||
+            !confirmPassword ||
+            (inviteRequired && !inviteCode)
+          "
+        />
+      </q-form>
+
+      <slot name="links">
+        <div v-if="loginUrl" class="text-center q-mt-md text-body2">
+          {{ haveAccountText }}
+          <router-link :to="loginUrl" class="text-primary">
+            {{ loginLinkText }}
+          </router-link>
+        </div>
+      </slot>
+    </q-card-section>
+
+    <slot name="footer" />
+  </q-card>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch } from "vue";
+import { SidPrincipalInput } from "../../quasar";
+
+// Minimal QInput shape — we only use validate(). Avoids importing 'quasar' at
+// type level (it's a peer dep, not present during ui-core typecheck).
+interface ValidatableInput {
+  validate: () => boolean | Promise<boolean>;
+}
+import type { PrincipalType } from "../../quasar";
+import { normalizePrincipal } from "../../index";
+
+void SidPrincipalInput;
+
+const props = withDefaults(
+  defineProps<{
+    /** Card title */
+    title?: string;
+    /** Card subtitle */
+    subtitle?: string;
+    /** Submit button label */
+    submitLabel?: string;
+    /** Identifier input label */
+    identifierLabel?: string;
+    /** Password input label */
+    passwordLabel?: string;
+    /** Confirm password input label */
+    confirmPasswordLabel?: string;
+    /** Password required validation text */
+    passwordRequiredText?: string;
+    /** Password min length validation text */
+    passwordMinLengthText?: string;
+    /** Passwords mismatch validation text */
+    passwordsMismatchText?: string;
+    /** Invite code input label */
+    inviteCodeLabel?: string;
+    /** Invite code required validation text */
+    inviteCodeRequiredText?: string;
+    /** Invite code hint text */
+    inviteCodeHint?: string;
+    /** Invite "from link" chip label */
+    inviteFromUrlLabel?: string;
+    /** Invite required banner text */
+    inviteRequiredText?: string;
+    /** Success banner text */
+    successText?: string;
+    /** "Already have an account?" text */
+    haveAccountText?: string;
+    /** "Sign in" link text */
+    loginLinkText?: string;
+    /** Route to login page (if set, shows login link) */
+    loginUrl?: string;
+    /** Whether invite code is required */
+    inviteRequired?: boolean;
+    /** Pre-filled invite code (e.g. from URL) */
+    initialInviteCode?: string;
+    /** External register function — receives (identifier, password, inviteCode?) */
+    registerFn: (
+      identifier: string,
+      password: string,
+      inviteCode?: string,
+    ) => Promise<void>;
+    /** Min password length (default 12 — NIST SP 800-63B 4th draft baseline). */
+    passwordMinLength?: number;
+  }>(),
+  {
+    title: "Create account",
+    subtitle: "Set up your StructuredID account",
+    submitLabel: "Create account",
+    identifierLabel: "Email, phone, or username",
+    passwordLabel: "Password",
+    confirmPasswordLabel: "Confirm password",
+    passwordRequiredText: "Required",
+    passwordMinLengthText: "At least 12 characters with mixed case + digit",
+    passwordMinLength: 12,
+    passwordsMismatchText: "Passwords do not match",
+    inviteCodeLabel: "Invite code",
+    inviteCodeRequiredText: "Invite code required",
+    inviteCodeHint: "8-character code from your administrator",
+    inviteFromUrlLabel: "From link",
+    inviteRequiredText:
+      "Registration requires an invite code. Contact your administrator for access.",
+    successText: "Account created. Signing you in\u2026",
+    haveAccountText: "Already have an account?",
+    loginLinkText: "Sign in",
+    loginUrl: undefined,
+    inviteRequired: false,
+    initialInviteCode: "",
+  },
+);
+
+const emit = defineEmits<{
+  success: [data: { identifier: string; principalType: string }];
+  error: [error: Error];
+}>();
+
+const identifier = ref("");
+const principalType = ref<PrincipalType>("unknown");
+const password = ref("");
+const confirmPassword = ref("");
+const showPassword = ref(false);
+const loading = ref(false);
+const error = ref<string | null>(null);
+const success = ref(false);
+
+const passwordRef = ref<ValidatableInput | null>(null);
+const confirmRef = ref<ValidatableInput | null>(null);
+
+// Password complexity (matches sid-pake-core ZKPP gadget A defaults).
+// Server enforces via OPAQUE-ZKPP zero-knowledge proof; client also checks
+// to give immediate UX feedback.
+const passwordRules = computed(() => [
+  (v: string) => !!v || props.passwordRequiredText,
+  (v: string) =>
+    v.length >= props.passwordMinLength || props.passwordMinLengthText,
+  (v: string) => /[a-z]/.test(v) || props.passwordMinLengthText,
+  (v: string) => /[A-Z]/.test(v) || props.passwordMinLengthText,
+  (v: string) => /[0-9]/.test(v) || props.passwordMinLengthText,
+]);
+
+// Re-validate confirm field whenever password changes (eager match feedback).
+watch(password, () => {
+  if (confirmPassword.value) confirmRef.value?.validate();
+});
+
+function onPasswordInput() {
+  // Trigger downstream confirm re-validation immediately (don't wait for blur).
+  if (confirmPassword.value) confirmRef.value?.validate();
+}
+
+const inviteCode = ref(props.initialInviteCode);
+const inviteFromUrl = ref(!!props.initialInviteCode);
+const showInviteField = computed(
+  () => props.inviteRequired || !!inviteCode.value,
+);
+
+async function onSubmit() {
+  if (password.value !== confirmPassword.value) {
+    error.value = props.passwordsMismatchText;
+    return;
+  }
+
+  loading.value = true;
+  error.value = null;
+
+  try {
+    const normalized = normalizePrincipal(identifier.value);
+    await props.registerFn(
+      normalized.value,
+      password.value,
+      inviteCode.value || undefined,
+    );
+    success.value = true;
+    emit("success", {
+      identifier: normalized.value,
+      principalType: normalized.type,
+    });
+  } catch (e) {
+    success.value = false;
+    const err = e instanceof Error ? e : new Error("Registration failed");
+    error.value = err.message;
+    emit("error", err);
+  } finally {
+    loading.value = false;
+  }
+}
+</script>

package/src/profile/components/index.ts

@@ -0,0 +1,11 @@
+// Slot-based auth forms
+export { default as SidLoginForm } from "./SidLoginForm.vue";
+export { default as SidRegistrationForm } from "./SidRegistrationForm.vue";
+export { default as SidMfaChallenge } from "./SidMfaChallenge.vue";
+export type { MfaMethod } from "./SidMfaChallenge.vue";
+
+// Shared page components
+export { default as SessionList } from "./SessionList.vue";
+export { default as ProfileEditor } from "./ProfileEditor.vue";
+export { default as ConsentManager } from "./ConsentManager.vue";
+export { default as SecuritySettings } from "./SecuritySettings.vue";

package/src/profile/composables/index.ts

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