Add hint to store the secret for recovery

If the device running the authenticator app is lost, the secret can
be used to set up an authenticator app on another device. But for
that the secret has to be stored on another device when setting up
2FA.

Author: jrauh01

application/forms/Account/TwoFactorConfigForm.php

@@ -20,6 +20,7 @@
 use ipl\Web\Url;
 use ipl\Web\Widget\ActionLink;
 use ipl\Web\Widget\CopyToClipboard;
+use ipl\Web\Widget\Icon;
 
 /**
  * Form for enabling and disabling 2FA or creating and updating the 2FA TOTP secret
@@ -92,6 +93,24 @@ protected function assemble(): void
                 ]
             );
         } else {
+            $twoFactorEnabled = $this->getPopulatedValue('enabled_2fa') === 'y';
+            if ($twoFactorEnabled) {
+                $this->addHtml(HtmlElement::create(
+                    'div',
+                    Attributes::create(['class' => 'two-factor-warning']),
+                    [
+                        new Icon('warning'),
+                        HtmlElement::create(
+                            'p',
+                            null,
+                            new Text(
+                                $this->translate('Make sure to save the QR code or the secret for recovery purposes!')
+                            )
+                        )
+                    ]
+                ));
+            }
+
             $this->addElement(
                 'checkbox',
                 'enabled_2fa',
@@ -104,7 +123,7 @@ protected function assemble(): void
                 ]
             );
 
-            if ($this->getPopulatedValue('enabled_2fa') === 'y') {
+            if ($twoFactorEnabled) {
                 // Keep the secret after form submission, otherwise every form submission would generate a new secret.
                 // This would result in the following:
                 // - Users would have to scan a new QR code every time the verification fails.

library/Icinga/Web/Widget/TwoFactorWarning.php

@@ -0,0 +1,41 @@
+<?php
+
+/* Icinga Notifications Web | (c) 2025 Icinga GmbH | GPLv2 */
+
+namespace Icinga\Web\Widget;
+
+use ipl\Html\BaseHtmlElement;
+use ipl\Html\HtmlElement;
+use ipl\Html\Text;
+use ipl\I18n\Translation;
+use ipl\Web\Widget\Icon;
+
+/**
+ * A warning box that indicates the schedule timezone. It should be used to warn
+ * the user that the display timezone differs from the schedule timezone.
+ */
+class TwoFactorWarning extends BaseHtmlElement
+{
+    use Translation;
+
+    protected $tag = 'div';
+
+    protected $defaultAttributes = ['class' => 'two-factor-warning'];
+
+    /**
+     * @param string $timezone The schedule timezone
+     */
+    public function __construct()
+    {
+    }
+
+    public function assemble(): void
+    {
+        $this->addHtml(new Icon('warning'));
+        $this->addHtml(new HtmlElement(
+            'p',
+            null,
+            new Text('Make sure to save the QR code or the secret for recovery purposes!')
+        ));
+    }
+}

public/css/icinga/forms.less

@@ -618,3 +618,30 @@ form.icinga-form .form-info {
   line-break: anywhere;
   user-select: all;
 }
+
+
+.two-factor-warning {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  column-gap: 1em;
+
+  width: fit-content;
+  margin: 0 auto 1em auto;
+  padding: .5em 1em;
+  border: 1px solid @state-warning;
+  border-radius: .25em;
+
+  i.icon{
+    color: @state-warning;
+    font-size: 1.5em;
+
+    &::before {
+      margin-right: 0;
+    }
+  }
+
+  p {
+    margin: 0;
+  }
+}