UHF-12474: Hakuvahti action page changes

src/scss/06-components/forms/__index.scss

@@ -10,3 +10,4 @@
 @import 'text-input';
 @import 'tfa-form';
 @import 'submit';
+@import 'hakuvahti-confirmation';

src/scss/06-components/forms/_hakuvahti-confirmation.scss

@@ -0,0 +1,23 @@
+.hakuvahti-confirmation {
+  .page-divider + .components {
+    @include breakpoint($breakpoint-l) {
+      margin-top: $spacing-quadruple;
+    }
+  }
+
+  p {
+    @include font('body');
+  }
+
+  p:first-child {
+    margin-top: 0;
+  }
+
+  .form-submit {
+    margin-top: $spacing-double;
+
+    @include breakpoint($breakpoint-m) {
+      margin-top: $spacing-quadruple;
+    }
+  }
+}

templates/module/helfi_hakuvahti/hakuvahti-action-wrapper.twig

@@ -0,0 +1,13 @@
+<article class="hakuvahti-confirmation">
+  <div class="page-divider"></div>
+  <div class="components">
+    {% embed "@hdbt/misc/component.twig" with { component_classes: 'component--hakuvahti-form'} %}
+      {% block component_content %}
+        {% if message %}
+          {% include "@hdbt/module/helfi_hakuvahti/hakuvahti-message-wrapper.twig" with { message: message } %}
+        {% endif %}
+        {{ content }}
+      {% endblock component_content %}
+    {% endembed %}
+  </div>
+</article>

templates/module/helfi_hakuvahti/hakuvahti-confirmation.html.twig

@@ -0,0 +1,5 @@
+{% set content %}
+  <p>{{ link }}</p>
+{% endset %}
+
+{% include "@hdbt/module/helfi_hakuvahti/hakuvahti-action-wrapper.twig" with { message: message, content: content } %}

templates/module/helfi_hakuvahti/hakuvahti-form.html.twig

@@ -0,0 +1,5 @@
+{% set content %}
+  {% include '@helfi_hakuvahti/form.twig' with { action_url: action_url, button_text: button_text } %}
+{% endset %}
+
+{% include "@hdbt/module/helfi_hakuvahti/hakuvahti-action-wrapper.twig" with { content: content } %}

templates/module/helfi_hakuvahti/hakuvahti-message-wrapper.twig

@@ -0,0 +1,7 @@
+{% if message is iterable %}
+  {% for item in message %}
+    <p>{{ item }}</p>
+  {% endfor %}
+{% else %}
+  <p>{{ message }}</p>
+{% endif %}