first commit
This commit is contained in:
259
calcom/packages/features/ee/users/components/UserForm.tsx
Normal file
259
calcom/packages/features/ee/users/components/UserForm.tsx
Normal file
@@ -0,0 +1,259 @@
|
||||
// eslint-disable-next-line no-restricted-imports
|
||||
import { noop } from "lodash";
|
||||
import { Controller, useForm } from "react-hook-form";
|
||||
|
||||
import { getUserAvatarUrl } from "@calcom/lib/getAvatarUrl";
|
||||
import { useLocale } from "@calcom/lib/hooks/useLocale";
|
||||
import { localeOptions } from "@calcom/lib/i18n";
|
||||
import { nameOfDay } from "@calcom/lib/weekday";
|
||||
import {
|
||||
Avatar,
|
||||
Button,
|
||||
EmailField,
|
||||
Form,
|
||||
ImageUploader,
|
||||
Label,
|
||||
Select,
|
||||
TextField,
|
||||
TimezoneSelect,
|
||||
} from "@calcom/ui";
|
||||
|
||||
import type { UserAdminRouterOutputs } from "../server/trpc-router";
|
||||
|
||||
type User = UserAdminRouterOutputs["get"]["user"];
|
||||
|
||||
type Option<T extends string | number = string> = {
|
||||
value: T;
|
||||
label: string;
|
||||
};
|
||||
|
||||
type OptionValues = {
|
||||
locale: Option;
|
||||
timeFormat: Option<number>;
|
||||
timeZone: string;
|
||||
weekStart: Option;
|
||||
role: Option;
|
||||
identityProvider: Option;
|
||||
};
|
||||
|
||||
type FormValues = Pick<User, "avatarUrl" | "name" | "username" | "email" | "bio"> & OptionValues;
|
||||
|
||||
export const UserForm = ({
|
||||
defaultValues,
|
||||
localeProp = "en",
|
||||
onSubmit = noop,
|
||||
submitLabel = "save",
|
||||
}: {
|
||||
defaultValues?: Pick<User, keyof FormValues>;
|
||||
localeProp?: string;
|
||||
onSubmit: (data: FormValues) => void;
|
||||
submitLabel?: string;
|
||||
}) => {
|
||||
const { t } = useLocale();
|
||||
|
||||
const timeFormatOptions = [
|
||||
{ value: 12, label: t("12_hour") },
|
||||
{ value: 24, label: t("24_hour") },
|
||||
];
|
||||
|
||||
const weekStartOptions = [
|
||||
{ value: "Sunday", label: nameOfDay(localeProp, 0) },
|
||||
{ value: "Monday", label: nameOfDay(localeProp, 1) },
|
||||
{ value: "Tuesday", label: nameOfDay(localeProp, 2) },
|
||||
{ value: "Wednesday", label: nameOfDay(localeProp, 3) },
|
||||
{ value: "Thursday", label: nameOfDay(localeProp, 4) },
|
||||
{ value: "Friday", label: nameOfDay(localeProp, 5) },
|
||||
{ value: "Saturday", label: nameOfDay(localeProp, 6) },
|
||||
];
|
||||
|
||||
const userRoleOptions = [
|
||||
{ value: "USER", label: t("user") },
|
||||
{ value: "ADMIN", label: t("admin") },
|
||||
];
|
||||
|
||||
const identityProviderOptions = [
|
||||
{ value: "CAL", label: "CAL" },
|
||||
{ value: "GOOGLE", label: "GOOGLE" },
|
||||
{ value: "SAML", label: "SAML" },
|
||||
];
|
||||
const defaultLocale = defaultValues?.locale || localeOptions[0].value;
|
||||
|
||||
const form = useForm<FormValues>({
|
||||
defaultValues: {
|
||||
avatarUrl: defaultValues?.avatarUrl,
|
||||
name: defaultValues?.name,
|
||||
username: defaultValues?.username,
|
||||
email: defaultValues?.email,
|
||||
bio: defaultValues?.bio,
|
||||
locale: {
|
||||
value: defaultLocale,
|
||||
label: new Intl.DisplayNames(defaultLocale, { type: "language" }).of(defaultLocale) || "",
|
||||
},
|
||||
timeFormat: {
|
||||
value: defaultValues?.timeFormat || 12,
|
||||
label: timeFormatOptions.find((option) => option.value === defaultValues?.timeFormat)?.label || "12",
|
||||
},
|
||||
timeZone: defaultValues?.timeZone || "",
|
||||
weekStart: {
|
||||
value: defaultValues?.weekStart || weekStartOptions[0].value,
|
||||
label: nameOfDay(localeProp, defaultValues?.weekStart === "Sunday" ? 0 : 1),
|
||||
},
|
||||
role: {
|
||||
value: defaultValues?.role || userRoleOptions[0].value,
|
||||
label:
|
||||
userRoleOptions.find((option) => option.value === defaultValues?.role)?.label ||
|
||||
userRoleOptions[0].label,
|
||||
},
|
||||
identityProvider: {
|
||||
value: defaultValues?.identityProvider || identityProviderOptions[0].value,
|
||||
label:
|
||||
identityProviderOptions.find((option) => option.value === defaultValues?.identityProvider)?.label ||
|
||||
identityProviderOptions[0].label,
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
return (
|
||||
<Form form={form} className="space-y-4" handleSubmit={onSubmit}>
|
||||
<div className="flex items-center">
|
||||
<Controller
|
||||
control={form.control}
|
||||
name="avatarUrl"
|
||||
render={({ field: { value, onChange } }) => (
|
||||
<>
|
||||
<Avatar
|
||||
alt={form.getValues("name") || ""}
|
||||
imageSrc={getUserAvatarUrl({
|
||||
avatarUrl: value,
|
||||
})}
|
||||
size="lg"
|
||||
/>
|
||||
<div className="ml-4">
|
||||
<ImageUploader
|
||||
target="avatar"
|
||||
id="avatar-upload"
|
||||
buttonMsg="Change avatar"
|
||||
handleAvatarChange={onChange}
|
||||
imageSrc={getUserAvatarUrl({
|
||||
avatarUrl: value,
|
||||
})}
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
<Controller
|
||||
name="role"
|
||||
control={form.control}
|
||||
render={({ field: { onChange, value } }) => (
|
||||
<div>
|
||||
<Label className="text-default font-medium" htmlFor="role">
|
||||
{t("role")}
|
||||
</Label>
|
||||
<Select<{ label: string; value: string }>
|
||||
value={value}
|
||||
options={userRoleOptions}
|
||||
onChange={onChange}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
/>
|
||||
<Controller
|
||||
name="identityProvider"
|
||||
control={form.control}
|
||||
render={({ field: { onChange, value } }) => (
|
||||
<div>
|
||||
<Label className="text-default font-medium" htmlFor="identityProvider">
|
||||
{t("identity_provider")}
|
||||
</Label>
|
||||
<Select<{ label: string; value: string }>
|
||||
value={value}
|
||||
options={identityProviderOptions}
|
||||
onChange={onChange}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
/>
|
||||
<TextField label="Name" placeholder="example" required {...form.register("name")} />
|
||||
<TextField label="Username" placeholder="example" required {...form.register("username")} />
|
||||
<EmailField label="Email" placeholder="user@example.com" required {...form.register("email")} />
|
||||
<TextField label="About" {...form.register("bio")} />
|
||||
<Controller
|
||||
name="locale"
|
||||
render={({ field: { value, onChange } }) => (
|
||||
<>
|
||||
<Label className="text-default">
|
||||
<>{t("language")}</>
|
||||
</Label>
|
||||
<Select<{ label: string; value: string }>
|
||||
className="capitalize"
|
||||
options={localeOptions}
|
||||
value={value}
|
||||
onChange={onChange}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
/>
|
||||
<Controller
|
||||
name="timeZone"
|
||||
control={form.control}
|
||||
render={({ field: { value } }) => (
|
||||
<>
|
||||
<Label className="text-default mt-8">
|
||||
<>{t("timezone")}</>
|
||||
</Label>
|
||||
<TimezoneSelect
|
||||
id="timezone"
|
||||
value={value}
|
||||
onChange={(event) => {
|
||||
if (event) form.setValue("timeZone", event.value);
|
||||
}}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
/>
|
||||
<Controller
|
||||
name="timeFormat"
|
||||
control={form.control}
|
||||
render={({ field: { value } }) => (
|
||||
<>
|
||||
<Label className="text-default mt-8">
|
||||
<>{t("time_format")}</>
|
||||
</Label>
|
||||
<Select
|
||||
value={value}
|
||||
options={timeFormatOptions}
|
||||
onChange={(event) => {
|
||||
if (event) form.setValue("timeFormat", { ...event });
|
||||
}}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
/>
|
||||
<Controller
|
||||
name="weekStart"
|
||||
control={form.control}
|
||||
render={({ field: { value } }) => (
|
||||
<>
|
||||
<Label className="text-default mt-8">
|
||||
<>{t("start_of_week")}</>
|
||||
</Label>
|
||||
<Select
|
||||
value={value}
|
||||
options={weekStartOptions}
|
||||
onChange={(event) => {
|
||||
if (event) form.setValue("weekStart", { ...event });
|
||||
}}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
/>
|
||||
|
||||
<br />
|
||||
<Button type="submit" color="primary">
|
||||
{t(submitLabel)}
|
||||
</Button>
|
||||
</Form>
|
||||
);
|
||||
};
|
||||
324
calcom/packages/features/ee/users/components/UsersTable.tsx
Normal file
324
calcom/packages/features/ee/users/components/UsersTable.tsx
Normal file
@@ -0,0 +1,324 @@
|
||||
import { keepPreviousData } from "@tanstack/react-query";
|
||||
import { signIn } from "next-auth/react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
|
||||
|
||||
import { WEBAPP_URL } from "@calcom/lib/constants";
|
||||
import { useDebounce } from "@calcom/lib/hooks/useDebounce";
|
||||
import { useLocale } from "@calcom/lib/hooks/useLocale";
|
||||
import { trpc } from "@calcom/trpc/react";
|
||||
import {
|
||||
Avatar,
|
||||
Badge,
|
||||
Button,
|
||||
ConfirmationDialogContent,
|
||||
Dialog,
|
||||
DialogClose,
|
||||
DialogContent,
|
||||
DialogFooter,
|
||||
DropdownActions,
|
||||
Icon,
|
||||
showToast,
|
||||
Table,
|
||||
TextField,
|
||||
} from "@calcom/ui";
|
||||
|
||||
import { withLicenseRequired } from "../../common/components/LicenseRequired";
|
||||
|
||||
const { Cell, ColumnTitle, Header, Row } = Table;
|
||||
|
||||
const FETCH_LIMIT = 25;
|
||||
|
||||
function UsersTableBare() {
|
||||
const { t } = useLocale();
|
||||
const tableContainerRef = useRef<HTMLDivElement>(null);
|
||||
const utils = trpc.useUtils();
|
||||
const [searchTerm, setSearchTerm] = useState<string>("");
|
||||
const [showImpersonateModal, setShowImpersonateModal] = useState(false);
|
||||
const [selectedUser, setSelectedUser] = useState<string | null>(null);
|
||||
const debouncedSearchTerm = useDebounce(searchTerm, 500);
|
||||
const router = useRouter();
|
||||
|
||||
const mutation = trpc.viewer.users.delete.useMutation({
|
||||
onSuccess: async () => {
|
||||
showToast("User has been deleted", "success");
|
||||
// Lets not invalidated the whole cache, just remove the user from the cache.
|
||||
// usefull cause in prod this will be fetching 100k+ users
|
||||
// FIXME: Tested locally and it doesnt't work, need to investigate
|
||||
utils.viewer.admin.listPaginated.setInfiniteData({ limit: FETCH_LIMIT }, (cachedData) => {
|
||||
if (!cachedData) {
|
||||
return {
|
||||
pages: [],
|
||||
pageParams: [],
|
||||
};
|
||||
}
|
||||
return {
|
||||
...cachedData,
|
||||
pages: cachedData.pages.map((page) => ({
|
||||
...page,
|
||||
rows: page.rows.filter((row) => row.id !== userToDelete),
|
||||
})),
|
||||
};
|
||||
});
|
||||
},
|
||||
onError: (err) => {
|
||||
console.error(err.message);
|
||||
showToast("There has been an error deleting this user.", "error");
|
||||
},
|
||||
onSettled: () => {
|
||||
setUserToDelete(null);
|
||||
},
|
||||
});
|
||||
|
||||
const { data, fetchNextPage, isFetching } = trpc.viewer.admin.listPaginated.useInfiniteQuery(
|
||||
{
|
||||
limit: FETCH_LIMIT,
|
||||
searchTerm: debouncedSearchTerm,
|
||||
},
|
||||
{
|
||||
getNextPageParam: (lastPage) => lastPage.nextCursor,
|
||||
placeholderData: keepPreviousData,
|
||||
refetchOnWindowFocus: false,
|
||||
}
|
||||
);
|
||||
|
||||
const sendPasswordResetEmail = trpc.viewer.admin.sendPasswordReset.useMutation({
|
||||
onSuccess: () => {
|
||||
showToast("Password reset email has been sent", "success");
|
||||
},
|
||||
});
|
||||
|
||||
const removeTwoFactor = trpc.viewer.admin.removeTwoFactor.useMutation({
|
||||
onSuccess: () => {
|
||||
showToast("2FA has been removed", "success");
|
||||
},
|
||||
});
|
||||
|
||||
const lockUserAccount = trpc.viewer.admin.lockUserAccount.useMutation({
|
||||
onSuccess: ({ userId, locked }) => {
|
||||
showToast(locked ? "User was locked" : "User was unlocked", "success");
|
||||
utils.viewer.admin.listPaginated.setInfiniteData({ limit: FETCH_LIMIT }, (cachedData) => {
|
||||
if (!cachedData) {
|
||||
return {
|
||||
pages: [],
|
||||
pageParams: [],
|
||||
};
|
||||
}
|
||||
return {
|
||||
...cachedData,
|
||||
pages: cachedData.pages.map((page) => ({
|
||||
...page,
|
||||
rows: page.rows.map((row) => {
|
||||
const newUser = row;
|
||||
if (row.id === userId) newUser.locked = locked;
|
||||
return newUser;
|
||||
}),
|
||||
})),
|
||||
};
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
const handleImpersonateUser = async (username: string | null) => {
|
||||
await signIn("impersonation-auth", { redirect: false, username: username });
|
||||
router.push(`/event-types`);
|
||||
};
|
||||
|
||||
//we must flatten the array of arrays from the useInfiniteQuery hook
|
||||
const flatData = useMemo(() => data?.pages?.flatMap((page) => page.rows) ?? [], [data]);
|
||||
const totalDBRowCount = data?.pages?.[0]?.meta?.totalRowCount ?? 0;
|
||||
const totalFetched = flatData.length;
|
||||
|
||||
//called on scroll and possibly on mount to fetch more data as the user scrolls and reaches bottom of table
|
||||
const fetchMoreOnBottomReached = useCallback(
|
||||
(containerRefElement?: HTMLDivElement | null) => {
|
||||
if (containerRefElement) {
|
||||
const { scrollHeight, scrollTop, clientHeight } = containerRefElement;
|
||||
//once the user has scrolled within 300px of the bottom of the table, fetch more data if there is any
|
||||
if (scrollHeight - scrollTop - clientHeight < 300 && !isFetching && totalFetched < totalDBRowCount) {
|
||||
fetchNextPage();
|
||||
}
|
||||
}
|
||||
},
|
||||
[fetchNextPage, isFetching, totalFetched, totalDBRowCount]
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
fetchMoreOnBottomReached(tableContainerRef.current);
|
||||
}, [fetchMoreOnBottomReached]);
|
||||
|
||||
const [userToDelete, setUserToDelete] = useState<number | null>(null);
|
||||
|
||||
return (
|
||||
<>
|
||||
<TextField
|
||||
placeholder="username or email"
|
||||
label="Search"
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
/>
|
||||
<div
|
||||
className="border-subtle rounded-md border"
|
||||
ref={tableContainerRef}
|
||||
onScroll={() => fetchMoreOnBottomReached()}
|
||||
style={{
|
||||
height: "calc(100vh - 30vh)",
|
||||
overflow: "auto",
|
||||
}}>
|
||||
<Table>
|
||||
<Header>
|
||||
<ColumnTitle widthClassNames="w-auto">User</ColumnTitle>
|
||||
<ColumnTitle>Timezone</ColumnTitle>
|
||||
<ColumnTitle>Role</ColumnTitle>
|
||||
<ColumnTitle widthClassNames="w-auto">
|
||||
<span className="sr-only">Edit</span>
|
||||
</ColumnTitle>
|
||||
</Header>
|
||||
|
||||
<tbody className="divide-subtle divide-y rounded-md">
|
||||
{flatData.map((user) => (
|
||||
<Row key={user.email}>
|
||||
<Cell widthClassNames="w-auto">
|
||||
<div className="min-h-10 flex ">
|
||||
<Avatar
|
||||
size="md"
|
||||
alt={`Avatar of ${user.username || "Nameless"}`}
|
||||
// @ts-expect-error - Figure it out later. Ideally we should show all the profiles here for the user.
|
||||
imageSrc={`${WEBAPP_URL}/${user.username}/avatar.png?orgId=${user.organizationId}`}
|
||||
/>
|
||||
|
||||
<div className="text-subtle ml-4 font-medium">
|
||||
<span className="text-default">{user.name}</span>
|
||||
<span className="ml-3">/{user.username}</span>
|
||||
{user.locked && (
|
||||
<span className="ml-3">
|
||||
<Icon name="lock" />
|
||||
</span>
|
||||
)}
|
||||
<br />
|
||||
<span className="break-all">{user.email}</span>
|
||||
</div>
|
||||
</div>
|
||||
</Cell>
|
||||
<Cell>{user.timeZone}</Cell>
|
||||
<Cell>
|
||||
<Badge className="capitalize" variant={user.role === "ADMIN" ? "red" : "gray"}>
|
||||
{user.role.toLowerCase()}
|
||||
</Badge>
|
||||
</Cell>
|
||||
<Cell widthClassNames="w-auto">
|
||||
<div className="flex w-full justify-end">
|
||||
<DropdownActions
|
||||
actions={[
|
||||
{
|
||||
id: "edit",
|
||||
label: "Edit",
|
||||
href: `/settings/admin/users/${user.id}/edit`,
|
||||
icon: "pencil",
|
||||
},
|
||||
{
|
||||
id: "reset-password",
|
||||
label: "Reset Password",
|
||||
onClick: () => sendPasswordResetEmail.mutate({ userId: user.id }),
|
||||
icon: "lock",
|
||||
},
|
||||
{
|
||||
id: "impersonate-user",
|
||||
label: "Impersonate User",
|
||||
onClick: () => handleImpersonateUser(user?.username),
|
||||
icon: "user",
|
||||
},
|
||||
{
|
||||
id: "lock-user",
|
||||
label: user.locked ? "Unlock User Account" : "Lock User Account",
|
||||
onClick: () => lockUserAccount.mutate({ userId: user.id, locked: !user.locked }),
|
||||
icon: "lock",
|
||||
},
|
||||
{
|
||||
id: "impersonation",
|
||||
label: "Impersonate",
|
||||
onClick: () => {
|
||||
setSelectedUser(user.username);
|
||||
setShowImpersonateModal(true);
|
||||
},
|
||||
icon: "venetian-mask",
|
||||
},
|
||||
{
|
||||
id: "remove-2fa",
|
||||
label: "Remove 2FA",
|
||||
color: "destructive",
|
||||
onClick: () => removeTwoFactor.mutate({ userId: user.id }),
|
||||
icon: "shield",
|
||||
},
|
||||
{
|
||||
id: "delete",
|
||||
label: "Delete",
|
||||
color: "destructive",
|
||||
onClick: () => setUserToDelete(user.id),
|
||||
icon: "trash",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</Cell>
|
||||
</Row>
|
||||
))}
|
||||
</tbody>
|
||||
</Table>
|
||||
<DeleteUserDialog
|
||||
user={userToDelete}
|
||||
onClose={() => setUserToDelete(null)}
|
||||
onConfirm={() => {
|
||||
if (!userToDelete) return;
|
||||
mutation.mutate({ userId: userToDelete });
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
{showImpersonateModal && selectedUser && (
|
||||
<Dialog open={showImpersonateModal} onOpenChange={() => setShowImpersonateModal(false)}>
|
||||
<DialogContent type="creation" title={t("impersonate")} description={t("impersonation_user_tip")}>
|
||||
<form
|
||||
onSubmit={async (e) => {
|
||||
e.preventDefault();
|
||||
await signIn("impersonation-auth", { redirect: false, username: selectedUser });
|
||||
setShowImpersonateModal(false);
|
||||
router.replace("/settings/my-account/profile");
|
||||
}}>
|
||||
<DialogFooter showDivider className="mt-8">
|
||||
<DialogClose color="secondary">{t("cancel")}</DialogClose>
|
||||
<Button color="primary" type="submit">
|
||||
{t("impersonate")}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</form>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
const DeleteUserDialog = ({
|
||||
user,
|
||||
onConfirm,
|
||||
onClose,
|
||||
}: {
|
||||
user: number | null;
|
||||
onConfirm: () => void;
|
||||
onClose: () => void;
|
||||
}) => {
|
||||
return (
|
||||
// eslint-disable-next-line @typescript-eslint/no-empty-function -- noop
|
||||
<Dialog name="delete-user" open={!!user} onOpenChange={(open) => (open ? () => {} : onClose())}>
|
||||
<ConfirmationDialogContent
|
||||
title="Delete User"
|
||||
confirmBtnText="Delete"
|
||||
cancelBtnText="Cancel"
|
||||
variety="danger"
|
||||
onConfirm={onConfirm}>
|
||||
<p>Are you sure you want to delete this user?</p>
|
||||
</ConfirmationDialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
};
|
||||
|
||||
export const UsersTable = withLicenseRequired(UsersTableBare);
|
||||
Reference in New Issue
Block a user