Hiding Volt blog icons for non-admin users on the login page

Tips and Tricks
1

Hi All,
On a website with multiple Volt Blogs that are managed by my staff, I added a blog to the Volt login page to provide instructions for my staff. However, the Volt Blog buttons were still visible, allowing my staff to make changes to my instructions.
The following code fixes this by controlling the visibility of the Volt Blog icons based on the logged-in user. Simply hardcode the “USER NAME” and add the code to the footer of the login page.

<script>
document.addEventListener("DOMContentLoaded", function() {
    function hideElementsIfNotUser() {
        var usernameElement = document.querySelector(".volt-login-username");
        
        if (usernameElement && usernameElement.textContent.trim().toLowerCase() !== "USER NAME") {
            document.querySelectorAll(
                ".volt-blog-item-action.mt-2, " + 
                ".ct-ignition__button--edit, " + 
                ".ct-ignition__button--logout, " + 
                ".ct-ignition__button--blog"
            ).forEach(function(el) {
                el.style.display = "none";
            });
        }
    }

    // Ensure script runs on every page load
    setTimeout(hideElementsIfNotUser, 500); // Delay for elements to load

    // Observe for changes in the document (for dynamically loaded elements)
    const observer = new MutationObserver(hideElementsIfNotUser);
    observer.observe(document.body, { childList: true, subtree: true });
});
</script>

Shoutout to @Jannis and Adrian of @vibralogix for developing incredible Blocsapp extensions, making it possible for me to build an academy platform for my customers!

3 Likes