Form options

com.woltlab.wcf/objectType.xml

@@ -157,6 +157,10 @@
 			<definitionname>com.woltlab.wcf.message</definitionname>
 			<disallowedBBCodesPermission>user.signature.disallowedBBCodes</disallowedBBCodesPermission>
 		</type>
+		<type>
+			<name>com.woltlab.wcf.genericFormOption</name>
+			<definitionname>com.woltlab.wcf.message</definitionname>
+		</type>
 		<type>
 			<name>com.woltlab.wcf.user.signature</name>
 			<definitionname>com.woltlab.wcf.attachment.objectType</definitionname>
@@ -223,6 +227,11 @@
 			<definitionname>com.woltlab.wcf.attachment.objectType</definitionname>
 			<classname>wcf\system\attachment\ContactAttachmentObjectType</classname>
 		</type>
+		<type>
+			<name>com.woltlab.wcf.contact.form</name>
+			<definitionname>com.woltlab.wcf.file</definitionname>
+			<classname>wcf\system\file\processor\ContactFormFileProcessor</classname>
+		</type>
 		<!-- page -->
 		<type>
 			<name>com.woltlab.wcf.page.recentActivityEvent</name>
@@ -1722,6 +1731,10 @@
 			<name>com.woltlab.wcf.lostPasswordForm</name>
 			<definitionname>com.woltlab.wcf.floodControl</definitionname>
 		</type>
+		<type>
+			<name>com.woltlab.wcf.contactForm</name>
+			<definitionname>com.woltlab.wcf.floodControl</definitionname>
+		</type>
 		<type>
 			<name>com.woltlab.wcf.search</name>
 			<definitionname>com.woltlab.wcf.floodControl</definitionname>

com.woltlab.wcf/package.xml

@@ -49,4 +49,11 @@
 
 		<instruction type="script">acp/install_com.woltlab.wcf_step2.php</instruction>
 	</instructions>
+
+	<!-- 
+	Required order of the following steps for the update to 6.2:
+	<instruction type="database" run="standalone">acp/database/update_com.woltlab.wcf_62_step1.php</instruction>
+	<instruction type="script">acp/update_com.woltlab.wcf_6.2_contactOptions.php</instruction>
+	<instruction type="database" run="standalone">acp/database/update_com.woltlab.wcf_62_step2.php</instruction>
+	-->
 </package>

com.woltlab.wcf/templates/contact.tpl

@@ -1,96 +1,5 @@
 {include file='header'}
 
-{include file='shared_formError'}
-
-<form method="post" action="{link controller='Contact'}{/link}">
-	<section class="section">
-		<h2 class="sectionTitle">{lang}wcf.contact.sender.information{/lang}</h2>
-
-		<dl{if $errorField == 'name'} class="formError"{/if}>
-			<dt><label for="name">{lang}wcf.contact.sender{/lang}</label> <span class="customOptionRequired">*</span></dt>
-			<dd>
-				<input type="text" id="name" name="name" value="{$name}" required class="long">
-				{if $errorField == 'name'}
-					<small class="innerError">
-						{if $errorType == 'empty'}
-							{lang}wcf.global.form.error.empty{/lang}
-						{else}
-							{lang}wcf.contact.sender.error.{@$errorType}{/lang}
-						{/if}
-					</small>
-				{/if}
-			</dd>
-		</dl>
-
-		<dl{if $errorField == 'email'} class="formError"{/if}>
-			<dt><label for="email">{lang}wcf.user.email{/lang}</label> <span class="customOptionRequired">*</span></dt>
-			<dd>
-				<input type="email" id="email" name="email" value="{$email}" required class="medium">
-				{if $errorField == 'email'}
-					<small class="innerError">
-						{if $errorType == 'empty'}
-							{lang}wcf.global.form.error.empty{/lang}
-						{else}
-							{lang}wcf.user.email.error.{@$errorType}{/lang}
-						{/if}
-					</small>
-				{/if}
-			</dd>
-		</dl>
-
-		{event name='informationFields'}
-	</section>
-
-	<section class="section">
-		<h2 class="sectionTitle">{lang}wcf.contact.data{/lang}</h2>
-
-		{if $recipientList|count > 1}
-			<dl{if $errorField == 'recipientID'} class="formError"{/if}>
-				<dt><label for="recipientID">{lang}wcf.contact.recipientID{/lang}</label> <span class="customOptionRequired">*</span></dt>
-				<dd>
-					<select name="recipientID" id="recipientID" required>
-						<option value="">{lang}wcf.global.noSelection{/lang}</option>
-						{foreach from=$recipientList item=recipient}
-							<option value="{$recipient->recipientID}"{if $recipient->recipientID == $recipientID} selected{/if}>{$recipient}</option>
-						{/foreach}
-					</select>
-					{if $errorField == 'recipientID'}
-						<small class="innerError">
-							{if $errorType == 'empty'}
-								{lang}wcf.global.form.error.empty{/lang}
-							{else}
-								{lang}wcf.contact.recipientID.error.{@$errorType}{/lang}
-							{/if}
-						</small>
-					{/if}
-				</dd>
-			</dl>
-		{/if}
-
-		{include file='customOptionFieldList'}
-
-		{event name='optionFields'}
-
-		{if CONTACT_FORM_ENABLE_ATTACHMENTS && !$attachmentHandler|empty && $attachmentHandler->canUpload()}
-			<div class="contactFormAttachments">
-				{include file='shared_messageFormAttachments' wysiwygSelector=''}
-			</div>
-		{/if}
-	</section>
-
-	{event name='sections'}
-
-	{include file='shared_captcha'}
-
-	<div class="formSubmit">
-		<input type="submit" value="{lang}wcf.global.button.submit{/lang}" accesskey="s">
-		{csrfToken}
-	</div>
-</form>
-
-<p class="formFieldRequiredNotice">
-	<span class="formFieldRequired">*</span>
-	{lang}wcf.global.form.required{/lang}
-</p>
+{unsafe:$form->getHtml()}
 
 {include file='footer'}

com.woltlab.wcf/templates/shared_selectOptionsFormField.tpl

@@ -0,0 +1,16 @@
+<input type="hidden" {*
+	*}id="{$field->getPrefixedId()}" {*
+	*}name="{$field->getPrefixedId()}" {*
+	*}value="{$field->getValue()}"{*
+*}>
+
+<script data-relocate="true">
+	require(['WoltLabSuite/Core/Form/Builder/Field/SelectOptions'], ({ setup }) => {
+		{jsphrase name='wcf.form.selectOptions.key'}
+		{jsphrase name='wcf.form.selectOptions.value'}
+
+		const availableLanguages = { {implode from=$availableLanguages key=languageID item=languageName}{$languageID}: '{unsafe:$languageName|encodeJS}'{/implode} };
+
+		setup(document.getElementById('{unsafe:$field->getPrefixedId()|encodeJS}'), availableLanguages);
+	});
+</script>

ts/WoltLabSuite/Core/Component/Ckeditor/Configuration.ts

@@ -215,7 +215,7 @@ class ConfigurationBuilder {
 
   #setupMention(): void {
     if (!this.#features.mention) {
-      this.#removePlugins.push("Mention", "WoltlabMention");
+      this.#removePlugins.push("WoltlabMention");
     }
   }
 

ts/WoltLabSuite/Core/Form/Builder/Field/SelectOptions.ts

@@ -0,0 +1,174 @@
+import { identify } from "WoltLabSuite/Core/Dom/Util";
+import { getPhrase } from "WoltLabSuite/Core/Language";
+import { getValues, init as initI18n } from "WoltLabSuite/Core/Language/Input";
+import Sortable from "sortablejs";
+
+type Data = {
+  key: string;
+  value: Record<string, string>;
+};
+
+type Languages = Record<string, string>;
+
+let _languages: Languages;
+
+export function setup(formField: HTMLInputElement, languages: Languages): void {
+  _languages = languages;
+
+  const ul = createUi(formField);
+
+  formField.form?.addEventListener("submit", () => {
+    setHiddenValue(formField);
+  });
+
+  new Sortable(ul, {
+    direction: "vertical",
+    animation: 150,
+    fallbackOnBody: true,
+    draggable: "li",
+    handle: ".selectOptionsListItem__handle",
+  });
+}
+
+function createUi(formField: HTMLInputElement): HTMLUListElement {
+  const ul = document.createElement("ul");
+  ul.classList.add("selectOptionsList");
+  formField.parentElement?.append(ul);
+
+  if (formField.value) {
+    const data = JSON.parse(formField.value) as Data[];
+    data.forEach((option) => {
+      createRow(ul, option);
+    });
+  } else {
+    createRow(ul);
+  }
+
+  return ul;
+}
+
+function createRow(ul: HTMLUListElement, option?: Data, autoFocus: boolean = false): void {
+  const li = document.createElement("li");
+  li.classList.add("selectOptionsListItem");
+  ul.append(li);
+
+  const addButton = getAddButton();
+  addButton.addEventListener("click", () => {
+    createRow(ul, undefined, true);
+  });
+
+  const deleteButton = getDeleteButton();
+  deleteButton.addEventListener("click", () => {
+    li.remove();
+
+    if (!ul.childElementCount) {
+      createRow(ul);
+    }
+  });
+
+  const keyInput = getKeyInput();
+  keyInput.addEventListener("keydown", (event) => {
+    if (event.key === "Enter") {
+      event.preventDefault();
+      createRow(ul, undefined, true);
+    }
+  });
+  keyInput.value = option ? option.key : "";
+
+  const equalsIcon = document.createElement("fa-icon");
+  equalsIcon.setIcon("equals");
+
+  const valueInput = getValueInput();
+  valueInput.addEventListener("keydown", (event) => {
+    if (event.key === "Enter") {
+      event.preventDefault();
+      createRow(ul, undefined, true);
+    }
+  });
+
+  li.append(getSortableHandle(), addButton, deleteButton, keyInput, equalsIcon, valueInput);
+
+  const hasI18nValues = option && !Object.hasOwn(option.value, 0);
+
+  initI18n(identify(valueInput), hasI18nValues ? option.value : {}, _languages, false);
+
+  if (!hasI18nValues) {
+    valueInput.value = option?.value[0] ?? "";
+  }
+
+  if (autoFocus) {
+    keyInput.focus();
+  }
+}
+
+function getAddButton(): HTMLButtonElement {
+  const addIcon = document.createElement("fa-icon");
+  addIcon.setIcon("plus");
+
+  const addButton = document.createElement("button");
+  addButton.type = "button";
+  addButton.append(addIcon);
+  addButton.classList.add("jsTooltip");
+  addButton.title = getPhrase("wcf.global.button.add");
+
+  return addButton;
+}
+
+function getDeleteButton(): HTMLButtonElement {
+  const deleteIcon = document.createElement("fa-icon");
+  deleteIcon.setIcon("xmark");
+
+  const deleteButton = document.createElement("button");
+  deleteButton.type = "button";
+  deleteButton.append(deleteIcon);
+  deleteButton.classList.add("jsTooltip");
+  deleteButton.title = getPhrase("wcf.global.button.delete");
+
+  return deleteButton;
+}
+
+function getKeyInput(): HTMLInputElement {
+  const keyInput = document.createElement("input");
+  keyInput.classList.add("selectOptionsListItem__key");
+  keyInput.placeholder = getPhrase("wcf.form.selectOptions.key");
+  keyInput.type = "text";
+  keyInput.required = true;
+
+  return keyInput;
+}
+
+function getValueInput(): HTMLInputElement {
+  const valueInput = document.createElement("input");
+  valueInput.classList.add("selectOptionsListItem__value");
+  valueInput.placeholder = getPhrase("wcf.form.selectOptions.value");
+  valueInput.type = "text";
+  valueInput.required = true;
+
+  return valueInput;
+}
+
+function getSortableHandle(): HTMLElement {
+  const icon = document.createElement("fa-icon");
+  icon.setIcon("up-down");
+  const handle = document.createElement("span");
+  handle.append(icon);
+  handle.classList.add("selectOptionsListItem__handle");
+
+  return handle;
+}
+
+function setHiddenValue(formField: HTMLInputElement): void {
+  const data: Data[] = [];
+
+  formField.parentElement?.querySelectorAll(".selectOptionsListItem").forEach((li) => {
+    const key = li.querySelector<HTMLInputElement>(".selectOptionsListItem__key")!.value;
+    const valueInput = li.querySelector<HTMLInputElement>(".selectOptionsListItem__value")!;
+
+    data.push({
+      key,
+      value: Object.fromEntries(getValues(valueInput.id)),
+    });
+  });
+
+  formField.value = JSON.stringify(data);
+}

wcfsetup/install/files/acp/database/update_com.woltlab.wcf_6.2.php → wcfsetup/install/files/acp/database/update_com.woltlab.wcf_6.2_step1.php

@@ -9,6 +9,9 @@
  */
 
 use wcf\system\database\table\column\IntDatabaseTableColumn;
+use wcf\system\database\table\column\MediumtextDatabaseTableColumn;
+use wcf\system\database\table\column\TextDatabaseTableColumn;
+use wcf\system\database\table\column\TinyintDatabaseTableColumn;
 use wcf\system\database\table\index\DatabaseTableForeignKey;
 use wcf\system\database\table\PartialDatabaseTable;
 
@@ -46,5 +49,13 @@
                 ->referencedTable('wcf1_file')
                 ->referencedColumns(['fileID'])
                 ->onDelete('SET NULL'),
-        ])
+        ]),
+    PartialDatabaseTable::create('wcf1_contact_option')
+        ->columns([
+            MediumtextDatabaseTableColumn::create('configuration'),
+        ]),
+    PartialDatabaseTable::create('wcf1_file')
+        ->columns([
+            IntDatabaseTableColumn::create('uploadTime'),
+        ]),
 ];

wcfsetup/install/files/acp/database/update_com.woltlab.wcf_6.2_step2.php

@@ -0,0 +1,28 @@
+<?php
+
+/**
+ * Updates the database layout during the update from 6.1 to 6.2.
+ *
+ * @author    Olaf Braun
+ * @copyright 2001-2024 WoltLab GmbH
+ * @license   GNU Lesser General Public License <http://opensource.org/licenses/lgpl-license.php>
+ */
+
+use wcf\system\database\table\column\MediumtextDatabaseTableColumn;
+use wcf\system\database\table\column\TextDatabaseTableColumn;
+use wcf\system\database\table\column\TinyintDatabaseTableColumn;
+use wcf\system\database\table\PartialDatabaseTable;
+
+return [
+    PartialDatabaseTable::create('wcf1_contact_option')
+        ->columns([
+            MediumtextDatabaseTableColumn::create('defaultValue')
+                ->drop(),
+            TextDatabaseTableColumn::create('validationPattern')
+                ->drop(),
+            MediumtextDatabaseTableColumn::create('selectOptions')
+                ->drop(),
+            TinyintDatabaseTableColumn::create('required')
+                ->drop(),
+        ]),
+];