added puppeteer banner directive

bower.json

@@ -1,7 +1,7 @@
 {
   "name": "angular-worldskills-utils",
   "homepage": "https://github.com/worldskills/angular-worldskills-utils",
-  "main": ["src/angular-worldskills-utils.js", "src/spinner.css"],
+  "main": ["src/angular-worldskills-utils.js", "src/spinner.css", "src/angular-worldskills-utils.css"],
   "license": "MIT",
   "ignore": [
     "**/.*",

src/angular-worldskills-utils.css

@@ -0,0 +1,10 @@
+div.puppet-banner {
+	top: 0;
+    left: 0;
+    background-color: #d24835;
+    width: 100%;
+    padding: 10px;
+    color: white;
+    text-align: center;
+    height: 40px;
+}

src/angular-worldskills-utils.js

@@ -280,5 +280,24 @@
             }
         };
     });
+
+    utils.directive('wsPuppet', function (auth) {
+  	  function link(scope, element, attrs) {
+  	      scope.$watch(attrs.p, function(val) {
+  	        if (val) {
+  	          element.show();
+  	        }
+  	        else {
+  	          element.hide();
+  	        }
+  			  });
+  		  }
+
+  		  return {
+  	      restrict: 'E',
+  	      template: '<div class="puppet-banner">{{auth.user.puppeteer.first_name}} {{auth.user.puppeteer.last_name}} logged in as {{auth.user.first_name}} {{auth.user.last_name}}</div>',
+  	      link: link,
+  			};
+  	  });
 
 })();