feat(ui): Captcha Improvements

- Captcha is now 4-5 chars instead of 6
- Captcha now supports dark theme
- Captcha is now bigger

services/context/captcha.go

@@ -5,6 +5,7 @@ package context
 
 import (
 	"fmt"
+	"math/rand"
 	"sync"
 
 	"forgejo.org/modules/base"
@@ -55,7 +56,9 @@ func GetImageCaptcha() string {
 	imageCaptchaOnce.Do(func() {
 		captcha.SetCustomStore(&imageCaptchaStore{c: cache.GetCache()})
 	})
-	return captcha.New()
+
+	length := 4 + rand.Intn(2)
+	return captcha.NewLen(length)
 }
 
 // SetCaptchaData sets common captcha data

templates/user/auth/captcha.tmpl

@@ -1,7 +1,7 @@
 {{if .EnableCaptcha}}{{if eq .CaptchaType "image"}}
 	<div class="inline field tw-text-center">
 		<input type="hidden" name="img-captcha-id" value="{{.Captcha}}">
-		<img style="transform: scaleX(-1);background-color: white" onclick="this.src=`{{AppSubUrl}}/captcha/{{.Captcha}}.png?reload=${Date.now()}`" class="captcha-img" src="{{AppSubUrl}}/captcha/{{.Captcha}}.png" alt="{{ctx.Locale.Tr "captcha"}}">
+		<img style="transform: scaleX(-1);" onclick="this.src=`{{AppSubUrl}}/captcha/{{.Captcha}}.png?reload=${Date.now()}`" class="captcha-img" src="{{AppSubUrl}}/captcha/{{.Captcha}}.png" alt="{{ctx.Locale.Tr "captcha"}}">
 	</div>
 	<div class="required field {{if .Err_Captcha}}error{{end}}">
 		<label for="captcha">{{ctx.Locale.Tr "captcha"}}</label>

web_src/css/form.css

@@ -626,3 +626,7 @@ input:-webkit-autofill:active,
     width: 100% !important;
   }
 }
+
+.captcha-img {
+  width: min(30em, 100%);
+}

web_src/css/markup/dark.css

@@ -11,3 +11,12 @@
 .markup [href$="#dark-mode-only"] {
   display: unset;
 }
+
+/*
+  The reason we're doing this here, is because dark templates always use this file, and there's no other way to detect dark theme.
+  Third party templates may not, but that doesn't really matter, since you can't change the theme logged out.
+*/
+
+.captcha-img {
+  filter: invert();
+}