How to show/hide password field in Gigya

I created password field with 'eye' on the right side by using html, js and css outside Gigya. The text in the password field will hide/show by clicking the eye. enter image description here

I am trying to do the same in Gigya. However, the problem comes - 1. I'll be unable to use UI Builder again if I edit the html file. 2. Javascript parameter in RaaS of Gigya does not allow me the add js EXCEPT adding the code the defined functions.

My question is - how do I do that in Gigya?

If I want to use check box as shown enter image description here instead of 'eye', how does Gigya handle this?

You can add any custom css classes to the CSS Styles tab of the UI Builder, it is near the bottom of the left-hand list of the screens in the UI Builder (near the JavaScript Parameters) and then you can add the class to the password fields using the CSS Classes field of the fields Property window (right-hand side of the UI Builder when the field is selected).

You can add your custom JS inside the onAfterScreenLoad event of the screen, using the JavaScript editor, and it will run immediately after the screen is drawn. - Alternatively, you can host all the custom JS on the page locally in a function and then just add the onAfterScreenLoad param inside the showScreenSet call, i.e.,

gigya.accounts.showScreenSet({
   "screenSet": "Default-RegistrationLogin",
   "onAfterScreenLoad": myFunctionName
});

Any HTML changes will be a little more difficult, but you may be able to do it using that same event with JQuery or something. I can look into it and see if there is any other way and update in a couple days.

Nov 12th, Updated with a working example:

Here is a functioning example, I only did it for the login screen, it will need additional work to fully support the registration screen also:

gigya.accounts.showScreenSet({
    "screenSet": "Default-RegistrationLogin",
    "onAfterScreenLoad": function() {
        var fieldToChange = document.getElementsByName('password')[0];
        var newPwDiv = document.createElement('div');
        newPwDiv.id = 'passSwitch';
        newPwDiv.innerHTML = "-O-"; // change this out with your image
        newPwDiv.setAttribute('style', 'float: right !important; color: red !important; z-index: 9999999999999999999 !important; display: block !important; position: absolute; margin: -41 0 0 334; cursor: pointer !important; text-align: center;');

        // add eventListener
        newPwDiv.addEventListener("click", function() {
            var currentValue = fieldToChange.type;
            if (currentValue === 'password') {
                fieldToChange.type = "text";
            } else {
                fieldToChange.type = "password"
            }
        });
        // attach to password field
        fieldToChange.parentElement.appendChild(newPwDiv);
    }
});

November 14th, Updated with additional Info

To do this via the UI Builder only, you can add any relevant CSS to the CSS Styles tab of the UI Builder:

You can then add your JavaScript to the JavaScript Parameters tab:

Link to demo Updated

If you still are having issues, I suggest opening a Support ticket via your Gigya Console and we can look into your specific use-case.