Show/Hide Login/Logout buttons based on the user state Knockout
<p>I Have a Login form (MVC and Knockout), I want to show or hide the Login and Logout button based on the user's state, if the user is login it should show the Logout button and vice versa.</p>

<p>I have tried doing it with the <code>visible</code> attribute but it's not working properly, it always shows the Login button.</p>

<p>I set in the code the Logout button the be visible after Login and the Login button to be visible after Logout.</p>

<pre><code>&lt;form id="formLogin" data-bind="submit: login"&gt;
    &lt;label&gt;User ID&lt;/label&gt;
    &lt;input class="required email form-control" type="text" data-bind="value: loginUserName" name="loginUserName" /&gt;

    &lt;label&gt;Password&lt;/label&gt;
    &lt;input class="required form-control" type="password" data-bind="value: loginPassword" name="loginPassword" /&gt;

    &lt;button type="submit" class="btn-orange" id="buttonLogin" data-bind="visible: showLoginButton"&gt;Log In&lt;/button&gt; &lt;br /&gt;
    &lt;button data-bind="click: logout, visible: showLogoutButton" class="btn btn-default" id="buttonLogout"&gt;Log Out&lt;/button&gt;
&lt;/form&gt;
</code></pre>

<p>My Login.js View Model:</p>

<pre><code>var Login= function () {

/////////////// variables ///////////////
var self = this;
...
self.showLoginButton = ko.observable(true);
self.showLogoutButton = ko.observable(false);

/////////////// functions ///////////////


self.login = function (callback) {
    var loginData = {
        grant_type: 'password',
        username: self.loginUserName(),
        password: self.loginPassword()
    };
    $.ajax({
        type: 'POST',
        url: '../API/Token',
        data: loginData
    }).done(function (data) {
        sessionStorage.setItem(tokenKey, data.access_token);
        localStorage.setItem("userID", self.loginUserName());
        self.authenticate();
        self.showLogoutButton(true);
        self.showLoginButton(false);
        if (callback &amp;&amp; typeof callback == "function")
            callback();

        self.redirect('MyPage');
    }).fail(showError);
}

self.logout = function () {
    sessionStorage.removeItem(tokenKey)
    self.showLoginButton(true);
    self.showLogoutButton(false);
 }  
}
</code></pre>

<p>Please advise.</p>