diff --git a/docs/content/docs/plugins/extending-the-admin-ui/customize-admin-ui/_index.md b/docs/content/docs/plugins/extending-the-admin-ui/customize-admin-ui/_index.md new file mode 100644 index 0000000000..54994d69ad --- /dev/null +++ b/docs/content/docs/plugins/extending-the-admin-ui/customize-admin-ui/_index.md @@ -0,0 +1,33 @@ +--- +title: 'Customize Admin UI' +--- + +# Customize Admin UI + +The Vendure Admin UI is customizable, allowing you to: + +* set your brand name +* hide vendure branding +* hide admin ui version + +## Example: Config code to customize admin ui + +```TypeScript +// vendure-config.ts +import path from 'path'; +import { VendureConfig } from '@vendure/core'; +import { AdminUiPlugin } from '@vendure/admin-ui-plugin'; + +export const config: VendureConfig = { + // ... + plugins: [ + AdminUiPlugin.init({ + adminUiConfig:{ + brand: 'My Store', + hideVendureBranding: false, + hideVersion: false, + } + }), + ], +}; +``` diff --git a/packages/admin-ui-plugin/src/plugin.ts b/packages/admin-ui-plugin/src/plugin.ts index aaa28c07b2..8a7a95c75b 100644 --- a/packages/admin-ui-plugin/src/plugin.ts +++ b/packages/admin-ui-plugin/src/plugin.ts @@ -21,7 +21,7 @@ import fs from 'fs-extra'; import { Server } from 'http'; import path from 'path'; -import { DEFAULT_APP_PATH, defaultAvailableLanguages, defaultLanguage, loggerCtx } from './constants'; +import { defaultAvailableLanguages, defaultLanguage, DEFAULT_APP_PATH, loggerCtx } from './constants'; /** * @description @@ -255,6 +255,15 @@ export class AdminUiPlugin implements OnVendureBootstrap, OnVendureClose { defaultLanguage: propOrDefault('defaultLanguage', defaultLanguage), availableLanguages: propOrDefault('availableLanguages', defaultAvailableLanguages), loginUrl: AdminUiPlugin.options.adminUiConfig?.loginUrl, + brand: AdminUiPlugin.options.adminUiConfig?.brand, + hideVendureBranding: propOrDefault( + 'hideVendureBranding', + AdminUiPlugin.options.adminUiConfig?.hideVendureBranding || false, + ), + hideVersion: propOrDefault( + 'hideVersion', + AdminUiPlugin.options.adminUiConfig?.hideVersion || false, + ), }; } diff --git a/packages/admin-ui/src/lib/core/src/core.module.ts b/packages/admin-ui/src/lib/core/src/core.module.ts index 19d9c7adae..526149ca4a 100644 --- a/packages/admin-ui/src/lib/core/src/core.module.ts +++ b/packages/admin-ui/src/lib/core/src/core.module.ts @@ -1,7 +1,7 @@ import { PlatformLocation } from '@angular/common'; import { HttpClient } from '@angular/common/http'; import { NgModule } from '@angular/core'; -import { BrowserModule } from '@angular/platform-browser'; +import { BrowserModule, Title } from '@angular/platform-browser'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { TranslateCompiler, TranslateLoader, TranslateModule } from '@ngx-translate/core'; import { MessageFormatConfig, MESSAGE_FORMAT_CONFIG } from 'ngx-translate-messageformat-compiler'; @@ -39,7 +39,11 @@ import { SharedModule } from './shared/shared.module'; compiler: { provide: TranslateCompiler, useClass: InjectableTranslateMessageFormatCompiler }, }), ], - providers: [{ provide: MESSAGE_FORMAT_CONFIG, useFactory: getLocales }, registerDefaultFormInputs()], + providers: [ + { provide: MESSAGE_FORMAT_CONFIG, useFactory: getLocales }, + registerDefaultFormInputs(), + Title, + ], exports: [SharedModule, OverlayHostComponent], declarations: [ AppShellComponent, @@ -53,8 +57,13 @@ import { SharedModule } from './shared/shared.module'; ], }) export class CoreModule { - constructor(private i18nService: I18nService, private localStorageService: LocalStorageService) { + constructor( + private i18nService: I18nService, + private localStorageService: LocalStorageService, + private titleService: Title, + ) { this.initUiLanguages(); + this.initUiTitle(); } private initUiLanguages() { @@ -76,6 +85,12 @@ export class CoreModule { this.i18nService.setDefaultLanguage(defaultLanguage); this.i18nService.setAvailableLanguages(availableLanguages || [defaultLanguage]); } + + private initUiTitle() { + const title = getAppConfig().brand || 'VendureAdmin'; + + this.titleService.setTitle(title); + } } export function HttpLoaderFactory(http: HttpClient, location: PlatformLocation) { diff --git a/packages/admin-ui/src/lib/dashboard/src/widgets/welcome-widget/welcome-widget.component.html b/packages/admin-ui/src/lib/dashboard/src/widgets/welcome-widget/welcome-widget.component.html index ff3fdd6c6e..b5f4acb4f8 100644 --- a/packages/admin-ui/src/lib/dashboard/src/widgets/welcome-widget/welcome-widget.component.html +++ b/packages/admin-ui/src/lib/dashboard/src/widgets/welcome-widget/welcome-widget.component.html @@ -4,7 +4,9 @@
Vendure Admin UI v{{ version }}
++ {{ hideVendureBranding ? '' : 'Vendure' }} {{ hideVersion ? '' : ('Admin UI v' + version) }} +