viur-ui 0.0.1

package/src/user/store.d.ts

@@ -0,0 +1,59 @@
+/**
+ * Werte des UserSkel, wie das Backend sie liefert. Nur die Felder, auf die sich
+ * der Store selbst stützt, sind benannt — der Rest bleibt offen, weil das Skel
+ * pro Projekt erweitert wird.
+ */
+export interface UserSkelValues {
+  key?: string
+  name?: string
+  firstname?: string
+  lastname?: string
+  access?: string[]
+  status?: number | string
+  [field: string]: unknown
+}
+
+export type UserStatus = "unknown" | "loading" | "authenticated" | "anonymous"
+
+export interface UserStoreState {
+  /** Angemeldeter Benutzer oder null. */
+  user: UserSkelValues | null
+  status: UserStatus
+  /** Renderer der Requests (Standard: VITE_DEFAULT_RENDERER oder "json"). */
+  renderer: string
+  googleClientId: string | null
+}
+
+/**
+ * Der Store, wie ihn `useUserStore()` liefert. Die Getter stehen als Werte da,
+ * weil Pinia die Refs eines Setup-Stores am Store-Objekt entpackt.
+ */
+export interface UserStore {
+  state: UserStoreState
+  isLoggedIn: boolean
+  /** Rechte des Benutzers (leer, wenn keiner angemeldet ist). */
+  access: string[]
+  isRoot: boolean
+  isAdmin: boolean
+  /** Root gilt immer als berechtigt. */
+  hasAccess: (right: string) => boolean
+  /** Kurzform des Namens für Oberflächen, "-" ohne Benutzer. */
+  shortName: string
+  configure: (options?: { renderer?: string; googleClientId?: string | null }) => void
+  /** Session laden. Ergibt null, wenn niemand angemeldet ist (401). */
+  fetchSelf: () => Promise<UserSkelValues | null>
+  logout: () => Promise<void>
+  reset: () => void
+  /**
+   * Klassische Kette (viur-core 3.9): einen Schritt per GET rendern — Endpunkt
+   * unterhalb von `user` (Standard "login") oder eine Server-URL. Liefert die
+   * normalisierte Antwort; wirft bei einem Transportfehler.
+   */
+  loadLoginStep: (target?: string) => Promise<Record<string, any>>
+  /** Primären Provider ohne eigenes Widget wählen; `next_url` ist sein erster Schritt. */
+  selectAuthenticationProvider: (provider: string) => Promise<Record<string, any>>
+  /** Google-Identity-Token anmelden; liefert die normalisierte Antwort. */
+  loginWithGoogle: (token: string) => Promise<Record<string, any> | null>
+}
+
+export declare function useUserStore(): UserStore

package/src/user/store.js

@@ -0,0 +1,183 @@
+import { defineStore } from "pinia"
+import { reactive, computed } from "vue"
+import { createControllerFetch, resetState } from "../request/index.js"
+
+// --------------------------------------------------------------------------- //
+// User / session store (ViUR core 3.9, envelope v2)                           //
+// --------------------------------------------------------------------------- //
+//
+// The LOGIN FLOW itself is driven generically by the multistep form component
+// — `<ViForm module="user" action="login" multistep>` — which walks the v2
+// envelope's `status`/`step`/`follow` chain (chooser → userpassword → 2FA →
+// success). This store owns what does NOT fit a generic form step:
+//   • the SESSION: the current user + access gating (`fetchSelf`, `logout`)
+//   • Google sign-in via the Identity SDK token (`loginWithGoogle`)
+//   • the requests of the CLASSIC chain (viur-core 3.9, v1 JSON) that are not a
+//     form submit (`loadLoginStep`, `selectAuthenticationProvider`)
+// On a completed login the consumer calls `fetchSelf()` to load the user.
+
+const DEFAULT_RENDERER = import.meta.env.VITE_DEFAULT_RENDERER || "json"
+
+/** Split a ViUR url into the parts createControllerFetch needs. */
+function specFromUrl(url) {
+  const parsed = new URL(url, window.location.origin)
+  const segments = parsed.pathname.split("/").filter(Boolean)
+  return {
+    renderer: segments[0],
+    controller: segments.slice(1, -1),
+    endpoint: segments.at(-1),
+    query: parsed.search ? parsed.search.slice(1) : "",
+  }
+}
+
+/** One request through the viur-ui request layer → normalized (v2) body.
+ *  Rejection propagates to the caller. */
+async function apiRequest(url, { method = "GET", data = {}, secure = false, messages = true } = {}) {
+  const spec = specFromUrl(url)
+  const request = createControllerFetch({ endpoint: spec.endpoint, method, secure })
+  const result = request(spec.controller, "/", data, {
+    renderer: spec.renderer,
+    query: spec.query,
+    immediate: false,
+    messages,
+  })
+  await result.execute()
+  return result.data.value
+}
+
+export const useUserStore = defineStore("viurUser", () => {
+  const state = reactive({
+    user: null, // UserSkel values, or null
+    status: "unknown", // "unknown" | "loading" | "authenticated" | "anonymous"
+    renderer: DEFAULT_RENDERER,
+    googleClientId: null,
+  })
+
+  const userUrl = (endpoint) => `/${state.renderer}/user/${endpoint}`
+
+  // ── getters ────────────────────────────────────────────────────────────────
+  const isLoggedIn = computed(() => state.status === "authenticated" && !!state.user)
+  const access = computed(() => (Array.isArray(state.user?.access) ? state.user.access : []))
+  const isRoot = computed(() => access.value.includes("root"))
+  const isAdmin = computed(() => isRoot.value || access.value.includes("admin"))
+  function hasAccess(right) {
+    return isRoot.value || access.value.includes(right)
+  }
+  const shortName = computed(() => {
+    const u = state.user
+    if (!u) return "-"
+    if (u.firstname && u.lastname) return `${u.firstname[0]}. ${u.lastname}`
+    return u.lastname || u.firstname || u.name || "-"
+  })
+
+  function configure({ renderer, googleClientId } = {}) {
+    if (renderer) state.renderer = renderer
+    if (googleClientId !== undefined) state.googleClientId = googleClientId
+  }
+
+  // ── session ──────────────────────────────────────────────────────────────────
+  async function fetchSelf() {
+    state.status = "loading"
+    try {
+      // a 401 here is the normal "not logged in" answer — no feedback message
+      const body = await apiRequest(userUrl("view/self"), { method: "GET", messages: false })
+      state.user = body?.data ?? null
+      state.status = state.user ? "authenticated" : "anonymous"
+      return state.user
+    } catch (error) {
+      // 401 → not logged in (the expected "anonymous" signal)
+      state.user = null
+      state.status = "anonymous"
+      return null
+    }
+  }
+
+  async function logout() {
+    let follow = null
+    try {
+      const body = await apiRequest(userUrl("logout"), { method: "POST", secure: true })
+      follow = body?.follow ?? null
+      state.user = null
+      state.status = "anonymous"
+      await resetState() // drop cached skeys + request cache
+    } catch (error) {
+      // clear the session locally regardless of a failed request
+      state.user = null
+      state.status = "anonymous"
+    }
+    if (typeof follow === "string" && /^https?:\/\//.test(follow)) {
+      window.location.href = follow
+    }
+  }
+
+  function reset() {
+    state.user = null
+    state.status = "unknown"
+  }
+
+  // ── classic login chain (viur-core 3.9) ─────────────────────────────────────
+  // viur-core 3.9 answers in the classic v1 shape: `/user/login` offers the
+  // providers, every further step is a form of its own whose url the server
+  // hands out (provider / second factor targets, `params.action_url`). The
+  // login screen reports failures itself, so these requests stay silent.
+
+  /** GET-render a step: an endpoint below `user` ("login") or a server url. */
+  async function loadLoginStep(target = "login") {
+    const url = /^(\/|https?:\/\/)/.test(target) ? target : userUrl(target)
+    return apiRequest(url, { method: "GET", messages: false })
+  }
+
+  /** Choose a primary provider without a widget of its own; the answer's
+   *  `next_url` is its first step. */
+  async function selectAuthenticationProvider(provider) {
+    return apiRequest(userUrl("select_authentication_provider"), {
+      method: "POST",
+      secure: true,
+      data: { provider },
+      messages: false,
+    })
+  }
+
+  // ── Google sign-in ────────────────────────────────────────────────────────────
+  // POST the GSI id-token. Returns the normalized envelope so the caller can
+  // complete (status success → the session was loaded via fetchSelf) or hand a
+  // 2FA `follow` to the multistep ViForm to continue in the generic flow.
+  // Returns null on a transport error.
+  async function loginWithGoogle(token) {
+    try {
+      const body = await apiRequest(userUrl("auth_googleaccount/login"), {
+        method: "POST",
+        secure: true,
+        data: { token },
+      })
+      if (body?.status === "success" || body?.action === "login_success") {
+        await fetchSelf()
+      }
+      return body
+    } catch (error) {
+      return null
+    }
+  }
+
+  return {
+    state,
+    // getters
+    isLoggedIn,
+    access,
+    isRoot,
+    isAdmin,
+    hasAccess,
+    shortName,
+    // config
+    configure,
+    // session
+    fetchSelf,
+    logout,
+    reset,
+    // classic login chain
+    loadLoginStep,
+    selectAuthenticationProvider,
+    // google
+    loginWithGoogle,
+  }
+})

package/src/webawesomeCompat.css

@@ -0,0 +1,72 @@
+:root {
+  --sl-spacing-x-small: var(--wa-space-xs);
+  --sl-spacing-small: var(--wa-space-s);
+  --sl-spacing-medium: var(--wa-space-m);
+  --sl-spacing-large: var(--wa-space-l);
+
+  --sl-border-radius-medium: var(--wa-border-radius-m);
+  --sl-input-border-radius-medium: var(--wa-form-control-border-radius);
+  --sl-input-height-medium: var(--wa-form-control-height);
+  --sl-input-font-size-medium: var(--wa-font-size-m);
+
+  --sl-color-neutral-0: var(--wa-color-surface-default);
+  --sl-color-neutral-50: var(--wa-color-neutral-95);
+  --sl-color-neutral-100: var(--wa-color-neutral-90);
+  --sl-color-neutral-200: var(--wa-color-neutral-fill-normal);
+  --sl-color-neutral-300: var(--wa-color-surface-border);
+  --sl-color-neutral-400: var(--wa-color-neutral-border-normal);
+  --sl-color-neutral-500: var(--wa-color-neutral-60);
+  --sl-color-neutral-600: var(--wa-color-neutral-50);
+  --sl-color-neutral-700: var(--wa-color-neutral-40);
+  --sl-color-neutral-800: var(--wa-color-neutral-20);
+  --sl-color-neutral-900: var(--wa-color-text-normal);
+
+  --sl-color-gray-200: var(--wa-color-neutral-95);
+  --sl-color-gray-400: var(--wa-color-neutral-60);
+  --sl-color-gray-500: var(--wa-color-neutral-border-normal);
+
+  --sl-color-primary-500: var(--wa-color-brand-50);
+  --sl-color-primary-600: var(--wa-color-brand-60);
+  --sl-color-success-500: var(--wa-color-success-50);
+  --sl-color-success-600: var(--wa-color-success-60);
+  --sl-color-danger-500: var(--wa-color-danger-50);
+  --sl-color-danger-700: var(--wa-color-danger-70);
+
+  --sl-color-info-50: var(--wa-color-brand-95);
+  --sl-color-info-300: var(--wa-color-brand-90);
+  --sl-color-info-500: var(--wa-color-brand-60);
+  --sl-color-info-900: var(--wa-color-brand-30);
+}
+
+wa-input,
+wa-textarea,
+wa-select,
+wa-combobox,
+wa-checkbox,
+wa-switch,
+wa-radio-group,
+wa-date-picker,
+wa-color-picker {
+  --wa-form-control-required-content: "";
+}
+
+wa-input::part(form-control-label),
+wa-input::part(label),
+wa-textarea::part(form-control-label),
+wa-textarea::part(label),
+wa-select::part(form-control-label),
+wa-select::part(label),
+wa-combobox::part(form-control-label),
+wa-combobox::part(label),
+wa-checkbox::part(form-control-label),
+wa-checkbox::part(label),
+wa-switch::part(form-control-label),
+wa-switch::part(label),
+wa-radio-group::part(form-control-label),
+wa-radio-group::part(label),
+wa-date-picker::part(form-control-label),
+wa-date-picker::part(label),
+wa-color-picker::part(form-control-label),
+wa-color-picker::part(label) {
+  display: none;
+}

package/src/webawesomeConfig.js

@@ -0,0 +1,61 @@
+// Theme & base styles
+import "@viur/webawesome/dist/styles/themes/awesome.css"
+import "@viur/webawesome/dist/styles/webawesome.css"
+import "./webawesomeCompat.css"
+
+// Components
+import "@viur/webawesome/dist/components/accordion/accordion"
+import "@viur/webawesome/dist/components/alert/alert"
+import "@viur/webawesome/dist/components/animation/animation"
+import "@viur/webawesome/dist/components/avatar/avatar"
+import "@viur/webawesome/dist/components/badge/badge"
+import "@viur/webawesome/dist/components/breadcrumb/breadcrumb"
+import "@viur/webawesome/dist/components/breadcrumb-item/breadcrumb-item"
+import "@viur/webawesome/dist/components/button/button"
+import "@viur/webawesome/dist/components/button-group/button-group"
+import "@viur/webawesome/dist/components/callout/callout"
+import "@viur/webawesome/dist/components/card/card"
+import "@viur/webawesome/dist/components/checkbox/checkbox"
+import "@viur/webawesome/dist/components/color-picker/color-picker"
+import "@viur/webawesome/dist/components/combobox/combobox"
+import "@viur/webawesome/dist/components/copy-button/copy-button"
+import "@viur/webawesome/dist/components/details/details"
+import "@viur/webawesome/dist/components/dialog/dialog"
+import "@viur/webawesome/dist/components/divider/divider"
+import "@viur/webawesome/dist/components/drawer/drawer"
+import "@viur/webawesome/dist/components/dropdown/dropdown"
+import "@viur/webawesome/dist/components/dropdown-item/dropdown-item"
+import "@viur/webawesome/dist/components/format-bytes/format-bytes"
+import "@viur/webawesome/dist/components/format-date/format-date"
+import "@viur/webawesome/dist/components/format-number/format-number"
+import "@viur/webawesome/dist/components/icon/icon"
+import "@viur/webawesome/dist/components/input/input"
+import "@viur/webawesome/dist/components/number-input/number-input"
+import "@viur/webawesome/dist/components/option/option"
+import "@viur/webawesome/dist/components/popover/popover"
+import "@viur/webawesome/dist/components/progress-bar/progress-bar"
+import "@viur/webawesome/dist/components/progress-ring/progress-ring"
+import "@viur/webawesome/dist/components/radio/radio"
+import "@viur/webawesome/dist/components/radio-group/radio-group"
+import "@viur/webawesome/dist/components/select/select"
+import "@viur/webawesome/dist/components/skeleton/skeleton"
+import "@viur/webawesome/dist/components/slider/slider"
+import "@viur/webawesome/dist/components/spinner/spinner"
+import "@viur/webawesome/dist/components/split-panel/split-panel"
+import "@viur/webawesome/dist/components/switch/switch"
+import "@viur/webawesome/dist/components/tab/tab"
+import "@viur/webawesome/dist/components/tab-group/tab-group"
+import "@viur/webawesome/dist/components/tab-panel/tab-panel"
+import "@viur/webawesome/dist/components/tag/tag"
+import "@viur/webawesome/dist/components/textarea/textarea"
+import "@viur/webawesome/dist/components/tooltip/tooltip"
+import "@viur/webawesome/dist/components/tree/tree"
+import "@viur/webawesome/dist/components/tree-item/tree-item"
+
+import { setBasePath } from "@viur/webawesome/dist/utilities/base-path"
+
+if (import.meta.env.DEV) {
+  setBasePath("/webawesome")
+} else {
+  setBasePath("webawesome")
+}