How to force users to login on upvote click

Ask the community
1

Some of our users wanted to have an option to force users to sign-in before they can upvote.

The code below does exactly that (it needs to be added to the list’s page custom code header area)

<script>
/** Force users to signin before upvote click **/
document.addEventListener("DOMContentLoaded", function () {
    
    /** You might need to change the 'signin' with your own signin page path **/
    const signinPageUrl = window.location.host + '/signin';

    if(!window.logged_in_user || !window.logged_in_user['softr_user_email']) {
        $('.sw-js-upvote-button').unbind('click');
        $('.sw-js-upvote-button').click(function(event){
           window.location.href = signinPageUrl; 
        });
    }
    
});
<script>
2

If you are using new React based upvote list block this custom code should work for you.

    <style>
        .disable-upvote .upvote-button-container {
            cursor: pointer;
        }
        .disable-upvote .upvote-counter {
            pointer-events: none!important;
            margin-left: 0!important;
        }
    </style>
    <script>
        /** You might need to change the 'signin' with your own signin page path **/
        const signinPageUrl = window.location.host + '/signin';
        /** List block name **/
        const blockName = 'list1';

        window.addEventListener(`block-loaded-${blockName}`, () => {
            if(!window.logged_in_user || !window.logged_in_user['softr_user_email']) {
                document.getElementById(blockName).classList.add('disable-upvote');
                document.body.addEventListener('click', (e) => {
                    if (e.target.closest(`#${blockName} .upvote-button-container`)) {
                        window.location.href = signinPageUrl;
                    }
                });
            }
        });
    </script>
4 Likes
3

Thanks for this Zaven!