breaking: move ban/mute modals

breaking: add accounts/moderate module and move ban/mute there

public/scss/generics.scss

@@ -116,20 +116,6 @@
 	}
 }
 
-.ban-modal {
-	.form-inline, .form-group {
-		width: 100%;
-	}
-
-	.units {
-		line-height: 5rem;
-	}
-}
-
-.admin .ban-modal .units {
-	line-height: 1.846;
-}
-
 #crop-picture-modal {
 	#cropped-image {
 		max-width: 100%;

public/src/admin/manage/users.js

@@ -166,7 +166,7 @@ define('admin/manage/users', [
 				return false; // specifically to keep the menu open
 			}
 
-			Benchpress.render('admin/partials/temporary-ban', {}).then(function (html) {
+			Benchpress.render('modals/temporary-ban', {}).then(function (html) {
 				bootbox.dialog({
 					className: 'ban-modal',
 					title: '[[user:ban_account]]',

public/src/client/account/header.js

@@ -6,32 +6,26 @@ define('forum/account/header', [
 	'pictureCropper',
 	'components',
 	'translator',
-	'benchpress',
 	'accounts/delete',
+	'accounts/moderate',
 	'api',
 	'bootbox',
 	'alerts',
-], function (coverPhoto, pictureCropper, components, translator, Benchpress, AccountsDelete, api, bootbox, alerts) {
+], function (coverPhoto, pictureCropper, components, translator, AccountsDelete, AccountsModerate, api, bootbox, alerts) {
 	const AccountHeader = {};
 	let isAdminOrSelfOrGlobalMod;
 
 	AccountHeader.init = function () {
 		isAdminOrSelfOrGlobalMod = ajaxify.data.isAdmin || ajaxify.data.isSelf || ajaxify.data.isGlobalModerator;
 
-		hidePrivateLinks();
 		selectActivePill();
 
 		if (isAdminOrSelfOrGlobalMod) {
 			setupCoverPhoto();
 		}
 
-		components.get('account/follow').on('click', function () {
-			toggleFollow('follow');
-		});
-
-		components.get('account/unfollow').on('click', function () {
-			toggleFollow('unfollow');
-		});
+		components.get('account/follow').on('click', () => toggleFollow('follow'));
+		components.get('account/unfollow').on('click', () => toggleFollow('unfollow'));
 
 		components.get('account/chat').on('click', async function () {
 			const roomId = await socket.emit('modules.chats.hasPrivateChat', ajaxify.data.uid);
@@ -50,45 +44,20 @@ define('forum/account/header', [
 			});
 		});
 
-
-		components.get('account/ban').on('click', function () {
-			banAccount(ajaxify.data.theirid);
-		});
-		components.get('account/mute').on('click', function () {
-			muteAccount(ajaxify.data.theirid);
-		});
-		components.get('account/unban').on('click', function () {
-			unbanAccount(ajaxify.data.theirid);
-		});
-		components.get('account/unmute').on('click', function () {
-			unmuteAccount(ajaxify.data.theirid);
-		});
-		components.get('account/delete-account').on('click', handleDeleteEvent.bind(null, 'account'));
-		components.get('account/delete-content').on('click', handleDeleteEvent.bind(null, 'content'));
-		components.get('account/delete-all').on('click', handleDeleteEvent.bind(null, 'purge'));
+		components.get('account/ban').on('click', () => AccountsModerate.banAccount(ajaxify.data.theirid));
+		components.get('account/mute').on('click', () => AccountsModerate.muteAccount(ajaxify.data.theirid));
+		components.get('account/unban').on('click', () => AccountsModerate.unbanAccount(ajaxify.data.theirid));
+		components.get('account/unmute').on('click', () => AccountsModerate.unmuteAccount(ajaxify.data.theirid));
+		components.get('account/delete-account').on('click', () => AccountsDelete.account(ajaxify.data.theirid));
+		components.get('account/delete-content').on('click', () => AccountsDelete.content(ajaxify.data.theirid));
+		components.get('account/delete-all').on('click', () => AccountsDelete.purge(ajaxify.data.theirid));
 		components.get('account/flag').on('click', flagAccount);
 		components.get('account/block').on('click', toggleBlockAccount);
 	};
 
-	function handleDeleteEvent(type) {
-		AccountsDelete[type](ajaxify.data.theirid);
-	}
-
-	// TODO: This exported method is used in forum/flags/detail -- refactor??
-	AccountHeader.banAccount = banAccount;
-	AccountHeader.muteAccount = muteAccount;
-	AccountHeader.unbanAccount = unbanAccount;
-	AccountHeader.unmuteAccount = unmuteAccount;
-
-	function hidePrivateLinks() {
-		if (!app.user.uid || app.user.uid !== parseInt(ajaxify.data.theirid, 10)) {
-			$('.account-sub-links .plugin-link.private').addClass('hide');
-		}
-	}
-
 	function selectActivePill() {
-		$('.account-sub-links li').removeClass('active').each(function () {
-			const href = $(this).find('a').attr('href');
+		$('.account-sub-links li a').removeClass('active').each(function () {
+			const href = $(this).attr('href');
 
 			if (decodeURIComponent(href) === decodeURIComponent(window.location.pathname)) {
 				$(this).addClass('active');
@@ -139,102 +108,6 @@ define('forum/account/header', [
 		return false;
 	}
 
-	function banAccount(theirid, onSuccess) {
-		theirid = theirid || ajaxify.data.theirid;
-
-		Benchpress.render('admin/partials/temporary-ban', {}).then(function (html) {
-			bootbox.dialog({
-				className: 'ban-modal',
-				title: '[[user:ban_account]]',
-				message: html,
-				show: true,
-				buttons: {
-					close: {
-						label: '[[global:close]]',
-						className: 'btn-link',
-					},
-					submit: {
-						label: '[[user:ban_account]]',
-						callback: function () {
-							const formData = $('.ban-modal form').serializeArray().reduce(function (data, cur) {
-								data[cur.name] = cur.value;
-								return data;
-							}, {});
-
-							const until = formData.length > 0 ? (
-								Date.now() + (formData.length * 1000 * 60 * 60 * (parseInt(formData.unit, 10) ? 24 : 1))
-							) : 0;
-
-							api.put('/users/' + theirid + '/ban', {
-								until: until,
-								reason: formData.reason || '',
-							}).then(() => {
-								if (typeof onSuccess === 'function') {
-									return onSuccess();
-								}
-
-								ajaxify.refresh();
-							}).catch(alerts.error);
-						},
-					},
-				},
-			});
-		});
-	}
-
-	function unbanAccount(theirid) {
-		api.del('/users/' + theirid + '/ban').then(() => {
-			ajaxify.refresh();
-		}).catch(alerts.error);
-	}
-
-	function muteAccount(theirid, onSuccess) {
-		theirid = theirid || ajaxify.data.theirid;
-		Benchpress.render('admin/partials/temporary-mute', {}).then(function (html) {
-			bootbox.dialog({
-				className: 'mute-modal',
-				title: '[[user:mute_account]]',
-				message: html,
-				show: true,
-				buttons: {
-					close: {
-						label: '[[global:close]]',
-						className: 'btn-link',
-					},
-					submit: {
-						label: '[[user:mute_account]]',
-						callback: function () {
-							const formData = $('.mute-modal form').serializeArray().reduce(function (data, cur) {
-								data[cur.name] = cur.value;
-								return data;
-							}, {});
-
-							const until = formData.length > 0 ? (
-								Date.now() + (formData.length * 1000 * 60 * 60 * (parseInt(formData.unit, 10) ? 24 : 1))
-							) : 0;
-
-							api.put('/users/' + theirid + '/mute', {
-								until: until,
-								reason: formData.reason || '',
-							}).then(() => {
-								if (typeof onSuccess === 'function') {
-									return onSuccess();
-								}
-								ajaxify.refresh();
-							}).catch(alerts.error);
-						},
-					},
-				},
-			});
-		});
-	}
-
-	function unmuteAccount(theirid) {
-		api.del('/users/' + theirid + '/mute').then(() => {
-			ajaxify.refresh();
-		}).catch(alerts.error);
-	}
-
 	function flagAccount() {
 		require(['flags'], function (flags) {
 			flags.showFlagModal({

public/src/client/flags/detail.js

@@ -1,8 +1,8 @@
 'use strict';
 
 define('forum/flags/detail', [
-	'components', 'translator', 'benchpress', 'forum/account/header', 'accounts/delete', 'api', 'bootbox', 'alerts',
-], function (components, translator, Benchpress, AccountHeader, AccountsDelete, api, bootbox, alerts) {
+	'components', 'translator', 'benchpress', 'accounts/moderate', 'accounts/delete', 'api', 'bootbox', 'alerts',
+], function (components, translator, Benchpress, AccountModerate, AccountsDelete, api, bootbox, alerts) {
 	const Detail = {};
 
 	Detail.init = function () {
@@ -66,19 +66,19 @@ define('forum/flags/detail', [
 					break;
 
 				case 'ban':
-					AccountHeader.banAccount(uid, ajaxify.refresh);
+					AccountModerate.banAccount(uid, ajaxify.refresh);
 					break;
 
 				case 'unban':
-					AccountHeader.unbanAccount(uid);
+					AccountModerate.unbanAccount(uid);
 					break;
 
 				case 'mute':
-					AccountHeader.muteAccount(uid, ajaxify.refresh);
+					AccountModerate.muteAccount(uid, ajaxify.refresh);
 					break;
 
 				case 'unmute':
-					AccountHeader.unmuteAccount(uid);
+					AccountModerate.unmuteAccount(uid);
 					break;
 
 				case 'delete-account':

public/src/modules/accounts/moderate.js

@@ -0,0 +1,108 @@
+'use strict';
+
+define('forum/account/moderate', [
+	'benchpress',
+	'api',
+	'bootbox',
+	'alerts',
+], function (Benchpress, api, bootbox, alerts) {
+	const AccountModerate = {};
+
+	AccountModerate.banAccount = function (theirid, onSuccess) {
+		theirid = theirid || ajaxify.data.theirid;
+
+		Benchpress.render('modals/temporary-ban', {}).then(function (html) {
+			bootbox.dialog({
+				className: 'ban-modal',
+				title: '[[user:ban_account]]',
+				message: html,
+				show: true,
+				buttons: {
+					close: {
+						label: '[[global:close]]',
+						className: 'btn-link',
+					},
+					submit: {
+						label: '[[user:ban_account]]',
+						callback: function () {
+							const formData = $('.ban-modal form').serializeArray().reduce(function (data, cur) {
+								data[cur.name] = cur.value;
+								return data;
+							}, {});
+
+							const until = formData.length > 0 ? (
+								Date.now() + (formData.length * 1000 * 60 * 60 * (parseInt(formData.unit, 10) ? 24 : 1))
+							) : 0;
+
+							api.put('/users/' + theirid + '/ban', {
+								until: until,
+								reason: formData.reason || '',
+							}).then(() => {
+								if (typeof onSuccess === 'function') {
+									return onSuccess();
+								}
+
+								ajaxify.refresh();
+							}).catch(alerts.error);
+						},
+					},
+				},
+			});
+		});
+	};
+
+	AccountModerate.unbanAccount = function (theirid) {
+		api.del('/users/' + theirid + '/ban').then(() => {
+			ajaxify.refresh();
+		}).catch(alerts.error);
+	};
+
+	AccountModerate.muteAccount = function (theirid, onSuccess) {
+		theirid = theirid || ajaxify.data.theirid;
+		Benchpress.render('modals/temporary-mute', {}).then(function (html) {
+			bootbox.dialog({
+				className: 'mute-modal',
+				title: '[[user:mute_account]]',
+				message: html,
+				show: true,
+				buttons: {
+					close: {
+						label: '[[global:close]]',
+						className: 'btn-link',
+					},
+					submit: {
+						label: '[[user:mute_account]]',
+						callback: function () {
+							const formData = $('.mute-modal form').serializeArray().reduce(function (data, cur) {
+								data[cur.name] = cur.value;
+								return data;
+							}, {});
+
+							const until = formData.length > 0 ? (
+								Date.now() + (formData.length * 1000 * 60 * 60 * (parseInt(formData.unit, 10) ? 24 : 1))
+							) : 0;
+
+							api.put('/users/' + theirid + '/mute', {
+								until: until,
+								reason: formData.reason || '',
+							}).then(() => {
+								if (typeof onSuccess === 'function') {
+									return onSuccess();
+								}
+								ajaxify.refresh();
+							}).catch(alerts.error);
+						},
+					},
+				},
+			});
+		});
+	};
+
+	AccountModerate.unmuteAccount = function (theirid) {
+		api.del('/users/' + theirid + '/mute').then(() => {
+			ajaxify.refresh();
+		}).catch(alerts.error);
+	};
+
+	return AccountModerate;
+});

src/views/admin/partials/temporary-ban.tpl

@@ -1,32 +0,0 @@
-<form class="form">
-	<div class="row">
-		<div class="col-4">
-			<div class="mb-3">
-				<label for="length">[[admin/manage/users:temp-ban.length]]</label>
-				<input class="form-control" id="length" name="length" type="number" min="0" value="1" />
-			</div>
-		</div>
-		<div class="col-8">
-			<div class="mb-3">
-				<label for="reason">[[admin/manage/users:temp-ban.reason]]</label>
-				<input type="text" class="form-control" id="reason" name="reason" />
-			</div>
-		</div>
-	</div>
-	<div class="row">
-		<div class="col-sm-4 text-center">
-			<div class="mb-3 units">
-				<label>[[admin/manage/users:temp-ban.hours]]</label>
-				<input type="radio" name="unit" value="0" checked />
-				&nbsp;&nbsp;
-				<label>[[admin/manage/users:temp-ban.days]]</label>
-				<input type="radio" name="unit" value="1" />
-			</div>
-		</div>
-		<div class="col-sm-8">
-			<p class="form-text">
-				[[admin/manage/users:temp-ban.explanation]]
-			</p>
-		</div>
-	</div>
-</form>

src/views/admin/partials/temporary-mute.tpl

@@ -1,27 +0,0 @@
-<form class="form">
-	<div class="row">
-		<div class="col-4">
-			<div class="mb-3">
-				<label for="length">[[admin/manage/users:temp-ban.length]]</label>
-				<input class="form-control" id="length" name="length" type="number" min="0" value="1" />
-			</div>
-		</div>
-		<div class="col-8">
-			<div class="mb-3">
-				<label for="reason">[[admin/manage/users:temp-ban.reason]]</label>
-				<input type="text" class="form-control" id="reason" name="reason" />
-			</div>
-		</div>
-	</div>
-	<div class="row">
-		<div class="col-sm-4 text-center">
-			<div class="mb-3 units">
-				<label>[[admin/manage/users:temp-ban.hours]]</label>
-				<input type="radio" name="unit" value="0" checked />
-				&nbsp;&nbsp;
-				<label>[[admin/manage/users:temp-ban.days]]</label>
-				<input type="radio" name="unit" value="1" />
-			</div>
-		</div>
-	</div>
-</form>

src/views/modals/temporary-ban.tpl

@@ -0,0 +1,33 @@
+<form class="form">
+	<div class="row">
+		<div class="col-12">
+			<div class="mb-3">
+				<p class="form-text">
+					[[admin/manage/users:temp-ban.explanation]]
+				</p>
+			</div>
+		</div>
+	</div>
+	<div class="row">
+		<div class="col-5">
+			<div class="mb-3">
+				<label class="form-label" for="length">[[admin/manage/users:temp-ban.length]]</label>
+				<input class="form-control" id="length" name="length" type="number" min="0" value="1" />
+			</div>
+			<div class="form-check form-check-inline">
+				<label class="form-check-label">[[admin/manage/users:temp-ban.hours]]</label>
+				<input class="form-check-input" type="radio" name="unit" value="0" checked />
+			</div>
+			<div class="form-check form-check-inline">
+				<label class="form-check-label">[[admin/manage/users:temp-ban.days]]</label>
+				<input class="form-check-input" type="radio" name="unit" value="1" />
+			</div>
+		</div>
+		<div class="col-7">
+			<div class="mb-3">
+				<label class="form-label" for="reason">[[admin/manage/users:temp-ban.reason]]</label>
+				<input type="text" class="form-control" id="reason" name="reason" />
+			</div>
+		</div>
+	</div>
+</form>

src/views/modals/temporary-mute.tpl

@@ -0,0 +1,24 @@
+<form class="form">
+	<div class="row">
+		<div class="col-5">
+			<div class="mb-3">
+				<label class="form-label" for="length">[[admin/manage/users:temp-ban.length]]</label>
+				<input class="form-control" id="length" name="length" type="number" min="0" value="1" />
+			</div>
+			<div class="form-check form-check-inline">
+				<label class="form-check-label">[[admin/manage/users:temp-ban.hours]]</label>
+				<input class="form-check-input" type="radio" name="unit" value="0" checked />
+			</div>
+			<div class="form-check form-check-inline">
+				<label class="form-check-label">[[admin/manage/users:temp-ban.days]]</label>
+				<input class="form-check-input" type="radio" name="unit" value="1" />
+			</div>
+		</div>
+		<div class="col-7">
+			<div class="">
+				<label class="form-label" for="reason">[[admin/manage/users:temp-ban.reason]]</label>
+				<input type="text" class="form-control" id="reason" name="reason" />
+			</div>
+		</div>
+	</div>
+</form>