chore(release): 0.3.13

Co-authored-by: Juan Picado @jotadeveloper <juanpicado19@gmail.com>

.github/workflows/security.yml

@@ -0,0 +1,11 @@
+name: Security Flow
+on: push
+jobs:
+  security:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@master
+      - name: Run Snyk to check for vulnerabilities
+        uses: snyk/actions/node@0.1.0
+        env:
+          SNYK_TOKEN: ${{ secrets.SNYK_TOKEN }}

CHANGELOG.md

@@ -2,6 +2,24 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [0.3.13](https://github.com/verdaccio/ui/compare/v0.3.12...v0.3.13) (2020-02-02)
+
+
+### Bug Fixes
+
+* do not capitalize heading - closes [#428](https://github.com/verdaccio/ui/issues/428) ([#431](https://github.com/verdaccio/ui/issues/431)) ([d481f54](https://github.com/verdaccio/ui/commit/d481f549484361c1d1bc011e0858e8f99b8a2528))
+* package list refresh based on logged-in user ([#415](https://github.com/verdaccio/ui/issues/415)) ([222ffed](https://github.com/verdaccio/ui/commit/222ffed0226f5aaa62f2d5b91bb08717b2aa24ef)), closes [#414](https://github.com/verdaccio/ui/issues/414) [#414](https://github.com/verdaccio/ui/issues/414)
+* reload packages on log in ([#421](https://github.com/verdaccio/ui/issues/421)) ([1eca1f4](https://github.com/verdaccio/ui/commit/1eca1f40797790e87d9592204ca061527d09c4ae))
+* typo ([#423](https://github.com/verdaccio/ui/issues/423)) ([164cea6](https://github.com/verdaccio/ui/commit/164cea6c10804c1d2097c2a582eb3e1e51814d4a))
+* update dependencies ([#420](https://github.com/verdaccio/ui/issues/420)) ([ee1c3f0](https://github.com/verdaccio/ui/commit/ee1c3f08eb16da2313d8841cfab18358d7f4ea10))
+
+### [0.3.12](https://github.com/verdaccio/ui/compare/v0.3.11...v0.3.12) (2020-01-09)
+
+
+### Bug Fixes
+
+* generate correct registry URL ([#413](https://github.com/verdaccio/ui/issues/413)) ([6b322ad](https://github.com/verdaccio/ui/commit/6b322ad553e9fb3ee65b2968dcfe856ba42a0bfb)), closes [#300](https://github.com/verdaccio/ui/issues/300) [#311](https://github.com/verdaccio/ui/issues/311)
+
 ### [0.3.11](https://github.com/verdaccio/ui/compare/v0.3.10...v0.3.11) (2020-01-08)
 
 

README.md

@@ -12,7 +12,7 @@
 [![stackshare](https://img.shields.io/badge/Follow%20on-StackShare-blue.svg?logo=stackshare&style=flat)](https://stackshare.io/verdaccio)
 [![discord](https://img.shields.io/discord/388674437219745793.svg)](http://chat.verdaccio.org/)
 [![node](https://img.shields.io/node/v/@verdaccio/ui-theme/latest.svg)](https://www.npmjs.com/package/@verdaccio/ui-theme)
-![MIT](https://img.shields.io/github/license/mashape/apistatus.svg)
+[![MIT](https://img.shields.io/github/license/mashape/apistatus.svg)](./LICENSE)
 [![Crowdin](https://d322cqt584bo4o.cloudfront.net/verdaccio/localized.svg)](https://crowdin.com/project/verdaccio)
 [![codecov](https://codecov.io/gh/verdaccio/ui/branch/master/graph/badge.svg)](https://codecov.io/gh/verdaccio/ui)
 

jest/jestEnvironment.js

@@ -1 +1 @@
-require.requireActual('babel/polyfill');
+jest.requireActual('babel/polyfill');

jest/setup.ts

@@ -8,14 +8,13 @@ import Adapter from 'enzyme-adapter-react-16';
 import { GlobalWithFetchMock } from 'jest-fetch-mock';
 import 'mutationobserver-shim';
 
-// @ts-ignore : Only a void function can be called with the 'new' keyword
 configure({ adapter: new Adapter() });
 
 // @ts-ignore : Property '__APP_VERSION__' does not exist on type 'Global'.
 global.__APP_VERSION__ = '1.0.0';
 // @ts-ignore : Property '__VERDACCIO_BASENAME_UI_OPTIONS' does not exist on type 'Global'.
-global.__VERDACCIO_BASENAME_UI_OPTIONS = {};
-
+global.__VERDACCIO_BASENAME_UI_OPTIONS = { base: 'http://localhost' };
+// @ts-ignore : Property 'VERDACCIO_API_URL' does not exist on type 'Global'.
 global.VERDACCIO_API_URL = 'https://verdaccio.tld';
 
 const customGlobal: GlobalWithFetchMock = global as GlobalWithFetchMock;

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@verdaccio/ui-theme",
-  "version": "0.3.11",
+  "version": "0.3.13",
   "description": "Verdaccio User Interface",
   "author": {
     "name": "Verdaccio Core Team",
@@ -13,10 +13,10 @@
   "homepage": "https://verdaccio.org",
   "main": "index.js",
   "devDependencies": {
-    "@babel/plugin-proposal-nullish-coalescing-operator": "7.7.4",
-    "@babel/plugin-proposal-optional-chaining": "7.7.5",
-    "@commitlint/cli": "8.2.0",
-    "@commitlint/config-conventional": "8.2.0",
+    "@babel/plugin-proposal-nullish-coalescing-operator": "7.8.0",
+    "@babel/plugin-proposal-optional-chaining": "7.8.0",
+    "@commitlint/cli": "8.3.4",
+    "@commitlint/config-conventional": "8.3.4",
     "@emotion/core": "10.0.22",
     "@emotion/styled": "10.0.23",
     "@material-ui/core": "4.8.0",
@@ -29,33 +29,33 @@
     "@types/jest": "24.0.24",
     "@types/js-base64": "2.3.1",
     "@types/lodash": "4.14.149",
-    "@types/node": "12.12.21",
+    "@types/node": "13.1.6",
     "@types/react": "16.9.17",
     "@types/react-autosuggest": "9.3.13",
     "@types/react-dom": "16.9.4",
     "@types/react-router-dom": "5.1.3",
     "@types/request": "2.48.4",
     "@types/validator": "12.0.1",
-    "@types/webpack-env": "1.14.1",
-    "@typescript-eslint/parser": "2.12.0",
-    "@verdaccio/babel-preset": "8.4.2",
-    "@verdaccio/commons-api": "8.4.2",
+    "@types/webpack-env": "1.15.0",
+    "@typescript-eslint/parser": "2.18.0",
+    "@verdaccio/babel-preset": "9.0.0",
+    "@verdaccio/commons-api": "9.0.0",
     "@verdaccio/eslint-config": "8.4.2",
-    "@verdaccio/types": "8.4.2",
+    "@verdaccio/types": "9.0.0",
     "autosuggest-highlight": "3.1.1",
     "babel-loader": "8.0.6",
     "bundlesize": "0.18.0",
-    "codeceptjs": "2.3.6",
+    "codeceptjs": "2.4.0",
     "codecov": "3.6.1",
     "concurrently": "5.0.2",
     "cross-env": "6.0.3",
-    "css-loader": "3.4.0",
-    "dayjs": "1.8.18",
+    "css-loader": "3.4.2",
+    "dayjs": "1.8.19",
     "detect-secrets": "1.0.5",
-    "emotion": "10.0.23",
-    "emotion-theming": "10.0.19",
-    "enzyme": "3.10.0",
-    "enzyme-adapter-react-16": "1.15.1",
+    "emotion": "10.0.27",
+    "emotion-theming": "10.0.27",
+    "enzyme": "3.11.0",
+    "enzyme-adapter-react-16": "1.15.2",
     "enzyme-to-json": "3.4.3",
     "eslint": "6.7.2",
     "eslint-plugin-codeceptjs": "1.2.0",
@@ -74,16 +74,16 @@
     "identity-obj-proxy": "3.0.0",
     "in-publish": "2.0.0",
     "jest": "24.9.0",
-    "jest-emotion": "10.0.26",
+    "jest-emotion": "10.0.27",
     "jest-environment-jsdom": "24.9.0",
     "jest-environment-jsdom-global": "1.2.0",
     "jest-environment-node": "24.9.0",
-    "jest-fetch-mock": "2.1.2",
+    "jest-fetch-mock": "3.0.1",
     "js-base64": "2.5.1",
     "js-yaml": "3.13.1",
     "lint-staged": "9.5.0",
     "localstorage-memory": "1.0.3",
-    "lockfile-lint": "3.0.3",
+    "lockfile-lint": "3.0.5",
     "lodash": "^4.17.15",
     "mini-css-extract-plugin": "0.9.0",
     "mutationobserver-shim": "0.3.3",
@@ -113,15 +113,15 @@
     "stylelint-webpack-plugin": "1.1.2",
     "supertest": "4.0.2",
     "typeface-roboto": "0.0.75",
-    "typescript": "3.7.3",
+    "typescript": "3.7.4",
     "uglifyjs-webpack-plugin": "2.2.0",
     "url-loader": "3.0.0",
     "validator": "12.1.0",
-    "verdaccio": "4.4.0",
-    "verdaccio-auth-memory": "8.4.2",
-    "verdaccio-memory": "8.4.2",
+    "verdaccio": "4.4.2",
+    "verdaccio-auth-memory": "9.0.0",
+    "verdaccio-memory": "9.0.0",
     "wait-on": "3.3.0",
-    "webpack": "4.41.4",
+    "webpack": "4.41.5",
     "webpack-bundle-analyzer": "3.6.0",
     "webpack-bundle-size-analyzer": "3.1.0",
     "webpack-cli": "3.3.10",
@@ -171,6 +171,7 @@
     "test:acceptance:server": "concurrently --kill-others \"npm run verdaccio:server\" \"npm run test:acceptance\"",
     "test:e2e": "cross-env BABEL_ENV=test jest --config ./test/jest.config.e2e.js",
     "test": "cross-env NODE_ENV=test BABEL_ENV=test TZ=UTC jest --config ./jest/jest.config.js --maxWorkers 2 --passWithNoTests",
+    "test:update-snapshot": "npm run test -- -u",
     "test:size": "bundlesize",
     "lint": "npm run lint:js && npm run lint:css && npm run lint:lockfile",
     "lint:js": "npm run type-check && eslint . --ext .js,.ts,.tsx",

src/App/App.tsx

@@ -5,11 +5,9 @@ import { Router } from 'react-router-dom';
 
 import storage from '../utils/storage';
 import { isTokenExpire } from '../utils/login';
-import API from '../utils/api';
 import Header from '../components/Header';
 import Footer from '../components/Footer';
 import Box from '../muiComponents/Box';
-import Loading from '../components/Loading';
 import StyleBaseline from '../design-tokens/StyleBaseline';
 import { Theme } from '../design-tokens/theme';
 
@@ -33,11 +31,9 @@ const StyledBoxContent = styled(Box)<{ theme?: Theme }>(({ theme }) => ({
 /* eslint-disable react-hooks/exhaustive-deps */
 const App: React.FC = () => {
   const [user, setUser] = useState();
-  const [packages, setPackages] = useState([]);
-  const [isLoading, setIsLoading] = useState(true);
 
   /**
-   * Logouts user
+   * Logout user
    * Required by: <Header />
    */
   const logout = () => {
@@ -59,46 +55,26 @@ const App: React.FC = () => {
     setUser({ username });
   };
 
-  const loadOnHandler = async () => {
-    try {
-      const packages = await API.request('packages', 'GET');
-      // FIXME add correct type for package
-      setPackages(packages as never[]);
-    } catch (error) {
-      // FIXME: add dialog
-      console.error({
-        title: 'Warning',
-        message: `Unable to load package list: ${error.message}`,
-      });
-    }
-
-    setIsLoading(false);
-  };
-
   useEffect(() => {
     checkUserAlreadyLoggedIn();
-    loadOnHandler();
   }, []);
 
   return (
     <>
       <StyleBaseline />
       <StyledBox display="flex" flexDirection="column" height="100%">
-        {isLoading ? (
-          <Loading />
-        ) : (
-          <>
-            <Router history={history}>
-              <AppContextProvider packages={packages} user={user}>
-                <Header />
-                <StyledBoxContent flexGrow={1}>
-                  <AppRoute />
-                </StyledBoxContent>
-              </AppContextProvider>
-            </Router>
-            <Footer />
-          </>
-        )}
+        <>
+          <Router history={history}>
+            <AppContextProvider user={user}>
+              <Header />
+              <StyledBoxContent flexGrow={1}>
+                {/* eslint-disable-next-line react/jsx-max-depth */}
+                <AppRoute />
+              </StyledBoxContent>
+            </AppContextProvider>
+          </Router>
+          <Footer />
+        </>
       </StyledBox>
     </>
   );

src/App/AppContext.ts

@@ -3,7 +3,6 @@ import { createContext } from 'react';
 export interface AppProps {
   user?: User;
   scope: string;
-  packages: any[];
 }
 
 export interface User {

src/App/AppContextProvider.tsx

@@ -3,15 +3,13 @@ import React, { useState, useEffect } from 'react';
 import AppContext, { AppProps, User } from './AppContext';
 
 interface Props {
-  packages: any[];
   user?: User;
 }
 
 /* eslint-disable react-hooks/exhaustive-deps */
-const AppContextProvider: React.FC<Props> = ({ children, packages, user }) => {
+const AppContextProvider: React.FC<Props> = ({ children, user }) => {
   const [state, setState] = useState<AppProps>({
     scope: window.VERDACCIO_SCOPE || '',
-    packages,
     user,
   });
 
@@ -22,13 +20,6 @@ const AppContextProvider: React.FC<Props> = ({ children, packages, user }) => {
     });
   }, [user]);
 
-  useEffect(() => {
-    setState({
-      ...state,
-      packages,
-    });
-  }, [packages]);
-
   const setUser = (user?: User) => {
     setState({
       ...state,

src/App/AppRoute.tsx

@@ -30,7 +30,7 @@ const AppRoute: React.FC = () => {
     throw Error('The app Context was not correct used');
   }
 
-  const { user, packages } = appContext;
+  const { user } = appContext;
 
   const isUserLoggedIn = user && user.username;
 
@@ -39,7 +39,7 @@ const AppRoute: React.FC = () => {
       <Suspense fallback={<Loading />}>
         <Switch>
           <ReactRouterDomRoute exact={true} path={Route.ROOT}>
-            <HomePage isUserLoggedIn={!!isUserLoggedIn} packages={packages || []} />
+            <HomePage isUserLoggedIn={!!isUserLoggedIn} />
           </ReactRouterDomRoute>
           <ReactRouterDomRoute exact={true} path={Route.PACKAGE}>
             <VersionContextProvider>

src/components/DetailSidebar/DetailSidebarTitle.tsx

@@ -15,7 +15,6 @@ interface Props {
 const StyledHeading = styled(Heading)({
   fontSize: '1rem',
   fontWeight: 700,
-  textTransform: 'capitalize',
 });
 
 const StyledBoxVersion = styled(Box)<{ theme?: Theme }>(({ theme }) => ({

src/components/Header/Header.test.tsx

@@ -18,7 +18,7 @@ describe('<Header /> component with logged in state', () => {
   test('should load the component in logged out state', () => {
     const { container, queryByTestId, getByText } = render(
       <Router>
-        <AppContextProvider packages={props.packages}>
+        <AppContextProvider>
           <Header />
         </AppContextProvider>
       </Router>
@@ -32,7 +32,7 @@ describe('<Header /> component with logged in state', () => {
   test('should load the component in logged in state', () => {
     const { container, getByTestId, queryByText } = render(
       <Router>
-        <AppContextProvider packages={props.packages} user={props.user}>
+        <AppContextProvider user={props.user}>
           <Header />
         </AppContextProvider>
       </Router>
@@ -46,7 +46,7 @@ describe('<Header /> component with logged in state', () => {
   test('should open login dialog', async () => {
     const { getByText } = render(
       <Router>
-        <AppContextProvider packages={props.packages}>
+        <AppContextProvider>
           <Header />
         </AppContextProvider>
       </Router>
@@ -61,7 +61,7 @@ describe('<Header /> component with logged in state', () => {
   test('should logout the user', async () => {
     const { getByText, getByTestId } = render(
       <Router>
-        <AppContextProvider packages={props.packages} user={props.user}>
+        <AppContextProvider user={props.user}>
           <Header />
         </AppContextProvider>
       </Router>
@@ -79,7 +79,7 @@ describe('<Header /> component with logged in state', () => {
   test("The question icon should open a new tab of verdaccio's website - installation doc", () => {
     const { getByTestId } = render(
       <Router>
-        <AppContextProvider packages={props.packages} user={props.user}>
+        <AppContextProvider user={props.user}>
           <Header />
         </AppContextProvider>
       </Router>
@@ -92,7 +92,7 @@ describe('<Header /> component with logged in state', () => {
   test('should open the registrationInfo modal when clicking on the info icon', async () => {
     const { getByTestId } = render(
       <Router>
-        <AppContextProvider packages={props.packages} user={props.user}>
+        <AppContextProvider user={props.user}>
           <Header />
         </AppContextProvider>
       </Router>
@@ -109,7 +109,7 @@ describe('<Header /> component with logged in state', () => {
   test('should close the registrationInfo modal when clicking on the button close', async () => {
     const { getByTestId, getByText, queryByTestId } = render(
       <Router>
-        <AppContextProvider packages={props.packages} user={props.user}>
+        <AppContextProvider user={props.user}>
           <Header />
         </AppContextProvider>
       </Router>

src/components/LoginDialog/LoginDialog.test.tsx

@@ -8,7 +8,6 @@ import LoginDialog from './LoginDialog';
 
 const appContextValue: AppContextProps = {
   scope: '',
-  packages: [],
   setUser: jest.fn(),
 };
 

src/muiComponents/Text/Text.tsx

@@ -1,13 +1,10 @@
 import React, { forwardRef } from 'react';
-import { default as MaterialUITypography, TypographyProps } from '@material-ui/core/Typography';
+import { default as MaterialUITypography } from '@material-ui/core/Typography';
+
+import { TextProps } from './TextConfig';
 
-type TextType = 'subtitle1' | 'subtitle2' | 'body1' | 'body2';
 type TextRef = HTMLElementTagNameMap[keyof HTMLElementTagNameMap];
 
-export interface TextProps extends Omit<TypographyProps, 'variant'> {
-  variant?: TextType;
-}
-
 // The reference is already from type of the Component, so the any below is not a problem
 const Text = forwardRef<TextRef, TextProps>(function Text(props, ref) {
   return <MaterialUITypography {...props} ref={ref} />;

src/muiComponents/Text/TextConfig.ts

@@ -0,0 +1,7 @@
+import { TypographyProps } from '@material-ui/core/Typography';
+
+type TextType = 'subtitle1' | 'subtitle2' | 'body1' | 'body2';
+
+export interface TextProps extends Omit<TypographyProps, 'variant'> {
+  variant?: TextType;
+}

src/muiComponents/Text/index.ts

@@ -1 +1,2 @@
-export { default, TextProps } from './Text';
+export { default } from './Text';
+export { TextProps } from './TextConfig';

src/pages/Version/context.ts

@@ -1,24 +1,6 @@
 import { createContext, Consumer, Provider } from 'react';
 
-import { PackageMetaInterface } from '../../../types/packageMeta';
-export interface DetailContextProps {
-  packageMeta: PackageMetaInterface;
-  packageVersion?: string;
-  readMe: string;
-  packageName: string;
-  enableLoading: () => void;
-  isLoading: boolean;
-  hasNotBeenFound: boolean;
-}
-
-export interface VersionPageConsumerProps {
-  packageMeta: PackageMetaInterface;
-  readMe: string;
-  packageName: string;
-  packageVersion?: string;
-  // FIXME: looking for the appropiated type here
-  enableLoading: any;
-}
+import { DetailContextProps, VersionPageConsumerProps } from './version-config';
 
 export const DetailContext = createContext<Partial<DetailContextProps>>({});
 

src/pages/Version/index.ts

@@ -1,8 +1,4 @@
-export {
-  DetailContext,
-  DetailContextConsumer,
-  DetailContextProvider,
-  DetailContextProps,
-  VersionPageConsumerProps,
-} from './context';
+export { DetailContext, DetailContextConsumer, DetailContextProvider } from './context';
+export { VersionPageConsumerProps, DetailContextProps } from './version-config';
+
 export { default } from './Version';

src/pages/Version/version-config.ts

@@ -0,0 +1,19 @@
+import { PackageMetaInterface } from '../../../types/packageMeta';
+
+export interface DetailContextProps {
+  enableLoading: () => void;
+  hasNotBeenFound: boolean;
+  isLoading: boolean;
+  packageMeta: PackageMetaInterface;
+  packageName: string;
+  packageVersion?: string;
+  readMe: string;
+}
+
+export interface VersionPageConsumerProps {
+  enableLoading: () => void;
+  packageMeta: PackageMetaInterface;
+  packageName: string;
+  packageVersion?: string;
+  readMe: string;
+}

src/pages/home/Home.tsx

@@ -1,17 +1,35 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 
 import { PackageList } from '../../components/PackageList';
-import { PackageInterface } from '../../components/Package/Package';
+import API from '../../utils/api';
+import Loading from '../../components/Loading';
 
 interface Props {
   isUserLoggedIn: boolean;
-  packages: PackageInterface[];
 }
 
-const Home: React.FC<Props> = ({ packages }) => (
-  <div className="container content">
-    <PackageList packages={packages} />
-  </div>
-);
+const Home: React.FC<Props> = ({ isUserLoggedIn }) => {
+  const [packages, setPackages] = useState([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const loadPackages = async () => {
+    try {
+      const packages = await API.request('packages', 'GET');
+      // FIXME add correct type for package
+      setPackages(packages as never[]);
+    } catch (error) {
+      // FIXME: add dialog
+      console.error({
+        title: 'Warning',
+        message: `Unable to load package list: ${error.message}`,
+      });
+    }
+    setIsLoading(false);
+  };
+  useEffect(() => {
+    loadPackages().then();
+  }, [isUserLoggedIn]);
+
+  return <div className="container content">{isLoading ? <Loading /> : <PackageList packages={packages} />}</div>;
+};
 
 export default Home;

src/utils/api.ts

@@ -20,7 +20,7 @@ export function handleResponseType(response: Response): Promise<[boolean, Blob |
       return Promise.all([response.ok, response.text()]);
     }
 
-    // unfortunatelly on download files there is no header available
+    // unfortunately on download files there is no header available
     if (response.url && response.url.endsWith('.tgz') === true) {
       return Promise.all([response.ok, response.blob()]);
     }

src/utils/url.test.ts

@@ -17,14 +17,18 @@ describe('utils', () => {
       expect(isEmail('')).toBeFalsy();
     });
 
-    test('getRegistryURL() - should keep slash if location is a sub directory', () => {
+    test('getRegistryURL() - should not change when location change', () => {
+      expect(getRegistryURL()).toBe('http://localhost');
       history.pushState({}, 'page title', '/-/web/detail');
-      expect(getRegistryURL()).toBe('http://localhost/-/web/detail');
+      expect(getRegistryURL()).toBe('http://localhost');
       history.pushState({}, 'page title', '/');
     });
 
-    test('getRegistryURL() - should not add slash if location is not a sub directory', () => {
+    test('getRegistryURL() - should change when UI options change', () => {
       expect(getRegistryURL()).toBe('http://localhost');
+      window.__VERDACCIO_BASENAME_UI_OPTIONS.base = 'http://localhost/test';
+      expect(getRegistryURL()).toBe('http://localhost/test');
+      window.__VERDACCIO_BASENAME_UI_OPTIONS.base = 'http://localhost';
     });
   });
 

src/utils/url.ts

@@ -15,8 +15,7 @@ export function isEmail(email: string): boolean {
 }
 
 export function getRegistryURL(): string {
-  // Don't add slash if it's not a sub directory
-  return `${location.origin}${location.pathname === '/' ? '' : location.pathname}`;
+  return window.__VERDACCIO_BASENAME_UI_OPTIONS.base;
 }
 
 export function extractFileName(url: string): string {

tools/_verdaccio.config.yaml

@@ -10,10 +10,10 @@ auth:
     users:
       foo:
         name: test
-        password: test
+        password: test #pragma: allowlist secret
       bar:
         name: bar
-        password: test
+        password: test #pragma: allowlist secret
 security:
   api:
     jwt:
@@ -23,7 +23,7 @@ security:
   web:
     sign:
       expiresIn: 100d
-      notBefore: 1
+      notBefore: 0
 
 uplinks:
   npmjs:

tools/webpack.dev.config.babel.js

@@ -37,7 +37,7 @@ export default {
     }),
     new HTMLWebpackPlugin({
       __UI_OPTIONS: JSON.stringify({
-        base: '/',
+        base: new URL('/', 'https://localhost:4872'),
       }),
       title: 'Verdaccio Dev UI',
       scope: '',