Files
api/web/components/Auth.ce.vue
Michael Datelle 0e008aaf1e test: setup initial test, config and testing libraries (#1309)
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

- **New Features**
- Introduced comprehensive testing utilities for Vue components
utilizing the composition API.
- Enhanced testing coverage for the `DownloadApiLogs` and `KeyActions`
components, ensuring robust functionality and user interaction
validation.
- Added mock implementations for various libraries and components to
facilitate isolated unit testing.
- Improved flexibility in the `DummyServerSwitcher` component's input
handling.
- Added a new test setup file to configure the testing environment for
Vue applications.
- Added new test files for `AuthComponent` and `KeyActions` with
comprehensive test cases.
- Introduced a new mock implementation for UI components to streamline
testing.
- Added a new mock implementation for the `useRequest` composable to
prevent hanging issues during tests.
- Added a new mock implementation for the server store used by the Auth
component.

- **Bug Fixes**
- Improved sanitization process to block inline styles for a safer and
more consistent display.

- **Documentation**
- Added README documentation for Vue Component Testing Utilities,
detailing usage and examples.
  - Updated ESLint configuration to ignore coverage directory files.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: mdatelle <mike@datelle.net>
Co-authored-by: Eli Bosley <ekbosley@gmail.com>
2025-04-03 15:50:49 -04:00

39 lines
1.0 KiB
Vue

<script lang="ts" setup>
import { useI18n } from 'vue-i18n';
import { storeToRefs } from 'pinia';
import { BrandButton } from '@unraid/ui';
import { useServerStore } from '~/store/server';
const { t } = useI18n();
const serverStore = useServerStore();
const { authAction, stateData } = storeToRefs(serverStore);
</script>
<template>
<div class="whitespace-normal flex flex-col gap-y-16px max-w-3xl">
<span v-if="stateData.error" class="text-unraid-red font-semibold">
<h3 class="text-16px mb-8px">{{ t(stateData.heading) }}</h3>
<span class="text-14px" v-html="t(stateData.message)" />
</span>
<span v-if="authAction">
<BrandButton
:disabled="authAction?.disabled"
:icon="authAction.icon"
size="12px"
:text="t(authAction.text)"
:title="authAction?.title ? t(authAction?.title) : undefined"
@click="authAction.click?.()"
/>
</span>
</div>
</template>
<style lang="postcss">
/* Import unraid-ui globals first */
@import '@unraid/ui/styles';
@import '~/assets/main.css';
</style>