Improve TwoFactorConfigForm

A new class `FakeFormElement` is introduced which integrates
`ValidHtml` into IPL Web `CompatForm`s. The following parts of the
`TwoFactorConfigForm` are now added to the Form via the new class:

- The QR code image
- The manual auth URL for TOTP

The manual auth URL is now wrapped by a copy-to-clipboard element,
so the user doesn’t have to select it manually. Additionally the
QR code image and the manual auth url have now descriptions.

Author: jrauh01

application/forms/Account/TwoFactorConfigForm.php

@@ -7,13 +7,16 @@
 use Icinga\Authentication\TwoFactorTotp;
 use Icinga\Common\Database;
 use Icinga\User;
+use Icinga\Web\Form\Element\FakeFormElement;
 use Icinga\Web\Form\Validator\TotpTokenValidator;
 use Icinga\Web\Notification;
 use ipl\Html\Attributes;
 use ipl\Html\HtmlElement;
+use ipl\Html\Text;
 use ipl\Web\Common\FormUid;
 use ipl\Web\Compat\CompatForm;
 use ipl\Web\Url;
+use ipl\Web\Widget\CopyToClipboard;
 
 /**
  * Form for enabling and disabling 2FA or creating and updating the 2FA TOTP secret
@@ -79,16 +82,16 @@ protected function assemble(): void
                 'submit',
                 static::SUBMIT_DISABLE,
                 [
-                    'label'                 => $this->translate('Disable 2FA'),
-                    'data-progress-label'   => $this->translate('Disabling')
+                    'label'               => $this->translate('Disable 2FA'),
+                    'data-progress-label' => $this->translate('Disabling')
                 ]
             );
         } else {
             $this->addElement(
                 'checkbox',
                 'enabled_2fa',
                 [
-                    'class'  => 'autosubmit',
+                    'class'       => 'autosubmit',
                     'label'       => $this->translate('Enable 2FA (TOTP)'),
                     'description' => $this->translate(
                         'This option allows you to enable or to disable the two factor authentication via TOTP.'
@@ -105,23 +108,26 @@ protected function assemble(): void
                     $this->twoFactor = TwoFactorTotp::createFromSecret($secret, $this->user->getUsername());
                 }
 
-                $this->addHtml(HtmlElement::create('img', Attributes::create([
-                    'class' => 'two-factor-totp-qr-code',
-                    'src' => $this->twoFactor->createQRCode()
-                ])));
-
-                $this->addElement(
-                    'textarea',
-                    '2fa_manual_auth_url',
-                    [
-                        'class'    => 'two-factor-totp-auth-url',
-                        'ignore'   => true,
-                        'disabled' => true,
-                        'label'    => $this->translate('Manual Auth URL'),
-                        'value'    => $this->twoFactor->getTotpAuthUrl(),
-                        'rows'     => 4
-                    ]
+                $this->addHtml(new FakeFormElement(
+                    HtmlElement::create('img', Attributes::create([
+                        'class' => 'two-factor-totp-qr-code',
+                        'src'   => $this->twoFactor->createQRCode()
+                    ])),
+                    $this->translate('QR Code'),
+                    $this->translate('Use your authenticator app to scan the QR code.')
+                ));
+
+                $manualAuthUrl = HtmlElement::create(
+                    'div',
+                    Attributes::create(['class' => 'two-factor-totp-auth-url']),
+                    new Text($this->twoFactor->getTotpAuthUrl()),
                 );
+                CopyToClipboard::attachTo($manualAuthUrl);
+                $this->addHtml(new FakeFormElement(
+                    $manualAuthUrl,
+                    $this->translate('Manual Auth URL'),
+                    $this->translate('If you have no camera to scan the QR code you can enter the auth URL manually.')
+                ));
 
                 $this->addElement(
                     'text',

library/Icinga/Web/Form/Element/FakeFormElement.php

@@ -0,0 +1,69 @@
+<?php
+
+/* Icinga Web 2 | (c) 2025 Icinga GmbH | GPLv2+ */
+
+namespace Icinga\Web\Form\Element;
+
+use ipl\Html\Attributes;
+use ipl\Html\BaseHtmlElement;
+use ipl\Html\HtmlElement;
+use ipl\Html\Text;
+use ipl\Html\ValidHtml;
+use ipl\Web\Widget\Icon;
+
+/**
+ * This is an element that integrates {@see ValidHtml} into an IPL Web {@see CompatForm}.
+ *
+ * The html will be rendered as follows:
+ * <pre>
+ * <div class='control-group'>
+ *     <div class='control-label-group'>
+ *         <!-- if label is set -->
+ *         <label>$this->label</label>
+ *     </div>
+ *     <div class='fake-form-element'>
+ *         $this->content
+ *     </div>
+ *     <!-- if description is set -->
+ *     <i class="icon fa-info-circle control-info fa" role="image"
+ *        title="Please enter the token from your authenticator app to verify your setup."></i>
+ * </div>
+ * </pre>
+ */
+class FakeFormElement extends BaseHtmlElement
+{
+    protected $tag = 'div';
+
+    protected $defaultAttributes = ['class' => 'control-group'];
+
+    /**
+     * @param ValidHtml $content     The element to add to the form
+     * @param ?string   $label       The label to render in the control-label-group element
+     * @param ?string   $description The description to show for the element
+     */
+    public function __construct(
+        protected ValidHtml $content,
+        protected ?string $label = null,
+        protected ?string $description = null
+    ) {
+    }
+
+    protected function assemble(): void
+    {
+        $this->addHtml(
+            HtmlElement::create(
+                'div',
+                Attributes::create(['class' => 'control-label-group']),
+                $this->label ? HtmlElement::create('label', null, new Text($this->label)) : null
+            )
+        );
+        $this->addHtml(
+            HtmlElement::create('div', Attributes::create(['class' => 'fake-form-element']), $this->content)
+        );
+        if ($this->description) {
+            $this->addHtml(
+                new Icon('info-circle', Attributes::create(['class' => 'control-info', 'title' => $this->description]))
+            );
+        }
+    }
+}

public/css/icinga/forms.less

@@ -186,7 +186,8 @@ form.icinga-form {
   input[type="file"],
   .control-group > fieldset,
   textarea,
-  select {
+  select,
+  .control-group > .fake-form-element {
     flex: 1 1 auto;
     width: 0;
   }
@@ -606,12 +607,14 @@ form.icinga-form .form-info {
 }
 
 .two-factor-totp-qr-code {
-  display: block;
-  margin: 0 auto;
   width: 20em;
   height: 20em;
 }
 
 .two-factor-totp-auth-url {
-  resize: none;
+  background-color: @base-disabled;
+  padding: @vertical-padding;
+  border-radius: .25em;
+  line-break: anywhere;
+  user-select: all;
 }