如何在Gigya中显示/隐藏密码字段

Question

我使用Gigya外部的html，js和css在右侧创建了带有'eye'的密码字段。密码字段中的文本将通过单击眼睛隐藏/显示。 enter image description here

我想在Gigya做同样的事情。然而，问题来了 - 如果我编辑html文件，我将无法再次使用UI Builder。 2. Gigya的RaaS中的Javascript参数不允许我添加js EXCEPT添加代码定义的函数。

我的问题是 - 我如何在Gigya中做到这一点？

如果我想使用enter image description here所示的复选框而不是'eye'，则Gigya如何处理此问题？

Answer 1

您可以将任何自定义css类添加到UI Builder的“CSS样式”选项卡中，它位于UI Builder左侧屏幕的底部（靠近JavaScript参数），然后您可以添加使用字段属性窗口的CSS Classes字段（选择字段时UI Builder的右侧）对密码字段进行分类。

您可以使用JavaScript编辑器在屏幕的onAfterScreenLoad事件中添加自定义JS，并在绘制屏幕后立即运行。 - 或者，您可以在函数中本地托管页面上的所有自定义JS，然后在showScreenSet调用中添加onAfterScreenLoad参数，即

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

任何HTML更改都会有点困难，但您可以使用JQuery或其他东西使用相同的事件来完成。我可以查看它，看看是否还有其他任何方式并在几天内更新。

11月12日，更新了一个工作示例：

这是一个功能性的例子，我只为登录屏幕做过，它还需要额外的工作才能完全支持注册屏幕：

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);
    }
});

11月14日，更新了其他信息

要仅通过UI Builder执行此操作，您可以将任何相关的CSS添加到UI Builder的“CSS样式”选项卡中：

然后，您可以将JavaScript添加到JavaScript参数选项卡：

Link to demo

如果您仍有问题，我建议您通过Gigya控制台打开支持服务单，我们可以查看您的具体用例。