103 lines
2.7 KiB
Markdown
103 lines
2.7 KiB
Markdown
# Team Planner Keycloak Theme
|
||
|
||
Кастомная тема для Keycloak, стилизованная под основное приложение Team Planner (Material UI).
|
||
|
||
## Структура
|
||
|
||
```
|
||
team-planner/
|
||
├── login/
|
||
│ ├── theme.properties # Настройки темы
|
||
│ ├── login.ftl # Шаблон страницы входа
|
||
│ ├── resources/
|
||
│ │ └── css/
|
||
│ │ └── login.css # Стили MUI
|
||
│ └── messages/
|
||
│ └── messages_ru.properties # Русские переводы
|
||
```
|
||
|
||
## Установка
|
||
|
||
### Вариант 1: Volume mount (рекомендуется для dev)
|
||
|
||
```yaml
|
||
# docker-compose.yml
|
||
services:
|
||
keycloak:
|
||
image: quay.io/keycloak/keycloak:latest
|
||
volumes:
|
||
- ./keycloak-theme/team-planner:/opt/keycloak/themes/team-planner
|
||
```
|
||
|
||
### Вариант 2: Dockerfile (рекомендуется для production)
|
||
|
||
```dockerfile
|
||
FROM quay.io/keycloak/keycloak:latest
|
||
|
||
COPY team-planner /opt/keycloak/themes/team-planner
|
||
```
|
||
|
||
### Вариант 3: Kubernetes ConfigMap
|
||
|
||
```bash
|
||
# Создать ConfigMap из директории темы
|
||
kubectl create configmap keycloak-theme \
|
||
--from-file=team-planner/login/ \
|
||
-n keycloak
|
||
|
||
# Примонтировать в deployment
|
||
```
|
||
|
||
## Активация темы
|
||
|
||
1. Войдите в Keycloak Admin Console
|
||
2. Выберите realm `team-planner`
|
||
3. Перейдите в **Realm Settings** → **Themes**
|
||
4. В поле **Login theme** выберите `team-planner`
|
||
5. Нажмите **Save**
|
||
|
||
Или через Keycloak CLI:
|
||
|
||
```bash
|
||
/opt/keycloak/bin/kcadm.sh update realms/team-planner \
|
||
-s loginTheme=team-planner \
|
||
--server http://localhost:8080 \
|
||
--realm master \
|
||
--user admin
|
||
```
|
||
|
||
## Разработка
|
||
|
||
Для разработки темы:
|
||
|
||
1. Запустите Keycloak с примонтированной темой
|
||
2. Включите кэширование темы в dev режиме:
|
||
```
|
||
KC_SPI_THEME_STATIC_MAX_AGE=-1
|
||
KC_SPI_THEME_CACHE_THEMES=false
|
||
KC_SPI_THEME_CACHE_TEMPLATES=false
|
||
```
|
||
3. Изменения в CSS/FTL применяются после обновления страницы
|
||
|
||
## Кастомизация
|
||
|
||
### Цвета
|
||
|
||
Основные цвета определены в CSS переменных в `login.css`:
|
||
|
||
```css
|
||
:root {
|
||
--primary-color: #1976d2; /* MUI primary */
|
||
--primary-hover: #1565c0;
|
||
--text-primary: rgba(0, 0, 0, 0.87);
|
||
--text-secondary: rgba(0, 0, 0, 0.6);
|
||
--background: #f5f5f5;
|
||
--surface: #ffffff;
|
||
}
|
||
```
|
||
|
||
### Тексты
|
||
|
||
Русские переводы в `messages/messages_ru.properties`.
|
||
Для других языков создайте `messages_XX.properties`.
|