@structured-id/ui-core 0.1.5

package/src/i18n/index.ts

@@ -0,0 +1,40 @@
+/**
+ * i18n key constants shared across all SID UI applications.
+ *
+ * These match the keys defined in sid-i18n Rust crate (locales/*.json).
+ * Apps import these constants instead of hardcoding strings,
+ * ensuring consistency between frontend and backend translations.
+ */
+
+export const AUTH_KEYS = {
+  LOGIN_TITLE: "auth.login.title",
+  LOGIN_SUBMIT: "auth.login.submit",
+  REGISTER_TITLE: "auth.register.title",
+  REGISTER_SUBMIT: "auth.register.submit",
+  MFA_TITLE: "auth.mfa.title",
+  MAGIC_LINK_TITLE: "auth.magic_link.title",
+  DEVICE_AUTH_TITLE: "auth.device_auth.title",
+  PASSWORD_RESET_TITLE: "auth.password_reset.title",
+  LOGOUT_TITLE: "auth.logout.title",
+  LOGOUT_SUBMIT: "auth.logout.submit",
+} as const;
+
+export const ERROR_KEYS = {
+  INVALID_CREDENTIALS: "errors.auth.invalid_credentials",
+  ACCOUNT_LOCKED: "errors.auth.account_locked",
+  SESSION_EXPIRED: "errors.auth.session_expired",
+  MFA_REQUIRED: "errors.auth.mfa_required",
+  PERMISSION_DENIED: "errors.rbac.permission_denied",
+  NOT_FOUND: "errors.general.not_found",
+  INTERNAL_ERROR: "errors.general.internal_error",
+  RATE_LIMITED: "errors.general.rate_limited",
+} as const;
+
+export const COMMON_KEYS = {
+  SAVE: "common.buttons.save",
+  CANCEL: "common.buttons.cancel",
+  DELETE: "common.buttons.delete",
+  CONFIRM: "common.buttons.confirm",
+  LOADING: "common.labels.loading",
+  NO_RESULTS: "common.labels.no_results",
+} as const;

package/src/index.ts

@@ -0,0 +1,157 @@
+// Composables
+export { useAuth } from "./composables/useAuth";
+export {
+  useGrpc,
+  initGrpc,
+  getTransport,
+  closeTransport,
+  getTransportType,
+  type TransportType,
+} from "./composables/useGrpc";
+export { useSession, type SessionCallbacks } from "./composables/useSession";
+export {
+  useBffAuth,
+  initBff,
+  getBffBaseUrl,
+  checkBffSession,
+  startBffLogin,
+  bffLogout,
+  type BffUserInfo,
+} from "./composables/useBffAuth";
+
+// Stores
+export { useAuthStore } from "./stores/auth";
+
+// Components — import from '@structured-id/ui-core/components' (raw .vue SFC)
+// Consuming apps with their own Vue build pipeline import directly:
+//   import { SidStatusBadge } from '@structured-id/ui-core/components'
+
+// Utils
+export {
+  isValidEmail,
+  isValidPhone,
+  isValidUuid,
+  isValidUsername,
+  minLength,
+  maxLength,
+  isRequired,
+  formatDate,
+  formatRelativeTime,
+  truncate,
+  maskEmail,
+} from "./utils";
+
+export {
+  detectLoginInputType,
+  normalizePrincipal,
+  type LoginInputType,
+  type NormalizedPrincipal,
+} from "./utils/normalizePrincipal";
+
+// Types
+export type { AuthState, SessionInfo, GrpcConfig } from "./types";
+
+// i18n key constants
+export { AUTH_KEYS, ERROR_KEYS, COMMON_KEYS } from "./i18n";
+
+// Generated proto clients and types
+export { AuthServiceClient } from "./generated/sid/v1/authn/auth.client";
+export { IdentityServiceClient } from "./generated/sid/v1/identity/identity.client";
+export { AccountServiceClient } from "./generated/sid/v1/account/account.client";
+export { UpstreamServiceClient } from "./generated/sid/v1/federation/upstream.client";
+
+// Re-export commonly used proto types
+export type {
+  OpaqueLoginStartRequest,
+  OpaqueLoginStartResponse,
+  OpaqueLoginFinishRequest,
+  OpaqueLoginFinishResponse,
+  OpaqueRegistrationStartRequest,
+  OpaqueRegistrationStartResponse,
+  OpaqueRegistrationFinishRequest,
+  OpaqueRegistrationFinishResponse,
+  MfaVerifyResponse,
+  TotpEnrollmentChallenge,
+  FinishTotpEnrollmentResponse,
+  ResendSmsMfaResponse,
+  GenerateRecoveryCodesResponse,
+  VerifyOtpResponse,
+  ResendOtpResponse,
+  VerifyPhoneResponse,
+  ConfirmIdpLinkResponse,
+  UserOrganization,
+  ListUserOrganizationsResponse,
+  SelectOrganizationResponse,
+  GetTermsResponse,
+  AcceptTermsResponse,
+  CibaConsentResponse,
+  VerifyCaptchaResponse,
+  DynamicPrompt,
+  DynamicPromptField,
+  SubmitDynamicPromptResponse,
+  StepUpChallenge,
+  CompleteStepUpResponse,
+  DeleteMfaCredentialResponse,
+  ConfirmAccountDeletionResponse,
+  SubmitDeviceUserCodeResponse,
+  OAuth2AuthorizeResponse,
+  WebAuthnAuthenticationStartResponse,
+  WebAuthnAuthenticationFinishResponse,
+  WebAuthnRegistrationStartResponse,
+  WebAuthnRegistrationFinishResponse,
+  RequestMagicLinkResponse,
+  VerifyMagicLinkResponse,
+  RequestPasswordResetResponse,
+  VerifyPasswordResetResponse,
+  CompletePasswordResetResponse,
+} from "./generated/sid/v1/authn/auth";
+
+export type {
+  Profile,
+  Session,
+  Credential,
+  Principal,
+} from "./generated/sid/v1/identity/identity";
+
+export { StepUpMethod } from "./generated/sid/v1/authn/auth";
+
+export {
+  ProfileStatus,
+  PrincipalType,
+  CredentialType,
+  AuthenticatorAttachment,
+} from "./generated/sid/v1/identity/identity";
+
+export type {
+  ConsentInfo,
+  ClaimConsent,
+  ActivityEvent,
+  ListConsentsResponse,
+  GetConsentDetailResponse,
+  ListActivityEventsResponse,
+  LinkedAccount,
+  ListLinkedAccountsResponse,
+  LinkAccountResponse,
+  ReauthenticateLinkResponse,
+  AvailableApp,
+  ListAvailableAppsResponse,
+  LaunchAppResponse,
+  PasswordlessStatus,
+  DisablePasswordlessResponse,
+} from "./generated/sid/v1/account/account";
+
+export {
+  ConsentStatus,
+  ClaimType,
+  ClaimConsentStatus,
+  ActivityEventStatus,
+  LinkedAccountTrustCategory,
+  LinkedAccountStatus,
+} from "./generated/sid/v1/account/account";
+
+export type { EnabledProviderInfo } from "./generated/sid/v1/federation/upstream";
+
+export { Timestamp } from "./generated/google/protobuf/timestamp";
+
+// Browser VP — import from '@structured-id/ui-core/browser-vp'
+// Separate entry point: WebAuthn PRF, IndexedDB, VP creation (browser-only APIs)

package/src/profile/auth.ts

@@ -0,0 +1,15 @@
+/**
+ * Auth metadata helper for profile-core composables.
+ *
+ * After BFF migration (#536i-3): returns empty metadata.
+ * The BFF proxy injects the Bearer token server-side from the httpOnly session cookie.
+ * Client JS never holds tokens — no authorization header sent from the browser.
+ */
+
+/**
+ * Get gRPC metadata for authenticated requests.
+ * In BFF mode: returns empty object — BFF adds Authorization: Bearer automatically.
+ */
+export function authMeta(): Record<string, string> {
+  return {};
+}

package/src/profile/components/ConsentManager.vue

@@ -0,0 +1,88 @@
+<template>
+  <div>
+    <q-banner v-if="error" class="bg-negative text-white q-mb-md" rounded dense>
+      {{ error }}
+    </q-banner>
+
+    <div v-if="loading" class="text-center q-pa-lg">
+      <q-spinner-dots size="32px" color="primary" />
+    </div>
+
+    <div
+      v-else-if="consents.length === 0"
+      class="text-center text-grey q-pa-lg"
+    >
+      No connected applications
+    </div>
+
+    <div v-else class="row q-gutter-md">
+      <div
+        v-for="consent in consents"
+        :key="consent.siteId"
+        class="col-12 col-sm-6 col-md-4"
+      >
+        <q-card flat bordered>
+          <q-card-section class="row items-center q-gutter-sm">
+            <q-avatar size="32px" color="grey-3">
+              <img
+                v-if="consent.siteFavicon"
+                :src="consent.siteFavicon"
+                :alt="consent.siteName"
+              />
+              <q-icon v-else name="sym_o_language" color="grey" />
+            </q-avatar>
+            <div class="col">
+              <div class="text-subtitle2">{{ consent.siteName }}</div>
+              <div class="text-caption text-grey">
+                Connected {{ formatDate(consent.connectedAt) }}
+              </div>
+            </div>
+            <q-badge
+              :color="consent.status === activeStatus ? 'positive' : 'grey'"
+              :label="consent.status === activeStatus ? 'Active' : 'Inactive'"
+            />
+          </q-card-section>
+          <q-separator />
+          <q-card-actions align="right">
+            <q-btn
+              flat
+              dense
+              label="Details"
+              color="primary"
+              @click="$emit('view-detail', consent.siteId)"
+            />
+            <q-btn
+              flat
+              dense
+              label="Disconnect"
+              color="negative"
+              @click="$emit('disconnect', consent.siteId)"
+            />
+          </q-card-actions>
+        </q-card>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { type ConsentInfo, ConsentStatus, Timestamp } from "../../index";
+
+defineProps<{
+  consents: ConsentInfo[];
+  loading: boolean;
+  error: string | null;
+}>();
+
+defineEmits<{
+  "view-detail": [siteId: string];
+  disconnect: [siteId: string];
+}>();
+
+const activeStatus = ConsentStatus.ACTIVE;
+
+function formatDate(ts?: { seconds: bigint; nanos: number }): string {
+  if (!ts) return "";
+  return Timestamp.toDate(ts).toLocaleDateString();
+}
+</script>

package/src/profile/components/ProfileEditor.vue

@@ -0,0 +1,146 @@
+<template>
+  <div>
+    <q-banner v-if="error" class="bg-negative text-white q-mb-md" rounded dense>
+      {{ error }}
+    </q-banner>
+
+    <div v-if="loading" class="text-center q-pa-lg">
+      <q-spinner-dots size="32px" color="primary" />
+    </div>
+
+    <q-form
+      v-else
+      @submit.prevent="$emit('save', formData)"
+      class="q-gutter-md"
+    >
+      <q-input
+        v-model="formData.givenName"
+        label="Given name"
+        outlined
+        :disable="saving"
+      >
+        <template v-slot:prepend>
+          <q-icon name="sym_o_badge" />
+        </template>
+      </q-input>
+
+      <q-input
+        v-model="formData.familyName"
+        label="Family name"
+        outlined
+        :disable="saving"
+      >
+        <template v-slot:prepend>
+          <q-icon name="sym_o_badge" />
+        </template>
+      </q-input>
+
+      <q-input
+        v-model="formData.middleName"
+        label="Middle name"
+        outlined
+        :disable="saving"
+      >
+        <template v-slot:prepend>
+          <q-icon name="sym_o_badge" />
+        </template>
+      </q-input>
+
+      <q-input
+        v-if="showAvatar"
+        v-model="formData.avatarUrl"
+        label="Avatar URL"
+        outlined
+        :disable="saving"
+      >
+        <template v-slot:prepend>
+          <q-icon name="sym_o_account_circle" />
+        </template>
+      </q-input>
+
+      <slot name="extra-fields" :form="formData" />
+
+      <q-input
+        v-if="username"
+        :model-value="username"
+        label="Username"
+        outlined
+        readonly
+        disable
+      >
+        <template v-slot:prepend>
+          <q-icon name="sym_o_alternate_email" />
+        </template>
+      </q-input>
+
+      <q-btn
+        type="submit"
+        label="Save changes"
+        color="primary"
+        :loading="saving"
+        :disable="!hasChanges"
+      />
+    </q-form>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { reactive, computed, watch } from "vue";
+import type { Profile } from "../../index";
+
+const props = withDefaults(
+  defineProps<{
+    profile: Profile | null;
+    loading: boolean;
+    saving: boolean;
+    error: string | null;
+    username?: string;
+    showAvatar?: boolean;
+  }>(),
+  {
+    username: "",
+    showAvatar: true,
+  },
+);
+
+defineEmits<{
+  save: [
+    data: {
+      givenName: string;
+      familyName: string;
+      middleName: string;
+      avatarUrl: string;
+    },
+  ];
+}>();
+
+const formData = reactive({
+  givenName: "",
+  familyName: "",
+  middleName: "",
+  avatarUrl: "",
+});
+
+const hasChanges = computed(() => {
+  if (!props.profile) return false;
+  return (
+    formData.givenName !== (props.profile.givenName || "") ||
+    formData.familyName !== (props.profile.familyName || "") ||
+    formData.middleName !== (props.profile.middleName || "") ||
+    formData.avatarUrl !== (props.profile.avatarUrl || "")
+  );
+});
+
+watch(
+  () => props.profile,
+  (p) => {
+    if (p) {
+      formData.givenName = p.givenName || "";
+      formData.familyName = p.familyName || "";
+      formData.middleName = p.middleName || "";
+      formData.avatarUrl = p.avatarUrl || "";
+    }
+  },
+  { immediate: true },
+);
+</script>

package/src/profile/components/SecuritySettings.vue

@@ -0,0 +1,170 @@
+<template>
+  <div>
+    <q-banner v-if="error" class="bg-negative text-white q-mb-md" rounded dense>
+      {{ error }}
+    </q-banner>
+
+    <!-- Security & Recoverability overview -->
+    <div class="row q-gutter-md q-mb-md">
+      <q-card flat bordered class="col">
+        <q-card-section>
+          <div class="text-subtitle2">Security level</div>
+          <div :class="`text-${securityColor}`" class="text-h5">
+            {{ securityLabel }}
+          </div>
+          <q-linear-progress
+            :value="securityProgress"
+            :color="securityColor"
+            class="q-mt-sm"
+          />
+          <div class="text-caption text-grey q-mt-xs">
+            {{ factorCount }} factor{{ factorCount !== 1 ? "s" : "" }},
+            {{ categories.size }} categor{{
+              categories.size !== 1 ? "ies" : "y"
+            }}
+          </div>
+        </q-card-section>
+      </q-card>
+
+      <q-card flat bordered class="col">
+        <q-card-section>
+          <div class="text-subtitle2">Recoverability</div>
+          <div :class="`text-${recoverabilityColor}`" class="text-h5">
+            {{ recoverabilityLabel }}
+          </div>
+          <q-linear-progress
+            :value="recoverabilityProgress"
+            :color="recoverabilityColor"
+            class="q-mt-sm"
+          />
+          <div class="text-caption text-grey q-mt-xs">
+            {{ recoveryMethods.length }} recovery method{{
+              recoveryMethods.length !== 1 ? "s" : ""
+            }}
+          </div>
+        </q-card-section>
+      </q-card>
+    </div>
+
+    <!-- Credentials list -->
+    <div v-if="loading" class="text-center q-pa-lg">
+      <q-spinner-dots size="32px" color="primary" />
+    </div>
+
+    <q-list v-else-if="credentials.length > 0" separator>
+      <q-item v-for="cred in credentials" :key="cred.id">
+        <q-item-section avatar>
+          <q-icon :name="credIcon(cred.type)" :color="credColor(cred.type)" />
+        </q-item-section>
+        <q-item-section>
+          <q-item-label>
+            {{ cred.label || credTypeName(cred.type) }}
+          </q-item-label>
+          <q-item-label caption>
+            {{ credTypeName(cred.type) }}
+            <span v-if="cred.lastUsedAt">
+              &middot; Last used {{ formatRelative(cred.lastUsedAt) }}
+            </span>
+          </q-item-label>
+        </q-item-section>
+        <q-item-section side>
+          <div class="row q-gutter-xs">
+            <q-btn
+              flat
+              dense
+              icon="sym_o_edit"
+              @click="$emit('edit-label', cred)"
+            />
+            <q-btn
+              flat
+              dense
+              icon="sym_o_delete"
+              color="negative"
+              @click="$emit('revoke', cred)"
+            />
+          </div>
+        </q-item-section>
+      </q-item>
+    </q-list>
+
+    <div v-else class="text-center text-grey q-pa-lg">
+      No credentials configured
+    </div>
+
+    <slot name="actions" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { type Credential, CredentialType, Timestamp } from "../../index";
+import type { FactorCategory } from "../composables/useSecurityLevel";
+
+defineProps<{
+  credentials: Credential[];
+  loading: boolean;
+  error: string | null;
+  securityLabel: string;
+  securityColor: string;
+  securityProgress: number;
+  factorCount: number;
+  categories: Set<FactorCategory>;
+  recoverabilityLabel: string;
+  recoverabilityColor: string;
+  recoverabilityProgress: number;
+  recoveryMethods: string[];
+}>();
+
+defineEmits<{
+  "edit-label": [cred: Credential];
+  revoke: [cred: Credential];
+}>();
+
+const CRED_ICONS: Partial<Record<CredentialType, string>> = {
+  [CredentialType.OPAQUE]: "sym_o_key",
+  [CredentialType.LEGACY_HASH]: "sym_o_key",
+  [CredentialType.TOTP]: "sym_o_timer",
+  [CredentialType.WEBAUTHN]: "sym_o_passkey",
+  [CredentialType.RECOVERY]: "sym_o_vpn_key",
+};
+
+function credIcon(type: CredentialType): string {
+  return CRED_ICONS[type] || "sym_o_security";
+}
+
+const CRED_COLORS: Partial<Record<CredentialType, string>> = {
+  [CredentialType.OPAQUE]: "blue",
+  [CredentialType.LEGACY_HASH]: "orange",
+  [CredentialType.TOTP]: "teal",
+  [CredentialType.WEBAUTHN]: "purple",
+  [CredentialType.RECOVERY]: "amber",
+};
+
+function credColor(type: CredentialType): string {
+  return CRED_COLORS[type] || "grey";
+}
+
+const CRED_TYPE_NAMES: Partial<Record<CredentialType, string>> = {
+  [CredentialType.OPAQUE]: "Password",
+  [CredentialType.LEGACY_HASH]: "Legacy password",
+  [CredentialType.TOTP]: "Authenticator app",
+  [CredentialType.WEBAUTHN]: "Passkey",
+  [CredentialType.RECOVERY]: "Recovery codes",
+};
+
+function credTypeName(type: CredentialType): string {
+  return CRED_TYPE_NAMES[type] || String(type);
+}
+
+function formatRelative(ts?: { seconds: bigint; nanos: number }): string {
+  if (!ts) return "";
+  const date = Timestamp.toDate(ts);
+  const diff = Date.now() - date.getTime();
+  const mins = Math.floor(diff / 60_000);
+  if (mins < 1) return "just now";
+  if (mins < 60) return `${mins}m ago`;
+  const hours = Math.floor(mins / 60);
+  if (hours < 24) return `${hours}h ago`;
+  const days = Math.floor(hours / 24);
+  return `${days}d ago`;
+}
+</script>