@verdaccio/ui-theme 3.1.0 → 6.0.0-6-next.11

package/src/store/models/login.ts

@@ -0,0 +1,90 @@
+import { createModel } from '@rematch/core';
+import i18next from 'i18next';
+
+import { HEADERS } from '../../lib/constants';
+import API from '../../providers/API/api';
+import storage from '../../utils/storage';
+
+import type { RootModel } from '.';
+
+export type LoginError = {
+  type: string;
+  description: string;
+};
+
+export type LoginResponse = {
+  username: string | null;
+  token: string | null;
+};
+
+export type LoginBody = {
+  error?: LoginError;
+} & LoginResponse;
+
+const token = storage.getItem('token');
+const username = storage.getItem('username');
+const defaultUserState: LoginBody = {
+  token,
+  username,
+};
+
+export const login = createModel<RootModel>()({
+  state: {
+    username: defaultUserState.username,
+    token: defaultUserState.token,
+  },
+  reducers: {
+    logOutUser(state) {
+      storage.removeItem('username');
+      storage.removeItem('token');
+      return {
+        ...state,
+        username: null,
+        token: null,
+      };
+    },
+    addError(state, error: LoginError) {
+      return {
+        ...state,
+        error,
+      };
+    },
+    clearError(state) {
+      return {
+        ...state,
+        error: undefined,
+      };
+    },
+    logInUser(state, response: LoginResponse) {
+      // we might persist this in another way with
+      storage.setItem('username', response.username as string);
+      storage.setItem('token', response.token as string);
+      return {
+        ...state,
+        token: response.token as string,
+        username: response.username as string,
+      };
+    },
+  },
+  effects: (dispatch) => ({
+    async getUser({ username, password }, state) {
+      const basePath = state.configuration.config.base;
+      try {
+        const payload: LoginResponse = await API.request(`${basePath}-/verdaccio/login`, 'POST', {
+          body: JSON.stringify({ username, password }),
+          headers: {
+            Accept: HEADERS.JSON,
+            'Content-Type': HEADERS.JSON,
+          },
+        });
+        dispatch.login.logInUser(payload);
+        dispatch.packages.getPackages();
+      } catch (error: any) {
+        dispatch.login.addError({
+          type: 'error',
+          description: i18next.t('form-validation.unable-to-sign-in'),
+        });
+      }
+    },
+  }),
+});

package/src/store/models/manifest.ts

@@ -0,0 +1,91 @@
+import { createModel } from '@rematch/core';
+import { Package } from '@verdaccio/types';
+import { PackageMetaInterface } from 'types/packageMeta';
+
+import API from '../../providers/API/api';
+
+import type { RootModel } from '.';
+
+function isPackageVersionValid(
+  packageMeta: Partial<PackageMetaInterface>,
+  packageVersion?: string
+): boolean {
+  if (!packageVersion || typeof packageVersion === 'undefined') {
+    // if is undefined, that means versions does not exist, we continue
+    return true;
+  }
+
+  if (packageMeta.versions) {
+    return Object.keys(packageMeta.versions).includes(packageVersion);
+  }
+
+  return false;
+}
+
+export const manifest = createModel<RootModel>()({
+  state: {},
+  reducers: {
+    notFound(state) {
+      return {
+        ...state,
+        hasNotBeenFound: true,
+        manifest: undefined,
+        packageName: undefined,
+        packageVersion: undefined,
+        readme: undefined,
+      };
+    },
+    clearError(state) {
+      return {
+        ...state,
+        isError: null,
+      };
+    },
+    isError(state) {
+      return {
+        ...state,
+        isError: true,
+        hasNotBeenFound: false,
+        manifest: undefined,
+        packageName: undefined,
+        packageVersion: undefined,
+        readme: undefined,
+      };
+    },
+    saveManifest(state, { packageName, packageVersion, manifest, readme }) {
+      return {
+        ...state,
+        manifest,
+        packageName,
+        packageVersion,
+        readme,
+        hasNotBeenFound: false,
+      };
+    },
+  },
+  effects: (dispatch) => ({
+    async getManifest({ packageName, packageVersion }, state) {
+      const basePath = state.configuration.config.base;
+      try {
+        if (!isPackageVersionValid(packageName, packageVersion)) {
+          throw new Error('not found');
+        }
+
+        const manifest: Package = await API.request(
+          `${basePath}-/verdaccio/sidebar/${packageName}${
+            packageVersion ? `?v=${packageVersion}` : ''
+          }`
+        );
+        const readme: string = await API.request<string>(
+          `${basePath}-/verdaccio/package/readme/${packageName}${
+            packageVersion ? `?v=${packageVersion}` : ''
+          }`,
+          'GET'
+        );
+        dispatch.manifest.saveManifest({ packageName, packageVersion, manifest, readme });
+      } catch (error: any) {
+        dispatch.manifest.notFound();
+      }
+    },
+  }),
+});

package/src/store/models/packages.ts

@@ -0,0 +1,36 @@
+import { createModel } from '@rematch/core';
+import { Package } from '@verdaccio/types';
+
+import API from '../../providers/API/api';
+
+import type { RootModel } from '.';
+
+export const packages = createModel<RootModel>()({
+  state: {
+    response: [] as Package[],
+  },
+  reducers: {
+    savePackages(state, response: Package[]) {
+      return {
+        ...state,
+        response,
+      };
+    },
+  },
+  effects: (dispatch) => ({
+    async getPackages(_payload, state) {
+      const basePath = state.configuration.config.base;
+      try {
+        const payload: Package[] = await API.request(`${basePath}-/verdaccio/packages`, 'GET');
+        dispatch.packages.savePackages(payload);
+      } catch (error: any) {
+        // eslint-disable-next-line no-console
+        console.error({
+          title: 'Warning',
+          message: `Unable to load package list: ${error.message}`,
+        });
+        // TODO: handle error, display something retry or something
+      }
+    },
+  }),
+});

package/src/store/models/search.ts

@@ -0,0 +1,81 @@
+import { createModel } from '@rematch/core';
+import { Package } from '@verdaccio/types';
+
+import API from '../../providers/API/api';
+
+import type { RootModel } from '.';
+
+const CONSTANTS = {
+  API_DELAY: 300,
+  ABORT_ERROR: 'AbortError',
+};
+
+type SearchState = {
+  suggestions: Partial<Package>[];
+  controller: AbortController[];
+};
+
+export const search = createModel<RootModel>()({
+  state: {
+    suggestions: [],
+    controller: [],
+  } as SearchState,
+  reducers: {
+    clearRequestQueue(state) {
+      const controllers = state.controller;
+      controllers.forEach((request) => request.abort());
+      return {
+        ...state,
+        controller: [],
+      };
+    },
+    addControllerToQueue(state, { controller }: { controller: AbortController }) {
+      const currentControllers = state.controller;
+      return {
+        ...state,
+        controller: [...currentControllers, controller],
+      };
+    },
+    setError(state) {
+      return {
+        ...state,
+        isError: true,
+      };
+    },
+    saveSearch(state, { suggestions }: { suggestions: Partial<Package>[] }) {
+      return {
+        ...state,
+        suggestions,
+        isError: null,
+      };
+    },
+  },
+  effects: (dispatch) => ({
+    async getSuggestions({ value }, state) {
+      const basePath = state.configuration.config.base;
+      try {
+        const controller = new window.AbortController();
+        dispatch.search.addControllerToQueue({ controller });
+        const signal = controller.signal;
+        // https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API#Browser_compatibility
+        // FUTURE: signal is not well supported for IE and Samsung Browser
+        const suggestions: Partial<Package>[] = await API.request(
+          `${basePath}-/verdaccio/search/${encodeURIComponent(value)}`,
+          'GET',
+          {
+            signal,
+            headers: {},
+          }
+        );
+
+        dispatch.search.saveSearch({ suggestions });
+      } catch (error: any) {
+        if (error.name === CONSTANTS.ABORT_ERROR) {
+          dispatch.search.saveSearch({ suggestions: [] });
+        } else {
+          dispatch.search.setError();
+        }
+      }
+    },
+  }),
+});

package/src/store/store.ts

@@ -0,0 +1,15 @@
+import { init, RematchDispatch, RematchRootState } from '@rematch/core';
+import loadingPlugin, { ExtraModelsFromLoading } from '@rematch/loading';
+
+import { models, RootModel } from './models';
+
+type FullModel = ExtraModelsFromLoading<RootModel>;
+
+export const store = init<RootModel, FullModel>({
+  models,
+  plugins: [loadingPlugin()],
+});
+
+export type Store = typeof store;
+export type Dispatch = RematchDispatch<RootModel>;
+export type RootState = RematchRootState<RootModel, FullModel>;

package/src/template/index.html

@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en-us">
+
+<head>
+    <meta charset="utf-8">
+    <title>
+        <%= htmlWebpackPlugin.options.title %>
+    </title>
+    <base href="<%= htmlWebpackPlugin.options.basePath %>"> 
+    <link rel="icon" type="image/png" href="<%= htmlWebpackPlugin.options.faviIcoPath %>" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <script>
+        window.__VERDACCIO_BASENAME_UI_OPTIONS = JSON.parse('<%= htmlWebpackPlugin.options.__UI_OPTIONS %>');
+    </script>
+</head>
+
+<body class="body">
+    <div id="root"></div>
+</body>
+
+</html>

package/src/utils/.eslintrc

@@ -0,0 +1,5 @@
+{
+    "rules": {
+        "no-invalid-this": 0
+    }
+}

package/src/utils/cli-utils.test.ts

@@ -0,0 +1,66 @@
+import { SyntheticEvent } from 'react';
+
+import { copyToClipBoardUtility, getCLISetConfigRegistry } from './cli-utils';
+
+describe('copyToClipBoardUtility', () => {
+  let originalGetSelection: typeof window.getSelection;
+
+  const mockGetSelectionResult = {
+    removeAllRanges: jest.fn(),
+    addRange: jest.fn(),
+  };
+  beforeEach(() => {
+    originalGetSelection = window.getSelection;
+
+    window.getSelection = jest.fn().mockReturnValue(mockGetSelectionResult);
+  });
+  afterEach(() => {
+    window.getSelection = originalGetSelection;
+    jest.restoreAllMocks();
+  });
+
+  test('should call the DOM APIs', () => {
+    // Given
+    const testEvent: { preventDefault: Function } = {
+      preventDefault: jest.fn(),
+    };
+    const testCopy = 'copy text';
+    const spys = {
+      createElement: jest.spyOn(document, 'createElement'),
+      execCommand: jest.spyOn(document, 'execCommand'),
+      appendChild: jest.spyOn(document.body, 'appendChild'),
+      removeChild: jest.spyOn(document.body, 'removeChild'),
+    };
+    const expectedDiv = document.createElement('div');
+    expectedDiv.innerText = testCopy;
+
+    // When
+    const copyFunc = copyToClipBoardUtility(testCopy);
+    copyFunc(testEvent as SyntheticEvent<HTMLElement>);
+
+    // Then
+    expect(mockGetSelectionResult.removeAllRanges).toHaveBeenCalledWith();
+    expect(mockGetSelectionResult.addRange).toHaveBeenCalled();
+    expect(spys.createElement).toHaveBeenCalledWith('div');
+    expect(spys.appendChild).toHaveBeenCalledWith(expectedDiv);
+    expect(spys.execCommand).toHaveBeenCalledWith('copy');
+    expect(spys.removeChild).toHaveBeenCalledWith(expectedDiv);
+  });
+});
+
+describe('getCLISetRegistry', () => {
+  const command = 'npm set';
+  const scope = '@testscope';
+  const blankScope = '';
+  const url = 'https://test.local';
+
+  test('should return ":" separated string when scope is set', () => {
+    expect(getCLISetConfigRegistry(command, scope, url)).toEqual(
+      `${command} ${scope}:registry ${url}`
+    );
+  });
+
+  test('should not output scope when scope is not set', () => {
+    expect(getCLISetConfigRegistry(command, blankScope, url)).toEqual(`${command} registry ${url}`);
+  });
+});

package/src/utils/cli-utils.ts

@@ -0,0 +1,38 @@
+import { SyntheticEvent } from 'react';
+
+export const copyToClipBoardUtility =
+  (str: string): ((e: SyntheticEvent<HTMLElement>) => void) =>
+  (event: SyntheticEvent<HTMLElement>): void => {
+    event.preventDefault();
+
+    const node = document.createElement('div');
+    node.innerText = str;
+    if (document.body) {
+      document.body.appendChild(node);
+
+      const range = document.createRange();
+      const selection = window.getSelection() as Selection;
+      range.selectNodeContents(node);
+      selection.removeAllRanges();
+      selection.addRange(range);
+      document.execCommand('copy');
+      document.body.removeChild(node);
+    }
+  };
+
+export function getCLISetConfigRegistry(
+  command: string,
+  scope: string,
+  registryUrl: string
+): string {
+  // if there is a scope defined there needs to be a ":" separator between the scope and the registry
+  return `${command} ${scope}${scope !== '' ? ':' : ''}registry ${registryUrl}`;
+}
+
+export function getCLISetRegistry(command: string, registryUrl: string): string {
+  return `${command} --registry ${registryUrl}`;
+}
+
+export function getCLIChangePassword(command: string, registryUrl: string): string {
+  return `${command} profile set password --registry ${registryUrl}`;
+}

package/src/utils/colors.ts

@@ -0,0 +1 @@
+export const PRIMARY_COLOR = '#4b5e40';

package/src/utils/constants.ts

@@ -0,0 +1,5 @@
+export const NODE_MANAGER = {
+  npm: 'npm',
+  yarn: 'yarn',
+  pnpm: 'pnpm',
+};

package/src/utils/file-size.ts

@@ -0,0 +1,13 @@
+export default function fileSizeSI(
+  a: number,
+  b?: typeof Math,
+  c?: (p: number) => number,
+  d?: number,
+  e?: number
+): string {
+  return (
+    ((b = Math), (c = b.log), (d = 1e3), (e = (c(a) / c(d)) | 0), a / b.pow(d, e)).toFixed(2) +
+    ' ' +
+    (e ? 'kMGTPEZY'[--e] + 'B' : 'Bytes')
+  );
+}

package/src/utils/i18nForTests.ts

@@ -0,0 +1,25 @@
+import i18n from 'i18next';
+import { initReactI18next } from 'react-i18next';
+
+// NOTE: not used yet, but should replace the original implementation
+
+// https://react.i18next.com/misc/testing#testing-without-stubbing
+
+i18n.use(initReactI18next).init({
+  lng: 'en',
+  fallbackLng: 'en',
+
+  // have a common namespace used around the full app
+  ns: ['translations'],
+  defaultNS: 'translations',
+
+  debug: false,
+
+  interpolation: {
+    escapeValue: false, // not needed for react!!
+  },
+
+  resources: { en: { translations: {} } },
+});
+
+export default i18n;

package/src/utils/login.test.ts

@@ -0,0 +1,71 @@
+// eslint-disable-next-line jest/no-mocks-import
+import {
+  generateTokenWithTimeRange,
+  generateTokenWithExpirationAsString,
+  generateTokenWithOutExpiration,
+  generateInvalidToken,
+} from '../../jest/unit/components/__mocks__/token';
+
+import { isTokenExpire } from './login';
+
+/* eslint-disable no-console */
+console.error = jest.fn();
+
+jest.mock('verdaccio-ui/providers/API/api', () => ({
+  // eslint-disable-next-line jest/no-mocks-import
+  request: require('../../jest/unit/components/__mocks__/api').default.request,
+}));
+
+jest.mock('i18next', () => {
+  const translationEN = require('../../i18n/translations/ui.json');
+  return {
+    t: (key: string) => {
+      const splittedKey = key.split('.');
+      let result = translationEN;
+
+      for (const element of splittedKey) {
+        result = result[element];
+      }
+
+      return result;
+    },
+  };
+});
+
+describe('isTokenExpire', (): void => {
+  test('isTokenExpire - null is not a valid payload', (): void => {
+    expect(isTokenExpire(null)).toBeTruthy();
+  });
+
+  test('isTokenExpire - token is not a valid payload', (): void => {
+    expect(isTokenExpire('not_a_valid_token')).toBeTruthy();
+  });
+
+  test('isTokenExpire - token should not expire in 24 hrs range', (): void => {
+    const token = generateTokenWithTimeRange(24);
+    expect(isTokenExpire(token)).toBeFalsy();
+  });
+
+  test('isTokenExpire - token should expire for current time', (): void => {
+    const token = generateTokenWithTimeRange();
+    expect(isTokenExpire(token)).toBeTruthy();
+  });
+
+  test('isTokenExpire - token expiration is not available', (): void => {
+    const token = generateTokenWithOutExpiration();
+    expect(isTokenExpire(token)).toBeTruthy();
+  });
+
+  test('isTokenExpire - token is not a valid json token', (): void => {
+    const token = generateInvalidToken();
+    const errorToken = new SyntaxError('Unexpected token i in JSON at position 0');
+    const result = ['Invalid token:', errorToken, 'xxxxxx.aW52YWxpZHRva2Vu.xxxxxx'];
+    expect(isTokenExpire(token)).toBeTruthy();
+    expect(console.error).toHaveBeenCalledWith(...result);
+  });
+
+  test('isTokenExpire - token expiration is not a number', (): void => {
+    const token = generateTokenWithExpirationAsString();
+    expect(isTokenExpire(token)).toBeTruthy();
+  });
+});

package/src/utils/login.ts

@@ -0,0 +1,44 @@
+import { Base64 } from 'js-base64';
+import isNumber from 'lodash/isNumber';
+import isString from 'lodash/isString';
+
+export function isTokenExpire(token: string | null): boolean {
+  if (!isString(token)) {
+    return true;
+  }
+
+  const [, payload] = token.split('.');
+
+  if (!payload) {
+    return true;
+  }
+
+  let exp: number;
+  try {
+    exp = JSON.parse(Base64.decode(payload)).exp;
+  } catch (error: any) {
+    // eslint-disable-next-line no-console
+    console.error('Invalid token:', error, token);
+    return true;
+  }
+
+  if (!exp || !isNumber(exp)) {
+    return true;
+  }
+  // Report as expire before (real expire time - 30s)
+  const jsTimestamp = exp * 1000 - 30000;
+  const expired = Date.now() >= jsTimestamp;
+
+  return expired;
+}
+
+export interface LoginBody {
+  username?: string;
+  token?: string;
+  error?: LoginError;
+}
+
+export interface LoginError {
+  type: string;
+  description: string;
+}