Geek Answers Handbook

Polymer 1.0: I need an example login button

Question

Does anyone have a working code example for the login button?

Detail

I need it to be <paper-button> , which says: "Login with x". Where "x" is one of the following: Google, Google Plus, Facebook, Linked, Yahoo, or Twitter.

Obviously, the button should also “point” or integrate with the corresponding service that it refers to.

Also note: the <google-signin> described here does not work for me, because I need to use my own button (for styling), I don’t want to use the <google-signin> button. I just need the functionality that it provides. And more specifically, how to implement this functionality using my own <paper-button> element.

Code:
 <paper-button>Login with Google</paper-button> <paper-button>Login with Google Plus</paper-button> <paper-button>Login with Facebook</paper-button> <paper-button>Login with Linked-In</paper-button> <paper-button>Login with Yahoo</paper-button> <paper-button>Login with Twitter</paper-button>
0
source share
2 answers

Element

 <!-- @license Copyright (c) 2015 Glenn Vandeuren. All rights reserved. --> <link rel="import" href="../polymer/polymer.html"> <link rel="import" href="../paper-button/paper-button.html"> <dom-module id="login-button"> <style> :host { display: block; box-sizing: border-box; } </style> <template> <paper-button raised>Login using <span>[[service]]</span></paper-button> </template> </dom-module> <script> Polymer({ is: 'login-button', properties: { service: String }, listeners: { 'tap': '_handleTap' }, _handleTap: function () { this.fire('login', this.service); } }); </script>

Index

 <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes"> <title>login-button Demo</title> <script src="../../webcomponentsjs/webcomponents-lite.js"></script> <link rel="import" href="../login-button.html"> </head> <body> <login-button service="google"></login-button> <login-button service="twitter"></login-button> <script> document.addEventListener('login', function(service) { // handleLogin(); alert(service.detail); }); </script> </body> </html>
+1
source

For this question , Ian , post this answer:

I ended up working with auth by adapting this sample element from HackITtoday to my firebase urls.

0
source

More articles:


All Articles