feat(overlays): MIN-191 add possibility to login

Short description:

Added the ability to log in via the form.

Approach:

Implemented the capability to facilitate user login through a designated form within the user overlays section in overlays. This enhancement lays the groundwork for incorporating future user overlay functionalities. Upon entering the accurate credentials, the backend system is expected to respond with a Set-Cookie header, thereby establishing the authentication token in the browser's cookies. In the event of successful validation (status code: 200), alongside storing the authentication token in cookies, the application will mark the user as logged in by setting authenticated flag to true and user login in redux store.

Upon logging in or when not logged in, a request is initiated to verify the accuracy of the session information stored in cookies. If the session is valid and the backend responds with a status code of 200, the authentication status in the Redux store is updated to true. Simultaneously, the user login name, as indicated in the backend response, is also adjusted accordingly.

How to test:

1. Click the "Overlays" button in the top bar.
2. Scroll in the drawer to the section: User provided overlays
3. Click "Login" button
4. Enter the appropriate credentials and click "Submit" button

log

src/components/FunctionalArea/Modal/LoginModal/LoginModal.component.test.tsx

+import { render, screen, fireEvent } from '@testing-library/react';
+import { StoreType } from '@/redux/store';
+import {
+  InitialStoreState,
+  getReduxWrapperWithStore,
+} from '@/utils/testing/getReduxWrapperWithStore';
+import { act } from 'react-dom/test-utils';
+import { LoginModal } from './LoginModal.component';
+
+const renderComponent = (initialStoreState: InitialStoreState = {}): { store: StoreType } => {
+  const { Wrapper, store } = getReduxWrapperWithStore(initialStoreState);
+
+  return (
+    render(
+      <Wrapper>
+        <LoginModal />
+      </Wrapper>,
+    ),
+    {
+      store,
+    }
+  );
+};
+
+test('renders LoginModal component', () => {
+  renderComponent();
+
+  const loginInput = screen.getByLabelText(/login/i);
+  const passwordInput = screen.getByLabelText(/password/i);
+  expect(loginInput).toBeInTheDocument();
+  expect(passwordInput).toBeInTheDocument();
+});
+
+test('handles input change correctly', () => {
+  renderComponent();
+
+  const loginInput: HTMLInputElement = screen.getByLabelText(/login/i);
+  const passwordInput: HTMLInputElement = screen.getByLabelText(/password/i);
+
+  fireEvent.change(loginInput, { target: { value: 'testuser' } });
+  fireEvent.change(passwordInput, { target: { value: 'testpassword' } });
+
+  expect(loginInput.value).toBe('testuser');
+  expect(passwordInput.value).toBe('testpassword');
+});
+
+test('submits form', () => {
+  renderComponent();
+
+  const loginInput = screen.getByLabelText(/login/i);
+  const passwordInput = screen.getByLabelText(/password/i);
+  const submitButton = screen.getByText(/submit/i);
+
+  fireEvent.change(loginInput, { target: { value: 'testuser' } });
+  fireEvent.change(passwordInput, { target: { value: 'testpassword' } });
+  act(() => {
+    submitButton.click();
+  });
+
+  expect(submitButton).toBeDisabled();
+});