105 lines
3.4 KiB
TypeScript
105 lines
3.4 KiB
TypeScript
import { IdentityProvider } from "@prisma/client";
|
|
import { Trans } from "next-i18next";
|
|
import { useForm } from "react-hook-form";
|
|
|
|
import { identityProviderNameMap } from "@calcom/lib/auth";
|
|
import { useLocale } from "@calcom/lib/hooks/useLocale";
|
|
import { trpc } from "@calcom/trpc/react";
|
|
import Button from "@calcom/ui/v2/core/Button";
|
|
import Meta from "@calcom/ui/v2/core/Meta";
|
|
import { Form, TextField } from "@calcom/ui/v2/core/form/fields";
|
|
import { getLayout } from "@calcom/ui/v2/core/layouts/SettingsLayout";
|
|
import showToast from "@calcom/ui/v2/core/notifications";
|
|
|
|
type ChangePasswordFormValues = {
|
|
oldPassword: string;
|
|
newPassword: string;
|
|
};
|
|
|
|
const PasswordView = () => {
|
|
const { t } = useLocale();
|
|
const { data: user } = trpc.useQuery(["viewer.me"]);
|
|
|
|
const mutation = trpc.useMutation("viewer.auth.changePassword", {
|
|
onSuccess: () => {
|
|
showToast(t("password_has_been_changed"), "success");
|
|
},
|
|
onError: (error) => {
|
|
showToast(`${t("error_updating_password")}, ${error.message}`, "error");
|
|
},
|
|
});
|
|
|
|
const formMethods = useForm<ChangePasswordFormValues>({
|
|
defaultValues: {
|
|
oldPassword: "",
|
|
newPassword: "",
|
|
},
|
|
});
|
|
|
|
const {
|
|
register,
|
|
formState: { isSubmitting },
|
|
} = formMethods;
|
|
|
|
const handleSubmit = (values: ChangePasswordFormValues) => {
|
|
const { oldPassword, newPassword } = values;
|
|
mutation.mutate({ oldPassword, newPassword });
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<Meta title="Password" description="Manage settings for your account passwords" />
|
|
{user && user.identityProvider !== IdentityProvider.CAL ? (
|
|
<div>
|
|
<div className="mt-6">
|
|
<h2 className="font-cal text-lg font-medium leading-6 text-gray-900">
|
|
{t("account_managed_by_identity_provider", {
|
|
provider: identityProviderNameMap[user.identityProvider],
|
|
})}
|
|
</h2>
|
|
</div>
|
|
<p className="mt-1 text-sm text-gray-500">
|
|
{t("account_managed_by_identity_provider_description", {
|
|
provider: identityProviderNameMap[user.identityProvider],
|
|
})}
|
|
</p>
|
|
</div>
|
|
) : (
|
|
<Form<ChangePasswordFormValues> form={formMethods} handleSubmit={handleSubmit}>
|
|
<div className="max-w-[38rem] sm:flex sm:space-x-4">
|
|
<div className="flex-grow">
|
|
<TextField {...register("oldPassword")} label={t("old_password")} type="password" />
|
|
</div>
|
|
<div className="flex-grow">
|
|
<TextField
|
|
{...register("newPassword")}
|
|
label={t("new_password")}
|
|
type="password"
|
|
placeholder={t("secure_password")}
|
|
/>
|
|
</div>
|
|
</div>
|
|
<p className="text-sm text-gray-600">
|
|
<Trans i18nKey="valid_password">
|
|
Password must be at least at least 7 characters, mix of uppercase & lowercase letters, and
|
|
contain at least 1 number
|
|
</Trans>
|
|
</p>
|
|
{/* TODO: Why is this Form not submitting? Hacky fix but works */}
|
|
<Button
|
|
color="primary"
|
|
className="mt-8"
|
|
disabled={isSubmitting || mutation.isLoading}
|
|
onClick={() => handleSubmit(formMethods.getValues())}>
|
|
{t("update")}
|
|
</Button>
|
|
</Form>
|
|
)}
|
|
</>
|
|
);
|
|
};
|
|
|
|
PasswordView.getLayout = getLayout;
|
|
|
|
export default PasswordView;
|