Fix broken loggedout CTA.

* Create a loggedout-message directive
* Move related html to separate template

https://trello.com/c/dR3qXaxx/257-add-explanatory-text-below-public-focused-annotation-when-logged-out

h/static/scripts/app.js

@@ -139,6 +139,7 @@ module.exports = angular.module('h', [
   .directive('formValidate', require('./directive/form-validate'))
   .directive('groupList', require('./directive/group-list').directive)
   .directive('hAutofocus', require('./directive/h-autofocus'))
+  .directive('loggedoutMessage', require('./directive/loggedout-message'))
   .directive('loginForm', require('./directive/login-form').directive)
   .directive('markdown', require('./directive/markdown'))
   .directive('simpleSearch', require('./directive/simple-search'))

h/static/scripts/directive/loggedout-message.js

+'use strict';
+
+module.exports = function () {
+  return {
+    bindToController: true,
+    controllerAs: 'vm',
+    //@ngInject
+    controller: function (settings) {
+      this.serviceUrl = settings.serviceUrl;
+    },
+    restrict: 'E',
+    scope: {
+      /**
+       * Called when the user clicks on the "Sign in" text.
+       */
+      onLogin: '&',
+    },
+    templateUrl: 'loggedout_message.html',
+  };
+};

h/templates/client/loggedout_message.html

+<!-- message to display to loggedout users when they visit direct linked annotations -->
+<li class="loggedout-message">
+  <span>
+    This is a public annotation created with Hypothesis.
+    <br>
+    To reply or make your own annotations on this document,
+    <a class="loggedout-message__link" href="{{vm.serviceUrl}}register" target="_blank">create a free account</a>
+    or
+    <a class="loggedout-message__link" href="" ng-click="vm.onLogin()">sign in</a>.
+  </span>
+  <span class="loggedout-message-logo">
+    <a href="https://hypothes.is">
+      <i class="h-icon-hypothesis-logo loggedout-message-logo__icon"></i>
+    </a>
+  </span>
+</li>

h/templates/client/viewer.html

@@ -40,20 +40,8 @@
       ng-repeat="child in threadRoot.children | orderBy : sort.predicate"
       ng-show="vm.shouldShow()">
   </li>
-  <li class="loggedout-message" ng-if="isSidebar && shouldShowLoggedOutMessage()" ng-cloak>
-    <span>
-      This is a public annotation created with Hypothesis.
-      <br>
-      To reply or make your own annotations on this document,
-      <a class="loggedout-message__link" href="{{ register_url }}" target="_blank">create a free account</a>
-      or
-      <a class="loggedout-message__link" href="" ng-click="login()">sign in</a>.
-    </span>
-    <span class="loggedout-message-logo">
-      <a href="https://hypothes.is">
-        <i class="h-icon-hypothesis-logo loggedout-message-logo__icon"></i>
-      </a>
-    </span>
-  </li>
+  <loggedout-message ng-if="isSidebar && shouldShowLoggedOutMessage()"
+    on-login="login()" ng-cloak>
+  </loggedout-message>
 </ul>
 <!-- / Thread view -->