mirror of
https://github.com/fosrl/pangolin.git
synced 2026-04-29 01:08:13 +00:00
disable eslint - new colors, and slimmer buttons/inputs??
This commit is contained in:
Milo Schwartz
@@ -32,22 +32,22 @@ 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";
|
||||
import { Input } from "@app/components/ui/input";
|
||||
import { ShieldCheck } from "lucide-react";
|
||||
import SetResourcePasswordForm from "./components/SetResourcePasswordForm";
|
||||
import { Separator } from "@app/components/ui/separator";
|
||||
|
||||
const UsersRolesFormSchema = z.object({
|
||||
roles: z.array(
|
||||
z.object({
|
||||
id: z.string(),
|
||||
text: z.string(),
|
||||
})
|
||||
}),
|
||||
),
|
||||
users: z.array(
|
||||
z.object({
|
||||
id: z.string(),
|
||||
text: z.string(),
|
||||
})
|
||||
}),
|
||||
),
|
||||
});
|
||||
|
||||
@@ -60,10 +60,10 @@ export default function ResourceAuthenticationPage() {
|
||||
const [pageLoading, setPageLoading] = useState(true);
|
||||
|
||||
const [allRoles, setAllRoles] = useState<{ id: string; text: string }[]>(
|
||||
[]
|
||||
[],
|
||||
);
|
||||
const [allUsers, setAllUsers] = useState<{ id: string; text: string }[]>(
|
||||
[]
|
||||
[],
|
||||
);
|
||||
const [activeRolesTagIndex, setActiveRolesTagIndex] = useState<
|
||||
number | null
|
||||
@@ -73,7 +73,7 @@ export default function ResourceAuthenticationPage() {
|
||||
>(null);
|
||||
|
||||
const [ssoEnabled, setSsoEnabled] = useState(resource.sso);
|
||||
const [blockAccess, setBlockAccess] = useState(resource.blockAccess);
|
||||
// const [blockAccess, setBlockAccess] = useState(resource.blockAccess);
|
||||
|
||||
const [loadingSaveUsersRoles, setLoadingSaveUsersRoles] = useState(false);
|
||||
const [loadingRemoveResourcePassword, setLoadingRemoveResourcePassword] =
|
||||
@@ -96,16 +96,16 @@ export default function ResourceAuthenticationPage() {
|
||||
resourceUsersResponse,
|
||||
] = await Promise.all([
|
||||
api.get<AxiosResponse<ListRolesResponse>>(
|
||||
`/org/${org?.org.orgId}/roles`
|
||||
`/org/${org?.org.orgId}/roles`,
|
||||
),
|
||||
api.get<AxiosResponse<ListResourceRolesResponse>>(
|
||||
`/resource/${resource.resourceId}/roles`
|
||||
`/resource/${resource.resourceId}/roles`,
|
||||
),
|
||||
api.get<AxiosResponse<ListUsersResponse>>(
|
||||
`/org/${org?.org.orgId}/users`
|
||||
`/org/${org?.org.orgId}/users`,
|
||||
),
|
||||
api.get<AxiosResponse<ListResourceUsersResponse>>(
|
||||
`/resource/${resource.resourceId}/users`
|
||||
`/resource/${resource.resourceId}/users`,
|
||||
),
|
||||
]);
|
||||
|
||||
@@ -115,7 +115,7 @@ export default function ResourceAuthenticationPage() {
|
||||
id: role.roleId.toString(),
|
||||
text: role.name,
|
||||
}))
|
||||
.filter((role) => role.text !== "Admin")
|
||||
.filter((role) => role.text !== "Admin"),
|
||||
);
|
||||
|
||||
usersRolesForm.setValue(
|
||||
@@ -125,14 +125,14 @@ export default function ResourceAuthenticationPage() {
|
||||
id: i.roleId.toString(),
|
||||
text: i.name,
|
||||
}))
|
||||
.filter((role) => role.text !== "Admin")
|
||||
.filter((role) => role.text !== "Admin"),
|
||||
);
|
||||
|
||||
setAllUsers(
|
||||
usersResponse.data.data.users.map((user) => ({
|
||||
id: user.id.toString(),
|
||||
text: user.email,
|
||||
}))
|
||||
})),
|
||||
);
|
||||
|
||||
usersRolesForm.setValue(
|
||||
@@ -140,7 +140,7 @@ export default function ResourceAuthenticationPage() {
|
||||
resourceUsersResponse.data.data.users.map((i) => ({
|
||||
id: i.userId.toString(),
|
||||
text: i.email,
|
||||
}))
|
||||
})),
|
||||
);
|
||||
|
||||
setPageLoading(false);
|
||||
@@ -151,7 +151,7 @@ export default function ResourceAuthenticationPage() {
|
||||
title: "Failed to fetch data",
|
||||
description: formatAxiosError(
|
||||
e,
|
||||
"An error occurred while fetching the data"
|
||||
"An error occurred while fetching the data",
|
||||
),
|
||||
});
|
||||
}
|
||||
@@ -161,7 +161,7 @@ export default function ResourceAuthenticationPage() {
|
||||
}, []);
|
||||
|
||||
async function onSubmitUsersRoles(
|
||||
data: z.infer<typeof UsersRolesFormSchema>
|
||||
data: z.infer<typeof UsersRolesFormSchema>,
|
||||
) {
|
||||
try {
|
||||
setLoadingSaveUsersRoles(true);
|
||||
@@ -175,7 +175,6 @@ export default function ResourceAuthenticationPage() {
|
||||
}),
|
||||
api.post(`/resource/${resource.resourceId}`, {
|
||||
sso: ssoEnabled,
|
||||
blockAccess,
|
||||
}),
|
||||
];
|
||||
|
||||
@@ -200,7 +199,7 @@ export default function ResourceAuthenticationPage() {
|
||||
title: "Failed to set roles",
|
||||
description: formatAxiosError(
|
||||
e,
|
||||
"An error occurred while setting the roles"
|
||||
"An error occurred while setting the roles",
|
||||
),
|
||||
});
|
||||
} finally {
|
||||
@@ -231,7 +230,7 @@ export default function ResourceAuthenticationPage() {
|
||||
title: "Error removing resource password",
|
||||
description: formatAxiosError(
|
||||
e,
|
||||
"An error occurred while removing the resource password"
|
||||
"An error occurred while removing the resource password",
|
||||
),
|
||||
});
|
||||
})
|
||||
@@ -258,168 +257,170 @@ export default function ResourceAuthenticationPage() {
|
||||
/>
|
||||
)}
|
||||
|
||||
<div className="space-y-6 lg:max-w-2xl">
|
||||
{/* <div>
|
||||
<div className="flex items-center space-x-2 mb-2">
|
||||
<Switch
|
||||
id="block-toggle"
|
||||
defaultChecked={resource.blockAccess}
|
||||
onCheckedChange={(val) => setBlockAccess(val)}
|
||||
/>
|
||||
<Label htmlFor="block-toggle">Block Access</Label>
|
||||
<div className="space-y-12 lg:max-w-2xl">
|
||||
<section className="space-y-6">
|
||||
<SettingsSectionTitle
|
||||
title="Users & Roles"
|
||||
description="Configure who can visit this resource (only applicable if SSO is used)"
|
||||
size="1xl"
|
||||
/>
|
||||
|
||||
<div>
|
||||
<div className="flex items-center space-x-2 mb-2">
|
||||
<Switch
|
||||
id="sso-toggle"
|
||||
defaultChecked={resource.sso}
|
||||
onCheckedChange={(val) => setSsoEnabled(val)}
|
||||
/>
|
||||
<Label htmlFor="sso-toggle">Allow SSO</Label>
|
||||
</div>
|
||||
<span className="text-muted-foreground text-sm">
|
||||
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.
|
||||
</span>
|
||||
</div>
|
||||
<span className="text-muted-foreground text-sm">
|
||||
When enabled, this will prevent anyone from accessing
|
||||
the resource including SSO users.
|
||||
</span>
|
||||
</div> */}
|
||||
|
||||
<SettingsSectionTitle
|
||||
title="Users & Roles"
|
||||
description="Configure who can visit this resource (only applicable if SSO is used)"
|
||||
size="1xl"
|
||||
/>
|
||||
|
||||
<div>
|
||||
<div className="flex items-center space-x-2 mb-2">
|
||||
<Switch
|
||||
id="sso-toggle"
|
||||
defaultChecked={resource.sso}
|
||||
onCheckedChange={(val) => setSsoEnabled(val)}
|
||||
/>
|
||||
<Label htmlFor="sso-toggle">Allow SSO</Label>
|
||||
</div>
|
||||
<span className="text-muted-foreground text-sm">
|
||||
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.
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<Form {...usersRolesForm}>
|
||||
<form
|
||||
onSubmit={usersRolesForm.handleSubmit(
|
||||
onSubmitUsersRoles
|
||||
)}
|
||||
className="space-y-6"
|
||||
>
|
||||
<FormField
|
||||
control={usersRolesForm.control}
|
||||
name="roles"
|
||||
render={({ field }) => (
|
||||
<FormItem className="flex flex-col items-start">
|
||||
<FormLabel>Roles</FormLabel>
|
||||
<FormControl>
|
||||
<TagInput
|
||||
{...field}
|
||||
activeTagIndex={activeRolesTagIndex}
|
||||
setActiveTagIndex={
|
||||
setActiveRolesTagIndex
|
||||
}
|
||||
placeholder="Enter a role"
|
||||
tags={
|
||||
usersRolesForm.getValues().roles
|
||||
}
|
||||
setTags={(newRoles) => {
|
||||
usersRolesForm.setValue(
|
||||
"roles",
|
||||
newRoles as [Tag, ...Tag[]]
|
||||
);
|
||||
}}
|
||||
enableAutocomplete={true}
|
||||
autocompleteOptions={allRoles}
|
||||
allowDuplicates={false}
|
||||
restrictTagsToAutocompleteOptions={
|
||||
true
|
||||
}
|
||||
sortTags={true}
|
||||
styleClasses={{
|
||||
tag: {
|
||||
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",
|
||||
}}
|
||||
/>
|
||||
</FormControl>
|
||||
<FormDescription>
|
||||
Users with these roles will be able to
|
||||
access this resource. Admins can always
|
||||
access this resource.
|
||||
</FormDescription>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
<Form {...usersRolesForm}>
|
||||
<form
|
||||
onSubmit={usersRolesForm.handleSubmit(
|
||||
onSubmitUsersRoles,
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
control={usersRolesForm.control}
|
||||
name="users"
|
||||
render={({ field }) => (
|
||||
<FormItem className="flex flex-col items-start">
|
||||
<FormLabel>Users</FormLabel>
|
||||
<FormControl>
|
||||
<TagInput
|
||||
{...field}
|
||||
activeTagIndex={activeUsersTagIndex}
|
||||
setActiveTagIndex={
|
||||
setActiveUsersTagIndex
|
||||
}
|
||||
placeholder="Enter a user"
|
||||
tags={
|
||||
usersRolesForm.getValues().users
|
||||
}
|
||||
setTags={(newUsers) => {
|
||||
usersRolesForm.setValue(
|
||||
"users",
|
||||
newUsers as [Tag, ...Tag[]]
|
||||
);
|
||||
}}
|
||||
enableAutocomplete={true}
|
||||
autocompleteOptions={allUsers}
|
||||
allowDuplicates={false}
|
||||
restrictTagsToAutocompleteOptions={
|
||||
true
|
||||
}
|
||||
sortTags={true}
|
||||
styleClasses={{
|
||||
tag: {
|
||||
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",
|
||||
}}
|
||||
/>
|
||||
</FormControl>
|
||||
<FormDescription>
|
||||
Users added here will be able to access
|
||||
this resource. A user will always have
|
||||
access to a resource if they have a role
|
||||
that has access to it.
|
||||
</FormDescription>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<Button
|
||||
type="submit"
|
||||
loading={loadingSaveUsersRoles}
|
||||
disabled={loadingSaveUsersRoles}
|
||||
className="space-y-6"
|
||||
>
|
||||
Save Users & Roles
|
||||
</Button>
|
||||
</form>
|
||||
</Form>
|
||||
<FormField
|
||||
control={usersRolesForm.control}
|
||||
name="roles"
|
||||
render={({ field }) => (
|
||||
<FormItem className="flex flex-col items-start">
|
||||
<FormLabel>Roles</FormLabel>
|
||||
<FormControl>
|
||||
<TagInput
|
||||
{...field}
|
||||
activeTagIndex={
|
||||
activeRolesTagIndex
|
||||
}
|
||||
setActiveTagIndex={
|
||||
setActiveRolesTagIndex
|
||||
}
|
||||
placeholder="Enter a role"
|
||||
tags={
|
||||
usersRolesForm.getValues()
|
||||
.roles
|
||||
}
|
||||
setTags={(newRoles) => {
|
||||
usersRolesForm.setValue(
|
||||
"roles",
|
||||
newRoles as [
|
||||
Tag,
|
||||
...Tag[],
|
||||
],
|
||||
);
|
||||
}}
|
||||
enableAutocomplete={true}
|
||||
autocompleteOptions={allRoles}
|
||||
allowDuplicates={false}
|
||||
restrictTagsToAutocompleteOptions={
|
||||
true
|
||||
}
|
||||
sortTags={true}
|
||||
styleClasses={{
|
||||
tag: {
|
||||
body: "bg-muted hover:bg-accent text-foreground py-2 px-3 rounded-full",
|
||||
},
|
||||
input: "border-none bg-transparent text-inherit placeholder:text-inherit shadow-none",
|
||||
inlineTagsContainer:
|
||||
"bg-transparent",
|
||||
}}
|
||||
/>
|
||||
</FormControl>
|
||||
<FormDescription>
|
||||
Users with these roles will be able
|
||||
to access this resource. Admins can
|
||||
always access this resource.
|
||||
</FormDescription>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
control={usersRolesForm.control}
|
||||
name="users"
|
||||
render={({ field }) => (
|
||||
<FormItem className="flex flex-col items-start">
|
||||
<FormLabel>Users</FormLabel>
|
||||
<FormControl>
|
||||
<TagInput
|
||||
{...field}
|
||||
activeTagIndex={
|
||||
activeUsersTagIndex
|
||||
}
|
||||
setActiveTagIndex={
|
||||
setActiveUsersTagIndex
|
||||
}
|
||||
placeholder="Enter a user"
|
||||
tags={
|
||||
usersRolesForm.getValues()
|
||||
.users
|
||||
}
|
||||
setTags={(newUsers) => {
|
||||
usersRolesForm.setValue(
|
||||
"users",
|
||||
newUsers as [
|
||||
Tag,
|
||||
...Tag[],
|
||||
],
|
||||
);
|
||||
}}
|
||||
enableAutocomplete={true}
|
||||
autocompleteOptions={allUsers}
|
||||
allowDuplicates={false}
|
||||
restrictTagsToAutocompleteOptions={
|
||||
true
|
||||
}
|
||||
sortTags={true}
|
||||
styleClasses={{
|
||||
tag: {
|
||||
body: "bg-muted hover:bg-accent text-foreground py-2 px-3 rounded-full",
|
||||
},
|
||||
input: "border-none bg-transparent text-inherit placeholder:text-inherit shadow-none",
|
||||
inlineTagsContainer:
|
||||
"bg-transparent",
|
||||
}}
|
||||
/>
|
||||
</FormControl>
|
||||
<FormDescription>
|
||||
Users added here will be able to
|
||||
access this resource. A user will
|
||||
always have access to a resource if
|
||||
they have a role that has access to
|
||||
it.
|
||||
</FormDescription>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<Button
|
||||
type="submit"
|
||||
loading={loadingSaveUsersRoles}
|
||||
disabled={loadingSaveUsersRoles}
|
||||
>
|
||||
Save Users & Roles
|
||||
</Button>
|
||||
</form>
|
||||
</Form>
|
||||
</section>
|
||||
|
||||
<SettingsSectionTitle
|
||||
title="Authentication Methods"
|
||||
description="You can also allow users to access the resource via the below methods"
|
||||
size="1xl"
|
||||
/>
|
||||
<Separator />
|
||||
|
||||
<section className="space-y-6">
|
||||
<SettingsSectionTitle
|
||||
title="Authentication Methods"
|
||||
description="You can also allow users to access the resource via the below methods"
|
||||
size="1xl"
|
||||
/>
|
||||
|
||||
<div>
|
||||
{authInfo?.password ? (
|
||||
<div className="flex items-center space-x-4">
|
||||
<div className="flex items-center text-green-500 space-x-2">
|
||||
@@ -447,7 +448,7 @@ export default function ResourceAuthenticationPage() {
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user