fix: logo on header

Refactor, not need it endpoint for logo.
verdaccio · Jan 20, 2019 · 158666f · 158666f
1 parent 7b0ff3b
commit 158666f
Show file tree

Hide file tree

Showing 11 changed files with 23 additions and 43 deletions.
diff --git a/src/api/web/index.js b/src/api/web/index.js
@@ -28,7 +28,6 @@ if (!existTemplate) {
 }
 
 const template = fs.readFileSync(templatePath).toString();
-const spliceURL = require('../../utils/string').spliceURL;
 
 module.exports = function(config, auth, storage) {
   Search.configureStorage(storage);
@@ -53,18 +52,13 @@ module.exports = function(config, auth, storage) {
     });
   });
 
-  router.get('/-/verdaccio/logo', function(req, res) {
-    const installPath = _.get(config, 'url_prefix', '');
-
-    res.send(_.get(config, 'web.logo') || spliceURL(installPath, '/-/static/logo.png'));
-  });
-
   router.get('/', function(req, res) {
-    const base = combineBaseUrl(getWebProtocol(req.get(HEADERS.FORWARDED_PROTO), req.protocol), req.get('host'), config.url_prefix);
-
+    const installPath = _.get(config, 'url_prefix', '');
+    const base = combineBaseUrl(getWebProtocol(req.get(HEADERS.FORWARDED_PROTO), req.protocol), req.get('host'), installPath);
     const webPage = template
       .replace(/ToReplaceByVerdaccio/g, base)
       .replace(/ToReplaceByTitle/g, _.get(config, 'web.title') ? config.web.title : WEB_TITLE)
+      .replace(/ToReplaceByLogo/g, _.get(config, 'web.logo') ? config.web.logo : null)
       .replace(/ToReplaceByScope/g, _.get(config, 'web.scope') ? config.web.scope : '');
 
     res.setHeader('Content-Type', 'text/html');

diff --git a/src/webui/app.js b/src/webui/app.js
@@ -2,7 +2,6 @@ import React, { Component, Fragment } from 'react';
 import isNil from 'lodash/isNil';
 
 import storage from './utils/storage';
-import logo from './utils/logo';
 import { makeLogin, isTokenExpire } from './utils/login';
 
 import Footer from './components/Footer';
@@ -42,8 +41,8 @@ export default class App extends Component {
     }
   }
 
-    loadLogo = async () => {
-    const logoUrl = await logo();
+    loadLogo = () => {
+    const logoUrl = window.VERDACCIO_LOGO;
     this.setState({
       logoUrl,
     });

diff --git a/src/webui/components/Header/index.js b/src/webui/components/Header/index.js
@@ -112,7 +112,7 @@ class Header extends Component<IProps, IState> {
     return (
       <LeftSide>
         <Link style={{ marginRight: '1em' }} to={'/'}>
-          <Logo />
+          {this.renderLogo()}
         </Link>
         {!withoutSearch && (
           <SearchWrapper>
@@ -123,6 +123,16 @@ class Header extends Component<IProps, IState> {
     );
   };
 
+  renderLogo = (): Node => {
+    const { logo } = this.props;
+
+    if (logo) {
+      return <img alt={'logo'} height={'40px'} src={logo} />;
+    } else {
+      return <Logo />;
+    }
+  };
+
   renderToolTipIcon = (title: string, type: ToolTipType) => {
     let content;
     switch (type) {

diff --git a/src/webui/components/Header/types.js b/src/webui/components/Header/types.js
@@ -4,6 +4,7 @@
  */
 
 export interface IProps {
+  logo: string;
   username?: string;
   onLogout?: Function;
   onToggleLoginModal: Function;

diff --git a/src/webui/template/index.html b/src/webui/template/index.html
@@ -11,6 +11,7 @@
     <script>
         window.VERDACCIO_API_URL = '<%= htmlWebpackPlugin.options.verdaccioURL %>/-/verdaccio/';
         window.VERDACCIO_SCOPE = '<%= htmlWebpackPlugin.options.scope %>';
+        window.VERDACCIO_LOGO = '<%= htmlWebpackPlugin.options.logo %>';
     </script>
 </head>
 

diff --git a/src/webui/utils/logo.js b/src/webui/utils/logo.js
diff --git a/test/unit/webui/app.spec.js b/test/unit/webui/app.spec.js
@@ -37,13 +37,6 @@ describe('App', () => {
   beforeEach(() => {
     wrapper = mount(<App />);
   });
-  test('loadLogo: set logo url in state', async () => {
-    const { loadLogo } = wrapper.instance();
-    await loadLogo();
-    expect(wrapper.state().logoUrl).toEqual(
-      'http://localhost/-/static/logo.png'
-    );
-  });
 
   test('toggleLoginModal: should toggle the value in state', () => {
     const { handleToggleLoginModal } = wrapper.instance();

diff --git a/test/unit/webui/components/header.spec.js b/test/unit/webui/components/header.spec.js
@@ -15,6 +15,7 @@ describe('<Header /> component with logged in state', () => {
     props = {
       username: 'test user',
       handleLogout: jest.fn(),
+      logo: '',
       onToggleLoginModal: jest.fn(),
       scope: 'test scope',
       withoutSearch: true,
@@ -59,6 +60,7 @@ describe('<Header /> component with logged out state', () => {
       handleLogout: jest.fn(),
       onToggleLoginModal: jest.fn(),
       scope: 'test scope',
+      logo: '',
       withoutSearch: true,
     };
     wrapper = mount(<Header {...props} />);

diff --git a/test/unit/webui/utils/logo.spec.js b/test/unit/webui/utils/logo.spec.js
diff --git a/tools/webpack.dev.config.babel.js b/tools/webpack.dev.config.babel.js
@@ -34,8 +34,9 @@ export default {
       __APP_VERSION__: `"${getPackageJson('version')}"`,
     }),
     new HTMLWebpackPlugin({
-      title: 'Verdaccio',
+      title: 'Verdaccio Dev UI',
       scope: '',
+      logo: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS3IX6-um7AlJXyt5gzkRIB0iO4Bn9QVRKcUHhilYJPs2mAfkkI',
       filename: 'index.html',
       verdaccioURL: '//localhost:4873',
       template: `${env.SRC_ROOT}/webui/template/index.html`,

diff --git a/tools/webpack.prod.config.babel.js b/tools/webpack.prod.config.babel.js
@@ -46,6 +46,7 @@ const prodConf = {
     new HTMLWebpackPlugin({
       title: 'ToReplaceByTitle',
       scope: 'ToReplaceByScope',
+      logo: 'ToReplaceByLogo',
       filename: 'index.html',
       favicon: `${env.SRC_ROOT}/webui/template/favicon.ico`,
       verdaccioURL: 'ToReplaceByVerdaccio',