Does a way exist to modify the captcha_widgets captcha_refresh_link text? The property corresponding to this is protected and I'm not sure what approach I can take to override it. I could do something wonky through JavaScript, but I'd prefer to avoid that if possible.

To be clear, the text I'm referring to is as follows:

"Get new captcha!"

I'd like to change that to something else. Can that be done either in TWIG or else via some sort of preprocess function?

CommentFileSizeAuthor
#8 captcha.png47.4 KBdravenk

Issue fork captcha-3301409

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

Comments

Wolf_22 created an issue. See original summary.

wolf_22’s picture

Status: Active » Closed (works as designed)

Think I figured it out:

1.) Create an overrides module (i.e. - whatever.module file).

2.) Inside < YOUR MODULE >_captcha_alter($form, $form_state){}, include the following code:

$form_id = $form['#id'];

$uri = Link::fromTextAndUrl(t('THIS IS THE NEW REFRESH TEXT!'),
	new Url('image_captcha.refresh',
		['form_id' => $form_id],
		['attributes' => ['class' => ['reload-captcha']]]
	)
);
    
$element['captcha_widgets']['captcha_refresh']['#captcha_refresh_link'] = [
	'#theme' => 'image_captcha_refresh',
	'#captcha_refresh_link' => $uri,
];  
  
$form['captcha']['captcha_widgets']['captcha_refresh']['#captcha_refresh_link'] = $element['captcha_widgets']['captcha_refresh']['#captcha_refresh_link'];

return $form;

3.) Clear the cache and refresh a page that has an image captcha. The new text should be visible now.

Hope this helps.

dravenk’s picture

Category: Support request » Feature request
Status: Closed (works as designed) » Needs work

I created a custom form and added the image captcha. Unfortunately, my attempts to change the text of the Refresh button following the comment above were unsuccessful. Anyway, thanks very much @Wolf_22 for sharing. My customer asked me to modify Captch element titles and descriptions, etc. I think there should be an easy way to change the text content of the element. For example, the Challenge Description in the settings.

dravenk’s picture

Title: Change the captcha_refresh_link text? » The text of image_captcha can be modified with settings.

dravenk’s picture

Status: Needs work » Needs review
wolf_22’s picture

dravenk, make sure you included all the CAPTCHA elements inside the markup that the overall form requires as many elements have to be used within the TWIG file to reach functional parity. (And obviously, clear the cache if you make any changes to your override file before testing things.)

Here's my complete TWIG file that I made for my CAPTCHA implementation, which I plopped into my theme's "templates" folder at /sites/all/themes//templates/user-login-form.html.twig:

{#{kint(form)}#}
<section id="user-login">
	<div class="login-text">                              
        <form role="form" id="sub-form">
			<div class="form-group">
				{{ form.name }}
			</div>
            <div id="password" class="form-group">
				{{ form.pass }}
				<a id="forgotten_password" href="{{ base_url }}/user/password" alt="Request new password via email">Forgot password?</a>
			</div>
			<div id="captcha" class="captcha">						
				{{form.captcha.captcha_widgets.captcha_response|without('#title')}}
				<div id="captcha_code">{{form.captcha.captcha_widgets.captcha_image}}{{form.captcha.captcha_widgets.captcha_refresh}}</div>
			</div>

            {{ form.form_build_id }}
            {{ form.form_id }}
			{{form.captcha.captcha_sid}}
			{{form.captcha.captcha_token}}

            <div class="login-button">
				{{ form.actions }}
			</div>

			<div class="hide">
				{{ 
					form.captcha|without('#type','#captcha_type','#weight','#input','#process','#default_value','#captcha_admin_mode','#captcha_validate','#value_callback','#defaults_loaded','#tree','#parents','#array_parents','#processed','#required','#attributes','#title_display','#description_display','#errors','#id','#name','#value','#attached','captcha_sid','captcha_token','captcha_widgets','#element_validate','#theme','#sorted') 
				}}
			</div>

		</form>
	</div>        
</section>

The biggest pain in all this was figuring out which TWIG elements / objects I needed to reference inside this override file. I can't even remember how I learned which ones I needed to use, but what I have here works for me. Hope it helps.

dravenk’s picture

StatusFileSize
new47.4 KB

Hi,@Wolf_22. You just need to apply the patch and goto /admin/config/people/captcha/image_captcha, then you can see the settings form.

anybody’s picture

Title: The text of image_captcha can be modified with settings. » Make image_captcha reload link configurable
Version: 8.x-1.4 » 8.x-1.x-dev
anybody’s picture

Title: Make image_captcha reload link configurable » Make image_captcha reload link display configurable
anybody’s picture

Looks very close to #3250708: Allow altering of CAPTCHA from other modules. Please note, that this is specific to the image captcha module, so perhaps that submodule could also be improved to use a twig file instead of raw form markup, as we've done it for CAPTCHA in #3314766: [2.x] Improve the CAPTCHA form markup and use twig files for more flexibility, where possible. But that should be a separate issue then, please.

anybody’s picture

grevil’s picture

Version: 8.x-1.x-dev » 2.x-dev

There is no further development inside 8.x-1.x, setting this issue to 2.x.

grevil’s picture

Tested and reviewed! Please have a final look at the Form text! :)

grevil’s picture

anybody’s picture

Status: Needs review » Reviewed & tested by the community

Nice @Grevil!

RTBC in general, just two points:
1. We should also have 2 tests for this: For the general functionality (a) detecting the text and clicking the link with the expected AJAX HTTP Status result and (b) checking the text change)
2. What do you think about "I can not read this" as default label?

You may decide to solve this here or as follow-up.

grevil’s picture

Status: Reviewed & tested by the community » Fixed

@Anybody:

1. Let's create a minor follow up issue for this.
2. I think "Reload Captcha" is clearer, with a link text of "I can not read this", I wouldn't expect the captcha to reload as a user.

  • Grevil committed d3ccb67 on 2.x authored by dravenk
    Issue #3301409: The text of image_captcha can be modified with settings.
    
anybody’s picture

I think "Reload Captcha" is clearer, with a link text of "I can not read this", I wouldn't expect the captcha to reload as a user.

better the other way around then. Or just leave as - is. You decide. Thanks! :)

designerada’s picture

Hi,
I was able to accomplish this with CSS:

.reload-captcha {
    position: relative;
    visibility: hidden; // Hide default text
}

.reload-captcha::after {
    content: "Get a new code"; // Set new text - link still works!
    position: absolute;
    top: 0;
    left: 0;
    visibility: visible;
}

This solution isn't accessible for screen readers, but image captchas aren't accessible anyway, and I believe an audio option is in the works.

anybody’s picture

Thanks @designerada,

this shows the text should be configurable in the Image Captcha settings. So we should add that @Grevil. :) Just as you wrote.

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.