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 @@

Last login: {{ administrator.user.lastLogin | timeAgo }}

-

Vendure Admin UI v{{ version }}

+

+ {{ hideVendureBranding ? '' : 'Vendure' }} {{ hideVersion ? '' : ('Admin UI v' + version) }} +

diff --git a/packages/admin-ui/src/lib/dashboard/src/widgets/welcome-widget/welcome-widget.component.ts b/packages/admin-ui/src/lib/dashboard/src/widgets/welcome-widget/welcome-widget.component.ts index 0a92d8b7bf..aeb4325266 100644 --- a/packages/admin-ui/src/lib/dashboard/src/widgets/welcome-widget/welcome-widget.component.ts +++ b/packages/admin-ui/src/lib/dashboard/src/widgets/welcome-widget/welcome-widget.component.ts @@ -5,6 +5,7 @@ import { CoreModule, DataService, GetActiveAdministrator, + getAppConfig, } from '@vendure/admin-ui/core'; import { Observable } from 'rxjs'; @@ -17,6 +18,9 @@ import { Observable } from 'rxjs'; export class WelcomeWidgetComponent implements OnInit { version = ADMIN_UI_VERSION; administrator$: Observable; + brand = getAppConfig().brand; + hideVendureBranding = getAppConfig().hideVendureBranding; + hideVersion = getAppConfig().hideVersion; constructor(private dataService: DataService) {} diff --git a/packages/admin-ui/src/lib/login/src/components/login/login.component.html b/packages/admin-ui/src/lib/login/src/components/login/login.component.html index 8ae81afef9..bb7e51fe34 100644 --- a/packages/admin-ui/src/lib/login/src/components/login/login.component.html +++ b/packages/admin-ui/src/lib/login/src/components/login/login.component.html @@ -44,6 +44,11 @@ {{ 'common.login' | translate }}
-
vendure {{ version }}
+
+ {{ brand }} + - + vendure + v{{ version }} +
diff --git a/packages/admin-ui/src/lib/login/src/components/login/login.component.scss b/packages/admin-ui/src/lib/login/src/components/login/login.component.scss index a2c89344f5..9794b5946b 100644 --- a/packages/admin-ui/src/lib/login/src/components/login/login.component.scss +++ b/packages/admin-ui/src/lib/login/src/components/login/login.component.scss @@ -17,6 +17,10 @@ align-items: flex-end; justify-content: center; color: $color-grey-300; + + span + span { + margin-left: 5px; + } } .login-error { diff --git a/packages/admin-ui/src/lib/login/src/components/login/login.component.ts b/packages/admin-ui/src/lib/login/src/components/login/login.component.ts index e9e7c85c7a..eaf414c228 100644 --- a/packages/admin-ui/src/lib/login/src/components/login/login.component.ts +++ b/packages/admin-ui/src/lib/login/src/components/login/login.component.ts @@ -1,6 +1,6 @@ import { Component } from '@angular/core'; import { Router } from '@angular/router'; -import { ADMIN_UI_VERSION, AUTH_REDIRECT_PARAM, AuthService } from '@vendure/admin-ui/core'; +import { ADMIN_UI_VERSION, AuthService, AUTH_REDIRECT_PARAM, getAppConfig } from '@vendure/admin-ui/core'; @Component({ selector: 'vdr-login', @@ -13,6 +13,9 @@ export class LoginComponent { rememberMe = false; version = ADMIN_UI_VERSION; errorMessage: string | undefined; + brand = getAppConfig().brand; + hideVendureBranding = getAppConfig().hideVendureBranding; + hideVersion = getAppConfig().hideVersion; constructor(private authService: AuthService, private router: Router) {} diff --git a/packages/admin-ui/src/lib/static/index.html b/packages/admin-ui/src/lib/static/index.html index 2157390233..fea956ac09 100644 --- a/packages/admin-ui/src/lib/static/index.html +++ b/packages/admin-ui/src/lib/static/index.html @@ -2,7 +2,7 @@ - VendureAdmin + diff --git a/packages/common/src/shared-types.ts b/packages/common/src/shared-types.ts index b2443291aa..7d4fd33d4d 100644 --- a/packages/common/src/shared-types.ts +++ b/packages/common/src/shared-types.ts @@ -227,6 +227,25 @@ export interface AdminUiConfig { * screen. */ loginUrl?: string; + /** + * @description + * The custom brand name. + */ + brand?: string; + /** + * @description + * Option to hide vendure branding. + * + * @default false + */ + hideVendureBranding?: boolean; + /** + * @description + * Option to hide version. + * + * @default false + */ + hideVersion?: boolean; } /**