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,
-    controllerAs: 'vm',
-    //@ngInject
-    controller: function (serviceUrl) {
-      this.serviceUrl = serviceUrl;
-    },
-    restrict: 'E',
-    scope: {
-      /**
-       * Called when the user clicks on the "Log in" text.
-       */
-      onLogin: '&',
-    },
-    template: require('../templates/loggedout_message.html'),
-  };
+module.exports = {
+  controllerAs: 'vm',
+  //@ngInject
+  controller: function (serviceUrl) {
+    this.serviceUrl = serviceUrl;
+  },
+  scope: {
+    /**
+     * Called when the user clicks on the "Log in" text.
+     */
+    onLogin: '&',
+  },
+  template: require('../templates/loggedout_message.html'),
 };

src/sidebar/directive/login-control.js

@@ -2,42 +2,38 @@
 
 var persona = require('../filter/persona');
 
-module.exports = function () {
-  return {
-    bindToController: true,
-    controllerAs: 'vm',
-    //@ngInject
-    controller: function (serviceUrl, settings) {
-      this.serviceUrl = serviceUrl;
-      this.isThirdPartyUser = function() {
-        return persona.isThirdPartyUser(this.auth.userid, settings.authDomain);
-      };
-    },
-    restrict: 'E',
-    scope: {
-      /**
-       * An object representing the current authentication status.
-       */
-      auth: '<',
-      /**
-       * Called when the user clicks on the "About this version" text.
-       */
-      onShowHelpPanel: '&',
-      /**
-       * Called when the user clicks on the "Log in" text.
-       */
-      onLogin: '&',
-      /**
-       * Called when the user clicks on the "Log out" text.
-       */
-      onLogout: '&',
-      /**
-       * Whether or not to use the new design for the control.
-       *
-       * FIXME: should be removed when the old design is deprecated.
-       */
-      newStyle: '<',
-    },
-    template: require('../templates/login_control.html'),
-  };
+module.exports = {
+  controllerAs: 'vm',
+  //@ngInject
+  controller: function (serviceUrl, settings) {
+    this.serviceUrl = serviceUrl;
+    this.isThirdPartyUser = function() {
+      return persona.isThirdPartyUser(this.auth.userid, settings.authDomain);
+    };
+  },
+  bindings: {
+    /**
+     * An object representing the current authentication status.
+     */
+    auth: '<',
+    /**
+     * Called when the user clicks on the "About this version" text.
+     */
+    onShowHelpPanel: '&',
+    /**
+     * Called when the user clicks on the "Log in" text.
+     */
+    onLogin: '&',
+    /**
+     * Called when the user clicks on the "Log out" text.
+     */
+    onLogout: '&',
+    /**
+     * Whether or not to use the new design for the control.
+     *
+     * FIXME: should be removed when the old design is deprecated.
+     */
+    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,
-      controller: Controller,
-      controllerAs: 'vm',
-      restrict: 'E',
-      scope: {
-        onClose: '&',
-      },
-      template: require('../templates/login_form.html'),
-    };
+var component = {
+  controller: Controller,
+  controllerAs: 'vm',
+  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 () {