feat(walls): Use twig for ban and captcha walls templating

Author: julienloizelet

.github/workflows/test-suite.yml

@@ -33,7 +33,7 @@ jobs:
 
       - name: Install DDEV
         env:
-          DDEV_VERSION: v1.20.0
+          DDEV_VERSION: v1.21.1
         run: |
           # @see https://ddev.readthedocs.io/en/stable/#installationupgrade-script-linux-and-macos-armarm64-and-amd64-architectures
           sudo apt-get -qq update

composer.json

@@ -39,9 +39,10 @@
         }
     ],
     "require": {
-        "php": "^7.2 || ^8.0",
+        "php": ">=7.2.5",
         "symfony/config": "^4.4.27 || ^5.2 || ^6.0",
         "symfony/cache": "^5.4.11 || ^6.0.11",
+        "twig/twig": "^3.4.2",
         "monolog/monolog": "^1.17 || ^2.1",
         "gregwar/captcha": "^1.1",
         "mlocati/ip-lib": "^1.18",

docs/DEVELOPER.md

@@ -72,14 +72,14 @@ For a quick start, follow the below steps.
 
 #### DDEV installation
 
-This project is fully compatible with DDEV 1.20.0, and it is recommended to use this specific version.
+This project is fully compatible with DDEV 1.21.1, and it is recommended to use this specific version.
 For the DDEV installation, please follow the [official instructions](https://ddev.readthedocs.io/en/stable/#installation).
 On a Linux distribution, you can run:
 ```
 sudo apt-get -qq update
 sudo apt-get -qq -y install libnss3-tools
 curl -LO https://raw.githubusercontent.com/drud/ddev/master/scripts/install_ddev.sh
-bash install_ddev.sh v1.20.0
+bash install_ddev.sh v1.21.1
 rm install_ddev.sh
 ```
 

src/Bouncer.php

@@ -2,9 +2,6 @@
 
 namespace CrowdSecBouncer;
 
-require_once __DIR__ . '/templates/captcha.php';
-require_once __DIR__ . '/templates/access-forbidden.php';
-
 use CrowdSecBouncer\Fixes\Gregwar\Captcha\CaptchaBuilder;
 use CrowdSecBouncer\RestClient\AbstractClient;
 use ErrorException;
@@ -167,11 +164,9 @@ public static function getAccessForbiddenHtmlTemplate(array $config): string
         $configuration = new TemplateConfiguration();
         $processor = new Processor();
         $config = $processor->processConfiguration($configuration, [$config]);
+        $template = new Template('ban.html.twig');
 
-        ob_start();
-        displayAccessForbiddenTemplate($config);
-
-        return ob_get_clean();
+        return $template->render($config);
     }
 
     /**
@@ -188,11 +183,16 @@ public static function getCaptchaHtmlTemplate(
         $configuration = new TemplateConfiguration();
         $processor = new Processor();
         $config = $processor->processConfiguration($configuration, [$config]);
-
-        ob_start();
-        displayCaptchaTemplate($error, $captchaImageSrc, $captchaResolutionFormUrl, $config);
-
-        return ob_get_clean();
+        $template = new Template('captcha.html.twig');
+
+        return $template->render(array_merge(
+            $config,
+            [
+                    'error' => $error,
+                    'captcha_img' => $captchaImageSrc,
+                    'captcha_resolution_url' => $captchaResolutionFormUrl
+                ]
+        ));
     }
 
     /**

src/Constants.php

@@ -105,4 +105,7 @@ class Constants
 
     /** @var string The "disabled" x-forwarded-for setting */
     public const X_FORWARDED_DISABLED = 'no_forward';
+
+    /** @var string Path for html templates folder (e.g. ban and captcha wall) */
+    public const TEMPLATES_DIR = __DIR__ . "/templates";
 }

src/Template.php

@@ -0,0 +1,35 @@
+<?php
+
+namespace CrowdSecBouncer;
+
+use Twig\Loader\FilesystemLoader;
+use Twig\Environment;
+use Twig\TemplateWrapper;
+
+/**
+ * The template engine.
+ *
+ * @author    CrowdSec team
+ *
+ * @see      https://crowdsec.net CrowdSec Official Website
+ *
+ * @copyright Copyright (c) 2020+ CrowdSec
+ * @license   MIT License
+ */
+class Template
+{
+    /** @var TemplateWrapper */
+    private $template;
+
+    public function __construct(string $path, string $templatesDir = Constants::TEMPLATES_DIR, array $options = [])
+    {
+        $loader = new FilesystemLoader($templatesDir);
+        $env = new Environment($loader, $options);
+        $this->template = $env->load($path);
+    }
+
+    public function render(array $config = []): string
+    {
+        return $this->template->render(['config' => $config]);
+    }
+}

src/templates/_base.php

@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    {% include('partials/head.html.twig') with {'tab_title': config.text.ban_wall.tab_title} %}
+</head>
+<body>
+<div class="container">
+    <div class="main">
+        <h1>{{ config.text.ban_wall.title | e }}</h1>
+        <p class="desc">{{ config.text.ban_wall.subtitle }}</p>
+        {% if config.text.ban_wall.footer is not empty %}
+            <p class="footer">{{ config.text.ban_wall.footer | e }}</p>
+        {% endif %}
+        {% if config.hide_crowdsec_mentions is empty %}
+            {% include('partials/mentions.html.twig') %}
+        {% endif %}
+    </div>
+</div>
+</body>
+</html>

src/templates/access-forbidden.php

@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    {% include('partials/head.html.twig') with {'tab_title': config.text.captcha_wall.tab_title} %}
+    {% include('partials/captcha-js.html.twig') %}
+</head>
+<body>
+<div class="container">
+    <div class="main">
+        <h1>
+            <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="exclamation-triangle" role="img"
+                 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" class="warning">
+                <path fill="#f39b2f"
+                      d="M569.517 440.013C587.975 472.007 564.806 512 527.94 512H48.054c-36.937 0-59.999-40.055-41.577-71.987L246.423 23.985c18.467-32.009 64.72-31.951 83.154 0l239.94 416.028zM288 354c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z"></path>
+            </svg>
+            {{ config.text.captcha_wall.title |e }}
+        </h1>
+        <p class="desc">{{ config.text.captcha_wall.subtitle |e }}</p>
+
+        <img src="{{ config.captcha_img }}" alt="captcha"/>
+        <p><small><a id="refresh_link" href="#"
+                     onclick="newImage()">{{ config.text.captcha_wall.refresh_image_link |e }}</a></small></p>
+
+        <form method="post" id="captcha" action="#">
+            <script>document.querySelector("#captcha").setAttribute("action", "{{config.captcha_resolution_url}}")</script>
+            <input type="text" name="phrase" placeholder="{{ config.text.captcha_wall.captcha_placeholder |e }}" autofocus
+                   autocomplete="off"/>
+            <input type="hidden" name="crowdsec_captcha" value="1">
+            <input type="hidden" name="refresh" value="0" id="refresh">
+            {% if config.error is not empty %}
+                <p class="error">{{ config.text.captcha_wall.error_message |e }}</p>
+            {% endif %}
+            <button type="submit">{{ config.text.captcha_wall.send_button |e }}</button>
+        </form>
+        {% if config.text.ban_wall.footer is not empty %}
+            <p class="footer">{{ config.text.ban_wall.footer | e }}</p>
+        {% endif %}
+        {% if config.hide_crowdsec_mentions is empty %}
+            {% include('partials/mentions.html.twig') %}
+        {% endif %}
+    </div>
+</div>
+</body>
+</html>