Convert <loggedout-message>, <login-control> and <login-form> to components

src/sidebar/app.js

@@ -142,6 +142,9 @@ module.exports = angular.module('h', [
   .component('dropdownMenuBtn', require('./directive/dropdown-menu-btn'))
   .component('helpLink', require('./directive/help-link'))
   .component('helpPanel', require('./directive/help-panel'))
+  .component('loggedoutMessage', require('./directive/loggedout-message'))
+  .component('loginControl', require('./directive/login-control'))
+  .component('loginForm', require('./directive/login-form').component)
   .component('publishAnnotationBtn', require('./directive/publish-annotation-btn'))
 
   .directive('excerpt', require('./directive/excerpt').directive)
@@ -151,9 +154,6 @@ module.exports = angular.module('h', [
   .directive('hAutofocus', require('./directive/h-autofocus'))
   .directive('hOnTouch', require('./directive/h-on-touch'))
   .directive('hTooltip', require('./directive/h-tooltip'))
-  .directive('loggedoutMessage', require('./directive/loggedout-message'))
-  .directive('loginControl', require('./directive/login-control'))
-  .directive('loginForm', require('./directive/login-form').directive)
   .directive('markdown', require('./directive/markdown'))
   .directive('searchStatusBar', require('./directive/search-status-bar'))
   .directive('shareDialog', require('./directive/share-dialog'))

src/sidebar/directive/loggedout-message.js

 'use strict';
 
-module.exports = function () {
-  return {
-    bindToController: true,
+module.exports = {
   controllerAs: 'vm',
   //@ngInject
   controller: function (serviceUrl) {
     this.serviceUrl = serviceUrl;
   },
-    restrict: 'E',
   scope: {
     /**
      * Called when the user clicks on the "Log in" text.
@@ -16,5 +13,4 @@ module.exports = function () {
     onLogin: '&',
   },
   template: require('../templates/loggedout_message.html'),
-  };
 };

src/sidebar/directive/login-control.js

@@ -2,9 +2,7 @@
 
 var persona = require('../filter/persona');
 
-module.exports = function () {
-  return {
-    bindToController: true,
+module.exports = {
   controllerAs: 'vm',
   //@ngInject
   controller: function (serviceUrl, settings) {
@@ -13,8 +11,7 @@ module.exports = function () {
       return persona.isThirdPartyUser(this.auth.userid, settings.authDomain);
     };
   },
-    restrict: 'E',
-    scope: {
+  bindings: {
     /**
      * An object representing the current authentication status.
      */
@@ -39,5 +36,4 @@ module.exports = function () {
     newStyle: '<',
   },
   template: require('../templates/login_control.html'),
-  };
 };

src/sidebar/directive/login-form.js

@@ -93,18 +93,16 @@ function Controller($scope, $timeout, flash, session, formRespond, serviceUrl) {
   });
 }
 
-module.exports = {
-  directive: function () {
-    return {
-      bindToController: true,
+var component = {
   controller: Controller,
   controllerAs: 'vm',
-      restrict: 'E',
-      scope: {
+  bindings: {
     onClose: '&',
   },
   template: require('../templates/login_form.html'),
-    };
-  },
+};
+
+module.exports = {
+  component: component,
   Controller: Controller,
 };

src/sidebar/directive/test/login-control-test.js

@@ -28,7 +28,7 @@ function PageObject(element) {
 describe('loginControl', function () {
   before(function () {
     angular.module('app', [])
-      .directive('loginControl', require('../login-control'));
+      .component('loginControl', require('../login-control'));
   });
 
   beforeEach(function () {