Mark up translation for ChangePasswordForm (#75668)

Co-authored-by: Ashley Harrison <ashley.harrison@grafana.com>

public/app/features/profile/ChangePasswordForm.tsx

@@ -3,6 +3,7 @@ import React from 'react';
 
 import { Button, Field, Form, HorizontalGroup, LinkButton } from '@grafana/ui';
 import config from 'app/core/config';
+import { t, Trans } from 'app/core/internationalization';
 import { UserDTO } from 'app/types';
 
 import { PasswordField } from '../../core/components/PasswordField/PasswordField';
@@ -20,10 +21,20 @@ export const ChangePasswordForm = ({ user, onChangePassword, isSaving }: Props)
   const authSource = user.authLabels?.length && user.authLabels[0];
 
   if (authSource === 'LDAP' || authSource === 'Auth Proxy') {
-    return <p>You cannot change password when signed in with LDAP or auth proxy.</p>;
+    return (
+      <p>
+        <Trans i18nKey="profile.change-password.ldap-auth-proxy-message">
+          You cannot change password when signed in with LDAP or auth proxy.
+        </Trans>
+      </p>
+    );
   }
   if (authSource && disableLoginForm) {
-    return <p>Password cannot be changed here.</p>;
+    return (
+      <p>
+        <Trans i18nKey="profile.change-password.cannot-change-password-message">Password cannot be changed here.</Trans>
+      </p>
+    );
   }
 
   return (
@@ -36,44 +47,70 @@ export const ChangePasswordForm = ({ user, onChangePassword, isSaving }: Props)
         {({ register, errors, getValues }) => {
           return (
             <>
-              <Field label="Old password" invalid={!!errors.oldPassword} error={errors?.oldPassword?.message}>
+              <Field
+                label={t('profile.change-password.old-password-label', 'Old password')}
+                invalid={!!errors.oldPassword}
+                error={errors?.oldPassword?.message}
+              >
                 <PasswordField
                   id="current-password"
                   autoComplete="current-password"
-                  {...register('oldPassword', { required: 'Old password is required' })}
+                  {...register('oldPassword', {
+                    required: t('profile.change-password.old-password-required', 'Old password is required'),
+                  })}
                 />
               </Field>
 
-              <Field label="New password" invalid={!!errors.newPassword} error={errors?.newPassword?.message}>
+              <Field
+                label={t('profile.change-password.new-password-label', 'New password')}
+                invalid={!!errors.newPassword}
+                error={errors?.newPassword?.message}
+              >
                 <PasswordField
                   id="new-password"
                   autoComplete="new-password"
                   {...register('newPassword', {
-                    required: 'New password is required',
+                    required: t('profile.change-password.new-password-required', 'New password is required'),
                     validate: {
-                      confirm: (v) => v === getValues().confirmNew || 'Passwords must match',
-                      old: (v) => v !== getValues().oldPassword || `New password can't be the same as the old one.`,
+                      confirm: (v) =>
+                        v === getValues().confirmNew ||
+                        t('profile.change-password.passwords-must-match', 'Passwords must match'),
+                      old: (v) =>
+                        v !== getValues().oldPassword ||
+                        t(
+                          'profile.change-password.new-password-same-as-old',
+                          "New password can't be the same as the old one."
+                        ),
                     },
                   })}
                 />
               </Field>
 
-              <Field label="Confirm password" invalid={!!errors.confirmNew} error={errors?.confirmNew?.message}>
+              <Field
+                label={t('profile.change-password.confirm-password-label', 'Confirm password')}
+                invalid={!!errors.confirmNew}
+                error={errors?.confirmNew?.message}
+              >
                 <PasswordField
                   id="confirm-new-password"
                   autoComplete="new-password"
                   {...register('confirmNew', {
-                    required: 'New password confirmation is required',
-                    validate: (v) => v === getValues().newPassword || 'Passwords must match',
+                    required: t(
+                      'profile.change-password.confirm-password-required',
+                      'New password confirmation is required'
+                    ),
+                    validate: (v) =>
+                      v === getValues().newPassword ||
+                      t('profile.change-password.passwords-must-match', 'Passwords must match'),
                   })}
                 />
               </Field>
               <HorizontalGroup>
                 <Button variant="primary" disabled={isSaving} type="submit">
-                  Change Password
+                  <Trans i18nKey="profile.change-password.change-password-button">Change Password</Trans>
                 </Button>
                 <LinkButton variant="secondary" href={`${config.appSubUrl}/profile`} fill="outline">
-                  Cancel
+                  <Trans i18nKey="profile.change-password.cancel-button">Cancel</Trans>
                 </LinkButton>
               </HorizontalGroup>
             </>

public/locales/de-DE/grafana.json

@@ -681,6 +681,22 @@
       "title": ""
     }
   },
+  "profile": {
+    "change-password": {
+      "cancel-button": "",
+      "cannot-change-password-message": "",
+      "change-password-button": "",
+      "confirm-password-label": "",
+      "confirm-password-required": "",
+      "ldap-auth-proxy-message": "",
+      "new-password-label": "",
+      "new-password-required": "",
+      "new-password-same-as-old": "",
+      "old-password-label": "",
+      "old-password-required": "",
+      "passwords-must-match": ""
+    }
+  },
   "refresh-picker": {
     "aria-label": {
       "choose-interval": "Automatische Aktualisierung ausgeschaltet. Aktualisierungszeitintervall auswählen",

public/locales/en-US/grafana.json

@@ -681,6 +681,22 @@
       "title": "There are no playlists created yet"
     }
   },
+  "profile": {
+    "change-password": {
+      "cancel-button": "Cancel",
+      "cannot-change-password-message": "Password cannot be changed here.",
+      "change-password-button": "Change Password",
+      "confirm-password-label": "Confirm password",
+      "confirm-password-required": "New password confirmation is required",
+      "ldap-auth-proxy-message": "You cannot change password when signed in with LDAP or auth proxy.",
+      "new-password-label": "New password",
+      "new-password-required": "New password is required",
+      "new-password-same-as-old": "New password can't be the same as the old one.",
+      "old-password-label": "Old password",
+      "old-password-required": "Old password is required",
+      "passwords-must-match": "Passwords must match"
+    }
+  },
   "refresh-picker": {
     "aria-label": {
       "choose-interval": "Auto refresh turned off. Choose refresh time interval",

public/locales/es-ES/grafana.json

@@ -686,6 +686,22 @@
       "title": ""
     }
   },
+  "profile": {
+    "change-password": {
+      "cancel-button": "",
+      "cannot-change-password-message": "",
+      "change-password-button": "",
+      "confirm-password-label": "",
+      "confirm-password-required": "",
+      "ldap-auth-proxy-message": "",
+      "new-password-label": "",
+      "new-password-required": "",
+      "new-password-same-as-old": "",
+      "old-password-label": "",
+      "old-password-required": "",
+      "passwords-must-match": ""
+    }
+  },
   "refresh-picker": {
     "aria-label": {
       "choose-interval": "Actualización automática desactivada. Elija un intervalo de tiempo de actualización",

public/locales/fr-FR/grafana.json

@@ -686,6 +686,22 @@
       "title": ""
     }
   },
+  "profile": {
+    "change-password": {
+      "cancel-button": "",
+      "cannot-change-password-message": "",
+      "change-password-button": "",
+      "confirm-password-label": "",
+      "confirm-password-required": "",
+      "ldap-auth-proxy-message": "",
+      "new-password-label": "",
+      "new-password-required": "",
+      "new-password-same-as-old": "",
+      "old-password-label": "",
+      "old-password-required": "",
+      "passwords-must-match": ""
+    }
+  },
   "refresh-picker": {
     "aria-label": {
       "choose-interval": "Actualisation automatique désactivée. Choisir un intervalle de temps d'actualisation",

public/locales/pseudo-LOCALE/grafana.json

@@ -681,6 +681,22 @@
       "title": "Ŧĥęřę äřę ʼnő pľäyľįşŧş čřęäŧęđ yęŧ"
     }
   },
+  "profile": {
+    "change-password": {
+      "cancel-button": "Cäʼnčęľ",
+      "cannot-change-password-message": "Päşşŵőřđ čäʼnʼnőŧ þę čĥäʼnģęđ ĥęřę.",
+      "change-password-button": "Cĥäʼnģę Päşşŵőřđ",
+      "confirm-password-label": "Cőʼnƒįřm päşşŵőřđ",
+      "confirm-password-required": "Ńęŵ päşşŵőřđ čőʼnƒįřmäŧįőʼn įş řęqūįřęđ",
+      "ldap-auth-proxy-message": "Ÿőū čäʼnʼnőŧ čĥäʼnģę päşşŵőřđ ŵĥęʼn şįģʼnęđ įʼn ŵįŧĥ ĿĐÅP őř äūŧĥ přőχy.",
+      "new-password-label": "Ńęŵ päşşŵőřđ",
+      "new-password-required": "Ńęŵ päşşŵőřđ įş řęqūįřęđ",
+      "new-password-same-as-old": "Ńęŵ päşşŵőřđ čäʼn'ŧ þę ŧĥę şämę äş ŧĥę őľđ őʼnę.",
+      "old-password-label": "Øľđ päşşŵőřđ",
+      "old-password-required": "Øľđ päşşŵőřđ įş řęqūįřęđ",
+      "passwords-must-match": "Päşşŵőřđş mūşŧ mäŧčĥ"
+    }
+  },
   "refresh-picker": {
     "aria-label": {
       "choose-interval": "Åūŧő řęƒřęşĥ ŧūřʼnęđ őƒƒ. Cĥőőşę řęƒřęşĥ ŧįmę įʼnŧęřväľ",

public/locales/zh-Hans/grafana.json

@@ -676,6 +676,22 @@
       "title": ""
     }
   },
+  "profile": {
+    "change-password": {
+      "cancel-button": "",
+      "cannot-change-password-message": "",
+      "change-password-button": "",
+      "confirm-password-label": "",
+      "confirm-password-required": "",
+      "ldap-auth-proxy-message": "",
+      "new-password-label": "",
+      "new-password-required": "",
+      "new-password-same-as-old": "",
+      "old-password-label": "",
+      "old-password-required": "",
+      "passwords-must-match": ""
+    }
+  },
   "refresh-picker": {
     "aria-label": {
       "choose-interval": "自动刷新已关闭。选择刷新时间间隔",