mirror of
https://github.com/unraid/api.git
synced 2026-01-30 12:39:14 -06:00
674323fd87
<!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** * API Key Authorization flow with consent screen, callback support, and a Tools page. * Schema-driven API Key creation UI with permission presets, templates, and Developer Authorization Link. * Effective Permissions preview and a new multi-select permission control. * **UI Improvements** * Mask/toggle API keys, copy-to-clipboard with toasts, improved select labels, new label styles, tab wrapping, and accordionized color controls. * **Documentation** * Public guide for the API Key authorization flow and scopes added. <!-- end of auto-generated comment: release notes by coderabbit.ai -->
68 lines
1.8 KiB
Vue
68 lines
1.8 KiB
Vue
<script setup lang="ts">
|
|
import { Button } from '@unraid/ui';
|
|
import type { PublicOidcProvider } from '~/composables/gql/graphql';
|
|
|
|
interface Props {
|
|
provider: PublicOidcProvider;
|
|
disabled?: boolean;
|
|
onClick: (providerId: string) => void;
|
|
}
|
|
|
|
const props = defineProps<Props>();
|
|
|
|
const handleClick = () => {
|
|
props.onClick(props.provider.id);
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<Button
|
|
:disabled="props.disabled"
|
|
:variant="(props.provider.buttonVariant as any) || 'outline'"
|
|
class="sso-provider-button w-full min-h-[2.5rem] h-auto py-2 px-4"
|
|
:style="props.provider.buttonStyle || ''"
|
|
@click="handleClick"
|
|
>
|
|
<div class="flex items-center justify-center gap-2 w-full">
|
|
<img
|
|
v-if="props.provider.buttonIcon"
|
|
:src="props.provider.buttonIcon"
|
|
class="w-6 h-6 sso-button-icon flex-shrink-0"
|
|
alt=""
|
|
aria-hidden="true"
|
|
>
|
|
<span class="text-center whitespace-normal">
|
|
{{ props.provider.buttonText || `Sign in with ${props.provider.name}` }}
|
|
</span>
|
|
</div>
|
|
</Button>
|
|
</template>
|
|
|
|
<style scoped>
|
|
/* For SVG images, prefer smooth rendering */
|
|
.sso-button-icon[src*="svg"],
|
|
.sso-button-icon[src*="data:image/svg"] {
|
|
image-rendering: auto;
|
|
image-rendering: smooth;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
}
|
|
|
|
/* For raster images, use crisp rendering */
|
|
.sso-button-icon:not([src*="svg"]):not([src*="data:image/svg"]) {
|
|
image-rendering: -webkit-optimize-contrast;
|
|
image-rendering: crisp-edges;
|
|
}
|
|
|
|
/* Automatic hover effects for buttons with custom background colors */
|
|
.sso-provider-button[style*="background-color"]:hover:not(:disabled) {
|
|
filter: brightness(0.9) !important;
|
|
}
|
|
|
|
.sso-provider-button[style*="background-color"]:active:not(:disabled) {
|
|
filter: brightness(0.8) !important;
|
|
transform: translateY(1px) !important;
|
|
}
|
|
</style>
|
|
|