Refactor authentication and account management with modular UI components (#242)

web/frontend/app/features/account/routes/dashboard.tsx

@@ -0,0 +1,31 @@
+import { requireAuth } from '../../auth/auth.server';
+import AuthFlowDemoCard from '../components/AuthFlowDemoCard';
+import SessionInfoCard from '../components/SessionInfoCard';
+import type { Route } from './+types/dashboard';
+
+export const meta = ({}: Route.MetaArgs) => {
+    return [{ title: 'Dashboard | The Biergarten App' }];
+};
+
+export const loader = async ({ request }: Route.LoaderArgs) => {
+    const auth = await requireAuth(request);
+    return {
+        username: auth.username,
+        userAccountId: auth.userAccountId,
+    };
+};
+
+const Dashboard = ({ loaderData }: Route.ComponentProps) => {
+    const { username, userAccountId } = loaderData;
+
+    return (
+        <div className="min-h-screen bg-base-200">
+            <div className="mx-auto max-w-4xl px-6 py-10 space-y-6">
+                <SessionInfoCard username={username} userAccountId={userAccountId} />
+                <AuthFlowDemoCard />
+            </div>
+        </div>
+    );
+};
+
+export default Dashboard;