Improve print view of MFA backup codes

- Add a “Print” button.
- Only show the codes + an explanatory text by moving it in front of all other
  elements in the print style.

see https://www.woltlab.com/community/thread/290079-ausdrucken-von-mfa-notfallcodes-erleichtern/

diff --git a/com.woltlab.wcf/templates/multifactorManageBackup.tpl b/com.woltlab.wcf/templates/multifactorManageBackup.tpl
index 15c3642d88eef0ac94a97b418d36b6f33de4f399..9312a2fd50317afa7c5fe3bfcd9262670215b0c3 100644 (file)
--- a/com.woltlab.wcf/templates/multifactorManageBackup.tpl
+++ b/com.woltlab.wcf/templates/multifactorManageBackup.tpl
@@ -1,9 +1,27 @@
-{if !$isUnveiled}{lang}wcf.user.security.multifactor.backup.existingCodes.description{/lang}{/if}
-<ol class="nativeList multifactorBackupCodes">
-{foreach from=$codes item='code'}
-<li>
-       <span class="multifactorBackupCode{if $code[useTime]} used{/if}">{foreach from=$code[chunks] item='chunk'}<span class="chunk">{$chunk}</span>{/foreach}</span>
-       {if $code[useTime]}({$code[useTime]|plainTime}){/if}
-</li>
-{/foreach}
-</ol>
+<div class="multifactorBackupCodesPrintContainer">
+       {if $isUnveiled}
+               {lang}wcf.user.security.multifactor.backup.printMetadata{/lang}
+       {else}
+               {lang}wcf.user.security.multifactor.backup.existingCodes.description{/lang}
+       {/if}
+
+       <ol class="nativeList multifactorBackupCodes">
+               {foreach from=$codes item='code'}
+                       <li>
+                               <span class="multifactorBackupCode{if $code[useTime]} used{/if}">{foreach from=$code[chunks] item='chunk'}<span class="chunk">{$chunk}</span>{/foreach}</span>
+                               {if $code[useTime]}({$code[useTime]|plainTime}){/if}
+                       </li>
+               {/foreach}
+       </ol>
+
+       {if $isUnveiled}
+               <button type="button" class="button multifactorBackupCodesPrintButton">
+                       {lang}wcf.user.security.multifactor.backup.print{/lang}
+                       <script>
+                       document.currentScript.closest('button').addEventListener('click', () => {
+                               window.print();
+                       });
+                       </script>
+               </button>
+       {/if}
+</div>

diff --git a/wcfsetup/install/files/style/ui/accountSecurity.scss b/wcfsetup/install/files/style/ui/accountSecurity.scss
index 98bcf51addde3857545c84a198a14c9f7da59c35..e4e1b35cf573aaa9e7a6e65c81d329233c6c567b 100644 (file)
--- a/wcfsetup/install/files/style/ui/accountSecurity.scss
+++ b/wcfsetup/install/files/style/ui/accountSecurity.scss
@@ -45,6 +45,29 @@
        }
 }
 
+@media not print {
+       .multifactorBackupCodesPrintMetadata {
+               display: none !important;
+       }
+}
+
+@media print {
+       .multifactorBackupCodesPrintButton {
+               display: none !important;
+       }
+
+       .multifactorBackupCodesPrintContainer {
+               padding: 1cm !important;
+               position: absolute !important;
+               background: white !important;
+               inset: 0 !important;
+
+               .multifactorBackupCodesPrintMetadata {
+                       max-width: 9cm !important;
+               }
+       }
+}
+
 // Just .multifactorTotpCode is not specific enough.
 input.multifactorTotpCode,
 input.multifactorEmailCode,

diff --git a/wcfsetup/install/lang/de.xml b/wcfsetup/install/lang/de.xml
index 8ccb059ab6b16488ea0ce61a40d0ab16d3c1d394..5f30e36c34e53e8056d33dc61fc1aa11442f18f2 100644 (file)
--- a/wcfsetup/install/lang/de.xml
+++ b/wcfsetup/install/lang/de.xml
@@ -4960,6 +4960,8 @@ Die E-Mail-Adresse des neuen Benutzers lautet: {@$user->email}.
                <item name="wcf.user.security.multifactor.backup.error.flood"><![CDATA[Bitte {if LANGUAGE_USE_INFORMAL_VARIANT}versuche es{else}versuchen Sie es{/if} später erneut.]]></item>
                <item name="wcf.user.security.multifactor.backup.existingCodes"><![CDATA[Aktive Notfallcodes]]></item>
                <item name="wcf.user.security.multifactor.backup.existingCodes.description"><![CDATA[<p>Nachfolgend {if LANGUAGE_USE_INFORMAL_VARIANT}findest du{else}finden Sie{/if} den zuletzt generierten Satz an Notfallcodes für die Mehrfaktor-Authentifizierung. Durchgestrichene Notfallcodes wurden bereits verwendet und sind nicht mehr gültig. {if LANGUAGE_USE_INFORMAL_VARIANT}Verwende{else}Verwenden Sie{/if} die fettgedruckte Nummer, um die Notfallcodes mit {if LANGUAGE_USE_INFORMAL_VARIANT}deinen{else}Ihren{/if} Notizen abzugleichen. {if LANGUAGE_USE_INFORMAL_VARIANT}Generiere neue Codes, falls deine Notizen{else}Generieren Sie neue Codes, falls Ihre Notizen{/if} nicht zu der angezeigten Liste passen.</p>]]></item>
+               <item name="wcf.user.security.multifactor.backup.printMetadata"><![CDATA[<p class="multifactorBackupCodesPrintMetadata">Notfallcodes für <strong>{$__wcf->user->username}</strong> auf <strong>{PAGE_TITLE|phrase}</strong> generiert am <strong>{time time=TIME_NOW type='plainTime'}</strong>.</p>]]></item>
+               <item name="wcf.user.security.multifactor.backup.print"><![CDATA[Notfallcodes ausdrucken]]></item>
                <item name="wcf.user.security.multifactor.backup.generateCodes"><![CDATA[Codes generieren]]></item>
                <item name="wcf.user.security.multifactor.backup.regenerateCodes"><![CDATA[Neue Notfallcodes generieren]]></item>
                <item name="wcf.user.security.multifactor.backup.regenerateCodes.description"><![CDATA[<p>{if LANGUAGE_USE_INFORMAL_VARIANT}Generiere{else}Generieren Sie{/if} neue Notfallcodes, wenn {if LANGUAGE_USE_INFORMAL_VARIANT}du deinen{else}Sie Ihren{/if} bisherigen Satz verlegt oder verbraucht {if LANGUAGE_USE_INFORMAL_VARIANT}hast{else}haben{/if}. Die Generierung neuer Notfallcodes wird alle bestehenden Notfallcodes ungültig machen.</p>]]></item>

diff --git a/wcfsetup/install/lang/en.xml b/wcfsetup/install/lang/en.xml
index ee62e79888999d5f87959653cfaa5634db9e830d..437b64f532f9f11f14b96c4afadc689ffe6ec83c 100644 (file)
--- a/wcfsetup/install/lang/en.xml
+++ b/wcfsetup/install/lang/en.xml
@@ -4962,6 +4962,8 @@ You can manage multi-factor authentication within the Account Security page [URL
                <item name="wcf.user.security.multifactor.backup.error.flood"><![CDATA[Please try again later.]]></item>
                <item name="wcf.user.security.multifactor.backup.existingCodes"><![CDATA[Active Emergency Codes]]></item>
                <item name="wcf.user.security.multifactor.backup.existingCodes.description"><![CDATA[<p>You can find the latest set of emergency codes for use with the multi-factor authentication below. Codes that are striked out have been used and are no longer valid. Use the bold identifier to compare the list to your notes. Please generate a new set of codes if the listed codes do not match your notes.</p>]]></item>
+               <item name="wcf.user.security.multifactor.backup.printMetadata"><![CDATA[<p class="multifactorBackupCodesPrintMetadata">Emergency Codes for <strong>{$__wcf->user->username}</strong> on <strong>{PAGE_TITLE|phrase}</strong> generated at <strong>{time time=TIME_NOW type='plainTime'}</strong>.</p>]]></item>
+               <item name="wcf.user.security.multifactor.backup.print"><![CDATA[Print Emergency Codes]]></item>
                <item name="wcf.user.security.multifactor.backup.generateCodes"><![CDATA[Generate Codes]]></item>
                <item name="wcf.user.security.multifactor.backup.regenerateCodes"><![CDATA[Generate New Emergency Codes]]></item>
                <item name="wcf.user.security.multifactor.backup.regenerateCodes.description"><![CDATA[<p>Generate new emergency codes if you lost or used up your existing set. Generating new emergency codes will invalidate all existing codes.</p>]]></item>