Emails template

Author: OstafinL

src/bundle/Resources/public/img/mail/button_left_side.png

@@ -1,19 +1,24 @@
-{%- block from -%}
-{%- endblock from -%}
+{% extends '@ibexadesign/ui/mail/base_mail_template.html.twig' %}
 
 {%- block subject -%}
     {{ 'ezplatform.forgot_user_password.reset_your_password'|trans|desc('Reset your password') }}
 {%- endblock subject -%}
 
-{%- block body -%}
-    <p>
-        {{ 'ezplatform.forgot_user_password.message'|trans({ '%reset_password%': url('ibexa.user.reset_password', {'hashKey': hash_key}) })|raw
-        |desc('Hi,
-        <br /><br />
-        We have received a request to reset the password for your Ibexa DXP account. Click “reset password” below to choose a new password:
-        <br /><br />
-        <a href="%reset_password%">Reset password</a>
-        <br /><br />
-        If you did not request a password reset, please ignore this email, and your password will remain the same.') }}
-    </p>
-{%- endblock body -%}
+{% block message_title %}
+    {{ 'ezplatform.forgot_user_password.body_title'|trans()|desc('Hello,') }}
+{% endblock %}
+
+{% block message %}
+    {{ 'ezplatform.forgot_user_password.body_msg'|trans()|desc('We have received a request to reset the password for your account. Click "reset password" below to choose a new password:') }}
+{% endblock %}
+
+{% block message_actions %}
+    {% include '@ibexadesign/ui/mail/action_btn.html.twig' with {
+        url: url('ibexa.user.reset_password', {'hashKey': hash_key}),
+        label: 'ezplatform.forgot_user_password.reset_password'|trans()|desc('Reset password')
+    } %}
+{% endblock %}
+
+{%- block message_footer -%}
+    {{ 'ezplatform.forgot_user_password.footer_msg'|trans()|desc('If you did not request a password reset, please ignore this email, and your password will remain the same.') }}
+{%- endblock -%}

src/bundle/Resources/public/img/mail/button_left_side.svg

@@ -0,0 +1,38 @@
+{% set link_width = label|length * 10 %}
+{% set btn_width = link_width + 32 %}
+
+{% macro button_side_img(base64, width_px = 16, height_px = 48) %}
+    <td width="{{ width_px }}" height="{{ height_px }}">
+        <img style="display: block;" src="data:image/png;base64,{{ base64 }}" >
+    </td>
+{% endmacro %}
+
+<table
+    role="presentation"
+    cellspacing="0"
+    cellpadding="0"
+    border="0"
+    width="{{ btn_width }}"
+>
+    <tr>
+        {{ _self.button_side_img("iVBORw0KGgoAAAANSUhEUgAAABAAAAAwCAMAAAAvgQplAAAAVFBMVEUAAACAAICqAFWZAGaqAFWvEGOuEGSvEmWuEmOvEmWtEmSuEWSuEWWvEGSuEWSuEWSuEWOuEWSuEWSuEGSuEmOtEWSuEWSuEWSuEWStEWSuEWT///9GZI3tAAAAGnRSTlMAAgMFBlBSU1VWV4qLjKSmp9fY2drb3N3z9PxLL8wAAAABYktHRBsCYNSkAAAAXUlEQVQoz+3RNw6EQABD0U+OS46+/0Fp0EpjboBw51dZMgCkdT+dkiQBUOz6B4h/UgBBFxQKId0MahkMDovD4aAPXguPs2eH3qFySFYDcgdah6gxgGw1ICm78V54ARoVSXMDmUd2AAAAAElFTkSuQmCC") }}
+        <td width="{{ link_width }}" height="48">
+            <a
+                style="
+                    display: table-cell;
+                    width: {{ link_width }}px;
+                    height: 48px;
+                    color: #ffffff;
+                    text-align: center;
+                    text-decoration: none;
+                    vertical-align: middle;
+                    background: #AE1164;
+                " 
+                href="{{ url }}"
+            >
+                {{ label }}
+            </a>
+        </td>
+        {{ _self.button_side_img("iVBORw0KGgoAAAANSUhEUgAAABAAAAAwCAMAAAAvgQplAAAAUVBMVEUAAACAAICZAGaqAFWuEGSvEGOuEGStEmSuEmOvEmWuEWOtEWWuEWWuEWSuEWSuEWSuEWSuEWStEWSuEWSuEWStEWSuEWWuEWStEWSuEWT///9DylPAAAAAGXRSTlMAAgUGT1BSVFVWiImLo6Sm19jb3N3e8fP0bGRbwQAAAAFiS0dEGnVn5DIAAABZSURBVCjP7dK3EYBAAMTAw5vHu+f6b5SMAZXAoHBjybbtcx6bTJIk360lwO4SgAPBBWHPAK4JA2EmRIJ/+CwchInQEyrAxulybNli3PBee8kf88dpqFJJ0gWYFEaC3ipVGgAAAABJRU5ErkJggg==") }}
+    </tr>
+</table>