116 lines
3.4 KiB
TypeScript
116 lines
3.4 KiB
TypeScript
import React from "react";
|
|
import { Button, Card, Field, Input, Stack, Alert } from "@chakra-ui/react";
|
|
import { changePW } from "@/utils/userActions";
|
|
import { useState } from "react";
|
|
|
|
type ChangePWformProps = {
|
|
onClose: () => void;
|
|
alert: (
|
|
status: "success" | "error",
|
|
message: string,
|
|
description: string
|
|
) => void;
|
|
username: string;
|
|
};
|
|
|
|
const ChangePWform: React.FC<ChangePWformProps> = ({
|
|
onClose,
|
|
alert,
|
|
username,
|
|
}) => {
|
|
const [showSubAlert, setShowSubAlert] = useState(false);
|
|
const [subAlertMessage, setSubAlertMessage] = useState("");
|
|
|
|
const subAlert = (message: string) => {
|
|
setSubAlertMessage(message);
|
|
setShowSubAlert(true);
|
|
};
|
|
|
|
return (
|
|
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm p-4">
|
|
<Card.Root maxW="sm">
|
|
<Card.Header>
|
|
<Card.Title>Passwort ändern</Card.Title>
|
|
<Card.Description>
|
|
Füllen Sie das folgende Formular aus, um das Passwort zu ändern.
|
|
</Card.Description>
|
|
</Card.Header>
|
|
<Card.Body>
|
|
<Stack gap="4" w="full">
|
|
<Field.Root>
|
|
<Field.Label>Neues Passwort</Field.Label>
|
|
<Input
|
|
id="new_password"
|
|
type="password"
|
|
placeholder="Neues Passwort"
|
|
/>
|
|
</Field.Root>
|
|
<Field.Root>
|
|
<Field.Label>Neues Passwort widerholen</Field.Label>
|
|
<Input
|
|
id="confirm_new_password"
|
|
type="password"
|
|
placeholder="Wiederholen Sie das neue Passwort"
|
|
/>
|
|
</Field.Root>
|
|
</Stack>
|
|
</Card.Body>
|
|
<Card.Footer justifyContent="flex-end" gap="2">
|
|
<Button variant="outline" onClick={onClose}>
|
|
Abbrechen
|
|
</Button>
|
|
<Button
|
|
variant="solid"
|
|
onClick={async () => {
|
|
const newPassword =
|
|
(
|
|
document.getElementById("new_password") as HTMLInputElement
|
|
)?.value.trim() || "";
|
|
const confirmNewPassword =
|
|
(
|
|
document.getElementById(
|
|
"confirm_new_password"
|
|
) as HTMLInputElement
|
|
)?.value.trim() || "";
|
|
|
|
if (!newPassword || newPassword !== confirmNewPassword) {
|
|
subAlert("Passwörter stimmen nicht überein!");
|
|
return;
|
|
}
|
|
|
|
const res = await changePW(newPassword, username);
|
|
if (res.success) {
|
|
alert(
|
|
"success",
|
|
"Passwort geändert",
|
|
"Das Passwort wurde erfolgreich geändert."
|
|
);
|
|
onClose();
|
|
} else {
|
|
alert(
|
|
"error",
|
|
"Fehler",
|
|
"Das Passwort konnte nicht geändert werden."
|
|
);
|
|
onClose();
|
|
}
|
|
}}
|
|
>
|
|
Ändern
|
|
</Button>
|
|
{showSubAlert && (
|
|
<Alert.Root status="error">
|
|
<Alert.Indicator />
|
|
<Alert.Content>
|
|
<Alert.Title>{subAlertMessage}</Alert.Title>
|
|
</Alert.Content>
|
|
</Alert.Root>
|
|
)}
|
|
</Card.Footer>
|
|
</Card.Root>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default ChangePWform;
|