Auth Cabinet Plugin

Клиентский плагин регистрации, входа и личного кабинета. Его можно подключать как компактную кнопку в header, в боковую панель или в любую другую часть сайта.

Быстрое подключение

Самый простой вариант - один script тег в том месте, где должна появиться кнопка:

<script
  src="auth-plugin.js"
  data-auth-cabinet
  data-auth-mode="compact"
  data-app-name="Кабинет клиента">
</script>

Плагин сам подключит auth-plugin.css, если файл лежит рядом с auth-plugin.js.

Кастомизация цветов

Цвета можно настроить через data-* атрибуты:

<script
  src="auth-plugin.js"
  data-auth-cabinet
  data-auth-mode="compact"
  data-app-name="Кабинет клиента"
  data-primary="#0f766e"
  data-primary-dark="#115e59"
  data-accent="#f59e0b"
  data-bg="#f4f7fb"
  data-card="#ffffff"
  data-text="#10201f"
  data-muted="#667085"
  data-border="#d9e1ec">
</script>

Доступные настройки:

• data-primary - основной цвет кнопок.
• data-primary-dark - цвет кнопок при наведении.
• data-accent - дополнительный цвет, используется в аватаре.
• data-bg - фоновый цвет.
• data-card - цвет карточки.
• data-text - основной цвет текста.
• data-muted - вторичный цвет текста.
• data-border - цвет границ.

Подключение через контейнер

Если удобнее отделить место вставки от подключения скрипта:

<div
  data-auth-cabinet
  data-auth-mode="compact"
  data-app-name="Кабинет клиента">
</div>

<script src="auth-plugin.js"></script>

Подключение через iframe

Для полной изоляции стилей и разметки можно использовать iframe:

<iframe
  src="auth-frame.html?appName=Кабинет%20клиента"
  title="Кабинет клиента"
  style="width: 480px; min-height: 620px; border: 0;">
</iframe>

Iframe полезен, если плагин нужно вставлять на сайты, где нельзя контролировать CSS или JS окружение.

Удаленное подключение

Плагин можно подключать не локально, а с удаленного адреса:

<script
  src="https://cdn.example.com/auth-plugin/v1.0.0/auth-plugin.js"
  data-auth-cabinet
  data-auth-mode="compact"
  data-app-name="Кабинет клиента">
</script>