Overhauled the layout of the 2fa authentication page

diff --git a/com.woltlab.wcf/templates/multifactorAuthentication.tpl b/com.woltlab.wcf/templates/multifactorAuthentication.tpl
index 611f8ee856be677a099eb3946788942ce12b9fcb..07eb5827ccd2d4d7fb09310dfaa2a639fc019afe 100644 (file)
--- a/com.woltlab.wcf/templates/multifactorAuthentication.tpl
+++ b/com.woltlab.wcf/templates/multifactorAuthentication.tpl
@@ -1,46 +1,29 @@
 {capture assign='pageTitle'}{lang}wcf.user.security.multifactor.authentication{/lang}{/capture}
 {capture assign='contentTitle'}{lang}wcf.user.security.multifactor.authentication{/lang}{/capture}
-
-{capture assign='sidebarLeft'}
-       <section class="box">
-               <h2 class="boxTitle">{lang}wcf.user.security.multifactor.methods{/lang}</h2>
-               
-               <div class="boxContent">
-                       <nav>
-                               <ol class="boxMenu">
-                                       {foreach from=$setups item='_setup'}
-                                               <li{if $setup->getId() == $_setup->getId()} class="active"{/if}>
-                                                       <a class="boxMenuLink" href="{link controller='MultifactorAuthentication' object=$_setup url=$redirectUrl}{/link}"><span class="boxMenuLinkTitle">{lang}wcf.user.security.multifactor.{$_setup->getObjectType()->objectType}{/lang}</span></a>
-                                               </li>
-                                       {/foreach}
-                               </ol>
-                       </nav>
-               </div>
-       </section>
-{/capture}
+{capture assign='contentDescription'}{lang}wcf.user.security.multifactor.authentication.description{/lang}{/capture}
 
 {include file='header' __disableAds=true __disableLoginLink=true __sidebarLeftHasMenu=true}
 
-<div class="section box48">
-       {@$userProfile->getAvatar()->getImageTag(48)}
-       
-       <div>
-               <div class="containerHeadline">
-                       <h3>
-                               {lang}wcf.user.security.multifactor.authentication.user.headline{/lang}
-                       </h3>
-               </div>
-               <div class="containerContent">
-                       {lang}wcf.user.security.multifactor.authentication.user.content{/lang}
+<div class="section tabMenuContainer staticTabMenuContainer">
+       <nav class="tabMenu">
+               <ul>
+                       {foreach from=$setups item='_setup'}
+                               <li{if $setup->getId() == $_setup->getId()} class="active"{/if}>
+                                       <a href="{link controller='MultifactorAuthentication' object=$_setup url=$redirectUrl}{/link}"><span class="boxMenuLinkTitle">{lang}wcf.user.security.multifactor.{$_setup->getObjectType()->objectType}{/lang}</span></a>
+                               </li>
+                       {/foreach}
+               </ul>
+       </nav>
+
+       <div class="tabMenuContent">
+               <div class="section">
+                       <dl>
+                               <dt>{lang}wcf.user.security.multifactor.authentication.loginAs{/lang}</dt>
+                               <dd>{$user->username}</dd>
+                       </dl>
+                       {@$form->getHtml()}
                </div>
-               
-               <form action="{link controller='MultifactorAuthenticationAbort'}{/link}" method="post">
-                       <button type="submit">{lang}wcf.user.security.multifactor.authentication.logout{/lang}</button>
-                       {csrfToken}
-               </form>
        </div>
 </div>
 
-{@$form->getHtml()}
-
 {include file='footer' __disableAds=true}

diff --git a/wcfsetup/install/files/acp/templates/multifactorAuthentication.tpl b/wcfsetup/install/files/acp/templates/multifactorAuthentication.tpl
index ebd4446c78e3ec562822345659b4d55bc29a8a0b..cd9c205db6b327471386dba7aaec5fef768449fc 100644 (file)
--- a/wcfsetup/install/files/acp/templates/multifactorAuthentication.tpl
+++ b/wcfsetup/install/files/acp/templates/multifactorAuthentication.tpl
@@ -1,44 +1,34 @@
 {capture assign='pageTitle'}{lang}wcf.user.security.multifactor.authentication{/lang}{/capture}
-{capture assign='contentTitle'}{lang}wcf.user.security.multifactor.authentication{/lang}{/capture}
 
 {include file='header' __isLogin=true}
 
-<section class="box">
-       <h2 class="boxTitle">{lang}wcf.user.security.multifactor.methods{/lang}</h2>
-       
-       <div class="boxContent">
-               <nav>
-                       <ol class="boxMenu">
-                               {foreach from=$setups item='_setup'}
-                                       <li{if $setup->getId() == $_setup->getId()} class="active"{/if}>
-                                               <a class="boxMenuLink" href="{link controller='MultifactorAuthentication' object=$_setup url=$redirectUrl}{/link}"><span class="boxMenuLinkTitle">{lang}wcf.user.security.multifactor.{$_setup->getObjectType()->objectType}{/lang}</span></a>
-                                       </li>
-                               {/foreach}
-                       </ol>
-               </nav>
+<header class="contentHeader">
+       <div class="contentHeaderTitle">
+               <h1 class="contentTitle">{lang}wcf.user.security.multifactor.authentication{/lang}</h1>
+               <p class="contentHeaderDescription">{lang}wcf.user.security.multifactor.authentication.description{/lang}</p>
        </div>
-</section>
+</header>
 
-<div class="section box48">
-       {@$userProfile->getAvatar()->getImageTag(48)}
-       
-       <div>
-               <div class="containerHeadline">
-                       <h3>
-                               {lang}wcf.user.security.multifactor.authentication.user.headline{/lang}
-                       </h3>
-               </div>
-               <div class="containerContent">
-                       {lang}wcf.user.security.multifactor.authentication.user.content{/lang}
+<div class="section tabMenuContainer staticTabMenuContainer">
+       <nav class="tabMenu">
+               <ul>
+                       {foreach from=$setups item='_setup'}
+                               <li{if $setup->getId() == $_setup->getId()} class="active"{/if}>
+                                       <a href="{link controller='MultifactorAuthentication' object=$_setup url=$redirectUrl}{/link}"><span class="boxMenuLinkTitle">{lang}wcf.user.security.multifactor.{$_setup->getObjectType()->objectType}{/lang}</span></a>
+                               </li>
+                       {/foreach}
+               </ul>
+       </nav>
+
+       <div class="tabMenuContent">
+               <div class="section">
+                       <dl>
+                               <dt>{lang}wcf.user.security.multifactor.authentication.loginAs{/lang}</dt>
+                               <dd>{$user->username}</dd>
+                       </dl>
+                       {@$form->getHtml()}
                </div>
-               
-               <form action="{link controller='MultifactorAuthenticationAbort'}{/link}" method="post">
-                       <button type="submit">{lang}wcf.user.security.multifactor.authentication.logout{/lang}</button>
-                       {csrfToken}
-               </form>
        </div>
 </div>
 
-{@$form->getHtml()}
-
 {include file='footer'}

diff --git a/wcfsetup/install/lang/de.xml b/wcfsetup/install/lang/de.xml
index 777dfe22d15d6115fd3497ce5bc604f608988e48..13c6e1238de30048a781ff5afbe6545c5980afc4 100644 (file)
--- a/wcfsetup/install/lang/de.xml
+++ b/wcfsetup/install/lang/de.xml
@@ -4895,6 +4895,8 @@ Die E-Mail-Adresse des neuen Benutzers lautet: {@$user->email}
                <item name="wcf.user.security.multifactor.email.body.plain"><![CDATA[{if LANGUAGE_USE_INFORMAL_VARIANT}Dein{else}Ihr{/if} Einmalcode lautet: {$code}]]></item>
                <item name="wcf.user.security.multifactor.methods"><![CDATA[Verfahren]]></item>
                <item name="wcf.user.security.multifactor.authentication"><![CDATA[Mehrfaktor-Authentifizierung]]></item>
+               <item name="wcf.user.security.multifactor.authentication.description"><![CDATA[Dieses Benutzerkonto wird durch einen zweiten Faktor geschützt.]]></item>
+               <item name="wcf.user.security.multifactor.authentication.loginAs"><![CDATA[Anmelden als]]></item>
                <item name="wcf.user.security.multifactor.backup.code"><![CDATA[Notfall-Code]]></item>
                <item name="wcf.user.security.multifactor.backup.code.description"><![CDATA[Ein Notfall-Code besteht aus 20 Ziffern und ist nur einmal gültig.]]></item>
                <item name="wcf.user.security.multifactor.totp.deviceName.description.auth"><![CDATA[Das Gerät, das den genutzten Éinmalcode generiert hat.]]></item>

diff --git a/wcfsetup/install/lang/en.xml b/wcfsetup/install/lang/en.xml
index 92181e211c0c081eb1d82c529a40794c5782eebb..4e48d5e55772507670cc1f1cc1c66505da1ec851 100644 (file)
--- a/wcfsetup/install/lang/en.xml
+++ b/wcfsetup/install/lang/en.xml
@@ -4891,7 +4891,9 @@ Open the link below to access the user profile:
                <item name="wcf.user.security.multifactor.email.body.html"><![CDATA[Your one time code is: <pre>{$code}</pre>]]></item>
                <item name="wcf.user.security.multifactor.email.body.plain"><![CDATA[Your one time code is: {$code}]]></item>
                <item name="wcf.user.security.multifactor.methods"><![CDATA[Method]]></item>
-               <item name="wcf.user.security.multifactor.authentication"><![CDATA[Multi-Factor Authentication]]></item>
+               <item name="wcf.user.security.multifactor.authentication"><![CDATA[Multi-factor Authentication]]></item>
+               <item name="wcf.user.security.multifactor.authentication.description"><![CDATA[This user account is protected by a second factor.]]></item>
+               <item name="wcf.user.security.multifactor.authentication.loginAs"><![CDATA[Log in as]]></item>
                <item name="wcf.user.security.multifactor.backup.code"><![CDATA[Emergency Code]]></item>
                <item name="wcf.user.security.multifactor.backup.code.description"><![CDATA[An emergency code consists of 20 digits and may only be used once.]]></item>
                <item name="wcf.user.security.multifactor.totp.deviceName.description.auth"><![CDATA[The device that generated the used one time code.]]></item>