Polymer 1.0: How to create a modern authentication UX in Polymer when modals need to go beyond the <paper-drawer-panel>?
Our tasks:
It seems to me that the Polymer 1.0 developer community is facing the following issues right now:
-
We don't have a custom UX example. This StackOverflow question asks for a UX example for user authentication. And describes why it is needed. This Github issue also documents several custom requests for such a custom UX UX example. And there has also been a lot of anecdotal talk on the Polymer Slack Site about this issue.
-
Modifications do not currently work internally
<paper-drawer-panel>
. This troubleshooting report , https://stackoverflow.com/a/357001/and its generally accepted answer collectively proves that the bug requires elements<paper-dialog modal>
to extend outside of any element<paper-drawer-panel>
in order tomodal
display correctly (i.e. in front of a modal background, not behind him). This report and this StackOverflow question are also verified. -
But modal interior panels have become the standard UX Defacto design. It seems to me that the tenet of modern web application design is that custom authentication buttons (eg,
login
andsignup
) come in the equivalent of any version or "analog" of<paper-drawer-panel>
that any given web application can use. (Additionally, these auth buttons are usually displayed in the upper right corner of every screen in the application until the user is logged in. They are then replaced with an icon or link indicating the login status.)
Code examples:
Please refer to the code examples provided here (in the Q&A). This code would be the same for this question as well.
Question:
How do we, the Polymer 1.0 developer community, best address these challenges and create the best UX experience? Perhaps there is a mistake in my facts or assumptions stated above? Perhaps someone has a direct (or workaround) solution that they can share with? Perhaps someone on the Google Polymer team would like to call you back? Any ideas, suggestions, feedback and answers are appreciated.
source to share
In this bug, the rubenstolk report provides a hack-fix as follows:
To implement @dhpollack's hack nicely, 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 <<paper-dialog>
I've tested it and verified that it works. So for now, this solves problem # 2 in the question. So I guess it's enough to wait until the bug is fixed .
source to share
I changed the PSK by adding a login form made from the title bar of the paper, changing the routes for unauthorized users by default and hiding the toolbar. This is done with
document.getElementById('headerContainer').style.display='none';
document.getElementById('mainContainer').style.paddingTop=0;
The user interface reappears with
document.getElementById('headerContainer').style.display='block';
document.getElementById('mainContainer').style.paddingTop=168px;
This is just the beginning of the solution. For a complete solution, I would like the hardware authentication element to support shared host and regular OAuth sites.
source to share