diff --git a/src/app/[orgId]/settings/resources/[resourceId]/authentication/page.tsx b/src/app/[orgId]/settings/resources/[resourceId]/authentication/page.tsx index acb82b8d..4947e91b 100644 --- a/src/app/[orgId]/settings/resources/[resourceId]/authentication/page.tsx +++ b/src/app/[orgId]/settings/resources/[resourceId]/authentication/page.tsx @@ -29,8 +29,10 @@ import { import { TagInput } from "emblor"; import SettingsSectionTitle from "@app/components/SettingsSectionTitle"; import { ListUsersResponse } from "@server/routers/user"; +import { Switch } from "@app/components/ui/switch"; +import { Label } from "@app/components/ui/label"; -const FormSchema = z.object({ +const UsersRolesFormSchema = z.object({ roles: z.array( z.object({ id: z.string(), @@ -48,7 +50,7 @@ const FormSchema = z.object({ export default function ResourceAuthenticationPage() { const { toast } = useToast(); const { org } = useOrgContext(); - const { resource } = useResourceContext(); + const { resource, updateResource } = useResourceContext(); const [allRoles, setAllRoles] = useState<{ id: string; text: string }[]>( [] @@ -56,7 +58,6 @@ export default function ResourceAuthenticationPage() { const [allUsers, setAllUsers] = useState<{ id: string; text: string }[]>( [] ); - const [activeRolesTagIndex, setActiveRolesTagIndex] = useState< number | null >(null); @@ -64,10 +65,14 @@ export default function ResourceAuthenticationPage() { number | null >(null); - const [loading, setLoading] = useState(false); + const [ssoEnabled, setSsoEnabled] = useState(resource.sso); + const [blockAccess, setBlockAccess] = useState(resource.blockAccess); - const form = useForm>({ - resolver: zodResolver(FormSchema), + const [loadingSaveUsersRoles, setLoadingSaveUsersRoles] = useState(false); + const [loadingSaveAuth, setLoadingSaveAuth] = useState(false); + + const usersRolesForm = useForm>({ + resolver: zodResolver(UsersRolesFormSchema), defaultValues: { roles: [], users: [] }, }); @@ -101,7 +106,7 @@ export default function ResourceAuthenticationPage() { `/resource/${resource.resourceId}/roles` ) .then((res) => { - form.setValue( + usersRolesForm.setValue( "roles", res.data.data.roles .map((i) => ({ @@ -150,7 +155,7 @@ export default function ResourceAuthenticationPage() { `/resource/${resource.resourceId}/users` ) .then((res) => { - form.setValue( + usersRolesForm.setValue( "users", res.data.data.users.map((i) => ({ id: i.userId.toString(), @@ -171,9 +176,11 @@ export default function ResourceAuthenticationPage() { }); }, []); - async function onSubmit(data: z.infer) { + async function onSubmitUsersRoles( + data: z.infer + ) { try { - setLoading(true); + setLoadingSaveUsersRoles(true); await api.post(`/resource/${resource.resourceId}/roles`, { roleIds: data.roles.map((i) => parseInt(i.id)), }); @@ -197,7 +204,40 @@ export default function ResourceAuthenticationPage() { ), }); } finally { - setLoading(false); + setLoadingSaveUsersRoles(false); + } + } + + async function onSubmitAuth() { + try { + setLoadingSaveAuth(true); + + await api.post(`/resource/${resource.resourceId}`, { + sso: ssoEnabled, + blockAccess, + }); + + updateResource({ + blockAccess, + sso: ssoEnabled, + }); + + toast({ + title: "Saved successfully", + description: "Authentication settings have been saved", + }); + } catch (e) { + console.error(e); + toast({ + variant: "destructive", + title: "Failed to save authentication", + description: formatAxiosError( + e, + "An error occurred while saving the authentication" + ), + }); + } finally { + setLoadingSaveAuth(false); } } @@ -206,17 +246,19 @@ export default function ResourceAuthenticationPage() {
-
+ ( @@ -229,9 +271,11 @@ export default function ResourceAuthenticationPage() { setActiveRolesTagIndex } placeholder="Enter a role" - tags={form.getValues().roles} + tags={ + usersRolesForm.getValues().roles + } setTags={(newRoles) => { - form.setValue( + usersRolesForm.setValue( "roles", newRoles as [Tag, ...Tag[]] ); @@ -248,7 +292,8 @@ export default function ResourceAuthenticationPage() { body: "bg-muted hover:bg-accent text-foreground p-2", }, input: "border-none bg-transparent text-inherit placeholder:text-inherit shadow-none", - inlineTagsContainer: "bg-transparent", + inlineTagsContainer: + "bg-transparent", }} /> @@ -262,7 +307,7 @@ export default function ResourceAuthenticationPage() { )} /> ( @@ -275,9 +320,11 @@ export default function ResourceAuthenticationPage() { setActiveUsersTagIndex } placeholder="Enter a user" - tags={form.getValues().users} + tags={ + usersRolesForm.getValues().users + } setTags={(newUsers) => { - form.setValue( + usersRolesForm.setValue( "users", newUsers as [Tag, ...Tag[]] ); @@ -294,7 +341,8 @@ export default function ResourceAuthenticationPage() { body: "bg-muted hover:bg-accent text-foreground p-2", }, input: "border-none bg-transparent text-inherit placeholder:text-inherit shadow-none", - inlineTagsContainer: "bg-transparent", + inlineTagsContainer: + "bg-transparent", }} /> @@ -310,13 +358,61 @@ export default function ResourceAuthenticationPage() { /> + + + +
+
+ setBlockAccess(val)} + /> + +
+ + When enabled, all auth methods will be disabled and + users will not able to access the resource. This is an + override. + +
+ +
+
+ setSsoEnabled(val)} + /> + +
+ + Users will be able to access the resource if they're + logged into the dashboard and have access to the + resource. Users will only have to login once for all + resources that have SSO enabled. + +
+ +
);