♻️ 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/AuthLayout.tsx

@@ -0,0 +1,90 @@
+import { ThemeSelector } from '~/components/ui';
+import { useLocalize } from '~/hooks';
+import { BlinkAnimation } from './BlinkAnimation';
+import { TStartupConfig } from 'librechat-data-provider';
+import SocialLoginRender from './SocialLoginRender';
+import Footer from './Footer';
+
+const ErrorRender = ({ children }: { children: React.ReactNode }) => (
+  <div className="mt-16 flex justify-center">
+    <div
+      className="rounded-md border border-red-500 bg-red-500/10 px-3 py-2 text-sm text-gray-600 dark:text-gray-200"
+      role="alert"
+    >
+      {children}
+    </div>
+  </div>
+);
+
+function AuthLayout({
+  children,
+  header,
+  isFetching,
+  startupConfig,
+  startupConfigError,
+  pathname,
+  error,
+}: {
+  children: React.ReactNode;
+  header: React.ReactNode;
+  isFetching: boolean;
+  startupConfig: TStartupConfig | null | undefined;
+  startupConfigError: unknown | null | undefined;
+  pathname: string;
+  error: string | null;
+}) {
+  const localize = useLocalize();
+
+  const DisplayError = () => {
+    if (startupConfigError !== null && startupConfigError !== undefined) {
+      return <ErrorRender>{localize('com_auth_error_login_server')}</ErrorRender>;
+    } else if (error === 'com_auth_error_invalid_reset_token') {
+      return (
+        <ErrorRender>
+          {localize('com_auth_error_invalid_reset_token')}{' '}
+          <a className="font-semibold text-green-600 hover:underline" href="/forgot-password">
+            {localize('com_auth_click_here')}
+          </a>{' '}
+          {localize('com_auth_to_try_again')}
+        </ErrorRender>
+      );
+    } else if (error) {
+      return <ErrorRender>{localize(error)}</ErrorRender>;
+    }
+    return null;
+  };
+
+  return (
+    <div className="relative flex min-h-screen flex-col bg-white dark:bg-gray-900">
+      <BlinkAnimation active={isFetching}>
+        <div className="mt-12 h-24 w-full bg-cover">
+          <img src="/assets/logo.svg" className="h-full w-full object-contain" alt="Logo" />
+        </div>
+      </BlinkAnimation>
+      <DisplayError />
+      <div className="absolute bottom-0 left-0 md:m-4">
+        <ThemeSelector />
+      </div>
+
+      <div className="flex flex-grow items-center justify-center">
+        <div className="w-authPageWidth overflow-hidden bg-white px-6 py-4 dark:bg-gray-900 sm:max-w-md sm:rounded-lg">
+          {!startupConfigError && !isFetching && (
+            <h1
+              className="mb-4 text-center text-3xl font-semibold text-black dark:text-white"
+              style={{ userSelect: 'none' }}
+            >
+              {header}
+            </h1>
+          )}
+          {children}
+          {(pathname.includes('login') || pathname.includes('register')) && (
+            <SocialLoginRender startupConfig={startupConfig} />
+          )}
+        </div>
+      </div>
+      <Footer startupConfig={startupConfig} />
+    </div>
+  );
+}
+
+export default AuthLayout;