mirror of
https://github.com/andwati/zitadel.git
synced 2026-10-18 13:52:51 +00:00
# Which Problems Are Solved This PR introduces a comprehensive theme customization system for the login application with responsive behavior and enhanced visual options. <img width="1122" height="578" alt="Screenshot 2025-08-19 at 09 55 24" src="https://github.com/user-attachments/assets/cdcc8948-533d-4e13-bf45-fdcc24acfb2b" /> # How the Problems Are Solved ## ✨ Features Added - **🔄 Responsive Layout System**: Automatic switching between side-by-side and top-to-bottom layouts based on screen size - **🖼️ Background Image Support**: Custom background images configurable via environment variables - **⚙️ Theme Configuration**: Complete theme system with roundness, spacing, appearance, and layout options - **📱 Mobile-First Design**: Intelligent layout adaptation for different screen sizes - **🎯 Enhanced Typography**: Improved visual hierarchy with larger titles in side-by-side mode ## 🏗️ Architecture - **Server-Safe Theme Functions**: Theme configuration accessible on both server and client - **SSR-Safe Hooks**: Proper hydration handling for responsive layouts - **Component Separation**: Clear boundaries between server and client components - **Two-Section Layout**: Consistent content structure across all login pages ## 🔧 Configuration Options All theme options are configurable via environment variables: - `NEXT_PUBLIC_THEME_ROUNDNESS`: `edgy` | `mid` | `full` - `NEXT_PUBLIC_THEME_LAYOUT`: `side-by-side` | `top-to-bottom` - `NEXT_PUBLIC_THEME_APPEARANCE`: `flat` | `material` - `NEXT_PUBLIC_THEME_SPACING`: `regular` | `compact` - `NEXT_PUBLIC_THEME_BACKGROUND_IMAGE`: Custom background image URL ## 📄 Pages Updated Updated all major login pages to use the new two-section responsive layout: - Login name entry - Password verification - MFA verification - User registration - Account selection - Device authorization - Logout confirmation ## 📚 Documentation - **THEME_ARCHITECTURE.md**: Complete technical documentation of the theme system - **THEME_CUSTOMIZATION.md**: User-friendly guide with examples and troubleshooting ## 🚀 Benefits - **Better UX**: Responsive design that works seamlessly across all devices - **Brand Flexibility**: Easy customization to match any brand identity - **Maintainable Code**: Clean separation of concerns and well-documented architecture - **Future-Proof**: Extensible system for additional theme options <img width="580" height="680" alt="Screenshot 2025-08-19 at 09 22 23" src="https://github.com/user-attachments/assets/9de8da37-6d56-4fe9-b337-5d8ad2a3ba59" /> <img width="599" height="689" alt="Screenshot 2025-08-19 at 09 23 45" src="https://github.com/user-attachments/assets/26a30cc7-4017-4f4b-8b87-a49466c42b94" /> <img width="595" height="681" alt="Screenshot 2025-08-19 at 09 23 17" src="https://github.com/user-attachments/assets/a3d31088-4545-4f36-aafe-1aae1253d677" />
49 lines
1.6 KiB
TypeScript
49 lines
1.6 KiB
TypeScript
declare namespace NodeJS {
|
|
interface ProcessEnv {
|
|
// Allow any environment variable that matches the pattern
|
|
[key: `${string}_AUDIENCE`]: string; // The system api url
|
|
[key: `${string}_SYSTEM_USER_ID`]: string; // The service user id
|
|
[key: `${string}_SYSTEM_USER_PRIVATE_KEY`]: string; // The service user private key
|
|
|
|
AUDIENCE: string; // The fallback system api url
|
|
SYSTEM_USER_ID: string; // The fallback service user id
|
|
SYSTEM_USER_PRIVATE_KEY: string; // The fallback service user private key
|
|
|
|
/**
|
|
* The Zitadel API url
|
|
*/
|
|
ZITADEL_API_URL: string;
|
|
|
|
/**
|
|
* The service user token
|
|
* If ZITADEL_SERVICE_USER_TOKEN is set, its value is used.
|
|
* If ZITADEL_SERVICE_USER_TOKEN is not set but ZITADEL_SERVICE_USER_TOKEN_FILE is set, the application blocks until the file is created.
|
|
* As soon as the file exists, its content is read and ZITADEL_SERVICE_USER_TOKEN is set.
|
|
*/
|
|
ZITADEL_SERVICE_USER_TOKEN: string;
|
|
|
|
/**
|
|
* Optional: wheter a user must have verified email
|
|
*/
|
|
EMAIL_VERIFICATION: string;
|
|
|
|
/**
|
|
* Optional: custom request headers to be added to every request
|
|
* Split by comma, key value pairs separated by colon
|
|
* For example: to call the Zitadel API at an internal address, you can set:
|
|
* `CUSTOM_REQUEST_HEADERS=Host:http://zitadel-internal:8080`
|
|
*/
|
|
CUSTOM_REQUEST_HEADERS?: string;
|
|
|
|
/**
|
|
* The base path the app is served from, e.g. /ui/v2/login
|
|
*/
|
|
NEXT_PUBLIC_BASE_PATH: string;
|
|
|
|
/**
|
|
* Optional: The application name shown in the login and invite emails
|
|
*/
|
|
NEXT_PUBLIC_APPLICATION_NAME?: string;
|
|
}
|
|
}
|