From 3ab800d49f555cb1900eb15f693b81e3cf8cce1b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bar=C4=B1=C5=9F=20Soner=20U=C5=9Fakl=C4=B1?=
 <barisusakli@gmail.com>
Date: Wed, 12 Oct 2022 12:40:35 -0400
Subject: [PATCH] refactor: move embedded group create modal

and fix its styling
---
 public/src/admin/manage/groups.js             | 89 +++++++++++--------
 src/views/admin/manage/groups.tpl             | 45 ----------
 .../admin/partials/create_group_modal.tpl     | 39 ++++++++
 3 files changed, 89 insertions(+), 84 deletions(-)
 create mode 100644 src/views/admin/partials/create_group_modal.tpl

diff --git a/public/src/admin/manage/groups.js b/public/src/admin/manage/groups.js
index 28b00a00da..bd31f38dba 100644
--- a/public/src/admin/manage/groups.js
+++ b/public/src/admin/manage/groups.js
@@ -10,48 +10,11 @@ define('admin/manage/groups', [
 	const Groups = {};
 
 	Groups.init = function () {
-		const createModal = $('#create-modal');
-		const createGroupName = $('#create-group-name');
-		const createModalGo = $('#create-modal-go');
-		const createModalError = $('#create-modal-error');
+
+		handleCreate();
 
 		handleSearch();
 
-		createModal.on('keypress', function (e) {
-			if (e.keyCode === 13) {
-				createModalGo.click();
-			}
-		});
-
-		$('#create').on('click', function () {
-			createModal.modal('show');
-			setTimeout(function () {
-				createGroupName.focus();
-			}, 250);
-		});
-
-		createModalGo.on('click', function () {
-			const submitObj = {
-				name: createGroupName.val(),
-				description: $('#create-group-desc').val(),
-				private: $('#create-group-private').is(':checked') ? 1 : 0,
-				hidden: $('#create-group-hidden').is(':checked') ? 1 : 0,
-			};
-
-			api.post('/groups', submitObj).then((response) => {
-				createModalError.addClass('hide');
-				createGroupName.val('');
-				createModal.on('hidden.bs.modal', function () {
-					ajaxify.go('admin/manage/groups/' + response.name);
-				});
-				createModal.modal('hide');
-			}).catch((err) => {
-				if (!utils.hasLanguageKey(err.status.message)) {
-					err.status.message = '[[admin/manage/groups:alerts.create-failure]]';
-				}
-				createModalError.translateHtml(err.status.message).removeClass('hide');
-			});
-		});
 
 		$('.groups-list').on('click', '[data-action]', function () {
 			const el = $(this);
@@ -84,6 +47,54 @@ define('admin/manage/groups', [
 		});
 	}
 
+	function handleCreate() {
+		$('#create').on('click', function () {
+			app.parseAndTranslate('admin/partials/create_group_modal', {}).then((html) => {
+				html.modal('show');
+
+				html.on('shown.bs.modal', function () {
+					const createModal = $('#create-modal');
+					const createGroupName = $('#create-group-name');
+					const createModalGo = $('#create-modal-go');
+					const createModalError = $('#create-modal-error');
+
+					createGroupName.trigger('focus');
+					createModal.on('keypress', function (e) {
+						if (e.key === 'Enter') {
+							createModalGo.trigger('click');
+						}
+					});
+					html.on('hidden.bs.modal', function () {
+						html.modal('hide');
+						createModal.remove();
+					});
+					createModalGo.on('click', function () {
+						const submitObj = {
+							name: createGroupName.val(),
+							description: $('#create-group-desc').val(),
+							private: $('#create-group-private').is(':checked') ? 1 : 0,
+							hidden: $('#create-group-hidden').is(':checked') ? 1 : 0,
+						};
+
+						api.post('/groups', submitObj).then((response) => {
+							createModalError.addClass('hide');
+							createGroupName.val('');
+							createModal.on('hidden.bs.modal', function () {
+								ajaxify.go('admin/manage/groups/' + response.name);
+							});
+							createModal.modal('hide');
+						}).catch((err) => {
+							if (!utils.hasLanguageKey(err.status.message)) {
+								err.status.message = '[[admin/manage/groups:alerts.create-failure]]';
+							}
+							createModalError.translateHtml(err.status.message).removeClass('hide');
+						});
+					});
+				});
+			});
+		});
+	}
+
 	function handleSearch() {
 		const queryEl = $('#group-search');
 
diff --git a/src/views/admin/manage/groups.tpl b/src/views/admin/manage/groups.tpl
index fc43cf762d..bb744136a1 100644
--- a/src/views/admin/manage/groups.tpl
+++ b/src/views/admin/manage/groups.tpl
@@ -60,51 +60,6 @@
 
 		<!-- IMPORT partials/paginator.tpl -->
 	</div>
-
-	<div class="modal fade" id="create-modal">
-		<div class="modal-dialog">
-			<div class="modal-content">
-				<div class="modal-header">
-					<h4 class="modal-title">[[admin/manage/groups:create]]</h4>
-					<button type="button" class="btn-close" data-bs-dismiss="modal" aria-hidden="true"></button>
-				</div>
-				<div class="modal-body">
-					<div class="alert alert-danger hide" id="create-modal-error"></div>
-					<form>
-						<div class="form-group">
-							<label for="create-group-name">[[admin/manage/groups:name]]</label>
-							<input type="text" class="form-control" id="create-group-name" placeholder="[[admin/manage/groups:name]]" />
-						</div>
-						<div class="form-group">
-							<label for="create-group-desc">[[admin/manage/groups:description]]</label>
-							<input type="text" class="form-control" id="create-group-desc" placeholder="[[admin/manage/groups:description-placeholder]]" />
-						</div>
-						<div class="form-group">
-							<label>
-								<input id="create-group-private" name="private" type="checkbox" checked>
-								<strong>[[admin/manage/groups:private]]</strong>
-							</label>
-						</div>
-						<div class="form-group">
-							<label>
-								<input id="create-group-hidden" name="hidden" type="checkbox">
-								<strong>[[admin/manage/groups:hidden]]</strong>
-							</label>
-						</div>
-
-					</form>
-				</div>
-				<div class="modal-footer">
-					<button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">
-						[[global:close]]
-					</button>
-					<button type="button" class="btn btn-primary" id="create-modal-go">
-						[[admin/manage/groups:create-button]]
-					</button>
-				</div>
-			</div>
-		</div>
-	</div>
 </div>
 
 <button id="create" class="floating-button mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-button--colored">
diff --git a/src/views/admin/partials/create_group_modal.tpl b/src/views/admin/partials/create_group_modal.tpl
new file mode 100644
index 0000000000..13e54f1332
--- /dev/null
+++ b/src/views/admin/partials/create_group_modal.tpl
@@ -0,0 +1,39 @@
+<div class="modal fade" id="create-modal">
+	<div class="modal-dialog">
+		<div class="modal-content">
+			<div class="modal-header">
+				<h4 class="modal-title">[[admin/manage/groups:create]]</h4>
+				<button type="button" class="btn-close" data-bs-dismiss="modal" aria-hidden="true"></button>
+			</div>
+			<div class="modal-body">
+				<div class="alert alert-danger hide" id="create-modal-error"></div>
+				<form>
+					<div class="mb-3">
+						<label class="form-label" for="create-group-name">[[admin/manage/groups:name]]</label>
+						<input type="text" class="form-control" id="create-group-name" placeholder="[[admin/manage/groups:name]]" />
+					</div>
+					<div class="mb-3">
+						<label class="form-label" for="create-group-desc">[[admin/manage/groups:description]]</label>
+						<input type="text" class="form-control" id="create-group-desc" placeholder="[[admin/manage/groups:description-placeholder]]" />
+					</div>
+					<div class="form-check">
+						<input class="form-check-input" id="create-group-private" name="private" type="checkbox" checked>
+						<label class="form-check-label" for="create-group-private">[[admin/manage/groups:private]]</label>
+					</div>
+					<div class="form-check">
+						<input class="form-check-input" id="create-group-hidden" name="hidden" type="checkbox">
+						<label class="form-check-label" for="create-group-hidden">[[admin/manage/groups:hidden]]</label>
+					</div>
+				</form>
+			</div>
+			<div class="modal-footer">
+				<button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">
+					[[global:close]]
+				</button>
+				<button type="button" class="btn btn-primary" id="create-modal-go">
+					[[admin/manage/groups:create-button]]
+				</button>
+			</div>
+		</div>
+	</div>
+</div>
\ No newline at end of file