From f53520f5ef3c01c1efb58412f46231862049d7a4 Mon Sep 17 00:00:00 2001 From: Guilherme Gazzo Date: Thu, 15 Dec 2022 17:46:28 -0300 Subject: [PATCH] [FIX] Registration and Login placeholders not being used (#27558) --- packages/web-ui-registration/src/LoginForm.tsx | 6 +++++- packages/web-ui-registration/src/RegisterForm.tsx | 8 +++++++- 2 files changed, 12 insertions(+), 2 deletions(-) diff --git a/packages/web-ui-registration/src/LoginForm.tsx b/packages/web-ui-registration/src/LoginForm.tsx index 0d1b63ee1682..ec429ad8c281 100644 --- a/packages/web-ui-registration/src/LoginForm.tsx +++ b/packages/web-ui-registration/src/LoginForm.tsx @@ -45,6 +45,9 @@ export const LoginForm = ({ setLoginRoute }: { setLoginRoute: DispatchLoginRoute const login = useLoginWithPassword(); const showFormLogin = useSetting('Accounts_ShowFormLogin'); + const usernameOrEmailPlaceholder = String(useSetting('Accounts_EmailOrUsernamePlaceholder')); + const passwordPlaceholder = String(useSetting('Accounts_PasswordPlaceholder')); + const loginMutation: UseMutationResult< void, Error, @@ -110,7 +113,7 @@ export const LoginForm = ({ setLoginRoute }: { setLoginRoute: DispatchLoginRoute clearErrors(['username', 'password']); }, })} - placeholder={t('registration.component.form.emailPlaceholder')} + placeholder={usernameOrEmailPlaceholder || t('registration.component.form.emailPlaceholder')} error={ errors.username?.message || (errors.username?.type === 'required' ? t('registration.component.form.requiredField') : undefined) @@ -134,6 +137,7 @@ export const LoginForm = ({ setLoginRoute }: { setLoginRoute: DispatchLoginRoute clearErrors(['username', 'password']); }, })} + placeholder={passwordPlaceholder} error={ errors.password?.message || (errors.password?.type === 'required' ? t('registration.component.form.requiredField') : undefined) diff --git a/packages/web-ui-registration/src/RegisterForm.tsx b/packages/web-ui-registration/src/RegisterForm.tsx index ec83ba8f8a4d..62396072c6fa 100644 --- a/packages/web-ui-registration/src/RegisterForm.tsx +++ b/packages/web-ui-registration/src/RegisterForm.tsx @@ -25,6 +25,10 @@ export const LoginRegisterForm = ({ setLoginRoute }: { setLoginRoute: DispatchLo const requiresPasswordConfirmation = useSetting('Accounts_RequirePasswordConfirmation'); const manuallyApproveNewUsersRequired = useSetting('Accounts_ManuallyApproveNewUsers'); + const usernameOrEmailPlaceholder = String(useSetting('Accounts_EmailOrUsernamePlaceholder')); + const passwordPlaceholder = String(useSetting('Accounts_PasswordPlaceholder')); + const passwordConfirmationPlaceholder = String(useSetting('Accounts_ConfirmPasswordPlaceholder')); + const formLabelId = useUniqueId(); const registerUser = useRegisterMethod(); @@ -101,7 +105,7 @@ export const LoginRegisterForm = ({ setLoginRoute }: { setLoginRoute: DispatchLo {...register('email', { required: true, })} - placeholder='example@example.com' + placeholder={usernameOrEmailPlaceholder || t('registration.component.form.emailPlaceholder')} error={ errors.email && t('The_field_is_required', { @@ -155,6 +159,7 @@ export const LoginRegisterForm = ({ setLoginRoute }: { setLoginRoute: DispatchLo error={errors.password && (errors.password?.message || t('registration.component.form.requiredField'))} aria-invalid={errors.password ? 'true' : undefined} id='password' + placeholder={passwordPlaceholder} /> {errors.password && {errors.password.message}} @@ -172,6 +177,7 @@ export const LoginRegisterForm = ({ setLoginRoute }: { setLoginRoute: DispatchLo error={errors.passwordConfirmation?.type === 'validate' ? t('Invalid_confirm_pass') : undefined} aria-invalid={errors.passwordConfirmation ? 'true' : false} id='passwordConfirmation' + placeholder={passwordConfirmationPlaceholder} /> {errors.passwordConfirmation?.type === 'validate' && {t('Invalid_confirm_pass')}}