Admin delete user flow

public/scripts/templates/admin.html

@@ -77,10 +77,12 @@
             </h3>
             <div class="flex-container flexNoGap">
                 <span data-i18n="User Handle:">User Handle:</span>
+                <span class="warning">*</span>
                 <input name="handle" class="text_pole" placeholder="Lowercase letters, numbers, and dashes only." type="text" pattern="[a-z0-9-]+">
             </div>
             <div class="flex-container flexNoGap">
                 <span data-i18n="Display Name:">Display Name:</span>
+                <span class="warning">*</span>
                 <input name="_name" class="text_pole" type="text" placeholder="Anonymous" autocomplete="username">
             </div>
             <div class="flex-container flexNoGap">

public/scripts/templates/deleteUser.html

@@ -0,0 +1,24 @@
+<div class="flex-container flexFlowColumn">
+    <h3 data-i18n="Are you sure you want to delete this user?">
+        Are you sure you want to delete this user?
+    </h3>
+    <div>
+        <span data-i18n="Deleting:">Deleting:</span>
+        <strong id="deleteUserName"></strong>
+    </div>
+    <label class="checkbox_label justifyCenter" for="deleteUserData">
+        <input id="deleteUserData" name="deleteUserData" type="checkbox">
+        <span data-i18n="Also wipe user data.">Also wipe user data.</span>
+    </label>
+    <hr>
+    <div>
+        <strong data-i18n="Warning:">Warning:</strong>
+        <span data-i18n="This action is irreversible.">This action is irreversible.</span>
+    </div>
+    <div>
+        <label for="deleteUserHandle" data-i18n="Type the user's handle below to confirm:">
+            Type the user's handle below to confirm:
+        </label>
+        <input id="deleteUserHandle" name="deleteUserHandle" type="text" class="text_pole" placeholder="">
+    </div>
+</div>

public/scripts/user.js

@@ -308,6 +308,55 @@ async function changePassword(handle, callback) {
     }
 }
 
+async function deleteUser(handle, callback) {
+    try {
+        if (handle === currentUser.handle) {
+            toastr.error('Cannot delete yourself', 'Failed to delete user');
+            throw new Error('Cannot delete yourself');
+        }
+
+        let purge = false;
+        let confirmHandle = '';
+
+        const template = $(renderTemplate('deleteUser'));
+        template.find('#deleteUserName').text(handle);
+        template.find('input[name="deleteUserData"]').on('input', function () {
+            purge = $(this).is(':checked');
+        });
+        template.find('input[name="deleteUserHandle"]').on('input', function () {
+            confirmHandle = String($(this).val());
+        });
+
+        const result = await callGenericPopup(template, POPUP_TYPE.CONFIRM, '', { okButton: 'Delete', cancelButton: 'Cancel', wide: false, large: false });
+
+        if (result !== POPUP_RESULT.AFFIRMATIVE) {
+            throw new Error('Delete user cancelled');
+        }
+
+        if (handle !== confirmHandle) {
+            toastr.error('Handles do not match', 'Failed to delete user');
+            throw new Error('Handles do not match');
+        }
+
+        const response = await fetch('/api/users/delete', {
+            method: 'POST',
+            headers: getRequestHeaders(),
+            body: JSON.stringify({ handle, purge }),
+        });
+
+        if (!response.ok) {
+            const data = await response.json();
+            toastr.error(data.error || 'Unknown error', 'Failed to delete user');
+            throw new Error('Failed to delete user');
+        }
+
+        toastr.success('User deleted successfully', 'User Deleted');
+        callback();
+    } catch (error) {
+        console.error('Error deleting user:', error);
+    }
+}
+
 async function openAdminPanel() {
     async function renderUsers() {
         const users = await getUsers();
@@ -327,6 +376,7 @@ async function openAdminPanel() {
             userBlock.find('.userPromoteButton').toggle(!user.admin).on('click', () => promoteUser(user.handle, renderUsers));
             userBlock.find('.userDemoteButton').toggle(user.admin).on('click', () => demoteUser(user.handle, renderUsers));
             userBlock.find('.userChangePasswordButton').on('click', () => changePassword(user.handle, renderUsers));
+            userBlock.find('.userDelete').on('click', () => deleteUser(user.handle, renderUsers));
             userBlock.find('.userBackupButton').on('click', function () {
                 $(this).addClass('disabled').off('click');
                 backupUserData(user.handle, renderUsers);