root
67 lines
2.1 KiB
TypeScript
67 lines
2.1 KiB
TypeScript
import { useEffect, useRef } from 'react'
|
|
import { Link, useNavigate } from 'react-router-dom'
|
|
|
|
/** CI `user/password_set_success.php` — success modal then redirect to login. */
|
|
export function PasswordSetSuccessPage() {
|
|
const navigate = useNavigate()
|
|
const modalRef = useRef<HTMLDivElement | null>(null)
|
|
|
|
useEffect(() => {
|
|
const el = modalRef.current
|
|
const B = (
|
|
window as unknown as {
|
|
bootstrap?: { Modal: { getOrCreateInstance: (n: HTMLElement) => { show: () => void } } }
|
|
}
|
|
).bootstrap
|
|
if (el && B?.Modal) {
|
|
B.Modal.getOrCreateInstance(el).show()
|
|
}
|
|
const t = window.setTimeout(() => {
|
|
navigate('/login', { replace: true })
|
|
}, 5000)
|
|
return () => window.clearTimeout(t)
|
|
}, [navigate])
|
|
|
|
return (
|
|
<div className="registration-form container mt-5 mb-5 text-center">
|
|
<div
|
|
className="modal fade"
|
|
id="successModal"
|
|
tabIndex={-1}
|
|
ref={modalRef}
|
|
aria-labelledby="successModalLabel"
|
|
aria-hidden="true"
|
|
>
|
|
<div className="text-center mb-4">
|
|
<Link to="/">
|
|
<img
|
|
src="/alrahma_logo.png"
|
|
alt=""
|
|
style={{ width: 180, height: 120, objectFit: 'contain' }}
|
|
onError={(ev) => {
|
|
;(ev.target as HTMLImageElement).style.display = 'none'
|
|
}}
|
|
/>
|
|
</Link>
|
|
<div className="modal-dialog modal-dialog-centered">
|
|
<div className="modal-content border-success shadow">
|
|
<div className="modal-header bg-success text-white">
|
|
<h5 className="modal-title w-100 text-center" id="successModalLabel">
|
|
Success
|
|
</h5>
|
|
</div>
|
|
<div className="modal-body">
|
|
<h4 className="mb-3">Password Set Successfully!</h4>
|
|
<p className="mb-0">You will be redirected to the login page shortly.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<p className="text-muted small">
|
|
<Link to="/login">Go to login now</Link>
|
|
</p>
|
|
</div>
|
|
)
|
|
}
|