0

I'm following the codelab for Polymerfire and first bit of tinkering, wanted to change the login element from using google sign in to use email / password.

The element works but I've been having trouble trying to access the values of the email / password field outside of the element itself.

I would've thought that I could access the value of the email textfield by referencing this.$.login.email.value but that doesn't work.

Here's my code

The login element

<dom-module id="as-login">
<template>    
<!-- Here we stick in our login fields -->
<paper-input id="email" label="Email"></paper-input>
<paper-input id="password" label="Password" type="password"></paper-input>

<paper-button id="login" on-tap="signIn" disabled="[[disabled]]">
<iron-icon icon="account-circle"></iron-icon>
<span>Sign in</span>
</paper-button>
</template>
<script>

Polymer({
is: 'as-login',

properties: {
disabled: {
type: Boolean,
reflectToAttribute: true,
value: false
},

signedIn: {
type: Boolean,
reflectToAttribute: true,
value: false
}
},

signIn: function() {
this.fire('sign-in', null, { bubbles: false });
},

clearEmail: function() {
this.$.email.value = "";
},

clearPassword: function() {
this.$.password.value = "";
},

getEmail: function() {
return(this.$.email.value);
},

getPassword: function() {
return(this.$.password.value);
},
});
</script>
</dom-module>

And here is the app element

<as-login
id="login"
on-sign-in="signIn"
signed-in="[[signedIn]]"
disabled="[[!online]]">
</as-login>

<script>
Polymer({
is: 'as-app',
behaviors: [Polymer.AsAppBehaviour],
signIn: function() {
console.log("Let one sign in");

// Process sign in promise
this.$.auth.signInWithEmailAndPassword(this.$.login.getEmail(), this.$.login.getPassword())
.then(function(res) {
console.log("We signed in");
})
.catch(function(err) {
console.log("We got an error");
});
},

signOut: function() {
console.log("Let one sign out");
this.$.auth.signOut();
}
});
</script>
kenwen
  • 814
  • 2
  • 11
  • 17

1 Answers1

0

Data binding is recommended - see the attributes, value

<paper-input id="email" label="Email" value="{{email}}"></paper-input>
<paper-input id="password" label="Password" type="password" value="{{password}}"></paper-input>

The values can be accessed in your JS like this (instead of accessing the value through dom, this.$.login.email.value)

getEmail: function() {
    return this.email;
},

getPassword: function() {
    return this.password;
},
Frank R.
  • 1,732
  • 18
  • 21