Настройка страницы авторизации
Данный раздел описывает расширение, которое содержит пример внедрения своего кода на страницу входа Web-клиента, а именно:
-
Выполнение кода при определённых событиях — тип
LoginEvents
в модуле@docsvision/webclient/Account
. -
Подмена текста на странице — объект
defaultLoginResources
в модуле@docsvision/webclient/Account
. -
Замена компонентов страницы — объект
LoginView
в модуле@docsvision/webclient/Account/LoginContainer
. -
Добавление стилей на страницу.
Данный раздел документации описывает настройку внешнего вида страницы авторизации. Инструкцию по добавлению расширений авторизации см. в документации модуля "Платформа". |
Чтобы изменить вид страницы входа, разработайте собственные скрипты По инструкции ниже и поместите их в папку /lib/docsvision/webclient/Content/Account/Scripts
.
Ссылка на пример на GitHub: LoginPage.
Дополнительная информация
В примере используется UMD система модулей.
в результате сборки получается файл с расширением .js
, который нужно поместить в папку DocsVision/WebClient/Content/Account/Scripts
, код будет выполнен перед загрузкой приложения и выполнением ReactDOM.render()
.
Чтобы добавить стили, нужно создать файл или файлы с расширением .сss
и положить в папку DocsVision/WebClient/Content/Account/Styles
, стили загружаются после основных стилей страницы.
Входной точкой для внедрения кода на страницу является объект loginExtensionManager
доступный глобально через объект windows
.
Код расширения будет выполнен перед загрузкой приложения и выполнением ReactDOM.render()
, но после загрузки библиотек React
и ReactDOM
.
Методы loginExtensionManager
, а также возможные ресурсы, компоненты и события для замены обозначены в виде типов и интерфейсов в модуле @docsvision/webclient/Account
.
Процесс настройки
-
Скопируйте проект на компьютер для разработки.
-
Откройте консоль в папке
ClientScripts/TypeScript/LoginPage
и выполните командуnpm install
, затем выполнитьnpm run build:prod
. -
Скопируйте каталог
SamplesOutput/Content/Account/Scripts
в каталог/lib/docsvision/webclient/Content/Account/Scripts
. -
Перезапустите dvwebclient.
Пример кода расширения указан ниже и в файле Index.ts
в репозитории примеров Web-клиента.
import React from 'react';
import { windowWithLoginExtensionManager, ILoginPlugin, ILoginExtensionManager, LoginEvents } from '@docsvision/webclient/Account';
import { LoginView } from '@docsvision/webclient/Account/LoginContainer';
import { LoginLogic } from '@docsvision/webclient/Account/LoginLogic';
import "index.scss"
const loginExtensionManager: ILoginExtensionManager = (window as windowWithLoginExtensionManager).loginExtensionManager;
loginExtensionManager.setResources({ Login_AdminMail: 'admin@docsvision.com' }); (1)
if (loginExtensionManager.currentLocale === 'ru') {
loginExtensionManager.setResources({ Login_Greeting: 'Приветствуем,' });
} else {
loginExtensionManager.setResources({ Login_Greeting: 'Hello,' });
}
const plugin: ILoginPlugin = {
order: 1,
eventName: "LogicEventConstructor",
fn: (data) => {
(2)
},
name: 'myPlugin',
};
const plugin2: ILoginPlugin = {
order: 2,
eventName: "EventContainerUseEffect",
fn: (data) => {
(3)
},
name: 'myPlugin2',
};
(4)
loginExtensionManager.addPlugin(plugin);
loginExtensionManager.addPlugins([plugin2]);
(5)
loginExtensionManager.onSetupView = function (view: LoginView): LoginView {
(6)
view.logo = React.memo((logic: LoginLogic): React.ReactElement => {
return <img src='https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_92x30dp.png' className="my-custom-logo" />;
});
(7)
view.authBoxBefore = (logic: LoginLogic): React.ReactElement => null;
view.authBoxAfter = (logic: LoginLogic): React.ReactElement => null;
view.formBefore = (logic: LoginLogic): React.ReactElement => null;
view.formAfter = (logic: LoginLogic): React.ReactElement => <a href="#" className="my-custom-element" >Забыли пароль?</a>;
view.providersBefore = (logic: LoginLogic): React.ReactElement => null;
view.providersAfter = (logic: LoginLogic): React.ReactElement => null;
return view;
};
1 | Замените текст. |
2 | Добавьте код выполнения некоторого действия. |
3 | Добавьте код выполнения ещё одного действия. |
4 | Добавьте события. |
5 | Измените компоненты представления. |
6 | Замените логотип. |
7 | Точки расширения. |