e07336dd9f
Major authentication system improvements: - Remove deprecated DISABLE_AUTH environment variable support - Update all documentation to remove DISABLE_AUTH references - Add auth recovery instructions to docs (create .auth_recovery file) - Improve first-run setup and Quick Security wizard flows - Enhance login page with better error messaging and validation - Refactor Docker hosts view with new unified table and tree components - Add useDebouncedValue hook for better search performance - Improve Settings page with better security configuration UX - Update mock mode and development scripts for consistency - Add ScrollableTable persistence and improved responsive design Backend changes: - Remove DISABLE_AUTH flag detection and handling - Improve auth configuration validation and error messages - Enhance security status endpoint responses - Update router integration tests Frontend changes: - New Docker components: DockerUnifiedTable, DockerTree, DockerSummaryStats - Better connection status indicator positioning - Improved authentication state management - Enhanced CSRF and session handling - Better loading states and error recovery This completes the migration away from the insecure DISABLE_AUTH pattern toward proper authentication with recovery mechanisms.
50 lines
1.5 KiB
TypeScript
50 lines
1.5 KiB
TypeScript
import { JSX, splitProps, mergeProps } from 'solid-js';
|
|
|
|
type Tone = 'default' | 'muted' | 'info' | 'success' | 'warning' | 'danger';
|
|
type Padding = 'none' | 'sm' | 'md' | 'lg';
|
|
|
|
type CardProps = {
|
|
tone?: Tone;
|
|
padding?: Padding;
|
|
hoverable?: boolean;
|
|
border?: boolean;
|
|
} & JSX.HTMLAttributes<HTMLDivElement>;
|
|
|
|
const toneClassMap: Record<Tone, string> = {
|
|
default: 'bg-white dark:bg-gray-800',
|
|
muted: 'bg-gray-50 dark:bg-gray-800/80',
|
|
info: 'bg-blue-50/70 dark:bg-blue-900/20',
|
|
success: 'bg-green-50/70 dark:bg-green-900/20',
|
|
warning: 'bg-amber-50/80 dark:bg-amber-900/20',
|
|
danger: 'bg-red-50/80 dark:bg-red-900/20',
|
|
};
|
|
|
|
const paddingClassMap: Record<Padding, string> = {
|
|
none: 'p-0',
|
|
sm: 'p-3',
|
|
md: 'p-4',
|
|
lg: 'p-6',
|
|
};
|
|
|
|
export function Card(props: CardProps) {
|
|
const merged = mergeProps(
|
|
{ tone: 'default' as Tone, padding: 'md' as Padding, hoverable: false, border: true },
|
|
props,
|
|
);
|
|
const [local, rest] = splitProps(merged, ['tone', 'padding', 'hoverable', 'border', 'class']);
|
|
|
|
const baseClass = 'rounded-lg shadow-sm transition-shadow duration-200 max-w-full';
|
|
const toneClass = toneClassMap[local.tone];
|
|
const paddingClass = paddingClassMap[local.padding];
|
|
const borderClass = local.border ? 'border border-gray-200 dark:border-gray-700' : '';
|
|
const hoverClass = local.hoverable ? 'hover:shadow-md' : '';
|
|
|
|
return (
|
|
<div
|
|
class={`${baseClass} ${toneClass} ${paddingClass} ${borderClass} ${hoverClass} ${local.class ?? ''}`.trim()}
|
|
{...rest}
|
|
/>
|
|
);
|
|
}
|
|
|
|
export default Card;
|