team-planner/keycloak-theme

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)

# docker-compose.yml
services:
  keycloak:
    image: quay.io/keycloak/keycloak:latest
    volumes:
      - ./keycloak-theme/team-planner:/opt/keycloak/themes/team-planner

Вариант 2: Dockerfile (рекомендуется для production)

FROM quay.io/keycloak/keycloak:latest

COPY team-planner /opt/keycloak/themes/team-planner

Вариант 3: Kubernetes ConfigMap

# Создать 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:

/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:

: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.