150 lines
4.3 KiB
JavaScript
150 lines
4.3 KiB
JavaScript
import React, { useState } from "react";
|
|
import { useParams, useNavigate } from "react-router-dom";
|
|
import axios from "axios";
|
|
import {
|
|
Form,
|
|
Button,
|
|
Card,
|
|
Alert,
|
|
Spinner,
|
|
Row,
|
|
Col,
|
|
} from "react-bootstrap";
|
|
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
|
import { faKey } from "@fortawesome/free-solid-svg-icons";
|
|
|
|
const CreateNewPassoword = () => {
|
|
const { uidb64, token } = useParams();
|
|
const navigate = useNavigate();
|
|
|
|
const [newPassword, setNewPassword] = useState("");
|
|
const [reNewPassword, setReNewPassword] = useState("");
|
|
const [status, setStatus] = useState("idle"); // idle | loading | success | error
|
|
const [error, setError] = useState("");
|
|
|
|
const handleSubmit = async (e) => {
|
|
e.preventDefault();
|
|
setStatus("loading");
|
|
setError("");
|
|
|
|
if (newPassword !== reNewPassword) {
|
|
setStatus("error");
|
|
setError("Hesla se neshodují.");
|
|
return;
|
|
}
|
|
|
|
try {
|
|
const response = await axios.post(
|
|
`/api/account/reset-password/${uidb64}/${token}/`,
|
|
{
|
|
new_password: newPassword,
|
|
re_new_password: reNewPassword,
|
|
}
|
|
);
|
|
|
|
if (response.status === 200) {
|
|
setStatus("success");
|
|
setTimeout(() => {
|
|
navigate("/"); // přesměrování na login page
|
|
}, 3000);
|
|
}
|
|
} catch (err) {
|
|
setStatus("error");
|
|
setError(
|
|
err.response?.data?.detail ||
|
|
"Nepodařilo se resetovat heslo. Token může být neplatný nebo expirovaný."
|
|
);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<Card className="align-self-center mt-5" style={{ maxWidth: "420px" }}>
|
|
<Card.Header>
|
|
<h3>Reset hesla</h3>
|
|
</Card.Header>
|
|
|
|
<Card.Body>
|
|
{status === "success" ? (
|
|
<Alert variant="success">
|
|
Heslo bylo úspěšně změněno. Přesměrování na přihlášení...
|
|
</Alert>
|
|
) : (
|
|
<Form onSubmit={handleSubmit}>
|
|
{/* Nové heslo */}
|
|
<Form.Group className="input-group form-group" controlId="newPassword">
|
|
<Form.Group className="input-group-prepend">
|
|
<span className="input-group-text">
|
|
<FontAwesomeIcon icon={faKey} />
|
|
</span>
|
|
</Form.Group>
|
|
<Form.Label hidden>Nové heslo</Form.Label>
|
|
<Form.Control
|
|
type="password"
|
|
required
|
|
autoComplete="new-password"
|
|
placeholder="Nové heslo"
|
|
name="newPassword"
|
|
onChange={(e) => setNewPassword(e.target.value)}
|
|
value={newPassword}
|
|
/>
|
|
</Form.Group>
|
|
|
|
{/* Potvrzení hesla */}
|
|
<Form.Group className="input-group form-group mt-3" controlId="reNewPassword">
|
|
<Form.Group className="input-group-prepend">
|
|
<span className="input-group-text">
|
|
<FontAwesomeIcon icon={faKey} />
|
|
</span>
|
|
</Form.Group>
|
|
<Form.Label hidden>Potvrdit heslo</Form.Label>
|
|
<Form.Control
|
|
type="password"
|
|
required
|
|
autoComplete="new-password"
|
|
placeholder="Potvrdit heslo"
|
|
name="reNewPassword"
|
|
onChange={(e) => setReNewPassword(e.target.value)}
|
|
value={reNewPassword}
|
|
/>
|
|
</Form.Group>
|
|
|
|
{/* Submit */}
|
|
<Form.Group className="form-group">
|
|
<Button
|
|
type="submit"
|
|
className="float-right login_btn mt-3"
|
|
disabled={status === "loading"}
|
|
>
|
|
{status === "loading" ? (
|
|
<>
|
|
<Spinner animation="border" size="sm" /> Odesílání...
|
|
</>
|
|
) : (
|
|
"Resetovat heslo"
|
|
)}
|
|
</Button>
|
|
</Form.Group>
|
|
|
|
{/* Chyba */}
|
|
{status === "error" && (
|
|
<Alert variant="danger" className="mt-3">
|
|
{error}
|
|
</Alert>
|
|
)}
|
|
</Form>
|
|
)}
|
|
</Card.Body>
|
|
|
|
<Card.Footer>
|
|
<Row>
|
|
<Col className="text-center">
|
|
<a href="/">Zpět na přihlášení</a>
|
|
</Col>
|
|
</Row>
|
|
</Card.Footer>
|
|
</Card>
|
|
);
|
|
};
|
|
|
|
export default CreateNewPassoword;
|