authentication - polymer 1.0 : How to design a modern authentication UX in Polymer if modals must go outside <paper-drawer-panel>?

Question

我们的挑战:

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

1. 我们没有可遵循的用户身份验证 UX 示例。 This Stackoverflow question 请求用户身份验证 UX 示例。并描述了为什么需要它。 This Github issue 还记录了多个用户对此类用户身份验证 UX 示例的请求。在 Polymer Slack Site 上也有很多关于这个问题的传闻。

2. Modals 目前不能在 <paper-drawer-panel> 内工作。 This open bug issue report 、 this Stackoverflow question 和它接受的答案共同证明一个错误要求 <paper-dialog modal> 元素必须在任何 <paper-drawer-panel> 元素之外才能呈现 modal正确地(即，在模态背景的前面，而不是后面)。 This issue report 和 this Stackoverflow question 也验证相同。

3. 但面板内的模式已经成为事实上的标准身份验证 UX 设计。在我看来，用户身份验证按钮(例如 login 和 signup )进入内部是现代网络应用程序设计的一个原则相当于任何给定网络应用碰巧使用的 <paper-drawer-panel> 的任何版本或“模拟”。 (此外，这些授权按钮通常会出现在应用程序每个屏幕的右上角，直到用户登录。然后它们会被替换为指示登录状态的图标或链接。)

代码示例:

引用代码示例 contained here(在问答中)。该代码对于这个问题也是一样的。

问题:

我们 Polymer 1.0 开发社区如何才能最好地应对这些挑战并打造最佳的用户身份验证 UX 体验？也许我的上述事实或假设有误？也许有人可以分享直接(或解决方法)的解决方案？或许 Google 的 Polymer 团队的某个人愿意插话？欢迎任何想法、建议、反馈和答案。

Answer 1

关于 this bug报告 rubenstolk提供如下黑客修复:

To implement @dhpollack's hack in a nice way, add this function to your custom element:

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

And add on-iron-overlay-opened="patchOverlay" to all your <paper-dialog>'s

我已经对其进行了测试并验证它是否有效。所以现在，这解决了问题中的挑战#2。因此，我想现在等到 the bug 就足够了。是固定的。