Forum Discussion

jaread83's avatar
jaread83
Champion
8 years ago

Editting the login modal

Hi,

 

Is it possible to view the modal login/registration box in Studio? We want to make a small change to the login page and the modal version but can only see the page version in Studio (UserLoginPage).

 

Thanks :)

  • TariqHussain's avatar
    TariqHussain
    8 years ago

    jaread83- Thanks for providing the details. Yes adding the JS code to header or footer would work. Regarding the login fail state, if there is an error while signing in, a new element is being added to the HTML of login modal.

    <a name="feedback-error" li-common-non-bindable=""> </a>

    You will need to write a JS code to check, if login modal has this element.

  • TariqHussain's avatar
    TariqHussain
    8 years ago

    jaread83-
    Try the updated code.

    $('#lia-body').on('mouseup', '.UserLoginForm', function(e) {
    if (e.target.hasClass('lia-button-Submit-action')) {
        console.log('click submit button');
    }
});

    Or if you just want to bind the click event to the sign in button, you can use this code.

    $("#lia-body").on("mouseup", ".UserLoginForm .lia-button-Submit-action", function(){
   alert("clicked on submit");
})

8 Replies

Sort By
  • jaread83's avatar
    jaread83
    Champion
    8 years ago

    Hi Varun and Tariq,

     

    Thanks for replying :)

     

    We are looking to add something to the form to recognise when a login has been unsuccessful. Our analytics team want to get some stats on how often a user fails to login so it would be some javascript added to the page to feedback something to GTM. I am guessing that adding some javascript to the page header might be the only choice as you can login from anywhere on the site and I cant access the modal box in Studio...

  • TariqHussain's avatar
    TariqHussain
    Boss
    8 years ago

    jaread83- Thanks for providing the details. Yes adding the JS code to header or footer would work. Regarding the login fail state, if there is an error while signing in, a new element is being added to the HTML of login modal.

    <a name="feedback-error" li-common-non-bindable=""> </a>

    You will need to write a JS code to check, if login modal has this element.

  • jaread83's avatar
    jaread83
    Champion
    8 years ago
    Excellent, I think I have enough to go with on this :) Thanks for your input guys. Much appreciated.
  • jaread83's avatar
    jaread83
    Champion
    8 years ago

    Hey guys,

    I can’t seem to get a click event to bind to the ‘sign in’ button within the modal. Click events bound to any other element within the sign in form fire fine, but for some reason I just can’t get the submit button to play ball (it simply does nothing).

     

    $('#lia-body').on('click', '.UserLoginForm', function(e) {
    
    // This works fine
    console.log(‘clicked an element in login form with class:’ + e.target.attr('class'));
    
    // This should be true when I click the submit button, but it just won’t work
    if (e.target.hasClass('lia-button-Submit-action')) {
        console.log('click submit button');
    }

});

    Any ideas of what I can do?

  • TariqHussain's avatar
    TariqHussain
    Boss
    8 years ago

    jaread83-
    Try the updated code.

    $('#lia-body').on('mouseup', '.UserLoginForm', function(e) {
    if (e.target.hasClass('lia-button-Submit-action')) {
        console.log('click submit button');
    }
});

    Or if you just want to bind the click event to the sign in button, you can use this code.

    $("#lia-body").on("mouseup", ".UserLoginForm .lia-button-Submit-action", function(){
   alert("clicked on submit");
})