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

This commit is contained in:
2025-08-08 21:35:03 +00:00
parent 4242851f9c
commit d737f4ad3c

View File

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