Fix #1930 add option to autodetect dark mode in reCAPTCHA

This commit is contained in:
Kijin Sung 2022-04-25 02:02:29 +09:00
parent 8d89f256e6
commit ec18bf34bd
5 changed files with 10 additions and 3 deletions

View file

@ -46,6 +46,7 @@ $lang->msg_faillist = '<br />Error (already blocked)<br /> %s ';
$lang->use_captcha = 'Use CAPTCHA';
$lang->about_captcha_position = 'The skin file for your login form, write form, etc. should indicate the CAPTCHA position with the following code: <code>{$captcha}</code><br />The CAPTCHA may be inserted in an unexpected position if the form does not contain the code.';
$lang->recaptcha_theme = 'Color Theme';
$lang->recaptcha_theme_auto = 'Auto';
$lang->recaptcha_theme_light = 'Light';
$lang->recaptcha_theme_dark = 'Dark';
$lang->recaptcha_size = 'Display Size';

View file

@ -46,6 +46,7 @@ $lang->msg_faillist = '<br />실패 (이미 차단되어 있습니다)<br /> %s
$lang->use_captcha = '캡챠 사용';
$lang->about_captcha_position = '로그인 폼, 글쓰기 폼 등의 스킨에서 캡챠를 표시할 위치에 <code>{$captcha}</code> 코드가 들어 있어야 합니다.<br />코드가 없는 경우 임의의 위치에 캡챠가 삽입되므로 디자인이 틀어질 수 있습니다.';
$lang->recaptcha_theme = '색상 테마';
$lang->recaptcha_theme_auto = '자동';
$lang->recaptcha_theme_light = '밝은 색상';
$lang->recaptcha_theme_dark = '어두운 색상';
$lang->recaptcha_size = '캡챠 크기';
@ -64,4 +65,4 @@ $lang->recaptcha_target_every_time = '매번 사용';
$lang->msg_recaptcha_connection_error = 'reCAPTCHA 스팸방지 서버에 접속하는 도중 오류가 발생했습니다.';
$lang->msg_recaptcha_server_error = 'reCAPTCHA 스팸방지 서버와 통신하는 도중 오류가 발생했습니다.';
$lang->msg_recaptcha_invalid_response = 'reCAPTCHA 스팸방지 기능을 체크해 주십시오.';
$lang->msg_recaptcha_keys_not_set = 'reCAPTCHA Site Key 및 Secret Key를 입력하여 주십시오.';
$lang->msg_recaptcha_keys_not_set = 'reCAPTCHA Site Key 및 Secret Key를 입력하여 주십시오.';

View file

@ -56,7 +56,7 @@ class spamfilter_reCAPTCHA
Context::loadFile(array('./modules/spamfilter/tpl/js/recaptcha.js', 'body'));
Context::addHtmlFooter('<script src="https://www.google.com/recaptcha/api.js?render=explicit&amp;onload=reCaptchaCallback" async defer></script>');
$html = '<div id="recaptcha-config" data-sitekey="%s" data-theme="%s" data-size="%s" data-targets="%s"></div>';
$html = sprintf($html, escape(self::$config->site_key), self::$config->theme ?: 'light', self::$config->size ?: 'normal', implode(',', array_keys($this->_target_actions)));
$html = sprintf($html, escape(self::$config->site_key), self::$config->theme ?: 'auto', self::$config->size ?: 'normal', implode(',', array_keys($this->_target_actions)));
Context::addHtmlFooter($html);
}
}

View file

@ -34,6 +34,7 @@
<label class="x_control-label" for="captcha_theme">{$lang->recaptcha_theme}</label>
<div class="x_controls">
<select id="captcha_theme" name="captcha_theme">
<option value="auto" selected="selected"|cond="$config->captcha->theme === 'auto'">{$lang->recaptcha_theme_auto}</option>
<option value="light" selected="selected"|cond="$config->captcha->theme === 'light'">{$lang->recaptcha_theme_light}</option>
<option value="dark" selected="selected"|cond="$config->captcha->theme === 'dark'">{$lang->recaptcha_theme_dark}</option>
</select>

View file

@ -47,10 +47,14 @@ function reCaptchaCallback() {
recaptcha_instances.each(function() {
var instance = $(this);
var theme = recaptcha_config.data("theme");
if (theme === 'auto') {
theme = getColorScheme();
}
grecaptcha.render(instance.attr("id"), {
sitekey: recaptcha_config.data("sitekey"),
size: recaptcha_config.data("size"),
theme: recaptcha_config.data("theme")
theme: theme
});
});
}