@structured-id/ui-core 0.1.5

package/src/profile/components/SessionList.vue

@@ -0,0 +1,100 @@
+<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-list v-else-if="sessions.length > 0" separator>
+      <q-item v-for="session in sessions" :key="session.id">
+        <q-item-section avatar>
+          <q-icon :name="deviceIcon(session.userAgent)" size="sm" />
+        </q-item-section>
+        <q-item-section>
+          <q-item-label>
+            {{ parseUserAgent(session.userAgent) }}
+            <q-badge
+              v-if="isCurrentSession(session)"
+              color="positive"
+              label="Current"
+              class="q-ml-sm"
+            />
+          </q-item-label>
+          <q-item-label caption>
+            <span v-if="session.ipAddress">{{ session.ipAddress }}</span>
+            <span v-if="session.lastActivityAt">
+              &middot; {{ formatRelative(session.lastActivityAt) }}
+            </span>
+          </q-item-label>
+        </q-item-section>
+        <q-item-section side>
+          <q-btn
+            v-if="!isCurrentSession(session)"
+            flat
+            dense
+            color="negative"
+            icon="sym_o_logout"
+            :loading="revoking === session.id"
+            @click="$emit('revoke', session.id)"
+          />
+        </q-item-section>
+      </q-item>
+    </q-list>
+
+    <div v-else class="text-center text-grey q-pa-lg">No active sessions</div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { type Session, Timestamp } from "../../index";
+
+defineProps<{
+  sessions: Session[];
+  loading: boolean;
+  error: string | null;
+  revoking: string | null;
+  currentSessionId?: string;
+}>();
+
+defineEmits<{
+  revoke: [sessionId: string];
+}>();
+
+function isCurrentSession(session: Session): boolean {
+  return false; // Overridden via currentSessionId prop comparison
+}
+
+function deviceIcon(userAgent: string | undefined): string {
+  if (!userAgent) return "sym_o_devices";
+  const ua = userAgent.toLowerCase();
+  if (ua.includes("mobile") || ua.includes("android") || ua.includes("iphone"))
+    return "sym_o_smartphone";
+  if (ua.includes("tablet") || ua.includes("ipad")) return "sym_o_tablet";
+  return "sym_o_computer";
+}
+
+function parseUserAgent(userAgent: string | undefined): string {
+  if (!userAgent) return "Unknown device";
+  if (userAgent.includes("Chrome")) return "Chrome";
+  if (userAgent.includes("Firefox")) return "Firefox";
+  if (userAgent.includes("Safari")) return "Safari";
+  if (userAgent.includes("Edge")) return "Edge";
+  return userAgent.slice(0, 40);
+}
+
+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>

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

@@ -0,0 +1,80 @@
+import { describe, it, expect, vi } from "vitest";
+import { mount } from "@vue/test-utils";
+import { defineComponent } from "vue";
+import SidLoginForm from "./SidLoginForm.vue";
+
+// Stub all Quasar components as divs
+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-linear-progress": { template: "<div />" },
+  "q-icon": { template: "<span />" },
+  "q-form": {
+    template: "<form @submit.prevent=\"$emit('submit')\"><slot /></form>",
+    emits: ["submit"],
+  },
+  "q-input": defineComponent({
+    props: ["modelValue", "type", "label", "disable", "rules"],
+    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": defineComponent({
+    props: ["modelValue", "disable"],
+    emits: ["update:modelValue", "update:principal-type"],
+    template:
+      '<input :value="modelValue" @input="$emit(\'update:modelValue\', $event.target.value)" />',
+  }),
+  "router-link": { template: "<a><slot /></a>" },
+};
+
+const loginFn = vi.fn().mockResolvedValue({
+  accessToken: "tok",
+  expiresIn: 3600,
+  sessionId: "sess-1",
+});
+
+function mountLogin(props = {}) {
+  return mount(SidLoginForm, {
+    props: { loginFn, ...props },
+    global: { stubs: quasarStubs },
+  });
+}
+
+describe("SidLoginForm", () => {
+  it("renders with default title", () => {
+    const w = mountLogin();
+    expect(w.text()).toContain("Sign in");
+  });
+
+  it("renders custom title via prop", () => {
+    const w = mountLogin({ title: "Welcome back" });
+    expect(w.text()).toContain("Welcome back");
+  });
+
+  it("renders header slot", () => {
+    const w = mount(SidLoginForm, {
+      props: { loginFn },
+      global: { stubs: quasarStubs },
+      slots: { header: "<div>Custom Header</div>" },
+    });
+    expect(w.text()).toContain("Custom Header");
+  });
+
+  it("renders footer slot", () => {
+    const w = mount(SidLoginForm, {
+      props: { loginFn },
+      global: { stubs: quasarStubs },
+      slots: { footer: "<div>Custom Footer</div>" },
+    });
+    expect(w.text()).toContain("Custom Footer");
+  });
+
+  it("shows zero-knowledge explainer", () => {
+    const w = mountLogin();
+    expect(w.text()).toContain("Your password never leaves this device");
+  });
+});

package/src/profile/components/SidLoginForm.vue

@@ -0,0 +1,230 @@
+<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>
+
+      <slot name="progress" :step="opaqueStep" :label="opaqueStepLabel">
+        <div v-if="opaqueStep" class="q-mb-md">
+          <q-linear-progress
+            :value="opaqueStep / 3"
+            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" />
+            {{ opaqueStepLabel }}
+          </div>
+        </div>
+      </slot>
+
+      <q-form @submit.prevent="onSubmit" class="q-gutter-y-md">
+        <sid-principal-input
+          v-model="identifier"
+          :disable="loading"
+          :label="identifierLabel"
+          @update:principal-type="principalType = $event"
+        />
+
+        <q-input
+          v-model="password"
+          :type="showPassword ? 'text' : 'password'"
+          :label="passwordLabel"
+          outlined
+          :disable="loading"
+          :rules="[(v: string) => !!v || passwordRequiredText]"
+        >
+          <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>
+
+        <slot name="extra-fields" />
+
+        <q-btn
+          type="submit"
+          :label="submitLabel"
+          color="primary"
+          class="full-width"
+          :loading="loading"
+          :disable="!identifier || !password"
+        />
+      </q-form>
+
+      <slot name="below-form">
+        <div v-if="showForgotPassword" class="text-right q-mt-xs">
+          <router-link
+            v-if="forgotPasswordUrl"
+            :to="forgotPasswordUrl"
+            class="text-caption text-primary"
+          >
+            {{ forgotPasswordText }}
+          </router-link>
+          <a
+            v-else
+            class="text-caption text-primary cursor-pointer"
+            @click="$emit('forgot-password')"
+          >
+            {{ forgotPasswordText }}
+          </a>
+        </div>
+      </slot>
+
+      <div class="text-caption text-grey-6 text-center q-mt-md">
+        <q-icon name="sym_o_shield" size="xs" class="q-mr-xs" />
+        {{ securityNotice }}
+      </div>
+
+      <slot name="links">
+        <div v-if="registerUrl" class="text-center q-mt-md text-body2">
+          {{ noAccountText }}
+          <router-link :to="registerUrl" class="text-primary">
+            {{ registerLinkText }}
+          </router-link>
+        </div>
+      </slot>
+    </q-card-section>
+
+    <slot name="footer" />
+  </q-card>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+import { SidPrincipalInput } from "../../quasar";
+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;
+    /** Password required validation text */
+    passwordRequiredText?: string;
+    /** Show "Forgot password?" link */
+    showForgotPassword?: boolean;
+    /** Forgot password link text */
+    forgotPasswordText?: string;
+    /** Forgot password route (if set, renders router-link instead of emitting event) */
+    forgotPasswordUrl?: string;
+    /** Security disclaimer text */
+    securityNotice?: string;
+    /** "Don't have an account?" text */
+    noAccountText?: string;
+    /** "Create one" link text */
+    registerLinkText?: string;
+    /** Route to registration page (if set, shows register link) */
+    registerUrl?: string;
+    /** OPAQUE step labels (step 1-3) */
+    opaqueStepLabels?: Record<number, string>;
+    /** External login function — receives (identifier, password, stepCallback) */
+    loginFn: (
+      identifier: string,
+      password: string,
+      onStep?: (step: number) => void,
+    ) => Promise<{
+      accessToken: string;
+      expiresIn: number;
+      sessionId?: string;
+    }>;
+  }>(),
+  {
+    title: "Sign in",
+    subtitle: "Enter your email, phone, or username to continue",
+    submitLabel: "Sign in",
+    identifierLabel: "Email, phone, or username",
+    passwordLabel: "Password",
+    passwordRequiredText: "Required",
+    showForgotPassword: true,
+    forgotPasswordText: "Forgot password?",
+    forgotPasswordUrl: undefined,
+    securityNotice: "Your password never leaves this device",
+    noAccountText: "Don\u2019t have an account?",
+    registerLinkText: "Create one",
+    registerUrl: undefined,
+    opaqueStepLabels: () => ({
+      1: "Computing credential request\u2026",
+      2: "Verifying with server (password stays local)\u2026",
+      3: "Establishing secure session\u2026",
+    }),
+  },
+);
+
+const emit = defineEmits<{
+  success: [
+    result: { accessToken: string; expiresIn: number; sessionId?: string },
+  ];
+  error: [error: Error];
+  "forgot-password": [];
+}>();
+
+const identifier = ref("");
+const principalType = ref<PrincipalType>("unknown");
+const password = ref("");
+const showPassword = ref(false);
+const loading = ref(false);
+const error = ref<string | null>(null);
+const opaqueStep = ref(0);
+const opaqueStepLabel = ref("");
+
+function setStep(step: number) {
+  opaqueStep.value = step;
+  opaqueStepLabel.value = props.opaqueStepLabels?.[step] || "";
+}
+
+async function onSubmit() {
+  loading.value = true;
+  error.value = null;
+  opaqueStep.value = 0;
+
+  try {
+    const normalized = normalizePrincipal(identifier.value);
+    setStep(1);
+    const result = await props.loginFn(
+      normalized.value,
+      password.value,
+      setStep,
+    );
+    emit("success", result);
+  } catch (e) {
+    const err = e instanceof Error ? e : new Error("Login failed");
+    error.value = err.message;
+    emit("error", err);
+  } finally {
+    loading.value = false;
+    opaqueStep.value = 0;
+  }
+}
+</script>

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

@@ -0,0 +1,127 @@
+import { describe, it, expect } from "vitest";
+import { mount } from "@vue/test-utils";
+import SidMfaChallenge from "./SidMfaChallenge.vue";
+import type { MfaMethod } from "./SidMfaChallenge.vue";
+
+/** Exposed API declared via defineExpose() in SidMfaChallenge.vue. */
+interface MfaChallengeExposed {
+  setSuccess: () => void;
+  setError: (message: string) => void;
+  reset: () => void;
+}
+
+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-list": { template: "<div><slot /></div>" },
+  "q-item": {
+    template: "<div @click=\"$emit('click')\"><slot /></div>",
+    emits: ["click"],
+  },
+  "q-item-section": { template: "<div><slot /></div>" },
+  "q-item-label": { template: "<div><slot /></div>" },
+  "q-badge": { 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>' },
+  "q-spinner-dots": { template: "<span />" },
+};
+
+const methods: MfaMethod[] = [
+  {
+    type: "totp",
+    icon: "sym_o_timer",
+    label: "Authenticator app",
+    description: "Use your TOTP app",
+    color: "primary",
+    recommended: true,
+  },
+  {
+    type: "webauthn",
+    icon: "sym_o_passkey",
+    label: "Passkey",
+    description: "Use a passkey",
+    color: "purple",
+  },
+  {
+    type: "recovery",
+    icon: "sym_o_key",
+    label: "Recovery code",
+    description: "Use a recovery code",
+    color: "warning",
+  },
+];
+
+function mountChallenge(props = {}) {
+  return mount(SidMfaChallenge, {
+    props: { methods, ...props },
+    global: { stubs: quasarStubs },
+  });
+}
+
+describe("SidMfaChallenge", () => {
+  it("renders method selection by default", () => {
+    const w = mountChallenge();
+    expect(w.text()).toContain("Authenticator app");
+    expect(w.text()).toContain("Passkey");
+    expect(w.text()).toContain("Recovery code");
+  });
+
+  it("renders default title", () => {
+    const w = mountChallenge();
+    expect(w.text()).toContain("Additional verification required");
+  });
+
+  it("renders custom title", () => {
+    const w = mountChallenge({ title: "Verify identity" });
+    expect(w.text()).toContain("Verify identity");
+  });
+
+  it("renders custom reason", () => {
+    const w = mountChallenge({ reason: "Deleting your account" });
+    expect(w.text()).toContain("Deleting your account");
+  });
+
+  it("exposes phase control methods", () => {
+    const w = mountChallenge();
+    expect(typeof w.vm.setLoading).toBe("function");
+    expect(typeof w.vm.setError).toBe("function");
+    expect(typeof w.vm.setSuccess).toBe("function");
+    expect(typeof w.vm.reset).toBe("function");
+  });
+
+  it("setSuccess transitions to success phase", async () => {
+    const w = mountChallenge();
+    (w.vm as unknown as MfaChallengeExposed).setSuccess();
+    await w.vm.$nextTick();
+    expect(w.text()).toContain("Verified");
+  });
+
+  it("setError shows error banner", async () => {
+    const w = mountChallenge();
+    (w.vm as unknown as MfaChallengeExposed).setError("Invalid code");
+    await w.vm.$nextTick();
+    expect(w.text()).toContain("Invalid code");
+  });
+
+  it("reset returns to method selection", async () => {
+    const w = mountChallenge();
+    (w.vm as unknown as MfaChallengeExposed).setSuccess();
+    await w.vm.$nextTick();
+    expect(w.text()).toContain("Verified");
+    (w.vm as unknown as MfaChallengeExposed).reset();
+    await w.vm.$nextTick();
+    expect(w.text()).toContain("Authenticator app");
+  });
+});