-
Notifications
You must be signed in to change notification settings - Fork 7
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* Remove vaadin-login since it doesn't provide password managers support and its name makes it look like main component * Create internal vaadin-login-form-wrapper for handling native form * Create new element `vaadin-login-form` which can be used inline and has password managers support as long as it's not inside a shadow root
- Loading branch information
alexberazouski
committed
Jan 29, 2019
1 parent
95eca47
commit 6cd2413
Showing
38 changed files
with
545 additions
and
408 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,105 @@ | ||
| <!doctype html> | ||
| <html> | ||
|
|
||
| <head> | ||
| <meta charset="utf-8"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1" /> | ||
| <title>Vaadin Login Inline Example</title> | ||
| <script src="../../webcomponentsjs/webcomponents-lite.js"></script> | ||
|
|
||
| <link rel="import" href="../../polymer/polymer.html"> | ||
| <link rel="import" href="../../vaadin-dialog/vaadin-dialog.html"> | ||
| <link rel="import" href="../../vaadin-button/vaadin-button.html"> | ||
| <link rel="import" href="../vaadin-login-overlay.html"> | ||
|
|
||
| <style> | ||
| .sidebar { | ||
| grid-area: sidebar; | ||
| } | ||
|
|
||
| .content { | ||
| grid-area: content; | ||
| } | ||
|
|
||
| .header { | ||
| grid-area: header; | ||
| } | ||
|
|
||
| .footer { | ||
| grid-area: footer; | ||
| } | ||
|
|
||
| .wrapper { | ||
| display: grid; | ||
| grid-gap: 10px; | ||
| grid-template-columns: repeat(3, 33%); | ||
| grid-template-areas: | ||
| "....... header header" | ||
| "sidebar content content" | ||
| "footer footer footer"; | ||
| background-color: #fff; | ||
| color: #444; | ||
| } | ||
|
|
||
| .box { | ||
| background-color: #444; | ||
| color: #fff; | ||
| border-radius: 5px; | ||
| padding: 10px; | ||
| font-size: 150%; | ||
| } | ||
|
|
||
| .header, | ||
| .footer { | ||
| background-color: #999; | ||
| } | ||
| </style> | ||
| </head> | ||
|
|
||
| <body> | ||
| <div class="wrapper"> | ||
| <div class="box header">Header</div> | ||
| <div class="box sidebar">Sidebar | ||
| <vaadin-login-form></vaadin-login-form> | ||
| </div> | ||
| <div class="box content">Content | ||
| </div> | ||
| <div class="box footer">Footer</div> | ||
| </div> | ||
| <vaadin-dialog id="feedbackDialog"> | ||
| <template>Login is being processed...</template> | ||
| </vaadin-dialog> | ||
| <vaadin-dialog id="supportDialog"> | ||
| <template>Try with admin/admin.</template> | ||
| </vaadin-dialog> | ||
| <script> | ||
| window.addEventListener('WebComponentsReady', function(e) { | ||
| var login = document.querySelector('vaadin-login-form'); | ||
| var feedbackDialog = document.querySelector('#feedbackDialog'); | ||
| var supportDialog = document.querySelector('#supportDialog'); | ||
|
|
||
| login.addEventListener('login', function(e) { | ||
| feedbackDialog.opened = true; | ||
| var detail = e.detail, | ||
| username = detail.username, | ||
| password = detail.password; | ||
|
|
||
| setTimeout(function() { | ||
| feedbackDialog.opened = false; | ||
| if (username === 'admin' && password === 'admin') { | ||
| login.remove(); | ||
| } else { | ||
| login.error = true; | ||
| } | ||
| }, 1000); | ||
| }); | ||
|
|
||
| login.addEventListener('forgot-password', function() { | ||
| supportDialog.opened = true; | ||
| }); | ||
| }); | ||
|
|
||
| </script> | ||
| </body> | ||
|
|
||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.