307 lines
11 KiB
TypeScript
307 lines
11 KiB
TypeScript
import { signOut, useSession } from "next-auth/react";
|
|
import { useState } from "react";
|
|
import { useForm } from "react-hook-form";
|
|
|
|
import { identityProviderNameMap } from "@calcom/features/auth/lib/identityProviderNameMap";
|
|
import SectionBottomActions from "@calcom/features/settings/SectionBottomActions";
|
|
import { getLayout } from "@calcom/features/settings/layouts/SettingsLayout";
|
|
import { classNames } from "@calcom/lib";
|
|
import { useLocale } from "@calcom/lib/hooks/useLocale";
|
|
import { IdentityProvider } from "@calcom/prisma/enums";
|
|
import { userMetadata as userMetadataSchema } from "@calcom/prisma/zod-utils";
|
|
import type { RouterOutputs } from "@calcom/trpc/react";
|
|
import { trpc } from "@calcom/trpc/react";
|
|
import {
|
|
Alert,
|
|
Button,
|
|
Form,
|
|
Meta,
|
|
PasswordField,
|
|
Select,
|
|
SettingsToggle,
|
|
showToast,
|
|
SkeletonButton,
|
|
SkeletonContainer,
|
|
SkeletonText,
|
|
} from "@calcom/ui";
|
|
|
|
import PageWrapper from "@components/PageWrapper";
|
|
|
|
type ChangePasswordSessionFormValues = {
|
|
oldPassword: string;
|
|
newPassword: string;
|
|
sessionTimeout?: number;
|
|
apiError: string;
|
|
};
|
|
|
|
interface PasswordViewProps {
|
|
user: RouterOutputs["viewer"]["me"];
|
|
}
|
|
|
|
const SkeletonLoader = ({ title, description }: { title: string; description: string }) => {
|
|
return (
|
|
<SkeletonContainer>
|
|
<Meta title={title} description={description} borderInShellHeader={true} />
|
|
<div className="border-subtle space-y-6 border-x px-4 py-8 sm:px-6">
|
|
<SkeletonText className="h-8 w-full" />
|
|
<SkeletonText className="h-8 w-full" />
|
|
<SkeletonText className="h-8 w-full" />
|
|
</div>
|
|
<div className="rounded-b-xl">
|
|
<SectionBottomActions align="end">
|
|
<SkeletonButton className="ml-auto h-8 w-20 rounded-md" />
|
|
</SectionBottomActions>
|
|
</div>
|
|
</SkeletonContainer>
|
|
);
|
|
};
|
|
|
|
const PasswordView = ({ user }: PasswordViewProps) => {
|
|
const { data } = useSession();
|
|
const { t } = useLocale();
|
|
const utils = trpc.useContext();
|
|
const metadata = userMetadataSchema.safeParse(user?.metadata);
|
|
const initialSessionTimeout = metadata.success ? metadata.data?.sessionTimeout : undefined;
|
|
|
|
const [sessionTimeout, setSessionTimeout] = useState<number | undefined>(initialSessionTimeout);
|
|
|
|
const sessionMutation = trpc.viewer.updateProfile.useMutation({
|
|
onSuccess: (data) => {
|
|
showToast(t("session_timeout_changed"), "success");
|
|
formMethods.reset(formMethods.getValues());
|
|
setSessionTimeout(data.metadata?.sessionTimeout);
|
|
},
|
|
onSettled: () => {
|
|
utils.viewer.me.invalidate();
|
|
},
|
|
onMutate: async () => {
|
|
await utils.viewer.me.cancel();
|
|
const previousValue = await utils.viewer.me.getData();
|
|
const previousMetadata = userMetadataSchema.safeParse(previousValue?.metadata);
|
|
|
|
if (previousValue && sessionTimeout && previousMetadata.success) {
|
|
utils.viewer.me.setData(undefined, {
|
|
...previousValue,
|
|
metadata: { ...previousMetadata?.data, sessionTimeout: sessionTimeout },
|
|
});
|
|
return { previousValue };
|
|
}
|
|
},
|
|
onError: (error, _, context) => {
|
|
if (context?.previousValue) {
|
|
utils.viewer.me.setData(undefined, context.previousValue);
|
|
}
|
|
showToast(`${t("session_timeout_change_error")}, ${error.message}`, "error");
|
|
},
|
|
});
|
|
const passwordMutation = trpc.viewer.auth.changePassword.useMutation({
|
|
onSuccess: () => {
|
|
showToast(t("password_has_been_changed"), "success");
|
|
formMethods.resetField("oldPassword");
|
|
formMethods.resetField("newPassword");
|
|
|
|
if (data?.user.role === "INACTIVE_ADMIN") {
|
|
/*
|
|
AdminPasswordBanner component relies on the role returned from the session.
|
|
Next-Auth doesn't provide a way to revalidate the session cookie,
|
|
so this a workaround to hide the banner after updating the password.
|
|
discussion: https://github.com/nextauthjs/next-auth/discussions/4229
|
|
*/
|
|
signOut({ callbackUrl: "/auth/login" });
|
|
}
|
|
},
|
|
onError: (error) => {
|
|
showToast(`${t("error_updating_password")}, ${t(error.message)}`, "error");
|
|
|
|
formMethods.setError("apiError", {
|
|
message: t(error.message),
|
|
type: "custom",
|
|
});
|
|
},
|
|
});
|
|
|
|
const formMethods = useForm<ChangePasswordSessionFormValues>({
|
|
defaultValues: {
|
|
oldPassword: "",
|
|
newPassword: "",
|
|
},
|
|
});
|
|
|
|
const handleSubmit = (values: ChangePasswordSessionFormValues) => {
|
|
const { oldPassword, newPassword } = values;
|
|
|
|
if (!oldPassword.length) {
|
|
formMethods.setError(
|
|
"oldPassword",
|
|
{ type: "required", message: t("error_required_field") },
|
|
{ shouldFocus: true }
|
|
);
|
|
}
|
|
if (!newPassword.length) {
|
|
formMethods.setError(
|
|
"newPassword",
|
|
{ type: "required", message: t("error_required_field") },
|
|
{ shouldFocus: true }
|
|
);
|
|
}
|
|
|
|
if (oldPassword && newPassword) {
|
|
passwordMutation.mutate({ oldPassword, newPassword });
|
|
}
|
|
};
|
|
|
|
const timeoutOptions = [5, 10, 15].map((mins) => ({
|
|
label: t("multiple_duration_mins", { count: mins }),
|
|
value: mins,
|
|
}));
|
|
|
|
const isDisabled = formMethods.formState.isSubmitting || !formMethods.formState.isDirty;
|
|
|
|
const passwordMinLength = data?.user.role === "USER" ? 7 : 15;
|
|
const isUser = data?.user.role === "USER";
|
|
|
|
return (
|
|
<>
|
|
<Meta title={t("password")} description={t("password_description")} borderInShellHeader={true} />
|
|
{user && user.identityProvider !== IdentityProvider.CAL ? (
|
|
<div>
|
|
<div className="mt-6">
|
|
<h2 className="font-cal text-emphasis text-lg font-medium leading-6">
|
|
{t("account_managed_by_identity_provider", {
|
|
provider: identityProviderNameMap[user.identityProvider],
|
|
})}
|
|
</h2>
|
|
</div>
|
|
<p className="text-subtle mt-1 text-sm">
|
|
{t("account_managed_by_identity_provider_description", {
|
|
provider: identityProviderNameMap[user.identityProvider],
|
|
})}
|
|
</p>
|
|
</div>
|
|
) : (
|
|
<Form form={formMethods} handleSubmit={handleSubmit}>
|
|
<div className="border-x px-4 py-6 sm:px-6">
|
|
{formMethods.formState.errors.apiError && (
|
|
<div className="pb-6">
|
|
<Alert severity="error" message={formMethods.formState.errors.apiError?.message} />
|
|
</div>
|
|
)}
|
|
<div className="w-full sm:grid sm:grid-cols-2 sm:gap-x-6">
|
|
<div>
|
|
<PasswordField {...formMethods.register("oldPassword")} label={t("old_password")} />
|
|
</div>
|
|
<div>
|
|
<PasswordField
|
|
{...formMethods.register("newPassword", {
|
|
minLength: {
|
|
message: t(isUser ? "password_hint_min" : "password_hint_admin_min"),
|
|
value: passwordMinLength,
|
|
},
|
|
pattern: {
|
|
message: "Should contain a number, uppercase and lowercase letters",
|
|
value: /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[a-zA-Z]).*$/gm,
|
|
},
|
|
})}
|
|
label={t("new_password")}
|
|
/>
|
|
</div>
|
|
</div>
|
|
<p className="text-default mt-4 w-full text-sm">
|
|
{t("invalid_password_hint", { passwordLength: passwordMinLength })}
|
|
</p>
|
|
</div>
|
|
<SectionBottomActions align="end">
|
|
<Button
|
|
color="primary"
|
|
type="submit"
|
|
loading={passwordMutation.isLoading}
|
|
onClick={() => formMethods.clearErrors("apiError")}
|
|
disabled={isDisabled || passwordMutation.isLoading || sessionMutation.isLoading}>
|
|
{t("update")}
|
|
</Button>
|
|
</SectionBottomActions>
|
|
<div className="mt-6">
|
|
<SettingsToggle
|
|
toggleSwitchAtTheEnd={true}
|
|
title={t("session_timeout")}
|
|
description={t("session_timeout_description")}
|
|
checked={sessionTimeout !== undefined}
|
|
data-testid="session-check"
|
|
onCheckedChange={(e) => {
|
|
if (!e) {
|
|
setSessionTimeout(undefined);
|
|
|
|
if (metadata.success) {
|
|
sessionMutation.mutate({
|
|
metadata: { ...metadata.data, sessionTimeout: undefined },
|
|
});
|
|
}
|
|
} else {
|
|
setSessionTimeout(10);
|
|
}
|
|
}}
|
|
childrenClassName="lg:ml-0"
|
|
switchContainerClassName={classNames(
|
|
"py-6 px-4 sm:px-6 border-subtle rounded-xl border",
|
|
!!sessionTimeout && "rounded-b-none"
|
|
)}>
|
|
<>
|
|
<div className="border-subtle border-x p-6 pb-8">
|
|
<div className="flex flex-col">
|
|
<p className="text-default mb-2 font-medium">{t("session_timeout_after")}</p>
|
|
<Select
|
|
options={timeoutOptions}
|
|
defaultValue={
|
|
sessionTimeout
|
|
? timeoutOptions.find((tmo) => tmo.value === sessionTimeout)
|
|
: timeoutOptions[1]
|
|
}
|
|
isSearchable={false}
|
|
className="block h-[36px] !w-auto min-w-0 flex-none rounded-md text-sm"
|
|
onChange={(event) => {
|
|
setSessionTimeout(event?.value);
|
|
}}
|
|
/>
|
|
</div>
|
|
</div>
|
|
<SectionBottomActions align="end">
|
|
<Button
|
|
color="primary"
|
|
loading={sessionMutation.isLoading}
|
|
onClick={() => {
|
|
sessionMutation.mutate({
|
|
metadata: { ...metadata, sessionTimeout },
|
|
});
|
|
formMethods.clearErrors("apiError");
|
|
}}
|
|
disabled={
|
|
initialSessionTimeout === sessionTimeout ||
|
|
passwordMutation.isLoading ||
|
|
sessionMutation.isLoading
|
|
}>
|
|
{t("update")}
|
|
</Button>
|
|
</SectionBottomActions>
|
|
</>
|
|
</SettingsToggle>
|
|
</div>
|
|
</Form>
|
|
)}
|
|
</>
|
|
);
|
|
};
|
|
|
|
const PasswordViewWrapper = () => {
|
|
const { data: user, isLoading } = trpc.viewer.me.useQuery();
|
|
const { t } = useLocale();
|
|
if (isLoading || !user)
|
|
return <SkeletonLoader title={t("password")} description={t("password_description")} />;
|
|
|
|
return <PasswordView user={user} />;
|
|
};
|
|
|
|
PasswordViewWrapper.getLayout = getLayout;
|
|
PasswordViewWrapper.PageWrapper = PageWrapper;
|
|
|
|
export default PasswordViewWrapper;
|