@structured-id/ui-core 0.1.5

package/src/profile/index.ts

@@ -0,0 +1,18 @@
+/**
+ * profile-core — shared Profile-level UI library.
+ *
+ * Composables for identity, account, auth, and security APIs.
+ * Slot-based form components for registration, login, MFA.
+ * Shared between profile-ui-ce, profile-ui-ee, and frontend.
+ *
+ * Import: `@structured-id/ui-core/profile`
+ */
+
+// Composables
+export * from "./composables";
+
+// Slot-based form components
+export * from "./components";
+
+// Auth helper
+export { authMeta } from "./auth";

package/src/quasar/SidPrincipalInput.vue

@@ -0,0 +1,209 @@
+<template>
+  <q-input
+    ref="inputRef"
+    v-model="model"
+    :label="label"
+    :rules="[requiredRule, typeRule]"
+    outlined
+    type="text"
+    :inputmode="inputMode"
+    autocapitalize="none"
+    autocomplete="username webauthn"
+    spellcheck="false"
+    :lazy-rules="lazyRules"
+    @update:model-value="onInput"
+  >
+    <template #prepend>
+      <q-icon :name="iconName" :color="iconColor" size="24px" />
+    </template>
+    <template v-if="model && detectedType !== 'unknown'" #append>
+      <q-chip
+        dense
+        :color="chipColor"
+        text-color="white"
+        size="sm"
+        class="q-px-sm"
+      >
+        {{ chipLabel }}
+      </q-chip>
+    </template>
+  </q-input>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch } from "vue";
+import { isValidPhoneNumber } from "libphonenumber-js";
+
+export type PrincipalType = "email" | "phone" | "username" | "unknown";
+
+interface Props {
+  modelValue: string;
+  minUsernameLength?: number;
+  required?: boolean;
+  label?: string;
+  /** Validate on each input change (false) vs only on blur (true). Default false — eager. */
+  lazyRules?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: "",
+  // Per arch/identity/identity-model.md §Principal: username regex is
+  // ^[a-z0-9_]{3,32}$ (display form ^[a-zA-Z0-9_]{3,32}$).
+  minUsernameLength: 3,
+  required: true,
+  label: "Email, phone, or username",
+  lazyRules: false,
+});
+
+const emit = defineEmits<{
+  "update:modelValue": [value: string];
+  "update:principalType": [type: PrincipalType];
+}>();
+
+const inputRef = ref<{ focus: () => void } | null>(null);
+
+const model = computed({
+  get: () => props.modelValue,
+  set: (v) => emit("update:modelValue", v),
+});
+
+const USERNAME_MAX_LENGTH = 32;
+
+function detectType(value: string): PrincipalType {
+  if (!value) return "unknown";
+  const trimmed = value.trim();
+  if (!trimmed) return "unknown";
+
+  // Phone: starts with +
+  if (trimmed.startsWith("+")) return "phone";
+
+  // Email: contains @ (checked after phone to exclude edge cases)
+  if (trimmed.includes("@")) return "email";
+
+  // Username per arch/identity/identity-model.md:
+  // ^[a-z0-9_]{3,32}$, no leading/trailing _, no __
+  // Detection is relaxed: accepts uppercase (will normalize), checks min length
+  const re = new RegExp(
+    `^[a-zA-Z0-9_]{${props.minUsernameLength},${USERNAME_MAX_LENGTH}}$`,
+  );
+  if (re.test(trimmed) && !trimmed.startsWith("_") && !trimmed.endsWith("_")) {
+    return "username";
+  }
+
+  // Still typing — not enough chars to determine
+  return "unknown";
+}
+
+const detectedType = computed(() => detectType(model.value));
+
+// Emit type changes
+watch(detectedType, (type) => {
+  emit("update:principalType", type);
+});
+
+function onInput(value: string | number | null) {
+  emit("update:principalType", detectType(String(value ?? "")));
+}
+
+// --- Validation rules ---
+
+const requiredRule = (val: string) =>
+  !props.required || !!val || "This field is required";
+
+const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+
+const typeRule = (val: string): string | true => {
+  if (!val) return true; // required rule handles empty
+  const type = detectType(val);
+
+  switch (type) {
+    case "email":
+      return emailRegex.test(val) || "Invalid email address";
+    case "phone":
+      return isValidPhoneNumber(val) || "Invalid phone number";
+    case "username": {
+      const lower = val.toLowerCase();
+      const re = new RegExp(
+        `^[a-z0-9_]{${props.minUsernameLength},${USERNAME_MAX_LENGTH}}$`,
+      );
+      if (!re.test(lower)) return "Invalid username";
+      if (lower.startsWith("_") || lower.endsWith("_"))
+        return "Username cannot start or end with underscore";
+      if (lower.includes("__"))
+        return "Username cannot contain consecutive underscores";
+      return true;
+    }
+    default:
+      return "Enter email, phone (+...), or username";
+  }
+};
+
+// --- Dynamic icon & type ---
+
+const iconName = computed(() => {
+  switch (detectedType.value) {
+    case "email":
+      return "sym_o_mail";
+    case "phone":
+      return "sym_o_phone";
+    case "username":
+      return "sym_o_person";
+    default:
+      return "sym_o_login";
+  }
+});
+
+const iconColor = computed(() =>
+  detectedType.value === "unknown" ? "grey-6" : "primary",
+);
+
+// inputmode controls mobile keyboard WITHOUT triggering browser autofill.
+// type="text" stays constant — changing type mid-input causes:
+// - autofill popup flashing (browser re-evaluates field purpose)
+// - cursor/value reset in some browsers
+// - mobile keyboard switching mid-keystroke
+const inputMode = computed(() => {
+  switch (detectedType.value) {
+    case "email":
+      return "email"; // keyboard with @ key
+    case "phone":
+      return "tel"; // numeric keyboard
+    default:
+      return "text";
+  }
+});
+
+const chipLabel = computed(() => {
+  switch (detectedType.value) {
+    case "email":
+      return "email";
+    case "phone":
+      return "phone";
+    case "username":
+      return "username";
+    default:
+      return "";
+  }
+});
+
+const chipColor = computed(() => {
+  switch (detectedType.value) {
+    case "email":
+      return "deep-orange";
+    case "phone":
+      return "green";
+    case "username":
+      return "blue";
+    default:
+      return "grey";
+  }
+});
+
+// --- Public API ---
+
+function focus() {
+  inputRef.value?.focus();
+}
+
+defineExpose({ focus, detectedType });
+</script>

package/src/quasar/index.ts

@@ -0,0 +1,8 @@
+/**
+ * Quasar-dependent components.
+ *
+ * Separate entrypoint from main ui-core (which is pure Vue 3 + TS).
+ * Import as: import { SidPrincipalInput } from '@structured-id/ui-core/quasar'
+ */
+export { default as SidPrincipalInput } from "./SidPrincipalInput.vue";
+export type { PrincipalType } from "./SidPrincipalInput.vue";

package/src/stores/auth.test.ts

@@ -0,0 +1,83 @@
+import { describe, it, expect, beforeEach } from "vitest";
+import { setActivePinia, createPinia } from "pinia";
+import { useAuthStore } from "./auth";
+
+describe("useAuthStore (BFF cookie session)", () => {
+  beforeEach(() => {
+    setActivePinia(createPinia());
+  });
+
+  it("starts unauthenticated with empty state", () => {
+    const store = useAuthStore();
+    expect(store.isAuthenticated).toBe(false);
+    expect(store.sessionValid).toBe(false);
+    expect(store.profileId).toBeNull();
+    expect(store.displayName).toBeNull();
+    expect(store.email).toBeNull();
+  });
+
+  it("setBffSession sets sessionValid and profile data", () => {
+    const store = useAuthStore();
+    store.setBffSession({
+      sub: "profile-uuid-123",
+      email: "alice@example.com",
+      name: "Alice Smith",
+      preferred_username: "alice",
+      groups: ["admins"],
+      acr: "urn:sid:acr:mfa",
+      roles: ["member"],
+    });
+
+    expect(store.isAuthenticated).toBe(true);
+    expect(store.sessionValid).toBe(true);
+    expect(store.profileId).toBe("profile-uuid-123");
+    expect(store.displayName).toBe("Alice Smith");
+    expect(store.email).toBe("alice@example.com");
+    expect(store.preferredUsername).toBe("alice");
+  });
+
+  it("setBffSession handles null/missing optional fields", () => {
+    const store = useAuthStore();
+    store.setBffSession({ sub: "uuid-456" });
+
+    expect(store.isAuthenticated).toBe(true);
+    expect(store.profileId).toBe("uuid-456");
+    expect(store.displayName).toBeNull();
+    expect(store.email).toBeNull();
+    expect(store.preferredUsername).toBeNull();
+  });
+
+  it("setProfile updates display data", () => {
+    const store = useAuthStore();
+    store.setBffSession({ sub: "uuid-1" });
+
+    store.setProfile({
+      id: "uuid-1",
+      displayName: "Bob Jones",
+      email: "bob@example.com",
+    });
+
+    expect(store.profileId).toBe("uuid-1");
+    expect(store.displayName).toBe("Bob Jones");
+    expect(store.email).toBe("bob@example.com");
+  });
+
+  it("logout clears all state", () => {
+    const store = useAuthStore();
+    store.setBffSession({
+      sub: "uuid-1",
+      name: "Alice",
+      email: "alice@example.com",
+      preferred_username: "alice",
+    });
+
+    store.logout();
+
+    expect(store.isAuthenticated).toBe(false);
+    expect(store.sessionValid).toBe(false);
+    expect(store.profileId).toBeNull();
+    expect(store.displayName).toBeNull();
+    expect(store.email).toBeNull();
+    expect(store.preferredUsername).toBeNull();
+  });
+});

package/src/stores/auth.ts

@@ -0,0 +1,92 @@
+import { defineStore } from "pinia";
+import { ref, computed } from "vue";
+import type { BffUserInfo } from "../composables/useBffAuth";
+
+/**
+ * Auth store — BFF cookie session (post #536i-3 migration).
+ *
+ * Tokens are stored server-side in sid-auth-proxy BFF sessions.
+ * The SPA never sees access/refresh tokens — only an httpOnly session cookie.
+ * `isAuthenticated` is based on BFF session validity, set via `setBffSession()`.
+ *
+ * Boot sequence:
+ *   1. App boots → calls checkBffSession() → populates store via setBffSession()
+ *   2. Route guard → checks isAuthenticated → redirects to BFF login if false
+ *   3. On BFF logout → call logout() to clear local state
+ */
+export const useAuthStore = defineStore("auth", () => {
+  // ── BFF session state ─────────────────────────────────────────────
+
+  /** Whether a valid BFF session exists (set by setBffSession on boot). */
+  const sessionValid = ref(false);
+
+  /** Server-side session identifier (for step-up, session management). */
+  const sessionId = ref<string | null>(null);
+
+  // ── Profile info (populated from BFF /auth/userinfo) ──────────────
+
+  /** Profile ID of the authenticated user (= sub from BFF userinfo). */
+  const profileId = ref<string | null>(null);
+  /** Display name. */
+  const displayName = ref<string | null>(null);
+  /** Email address. */
+  const email = ref<string | null>(null);
+  /** Username or email — preferred display identifier. */
+  const preferredUsername = ref<string | null>(null);
+
+  // ── Computed ─────────────────────────────────────────────────────
+
+  const isAuthenticated = computed(() => sessionValid.value);
+
+  // ── Actions ──────────────────────────────────────────────────────
+
+  /**
+   * Populate store from BFF session.
+   * Called after successful checkBffSession() on app boot or after login redirect.
+   */
+  function setBffSession(info: BffUserInfo): void {
+    sessionValid.value = true;
+    profileId.value = info.sub;
+    displayName.value = info.name ?? null;
+    email.value = info.email ?? null;
+    preferredUsername.value = info.preferred_username ?? null;
+  }
+
+  /**
+   * Update profile display data (e.g., after profile edit).
+   */
+  function setProfile(profile: {
+    id: string;
+    displayName?: string | null;
+    email?: string | null;
+  }): void {
+    profileId.value = profile.id;
+    displayName.value = profile.displayName ?? null;
+    email.value = profile.email ?? null;
+  }
+
+  /**
+   * Clear all session state. Call after bffLogout() completes.
+   */
+  function logout(): void {
+    sessionValid.value = false;
+    sessionId.value = null;
+    profileId.value = null;
+    displayName.value = null;
+    email.value = null;
+    preferredUsername.value = null;
+  }
+
+  return {
+    sessionValid,
+    sessionId,
+    profileId,
+    displayName,
+    email,
+    preferredUsername,
+    isAuthenticated,
+    setBffSession,
+    setProfile,
+    logout,
+  };
+});

package/src/stores/index.ts

@@ -0,0 +1 @@
+export { useAuthStore } from "./auth";