From ed920c439c5934a1a5e728e3bcda42da3848f4fa Mon Sep 17 00:00:00 2001
From: =?utf8?q?Tim=20D=C3=BCsterhus?= <duesterhus@woltlab.com>
Date: Fri, 6 Nov 2020 16:30:11 +0100
Subject: [PATCH] Facelift adding TOTP devices

---
 .../templates/__totpNewDeviceContainer.tpl    | 44 +++++++++++++++++++
 .../templates/__totpSecretField.tpl           |  2 +
 .../Core/Ui/User/Multifactor/Totp/Qr.js       |  4 +-
 .../TotpMultifactorMethod.class.php           | 14 +++---
 .../totp/NewDeviceContainer.class.php         | 29 ++++++++++++
 .../files/style/ui/accountSecurity.scss       | 19 ++++++++
 .../Core/Ui/User/Multifactor/Totp/Qr.ts       |  4 +-
 7 files changed, 109 insertions(+), 7 deletions(-)
 create mode 100644 com.woltlab.wcf/templates/__totpNewDeviceContainer.tpl
 create mode 100644 wcfsetup/install/files/lib/system/user/multifactor/totp/NewDeviceContainer.class.php

diff --git a/com.woltlab.wcf/templates/__totpNewDeviceContainer.tpl b/com.woltlab.wcf/templates/__totpNewDeviceContainer.tpl
new file mode 100644
index 0000000000..f2c9db9312
--- /dev/null
+++ b/com.woltlab.wcf/templates/__totpNewDeviceContainer.tpl
@@ -0,0 +1,44 @@
+<section id="{@$container->getPrefixedId()}Container"{*
+	*}{if !$container->getClasses()|empty} class="{implode from=$container->getClasses() item='class' glue=' '}{$class}{/implode}"{/if}{*
+	*}{foreach from=$container->getAttributes() key='attributeName' item='attributeValue'} {$attributeName}="{$attributeValue}"{/foreach}{*
+	*}{if !$container->checkDependencies()} style="display: none;"{/if}{*
+*}>
+	{if $container->getLabel() !== null}
+		{if $container->getDescription() !== null}
+			<header class="sectionHeader">
+				<h2 class="sectionTitle">{@$container->getLabel()}{if $container->markAsRequired()} <span class="formFieldRequired">*</span>{/if}</h2>
+				<p class="sectionDescription">{@$container->getDescription()}</p>
+			</header>
+		{else}
+			<h2 class="sectionTitle">{@$container->getLabel()}{if $container->markAsRequired()} <span class="formFieldRequired">*</span>{/if}</h2>
+		{/if}
+	{/if}
+	
+	<div class="multifactorTotpNewDevice">
+		{if $container->getNodeById('secret')->isAvailable()}
+			{@$container->getNodeById('secret')->getHtml()}
+		{/if}
+		
+		<div class="multifactorTotpNewDeviceFields">
+			{foreach from=$container item='child'}
+				{if $child->getId() !== 'secret' && $child->getId() !== 'submitButton' && $child->isAvailable()}
+					{@$child->getHtml()}
+				{/if}
+			{/foreach}
+			
+			{if $container->getNodeById('submitButton')->isAvailable()}
+				<div class="formSubmit">
+					{@$container->getNodeById('submitButton')->getHtml()}
+				</div>
+			{/if}
+		</div>
+	</div>
+</section>
+
+{include file='__formContainerDependencies'}
+
+<script data-relocate="true">
+	require(['WoltLabSuite/Core/Form/Builder/Field/Dependency/Container/Default'], function(DefaultContainerDependency) {
+		new DefaultContainerDependency('{@$container->getPrefixedId()}Container');
+	});
+</script>
diff --git a/com.woltlab.wcf/templates/__totpSecretField.tpl b/com.woltlab.wcf/templates/__totpSecretField.tpl
index 023f7ecda1..eb3fe6d0c5 100644
--- a/com.woltlab.wcf/templates/__totpSecretField.tpl
+++ b/com.woltlab.wcf/templates/__totpSecretField.tpl
@@ -1,5 +1,7 @@
 <div class="totpSecretContainer">
 	<input type="hidden" name="{@$field->getPrefixedId()}" value="{$field->getSignedValue()}">
+	<canvas></canvas>
+
 	<kbd {*
 	*}class="totpSecret" {*
 	*}data-issuer="{PAGE_TITLE}" {*
diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/User/Multifactor/Totp/Qr.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/User/Multifactor/Totp/Qr.js
index 71ac33d015..e579d7d8b2 100644
--- a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/User/Multifactor/Totp/Qr.js
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/User/Multifactor/Totp/Qr.js
@@ -14,9 +14,11 @@ define(["require", "exports", "tslib", "qr-creator"], function (require, exports
         }
         const issuer = secret.dataset.issuer;
         const label = (issuer ? `${issuer}:` : "") + accountName;
+        const canvas = container.querySelector("canvas");
         qr_creator_1.default.render({
             text: `otpauth://totp/${encodeURIComponent(label)}?secret=${encodeURIComponent(secret.textContent)}${issuer ? `&issuer=${encodeURIComponent(issuer)}` : ""}`,
-        }, container);
+            size: canvas && canvas.clientWidth ? canvas.clientWidth : 200,
+        }, canvas || container);
     }
     exports.render = render;
     exports.default = render;
diff --git a/wcfsetup/install/files/lib/system/user/multifactor/TotpMultifactorMethod.class.php b/wcfsetup/install/files/lib/system/user/multifactor/TotpMultifactorMethod.class.php
index a981636838..d8c692cfb3 100644
--- a/wcfsetup/install/files/lib/system/user/multifactor/TotpMultifactorMethod.class.php
+++ b/wcfsetup/install/files/lib/system/user/multifactor/TotpMultifactorMethod.class.php
@@ -1,6 +1,7 @@
 <?php
 namespace wcf\system\user\multifactor;
 use ParagonIE\ConstantTime\Hex;
+use wcf\system\form\builder\button\FormButton;
 use wcf\system\form\builder\container\FormContainer;
 use wcf\system\form\builder\field\HiddenFormField;
 use wcf\system\form\builder\field\IFormField;
@@ -10,6 +11,7 @@ use wcf\system\form\builder\field\validation\FormFieldValidationError;
 use wcf\system\form\builder\field\validation\FormFieldValidator;
 use wcf\system\form\builder\IFormDocument;
 use wcf\system\user\multifactor\totp\CodeFormField;
+use wcf\system\user\multifactor\totp\NewDeviceContainer;
 use wcf\system\user\multifactor\totp\SecretFormField;
 use wcf\system\user\multifactor\totp\Totp;
 use wcf\system\WCF;
@@ -44,11 +46,8 @@ class TotpMultifactorMethod implements IMultifactorMethod {
 	 * @inheritDoc
 	 */
 	public function createManagementForm(IFormDocument $form, ?int $setupId, $returnData = null): void {
-		if ($setupId) {
-			
-		}
-		
-		$newDeviceContainer = FormContainer::create('newDevice')
+		$form->addDefaultButton(false);
+		$newDeviceContainer = NewDeviceContainer::create()
 			->label('wcf.user.security.multifactor.totp.newDevice')
 			->appendChildren([
 				SecretFormField::create(),
@@ -69,6 +68,11 @@ class TotpMultifactorMethod implements IMultifactorMethod {
 				TextFormField::create('deviceName')
 					->label('wcf.user.security.multifactor.totp.deviceName')
 					->placeholder('wcf.user.security.multifactor.totp.deviceName.placeholder'),
+				FormButton::create('submitButton')
+					->label('wcf.global.button.submit')
+					->accessKey('s')
+					->submit(true)
+					->addClass('buttonPrimary'),
 			]);
 		$form->appendChild($newDeviceContainer);
 	}
diff --git a/wcfsetup/install/files/lib/system/user/multifactor/totp/NewDeviceContainer.class.php b/wcfsetup/install/files/lib/system/user/multifactor/totp/NewDeviceContainer.class.php
new file mode 100644
index 0000000000..b3cf109a02
--- /dev/null
+++ b/wcfsetup/install/files/lib/system/user/multifactor/totp/NewDeviceContainer.class.php
@@ -0,0 +1,29 @@
+<?php
+namespace wcf\system\user\multifactor\totp;
+use wcf\system\form\builder\container\FormContainer;
+use wcf\system\form\builder\field\TDefaultIdFormField;
+
+/**
+ * Shows the form to add a new TOTP device.
+ * 
+ * @author	Tim Duesterhus
+ * @copyright	2001-2020 WoltLab GmbH
+ * @license	GNU Lesser General Public License <http://opensource.org/licenses/lgpl-license.php>
+ * @package	WoltLabSuite\System\User\Multifactor\Totp
+ * @since	5.4
+ */
+class NewDeviceContainer extends FormContainer {
+	use TDefaultIdFormField;
+	
+	/**
+	 * @inheritDoc
+	 */
+	protected $templateName = '__totpNewDeviceContainer';
+	
+	/**
+	 * @inheritDoc
+	 */
+	protected static function getDefaultId(): string {
+		return 'newDevice';
+	}
+}
diff --git a/wcfsetup/install/files/style/ui/accountSecurity.scss b/wcfsetup/install/files/style/ui/accountSecurity.scss
index 9cf57e45ee..476a0804e0 100644
--- a/wcfsetup/install/files/style/ui/accountSecurity.scss
+++ b/wcfsetup/install/files/style/ui/accountSecurity.scss
@@ -20,3 +20,22 @@
 		}
 	}
 }
+
+.multifactorTotpNewDevice {
+	display: flex;
+	
+	.totpSecretContainer {
+		text-align: center;
+		width: 250px;
+		margin: 0 5px;
+		
+		canvas {
+			width: 200px;
+			height: 200px;
+		}
+	}
+	
+	.multifactorTotpNewDeviceFields {
+		flex: 1 1 auto;
+	}
+}
diff --git a/wcfsetup/install/files/ts/WoltLabSuite/Core/Ui/User/Multifactor/Totp/Qr.ts b/wcfsetup/install/files/ts/WoltLabSuite/Core/Ui/User/Multifactor/Totp/Qr.ts
index e9af381a4d..f00dd0fb08 100644
--- a/wcfsetup/install/files/ts/WoltLabSuite/Core/Ui/User/Multifactor/Totp/Qr.ts
+++ b/wcfsetup/install/files/ts/WoltLabSuite/Core/Ui/User/Multifactor/Totp/Qr.ts
@@ -14,13 +14,15 @@ export function render(container: HTMLElement): void {
   const issuer = secret.dataset.issuer;
   const label = (issuer ? `${issuer}:` : "") + accountName;
 
+  const canvas = container.querySelector("canvas");
   QrCreator.render(
     {
       text: `otpauth://totp/${encodeURIComponent(label)}?secret=${encodeURIComponent(secret.textContent!)}${
         issuer ? `&issuer=${encodeURIComponent(issuer)}` : ""
       }`,
+      size: canvas && canvas.clientWidth ? canvas.clientWidth : 200,
     },
-    container,
+    canvas || container,
   );
 }
 
-- 
2.20.1