Перейти к основному контенту

Кастомизация внешнего вида Blitz Panel

В Blitz предусмотрена возможность кастомизации Blitz Panel в части отображения имени пользователя и пути ссылок.

Важно! Данная опция для Blitz Panel доступна только начиная с версии 5.32

изображение.png

Решение:
Необходимо создать файл /usr/share/identityblitz/blitz-panel/static/resources/extension.mjs и сделать blitz его владельцем. Далее добавить следующее содержимое:

/* eslint-disable @typescript-eslint/no-unsafe-member-access */
/* eslint-disable @typescript-eslint/no-unsafe-call */

export function install({ app }) {
  app.provide('BaseProps', {
    appLogo: 'https://typescript-eslint.io/img/logo.svg',
    helpURL: 'https://vuejs.org/guide/typescript/composition-api.html#typing-template-refs',
    style: 'style.css',
    logLevel: (context) => {
      if (context?.user?.claims?.email?.endsWith('@idblitz.ru')) {
        return 'debug';
      }

      return 'error';
    },
  });

  app.provide('ConfirmByQrCodeProps', {
    mobile: {
      appLink: 'https://identityblitz.ru/',
    },
  });

  app.provide('UserProps', {
    /**
     *
     * @param {object} user - данные пользователя
     * @param {object} [user.claims] - claims пользователя
     * @param {string} [user.subject] - subject пользователя
     * @returns String
     */
    displayName: (user) => {
      return `${user.claims.email}`;
    },
  });

  // Links will be displayed in the same order
  app.provide('UserMenuProps', {
    links: [
      {
        // icon?: 'icon-profile'; //optional
        type: 'profile',
        // url: '/blitz/profile', //optional
      },
      {
        textKey: 'google', // don't forget to add this key to custom messages
        type: 'custom',
        // icon?: 'icon-profile'; //optional
        url: 'https://www.google.com/',
      },
      {
        type: 'logout',
      },
    ],
  });
}

Параметры, которые доступны для изменения:

  • BaseProps.appLogo - Путь к файлу с логотипом;
  • BaseProps.helpURL - URL на кнопке "Справка";
  • BaseProps.style - Путь к файлу со стилями;
  • BaseProps.logLevel - Уровень логирования в консоли браузера. Возможные значения none, error, infodebug. Можно задавать в зависимости от контекста пользователя;
  • ConfirmByQrCodeProps.mobile.appLink - URL приложения для подтверждения входа по QR-коду;
  • UserProps - Отображаемые атрибуты; 
  • UserMenuProps.links - Ссылки в меню пользователя.


Версия решения: 5.32

Связанная документация: https://docs.identityblitz.ru/5.31/modules/blitz-panel.html