fix: use slug instead of groupname in acp for groups

#13286, acp page was inaccessible

public/openapi/read.yaml

@@ -136,8 +136,8 @@ paths:
     $ref: 'read/admin/manage/admins-mods.yaml'
   /api/admin/manage/groups:
     $ref: 'read/admin/manage/groups.yaml'
-  "/api/admin/manage/groups/{name}":
+  "/api/admin/manage/groups/{slug}":
-    $ref: 'read/admin/manage/groups/name.yaml'
+    $ref: 'read/admin/manage/groups/slug.yaml'
   /api/admin/manage/uploads:
     $ref: 'read/admin/manage/uploads.yaml'
   /api/admin/manage/digest:

public/openapi/read/admin/manage/groups/slug.yaml

@@ -3,7 +3,7 @@ get:
     - admin
   summary: Get user group details
   parameters:
-    - name: name
+    - name: slug
       in: path
       required: true
       schema:
@@ -29,6 +29,8 @@ get:
                           type: string
                         displayName:
                           type: string
+                        slug:
+                          type: string
                         selected:
                           type: boolean
                   allowPrivateGroups:

public/src/admin/manage/group.js

@@ -27,10 +27,6 @@ define('admin/manage/group', [
 
 		const groupName = ajaxify.data.group.name;
 
-		$('#group-selector').on('change', function () {
-			ajaxify.go('admin/manage/groups/' + $(this).val() + window.location.hash);
-		});
-
 		memberList.init('admin/manage/group');
 
 		changeGroupUserTitle.on('keyup', function () {

src/controllers/admin/groups.js

@@ -9,7 +9,6 @@ const groups = require('../../groups');
 const meta = require('../../meta');
 const pagination = require('../../pagination');
 const events = require('../../events');
-const slugify = require('../../slugify');
 
 const groupsController = module.exports;
 
@@ -23,7 +22,7 @@ groupsController.list = async function (req, res) {
 	const stop = start + groupsPerPage - 1;
 	groupNames = groupNames.slice(start, stop + 1);
 
-	const groupData = await groups.getGroupsData(groupNames);
+	const groupData = await groups.getGroupsData(groupNames.map(g => g.name));
 	res.render('admin/manage/groups', {
 		groups: groupData,
 		pagination: pagination.create(page, pageCount),
@@ -32,8 +31,16 @@ groupsController.list = async function (req, res) {
 };
 
 groupsController.get = async function (req, res, next) {
-	const slug = slugify(req.params.name);
+	const lowercaseSlug = req.params.slug.toLowerCase();
-	const groupName = await groups.getGroupNameByGroupSlug(slug);
+	if (req.params.slug !== lowercaseSlug) {
+		if (res.locals.isAPI) {
+			req.params.slug = lowercaseSlug;
+		} else {
+			return res.redirect(`${nconf.get('relative_path')}/admin/manage/groups/${lowercaseSlug}`);
+		}
+	}
+
+	const groupName = await groups.getGroupNameByGroupSlug(req.params.slug);
 	if (!groupName) {
 		return next();
 	}
@@ -46,10 +53,11 @@ groupsController.get = async function (req, res, next) {
 		return next();
 	}
 
-	const groupNameData = groupNames.map(name => ({
+	const groupNameData = groupNames.map(g => ({
-		encodedName: encodeURIComponent(name),
+		encodedName: encodeURIComponent(g.name),
-		displayName: validator.escape(String(name)),
+		displayName: validator.escape(String(g.name)),
-		selected: name === groupName,
+		slug: g.slug,
+		selected: g.name === groupName,
 	}));
 
 	res.render('admin/manage/group', {
@@ -62,13 +70,14 @@ groupsController.get = async function (req, res, next) {
 };
 
 async function getGroupNames() {
-	const groupNames = Object.values(await db.getObject('groupslug:groupname'));
+	let groupEntries = Object.entries(await db.getObject('groupslug:groupname'));
-	return groupNames.filter(name => (
+	groupEntries = groupEntries.map(g => ({ slug: g[0], name: g[1] }));
-		name !== 'registered-users' &&
+	return groupEntries.filter(g => (
-		name !== 'verified-users' &&
+		g.name !== 'registered-users' &&
-		name !== 'unverified-users' &&
+		g.name !== 'verified-users' &&
-		name !== groups.BANNED_USERS
+		g.name !== 'unverified-users' &&
-	)).sort((a, b) => a.toLowerCase().localeCompare(b.toLowerCase()));
+		g.name !== groups.BANNED_USERS
+	)).sort((a, b) => a.name.toLowerCase().localeCompare(b.name.toLowerCase()));
 }
 
 groupsController.getCSV = async function (req, res) {

src/routes/admin.js

@@ -28,7 +28,7 @@ module.exports = function (app, name, middleware, controllers) {
 	helpers.setupAdminPageRoute(app, `/${name}/manage/admins-mods`, middlewares, controllers.admin.adminsMods.get);
 
 	helpers.setupAdminPageRoute(app, `/${name}/manage/groups`, middlewares, controllers.admin.groups.list);
-	helpers.setupAdminPageRoute(app, `/${name}/manage/groups/:name`, middlewares, controllers.admin.groups.get);
+	helpers.setupAdminPageRoute(app, `/${name}/manage/groups/:slug`, middlewares, controllers.admin.groups.get);
 
 	helpers.setupAdminPageRoute(app, `/${name}/manage/uploads`, middlewares, controllers.admin.uploads.get);
 	helpers.setupAdminPageRoute(app, `/${name}/manage/digest`, middlewares, controllers.admin.digest.get);

src/views/admin/extend/widgets.tpl

@@ -16,7 +16,7 @@
 					</button>
 					<ul class="dropdown-menu {{{ if config.isRTL }}}dropdown-menu-end{{{ end }}} p-1" role="menu">
 						{{{ each templates }}}
-						<li><a class="dropdown-item rounded-1 d-flex justify-content-between align-items-center gap-3" href="#" data-template="{./template}" data-toggle="pill" role="menuitem">{./template} <span class="badge text-bg-light border" style="min-width: 2.15em;">{./widgetCount}</span></a></li>
+						<li><a class="dropdown-item rounded-1 d-flex justify-content-between align-items-center gap-3" href="#" data-template="{./template}" role="menuitem">{./template} <span class="badge text-bg-light border" style="min-width: 2.15em;">{./widgetCount}</span></a></li>
 						{{{ end }}}
 					</ul>
 				</div>

src/views/admin/manage/group.tpl

@@ -20,8 +20,8 @@
 							<a class="dropdown-item rounded-1" role="menuitem">[[search:no-matches]]</a>
 						</li>
 						{{{ each groupNames }}}
-						<li role="presentation" class="group" data-name="{groupNames.displayName}">
+						<li role="presentation" class="group" data-name="{./displayName}">
-							<a class="dropdown-item rounded-1" href="{config.relative_path}/admin/manage/groups/{groupNames.encodedName}" role="menuitem">{groupNames.displayName}</a>
+							<a class="dropdown-item rounded-1" href="{config.relative_path}/admin/manage/groups/{./slug}" role="menuitem">{./displayName}</a>
 						</li>
 						{{{ end }}}
 					</ul>