66 lines
3.0 KiB
JavaScript
66 lines
3.0 KiB
JavaScript
import React, {useState} from 'react'
|
|
import api from "../api";
|
|
|
|
export default function UserModule() {
|
|
const username = localStorage.getItem("username")
|
|
const [oldPassword, setOldPassword] = useState("")
|
|
const [newPassword1, setNewPassword1] = useState("")
|
|
const [newPassword2, setNewPassword2] = useState("")
|
|
const [loading, setLoading] = useState(false)
|
|
|
|
const handlePasswordChange = async () => {
|
|
setLoading(true);
|
|
try {
|
|
const response = await api.post(`user/password/change/`, {username, oldPassword, newPassword1, newPassword2});
|
|
if (response.status === 200) {
|
|
alert(response.data.message)
|
|
window.location.reload()
|
|
}
|
|
} catch (error) {
|
|
alert(error);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="d-flex flex-column align-items-center justify-content-center p-2">
|
|
<h4>User Module for {username.charAt(0).toUpperCase() + username.slice(1)}</h4>
|
|
<div className="d-flex flex-column align-items-center justify-content-center p-2">
|
|
<h5>Change Your Password</h5>
|
|
<div className="d-flex flex-column align-items-center justify-content-center p-2">
|
|
<form>
|
|
<div className="mb-3 d-flex flex-column">
|
|
<label htmlFor="oldPassword" className="form-label">Enter current password:</label>
|
|
<input id="oldPassword" type="text" onChange={(e) => {
|
|
setOldPassword(e.target.value)
|
|
}}></input>
|
|
</div>
|
|
<div className="mb-3 d-flex flex-column">
|
|
<label htmlFor="newPassword1" className="form-label">Enter new password:</label>
|
|
<input id="newPassword1" type="password" onChange={(e) => {
|
|
setNewPassword1(e.target.value)
|
|
}}></input>
|
|
</div>
|
|
<div className="mb-3 d-flex flex-column">
|
|
<label htmlFor="newPassword2" className="form-label">Confirm new password:</label>
|
|
<input id="newPassword2" type="password" onChange={(e) => {
|
|
setNewPassword2(e.target.value)
|
|
}}></input>
|
|
</div>
|
|
<div className="mb-3 d-flex flex-column">
|
|
<button type="button" className="btn btn-secondary" onClick={handlePasswordChange}>Submit</button>
|
|
</div>
|
|
</form>
|
|
{loading ? (
|
|
<div className="spinner-border" role="status">
|
|
<span className="sr-only">Loading...</span>
|
|
</div>
|
|
) : null
|
|
}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|