ResetPassword component
unknown
javascript
a month ago
2.0 kB
3
Indexable
Never
//ResetPassword Component //Your ResetPassword component will use the useParams hook to extract uidb64 and token from the URL: import React, { useState, useEffect } from 'react'; import axios from 'axios'; import { useParams, useHistory } from 'react-router-dom'; const ResetPassword = () => { const { uidb64, token } = useParams(); const [password, setPassword] = useState(''); const [message, setMessage] = useState(''); const [error, setError] = useState(''); const history = useHistory(); useEffect(() => { // Check if the token is valid axios.get(`/api/reset-password/${uidb64}/${token}/`) .then(response => { setMessage(response.data.message); }) .catch(error => { setError('Invalid or expired token.'); }); }, [uidb64, token]); const handleSubmit = (e) => { e.preventDefault(); axios.post(`/api/reset-password/${uidb64}/${token}/`, { password }) .then(response => { setMessage(response.data.message); history.push('/login'); // Redirect to login page after success }) .catch(error => { setError('Failed to reset password.'); }); }; return ( <div> <h1>Reset Your Password</h1> {message && <p>{message}</p>} {error && <p style={{ color: 'red' }}>{error}</p>} <form onSubmit={handleSubmit}> <label> New Password: <input type="password" value={password} onChange={(e) => setPassword(e.target.value)} required /> </label> <button type="submit">Reset Password</button> </form> </div> ); }; export default ResetPassword;
Leave a Comment