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

package/src/App/Header/LanguageSwitch.tsx

@@ -0,0 +1,125 @@
+/* eslint-disable react/jsx-pascal-case */
+import styled from '@emotion/styled';
+import { withStyles } from '@material-ui/core/styles';
+import LanguageIcon from '@material-ui/icons/Language';
+import i18next from 'i18next';
+import React, { useCallback, useContext, useState, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { AutoComplete } from 'verdaccio-ui/components/AutoComplete/AutoCompleteV2';
+import MenuItem from 'verdaccio-ui/components/MenuItem';
+import { Theme } from 'verdaccio-ui/design-tokens/theme';
+import ThemeContext from 'verdaccio-ui/design-tokens/ThemeContext';
+
+import { Language, listLanguages } from '../../i18n/enabledLanguages';
+
+const listConverted = listLanguages.reduce((prev, item) => {
+  prev[item.lng] = {
+    translation: item.menuKey,
+    icon: item.icon,
+  };
+  return prev;
+}, {});
+
+const LanguageSwitch = () => {
+  const themeContext = useContext(ThemeContext);
+  const [languages] = useState<Language[]>(
+    Object.keys(i18next.options?.resources || {}) as Language[]
+  );
+  const { t } = useTranslation();
+
+  if (!themeContext) {
+    throw Error(t('theme-context-not-correct-used'));
+  }
+
+  const currentLanguage = themeContext.language;
+
+  const switchLanguage = useCallback(
+    ({ language }: { language: Language }) => {
+      themeContext.setLanguage(language);
+    },
+    [themeContext]
+  );
+
+  const getCurrentLngDetails = useCallback(
+    (language: Language) => {
+      const lng = listConverted[language] || listConverted['en-US'];
+      return {
+        icon: <lng.icon />,
+        translation: t(lng.translation),
+      };
+    },
+    [t]
+  );
+
+  const options = useMemo(
+    () =>
+      languages.map((language) => {
+        const { icon, translation } = getCurrentLngDetails(language);
+        return {
+          language,
+          icon,
+          translation,
+        };
+      }),
+    [languages, getCurrentLngDetails]
+  );
+
+  const option = useCallback(
+    ({ icon, translation }: ReturnType<typeof getCurrentLngDetails>) => (
+      <StyledMenuItem component="div">
+        {icon}
+        {translation}
+      </StyledMenuItem>
+    ),
+    []
+  );
+
+  const optionLabel = useCallback(
+    ({ translation }: ReturnType<typeof getCurrentLngDetails>) => translation,
+    []
+  );
+
+  return (
+    <Wrapper>
+      <AutoComplete
+        defaultValue={getCurrentLngDetails(currentLanguage).translation}
+        getOptionLabel={optionLabel}
+        hasClearIcon={true}
+        inputStartAdornment={<StyledLanguageIcon />}
+        onClick={switchLanguage}
+        options={options}
+        renderOption={option}
+        variant="outlined"
+      />
+    </Wrapper>
+  );
+};
+
+export default LanguageSwitch;
+
+const StyledLanguageIcon = styled(LanguageIcon)<{ theme?: Theme }>(({ theme }) => ({
+  color: theme?.palette.white,
+}));
+
+const Wrapper = styled('div')<{ theme?: Theme }>(({ theme }) => ({
+  width: 220,
+  display: 'none',
+  [`@media screen and (min-width: ${theme?.breakPoints.medium}px)`]: {
+    display: 'inline-block',
+  },
+}));
+
+const StyledMenuItem = withStyles((theme: Theme) => ({
+  root: {
+    display: 'grid',
+    cursor: 'pointer',
+    gridGap: theme?.spacing(0.5),
+    gridTemplateColumns: '20px 1fr',
+    alignItems: 'center',
+    '&:first-child': {
+      borderTopLeftRadius: 4,
+      borderTopRightRadius: 4,
+    },
+  },
+}))(MenuItem);

package/src/App/Header/LoginDialog/LoginDialog.test.tsx

@@ -0,0 +1,112 @@
+import React from 'react';
+
+import api from 'verdaccio-ui/providers/API/api';
+import {
+  renderWithStore,
+  waitFor,
+  fireEvent,
+  cleanup,
+  screen,
+  act,
+} from 'verdaccio-ui/utils/test-react-testing-library';
+
+import { store } from '../../../store';
+
+import LoginDialog from './LoginDialog';
+
+describe('<LoginDialog /> component', () => {
+  beforeEach(() => {
+    jest.resetModules();
+    jest.resetAllMocks();
+    cleanup();
+  });
+
+  test('should render the component in default state', () => {
+    const props = {
+      onClose: jest.fn(),
+    };
+    const { container } = renderWithStore(<LoginDialog onClose={props.onClose} />, store);
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
+  test('should load the component with the open prop', async () => {
+    const props = {
+      open: true,
+      onClose: jest.fn(),
+    };
+
+    const { getByTestId } = renderWithStore(
+      <LoginDialog onClose={props.onClose} open={props.open} />,
+      store
+    );
+
+    const loginDialogHeading = await waitFor(() => getByTestId('login-dialog-form-login-button'));
+    expect(loginDialogHeading).toBeTruthy();
+  });
+
+  test('onClose: should close the login modal', async () => {
+    const props = {
+      open: true,
+      onClose: jest.fn(),
+    };
+
+    const { getByTestId } = renderWithStore(
+      <LoginDialog onClose={props.onClose} open={props.open} />,
+      store
+    );
+
+    const loginDialogButton = await waitFor(() => getByTestId('close-login-dialog-button'));
+    expect(loginDialogButton).toBeTruthy();
+
+    await act(() => {
+      fireEvent.click(loginDialogButton, { open: false });
+    });
+
+    expect(props.onClose).toHaveBeenCalled();
+  });
+
+  test('setCredentials - should set username and password in state', async () => {
+    const props = {
+      open: true,
+      onClose: jest.fn(),
+    };
+
+    jest.spyOn(api, 'request').mockImplementation(() =>
+      Promise.resolve({
+        username: 'xyz',
+        token: 'djsadaskljd',
+      })
+    );
+
+    await act(async () => {
+      renderWithStore(<LoginDialog onClose={props.onClose} open={props.open} />, store);
+    });
+
+    const userNameInput = screen.getByPlaceholderText('Your username');
+    expect(userNameInput).toBeInTheDocument();
+
+    fireEvent.focus(userNameInput);
+
+    fireEvent.change(userNameInput, { target: { value: 'xyz' } });
+
+    const passwordInput = screen.getByPlaceholderText('Your strong password');
+    expect(userNameInput).toBeInTheDocument();
+    fireEvent.focus(passwordInput);
+
+    await act(async () => {
+      fireEvent.change(passwordInput, { target: { value: '1234' } });
+    });
+    const signInButton = screen.getByTestId('login-dialog-form-login-button');
+    expect(signInButton).not.toBeDisabled();
+
+    await act(async () => {
+      fireEvent.click(signInButton);
+    });
+    expect(props.onClose).toHaveBeenCalledTimes(1);
+    // screen.debug();
+  });
+
+  test.todo('validateCredentials: should validate credentials');
+
+  test.todo('submitCredentials: should submit credentials');
+});

package/src/App/Header/LoginDialog/LoginDialog.tsx

@@ -0,0 +1,81 @@
+import i18next from 'i18next';
+import isEmpty from 'lodash/isEmpty';
+import React, { useEffect, useCallback } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+
+import Dialog from 'verdaccio-ui/components/Dialog';
+import DialogContent from 'verdaccio-ui/components/DialogContent';
+
+import { LoginBody } from '../../../store/models/login';
+import { Dispatch, RootState } from '../../../store/store';
+
+import LoginDialogCloseButton from './LoginDialogCloseButton';
+import LoginDialogForm, { FormValues } from './LoginDialogForm';
+import LoginDialogHeader from './LoginDialogHeader';
+
+interface Props {
+  open?: boolean;
+  onClose: () => void;
+}
+
+const LoginDialog: React.FC<Props> = ({ onClose, open = false }) => {
+  const loginStore = useSelector((state: RootState) => state.login);
+  const dispatch = useDispatch<Dispatch>();
+  const makeLogin = useCallback(
+    async (username?: string, password?: string): Promise<LoginBody | void> => {
+      // checks isEmpty
+      if (isEmpty(username) || isEmpty(password)) {
+        dispatch.login.addError({
+          type: 'error',
+          description: i18next.t('form-validation.username-or-password-cant-be-empty'),
+        });
+        return;
+      }
+
+      try {
+        dispatch.login.getUser({ username, password });
+        // const response: LoginBody = await doLogin(username as string, password as string);
+        dispatch.login.clearError();
+      } catch (e: any) {
+        dispatch.login.addError({
+          type: 'error',
+          description: i18next.t('form-validation.unable-to-sign-in'),
+        });
+        // eslint-disable-next-line no-console
+        console.error('login error', e.message);
+      }
+    },
+    [dispatch]
+  );
+
+  const handleDoLogin = useCallback(
+    async (data: FormValues) => {
+      await makeLogin(data.username, data.password);
+    },
+    [makeLogin]
+  );
+
+  useEffect(() => {
+    if (loginStore.token && typeof loginStore.error === 'undefined') {
+      onClose();
+    }
+  }, [loginStore, onClose]);
+
+  return (
+    <Dialog
+      data-testid="login--dialog"
+      fullWidth={true}
+      id="login--dialog"
+      maxWidth="sm"
+      onClose={onClose}
+      open={open}>
+      <LoginDialogCloseButton onClose={onClose} />
+      <DialogContent>
+        <LoginDialogHeader />
+        <LoginDialogForm error={loginStore.error} onSubmit={handleDoLogin} />
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export default LoginDialog;

package/src/App/Header/LoginDialog/LoginDialogCloseButton.tsx

@@ -0,0 +1,32 @@
+import styled from '@emotion/styled';
+import CloseIcon from '@material-ui/icons/Close';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+
+import DialogTitle from 'verdaccio-ui/components/DialogTitle';
+import IconButton from 'verdaccio-ui/components/IconButton';
+import { Theme } from 'verdaccio-ui/design-tokens/theme';
+
+const StyledIconButton = styled(IconButton)<{ theme?: Theme }>(({ theme }) => ({
+  position: 'absolute',
+  right: theme.spacing() / 2,
+  top: theme.spacing() / 2,
+  color: theme.palette.grey[500],
+}));
+
+interface Props {
+  onClose: () => void;
+}
+
+const LoginDialogCloseButton: React.FC<Props> = ({ onClose }) => {
+  const { t } = useTranslation();
+  return (
+    <DialogTitle>
+      <StyledIconButton data-testid="close-login-dialog-button" onClick={onClose}>
+        <CloseIcon titleAccess={t('button.close')} />
+      </StyledIconButton>
+    </DialogTitle>
+  );
+};
+
+export default LoginDialogCloseButton;

package/src/App/Header/LoginDialog/LoginDialogForm.tsx

@@ -0,0 +1,97 @@
+/* eslint-disable verdaccio/jsx-spread */
+import styled from '@emotion/styled';
+import React, { memo } from 'react';
+import { useForm } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+
+import Button from 'verdaccio-ui/components/Button';
+import TextField from 'verdaccio-ui/components/TextField';
+import { Theme } from 'verdaccio-ui/design-tokens/theme';
+import { LoginError } from 'verdaccio-ui/utils/login';
+
+import LoginDialogFormError from './LoginDialogFormError';
+
+const StyledForm = styled('form')<{ theme?: Theme }>(({ theme }) => ({
+  marginTop: theme.spacing(1),
+}));
+
+const StyledButton = styled(Button)<{ theme?: Theme }>(({ theme }) => ({
+  margin: theme.spacing(3, 0, 2),
+}));
+
+export interface FormValues {
+  username: string;
+  password: string;
+}
+
+interface Props {
+  onSubmit: (formValues: FormValues) => void;
+  error?: LoginError;
+}
+
+const LoginDialogForm = memo(({ onSubmit, error }: Props) => {
+  const { t } = useTranslation();
+  const {
+    register,
+    handleSubmit,
+    formState: { isValid, errors },
+  } = useForm<FormValues>({ mode: 'onChange' });
+
+  const onSubmitForm = (formValues: FormValues) => {
+    onSubmit(formValues);
+  };
+
+  return (
+    <StyledForm noValidate={true} onSubmit={handleSubmit(onSubmitForm)}>
+      <TextField
+        autoComplete="username"
+        error={!!errors.username}
+        fullWidth={true}
+        helperText={errors.username?.message}
+        id="login--dialog-username"
+        {...register('username', {
+          required: { value: true, message: t('form-validation.required-field') },
+          minLength: { value: 2, message: t('form-validation.required-min-length', { length: 2 }) },
+        })}
+        label={t('form.username')}
+        margin="normal"
+        name="username"
+        placeholder={t('form-placeholder.username')}
+        required={true}
+        variant="outlined"
+      />
+      <TextField
+        autoComplete="current-password"
+        error={!!errors.password}
+        fullWidth={true}
+        helperText={errors.password?.message}
+        id="login--dialog-password"
+        {...register('password', {
+          required: { value: true, message: t('form-validation.required-field') },
+          minLength: { value: 2, message: t('form-validation.required-min-length', { length: 2 }) },
+        })}
+        label={t('form.password')}
+        margin="normal"
+        name="password"
+        placeholder={t('form-placeholder.password')}
+        required={true}
+        type="password"
+        variant="outlined"
+      />
+      {error && <LoginDialogFormError error={error} />}
+      <StyledButton
+        color="primary"
+        data-testid="login-dialog-form-login-button"
+        disabled={!isValid}
+        fullWidth={true}
+        id="login--dialog-button-submit"
+        size="large"
+        type="submit"
+        variant="contained">
+        {t('button.login')}
+      </StyledButton>
+    </StyledForm>
+  );
+});
+
+export default LoginDialogForm;

package/src/App/Header/LoginDialog/LoginDialogFormError.tsx

@@ -0,0 +1,43 @@
+import styled from '@emotion/styled';
+import Error from '@material-ui/icons/Error';
+import React, { memo } from 'react';
+
+import Box from 'verdaccio-ui/components/Box';
+import SnackbarContent from 'verdaccio-ui/components/SnackbarContent';
+import { Theme } from 'verdaccio-ui/design-tokens/theme';
+import { LoginError } from 'verdaccio-ui/utils/login';
+
+const StyledSnackbarContent = styled(SnackbarContent)<{ theme?: Theme }>(({ theme }) => ({
+  backgroundColor: theme?.palette.error.dark,
+  color: theme?.palette.white,
+}));
+
+const StyledErrorIcon = styled(Error)<{ theme?: Theme }>(({ theme }) => ({
+  fontSize: 20,
+  opacity: 0.9,
+  marginRight: theme?.spacing(1),
+}));
+
+export interface FormValues {
+  username: string;
+  password: string;
+}
+
+interface Props {
+  error: LoginError;
+}
+
+const LoginDialogFormError = memo(({ error }: Props) => {
+  return (
+    <StyledSnackbarContent
+      message={
+        <Box alignItems="center" display="flex">
+          <StyledErrorIcon />
+          {error.description}
+        </Box>
+      }
+    />
+  );
+});
+
+export default LoginDialogFormError;

package/src/App/Header/LoginDialog/LoginDialogHeader.tsx

@@ -0,0 +1,48 @@
+import styled from '@emotion/styled';
+import CloseIcon from '@material-ui/icons/Close';
+import LockOutlined from '@material-ui/icons/LockOutlined';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+
+import Avatar from 'verdaccio-ui/components/Avatar';
+import Box from 'verdaccio-ui/components/Box';
+import Heading from 'verdaccio-ui/components/Heading';
+import IconButton from 'verdaccio-ui/components/IconButton';
+import { Theme } from 'verdaccio-ui/design-tokens/theme';
+interface Props {
+  onClose?: () => void;
+}
+
+const LoginDialogHeader: React.FC<Props> = ({ onClose }) => {
+  const { t } = useTranslation();
+
+  return (
+    <Box alignItems="center" display="flex" flexDirection="column" position="relative">
+      {onClose && (
+        <StyledIconButton aria-label={t('button.close')} onClick={onClose}>
+          <CloseIcon />
+        </StyledIconButton>
+      )}
+      <StyledAvatar>
+        <LockOutlined />
+      </StyledAvatar>
+      <Heading>{t('button.login')}</Heading>
+    </Box>
+  );
+};
+
+export default LoginDialogHeader;
+
+const StyledAvatar = styled(Avatar)<{ theme?: Theme }>(({ theme }) => ({
+  margin: theme?.spacing(1),
+  backgroundColor:
+    theme?.palette.type === 'light' ? theme?.palette.primary.main : theme?.palette.cyanBlue,
+  color: theme?.palette.white,
+}));
+
+const StyledIconButton = styled(IconButton)<{ theme?: Theme }>(({ theme }) => ({
+  position: 'absolute',
+  right: theme?.spacing() / 2,
+  top: theme?.spacing() / 2,
+  color: theme?.palette.grey[500],
+}));

package/src/App/Header/LoginDialog/__snapshots__/LoginDialog.test.tsx.snap

@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<LoginDialog /> component should render the component in default state 1`] = `null`;

package/src/App/Header/LoginDialog/index.ts

@@ -0,0 +1 @@
+export { default } from './LoginDialog';

package/src/App/Header/RegistryInfoContent/RegistryInfoContent.test.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+
+import { screen, render, cleanup } from 'verdaccio-ui/utils/test-react-testing-library';
+
+import RegistryInfoContent from './RegistryInfoContent';
+
+describe('<RegistryInfoContent /> component', () => {
+  afterEach(() => {
+    cleanup();
+  });
+
+  test('should load the component with no data', () => {
+    render(<RegistryInfoContent registryUrl={''} scope={''} />);
+    expect(screen.getByText('No configurations available')).toBeInTheDocument();
+  });
+
+  test('should load the appropiate tab content when the tab is clicked', () => {
+    const props = { registryUrl: 'http://localhost:4872', scope: '@' };
+    render(<RegistryInfoContent registryUrl={props.registryUrl} scope={props.scope} />);
+
+    expect(screen.getByText('pnpm set @:registry http://localhost:4872')).toBeInTheDocument();
+    expect(screen.getByText('pnpm adduser --registry http://localhost:4872')).toBeInTheDocument();
+    expect(
+      screen.getByText('pnpm profile set password --registry http://localhost:4872')
+    ).toBeInTheDocument();
+  });
+});