Skip to content

Commit 59186ab

Browse files
ByLCYByLCY
committed
Added dark mode for hcaptcha, recaptcha and cloudflare turnstile
Signed-off-by: ByLCY <[email protected]>
1 parent 8c63433 commit 59186ab

File tree

5 files changed

+61
-11
lines changed

5 files changed

+61
-11
lines changed

‎templates/base/footer.tmpl

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -16,13 +16,13 @@
1616
<!-- Third-party libraries -->
1717
{{if .EnableCaptcha}}
1818
{{if eq .CaptchaType "recaptcha"}}
19-
<script src='{{URLJoin .RecaptchaURL "api.js"}}' async></script>
19+
<script src='{{URLJoin .RecaptchaURL "api.js"}}'></script>
2020
{{end}}
2121
{{if eq .CaptchaType "hcaptcha"}}
22-
<script src='https://hcaptcha.com/1/api.js' async></script>
22+
<script src='https://hcaptcha.com/1/api.js'></script>
2323
{{end}}
2424
{{if eq .CaptchaType "cfturnstile"}}
25-
<script src='https://challenges.cloudflare.com/turnstile/v0/api.js' async defer></script>
25+
<script src='https://challenges.cloudflare.com/turnstile/v0/api.js'></script>
2626
{{end}}
2727
{{end}}
2828
<script src="{{AssetUrlPrefix}}/js/index.js?v={{AssetVersion}}" onerror="alert('Failed to load asset files from ' + this.src + ', please make sure the asset files can be accessed and the ROOT_URL setting in app.ini is correct.')"></script>

‎templates/user/auth/captcha.tmpl

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -9,20 +9,20 @@
99
</div>
1010
{{else if eq .CaptchaType "recaptcha"}}
1111
<div class="inline field required">
12-
<div class="g-recaptcha" data-sitekey="{{.RecaptchaSitekey}}"></div>
12+
<div id="captcha" captcha-type="g-recaptcha" class="g-recaptcha-style" data-sitekey="{{.RecaptchaSitekey}}"></div>
1313
</div>
1414
{{else if eq .CaptchaType "hcaptcha"}}
1515
<div class="inline field required">
16-
<div class="h-captcha" data-sitekey="{{.HcaptchaSitekey}}"></div>
16+
<div id="captcha" captcha-type="h-captcha" class="h-captcha-style" data-sitekey="{{.HcaptchaSitekey}}"></div>
1717
</div>
1818
{{else if eq .CaptchaType "mcaptcha"}}
1919
<div class="inline field df ac db-small captcha-field">
2020
<span>{{.locale.Tr "captcha"}}</span>
2121
<div class="border-secondary w-100-small" id="mcaptcha__widget-container" style="width: 50%; height: 5em"></div>
22-
<div class="m-captcha" data-sitekey="{{.McaptchaSitekey}}" data-instance-url="{{.McaptchaURL}}"></div>
22+
<div id="captcha" class="m-captcha" data-sitekey="{{.McaptchaSitekey}}" data-instance-url="{{.McaptchaURL}}"></div>
2323
</div>
2424
{{else if eq .CaptchaType "cfturnstile"}}
2525
<div class="inline field captcha-field tc">
26-
<div class="cf-turnstile" data-sitekey="{{.CfTurnstileSitekey}}"></div>
26+
<div id="captcha" captcha-type="cf-turnstile" data-sitekey="{{.CfTurnstileSitekey}}"></div>
2727
</div>
2828
{{end}}{{end}}

‎web_src/js/features/captcha.js

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
import {isDarkTheme} from '../utils.js';
2+
3+
export function initCaptcha() {
4+
const captchaEl = document.querySelector('#captcha');
5+
if (!captchaEl) return;
6+
7+
const siteKey = captchaEl.getAttribute('data-sitekey');
8+
const isDark = isDarkTheme();
9+
10+
const params = {
11+
sitekey: siteKey,
12+
theme: isDark ? 'dark' : 'light'
13+
};
14+
15+
switch (captchaEl.getAttribute('captcha-type')) {
16+
case 'g-recaptcha': {
17+
// eslint-disable-next-line no-undef
18+
if (grecaptcha) {
19+
// eslint-disable-next-line no-undef
20+
grecaptcha.ready(() => {
21+
// eslint-disable-next-line no-undef
22+
grecaptcha.render(captchaEl, params);
23+
});
24+
}
25+
break;
26+
}
27+
case 'cf-turnstile': {
28+
// eslint-disable-next-line no-undef
29+
if (turnstile) {
30+
// eslint-disable-next-line no-undef
31+
turnstile.render(captchaEl, params);
32+
}
33+
break;
34+
}
35+
case 'h-captcha': {
36+
// eslint-disable-next-line no-undef
37+
hcaptcha.render(captchaEl, params);
38+
break;
39+
}
40+
default:
41+
}
42+
}

‎web_src/js/index.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -90,6 +90,7 @@ import {initRepoCommentForm, initRepository} from './features/repo-legacy.js';
9090
import {initFormattingReplacements} from './features/formatting.js';
9191
import {initMcaptcha} from './features/mcaptcha.js';
9292
import {initCopyContent} from './features/copycontent.js';
93+
import {initCaptcha} from './features/captcha.js';
9394

9495
// Run time-critical code as soon as possible. This is safe to do because this
9596
// script appears at the end of <body> and rendered HTML is accessible at that point.
@@ -190,6 +191,7 @@ $(document).ready(() => {
190191

191192
initCommitStatuses();
192193
initMcaptcha();
194+
initCaptcha();
193195

194196
initUserAuthLinkAccountView();
195197
initUserAuthOauth2();

‎web_src/less/_form.less

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -220,18 +220,24 @@ textarea:focus,
220220
}
221221

222222
@media @mediaMdAndUp {
223-
.g-recaptcha,
224-
.h-captcha {
223+
.g-recaptcha-style,
224+
.h-captcha-style {
225225
margin: 0 auto !important;
226226
width: 304px;
227227
padding-left: 30px;
228+
229+
iframe {
230+
border-radius: 5px !important;
231+
width: 302px !important;
232+
height: 76px !important;
233+
}
228234
}
229235
}
230236

231237
@media (max-height: 575px) {
232238
#rc-imageselect,
233-
.g-recaptcha,
234-
.h-captcha {
239+
.g-recaptcha-style,
240+
.h-captcha-style {
235241
transform: scale(.77);
236242
transform-origin: 0 0;
237243
}

0 commit comments

Comments
 (0)