Implements suggest a username on the register page.

public/src/client/register.js

@@ -1,13 +1,52 @@
 'use strict';
 
-
 define('forum/register', [
     'translator', 'slugify', 'api', 'bootbox', 'forum/login', 'zxcvbn', 'jquery-form',
 ], function (translator, slugify, api, bootbox, Login, zxcvbn) {
     const Register = {};
     let validationError = false;
     const successIcon = '';
 
+    // --- Suggestion helpers (English-only for this recitation task) ---
+    const SUG_SUFFIX = 'suffix';
+    function suggestUsername(base) {
+        // Suggestion is based on the slugified base attempt
+        const s = slugify(base || '');
+        return s ? (s + SUG_SUFFIX) : '';
+    }
+    function showUsernameTakenWithSuggestion(element, attempted) {
+        const suggestion = suggestUsername(attempted);
+        // Build a small inline UI with a clickable suggestion
+        translator.translate('[[error:username-taken]]', function (msg) {
+            const html = `
+                <span>${msg}</span>
+                ${suggestion ? ` — <span>Try: </span>
+                <button type="button" id="apply-username-suggestion" class="btn btn-link btn-sm p-0 align-baseline">
+                    ${utils.escapeHTML(suggestion)}
+                </button>` : ''}
+            `;
+            element.html(html);
+            element.parent()
+                .removeClass('register-success')
+                .addClass('register-danger');
+            element.show();
+
+            // Wire the click to apply suggestion & re-validate
+            const btn = document.getElementById('apply-username-suggestion');
+            if (btn) {
+                btn.addEventListener('click', function () {
+                    const $username = $('#username');
+                    $username.val(suggestion);
+                    // Update the "mention you as" preview
+                    $('#yourUsername').text(suggestion || 'username');
+                    // Trigger re-validation
+                    validateUsername($username.val());
+                });
+            }
+        });
+        validationError = true;
+    }
+
     Register.init = function () {
         const username = $('#username');
         const password = $('#password');
@@ -119,24 +158,29 @@ define('forum/register', [
         if (username.length < ajaxify.data.minimumUsernameLength ||
             userslug.length < ajaxify.data.minimumUsernameLength) {
             showError(username_notify, '[[error:username-too-short]]');
+            return callback();
         } else if (username.length > ajaxify.data.maximumUsernameLength) {
             showError(username_notify, '[[error:username-too-long]]');
+            return callback();
         } else if (!utils.isUserNameValid(username) || !userslug) {
             showError(username_notify, '[[error:invalid-username]]');
-        } else {
-            Promise.allSettled([
-                api.head(`/users/bySlug/${username}`, {}),
-                api.head(`/groups/${username}`, {}),
-            ]).then((results) => {
-                if (results.every(obj => obj.status === 'rejected')) {
-                    showSuccess(username_notify, successIcon);
-                } else {
-                    showError(username_notify, '[[error:username-taken]]');
-                }
-
-                callback();
-            });
+            return callback();
         }
+
+        // IMPORTANT: check existence by slug, not raw username
+        Promise.allSettled([
+            api.head(`/users/bySlug/${userslug}`),
+            api.head(`/groups/${userslug}`),
+        ]).then((results) => {
+            // If both HEADs reject (404), it's available
+            if (results.every(obj => obj.status === 'rejected')) {
+                showSuccess(username_notify, successIcon);
+            } else {
+                // Taken: show suggestion inline (English only per task)
+                showUsernameTakenWithSuggestion(username_notify, username);
+            }
+            callback();
+        });
     }
 
     function validatePassword(password, password_confirm) {