import { IdentityProvider } from "@prisma/client"; import { GetServerSidePropsContext } from "next"; import { Trans } from "next-i18next"; import { useForm } from "react-hook-form"; import { getLayout } from "@calcom/features/settings/layouts/SettingsLayout"; import { identityProviderNameMap } from "@calcom/lib/auth"; import { useLocale } from "@calcom/lib/hooks/useLocale"; import { trpc } from "@calcom/trpc/react"; import { Button, Form, Meta, PasswordField, showToast } from "@calcom/ui"; import { ssrInit } from "@server/lib/ssr"; type ChangePasswordFormValues = { oldPassword: string; newPassword: string; }; const PasswordView = () => { const { t } = useLocale(); const { data: user } = trpc.viewer.me.useQuery(); const mutation = trpc.viewer.auth.changePassword.useMutation({ onSuccess: () => { showToast(t("password_has_been_changed"), "success"); }, onError: (error) => { showToast(`${t("error_updating_password")}, ${error.message}`, "error"); }, }); const formMethods = useForm({ defaultValues: { oldPassword: "", newPassword: "", }, }); const { register, formState: { isSubmitting }, } = formMethods; const handleSubmit = (values: ChangePasswordFormValues) => { const { oldPassword, newPassword } = values; mutation.mutate({ oldPassword, newPassword }); }; return ( <> {user && user.identityProvider !== IdentityProvider.CAL ? (

{t("account_managed_by_identity_provider", { provider: identityProviderNameMap[user.identityProvider], })}

{t("account_managed_by_identity_provider_description", { provider: identityProviderNameMap[user.identityProvider], })}

) : (

Password must be at least at least 7 characters, mix of uppercase & lowercase letters, and contain at least 1 number

{/* TODO: Why is this Form not submitting? Hacky fix but works */}
)} ); }; PasswordView.getLayout = getLayout; export const getServerSideProps = async (context: GetServerSidePropsContext) => { const ssr = await ssrInit(context); return { props: { trpcState: ssr.dehydrate(), }, }; }; export default PasswordView;