cal.pub0.org/packages/features/ee/users/components/UserForm.tsx

251 lines
7.7 KiB
TypeScript
Raw Normal View History

import { noop } from "lodash";
import { useRouter } from "next/router";
import { useMemo } from "react";
import { Controller, useForm } from "react-hook-form";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { nameOfDay } from "@calcom/lib/weekday";
import { Button, EmailField, Form, 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, "avatar" | "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 router = useRouter();
const { t } = useLocale();
const localeOptions = useMemo(() => {
return (router.locales || []).map((locale) => ({
value: locale,
label: new Intl.DisplayNames(locale, { type: "language" }).of(locale) || "",
}));
}, [router.locales]);
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 form = useForm<FormValues>({
defaultValues: {
avatar: defaultValues?.avatar,
name: defaultValues?.name,
username: defaultValues?.username,
email: defaultValues?.email,
bio: defaultValues?.bio,
locale: {
value: defaultValues?.locale || localeOptions[0].value,
label: localeOptions.find((option) => option.value === localeProp)?.label || "",
},
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?.role)?.label ||
identityProviderOptions[0].label,
},
},
});
return (
<Form form={form} className="space-y-4" handleSubmit={onSubmit}>
{/* TODO: Enable Avatar uploader in a follow up */}
{/* <div className="flex items-center">
<Controller
control={form.control}
name="avatar"
render={({ field: { value } }) => (
<>
<Avatar alt="" imageSrc={value} gravatarFallbackMd5="fallback" size="lg" />
<div className="ml-4">
<ImageUploader
target="avatar"
id="avatar-upload"
buttonMsg="Change avatar"
handleAvatarChange={(newAvatar) => {
form.setValue("avatar", newAvatar, { shouldDirty: true });
}}
imageSrc={value || undefined}
/>
</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>
);
};