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

Question

我们的挑战：

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

我们没有可遵循的用户身份验证 UX 示例。 requests a user authentication UX example. And describes why it's needed. This Github issue also documents multiple user requests for such a user auth UX example. And there has also been lots of anecdotal chatter on the Polymer Slack Site 关于此问题也是如此。
Modals 目前在 <paper-drawer-panel> 中不起作用。 This open bug issue report, and its accepted answer collectively prove that a bug requires <paper-dialog modal> elements must go outside any <paper-drawer-panel> element in order for the modal to render properly (i.e., in front of the modal's backdrop, not behind it). This issue report and 也验证相同。
但是面板内的模式已经成为事实上的标准身份验证 UX 设计。 在我看来，现代 Web 应用程序设计的一个原则是用户身份验证按钮（例如, login 和 signup) 进入任何给定网络应用恰好使用的任何版本或 <paper-drawer-panel> 的 "analog" 的等价物。 （此外，这些授权按钮通常出现在应用程序每个屏幕的右上角，直到用户登录。然后它们被替换为图标或 link 指示登录状态。）

代码示例：

参考代码示例（在问答中）。这个问题的代码也是一样的。

问题：

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

Answer 1

在 this bug report 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 固定就足够了。

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 站点的 iron auth 元素。

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

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

authentication

user-experience

modal-dialog

polymer

polymer-1.0