42 lines
1.7 KiB
JavaScript
42 lines
1.7 KiB
JavaScript
import React, { createContext, useState, useContext } from "react";
|
|
import ChangePasswordPage from "../../pages/authentication/ChangePassword";
|
|
|
|
const ChangePasswordContext = createContext();
|
|
|
|
export const ChangePasswordProvider = ({ children }) => {
|
|
const [isChangePasswordOpen, setIsChangePasswordOpen] = useState(false);
|
|
|
|
const openChangePassword = () => setIsChangePasswordOpen(true);
|
|
const closeChangePassword = () => setIsChangePasswordOpen(false);
|
|
|
|
return (
|
|
<ChangePasswordContext.Provider
|
|
value={{ isChangePasswordOpen, openChangePassword, closeChangePassword }}
|
|
>
|
|
{children}
|
|
|
|
{isChangePasswordOpen && (
|
|
<>
|
|
{/* This is the main Bootstrap modal container */}
|
|
{/* It provides the fixed positioning and high z-index */}
|
|
<div
|
|
className="modal fade show" // 'fade' for animation, 'show' to make it visible
|
|
style={{ display: 'block' }} // Explicitly set display: block for immediate visibility
|
|
tabIndex="-1" // Makes the modal focusable
|
|
role="dialog" // ARIA role for accessibility
|
|
aria-labelledby="changePasswordModalLabel" // Link to a heading for accessibility
|
|
aria-modal="true" // Indicate it's a modal dialog
|
|
>
|
|
{/* The ChangePasswordPage component itself contains the modal-dialog and modal-content */}
|
|
<ChangePasswordPage onClose={closeChangePassword} />
|
|
</div>
|
|
|
|
{/* The modal backdrop */}
|
|
<div className="modal-backdrop fade show"></div>
|
|
</>
|
|
)}
|
|
</ChangePasswordContext.Provider>
|
|
);
|
|
};
|
|
|
|
export const useChangePassword = () => useContext(ChangePasswordContext); |