pangolin_mirror/pangolin
1
0
Fork 0
mirror of https://github.com/fosrl/pangolin.git synced 2026-02-14 17:06:39 +00:00
Code Issues Packages Projects Releases Wiki Activity

ability to remove user from org

Browse Source
This commit is contained in:
Milo Schwartz
2024-11-03 17:28:12 -05:00
parent 2852d62258
commit fadfaf1f0b
28 changed files with 718 additions and 264 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
src/app/[orgId]/settings/sites/components/SitesTable.tsx
View File

@@ -79,7 +79,7 @@ export const columns: ColumnDef<SiteRow>[] = [
.then(() => {
router.refresh();
});
}
};
return (
<DropdownMenu>
@@ -98,7 +98,12 @@ export const columns: ColumnDef<SiteRow>[] = [
</Link>
</DropdownMenuItem>
<DropdownMenuItem>
<button onClick={() => deleteSite(siteRow.id)} className="text-red-600 hover:text-red-800 hover:underline cursor-pointer">Delete</button>
<button
onClick={() => deleteSite(siteRow.id)}
className="text-red-600 hover:text-red-800"
>
Delete
</button>
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>

10
src/app/[orgId]/settings/users/components/InviteUserForm.tsx
View File

@@ -122,7 +122,13 @@ export default function InviteUserForm({ open, setOpen }: InviteUserFormProps) {
return (
<>
<Credenza open={open} onOpenChange={setOpen}>
<Credenza open={open} onOpenChange={(val) => {
setOpen(val);
setInviteLink(null);
setLoading(false);
setExpiresInDays(1);
form.reset();
}}>
<CredenzaContent>
<CredenzaHeader>
<CredenzaTitle>Invite User</CredenzaTitle>
@@ -257,7 +263,7 @@ export default function InviteUserForm({ open, setOpen }: InviteUserFormProps) {
type="submit"
form="invite-user-form"
loading={loading}
disabled={inviteLink !== null}
disabled={inviteLink !== null || loading}
>
Create Invitation
</Button>

196
src/app/[orgId]/settings/users/components/UsersTable.tsx
View File

@@ -12,60 +12,178 @@ import { ArrowUpDown, MoreHorizontal } from "lucide-react";
import { UsersDataTable } from "./UsersDataTable";
import { useState } from "react";
import InviteUserForm from "./InviteUserForm";
import { Badge } from "@app/components/ui/badge";
import ConfirmDeleteDialog from "@app/components/ConfirmDeleteDialog";
import { useUserContext } from "@app/hooks/useUserContext";
import api from "@app/api";
import { useOrgContext } from "@app/hooks/useOrgContext";
import { useToast } from "@app/hooks/useToast";
export type UserRow = {
id: string;
email: string;
status: string;
role: string;
};
export const columns: ColumnDef<UserRow>[] = [
{
accessorKey: "email",
header: ({ column }) => {
return (
<Button
variant="ghost"
onClick={() =>
column.toggleSorting(column.getIsSorted() === "asc")
}
>
Email
<ArrowUpDown className="ml-2 h-4 w-4" />
</Button>
);
},
},
{
id: "actions",
cell: ({ row }) => {
const userRow = row.original;
return (
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="ghost" className="h-8 w-8 p-0">
<span className="sr-only">Open menu</span>
<MoreHorizontal className="h-4 w-4" />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end">
<DropdownMenuItem>Edit access</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
);
},
},
];
type UsersTableProps = {
users: UserRow[];
};
export default function UsersTable({ users }: UsersTableProps) {
const [isInviteModalOpen, setIsInviteModalOpen] = useState(false);
const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
const [userToRemove, setUserToRemove] = useState<UserRow | null>(null);
const user = useUserContext();
const { org } = useOrgContext();
const { toast } = useToast();
const columns: ColumnDef<UserRow>[] = [
{
accessorKey: "email",
header: ({ column }) => {
return (
<Button
variant="ghost"
onClick={() =>
column.toggleSorting(column.getIsSorted() === "asc")
}
>
Email
<ArrowUpDown className="ml-2 h-4 w-4" />
</Button>
);
},
},
{
accessorKey: "status",
header: ({ column }) => {
return (
<Button
variant="ghost"
onClick={() =>
column.toggleSorting(column.getIsSorted() === "asc")
}
>
Status
<ArrowUpDown className="ml-2 h-4 w-4" />
</Button>
);
},
},
{
accessorKey: "role",
header: ({ column }) => {
return (
<Button
variant="ghost"
onClick={() =>
column.toggleSorting(column.getIsSorted() === "asc")
}
>
Role
<ArrowUpDown className="ml-2 h-4 w-4" />
</Button>
);
},
},
{
id: "actions",
cell: ({ row }) => {
const userRow = row.original;
return (
<>
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="ghost" className="h-8 w-8 p-0">
<span className="sr-only">Open menu</span>
<MoreHorizontal className="h-4 w-4" />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end">
<DropdownMenuItem>Manage user</DropdownMenuItem>
{userRow.email !== user?.email && (
<DropdownMenuItem>
<button
className="text-red-600 hover:text-red-800"
onClick={() => {
setIsDeleteModalOpen(true);
setUserToRemove(userRow);
}}
>
Remove User
</button>
</DropdownMenuItem>
)}
</DropdownMenuContent>
</DropdownMenu>
</>
);
},
},
];
async function removeUser() {
if (userToRemove) {
const res = await api
.delete(`/org/${org!.org.orgId}/user/${userToRemove.id}`)
.catch((e) => {
toast({
variant: "destructive",
title: "Failed to remove user",
description:
e.message ??
"An error occurred while removing the user.",
});
});
if (res && res.status === 200) {
toast({
variant: "default",
title: "User removed",
description: `The user ${userToRemove.email} has been removed from the organization.`,
});
}
}
setIsDeleteModalOpen(false);
}
return (
<>
<ConfirmDeleteDialog
open={isDeleteModalOpen}
setOpen={(val) => {
setIsDeleteModalOpen(val);
setUserToRemove(null);
}}
dialog={
<div>
<p className="mb-2">
Are you sure you want to remove{" "}
<b>{userToRemove?.email}</b> from the organization?
</p>
<p className="mb-2">
Once removed, this user will no longer have access
to the organization. You can always re-invite them
later, but they will need to accept the invitation
again.
</p>
<p>
To confirm, please type the email address of the
user below.
</p>
</div>
}
buttonText="Confirm remove user"
onConfirm={removeUser}
string={userToRemove?.email ?? ""}
title="Remove user from organization"
/>
<InviteUserForm
open={isInviteModalOpen}
setOpen={setIsInviteModalOpen}

15
src/app/[orgId]/settings/users/page.tsx
View File

@@ -6,6 +6,8 @@ import UsersTable, { UserRow } from "./components/UsersTable";
import { GetOrgResponse } from "@server/routers/org";
import { cache } from "react";
import OrgProvider from "@app/providers/OrgProvider";
import UserProvider from "@app/providers/UserProvider";
import { verifySession } from "@app/lib/auth/verifySession";
type UsersPageProps = {
params: Promise<{ orgId: string }>;
@@ -14,6 +16,9 @@ type UsersPageProps = {
export default async function UsersPage(props: UsersPageProps) {
const params = await props.params;
const getUser = cache(verifySession);
const user = await getUser();
let users: ListUsersResponse["users"] = [];
const res = await internal
.get<AxiosResponse<ListUsersResponse>>(
@@ -49,6 +54,8 @@ export default async function UsersPage(props: UsersPageProps) {
return {
id: user.id,
email: user.email,
status: "Confirmed",
role: user.roleName || "",
};
});
@@ -64,9 +71,11 @@ export default async function UsersPage(props: UsersPageProps) {
</p>
</div>
<OrgProvider org={org}>
<UsersTable users={userRows} />
</OrgProvider>
<UserProvider user={user!}>
<OrgProvider org={org}>
<UsersTable users={userRows} />
</OrgProvider>
</UserProvider>
</>
);
}

6
src/app/page.tsx
View File

@@ -1,7 +1,7 @@
import { internal } from "@app/api";
import { authCookieHeader } from "@app/api/cookies";
import { verifySession } from "@app/lib/auth/verifySession";
import { LandingProvider } from "@app/providers/LandingProvider";
import UserProvider from "@app/providers/UserProvider";
import { ListOrgsResponse } from "@server/routers/org";
import { AxiosResponse } from "axios";
import { ArrowUpRight } from "lucide-react";
@@ -42,9 +42,9 @@ export default async function Page(props: {
return (
<>
<LandingProvider user={user}>
<UserProvider user={user}>
<p>Logged in as {user.email}</p>
</LandingProvider>
</UserProvider>
<div className="mt-4">
{orgs.map((org) => (