roles based access error fix
This commit is contained in:
parent
eaf0ee3d63
commit
f789794da5
@ -108,6 +108,6 @@ export const routeConfig = [
|
|||||||
{
|
{
|
||||||
path: "/admin/users",
|
path: "/admin/users",
|
||||||
element: <UsersPage />,
|
element: <UsersPage />,
|
||||||
adminOnly: true,
|
roles: ["Manager", "Admin"],
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
|||||||
@ -122,6 +122,15 @@ export function ConsoleLayout() {
|
|||||||
<div className="px-4 py-3 border-b border-gray-100 mb-1">
|
<div className="px-4 py-3 border-b border-gray-100 mb-1">
|
||||||
<p className="text-sm font-bold text-gray-900 truncate">{user?.name || 'User'}</p>
|
<p className="text-sm font-bold text-gray-900 truncate">{user?.name || 'User'}</p>
|
||||||
<p className="text-xs text-gray-500 truncate mt-0.5">{user?.email || 'user@example.com'}</p>
|
<p className="text-xs text-gray-500 truncate mt-0.5">{user?.email || 'user@example.com'}</p>
|
||||||
|
{userRoles && userRoles.length > 0 && (
|
||||||
|
<div className="mt-2 flex flex-wrap gap-1">
|
||||||
|
{userRoles.map(role => (
|
||||||
|
<span key={role} className="inline-flex items-center px-2 py-0.5 rounded text-[10px] font-medium bg-blue-100 text-blue-800">
|
||||||
|
{role}
|
||||||
|
</span>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
{isAdmin && (
|
{isAdmin && (
|
||||||
<div className="px-2 pb-1 border-b border-gray-100 mb-1">
|
<div className="px-2 pb-1 border-b border-gray-100 mb-1">
|
||||||
|
|||||||
@ -4,10 +4,11 @@ import { useAuth } from '../auth/context';
|
|||||||
|
|
||||||
import { Button } from '../components/buttons';
|
import { Button } from '../components/buttons';
|
||||||
import { Card, Input } from '../components/reusable';
|
import { Card, Input } from '../components/reusable';
|
||||||
|
import { getDefaultRoute } from '../auth/ProtectedRoute';
|
||||||
|
|
||||||
/** Login gate. Redirects to /orders once authenticated. */
|
/** Login gate. Redirects to default route once authenticated. */
|
||||||
export function LoginPage() {
|
export function LoginPage() {
|
||||||
const { authed, login } = useAuth();
|
const { authed, login, roles, isAdmin } = useAuth();
|
||||||
const navigate = useNavigate();
|
const navigate = useNavigate();
|
||||||
const [email, setEmail] = useState('');
|
const [email, setEmail] = useState('');
|
||||||
const [password, setPassword] = useState('');
|
const [password, setPassword] = useState('');
|
||||||
@ -15,7 +16,7 @@ export function LoginPage() {
|
|||||||
const [busy, setBusy] = useState(false);
|
const [busy, setBusy] = useState(false);
|
||||||
const [error, setError] = useState<string | null>(null);
|
const [error, setError] = useState<string | null>(null);
|
||||||
|
|
||||||
if (authed) return <Navigate to="/orders" replace />;
|
if (authed) return <Navigate to={getDefaultRoute(roles, isAdmin)} replace />;
|
||||||
|
|
||||||
async function submit(e: FormEvent) {
|
async function submit(e: FormEvent) {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
@ -23,7 +24,10 @@ export function LoginPage() {
|
|||||||
setError(null);
|
setError(null);
|
||||||
try {
|
try {
|
||||||
await login(email, password);
|
await login(email, password);
|
||||||
navigate('/orders', { replace: true });
|
|
||||||
|
// Wait for a tick so useAuth state updates (if necessary) or we can just navigate to root
|
||||||
|
// which will redirect. But since we need the updated roles, navigating to root is safest.
|
||||||
|
navigate('/', { replace: true });
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
setError((err as { message?: string })?.message ?? 'Login failed');
|
setError((err as { message?: string })?.message ?? 'Login failed');
|
||||||
} finally {
|
} finally {
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user