Files
zitadel/apps/login/next-env-vars.d.ts
T
Max PeintnerandGitHub 434aeb275a feat(login): comprehensive theme system (#10848)
# 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"
/>
2025-10-10 10:26:06 +02:00

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;
}
}