import React, { SyntheticEvent, useState } from "react"; import { ErrorCode } from "@calcom/lib/auth"; import { useLocale } from "@calcom/lib/hooks/useLocale"; import showToast from "@calcom/lib/notification"; import Button from "@calcom/ui/Button"; const ChangePasswordSection = () => { const [oldPassword, setOldPassword] = useState(""); const [newPassword, setNewPassword] = useState(""); const [errorMessage, setErrorMessage] = useState(null); const [isSubmitting, setIsSubmitting] = useState(false); const { t, isLocaleReady } = useLocale(); // hold display until the locale is loaded if (!isLocaleReady) { return null; } const errorMessages: { [key: string]: string } = { [ErrorCode.IncorrectPassword]: t("current_incorrect_password"), [ErrorCode.NewPasswordMatchesOld]: t("new_password_matches_old_password"), }; async function changePasswordHandler(e: SyntheticEvent) { e.preventDefault(); if (isSubmitting) { return; } setIsSubmitting(true); setErrorMessage(null); try { const response = await fetch("/api/auth/changepw", { method: "PATCH", body: JSON.stringify({ oldPassword, newPassword }), headers: { "Content-Type": "application/json", }, }); if (response.status === 200) { setOldPassword(""); setNewPassword(""); showToast(t("password_has_been_changed"), "success"); return; } const body = await response.json(); setErrorMessage(errorMessages[body.error] || `${t("something_went_wrong")}${t("please_try_again")}`); } catch (err) { console.error(t("error_changing_password"), err); setErrorMessage(`${t("something_went_wrong")}${t("please_try_again")}`); } finally { setIsSubmitting(false); } } return ( <>

{t("change_password")}

setOldPassword(e.currentTarget.value)} name="current_password" id="current_password" required className="block w-full rounded-sm border-gray-300 text-sm" placeholder={t("your_old_password")} />
setNewPassword(e.currentTarget.value)} className="block w-full rounded-sm border-gray-300 text-sm" placeholder={t("super_secure_new_password")} />
{errorMessage &&

{errorMessage}

}
); }; export default ChangePasswordSection;