Refactor login page to display error messages conditionally. Added error handling with Alert component for better user feedback.
This commit is contained in:
@ -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>
|
||||||
|
Reference in New Issue
Block a user