Fixes few i18n related bugs on change password (#4755)

* Fixes few i18n related bugs

* Use PasswordField

apps/web/pages/v2/settings/security/password.tsx

@@ -7,7 +7,7 @@ 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 { Form, PasswordField } from "@calcom/ui/v2/core/form/fields";
 import { getLayout } from "@calcom/ui/v2/core/layouts/SettingsLayout";
 import showToast from "@calcom/ui/v2/core/notifications";
 
@@ -48,7 +48,7 @@ const PasswordView = () => {
 
   return (
     <>
-      <Meta title="Password" description="Manage settings for your account passwords" />
+      <Meta title={t("password")} description={t("password_description")} />
       {user && user.identityProvider !== IdentityProvider.CAL ? (
         <div>
           <div className="mt-6">
@@ -65,22 +65,17 @@ const PasswordView = () => {
           </p>
         </div>
       ) : (
-        <Form<ChangePasswordFormValues> form={formMethods} handleSubmit={handleSubmit}>
+        <Form 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" />
+              <PasswordField {...register("oldPassword")} label={t("old_password")} />
             </div>
             <div className="flex-grow">
-              <TextField
-                {...register("newPassword")}
-                label={t("new_password")}
-                type="password"
-                placeholder={t("secure_password")}
-              />
+              <PasswordField {...register("newPassword")} label={t("new_password")} />
             </div>
           </div>
           <p className="text-sm text-gray-600">
-            <Trans i18nKey="valid_password">
+            <Trans i18nKey="invalid_password_hint">
               Password must be at least at least 7 characters, mix of uppercase & lowercase letters, and
               contain at least 1 number
             </Trans>
@@ -89,8 +84,8 @@ const PasswordView = () => {
           <Button
             color="primary"
             className="mt-8"
-            disabled={isSubmitting || mutation.isLoading}
-            onClick={() => handleSubmit(formMethods.getValues())}>
+            type="submit"
+            disabled={isSubmitting || mutation.isLoading}>
             {t("update")}
           </Button>
         </Form>

packages/ui/v2/core/form/fields.tsx

@@ -166,14 +166,14 @@ type InputFieldProps = {
 
 const InputField = forwardRef<HTMLInputElement, InputFieldProps>(function InputField(props, ref) {
   const id = useId();
-  const { t: _t, isLocaleReady } = useLocale();
+  const { t: _t, isLocaleReady, i18n } = useLocale();
   const t = props.t || _t;
   const name = props.name || "";
   const {
     label = t(name),
     labelProps,
     labelClassName,
-    placeholder = isLocaleReady ? t(name + "_placeholder") : "",
+    placeholder = isLocaleReady && i18n.exists(name + "_placeholder") ? t(name + "_placeholder") : "",
     className,
     addOnLeading,
     addOnSuffix,
@@ -187,12 +187,6 @@ const InputField = forwardRef<HTMLInputElement, InputFieldProps>(function InputF
     ...passThrough
   } = props;
 
-  const translatedPlaceholder = isLocaleReady
-    ? !placeholder?.endsWith("_placeholder")
-      ? placeholder
-      : ""
-    : "";
-
   return (
     <div className={classNames(containerClassName)}>
       {!!name && (
@@ -228,7 +222,7 @@ const InputField = forwardRef<HTMLInputElement, InputFieldProps>(function InputF
           </div>
           <Input
             id={id}
-            placeholder={translatedPlaceholder}
+            placeholder={placeholder}
             className={classNames(
               className,
               addOnLeading && "rounded-l-none",
@@ -240,7 +234,7 @@ const InputField = forwardRef<HTMLInputElement, InputFieldProps>(function InputF
           />
         </div>
       ) : (
-        <Input id={id} placeholder={translatedPlaceholder} className={className} {...passThrough} ref={ref} />
+        <Input id={id} placeholder={placeholder} className={className} {...passThrough} ref={ref} />
       )}
       <HintsOrErrors hintErrors={hintErrors} fieldName={name} t={t} />
       {hint && <div className="text-gray mt-2 flex items-center text-sm text-gray-700">{hint}</div>}