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

web/frontend/app/features/account/components/SessionInfoCard.tsx

@@ -0,0 +1,42 @@
+import { Link } from 'react-router';
+
+interface SessionInfoCardProps {
+    username: string;
+    userAccountId: string;
+}
+
+const SessionInfoCard = ({ username, userAccountId }: SessionInfoCardProps) => (
+    <div className="card bg-base-100 shadow">
+        <div className="card-body">
+            <h2 className="card-title text-2xl">Welcome, {username}!</h2>
+            <p className="text-base-content/70">
+                You are successfully authenticated. This is a protected page that requires a valid
+                session.
+            </p>
+
+            <div className="bg-base-200 rounded-box p-4 mt-2">
+                <p className="text-xs font-semibold uppercase tracking-widest text-base-content/50 mb-3">
+                    Session Info
+                </p>
+                <div className="stats stats-vertical w-full">
+                    <div className="stat py-2">
+                        <div className="stat-title">Username</div>
+                        <div className="stat-value text-lg font-mono">{username}</div>
+                    </div>
+                    <div className="stat py-2">
+                        <div className="stat-title">User ID</div>
+                        <div className="stat-desc font-mono text-xs mt-1">{userAccountId}</div>
+                    </div>
+                </div>
+            </div>
+
+            <div className="card-actions mt-4">
+                <Link to="/account" className="btn btn-outline btn-sm">
+                    Account Settings
+                </Link>
+            </div>
+        </div>
+    </div>
+);
+
+export default SessionInfoCard;