Override locked users status pill color

[nstCactus]

One of our clients is nostalgic of a Craft 2 user index behavior: users with the (temporary) locked status (due to too many incorrect login attempts) would be displayed next to an orange pill. In Craft 3, they're given a green pill.

Apparently this is a real problem for them ¯\(ツ)/¯

I thought I could solve this with a CSS override but unfortunately the only classes we get on the pill element are status active, which corresponds to the green pill.

I've looked for events or hooks that I could use to change this behavior but didn't find anything.

Would it be possible to add a locked class after status active for locked users, to allow CSS overrides of the color of the pill?

[brandonkelly]

You could register a custom data-locked attribute on user elements using a custom module:

use craft\elements\User;
use craft\events\RegisterElementHtmlAttributesEvent;
use yii\base\Event;

Event::on(
    User::class,
    User::EVENT_REGISTER_HTML_ATTRIBUTES,
    function(RegisterElementHtmlAttributesEvent $event) {
        /** @var User $user */
        $user = $event->sender;
        
        if ($user->locked) {
            $event->htmlAttributes['data-locked'] = '1';
        }
    }
);

[nstCactus]

Nice one! Every time I think I'm starting to know my way around Craft, I discover new things!

Unfortunately that doesn't work great for a transitive status such as locked because of server-side caching. It may or may not work depending on what's in the cache and as the status is gone in the next 24h, we cannot afford to wait until the cache is invalidated "naturally" for displaying the correct info. Clearing the cache with craft clear-caches/all solves it but it's not a viable solution for production.

And would you happen to have a suggestion for the pill shown in the edit user page?

Anyways, thanks for the quick reply!

[nstCactus]

After trying again this morning, it appears to work with no cache issues. I guess I was just working too late yesterday… Thank you very much for your help.

[brandonkelly]

Looks like we weren’t clearing user caches after login attempts, so you could end up with users showing up as unlocked after they were locked. Just fixed that for the next release (48953f7).

[brandonkelly]

Craft 3.7.29 is out now with the additional cache-clearing on login.

[nstCactus]

I somehow found a dirty hack for the edit user page:

Using the cp.users.edit.details hook, I can output some CSS, directly in the page like this:

Craft::$app->view->hook('cp.users.edit.details', static function (&$context, &$handled) {
    /** @var User $user */
    $user = $context['user'];
    if ($user->locked) {
        return '
                <style>
                    body.use-shapes.status.active {
                        background-color: transparent;
                        border-style: solid;
                        border-width: 0 5px 10px 5px;
                        border-color: transparent transparent #cb6e17 transparent;
                        border-radius: 1px;
                    }
                    .status.active{
                        background-color: #cb6e17;
                    }
                </style>';
    }
});

Not pretty but it gets the job done!