Mass Ban Tool 1.0.0

[argowizbang]

Initial release of a new add-on. Mass Ban Tool adds a tool (which can be pulled up by clicking the ban button on the bottom left of the mod view page, under the FFZ Control Panel button) which allows for mass banning/unbanning of users.

[SirStendec]

In addition to the things I've noted, you should probably switch to using JSX for creating your DOM elements. It'll give you a better experience in-editor, make it simpler to bind events to nodes, and even let you save references to nodes if you'd like so you can avoid needing to grab elements by class name or ID.

To use JSX from a FrankerFaceZ extension, you need to make sure your filename ends with .jsx rather than .js. Additionally, since you aren't using React, you'll want to add this 'import' to your file:

const { createElement } = FrankerFaceZ.utilities.dom;

Once you do that, you do things like:

const modalCloseBtn = (<button class="tw-button-icon tw-mg-x-05" onClick={() => this.removeMassBanToolModal()}>
    <span class="tw-button-icon__icon">
        <figure class="ffz-i-window-close" />
    </span>
</button>);

No chance of XSS. Easier to work with in the editor.

---

I haven't tested the functionality at this time, though I assume you've done that yourself. My main concern there is the issue in how rate limiting is implemented. It needs a fix to ensure users don't encounter problems.

[SirStendec]

You're using font awesome icons, but those may not be loaded into the page already. Before showing this UI to the user, you should ensure the icon font is loaded by calling the method FrankerFaceZ.utilities.fontAwesome.load().

[argowizbang]

Oops, that was supposed to be changed to use .ffz-i-block but I must have undone it accidentally at some point. Will get that fixed.

[SirStendec]

We want to avoid using innerHTML whenever possible, if for no other reason than minimizing friction when getting the add-on approved when uploaded using manifest v3. Even though this is a static string, I'd prefer if you used JSX and/or manipulated DOM nodes directly.

[argowizbang]

I had initially tried doing things via JSX but for some reason I kept hitting an error while trying to import createElement, so I must have simply had some dumb typo or something I was missing while trying to do so. Will get that worked on. Thanks!

[SirStendec]

actionUser is an async method, which you're attempting to use to apply rate limiting, but you aren't actually awaiting the result of the method so everything will run at once, leaving a bunch of dangling promises that don't do anything in effect.

You'll need to make this an asynchronous method itself so you can await each actionUser call. Additionally, you'll want to make sure that the method can't be called when it is already running to avoid any issues with it running twice and therefore breaking the limit that way.

[argowizbang]

An oversight, will work on that.

[SirStendec]

There's a helper method you can import from FFZ for this, you don't need to roll your own.

const { sleep } = FrankerFaceZ.utilities.object;

// then...
await sleep(350);

[argowizbang]

Perfect, thanks.