✨ Transform banTemplate to add blocking reason and client IP (#290)

* ✨ Transform banTemplate to add blocking reason

* 🍱 fix test

* 🍱 fix lint

* 🍱 fix test

* 🍱 fix lint

* 🍱 fix lint

* 🍱 add doc and fix lint

* 🍱 fix lint

* 🍱 fix lint

* 🍱 fix lint

* 🍱 fix lint

* 🍱 fix lint

* 🍱 lint html

* 🍱 fix comments + fix wicketpeeker readme

* 🍱 Give ClientIP in ban page

* 🍱 fix test

examples/custom-ban-page/README.md

@@ -45,3 +45,13 @@ To play the demo environment run:
 ```bash
 make run_custom_ban_page
 ```
+
+## Another thing to note
+In the html of the ban page, you can use:  
+- {{ .ClientIP }} to display the IP used to ban the request.  
+- {{ .RemediationReason }} that convert on runtime into why the ban page is served. It's an enum with "APPSEC", "LAPI", "TECHNICAL_ISSUE" and it is useful to help user understand why the request is blocked.  
+```
+<script>var remediation = "{{ .RemediationReason }}"</script>
+<script>var clientIp = "{{ .ClientIP }}"</script>
+```
+With the above tweak and some other js, you can customize your ban page on runtime.

examples/custom-captcha/README.md

@@ -41,7 +41,6 @@ wicketkeeper:
   ports:
     - "8080:8080"
   environment:
-    - ROOT_URL=http://localhost:8080
     - LISTEN_PORT=8080
     - REDIS_ADDR=redis:6379
     - DIFFICULTY=4
@@ -55,6 +54,10 @@ redis:
   image: redis/redis-stack-server:latest
 ```
 
+```html
+<div id="captcha" class="{{ .FrontendKey }}" data-sitekey="{{ .SiteKey }}" data-callback="captchaCallback" data-challenge-url="http://captcha.localhost:8000/v0/challenge">
+```
+
 ## Exemple navigation
 
 We can try to query normally the whoami server:

examples/custom-captcha/captcha.html

@@ -294,7 +294,7 @@
         <h1 class="text-2xl lg:text-3xl xl:text-4xl">CrowdSec Captcha</h1>
       </div>
       <form action="" method="POST" class="flex flex-col items-center space-y-1" id="captcha-form">
-        <div id="captcha" class="{{ .FrontendKey }}" data-sitekey="{{ .SiteKey }}" data-callback="captchaCallback">
+        <div id="captcha" class="{{ .FrontendKey }}" data-sitekey="{{ .SiteKey }}" data-callback="captchaCallback" data-challenge-url="http://captcha.localhost:8000/v0/challenge">
         </div>
       </form>
       <div class="flex justify-center flex-wrap">

examples/custom-captcha/docker-compose.yml

@@ -82,7 +82,6 @@ services:
     image: ghcr.io/a-ve/wicketkeeper:latest
     container_name: "wicketkeeper"
     environment:
-      - ROOT_URL=http://captcha.localhost:8000
       - LISTEN_PORT=8080
       - REDIS_ADDR=redis:6379
       - DIFFICULTY=4