I am facing an issue while integrating user login functionality in my application. After retrieving the user data from the server, I aim to display the user's name on the page once the process is completed. The login form appears as a popup window, inspired by this resource:
However, changing the template does not seem to work when I toggle the userLoggedIn variable to true. Could there be something wrong with my implementation?
App.UserController = Ember.Controller.extend({
userLoggedIn: false,
actions: {
displayLoginForm: function () {
// code to display login form goes here
},
recieveLogin: function (authResult) {
// code to hide login form after successful authentication
var userPromise = this.store.find('user', authResult); // successfully fetches user details from the server
var self = this;
userPromise.then(function (user) {
self.set('model', user);
self.set('userLoggedIn', true);
});
}
}
});
<li class="navbar-form">
{{#if userLoggedIn}}
<a href="#" class="dropdown-toggle" data-toggle="dropdown"><b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">My quizzes</a></li>
<li><a href="#">My scores</a></li>
<li><a href="#">Settings</a></li>
<li class="divider"></li>
<li><a href="#">Logout</a></li>
</ul>
{{else}}
<button class="btn btn-default" {{action 'displayLoginForm'}}>Login</button>
{{/if}}
</li>