I am writing a polymer web application. I am using firebase along with firebase-auth for my db and authentication.
I have a main app.html element on my index page with a custom my-login element that pops up when you click a login button that contains my firebase-auth element and login logic. So far I have been able to successfully log in with the firebase-auth element. However, after logging in with the my-login element, I have not been able to figure out how to access the login information back on my index.html page and all of the other pages in my app.
Any idea on how to do this? I can't find any examples online of using login information on elements other than the one that contains the firebase-auth.
Here is my app.html:
<dom-module id="my-app">
<link rel="import" type="css" href="../styles/app-theme.css">
<template>
<app-router style="display:none;">
<app-route path="/" import="/elements/blog.html"></app-route>
<app-route path="/artist" import="/elements/artist.html"></app-route>
<app-route path="/teacher" import="/elements/teacher.html"></app-route>
<app-route path="/research" import="/elements/research.html"></app-route>
<app-route path="/contact" import="/elements/contact.html"></app-route>
<app-route path="*" import="/elements/blog.html"></app-route>
</app-router>
<!-- Main Area -->
<paper-scroll-header-panel main fixed>
<!-- Main Toolbar -->
<paper-toolbar class="medium-tall">
<div class="">
<div class="app-name">Joyce K. Lee</div>
<span class="spacer"></span>
<paper-icon-button icon="account-circle" onclick="login.open()" hidden?="{{!statusKnown || user}}"></paper-icon-button>
<paper-icon-button icon="account-square" onclick="{{logout}}" hidden?="{{!statusKnown || !user}}"></paper-icon-button>
<template if="{{user}}">
{{user.password.username}}
</template>
</div>
<div class="bottom center fit">
<paper-tabs id="nav" selected="{{selected}}">
<paper-tab><a href="#/"><iron-icon icon="home"></iron-icon></a></paper-tab>
<paper-tab><a href="#/artist"><iron-icon icon="custom-icons:brush"></iron-icon></a></paper-tab>
<paper-tab><a href="#/teacher"><iron-icon icon="custom-icons:apple"></iron-icon></a></paper-tab>
<paper-tab><a href="#/research"><iron-icon icon="custom-icons:book"></iron-icon></a></paper-tab>
<paper-tab><a href="#/contact"><iron-icon icon="mail"></iron-icon></a></paper-tab>
</paper-tabs>
</div>
</paper-toolbar>
<!-- Main Content -->
<div class="content">
<neon-animated-pages style="height:100%" id="pages" class="flex" selected="{{selected}}" entry-animation="slide-from-right-animation" exit-animation="slide-left-animation">
<neon-animatable><my-blog></my-blog></neon-animatable>
<neon-animatable><my-artist></my-artist></neon-animatable>
<neon-animatable><my-teacher></my-teacher></neon-animatable>
<neon-animatable><my-research></my-research></neon-animatable>
<neon-animatable><my-contact></my-contact></neon-animatable>
</neon-animated-pages>
</div>
<simple-overlay id="login" with-backdrop>
<my-login></my-login>
</simple-overlay>
</paper-scroll-header-panel>
</template>
<script>
(function () {
Polymer({
is: 'my-app'
});
})();
</script>
</dom-module>
Here is my working my-login element:
<dom-module id="my-login">
<template>
<firebase-auth id="firebaseLogin" user="{{user}}" status-known="{{statusKnown}}" location="https://brilliant-inferno-6056.firebaseio.com" provider="password" on-error="errorHandler" on-user-created="userSuccessHandler" on-password-changed="userSuccessHandler" on-password-reset="userSuccessHandler" on-user-removed="userSuccessHandler"></firebase-auth>
<h4>Login</h4>
<paper-input label="Email" value="{{email::input}}"></paper-input>
<paper-input label="Password" type="password" value="{{password::input}}"></paper-input>
<paper-button on-tap="login" raised>Login</paper-button>
<br>
<div id="message">[[message]]</div>
<h3>Login status:</h3>
<p>{{computeLoginStatus(statusKnown, user)}}</p>
</template>
<script>
(function () {
'use strict';
Polymer({
is: 'my-login',
properties: {
message: {
type: String,
value: ''
},
email: {
type: String,
value: ''
},
password: {
type: String,
value: ''
},
user: {
type: Object,
value: null,
notify: true
},
statusKnown: {
type: Boolean,
notify: true
}
},
login: function () {
var params = {};
params.email = this.email;
params.password = this.password;
this.$.firebaseLogin.login(params);
},
logout: function () {
this.$.firebaseLogin.logout();
},
errorHandler: function (e) {
this.message = 'Error: ' + e.detail.message;
},
userSuccessHandler: function (e) {
this.message = e.type + ' success!';
},
createUserHandler: function (e) {
this.$.firebaseLogin.createUser(this.email, this.password);
},
changePasswordHandler: function (e) {
this.$.firebaseLogin.changePassword(this.email, this.password, this.newPassword);
},
resetPasswordHandler: function (e) {
this.$.firebaseLogin.sendPasswordResetEmail(this.email);
},
removeUserHandler: function (e) {
this.$.firebaseLogin.removeUser(this.email, this.password);
},
computeCreateUserDisabled: function (email, password) {
return !email || !password;
},
computeChangePasswordDisabled: function (email, password, newPassword) {
return !email || !password || !newPassword;
},
computeResetPasswordDisabled: function (email, password) {
return !email || !password;
},
computeRemoveUserDisabled: function (email, password) {
return !email || !password;
},
computeLoginHidden: function (statusKnown, user) {
return !statusKnown || !!user;
},
computeLogoutHidden: function (statusKnown, user) {
return !statusKnown || !user;
},
computeLoginStatus: function (statusKnown, user) {
if (statusKnown && user) {
return 'Logged in';
}
if (statusKnown) {
return 'Logged out';
}
return 'Unknown (checking status...)';
}
});
})();
</script>
</dom-module>
