import React, { useState } from "react"; import { useHistory, useParams } from "react-router-dom"; import axios from "axios"; function ChangePassword() { const [passwordData, setPasswordData] = useState({}); const [error, setError] = useState(""); const { push } = useHistory(); const { string } = useParams(); const id = string.split("-")[0]; const hash = string.split("-")[1]; const handleChange = (e) => { e.preventDefault(); setError(""); setPasswordData({ ...passwordData, [e.target.name]: e.target.value }); }; const handleSubmit = async (e) => { e.preventDefault(); if (passwordData.password === passwordData.confirmPassword) { try { const body = { hash, id, password: passwordData.password, }; await axios.post( `${process.env.REACT_APP_BASE_URL}/auth/initialChangePassword`, body ); push("/login"); } catch (err) { setError( "Password does not meet requirements. Please ensure you have a capital letter and a special character." ); console.dir(err); } } else setError("Passwords do not match."); }; return ( <form style={{ textAlign: "center", display: "flex", flexDirection: "column", alignItems: "center", marginTop: "50px", }} onSubmit={handleSubmit} > <input type="password" name="password" placeholder=" Enter your new password" onChange={handleChange} ></input> <input type="password" name="confirmPassword" placeholder=" Confirm New Password" onChange={handleChange} ></input> <button>Change Password</button> {error && <p style={{ color: "red" }}>{error}</p>} </form> ); } export default ChangePassword;