♻️ refactor: Login and Registration component Improvement (#2716)

* ♻️ refactor: Login form improvement

* display error message when API is down
* add loading animation to Login form while fetching data
* optimize startupConfig to fetch data only on initial render to prevent unnecessary API calls

* 🚑 fix: clear authentication error messages on successful login

* ♻️ refactor: componentize duplicate codes on registration and login screens

* chore: update types

* refactor: layout rendering order

* refactor: startup title fix

* refactor: reset/request-reset-password under new AuthLayout

* ci: fix Login.spec.ts

* ci: fix registration.spec.tsx

---------

Co-authored-by: Danny Avila <danny@librechat.ai>

client/src/components/Auth/__tests__/Registration.spec.tsx

@@ -1,10 +1,32 @@
-import { render, waitFor, screen } from 'test/layout-test-utils';
+import reactRouter from 'react-router-dom';
 import userEvent from '@testing-library/user-event';
-import Registration from '../Registration';
+import { render, waitFor, screen } from 'test/layout-test-utils';
 import * as mockDataProvider from 'librechat-data-provider/react-query';
+import type { TStartupConfig } from 'librechat-data-provider';
+import Registration from '~/components/Auth/Registration';
+import AuthLayout from '~/components/Auth/AuthLayout';
 
 jest.mock('librechat-data-provider/react-query');
 
+const mockStartupConfig = {
+  isFetching: false,
+  isLoading: false,
+  isError: false,
+  data: {
+    socialLogins: ['google', 'facebook', 'openid', 'github', 'discord'],
+    discordLoginEnabled: true,
+    facebookLoginEnabled: true,
+    githubLoginEnabled: true,
+    googleLoginEnabled: true,
+    openidLoginEnabled: true,
+    openidLabel: 'Test OpenID',
+    openidImageUrl: 'http://test-server.com',
+    registrationEnabled: true,
+    socialLoginEnabled: true,
+    serverDomain: 'mock-server',
+  },
+};
+
 const setup = ({
   useGetUserQueryReturnValue = {
     isLoading: false,
@@ -28,23 +50,7 @@ const setup = ({
       user: {},
     },
   },
-  useGetStartupCongfigReturnValue = {
-    isLoading: false,
-    isError: false,
-    data: {
-      socialLogins: ['google', 'facebook', 'openid', 'github', 'discord'],
-      discordLoginEnabled: true,
-      facebookLoginEnabled: true,
-      githubLoginEnabled: true,
-      googleLoginEnabled: true,
-      openidLoginEnabled: true,
-      openidLabel: 'Test OpenID',
-      openidImageUrl: 'http://test-server.com',
-      registrationEnabled: true,
-      socialLoginEnabled: true,
-      serverDomain: 'mock-server',
-    },
-  },
+  useGetStartupCongfigReturnValue = mockStartupConfig,
 } = {}) => {
   const mockUseRegisterUserMutation = jest
     .spyOn(mockDataProvider, 'useRegisterUserMutation')
@@ -62,17 +68,39 @@ const setup = ({
     .spyOn(mockDataProvider, 'useRefreshTokenMutation')
     //@ts-ignore - we don't need all parameters of the QueryObserverSuccessResult
     .mockReturnValue(useRefreshTokenMutationReturnValue);
-  const renderResult = render(<Registration />);
+  const mockUseOutletContext = jest.spyOn(reactRouter, 'useOutletContext').mockReturnValue({
+    startupConfig: useGetStartupCongfigReturnValue.data,
+  });
+  const renderResult = render(
+    <AuthLayout
+      startupConfig={useGetStartupCongfigReturnValue.data as TStartupConfig}
+      isFetching={useGetStartupCongfigReturnValue.isFetching}
+      error={null}
+      startupConfigError={null}
+      header={'Create your account'}
+      pathname="register"
+    >
+      <Registration />
+    </AuthLayout>,
+  );
 
   return {
     ...renderResult,
-    mockUseRegisterUserMutation,
     mockUseGetUserQuery,
+    mockUseOutletContext,
     mockUseGetStartupConfig,
+    mockUseRegisterUserMutation,
     mockUseRefreshTokenMutation,
   };
 };
 
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+  useOutletContext: () => ({
+    startupConfig: mockStartupConfig,
+  }),
+}));
+
 test('renders registration form', () => {
   const { getByText, getByTestId, getByRole } = setup();
   expect(getByText(/Create your account/i)).toBeInTheDocument();