Add error-message directive.

Improve UX for focus handling.

res/app/components/stf/common-ui/error-message/error-message-directive.js

@@ -0,0 +1,15 @@
+module.exports = function errorMessageDirective() {
+  return {
+    restrict: 'EA',
+    replace: true,
+    scope: {
+      message: '@'
+    },
+    template: require('./error-message.jade'),
+    link: function (scope, element, attrs) {
+      scope.closeMessage = function () {
+        scope.message = ''
+      }
+    }
+  }
+}

res/app/components/stf/common-ui/error-message/error-message-spec.js

@@ -0,0 +1,23 @@
+describe('errorMessage', function () {
+
+  beforeEach(angular.mock.module(require('./index').name))
+
+  var scope, compile
+
+  beforeEach(inject(function ($rootScope, $compile) {
+    scope = $rootScope.$new()
+    compile = $compile
+  }))
+
+  it('should ...', function () {
+
+    /*
+     To test your directive, you need to create some html that would use your directive,
+     send that through compile() then compare the results.
+
+     var element = compile('<div error-message name="name">hi</div>')(scope)
+     expect(element.text()).toBe('hello, world')
+     */
+
+  })
+})

res/app/components/stf/common-ui/error-message/error-message.css

@@ -0,0 +1,3 @@
+.stf-error-message {
+  padding-bottom: 15px;
+}

res/app/components/stf/common-ui/error-message/error-message.jade

@@ -0,0 +1,5 @@
+.stf-error-message
+  alert(type='danger', close='closeMessage()', ng-if='message')
+    strong(translate) Oops!
+    |  
+    span(ng-bind='message')

res/app/components/stf/common-ui/error-message/index.js

@@ -0,0 +1,6 @@
+require('./error-message.css')
+
+module.exports = angular.module('stf.error-message', [
+
+])
+  .directive('errorMessage', require('./error-message-directive'))