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.
Answering my own question, here: Turns out, the
yo angularfiregenerator 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.