Question

我们的挑战：

在我看来，Polymer 1.0开发者社区目前面临以下挑战：

我们没有要关注的用户auth UX示例。 This Stackoverflow question请求用户身份验证用户体验示例。并描述了为什么需要它。 This Github issue还记录了此类用户auth UX示例的多个用户请求。 Polymer Slack Site关于这个问题也有很多轶事喋喋不休。
模式目前不在<paper-drawer-panel>内工作。 This open bug issue report，this Stackoverflow question及其接受的答案共同证明错误需要{ {1}}元素必须超出任何<paper-dialog modal>元素才能使<paper-drawer-panel>正确呈现（即，在模态背景前，而不是在其后面）。 This issue report和this Stackoverflow question也验证相同。
但是面板内的模态已成为事实上的标准auth UX设计。在我看来，现代Web应用程序设计的原则是用户身份验证按钮（例如modal和login）进入相当于任何版本或＆＃34;模拟＆＃34;任何给定的Web应用程序signup碰巧使用。 （此外，这些身份验证按钮通常出现在应用程序每个屏幕的右上角，直到用户登录。然后，它们将替换为指示登录状态的图标或链接。）

代码示例：

请参阅代码示例contained here（在问答中）。对于这个问题，该代码也是一样的。

问题：

Polymer 1.0开发社区如何才能最好地应对这些挑战并构建最佳的用户身份验证用户体验？也许上述事实或假设存在错误？也许某人有可以分享的直接（或解决方案）解决方案？也许来自Google的Polymer团队的人想要加入？欢迎任何和所有想法，建议，反馈和答案。

Answer 1

在this bug报告rubenstolk上提供了以下的黑客修复：

要以一种很好的方式实现@dhpollack的hack，请将此函数添加到自定义元素中：

// https://github.com/PolymerElements/paper-dialog/issues/7
patchOverlay: function (e) {
  if (e.target.withBackdrop) {
    e.target.parentNode.insertBefore(e.target._backdrop, e.target);
  }
},

并将on-iron-overlay-opened="patchOverlay"添加到您<paper-dialog>的所有
中

我测试了它并验证它是否有效。所以现在，这解决了问题中的挑战＃2。因此，我认为现在等到the bug被修复就足够了。

Answer 2

默认情况下，我修改了PSK添加登录表单，该表单由纸质标题面板构成，修改未经身份验证的用户的路线并隐藏工具栏。这是通过

完成的

document.getElementById('headerContainer').style.display='none';
document.getElementById('mainContainer').style.paddingTop=0;

UI再次出现

document.getElementById('headerContainer').style.display='block';
document.getElementById('mainContainer').style.paddingTop=168px;

这只是解决方案的开始。对于一个完整的解决方案，我想要一个支持通用主机和常用OAuth站点的铁认证元素。

Polymer 1.0：如果模态必须在<paper-drawer-panel>之外，如何在Polymer中设计现代身份验证UX？

2 个答案: