Add Inky-based, WIDM-styled email templates (#212)

Adds twig/inky-extra and twig/cssinliner-extra to build the password
reset and email confirmation emails from a shared responsive layout,
styled after the quiz's green/black look, with Dutch copy in the
show's dramatic tone.

.idea/TijdVoorDeTest.iml

@@ -4,7 +4,6 @@
     <content url="file://$MODULE_DIR$">
       <sourceFolder url="file://$MODULE_DIR$/src" isTestSource="false" packagePrefix="Tvdt\" />
       <sourceFolder url="file://$MODULE_DIR$/tests" isTestSource="true" packagePrefix="Tvdt\Tests\" />
-      <sourceFolder url="file://$MODULE_DIR$/vendor/maennchen/zipstream-php/test" isTestSource="true" />
       <excludeFolder url="file://$MODULE_DIR$/vendor/clue/ndjson-react" />
       <excludeFolder url="file://$MODULE_DIR$/vendor/composer" />
       <excludeFolder url="file://$MODULE_DIR$/vendor/doctrine/collections" />
@@ -172,6 +171,16 @@
       <excludeFolder url="file://$MODULE_DIR$/vendor/sebastian/file-filter" />
       <excludeFolder url="file://$MODULE_DIR$/vendor/symfony/object-mapper" />
       <excludeFolder url="file://$MODULE_DIR$/vendor/symfonycasts/reset-password-bundle" />
+      <excludeFolder url="file://$MODULE_DIR$/vendor/dflydev/dot-access-data" />
+      <excludeFolder url="file://$MODULE_DIR$/vendor/league/commonmark" />
+      <excludeFolder url="file://$MODULE_DIR$/vendor/league/config" />
+      <excludeFolder url="file://$MODULE_DIR$/vendor/lorenzo/pinky" />
+      <excludeFolder url="file://$MODULE_DIR$/vendor/nette/schema" />
+      <excludeFolder url="file://$MODULE_DIR$/vendor/nette/utils" />
+      <excludeFolder url="file://$MODULE_DIR$/vendor/tijsverkoyen/css-to-inline-styles" />
+      <excludeFolder url="file://$MODULE_DIR$/vendor/twig/cssinliner-extra" />
+      <excludeFolder url="file://$MODULE_DIR$/vendor/twig/inky-extra" />
+      <excludeFolder url="file://$MODULE_DIR$/vendor/twig/markdown-extra" />
     </content>
     <orderEntry type="inheritedJdk" />
     <orderEntry type="sourceFolder" forTests="false" />

.idea/php.xml

@@ -206,6 +206,16 @@
       <path value="$PROJECT_DIR$/vendor/martin-georgiev/postgresql-for-doctrine" />
       <path value="$PROJECT_DIR$/vendor/symfony/object-mapper" />
       <path value="$PROJECT_DIR$/vendor/symfonycasts/reset-password-bundle" />
+      <path value="$PROJECT_DIR$/vendor/lorenzo/pinky" />
+      <path value="$PROJECT_DIR$/vendor/tijsverkoyen/css-to-inline-styles" />
+      <path value="$PROJECT_DIR$/vendor/twig/inky-extra" />
+      <path value="$PROJECT_DIR$/vendor/twig/markdown-extra" />
+      <path value="$PROJECT_DIR$/vendor/twig/cssinliner-extra" />
+      <path value="$PROJECT_DIR$/vendor/league/commonmark" />
+      <path value="$PROJECT_DIR$/vendor/league/config" />
+      <path value="$PROJECT_DIR$/vendor/nette/utils" />
+      <path value="$PROJECT_DIR$/vendor/nette/schema" />
+      <path value="$PROJECT_DIR$/vendor/dflydev/dot-access-data" />
     </include_path>
   </component>
   <component name="PhpInterpreters">
@@ -403,6 +413,7 @@
   <component name="PhpUnit">
     <phpunit_settings>
       <phpunit_by_interpreter interpreter_id="96512cb2-7b9e-4e1d-bfa2-bf7f3be424c8" bootstrap_file_path="./tests/bootstrap.php" configuration_file_path="./phpunit.dist.xml" custom_loader_path="/app/vendor/autoload.php" phpunit_phar_path="" use_bootstrap_file="true" use_configuration_file="true" />
+      <PhpUnitSettings custom_loader_path="$PROJECT_DIR$/vendor/autoload.php" />
     </phpunit_settings>
   </component>
   <component name="Psalm">

Dockerfile

@@ -32,6 +32,7 @@ RUN set -eux; \
 		opcache \
 		zip \
 		gd \
+		xsl \
 	;
 
 # https://getcomposer.org/doc/03-cli.md#composer-allow-superuser

composer.json

@@ -49,7 +49,9 @@
         "symfonycasts/sass-bundle": "^0.10",
         "symfonycasts/verify-email-bundle": "^1.18.0",
         "thecodingmachine/safe": "^3.4.0",
+        "twig/cssinliner-extra": "^3.26.0",
         "twig/extra-bundle": "^3.24.0",
+        "twig/inky-extra": "^3.26.0",
         "twig/intl-extra": "^3.24.0",
         "twig/markdown-extra": "^3.24.0",
         "twig/twig": "^3.27.1"

composer.lock

@@ -4,7 +4,7 @@
         "Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies",
         "This file is @generated automatically"
     ],
-    "content-hash": "b2f319bad9d390a60067420d772e06e6",
+    "content-hash": "0bb88a3f492fa607203eb66735827179",
     "packages": [
         {
             "name": "composer/pcre",
@@ -1916,6 +1916,59 @@
             ],
             "time": "2022-12-11T20:36:23+00:00"
         },
+        {
+            "name": "lorenzo/pinky",
+            "version": "1.1.0",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/lorenzo/pinky.git",
+                "reference": "e1b1bdb2c132b8a7ba32bca64d2443f646ddbd17"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/lorenzo/pinky/zipball/e1b1bdb2c132b8a7ba32bca64d2443f646ddbd17",
+                "reference": "e1b1bdb2c132b8a7ba32bca64d2443f646ddbd17",
+                "shasum": ""
+            },
+            "require": {
+                "ext-dom": "*",
+                "ext-libxml": "*",
+                "ext-xsl": "*",
+                "php": ">=5.6.0"
+            },
+            "require-dev": {
+                "phpunit/phpunit": "^5.7.27 || ^6.5.14 || ^7.5.20 || ^8.5.21 || ^9.5.10"
+            },
+            "type": "library",
+            "autoload": {
+                "files": [
+                    "src/pinky.php"
+                ]
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Jose Lorenzo Rodriguez",
+                    "email": "jose.zap@gmail.com"
+                }
+            ],
+            "description": "A Foundation for Emails (Inky) template transpiler",
+            "keywords": [
+                "email",
+                "foundation",
+                "inky",
+                "template",
+                "zurb"
+            ],
+            "support": {
+                "issues": "https://github.com/lorenzo/pinky/issues",
+                "source": "https://github.com/lorenzo/pinky/tree/1.1.0"
+            },
+            "time": "2023-07-31T13:36:50+00:00"
+        },
         {
             "name": "maennchen/zipstream-php",
             "version": "3.2.2",
@@ -4162,6 +4215,75 @@
             ],
             "time": "2026-06-16T12:55:20+00:00"
         },
+        {
+            "name": "symfony/css-selector",
+            "version": "v8.1.0",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/symfony/css-selector.git",
+                "reference": "dc0e2be45c9b5588c82414f02ac574b4b986abcd"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/symfony/css-selector/zipball/dc0e2be45c9b5588c82414f02ac574b4b986abcd",
+                "reference": "dc0e2be45c9b5588c82414f02ac574b4b986abcd",
+                "shasum": ""
+            },
+            "require": {
+                "php": ">=8.4.1"
+            },
+            "type": "library",
+            "autoload": {
+                "psr-4": {
+                    "Symfony\\Component\\CssSelector\\": ""
+                },
+                "exclude-from-classmap": [
+                    "/Tests/"
+                ]
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Fabien Potencier",
+                    "email": "fabien@symfony.com"
+                },
+                {
+                    "name": "Jean-François Simon",
+                    "email": "jeanfrancois.simon@sensiolabs.com"
+                },
+                {
+                    "name": "Symfony Community",
+                    "homepage": "https://symfony.com/contributors"
+                }
+            ],
+            "description": "Converts CSS selectors to XPath expressions",
+            "homepage": "https://symfony.com",
+            "support": {
+                "source": "https://github.com/symfony/css-selector/tree/v8.1.0"
+            },
+            "funding": [
+                {
+                    "url": "https://symfony.com/sponsor",
+                    "type": "custom"
+                },
+                {
+                    "url": "https://github.com/fabpot",
+                    "type": "github"
+                },
+                {
+                    "url": "https://github.com/nicolas-grekas",
+                    "type": "github"
+                },
+                {
+                    "url": "https://tidelift.com/funding/github/packagist/symfony/symfony",
+                    "type": "tidelift"
+                }
+            ],
+            "time": "2026-05-29T05:06:50+00:00"
+        },
         {
             "name": "symfony/dependency-injection",
             "version": "v8.1.1",
@@ -9051,6 +9173,130 @@
             ],
             "time": "2026-02-04T18:08:13+00:00"
         },
+        {
+            "name": "tijsverkoyen/css-to-inline-styles",
+            "version": "v2.4.0",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/tijsverkoyen/CssToInlineStyles.git",
+                "reference": "f0292ccf0ec75843d65027214426b6b163b48b41"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/tijsverkoyen/CssToInlineStyles/zipball/f0292ccf0ec75843d65027214426b6b163b48b41",
+                "reference": "f0292ccf0ec75843d65027214426b6b163b48b41",
+                "shasum": ""
+            },
+            "require": {
+                "ext-dom": "*",
+                "ext-libxml": "*",
+                "php": "^7.4 || ^8.0",
+                "symfony/css-selector": "^5.4 || ^6.0 || ^7.0 || ^8.0"
+            },
+            "require-dev": {
+                "phpstan/phpstan": "^2.0",
+                "phpstan/phpstan-phpunit": "^2.0",
+                "phpunit/phpunit": "^8.5.21 || ^9.5.10"
+            },
+            "type": "library",
+            "extra": {
+                "branch-alias": {
+                    "dev-master": "2.x-dev"
+                }
+            },
+            "autoload": {
+                "psr-4": {
+                    "TijsVerkoyen\\CssToInlineStyles\\": "src"
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "BSD-3-Clause"
+            ],
+            "authors": [
+                {
+                    "name": "Tijs Verkoyen",
+                    "email": "css_to_inline_styles@verkoyen.eu",
+                    "role": "Developer"
+                }
+            ],
+            "description": "CssToInlineStyles is a class that enables you to convert HTML-pages/files into HTML-pages/files with inline styles. This is very useful when you're sending emails.",
+            "homepage": "https://github.com/tijsverkoyen/CssToInlineStyles",
+            "support": {
+                "issues": "https://github.com/tijsverkoyen/CssToInlineStyles/issues",
+                "source": "https://github.com/tijsverkoyen/CssToInlineStyles/tree/v2.4.0"
+            },
+            "time": "2025-12-02T11:56:42+00:00"
+        },
+        {
+            "name": "twig/cssinliner-extra",
+            "version": "v3.26.0",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/twigphp/cssinliner-extra.git",
+                "reference": "1b0dc906bbad7226c967bd325e99cccb1a850c4b"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/twigphp/cssinliner-extra/zipball/1b0dc906bbad7226c967bd325e99cccb1a850c4b",
+                "reference": "1b0dc906bbad7226c967bd325e99cccb1a850c4b",
+                "shasum": ""
+            },
+            "require": {
+                "php": ">=8.1.0",
+                "symfony/deprecation-contracts": "^2.5|^3",
+                "tijsverkoyen/css-to-inline-styles": "^2.0",
+                "twig/twig": "^3.13|^4.0"
+            },
+            "require-dev": {
+                "symfony/phpunit-bridge": "^6.4|^7.0"
+            },
+            "type": "library",
+            "autoload": {
+                "files": [
+                    "Resources/functions.php"
+                ],
+                "psr-4": {
+                    "Twig\\Extra\\CssInliner\\": ""
+                },
+                "exclude-from-classmap": [
+                    "/Tests/"
+                ]
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Fabien Potencier",
+                    "email": "fabien@symfony.com",
+                    "homepage": "http://fabien.potencier.org",
+                    "role": "Lead Developer"
+                }
+            ],
+            "description": "A Twig extension to allow inlining CSS",
+            "homepage": "https://twig.symfony.com",
+            "keywords": [
+                "css",
+                "inlining",
+                "twig"
+            ],
+            "support": {
+                "source": "https://github.com/twigphp/cssinliner-extra/tree/v3.26.0"
+            },
+            "funding": [
+                {
+                    "url": "https://github.com/fabpot",
+                    "type": "github"
+                },
+                {
+                    "url": "https://tidelift.com/funding/github/packagist/twig/twig",
+                    "type": "tidelift"
+                }
+            ],
+            "time": "2026-05-15T13:14:14+00:00"
+        },
         {
             "name": "twig/extra-bundle",
             "version": "v3.24.0",
@@ -9125,6 +9371,76 @@
             ],
             "time": "2026-02-07T08:07:38+00:00"
         },
+        {
+            "name": "twig/inky-extra",
+            "version": "v3.26.0",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/twigphp/inky-extra.git",
+                "reference": "0a8b24f0d0247bf6dc5e2af0c0ab09c0c4e5343e"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/twigphp/inky-extra/zipball/0a8b24f0d0247bf6dc5e2af0c0ab09c0c4e5343e",
+                "reference": "0a8b24f0d0247bf6dc5e2af0c0ab09c0c4e5343e",
+                "shasum": ""
+            },
+            "require": {
+                "lorenzo/pinky": "^1.0.5",
+                "php": ">=8.1.0",
+                "symfony/deprecation-contracts": "^2.5|^3",
+                "twig/twig": "^3.13|^4.0"
+            },
+            "require-dev": {
+                "symfony/phpunit-bridge": "^6.4|^7.0"
+            },
+            "type": "library",
+            "autoload": {
+                "files": [
+                    "Resources/functions.php"
+                ],
+                "psr-4": {
+                    "Twig\\Extra\\Inky\\": ""
+                },
+                "exclude-from-classmap": [
+                    "/Tests/"
+                ]
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Fabien Potencier",
+                    "email": "fabien@symfony.com",
+                    "homepage": "http://fabien.potencier.org",
+                    "role": "Lead Developer"
+                }
+            ],
+            "description": "A Twig extension for the inky email templating engine",
+            "homepage": "https://twig.symfony.com",
+            "keywords": [
+                "email",
+                "emails",
+                "inky",
+                "twig"
+            ],
+            "support": {
+                "source": "https://github.com/twigphp/inky-extra/tree/v3.26.0"
+            },
+            "funding": [
+                {
+                    "url": "https://github.com/fabpot",
+                    "type": "github"
+                },
+                {
+                    "url": "https://tidelift.com/funding/github/packagist/twig/twig",
+                    "type": "tidelift"
+                }
+            ],
+            "time": "2026-05-15T13:14:14+00:00"
+        },
         {
             "name": "twig/intl-extra",
             "version": "v3.26.0",
@@ -12909,75 +13225,6 @@
             ],
             "time": "2026-06-09T10:54:51+00:00"
         },
-        {
-            "name": "symfony/css-selector",
-            "version": "v8.1.0",
-            "source": {
-                "type": "git",
-                "url": "https://github.com/symfony/css-selector.git",
-                "reference": "dc0e2be45c9b5588c82414f02ac574b4b986abcd"
-            },
-            "dist": {
-                "type": "zip",
-                "url": "https://api.github.com/repos/symfony/css-selector/zipball/dc0e2be45c9b5588c82414f02ac574b4b986abcd",
-                "reference": "dc0e2be45c9b5588c82414f02ac574b4b986abcd",
-                "shasum": ""
-            },
-            "require": {
-                "php": ">=8.4.1"
-            },
-            "type": "library",
-            "autoload": {
-                "psr-4": {
-                    "Symfony\\Component\\CssSelector\\": ""
-                },
-                "exclude-from-classmap": [
-                    "/Tests/"
-                ]
-            },
-            "notification-url": "https://packagist.org/downloads/",
-            "license": [
-                "MIT"
-            ],
-            "authors": [
-                {
-                    "name": "Fabien Potencier",
-                    "email": "fabien@symfony.com"
-                },
-                {
-                    "name": "Jean-François Simon",
-                    "email": "jeanfrancois.simon@sensiolabs.com"
-                },
-                {
-                    "name": "Symfony Community",
-                    "homepage": "https://symfony.com/contributors"
-                }
-            ],
-            "description": "Converts CSS selectors to XPath expressions",
-            "homepage": "https://symfony.com",
-            "support": {
-                "source": "https://github.com/symfony/css-selector/tree/v8.1.0"
-            },
-            "funding": [
-                {
-                    "url": "https://symfony.com/sponsor",
-                    "type": "custom"
-                },
-                {
-                    "url": "https://github.com/fabpot",
-                    "type": "github"
-                },
-                {
-                    "url": "https://github.com/nicolas-grekas",
-                    "type": "github"
-                },
-                {
-                    "url": "https://tidelift.com/funding/github/packagist/symfony/symfony",
-                    "type": "tidelift"
-                }
-            ],
-            "time": "2026-05-29T05:06:50+00:00"
-        },
         {
             "name": "symfony/dom-crawler",
             "version": "v8.1.1",

config/reference.php

@@ -1277,10 +1277,10 @@ use Symfony\Component\Config\Loader\ParamConfigurator as Param;
  *         enabled?: bool|Param, // Default: true
  *     },
  *     cssinliner?: bool|array{
- *         enabled?: bool|Param, // Default: false
+ *         enabled?: bool|Param, // Default: true
  *     },
  *     inky?: bool|array{
- *         enabled?: bool|Param, // Default: false
+ *         enabled?: bool|Param, // Default: true
  *     },
  *     string?: bool|array{
  *         enabled?: bool|Param, // Default: false

templates/backoffice/registration/confirmation_email.html.twig

@@ -1,11 +1,22 @@
-<h1>Hi! Please confirm your email!</h1>
+{% extends 'emails/layout.html.twig' %}
 
-<p>
+{% block preheader %}Bevestig je e-mailadres voor Tijd voor de test.{% endblock %}
-    Please confirm your email address by clicking the following link: <br><br>
-    <a href="{{ signedUrl|raw }}">Confirm my Email</a>.
-    This link will expire in {{ expiresAtMessageKey|trans(expiresAtMessageData, 'VerifyEmailBundle') }}.
-</p>
 
-<p>
+{% block heading %}Nog één stap voor je mee mag doen{% endblock %}
-    Cheers!
+
-</p>
+{% block body %}
+    <p class="text">Beste speler,</p>
+    <p class="text">
+        Welkom bij Tijd voor de test! Voor je echt aan de slag kunt, moeten we nog één ding
+        weten: of jij écht bent wie je zegt dat je bent. Klik daarom op de knop hieronder.
+    </p>
+
+    <center><button href="{{ signedUrl|raw }}">Bevestig e-mailadres</button></center>
+
+    <p class="text">
+        Deze link verloopt over {{ expiresAtMessageKey|trans(expiresAtMessageData, 'VerifyEmailBundle') }}, dus
+        wacht niet te lang.
+    </p>
+
+    <p class="text">Veel plezier!</p>
+{% endblock %}

templates/emails/layout.html.twig

@@ -0,0 +1,168 @@
+{% apply inline_css %}
+{% apply inky_to_html %}
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>{% block title %}Tijd voor de test{% endblock %}</title>
+    <style>
+        body, table, td { font-family: Arial, Helvetica, sans-serif; }
+        body {
+            margin: 0;
+            padding: 0;
+            width: 100% !important;
+            background-color: #f2f4f1;
+            color: #22281f;
+        }
+        table { border-collapse: collapse; }
+        img { border: 0; }
+        a { color: #2d7a1f; }
+
+        .body-table { width: 100%; background-color: #f2f4f1; }
+
+        .container { width: 100%; max-width: 580px; }
+
+        .header > tbody > tr > th { padding: 28px 24px 20px 24px; text-align: center; }
+
+        .brand-table { margin: 0 auto; }
+        .square-cell { width: 18px; }
+        .square {
+            width: 18px !important;
+            height: 18px !important;
+            max-width: 18px;
+            min-width: 18px;
+            max-height: 18px;
+            min-height: 18px;
+            font-size: 0;
+            line-height: 1px;
+            border-radius: 4px;
+            background-color: #6abf4b;
+        }
+        .square-gap { width: 10px; font-size: 0; line-height: 1px; }
+        .brand {
+            font-size: 20px;
+            font-weight: bold;
+            letter-spacing: 0.5px;
+            color: #17321a;
+            white-space: nowrap;
+        }
+
+        .content-wrapper { background-color: #f2f4f1; }
+        .content-wrapper > tbody > tr > th { padding: 24px 28px; }
+
+        .card {
+            background-color: #ffffff;
+            border-radius: 8px;
+            border: 1px solid #e1e6dd;
+        }
+        .card td.card-inner { padding: 32px; }
+
+        h1.heading {
+            margin: 0 0 16px 0;
+            font-size: 21px;
+            line-height: 1.3;
+            color: #17321a;
+        }
+
+        p.text {
+            margin: 0 0 16px 0;
+            font-size: 15px;
+            line-height: 1.6;
+            color: #3a4239;
+        }
+        p.text:last-child { margin-bottom: 0; }
+
+        .button { margin: 8px auto 12px auto; width: auto !important; }
+        .button table { width: auto; margin: 0 auto; }
+        .button td { border-radius: 5px; background: #2d7a1f; }
+        .button a {
+            background: #2d7a1f;
+            color: #ffffff !important;
+            border-radius: 5px;
+            display: inline-block;
+            padding: 12px 26px;
+            font-size: 15px;
+            font-weight: bold;
+            text-decoration: none;
+            border: 1px solid #2d7a1f;
+        }
+
+        .h-line th { border-bottom: 1px solid #e1e6dd; height: 1px; font-size: 0; line-height: 0; }
+
+        .footer > tbody > tr > th { padding: 24px 28px 32px 28px; text-align: center; }
+        .footer p {
+            margin: 0;
+            font-size: 12px;
+            line-height: 1.6;
+            color: #8b9186;
+        }
+
+        .preheader {
+            display: none !important;
+            visibility: hidden;
+            opacity: 0;
+            color: transparent;
+            height: 0;
+            width: 0;
+            font-size: 1px;
+            line-height: 1px;
+            max-height: 0;
+            max-width: 0;
+            overflow: hidden;
+            mso-hide: all;
+        }
+    </style>
+</head>
+<body>
+<span class="preheader">{% block preheader %}{% endblock %}</span>
+<table class="body-table" role="presentation">
+    <tr>
+        <td align="center">
+            <container>
+                <row class="header">
+                    <columns small="12" large="12" no-expander="true">
+                        <table class="brand-table" role="presentation" align="center">
+                            <tr>
+                                <td class="square-cell" valign="middle">
+                                    <table role="presentation" width="18" height="18" style="width: 18px !important; height: 18px !important; max-width: 18px; min-width: 18px;">
+                                        <tr style="height: 18px !important;">
+                                            <td class="square" width="18" height="18" style="width: 18px !important; height: 18px !important; max-width: 18px; min-width: 18px; max-height: 18px; min-height: 18px;">&nbsp;</td>
+                                        </tr>
+                                    </table>
+                                </td>
+                                <td class="square-gap">&nbsp;</td>
+                                <td class="brand" valign="middle">Tijd voor de test</td>
+                            </tr>
+                        </table>
+                    </columns>
+                </row>
+
+                <row class="content-wrapper">
+                    <columns small="12" large="12" class="content" no-expander="true">
+                        <table class="card" role="presentation" width="100%">
+                            <tr>
+                                <td class="card-inner">
+                                    <h1 class="heading">{% block heading %}{% endblock %}</h1>
+                                    {% block body %}{% endblock %}
+                                </td>
+                            </tr>
+                        </table>
+                    </columns>
+                </row>
+
+                <row class="footer">
+                    <columns small="12" large="12" no-expander="true">
+                        <h-line></h-line>
+                        <spacer size="16"></spacer>
+                        {% block footer_extra %}{% endblock %}
+                    </columns>
+                </row>
+            </container>
+        </td>
+    </tr>
+</table>
+</body>
+</html>
+{% endapply %}
+{% endapply %}

templates/reset_password/email.html.twig

@@ -1,9 +1,27 @@
-<h1>Hi!</h1>
+{% extends 'emails/layout.html.twig' %}
 
-<p>To reset your password, please visit the following link</p>
+{% block preheader %}Je hebt om een nieuw wachtwoord gevraagd voor Tijd voor de test.{% endblock %}
 
-<a href="{{ url('tvdt_reset_password', {token: resetToken.token}) }}">{{ url('tvdt_reset_password', {token: resetToken.token}) }}</a>
+{% block heading %}Tijd voor een nieuw wachtwoord{% endblock %}
 
-<p>This link will expire in {{ resetToken.expirationMessageKey|trans(resetToken.expirationMessageData, 'ResetPasswordBundle') }}.</p>
+{% block body %}
+    <p class="text">Beste speler,</p>
+    <p class="text">
+        Je hebt aangegeven dat je wachtwoord opnieuw moet worden ingesteld. Voordat je verder mag, is er nog één
+        opdracht: klik op de knop hieronder.
+    </p>
 
-<p>Cheers!</p>
+    <center><button href="{{ url('tvdt_reset_password', {token: resetToken.token}) }}">Stel wachtwoord opnieuw in</button></center>
+
+    <p class="text">
+        Werkt de knop niet? Kopieer dan deze link naar je browser:<br>
+        <a href="{{ url('tvdt_reset_password', {token: resetToken.token}) }}">{{ url('tvdt_reset_password', {token: resetToken.token}) }}</a>
+    </p>
+
+    <p class="text">
+        Let op: deze link is, niet eeuwig geldig. Hij verloopt over
+        {{ resetToken.expirationMessageKey|trans(resetToken.expirationMessageData, 'ResetPasswordBundle') }}.
+    </p>
+
+    <p class="text">Veel succes!</p>
+{% endblock %}