Fix: Selecting SAML enforced organization

This commit is contained in:
Daniel Hougaard
2024-03-17 18:49:29 +01:00
parent 667fa7a9e3
commit 5f5d62a285
@@ -12,6 +12,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { Button, Spinner } from "@app/components/v2"; import { Button, Spinner } from "@app/components/v2";
import { useUser } from "@app/context"; import { useUser } from "@app/context";
import { useGetOrganizations, useLogoutUser, useSelectOrganization } from "@app/hooks/api"; import { useGetOrganizations, useLogoutUser, useSelectOrganization } from "@app/hooks/api";
import { Organization } from "@app/hooks/api/types";
import { isLoggedIn } from "@app/reactQuery"; import { isLoggedIn } from "@app/reactQuery";
import { navigateUserToOrg } from "@app/views/Login/Login.utils"; import { navigateUserToOrg } from "@app/views/Login/Login.utils";
@@ -44,14 +45,20 @@ export default function LoginPage() {
}, [logout, router]); }, [logout, router]);
const handleSelectOrganization = useCallback( const handleSelectOrganization = useCallback(
async (orgId: string) => { async (organization: Organization) => {
console.log("Selected organization: ", orgId); if (organization.authEnforced) {
// org has an org-level auth method enabled (e.g. SAML)
// -> logout + redirect to SAML SSO
const { token } = await selectOrg.mutateAsync({ organizationId: orgId }); await logout.mutateAsync();
window.open(`/api/v1/sso/redirect/saml2/organizations/${organization.slug}`);
window.close();
return;
}
console.log("Organization selected successfully", { token }); await selectOrg.mutateAsync({ organizationId: organization.id });
navigateUserToOrg(router, orgId); navigateUserToOrg(router, organization.id);
}, },
[selectOrg] [selectOrg]
); );
@@ -106,23 +113,20 @@ export default function LoginPage() {
{organizations.isLoading ? ( {organizations.isLoading ? (
<Spinner /> <Spinner />
) : ( ) : (
organizations.data organizations.data?.map((org) => (
?.concat(organizations.data) <div
.concat(organizations.data) onClick={() => handleSelectOrganization(org)}
.map((org) => ( key={org.id}
<div className="group flex cursor-pointer items-center justify-between rounded-md bg-mineshaft-700 px-4 py-3 capitalize text-gray-200 shadow-md transition-colors hover:bg-mineshaft-600"
onClick={() => handleSelectOrganization(org.id)} >
key={org.id} <p className="transition-colors">{org.name}</p>
className="group flex cursor-pointer items-center justify-between rounded-md bg-mineshaft-700 px-4 py-3 capitalize text-gray-200 shadow-md transition-colors hover:bg-mineshaft-600"
>
<p className="transition-colors">{org.name}</p>
<FontAwesomeIcon <FontAwesomeIcon
icon={faArrowRight} icon={faArrowRight}
className="text-gray-400 transition-colors group-hover:text-primary-500" className="text-gray-400 transition-colors group-hover:text-primary-500"
/> />
</div> </div>
)) ))
)} )}
</div> </div>