@h-ai/cli 0.1.0-alpha.56 → 0.1.0-alpha.58

package/templates/apps/fullstack/packages/{{projectName}}-shared/src/lib/components/ProfileSettings.svelte.hbs

@@ -0,0 +1,57 @@
+<script lang="ts">
+  import type { ManagementStore } from '../stores/management-store.svelte.js'
+  import { Card } from '@h-ai/ui/components/compounds/index'
+  import { Avatar, Select } from '@h-ai/ui/components/primitives/index'
+  import { ChangePasswordForm, UserProfile } from '@h-ai/ui/components/scenes/iam/index'
+  import { getThemeInfo } from '@h-ai/ui/theme'
+  import * as m from '../paraglide/messages.js'
+  import { locales } from '../paraglide/runtime.js'
+  import { AVAILABLE_THEMES, themeStore } from '../stores/theme-store.svelte.js'
+
+  interface Props { store: ManagementStore }
+  const { store }: Props = $props()
+  const languageOptions = $derived(locales.filter(locale => store.info?.supportedLocales.includes(locale)).map(locale => ({ value: locale, label: locale === 'zh-CN' ? '简体中文' : 'English' })))
+  const themeOptions = AVAILABLE_THEMES.map(theme => ({ value: theme, label: getThemeInfo(theme)?.name ?? theme }))
+</script>
+
+<section class="space-y-5" data-testid="settings-page">
+  <div>
+    <h1 class="text-xl font-semibold tracking-tight">{m.settings_title()}</h1>
+    <p class="mt-1 text-sm text-base-content/50">{m.settings_description()}</p>
+  </div>
+  {#if store.user}
+    <div class="grid gap-5 xl:grid-cols-[0.75fr_1.25fr]">
+      <Card bordered shadow={false} class="h-fit">
+        <div class="flex items-center gap-4">
+          <Avatar name={store.user.displayName || store.user.username} src={store.user.avatarUrl} size="lg" />
+          <div class="min-w-0">
+            <h2 class="truncate text-lg font-semibold">{store.user.displayName || store.user.username}</h2>
+            <p class="text-sm text-base-content/50">@{store.user.username}</p>
+            <p class="mt-2 text-xs text-primary">{store.isAdmin ? m.role_admin() : m.role_user()}</p>
+          </div>
+        </div>
+        <p class="mt-4 text-xs leading-6 text-base-content/50">{m.avatar_hint()}</p>
+      </Card>
+      <Card title={m.profile_title()} bordered shadow={false}>
+        <UserProfile user={store.user} editable alwaysEditable fields={['avatar', 'displayName', 'email']} avatarAccept="image/png,image/jpeg,image/webp" avatarHint={m.avatar_hint()} loading={store.saving} onsubmit={data => store.saveProfile(data)} onavatarchange={file => void store.uploadAvatar(file)} data-testid="profile-form" />
+      </Card>
+    </div>
+    <Card title={m.preferences_title()} bordered shadow={false}>
+      <p class="mb-5 text-sm text-base-content/50">{m.preferences_description()}</p>
+      <div class="grid gap-6 sm:grid-cols-2">
+        <div class="space-y-2">
+          <label class="text-sm font-medium" for="profile-language">{m.settings_language()}</label>
+          <Select id="profile-language" value={store.locale} options={languageOptions} disabled={store.saving} onchange={locale => void store.savePreferences({ locale })} data-testid="profile-language" />
+        </div>
+        <div class="space-y-2">
+          <label class="text-sm font-medium" for="profile-theme">{m.settings_theme()}</label>
+          <Select id="profile-theme" value={themeStore.current} options={themeOptions} disabled={store.saving} onchange={theme => void store.savePreferences({ theme })} data-testid="profile-theme" />
+        </div>
+      </div>
+    </Card>
+    <Card title={m.password_title()} bordered shadow={false}>
+      <p class="mb-5 text-sm text-base-content/50">{m.password_rules()}</p>
+      <div class="max-w-xl"><ChangePasswordForm loading={store.saving} minPasswordLength={8} onsubmit={data => store.changePassword(data)} data-testid="password-form" /></div>
+    </Card>
+  {/if}
+</section>

package/templates/apps/fullstack/packages/{{projectName}}-shared/src/lib/components/RoleManagement.svelte.hbs

@@ -0,0 +1,49 @@
+<script lang="ts">
+  import type { AdminRole } from '{{fullstack.contractPackageName}}'
+  import type { ManagementStore } from '../stores/management-store.svelte.js'
+  import { Card, Modal } from '@h-ai/ui/components/compounds/index'
+  import { Badge, Button, Textarea } from '@h-ai/ui/components/primitives/index'
+  import * as m from '../paraglide/messages.js'
+
+  interface Props { store: ManagementStore }
+  const { store }: Props = $props()
+  let editing = $state<AdminRole | null>(null)
+  let description = $state('')
+  function edit(role: AdminRole) {
+    editing = role
+    description = role.description ?? ''
+    store.error = ''
+  }
+  async function save(event: SubmitEvent) {
+    event.preventDefault()
+    if (editing && await store.saveRole(editing.id, description))
+      editing = null
+  }
+</script>
+
+<section class="space-y-5" data-testid="roles-page">
+  <div class="flex items-center justify-between gap-3">
+    <div><h1 class="text-xl font-semibold tracking-tight">{m.nav_roles()}</h1><p class="mt-1 text-sm text-base-content/50">{m.roles_description()}</p></div>
+    <Button variant="outline" loading={store.loading} onclick={() => void store.loadRoles()}>{m.home_refresh()}</Button>
+  </div>
+  <div class="grid gap-5 md:grid-cols-2">
+    {#each store.roles as role (role.id)}
+      <Card bordered shadow={false}>
+        <div class="flex items-center justify-between gap-3"><h2 class="text-lg font-semibold">{role.code === 'admin' ? m.role_admin() : m.role_user()}</h2><Badge variant={role.code === 'admin' ? 'primary' : 'ghost'}>{role.code}</Badge></div>
+        <p class="mt-3 text-sm leading-6 text-base-content/60">{role.code === 'admin' ? m.role_admin_capabilities() : m.role_user_capabilities()}</p>
+        <p class="mt-4 text-xs text-base-content/45">{m.role_members({ count: String(role.userCount) })}</p>
+        {#if role.description}<p class="mt-3 text-sm text-base-content/70">{role.description}</p>{/if}
+        <div class="mt-5"><Button variant="outline" size="sm" onclick={() => edit(role)}>{m.role_edit()}</Button></div>
+      </Card>
+    {/each}
+  </div>
+</section>
+
+<Modal open={!!editing} title={m.role_edit()} onclose={() => { editing = null }} closeOnBackdrop={!store.saving} closeOnEscape={!store.saving}>
+  <form class="space-y-4" onsubmit={save}>
+    <label class="block text-sm font-medium" for="role-description">{m.role_description()}</label>
+    <Textarea id="role-description" bind:value={description} rows={4} data-testid="role-description" />
+    {#if store.error}<p class="text-sm text-error" role="alert">{store.error}</p>{/if}
+    <div class="flex justify-end gap-2"><Button variant="ghost" disabled={store.saving} onclick={() => { editing = null }}>{m.cancel()}</Button><Button type="submit" variant="primary" loading={store.saving}>{m.save()}</Button></div>
+  </form>
+</Modal>

package/templates/apps/fullstack/packages/{{projectName}}-shared/src/lib/components/UserManagement.svelte.hbs

@@ -0,0 +1,174 @@
+<script lang="ts">
+  import type { AdminRoleCode, AdminUser } from '{{fullstack.contractPackageName}}'
+  import type { ManagementStore } from '../stores/management-store.svelte.js'
+  import { Card, DataTable, FormField, Modal, Pagination, Skeleton } from '@h-ai/ui/components/compounds/index'
+  import { Avatar, Badge, BareInput, Button, Checkbox, Input, Select } from '@h-ai/ui/components/primitives/index'
+  import { PasswordInput } from '@h-ai/ui/components/scenes/iam/index'
+  import * as m from '../paraglide/messages.js'
+
+  interface Props { store: ManagementStore }
+  const { store }: Props = $props()
+
+  let editorOpen = $state(false)
+  let editing = $state<AdminUser | null>(null)
+  let deleting = $state<AdminUser | null>(null)
+  let username = $state('')
+  let displayName = $state('')
+  let email = $state('')
+  let password = $state('')
+  let role = $state<AdminRoleCode>('user')
+  let enabled = $state(true)
+  const columns = $derived([
+    { key: 'username', label: m.user_account() },
+    { key: 'email', label: m.user_email() },
+    { key: 'roles', label: m.user_role() },
+    { key: 'enabled', label: m.user_status() },
+    { key: 'createdAt', label: m.created_at() },
+  ])
+  const roleOptions = $derived([{ value: 'admin' as const, label: m.role_admin() }, { value: 'user' as const, label: m.role_user() }])
+  const statusOptions = $derived([{ value: 'all', label: m.all_statuses() }, { value: 'enabled', label: m.enabled() }, { value: 'disabled', label: m.disabled() }])
+
+  function openEditor(user: AdminUser | null) {
+    editing = user
+    username = user?.username ?? ''
+    displayName = user?.displayName ?? ''
+    email = user?.email ?? ''
+    password = ''
+    role = user?.roles.includes('admin') ? 'admin' : 'user'
+    enabled = user?.enabled ?? true
+    store.error = ''
+    editorOpen = true
+  }
+
+  async function submit(event: SubmitEvent) {
+    event.preventDefault()
+    const fields = { displayName: displayName.trim(), role, enabled }
+    const saved = await store.saveUser(editing ? { id: editing.id, email: email.trim(), ...fields } : { username: username.trim(), password, email: email.trim() || undefined, ...fields })
+    if (saved) {
+      editorOpen = false
+      password = ''
+    }
+  }
+
+  async function confirmDelete() {
+    if (deleting && await store.deleteUser(deleting))
+      deleting = null
+  }
+
+  function upload(user: AdminUser, event: Event & { currentTarget: HTMLInputElement }) {
+    const file = event.currentTarget.files?.[0]
+    if (file)
+      void store.uploadAvatar(file, user.id)
+    event.currentTarget.value = ''
+  }
+</script>
+
+<section class="space-y-5" data-testid="users-page">
+  <div class="flex flex-wrap items-center justify-between gap-3">
+    <div>
+      <h1 class="text-xl font-semibold tracking-tight">{m.nav_users()}</h1>
+      <p class="mt-1 text-sm text-base-content/50">{m.users_description()}</p>
+    </div>
+    <Button variant="primary" onclick={() => openEditor(null)} data-testid="create-user">{m.user_create()}</Button>
+  </div>
+  <div class="rounded-xl border border-base-content/8 bg-base-100">
+    <form class="flex flex-wrap items-center gap-3 border-b border-base-content/8 p-4" onsubmit={(event) => {
+      event.preventDefault()
+      void store.loadUsers()
+    }}>
+      <div class="min-w-52 flex-1">
+        <Input type="search" bind:value={store.usersSearch} placeholder={m.users_search()} data-testid="users-search" />
+      </div>
+      <div class="w-40"><Select bind:value={store.usersStatus} options={statusOptions} /></div>
+      <Button type="submit" variant="outline" disabled={store.loading}>{m.search()}</Button>
+    </form>
+    <div class="hidden overflow-x-auto md:block">
+      <DataTable data={store.users} {columns} keyField="id" loading={store.loading} striped={false}>
+        {#snippet cell(user, key)}
+          {#if key === 'username'}
+            <div class="flex items-center gap-3">
+              <Avatar name={user.displayName || user.username} src={user.avatarUrl} size="sm" />
+              <div><p class="font-medium">{user.displayName || user.username}</p><p class="text-xs text-base-content/45">@{user.username}</p></div>
+            </div>
+          {:else if key === 'roles'}
+            <Badge variant={user.roles.includes('admin') ? 'primary' : 'ghost'}>{user.roles.includes('admin') ? m.role_admin() : m.role_user()}</Badge>
+          {:else if key === 'enabled'}
+            <Badge variant={user.enabled ? 'success' : 'ghost'}>{user.enabled ? m.enabled() : m.disabled()}</Badge>
+          {:else if key === 'createdAt'}
+            <span class="whitespace-nowrap text-xs text-base-content/60">{store.formatDate(user.createdAt)}</span>
+          {:else if key === 'email'}
+            {user.email || '—'}
+          {/if}
+        {/snippet}
+        {#snippet actions(user)}
+          {@render userActions(user)}
+        {/snippet}
+      </DataTable>
+    </div>
+    <div class="space-y-3 p-4 md:hidden" data-testid="user-cards">
+      {#if store.loading}
+        <Skeleton count={3} />
+      {:else if store.users.length === 0}
+        <p class="py-8 text-center text-sm text-base-content/50">{m.users_empty()}</p>
+      {:else}
+        {#each store.users as user (user.id)}
+          <Card bordered shadow={false}>
+            <div class="flex items-center gap-3">
+              <Avatar name={user.displayName || user.username} src={user.avatarUrl} size="sm" />
+              <div class="min-w-0 flex-1"><p class="truncate font-medium">{user.displayName || user.username}</p><p class="truncate text-xs text-base-content/45">@{user.username}</p></div>
+              <Badge size="sm" variant={user.enabled ? 'success' : 'ghost'}>{user.enabled ? m.enabled() : m.disabled()}</Badge>
+            </div>
+            <p class="mt-3 truncate text-xs text-base-content/60" title={user.email}>{user.email || '—'}</p>
+            <div class="mt-3 flex flex-wrap items-center justify-between gap-2">
+              <Badge size="sm" variant={user.roles.includes('admin') ? 'primary' : 'ghost'}>{user.roles.includes('admin') ? m.role_admin() : m.role_user()}</Badge>
+              {@render userActions(user)}
+            </div>
+          </Card>
+        {/each}
+      {/if}
+    </div>
+    <div class="border-t border-base-content/8 p-4">
+      <Pagination page={store.usersPage} total={store.usersTotal} pageSize={store.pageSize} onchange={page => void store.loadUsers(page)} />
+    </div>
+  </div>
+</section>
+
+<Modal bind:open={editorOpen} title={editing ? m.user_edit() : m.user_create()} closeOnBackdrop={!store.saving} closeOnEscape={!store.saving} data-testid="user-editor">
+  <form class="space-y-4" onsubmit={submit}>
+    <FormField label={m.user_username()} required>
+      <Input bind:value={username} name="username" readonly={!!editing} required minlength={3} maxlength={64} pattern="[\w\-]+" autocomplete="off" data-testid="user-username" />
+    </FormField>
+    <FormField label={m.user_display_name()}><Input bind:value={displayName} maxlength={100} data-testid="user-display-name" /></FormField>
+    <FormField label={m.user_email()}><Input type="email" bind:value={email} data-testid="user-email" /></FormField>
+    {#if !editing}
+      <FormField label={m.user_password()} hint={m.initial_password_rules()} required><PasswordInput bind:value={password} autocomplete="new-password" minLength={8} data-testid="user-password" /></FormField>
+    {/if}
+    <FormField label={m.user_role()}><Select bind:value={role} options={roleOptions} disabled={editing?.id === store.user?.id} data-testid="user-role" /></FormField>
+    <Checkbox bind:checked={enabled} label={m.account_enabled()} disabled={editing?.id === store.user?.id} />
+    {#if store.error}<p class="text-sm text-error" role="alert">{store.error}</p>{/if}
+    <div class="flex justify-end gap-2 border-t border-base-content/8 pt-4">
+      <Button variant="ghost" disabled={store.saving} onclick={() => { editorOpen = false }}>{m.cancel()}</Button>
+      <Button type="submit" variant="primary" loading={store.saving} disabled={!editing && password.length < 8} data-testid="user-save">{m.save()}</Button>
+    </div>
+  </form>
+</Modal>
+
+{#snippet userActions(user: AdminUser)}
+  <div class="flex items-center gap-1" data-testid="user-actions" data-user={user.username}>
+    <Button size="xs" variant="ghost" onclick={() => openEditor(user)}>{m.edit()}</Button>
+    <label class="cursor-pointer rounded-lg px-2 py-1.5 text-xs text-primary hover:bg-primary/5">
+      {m.avatar_upload()}
+      <BareInput type="file" class="sr-only" accept="image/png,image/jpeg,image/webp" disabled={store.saving} onchange={event => upload(user, event)} data-testid="user-avatar-input" />
+    </label>
+    <Button size="xs" variant="ghost" class="text-error" disabled={user.id === store.user?.id || store.saving} onclick={() => { deleting = user }}>{m.delete()}</Button>
+  </div>
+{/snippet}
+
+<Modal open={!!deleting} title={m.user_delete_title()} onclose={() => { deleting = null }} closeOnBackdrop={!store.saving} closeOnEscape={!store.saving}>
+  <p class="text-sm leading-6 text-base-content/70">{m.user_delete_confirm({ name: deleting?.displayName || deleting?.username || '' })}</p>
+  {#if store.error}<p class="mt-3 text-sm text-error" role="alert">{store.error}</p>{/if}
+  {#snippet footer()}
+    <Button variant="ghost" disabled={store.saving} onclick={() => { deleting = null }}>{m.cancel()}</Button>
+    <Button variant="error" loading={store.saving} onclick={confirmDelete} data-testid="confirm-delete-user">{m.delete()}</Button>
+  {/snippet}
+</Modal>