root
62 lines
2.4 KiB
TypeScript
62 lines
2.4 KiB
TypeScript
import { Link } from 'react-router-dom'
|
|
import { useAuth } from '../../auth/AuthProvider'
|
|
import { useContinueWithRole } from '../../hooks/useContinueWithRole'
|
|
|
|
/** CI `user/welcome_back.php` — multi-role picker (same behavior as `/app/select-role`). */
|
|
export function WelcomeBackPage() {
|
|
const { user, roles } = useAuth()
|
|
const { continueWithRole, busy, busyRole, error } = useContinueWithRole()
|
|
|
|
return (
|
|
<div className="container-fluid py-4 px-3">
|
|
<div className="row g-4 justify-content-center align-items-stretch">
|
|
<div className="col-12 col-md-5 col-lg-4 d-flex flex-column align-items-center justify-content-center border rounded p-4 bg-light">
|
|
<img
|
|
src="/images/logo.png"
|
|
alt=""
|
|
className="img-fluid mb-3"
|
|
style={{ maxWidth: 200 }}
|
|
onError={(ev) => {
|
|
;(ev.target as HTMLImageElement).style.display = 'none'
|
|
}}
|
|
/>
|
|
<div className="fw-semibold text-center">Al Rahma Sunday School</div>
|
|
</div>
|
|
<div className="col-12 col-md-6 col-lg-5">
|
|
<div className="border rounded p-4 shadow-sm h-100">
|
|
<h2 className="h4 mb-3">Welcome back!</h2>
|
|
<p className="text-muted small mb-4">
|
|
As your account has multiple roles in the portal, select how you want to continue:
|
|
</p>
|
|
<div className="d-flex flex-column gap-2">
|
|
{roles.map((role) => {
|
|
const label = role.replace(/_/g, ' ').replace(/\b\w/g, (c) => c.toUpperCase())
|
|
return (
|
|
<button
|
|
key={role}
|
|
type="button"
|
|
className="btn btn-success"
|
|
disabled={busy}
|
|
onClick={() => void continueWithRole(role)}
|
|
>
|
|
{busy && busyRole === role ? 'Opening…' : label}
|
|
</button>
|
|
)
|
|
})}
|
|
</div>
|
|
{user?.name ? (
|
|
<p className="small text-muted mt-3 mb-0">Signed in as {user.name}</p>
|
|
) : null}
|
|
{error ? <div className="alert alert-danger mt-3 mb-0 py-2 small">{error}</div> : null}
|
|
<div className="mt-4 text-center">
|
|
<Link className="small" to="/app/select-role">
|
|
Alternative layout (same action)
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|