From: Alexander Ebert <ebert@woltlab.com>
Date: Wed, 25 Nov 2020 12:13:52 +0000 (+0100)
Subject: Overhauled the layout of the 2fa authentication page
X-Git-Tag: 5.4.0_Alpha_1~555^2~29
X-Git-Url: https://git.stricted.de/?a=commitdiff_plain;h=9d5a4a78de16d2cb046cede1836d0ef7bd473579;p=GitHub%2FWoltLab%2FWCF.git

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 611f8ee856..07eb5827cc 100644
--- 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 ebd4446c78..cd9c205db6 100644
--- 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 777dfe22d1..13c6e1238d 100644
--- 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 92181e211c..4e48d5e557 100644
--- 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>