@verdaccio/ui-components 2.0.0-alpha.0 → 3.0.0-next.1

package/src/components/Install/img/npm.svg

@@ -0,0 +1,15 @@
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 256 256" enable-background="new 0 0 256 256" xml:space="preserve">
+<polygon fill="#CC0000" points="23,65.6 130,3.3 237,65.6 237,190.1 130,252.4 23,190.1 "/>
+<polygon fill="#FFFFFF" points="133,127.8 232.5,70.5 236.5,186 133,248.5 "/>
+<g>
+	<path fill="#CC0000" d="M234,67l-0.3,122.4l-103.8,60.2l-0.5-120.3L234,67z M146.7,139.3l0.3,80.4l34.5-20.1l-0.1-60.6l17.4-10.3
+		l0,60.8l17.4-10.2l0.1-81.4L146.7,139.3z"/>
+</g>
+<path fill="#910505" d="M136.8,4.2c-4.8-2.7-12.5-2.7-17.3,0L24.7,58.7c-4.8,2.7-8.6,9.5-8.6,14.9v109c0,5.5,3.9,12.2,8.6,14.9
+	l94.8,54.5c4.8,2.7,12.5,2.7,17.3,0l94.8-54.5c4.8-2.7,8.6-9.5,8.6-14.9v-109c0-5.5-3.9-12.2-8.6-14.9L136.8,4.2z M220.9,61.2
+	c4.8,2.7,4.8,7.2,0,9.9l-83,47.7c-4.8,2.7-12.5,2.7-17.3,0L36.4,70.4c-4.8-2.7-4.8-7.2,0-9.9l83-47.7c4.8-2.7,12.5-2.7,17.3,0
+	L220.9,61.2z M23.5,81.5c0-5.5,3.9-7.7,8.6-5l84.9,48.8c4.8,2.7,8.6,9.5,8.6,14.9V237c0,5.5-3.9,7.7-8.6,5l-84.9-48.8
+	c-4.8-2.7-8.6-9.5-8.6-14.9V81.5z M141.8,240.5c-4.8,2.7-8.6,0.5-8.6-5v-95.3c0-5.5,3.9-12.2,8.6-14.9L224.2,78
+	c4.8-2.7,8.6-0.5,8.6,5v95.3c0,5.5-3.9,12.2-8.6,14.9L141.8,240.5z"/>
+</svg>

package/src/components/Install/img/pnpm.svg

@@ -0,0 +1 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid meet" viewBox="66.09157809474142 33.5 184.5 184.49999999999997" width="180" height="180"><defs><path d="M67.59 35L247.59 35L247.59 215L67.59 215L67.59 35Z" id="b2JZZcA3fT"></path><path d="M237.6 95L187.6 95L187.6 45L237.6 45L237.6 95Z" id="bj0tb0Y8q"></path><path d="M182.59 95L132.59 95L132.59 45L182.59 45L182.59 95Z" id="dkDSTzPj3"></path><path d="M127.59 95L77.59 95L77.59 45L127.59 45L127.59 95Z" id="a4vNdcNLpF"></path><path d="M237.6 150L187.6 150L187.6 100L237.6 100L237.6 150Z" id="h2t4Zj1jSU"></path><path d="M182.59 150L132.59 150L132.59 100L182.59 100L182.59 150Z" id="b4t5pngwvT"></path><path d="M182.59 205L132.59 205L132.59 155L182.59 155L182.59 205Z" id="b9s1gd5m2"></path><path d="M237.6 205L187.6 205L187.6 155L237.6 155L237.6 205Z" id="cmt9WLvz7"></path><path d="M127.59 205L77.59 205L77.59 155L127.59 155L127.59 205Z" id="bJUNqgFSg"></path></defs><g><g><use xlink:href="#b2JZZcA3fT" opacity="1" fill="#ffffff" fill-opacity="1"></use></g><g><use xlink:href="#bj0tb0Y8q" opacity="1" fill="#f9ad00" fill-opacity="1"></use></g><g><use xlink:href="#dkDSTzPj3" opacity="1" fill="#f9ad00" fill-opacity="1"></use></g><g><use xlink:href="#a4vNdcNLpF" opacity="1" fill="#f9ad00" fill-opacity="1"></use></g><g><use xlink:href="#h2t4Zj1jSU" opacity="1" fill="#f9ad00" fill-opacity="1"></use></g><g><use xlink:href="#b4t5pngwvT" opacity="1" fill="#4e4e4e" fill-opacity="1"></use></g><g><use xlink:href="#b9s1gd5m2" opacity="1" fill="#4e4e4e" fill-opacity="1"></use></g><g><use xlink:href="#cmt9WLvz7" opacity="1" fill="#4e4e4e" fill-opacity="1"></use></g><g><use xlink:href="#bJUNqgFSg" opacity="1" fill="#4e4e4e" fill-opacity="1"></use></g></g></svg>

package/src/components/Install/img/yarn.svg

@@ -0,0 +1 @@
+<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 518 518"><style>.st0{fill:#2c8ebb}.st1{fill:#fff}</style><path class="st0" d="M259 0c143 0 259 116 259 259S402 518 259 518 0 402 0 259 116 0 259 0z"/><path class="st1" d="M435.2 337.5c-1.8-14.2-13.8-24-29.2-23.8-23 .3-42.3 12.2-55.1 20.1-5 3.1-9.3 5.4-13 7.1.8-11.6.1-26.8-5.9-43.5-7.3-20-17.1-32.3-24.1-39.4 8.1-11.8 19.2-29 24.4-55.6 4.5-22.7 3.1-58-7.2-77.8-2.1-4-5.6-6.9-10-8.1-1.8-.5-5.2-1.5-11.9.4C293.1 96 289.6 93.8 286.9 92c-5.6-3.6-12.2-4.4-18.4-2.1-8.3 3-15.4 11-22.1 25.2-1 2.1-1.9 4.1-2.7 6.1-12.7.9-32.7 5.5-49.6 23.8-2.1 2.3-6.2 4-10.5 5.6h.1c-8.8 3.1-12.8 10.3-17.7 23.3-6.8 18.2.2 36.1 7.1 47.7-9.4 8.4-21.9 21.8-28.5 37.5-8.2 19.4-9.1 38.4-8.8 48.7-7 7.4-17.8 21.3-19 36.9-1.6 21.8 6.3 36.6 9.8 42 1 1.6 2.1 2.9 3.3 4.2-.4 2.7-.5 5.6.1 8.6 1.3 7 5.7 12.7 12.4 16.3 13.2 7 31.6 10 45.8 2.9 5.1 5.4 14.4 10.6 31.3 10.6h1c4.3 0 58.9-2.9 74.8-6.8 7.1-1.7 12-4.7 15.2-7.4 10.2-3.2 38.4-12.8 65-30 18.8-12.2 25.3-14.8 39.3-18.2 13.6-3.3 22.1-15.7 20.4-29.4zm-23.8 14.7c-16 3.8-24.1 7.3-43.9 20.2-30.9 20-64.7 29.3-64.7 29.3s-2.8 4.2-10.9 6.1c-14 3.4-66.7 6.3-71.5 6.4-12.9.1-20.8-3.3-23-8.6-6.7-16 9.6-23 9.6-23s-3.6-2.2-5.7-4.2c-1.9-1.9-3.9-5.7-4.5-4.3-2.5 6.1-3.8 21-10.5 27.7-9.2 9.3-26.6 6.2-36.9.8-11.3-6 .8-20.1.8-20.1s-6.1 3.6-11-3.8c-4.4-6.8-8.5-18.4-7.4-32.7 1.2-16.3 19.4-32.1 19.4-32.1s-3.2-24.1 7.3-48.8c9.5-22.5 35.1-40.6 35.1-40.6s-21.5-23.8-13.5-45.2c5.2-14 7.3-13.9 9-14.5 6-2.3 11.8-4.8 16.1-9.5 21.5-23.2 48.9-18.8 48.9-18.8s13-39.5 25-31.8c3.7 2.4 17 32 17 32s14.2-8.3 15.8-5.2c8.6 16.7 9.6 48.6 5.8 68-6.4 32-22.4 49.2-28.8 60-1.5 2.5 17.2 10.4 29 43.1 10.9 29.9 1.2 55 2.9 57.8.3.5.4.7.4.7s12.5 1 37.6-14.5c13.4-8.3 29.3-17.6 47.4-17.8 17.5-.3 18.4 20.2 5.2 23.4z"/></svg>

package/src/components/Install/index.ts

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

package/src/components/Label/Label.test.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+
+import { render } from '../../test/test-react-testing-library';
+import Label from './Label';
+
+describe('<Label /> component', () => {
+  const props = {
+    text: 'test',
+  };
+  test('should render the component in default state', () => {
+    const { container } = render(<Label text={props.text} />);
+    expect(container.firstChild).toMatchSnapshot();
+  });
+});

package/src/components/Label/Label.tsx

@@ -0,0 +1,36 @@
+/* eslint-disable verdaccio/jsx-spread */
+import styled from '@emotion/styled';
+import React from 'react';
+
+import { FontWeight, Theme } from '../../';
+
+interface Props {
+  text: string;
+  capitalize?: boolean;
+  weight?: FontWeight;
+}
+
+interface WrapperProps {
+  capitalize: boolean;
+  weight: FontWeight;
+}
+
+const Wrapper = styled('div')<WrapperProps & { theme?: Theme }>((props) => ({
+  fontWeight: props.theme?.fontWeight[props.weight],
+  textTransform: props.capitalize ? 'capitalize' : 'none',
+}));
+
+const Label: React.FC<Props> = ({
+  text = '',
+  capitalize = false,
+  weight = 'regular',
+  ...props
+}) => {
+  return (
+    <Wrapper capitalize={capitalize} weight={weight} {...props}>
+      {text}
+    </Wrapper>
+  );
+};
+
+export default Label;

package/src/components/Label/index.ts

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

package/src/components/Link/Link.tsx

@@ -0,0 +1,39 @@
+import styled from '@emotion/styled';
+import Typography from '@mui/material/Typography';
+import React from 'react';
+import { Link as RouterLink } from 'react-router-dom';
+
+type LinkRef = HTMLAnchorElement;
+
+export const CustomRouterLink = styled(RouterLink)`
+  text-decoration: none;
+  &:hover,
+  &:focus {
+    text-decoration: underline;
+  }
+`;
+
+// TODO: improve any with custom types for a and RouterLink
+const Link = React.forwardRef<LinkRef, any>(function LinkFunction(
+  { external, to, children, variant, className, onClick },
+  ref
+) {
+  return external ? (
+    <a
+      className={className}
+      href={to}
+      onClick={onClick}
+      ref={ref}
+      rel="noopener noreferrer"
+      target="_blank"
+    >
+      <Typography variant={variant ?? 'caption'}>{children}</Typography>
+    </a>
+  ) : (
+    <CustomRouterLink className={className} innerRef={ref} onClick={onClick} to={to}>
+      <Typography variant={variant}>{children}</Typography>
+    </CustomRouterLink>
+  );
+});
+
+export default Link;

package/src/components/Link/index.ts

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

package/src/components/Loading/Loading.stories.tsx

@@ -0,0 +1,14 @@
+import Box from '@mui/material/Box';
+import React from 'react';
+
+import Loading from './Loading';
+
+export default {
+  title: 'Components/Detail/Loading',
+};
+
+export const Icons: any = () => (
+  <Box sx={{ width: '100%' }}>
+    <Loading />
+  </Box>
+);

package/src/components/Loading/Loading.test.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+import { render } from '../../test/test-react-testing-library';
+import Loading from './Loading';
+
+describe('<Loading /> component', () => {
+  test('should render the component in default state', () => {
+    const { container } = render(<Loading />);
+    expect(container.firstChild).toMatchSnapshot();
+  });
+});

package/src/components/Loading/Loading.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+
+import { Logo } from '../../';
+import Spinner from './Spinner';
+import { Badge, Wrapper } from './styles';
+
+const Loading: React.FC = () => (
+  <Wrapper data-testid="loading">
+    <Badge>
+      <Logo size="big" />
+    </Badge>
+    <Spinner data-testid="spinnerLogo" />
+  </Wrapper>
+);
+
+export default Loading;

package/src/components/Loading/Spinner/Spinner.test.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+
+import { cleanup, render } from '../../../test/test-react-testing-library';
+import Spinner from './Spinner';
+
+describe('<Spinner /> component', () => {
+  beforeEach(cleanup);
+
+  test('should render the component in default state', () => {
+    const wrapper = render(<Spinner />);
+    expect(wrapper).toMatchSnapshot();
+  });
+});

package/src/components/Loading/Spinner/Spinner.tsx

@@ -0,0 +1,34 @@
+import styled from '@emotion/styled';
+import CircularProgress from '@mui/material/CircularProgress';
+import React from 'react';
+
+import { Theme } from '../../../';
+
+interface Props {
+  size?: number;
+  centered?: boolean;
+}
+
+const Spinner: React.FC<Props> = ({ size = 50, centered = false }) => (
+  <Wrapper centered={centered}>
+    <Circular size={size} />
+  </Wrapper>
+);
+
+export default Spinner;
+
+const Wrapper = styled('div')<Pick<Props, 'centered'>>(({ centered }) => ({
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  ...(centered && {
+    position: 'absolute',
+    top: '50%',
+    left: '50%',
+    transform: 'translate(-50%, -50%)',
+  }),
+}));
+
+const Circular = styled(CircularProgress)<{ theme?: Theme }>(({ theme }) => ({
+  color: theme?.palette.mode === 'dark' ? theme?.palette.white : theme?.palette.primary.main,
+}));

package/src/components/Loading/Spinner/index.tsx

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

package/src/components/Loading/index.ts

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

package/src/components/Loading/styles.ts

@@ -0,0 +1,17 @@
+import styled from '@emotion/styled';
+
+import { Theme } from '../../';
+
+export const Wrapper = styled('div')({
+  transform: 'translate(-50%, -50%)',
+  top: '50%',
+  left: '50%',
+  position: 'absolute',
+});
+
+export const Badge = styled('div')<{ theme?: Theme }>(({ theme }) => ({
+  margin: '0 0 30px 0',
+  borderRadius: 25,
+  boxShadow: '0 10px 20px 0 rgba(69, 58, 100, 0.2)',
+  background: theme?.palette.mode === 'dark' ? theme?.palette.black : '#f7f8f6',
+}));

package/src/components/LoginDialog/LoginDialog.stories.tsx

@@ -0,0 +1,20 @@
+/* eslint-disable verdaccio/jsx-spread */
+import { action } from '@storybook/addon-actions';
+import React from 'react';
+
+import LoginDialog from './LoginDialog';
+
+export default {
+  title: 'Components/Dialog/LoginDialog',
+};
+
+export const OpenLoginDialog = {
+  render: (args) => <LoginDialog {...args} />,
+  argTypes: {
+    open: true,
+  },
+  args: {
+    open: true,
+    onClose: action('onClose'),
+  },
+};

package/src/components/LoginDialog/LoginDialog.test.tsx

@@ -0,0 +1,108 @@
+import React from 'react';
+
+import { api, store } from '../../';
+import {
+  act,
+  cleanup,
+  fireEvent,
+  renderWithStore,
+  screen,
+  waitFor,
+} from '../../test/test-react-testing-library';
+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('form-placeholder.username');
+    expect(userNameInput).toBeInTheDocument();
+
+    fireEvent.focus(userNameInput);
+
+    fireEvent.change(userNameInput, { target: { value: 'xyz' } });
+
+    const passwordInput = screen.getByPlaceholderText('form-placeholder.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);
+  });
+
+  test.todo('validateCredentials: should validate credentials');
+
+  test.todo('submitCredentials: should submit credentials');
+});

package/src/components/LoginDialog/LoginDialog.tsx

@@ -0,0 +1,79 @@
+import Dialog from '@mui/material/Dialog';
+import DialogContent from '@mui/material/DialogContent';
+import i18next from 'i18next';
+import isEmpty from 'lodash/isEmpty';
+import React, { useCallback, useEffect } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+
+import { Dispatch, LoginBody, RootState } from '../../';
+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: any = 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 data-testid="dialogContentLogin">
+        <LoginDialogHeader />
+        <LoginDialogForm error={loginStore.error} onSubmit={handleDoLogin} />
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export default LoginDialog;

package/src/components/LoginDialog/LoginDialogCloseButton.tsx

@@ -0,0 +1,32 @@
+import styled from '@emotion/styled';
+import CloseIcon from '@mui/icons-material/Close';
+import DialogTitle from '@mui/material/DialogTitle';
+import IconButton from '@mui/material/IconButton';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { Theme } from '../../';
+
+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/components/LoginDialog/LoginDialogForm.tsx

@@ -0,0 +1,96 @@
+/* eslint-disable verdaccio/jsx-spread */
+import styled from '@emotion/styled';
+import Button from '@mui/material/Button';
+import React, { memo } from 'react';
+import { useForm } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+
+import { LoginError, TextField, Theme } from '../../';
+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 }) },
+        })}
+        data-testid="password"
+        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/components/LoginDialog/LoginDialogFormError.tsx

@@ -0,0 +1,42 @@
+import styled from '@emotion/styled';
+import Error from '@mui/icons-material/Error';
+import Box from '@mui/material/Box';
+import SnackbarContent from '@mui/material/SnackbarContent';
+import React, { memo } from 'react';
+
+import { LoginError, Theme } from '../../';
+
+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;