Polymer 2.0, property access - data-binding

Question

I have quite simple component that does a login with username/password. The template has a button which calls the "login()" method. The console shows for username/password both undefined. I tried everything but nothing works. What am I'm doing wrong?
<template>
<style>
:host {
display: block;
}
</style>
<h2>Hello [[prop1]], authenticated=[[authenticated]]!</h2>
<div>
<div><label>Username: </label><input value="{{username::input}}"></input></div>
<div><label>Password: </label><input type="password" value="{{password::input}}"></input></div>
<div>
<button onclick="{{logIn}}" raised>Log in</button>
</div>
</div>
</template>
Here is the login method:
logIn() {
console.log("username="+this.username+", password="+this.password);
}

Answer 1

Maybe paper-input fixes your Problem
<template>
<style>
:host {
display: block;
}
</style>
<h2>Hello [[prop1]], authenticated=[[authenticated]]!</h2>
<div>
<div><label>Username: </label><paper-input id="usn" value="{{username}}"></input></div>
<div><label>Password: </label><paper-input id="pwd" type="password" value="{{password}}"></input></div>
<div>
<button onclick="[[logIn]]" raised>Log in</button>
</div>
</div>
</template>
On the other hand you could try changing you logIn method to this should also work with just an input don´t forget to set an id:
logIn() {
console.log("username="+this.$.usn.value+", password="+this.$.pwd.value);
}