UHF-10765

src/scss/06_components/forms/__index.scss

@@ -6,3 +6,4 @@
 @import 'react-forms';
 @import 'select';
 @import 'text-input';
+@import 'tfa-form';

src/scss/06_components/forms/_tfa-form.scss

@@ -0,0 +1,10 @@
+.tfa-entry-form {
+  max-width: $content-width-max;
+
+  .form-actions input {
+    margin-bottom: $spacing-double;
+    margin-top: $spacing;
+    max-width: 280px;
+    width: 100%;
+  }
+}

src/scss/06_components/layout/_component.scss

@@ -7,7 +7,8 @@
 // When components are full width and do not contain liftup-with-img-bg or content-cards,
 // they should have padding that keeps them from touching side.
 .components--lower > .component:not(.component--liftup-with-image-bg, .component--content-cards-grey),
-.page-type--landing-page.no-sidebar .components--upper > .component:not(.component--liftup-with-image-bg, .component--content-cards-grey) {
+.page-type--landing-page.no-sidebar .components--upper > .component:not(.component--liftup-with-image-bg, .component--content-cards-grey),
+.components--computed > .component {
   @include component-side-padding;
 }
 
@@ -83,7 +84,7 @@
 
 // Components on other pages than landing-page
 // need to be limited to content max-width to maintain readability.
-:not(.page-type--landing-page).wrapper .components:not(.components--lower) {
+.wrapper:not(.page-type--landing-page) .components:not(.components--lower, .components--computed) {
   @include components-container-max-width;
   margin-left: auto;
   margin-right: auto;

templates/form/form--openid-connect-accounts-form.html.twig

@@ -0,0 +1,15 @@
+<div class="components components--computed">
+  {% embed "@hdbt/misc/component.twig" with
+    {
+      component_classes: [
+      'component--connected-accounts-form-container',
+    ],
+    }
+  %}
+    {% block component_content %}
+      <form{{ attributes }}>
+        {{ children }}
+      </form>
+    {% endblock component_content %}
+  {% endembed %}
+</div>

templates/form/form--tfa-entry-form.html.twig

@@ -0,0 +1,15 @@
+<div class="components components--computed">
+  {% embed "@hdbt/misc/component.twig" with
+    {
+      component_classes: [
+        'component--tfa-form-container',
+      ],
+    }
+  %}
+    {% block component_content %}
+      <form{{ attributes }}>
+        {{ children }}
+      </form>
+    {% endblock component_content %}
+  {% endembed %}
+</div>

templates/layout/user.html.twig

@@ -0,0 +1,18 @@
+<article{{ attributes }}>
+  {% if content %}
+    <div class="components components--computed">
+      {% embed "@hdbt/misc/component.twig" with { component_classes: ['component--user-info-container'] } %}
+        {% block component_content %}
+          {% set link_title = "Hel.fi content producer's guide (in Finnish)"|t({}, {'context': 'User info page'}) %}
+          {% set link_url = 'https://www.hel.fi/fi/paatoksenteko-ja-hallinto/sisallonhallinta' %}
+          {% embed "@hdbt/misc/component.twig" with { component_classes: ['component--paragraph-text'] } %}
+            {% block component_content %}
+              <p>{{ "Welcome to the content management of hel.fi Drupal. You will find instructions in the"|t({}, {'context': 'User info page'}) }} {{ link(link_title, link_url) }}.</p>
+            {% endblock component_content %}
+          {% endembed %}
+          {{- content -}}
+        {% endblock component_content %}
+      {% endembed %}
+    </div>
+  {% endif %}
+</article>

translations/fi.po

@@ -1331,3 +1331,11 @@ msgstr "Haluatko antaa meille palautetta tästä sivusta?"
 msgctxt "React & Share cookie compliance"
 msgid "Enabling cookies that collect statistics will allow you to share your input."
 msgstr "Pääset antamaan palautetta, jos sallit evästeasetuksista tilastointiin liittyvät evästeet."
+
+msgctxt "User info page"
+msgid "Welcome to the content management of hel.fi Drupal. You will find instructions in the"
+msgstr "Tervetuloa hel.fin Drupalin sisällönhallintaan. Ohjeet löydät"
+
+msgctxt "User info page"
+msgid "Hel.fi content producer's guide (in Finnish)"
+msgstr "Hel.fin sisällöntuottajan oppaasta"

translations/sv.po

@@ -1325,3 +1325,11 @@ msgstr "Vill du ge oss feedback om denna sida?"
 msgctxt "React & Share cookie compliance"
 msgid "Enabling cookies that collect statistics will allow you to share your input."
 msgstr "Du kan ge oss feedback genom att aktivera statistikrelaterade cookies."
+
+msgctxt "User info page"
+msgid "Welcome to the content management of hel.fi Drupal. You will find instructions in the"
+msgstr "Välkommen till innehållshanteringen av hel.fi Drupal. Du hittar instruktioner i"
+
+msgctxt "User info page"
+msgid "Hel.fi content producer's guide (in Finnish)"
+msgstr "Hel.fi innehållsproducentens guide (på finska)"