Allow customize Admin UI branding options

Relates to #391

* feat(common): Add custom options on AdminUiConfig interface

* feat(admin-ui-plugin): Set custom options on adminUiConfig

* feat(admin-ui): Render custom options on adminUi

* feat(admin-ui): Set custom title and stylesheet

* feat(admin-ui-plugin): Overwrite favicon when informed by user

* refactor: Change assets path to url

* feat(docs): Guide to admin-ui-plugin customize

* chore: Remove doc changes of admin ui index

* chore: Revert logo and style changes

* chore: Revert dev-config.ts changes

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,
+      }
+    }),
+  ],
+};
+```

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,
+            ),
         };
     }
 

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) {

packages/admin-ui/src/lib/dashboard/src/widgets/welcome-widget/welcome-widget.component.html

@@ -4,7 +4,9 @@
         <small class="p5">Last login: {{ administrator.user.lastLogin | timeAgo }}</small>
     </h4>
 
-    <p class="p5">Vendure Admin UI v{{ version }}</p>
+    <p class="p5" *ngIf="!hideVendureBranding || !hideVersion">
+        {{ hideVendureBranding ? '' : 'Vendure' }} {{ hideVersion ? '' : ('Admin UI v' + version) }}
+    </p>
 </div>
 <div class="placeholder">
     <clr-icon shape="line-chart" size="128"></clr-icon>

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<GetActiveAdministrator.ActiveAdministrator | null>;
+    brand = getAppConfig().brand;
+    hideVendureBranding = getAppConfig().hideVendureBranding;
+    hideVersion = getAppConfig().hideVersion;
 
     constructor(private dataService: DataService) {}
 

packages/admin-ui/src/lib/login/src/components/login/login.component.html

@@ -44,6 +44,11 @@
                 {{ 'common.login' | translate }}
             </button>
         </div>
-        <div class="version">vendure {{ version }}</div>
+        <div class="version">
+            <span *ngIf="brand">{{ brand }}</span>
+            <span *ngIf="!hideVendureBranding || !hideVersion">-</span>
+            <span *ngIf="!hideVendureBranding">vendure</span>
+            <span *ngIf="!hideVersion">v{{ version }}</span>
+        </div>
     </form>
 </div>

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 {

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) {}
 

packages/admin-ui/src/lib/static/index.html

@@ -2,7 +2,7 @@
 <html lang="en">
     <head>
         <meta charset="utf-8" />
-        <title>VendureAdmin</title>
+        <title></title>
         <base href="/" />
 
         <meta name="viewport" content="width=device-width, initial-scale=1" />

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;
 }
 
 /**