root
82 lines
2.6 KiB
TypeScript
82 lines
2.6 KiB
TypeScript
import { useState } from 'react'
|
|
import { useLocation, useNavigate } from 'react-router-dom'
|
|
import { fetchDashboardRoute } from '../api/session'
|
|
import { useAuth } from '../auth/AuthProvider'
|
|
import { spaPathFromCiUrl } from '../lib/ciSpaPaths'
|
|
|
|
export function RoleSelectPage() {
|
|
const { user, roles, selectedRole, setSelectedRole } = useAuth()
|
|
const navigate = useNavigate()
|
|
const location = useLocation()
|
|
const [pickedRole, setPickedRole] = useState<string | null>(selectedRole)
|
|
const [busy, setBusy] = useState(false)
|
|
const [error, setError] = useState<string | null>(null)
|
|
const from = (location.state as { from?: string } | null)?.from ?? '/app/home'
|
|
|
|
async function continueLogin() {
|
|
if (!pickedRole) {
|
|
setError('Please select a role to continue.')
|
|
return
|
|
}
|
|
setBusy(true)
|
|
setError(null)
|
|
setSelectedRole(pickedRole)
|
|
|
|
let target = from.startsWith('/app') ? from : '/app/home'
|
|
if (pickedRole.toLowerCase() === 'parent' && target === '/app/home') {
|
|
target = '/app/parent/home'
|
|
}
|
|
try {
|
|
const dash = await fetchDashboardRoute()
|
|
const route = dash.data?.dashboard?.route
|
|
const mapped = spaPathFromCiUrl(route)
|
|
if (mapped) target = mapped
|
|
} catch {
|
|
/* keep fallback target */
|
|
}
|
|
|
|
navigate(target, { replace: true })
|
|
}
|
|
|
|
return (
|
|
<div className="container py-4">
|
|
<div className="card border-0 shadow-sm mx-auto" style={{ maxWidth: 640 }}>
|
|
<div className="card-body p-4">
|
|
<h2 className="h4 mb-2">Select role</h2>
|
|
<p className="text-muted mb-3">
|
|
{user?.name ? `Signed in as ${user.name}.` : 'Signed in successfully.'} Choose a role
|
|
to continue.
|
|
</p>
|
|
|
|
<div className="list-group mb-3">
|
|
{roles.map((role) => (
|
|
<button
|
|
key={role}
|
|
type="button"
|
|
className={`list-group-item list-group-item-action text-start ${
|
|
pickedRole === role ? 'active' : ''
|
|
}`}
|
|
onClick={() => setPickedRole(role)}
|
|
>
|
|
{role}
|
|
</button>
|
|
))}
|
|
</div>
|
|
|
|
{error ? (
|
|
<div className="alert alert-danger py-2" role="alert">
|
|
{error}
|
|
</div>
|
|
) : null}
|
|
|
|
<div className="d-grid">
|
|
<button type="button" className="btn btn-success" onClick={continueLogin} disabled={busy}>
|
|
{busy ? 'Continuing…' : 'Continue'}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|