Search code examples
angularjsfirebaseangularfirefirebasesimplelogin

Angularfire add class if loggedIn

I have an AngularFire app, generated with the angularfire yeoman generator. I'm using a directive that allows me to directly edit elements in the view when I'm logged in. For example: 

<h1 contenteditable ng-model="foo.bar"></h1>

This directive comes straight from the Angular docs.

My Firebase security rules are pretty basic at the moment:

{
    "rules": {
        ".read": true,
        ".write": "auth != null"
    }
}

I'm using the following styles to add a dashed border around all editable content:

[contenteditable] {
  &:hover {
    outline: #ccc 2px dashed;
    background-color: #f4f4f4;
  }
}

I would like to scope this style to a logged-in state.

For instance:

.controller('FooCtrl', function($scope, simpleLogin, user) {
$scope.userLoggedIn = function() {
  if ($scope.user) {
    return true;
  }
}
<body ng-class="{loggedIn: userLoggedIn()}">

I don't really understand how the auth stuff works. Is there a simple way to go accomplishing my goal of adding a class based on whether or not a user is logged in? Is there another/better way to accomplish this? Thanks in advance.

Solution

  • Answering my own question, here: Turns out, the yo angularfire generator creates a simpleLogin.js file that handles the login and logout functions. I just added a little DOM manipulation to the functions and this yields the desired result of toggling the class on the body element.

    login: function(provider, opts) {
          angular.element('body').addClass('isLoggedIn');
          return auth.$login(provider, opts);
        },

        logout: function() {
          auth.$logout();
          angular.element('body').removeClass('isLoggedIn');
        }