Refactor login page to display error messages conditionally. Added error handling with Alert component for better user feedback.

src/pages/login.astro

@@ -12,8 +12,11 @@ import Container from "../components/ui/Container.astro";
 import Row from "../components/ui/Row.astro";
 import EmptyLayout from "../layouts/EmptyLayout.astro";
 import { isInputError } from "astro:actions";
+import { isActionError } from "astro:actions";
+import Alert from "../components/ui/Alert.astro";
 
 const result = Astro.getActionResult(actions.login);
+console.log(result?.error);
 ---
 
 <EmptyLayout>
@@ -25,12 +28,25 @@ const result = Astro.getActionResult(actions.login);
             <Ascii />
           </CardHeader>
           <CardBody>
+            <Row>
+              <Col>
+                {
+                  result?.error && isActionError(result.error) && (
+                    <Alert variant="error">{result.error.message}</Alert>
+                  )
+                }
+              </Col>
+            </Row>
+            <Row>
+              <Col>
                 <LoginForm
                   action={actions.login}
                   error={result?.error && isInputError(result.error)
                     ? result.error
                     : null}
                 />
+              </Col>
+            </Row>
           </CardBody>
         </Card>
       </Col>