Refactor authentication components for modularity

Replaced `LoginForm` with a more extensible `AuthForm` and `AuthScreen`, enabling support for multiple auth strategies (e.g., OAuth) and improved reusability. Updated imports, routes, and configurations accordingly.

app/src/ui/routes/auth/auth.login.tsx

@@ -1,80 +1,7 @@
-import type { AppAuthOAuthStrategy } from "auth/auth-schema";
-import { ucFirstAllSnakeToPascalWithSpaces } from "core/utils";
-import { transform } from "lodash-es";
-import { useAuthStrategies } from "ui/client/schema/auth/use-auth";
-import { Button } from "ui/components/buttons/Button";
-import { Logo } from "ui/components/display/Logo";
-import { Link } from "ui/components/wouter/Link";
 import { useBrowserTitle } from "ui/hooks/use-browser-title";
-import { LoginForm } from "ui/modules/auth/LoginForm";
-import * as AppShell from "../../layouts/AppShell/AppShell";
+import { AuthScreen } from "ui/modules/auth/AuthScreen";
 
 export function AuthLogin() {
    useBrowserTitle(["Login"]);
-   const { strategies, basepath, loading } = useAuthStrategies();
-
-   const oauth = transform(
-      strategies ?? {},
-      (result, value, key) => {
-         if (value.type !== "password") {
-            result[key] = value.config;
-         }
-      },
-      {}
-   ) as Record<string, AppAuthOAuthStrategy>;
-
-   return (
-      <AppShell.Root>
-         <AppShell.Content center>
-            {!loading && (
-               <div className="flex flex-col gap-4 items-center w-96 px-6 py-7">
-                  <Link href={"/"} className="link">
-                     <Logo scale={0.25} />
-                  </Link>
-                  <div className="flex flex-col items-center">
-                     <h1 className="text-xl font-bold">Sign in to your admin panel</h1>
-                     <p className="text-primary/50">Enter your credentials below to get access.</p>
-                  </div>
-                  <div className="flex flex-col gap-4 w-full">
-                     {Object.keys(oauth).length > 0 && (
-                        <>
-                           {Object.entries(oauth)?.map(([name, oauth], key) => (
-                              <form
-                                 method="POST"
-                                 action={`${basepath}/${name}/login`}
-                                 key={key}
-                                 className="w-full"
-                              >
-                                 <Button
-                                    key={key}
-                                    type="submit"
-                                    size="large"
-                                    variant="outline"
-                                    className="justify-center w-full"
-                                 >
-                                    Continue with {ucFirstAllSnakeToPascalWithSpaces(oauth.name)}
-                                 </Button>
-                              </form>
-                           ))}
-
-                           <div className="w-full flex flex-row items-center">
-                              <div className="relative flex grow">
-                                 <div className="h-px bg-primary/10 w-full absolute top-[50%] z-0" />
-                              </div>
-                              <div className="mx-5">or</div>
-                              <div className="relative flex grow">
-                                 <div className="h-px bg-primary/10 w-full absolute top-[50%] z-0" />
-                              </div>
-                           </div>
-                        </>
-                     )}
-
-                     <LoginForm action="/api/auth/password/login" />
-                     {/*<a href="/auth/logout">Logout</a>*/}
-                  </div>
-               </div>
-            )}
-         </AppShell.Content>
-      </AppShell.Root>
-   );
+   return <AuthScreen action="login" />;
 }