diff --git a/apps/web/pages/settings/security/password.tsx b/apps/web/pages/settings/security/password.tsx index bf4d114624..37f8e217b0 100644 --- a/apps/web/pages/settings/security/password.tsx +++ b/apps/web/pages/settings/security/password.tsx @@ -1,7 +1,6 @@ import { IdentityProvider } from "@prisma/client"; import { GetServerSidePropsContext } from "next"; -import { Trans } from "next-i18next"; -import { useState } from "react"; +import { signOut, useSession } from "next-auth/react"; import { useForm } from "react-hook-form"; import { getLayout } from "@calcom/features/settings/layouts/SettingsLayout"; @@ -9,7 +8,7 @@ import { identityProviderNameMap } from "@calcom/lib/auth"; import { useLocale } from "@calcom/lib/hooks/useLocale"; import { userMetadata } from "@calcom/prisma/zod-utils"; import { trpc } from "@calcom/trpc/react"; -import { Button, Form, Meta, PasswordField, Select, SettingsToggle, showToast } from "@calcom/ui"; +import { Alert, Button, Form, Meta, PasswordField, Select, SettingsToggle, showToast } from "@calcom/ui"; import { ssrInit } from "@server/lib/ssr"; @@ -17,9 +16,11 @@ type ChangePasswordSessionFormValues = { oldPassword: string; newPassword: string; sessionTimeout?: number; + apiError: string; }; const PasswordView = () => { + const { data } = useSession(); const { t } = useLocale(); const utils = trpc.useContext(); const { data: user } = trpc.viewer.me.useQuery(); @@ -58,9 +59,24 @@ const PasswordView = () => { 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")}, ${error.message}`, "error"); + showToast(`${t("error_updating_password")}, ${t(error.message)}`, "error"); + + formMethods.setError("apiError", { + message: t(error.message), + type: "custom", + }); }, }); @@ -91,6 +107,8 @@ const PasswordView = () => { const isDisabled = formMethods.formState.isSubmitting || !formMethods.formState.isDirty; + const passwordMinLength = data?.user.role === "USER" ? 7 : 15; + const isUser = data?.user.role === "USER"; return ( <> @@ -111,19 +129,34 @@ const PasswordView = () => { ) : (
-
-
+ {formMethods.formState.errors.apiError && ( +
+ +
+ )} + +
+
-
- +
+

- - Password must be at least at least 7 characters, mix of uppercase & lowercase letters, and - contain at least 1 number. - + {t("invalid_password_hint", { passwordLength: passwordMinLength })}

(props: { // errors exist, not custom ones, just show them as is if (fieldErrors) { return ( -
- - <>{fieldErrors.message} +
+
+ +
+

{fieldErrors.message}

); }