Use file processor for user avatar

com.woltlab.wcf/fileDelete.xml

@@ -1678,6 +1678,7 @@
 		<file>lib/data/user/option/IUserOptionOutput.class.php</file>
 		<file>lib/data/user/option/UserOptionOutput.class.php</file>
 		<file>lib/form/AbstractSecureForm.class.php</file>
+		<file>lib/form/AvatarEditForm.class.php</file>
 		<file>lib/form/Form.class.php</file>
 		<file>lib/form/MailForm.class.php</file>
 		<file>lib/form/MultifactorAuthenticationAbortForm.class.php</file>
@@ -2962,6 +2963,8 @@
 		<file>lib/system/template/plugin/TemplatePluginPrefilterIcon.class.php</file>
 		<file>lib/system/template/plugin/TemplatePluginPrefilterLang.class.php</file>
 		<file>lib/system/template/plugin/WordwrapModifierTemplatePlugin.class.php</file>
+		<file>lib/system/upload/AvatarUploadFileSaveStrategy.class.php</file>
+		<file>lib/system/upload/AvatarUploadFileValidationStrategy.class.php</file>
 		<file>lib/system/user/UserCollapsibleContentHandler.class.php</file>
 		<file>lib/system/user/activity/point/AbstractUserActivityPointObjectProcessor.class.php</file>
 		<file>lib/system/user/activity/point/DefaultUserActivityPointObjectProcessor.class.php</file>

com.woltlab.wcf/objectType.xml

@@ -1744,6 +1744,11 @@
 			<definitionname>com.woltlab.wcf.file</definitionname>
 			<classname>wcf\system\file\processor\AttachmentFileProcessor</classname>
 		</type>
+		<type>
+			<name>com.woltlab.wcf.user.avatar</name>
+			<definitionname>com.woltlab.wcf.file</definitionname>
+			<classname>wcf\system\file\processor\UserAvatarFileProcessor</classname>
+		</type>
 		<!-- deprecated -->
 		<type>
 			<name>com.woltlab.wcf.page.controller</name>

com.woltlab.wcf/page.xml

@@ -100,20 +100,6 @@
 				<title>Benutzerkonto-Sicherheit</title>
 			</content>
 		</page>
-		<page identifier="com.woltlab.wcf.AvatarEdit">
-			<pageType>system</pageType>
-			<controller>wcf\form\AvatarEditForm</controller>
-			<name language="de">Avatar-Verwaltung</name>
-			<name language="en">Avatar Management</name>
-			<hasFixedParent>1</hasFixedParent>
-			<parent>com.woltlab.wcf.AccountManagement</parent>
-			<content language="en">
-				<title>Avatar Management</title>
-			</content>
-			<content language="de">
-				<title>Avatar-Verwaltung</title>
-			</content>
-		</page>
 		<page identifier="com.woltlab.wcf.EmailActivation">
 			<pageType>system</pageType>
 			<controller>wcf\form\EmailActivationForm</controller>
@@ -888,6 +874,7 @@ E-Mail: [E-Mail-Adresse der verantwortlichen Stelle]</p><p>Verantwortliche Stell
 		</page>
 	</import>
 	<delete>
+		<page identifier="com.woltlab.wcf.AvatarEdit"/>
 		<!-- The notification list is no longer part of the user menu. -->
 		<page identifier="com.woltlab.wcf.NotificationList"/>
 	</delete>

com.woltlab.wcf/templateDelete.xml

@@ -116,5 +116,6 @@
 		<template>__multiPageCondition</template>
 		<template>__multilineItemListFormField</template>
 		<template>email_notification_userRegistration</template>
+		<template>avatarEdit</template>
 	</delete>
 </data>

com.woltlab.wcf/templates/user.tpl

@@ -112,21 +112,32 @@
 		{/if}
 		{/if}>
 		<div class="userProfileCoverPhoto" style="background-image: url({$user->getCoverPhoto()->getURL()})">
-			{if ($user->userID == $__wcf->user->userID || $user->canEdit()) && ($__wcf->getSession()->getPermission('user.profile.coverPhoto.canUploadCoverPhoto') || $user->coverPhotoHash)}
-				<div class="userProfileManageCoverPhoto dropdown jsOnly">
-					<a href="#" class="button small dropdownToggle">{icon name='pencil'} {lang}wcf.user.coverPhoto.edit{/lang}</a>
-					<ul class="dropdownMenu">
-						{if $__wcf->getSession()->getPermission('user.profile.coverPhoto.canUploadCoverPhoto')}
-							<li><a href="#" class="jsButtonUploadCoverPhoto jsStaticDialog" data-dialog-id="userProfileCoverPhotoUpload">{lang}wcf.user.coverPhoto.upload{/lang}</a></li>
-						{/if}
-						<li{if !$user->coverPhotoHash} style="display:none;"{/if}><a href="#" class="jsButtonDeleteCoverPhoto">{lang}wcf.user.coverPhoto.delete{/lang}</a></li>
-					</ul>
-				</div>
-			{/if}
+			<ul class="userProfileManageCoverPhoto buttonGroup buttonList smallButtons">
+				{if ($user->userID == $__wcf->user->userID || $user->canEdit()) && ($__wcf->getSession()->getPermission('user.profile.coverPhoto.canUploadCoverPhoto') || $user->coverPhotoHash)}
+					<li class="dropdown jsOnly">
+						<a href="#" class="button small dropdownToggle">{icon name='pencil'} {lang}wcf.user.coverPhoto.edit{/lang}</a>
+						<ul class="dropdownMenu">
+							{if $__wcf->getSession()->getPermission('user.profile.coverPhoto.canUploadCoverPhoto')}
+								<li><a href="#" class="jsButtonUploadCoverPhoto jsStaticDialog" data-dialog-id="userProfileCoverPhotoUpload">{lang}wcf.user.coverPhoto.upload{/lang}</a></li>
+							{/if}
+							<li{if !$user->coverPhotoHash} style="display:none;"{/if}><a href="#" class="jsButtonDeleteCoverPhoto">{lang}wcf.user.coverPhoto.delete{/lang}</a></li>
+						</ul>
+					</li>
+				{/if}
+				{if $user->canEditAvatar()}
+					<li>
+						<button type="button" data-edit-avatar="{link controller="UserAvatar" id=$user->userID}{/link}" class="button small">
+							{lang}wcf.user.avatar.edit{/lang}
+						</button>
+					</li>
+				{/if}
+			</ul>
 		</div>
 		<div class="contentHeaderIcon">
-			{if $user->userID == $__wcf->user->userID}
-				<a href="{link controller='AvatarEdit'}{/link}" class="jsTooltip" title="{lang}wcf.user.avatar.edit{/lang}">{@$user->getAvatar()->getImageTag(128)}</a>
+			{if $user->canEditAvatar()}
+				<button type="button" data-edit-avatar="{link controller="UserAvatar" id=$user->userID}{/link}" class="jsTooltip pointer" title="{lang}wcf.user.avatar.edit{/lang}">
+					{unsafe:$user->getAvatar()->getImageTag(128)}
+				</button>
 			{else}
 				<span>{@$user->getAvatar()->getImageTag(128)}</span>
 			{/if}

com.woltlab.wcf/userMenu.xml

@@ -16,11 +16,6 @@
 			<parent>wcf.user.menu.profile</parent>
 			<showorder>2</showorder>
 		</usermenuitem>
-		<usermenuitem name="wcf.user.menu.profile.avatar">
-			<controller>wcf\form\AvatarEditForm</controller>
-			<parent>wcf.user.menu.profile</parent>
-			<showorder>3</showorder>
-		</usermenuitem>
 		<usermenuitem name="wcf.user.menu.profile.signature">
 			<controller>wcf\form\SignatureEditForm</controller>
 			<parent>wcf.user.menu.profile</parent>
@@ -63,5 +58,6 @@
 	</import>
 	<delete>
 		<usermenuitem name="wcf.user.menu.community.notification"/>
+		<usermenuitem name="wcf.user.menu.profile.avatar"/>
 	</delete>
 </data>

ts/WoltLabSuite/Core/Bootstrap.ts

@@ -157,6 +157,9 @@ export function setup(options: BoostrapOptions): void {
   whenFirstSeen("[data-report-content]", () => {
     void import("./Ui/Moderation/Report").then(({ setup }) => setup());
   });
+  whenFirstSeen("[data-edit-avatar]", () => {
+    void import("./Component/User/Avatar").then(({ setup }) => setup());
+  });
 
   whenFirstSeen("woltlab-core-pagination", () => {
     void import("./Ui/Pagination/JumpToPage").then(({ setup }) => setup());

ts/WoltLabSuite/Core/Component/User/Avatar.ts

@@ -0,0 +1,53 @@
+/**
+ * Handles the user avatar edit buttons.
+ *
+ * @author    Olaf Braun
+ * @copyright 2001-2024 WoltLab GmbH
+ * @license   GNU Lesser General Public License <http://opensource.org/licenses/lgpl-license.php>
+ * @since     6.2
+ */
+
+import { promiseMutex } from "WoltLabSuite/Core/Helper/PromiseMutex";
+import { wheneverFirstSeen } from "WoltLabSuite/Core/Helper/Selector";
+import { dialogFactory } from "WoltLabSuite/Core/Component/Dialog";
+import { show as showNotification } from "WoltLabSuite/Core/Ui/Notification";
+import UiCloseOverlay from "WoltLabSuite/Core/Ui/CloseOverlay";
+
+interface Result {
+  avatar: string;
+}
+
+async function editAvatar(button: HTMLElement): Promise<void> {
+  // If the user is editing their own avatar, the control panel is open and can overlay the dialog.
+  UiCloseOverlay.execute();
+
+  const { ok, result } = await dialogFactory().usingFormBuilder().fromEndpoint<Result>(button.dataset.editAvatar!);
+
+  if (ok) {
+    const avatarForm = document.getElementById("avatarForm");
+    if (avatarForm) {
+      // In the ACP, the form should not be reloaded after changing the avatar.
+      avatarForm.querySelector<HTMLImageElement>("img.userAvatarImage")!.src = result.avatar;
+      showNotification();
+    } else {
+      window.location.reload();
+    }
+  }
+}
+
+export function setup(): void {
+  wheneverFirstSeen(
+    "#wcf\\\\action\\\\UserAvatarAction_avatarFileIDContainer woltlab-core-file img",
+    (img: HTMLImageElement) => {
+      img.classList.add("userAvatarImage");
+      img.parentElement!.classList.add("userAvatar");
+    },
+  );
+
+  wheneverFirstSeen("[data-edit-avatar]", (button) => {
+    button.addEventListener(
+      "click",
+      promiseMutex(() => editAvatar(button)),
+    );
+  });
+}

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

@@ -0,0 +1,29 @@
+<?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\IntDatabaseTableColumn;
+use wcf\system\database\table\index\DatabaseTableForeignKey;
+use wcf\system\database\table\PartialDatabaseTable;
+
+return [
+    PartialDatabaseTable::create('wcf1_user')
+        ->columns([
+            IntDatabaseTableColumn::create('avatarFileID')
+                ->length(10)
+                ->defaultValue(null),
+        ])
+        ->foreignKeys([
+            DatabaseTableForeignKey::create()
+                ->columns(['avatarFileID'])
+                ->referencedTable('wcf1_file')
+                ->referencedColumns(['fileID'])
+                ->onDelete('SET NULL'),
+        ]),
+];

wcfsetup/install/files/acp/templates/userAdd.tpl

@@ -600,32 +600,23 @@
 				<section class="section avatarEdit">
 					<h2 class="sectionTitle">{lang}wcf.user.avatar{/lang}</h2>
 
-					<dl class="avatarType">
+					<dl>
 						<dt></dt>
 						<dd>
-							<label><input type="radio" name="avatarType" value="none"{if $avatarType == 'none'} checked{/if}> {lang}wcf.user.avatar.type.none{/lang}</label>
-						</dd>
-					</dl>
-
-					<dl class="avatarType jsOnly{if $errorType[customAvatar]|isset} formError{/if}" id="avatarUpload">
-						<dt>
 							{if $avatarType == 'custom' && $userAvatar !== null}
-								{@$userAvatar->getImageTag(96)}
+								<img src="{$userAvatar->getLink()}" alt="" class="userAvatarImage" height="96" width="96">
 							{else}
 								<img src="{@$__wcf->getPath()}images/avatars/avatar-default.svg" alt="" class="userAvatarImage" height="96" width="96">
 							{/if}
-						</dt>
-						<dd>
-							<label><input type="radio" name="avatarType" value="custom"{if $avatarType == 'custom'} checked{/if}> {lang}wcf.user.avatar.type.custom{/lang}</label>
-
-							{* placeholder for upload button: *}
-							<div class="avatarUploadButtonContainer"></div>
+						</dd>
+					</dl>
 
-							{if $errorType[customAvatar]|isset}
-								<small class="innerError">
-									{if $errorType[customAvatar] == 'empty'}{lang}wcf.global.form.error.empty{/lang}{/if}
-								</small>
-							{/if}
+					<dl>
+						<dt></dt>
+						<dd>
+							<button type="button" class="button userAvatarManagement" data-edit-avatar="{link controller="UserAvatar" forceFrontend=true id=$user->userID}{/link}">
+								{lang}wcf.user.avatarManagement{/lang}
+							</button>
 						</dd>
 					</dl>
 
@@ -695,23 +686,6 @@
 					</script>
 				{/if}
 
-				<script data-relocate="true" src="{@$__wcf->getPath()}js/WCF.Message.js?v={@LAST_UPDATE_TIME}"></script>
-				<script data-relocate="true" src="{@$__wcf->getPath()}js/WCF.User.js?v={@LAST_UPDATE_TIME}"></script>
-				<script data-relocate="true">
-					$(function() {
-						WCF.Language.addObject({
-							'wcf.user.avatar.upload.error.invalidExtension': '{jslang}wcf.user.avatar.upload.error.invalidExtension{/jslang}',
-							'wcf.user.avatar.upload.error.tooSmall': '{jslang}wcf.user.avatar.upload.error.tooSmall{/jslang}',
-							'wcf.user.avatar.upload.error.tooLarge': '{jslang}wcf.user.avatar.upload.error.tooLarge{/jslang}',
-							'wcf.user.avatar.upload.error.uploadFailed': '{jslang}wcf.user.avatar.upload.error.uploadFailed{/jslang}',
-							'wcf.user.avatar.upload.error.badImage': '{jslang}wcf.user.avatar.upload.error.badImage{/jslang}',
-							'wcf.user.avatar.upload.success': '{jslang}wcf.user.avatar.upload.success{/jslang}'
-						});
-
-						new WCF.User.Avatar.Upload({@$user->userID});
-					});
-				</script>
-
 				{event name='avatarFieldsets'}
 			</div>