feat: Add custom login background image and filter

[hexart]

Feature Description

This PR introduces the ability to customize the login page background image and apply image filters, providing more flexible UI customization options for Chainlit applications.

Screenshot

example: login_page_image_filter = "sepia-[1] hue-rotate-[310deg] blur-[2px]"

• Related issue Oauth Login Page - Use An Image Other Than Favicon - 2.0.2 #1697

Implementation Details

• Added login_page_image and login_page_image_filter to the configuration return in backend/chainlit/auth/__init__.py
• Add usage description in backend/chainlit/config.py
• Updated type definitions in libs/react-client/types/config.ts
• Added export function generateFilterStyle in frontend/src/lib/utils.ts for consistent filter processing
• Modified frontend/src/pages/Login.tsx to support custom image and filter

Key Improvements

• Added support for custom login page background image
• Implemented dynamic CSS filter generation
• Created a versatile utility function generateFilterStyle for filter parsing

Utility Function Benefit

The generateFilterStyle function in utils.ts provides a significant advantage beyond the login page:

• Can be reused across different components requiring CSS filter parsing
• Supports both light and dark mode filters
• Provides a centralized, type-safe method for filter configuration

Usage Example

// In Login.tsx or any other component
const { lightFilter, darkFilter } = generateFilterStyle(config?.ui?.login_page_image_filter);

Configuration Format

# In .chainlit/config.toml
login_page_image = "/public/custom-background.jpg"
login_page_image_filter = "dark:brightness-[0.5] light:grayscale-[0.7]"

Technical Details

• Implemented flexible filter parsing
• Supports filter types:
  • brightness
  • contrast
  • opacity
  • grayscale
  • blur
  • saturate
  • sepia
  • hue-rotate
  • invert
• Compatible with Tailwind CSS dynamic class generation