improved design of the error message

This commit is contained in:
2025-09-30 13:06:49 +02:00
parent bf36a6605f
commit 04453fd885

View File

@@ -55,57 +55,64 @@ const ChangePWform: React.FC<ChangePWformProps> = ({
</Field.Root> </Field.Root>
</Stack> </Stack>
</Card.Body> </Card.Body>
<Card.Footer justifyContent="flex-end" gap="2"> <Card.Footer gap="2">
<Button variant="outline" onClick={onClose}> <Stack w="full" gap="3">
Abbrechen <Stack direction="row" justify="flex-end" gap="2">
</Button> <Button variant="outline" onClick={onClose}>
<Button Abbrechen
variant="solid" </Button>
onClick={async () => { <Button
const newPassword = variant="solid"
( onClick={async () => {
document.getElementById("new_password") as HTMLInputElement const newPassword =
)?.value.trim() || ""; (
const confirmNewPassword = document.getElementById(
( "new_password"
document.getElementById( ) as HTMLInputElement
"confirm_new_password" )?.value.trim() || "";
) as HTMLInputElement const confirmNewPassword =
)?.value.trim() || ""; (
document.getElementById(
"confirm_new_password"
) as HTMLInputElement
)?.value.trim() || "";
if (!newPassword || newPassword !== confirmNewPassword) { if (!newPassword || newPassword !== confirmNewPassword) {
subAlert("Passwörter stimmen nicht überein!"); subAlert("Passwörter stimmen nicht überein!");
return; return;
} }
const res = await changePW(newPassword, username); const res = await changePW(newPassword, username);
if (res.success) { if (res.success) {
alert( alert(
"success", "success",
"Passwort geändert", "Passwort geändert",
"Das Passwort wurde erfolgreich geändert." "Das Passwort wurde erfolgreich geändert."
); );
onClose(); onClose();
} else { } else {
alert( alert(
"error", "error",
"Fehler", "Fehler",
"Das Passwort konnte nicht geändert werden." "Das Passwort konnte nicht geändert werden."
); );
onClose(); onClose();
} }
}} }}
> >
Ändern Ändern
</Button> </Button>
{showSubAlert && ( </Stack>
<Alert.Root status="error">
<Alert.Indicator /> {showSubAlert && (
<Alert.Content> <Alert.Root status="error">
<Alert.Title>{subAlertMessage}</Alert.Title> <Alert.Indicator />
</Alert.Content> <Alert.Content>
</Alert.Root> <Alert.Title>{subAlertMessage}</Alert.Title>
)} </Alert.Content>
</Alert.Root>
)}
</Stack>
</Card.Footer> </Card.Footer>
</Card.Root> </Card.Root>
</div> </div>