Files
api/web/pages/webComponents.vue
Eli Bosley 0788756b91 feat: add management page for API keys (#1408)
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

- **New Features**
- Added ability to update existing API keys, including name,
description, roles, and permissions, through the UI and GraphQL API.
- Introduced a modal-based interface for creating and editing API keys
with improved role and permission selection.
- Added a new API Key Manager page and custom element for centralized
API key management.
- Enhanced API key listing with detailed views, role badges, permission
counters, and copy-to-clipboard functionality.
- Introduced reusable dialog components for consistent modal
experiences.
- Added plugin management capabilities with mutations to add or remove
plugins.
- Added comprehensive support for managing remote access, network URLs,
and API key updates within the GraphQL schema.

- **Bug Fixes**
- Improved error handling and display for API key creation and update
operations.

- **Refactor**
- Centralized API key modal and editing state management using a
dedicated store.
- Updated GraphQL queries and mutations to use reusable fragments for
API key data.
- Removed deprecated or redundant remote access and allowed origins
configuration components and queries.
- Simplified and updated input types for connect settings and remote
access.

- **Tests**
- Added comprehensive tests for API key update logic and improved
coverage for API key loading.

- **Chores**
- Updated configuration files and cleaned up unused schema and component
files.
  - Added new dialog components and centralized exports for dialogs.
- Improved ESLint configuration and import statements for better type
handling.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2025-06-18 11:18:36 -04:00

67 lines
2.9 KiB
Vue

<script lang="ts" setup>
import { useDummyServerStore } from '~/_data/serverState';
import { Toaster } from '@unraid/ui';
const serverStore = useDummyServerStore();
const { serverState } = storeToRefs(serverStore);
const { registerEntry } = useCustomElements();
onBeforeMount(() => {
registerEntry('UnraidComponents');
});
</script>
<template>
<client-only>
<unraid-i18n-host
class="flex flex-col gap-6 p-6 mx-auto text-black bg-white dark:text-white dark:bg-black"
>
<h2 class="text-xl font-semibold font-mono">Web Components</h2>
<h3 class="text-lg font-semibold font-mono">UserProfileCe</h3>
<header class="bg-header-background-color py-4 flex flex-row justify-between items-center">
<div class="inline-flex flex-col gap-4 items-start px-4">
<a href="https://unraid.net" target="_blank">
<BrandLogo class="w-[100px] sm:w-[150px]" />
</a>
<HeaderOsVersionCe />
</div>
<unraid-user-profile :server="JSON.stringify(serverState)" />
</header>
<hr class="border-black dark:border-white" />
<h3 class="text-lg font-semibold font-mono">ConnectSettingsCe</h3>
<ConnectSettingsCe />
<hr class="border-black dark:border-white" />
<h3 class="text-lg font-semibold font-mono">DownloadApiLogsCe</h3>
<unraid-download-api-logs />
<hr class="border-black dark:border-white" />
<h3 class="text-lg font-semibold font-mono">AuthCe</h3>
<unraid-auth />
<hr class="border-black dark:border-white" />
<h3 class="text-lg font-semibold font-mono">WanIpCheckCe</h3>
<unraid-wan-ip-check php-wan-ip="47.184.85.45" />
<hr class="border-black dark:border-white" />
<h3 class="text-lg font-semibold font-mono">HeaderOsVersion</h3>
<unraid-header-os-version />
<hr class="border-black dark:border-white" />
<h3 class="text-lg font-semibold font-mono">UpdateOsCe</h3>
<unraid-update-os />
<hr class="border-black dark:border-white" />
<h3 class="text-lg font-semibold font-mono">DowngradeOsCe</h3>
<unraid-downgrade-os restore-release-date="2022-10-10" restore-version="6.11.2" />
<hr class="border-black dark:border-white" />
<h3 class="text-lg font-semibold font-mono">RegistrationCe</h3>
<unraid-registration />
<hr class="border-black dark:border-white" />
<h3 class="text-lg font-semibold font-mono">ModalsCe</h3>
<!-- uncomment to test modals <unraid-modals />-->
<hr class="border-black dark:border-white" />
<h3 class="text-lg font-semibold font-mono">SSOSignInButtonCe</h3>
<unraid-sso-button :ssoenabled="serverState.ssoEnabled" />
<hr class="border-black dark:border-white" />
<h3 class="text-lg font-semibold font-mono">ApiKeyManagerCe</h3>
<unraid-api-key-manager />
</unraid-i18n-host>
<Toaster rich-colors close-button />
</client-only>
</template>