dom-if does not update according to the condition - templates

Question

I'm trying to build a simple login system and I have 2 different templates in it: One when the user is not logged in yet (which displays a "sign in" button), and one when the user is logged in (which displays the username)
By default, the first one is displayed. But when the user is logged in, my first template is not destroyed and my second template is not displayed.
<template is="dom-if" if="{{!logged}}" restamp="true">
<div class="box" id="notLogged">
<paper-button class="loginButton" on-tap="loginPopup"><iron-icon class="avatar" icon="account-circle"></iron-icon><span id="notLoggedMessage">Sign in</span></paper-button>
</div>
</template>
<template is="dom-if" if="{{logged}}" restamp="true">
<div class="box" id="logged">
<paper-button class="loginButton" on-tap="logoutPopup">
<img src="https://placehold.it/40x40" alt="user avatar" />
</paper-button>
</div>
</template>
and now the script. As you can see, I don't use any ajax yet because the service is not done yet. So I'm faking it with "loginOk" value
Polymer({
is: 'system-login',
properties: {
logged: {
type: Boolean,
value: false}
},
loginPopup: function (e) {
loginWindow.open();
},
logoutPopup: function (e) {
logoutWindow.open();
},
checkLogin: function () {
var loginOk = 1;
if (loginOk === 1) {
this.logged === true;
loginWindow.close();
} else if (loginOk === 2) {
errorMessage.style.display = "inline";
} else {
return;
}
}
});

Answer 1

The problem is this.logged === true;. === in JavaScript is a comparison operator and not an assignment operator. So what your code does is it compares the value and type of this.true with Boolean true and returns false (which you are not catching).
Changing it to this.logged = true should do the trick