Merge pull request #3124 from hypothesis/sheetaluk/257-add-explanator…

…y-text-below-public-focused-annotation-when-logged-out

Add message when user logged out and directed to an annotation.

h/static/scripts/test/widget-controller-test.js

@@ -39,6 +39,7 @@ describe('WidgetController', function () {
   var fakeGroups = null;
   var sandbox = null;
   var viewer = null;
+  var fakeSettings = null;
 
   before(function () {
     angular.module('h', [])
@@ -100,6 +101,10 @@ describe('WidgetController', function () {
       focus: sinon.stub(),
     };
 
+    fakeSettings = {
+      annotations: 'test',
+    };
+
     fakeStore = {
       SearchResource: {},
     };
@@ -113,6 +118,7 @@ describe('WidgetController', function () {
     $provide.value('streamFilter', fakeStreamFilter);
     $provide.value('threading', fakeThreading);
     $provide.value('groups', fakeGroups);
+    $provide.value('settings', fakeSettings);
   }));
 
   beforeEach(angular.mock.inject(function ($controller, _$rootScope_) {
@@ -308,5 +314,55 @@ describe('WidgetController', function () {
       $scope.$digest();
       assert.isFalse($scope.selectedAnnotationUnavailable());
     });
+
+    it('shows logged out message if selection is available', function () {
+      $scope.auth = {
+        status: 'signed-out'
+      };
+      fakeAnnotationUI.selectedAnnotationMap = {'123': true};
+      fakeThreading.idTable = {'123': {}};
+      $scope.$digest();
+      assert.isTrue($scope.shouldShowLoggedOutMessage());
+    });
+
+    it('does not show loggedout message if selection is unavailable', function () {
+      $scope.auth = {
+        status: 'signed-out'
+      };
+      fakeAnnotationUI.selectedAnnotationMap = {'missing': true};
+      fakeThreading.idTable = {'123': {}};
+      $scope.$digest();
+      assert.isFalse($scope.shouldShowLoggedOutMessage());
+    });
+
+    it('does not show loggedout message if there is no selection', function () {
+      $scope.auth = {
+        status: 'signed-out'
+      };
+      fakeAnnotationUI.selectedAnnotationMap = null;
+      $scope.$digest();
+      assert.isFalse($scope.shouldShowLoggedOutMessage());
+    });
+
+    it('does not show loggedout message if user is not logged out', function () {
+      $scope.auth = {
+        status: 'signed-in'
+      };
+      fakeAnnotationUI.selectedAnnotationMap = {'123': true};
+      fakeThreading.idTable = {'123': {}};
+      $scope.$digest();
+      assert.isFalse($scope.shouldShowLoggedOutMessage());
+    });
+
+    it('does not show loggedout message if not a direct link', function () {
+      $scope.auth = {
+        status: 'signed-out'
+      };
+      delete fakeSettings.annotations;
+      fakeAnnotationUI.selectedAnnotationMap = {'123': true};
+      fakeThreading.idTable = {'123': {}};
+      $scope.$digest();
+      assert.isFalse($scope.shouldShowLoggedOutMessage());
+    });
   });
 });

h/static/scripts/widget-controller.js

@@ -31,7 +31,7 @@ function groupIDFromSelection(selection, results) {
 // @ngInject
 module.exports = function WidgetController(
   $scope, $rootScope, annotationUI, crossframe, annotationMapper,
-  drafts, groups, streamer, streamFilter, store, threading
+  drafts, groups, settings, streamer, streamFilter, store, threading
 ) {
   $scope.threadRoot = threading.root;
   $scope.sortOptions = ['Newest', 'Oldest', 'Location'];
@@ -209,6 +209,26 @@ module.exports = function WidgetController(
            !threading.idTable[firstKey(annotationUI.selectedAnnotationMap)];
   };
 
+  $scope.shouldShowLoggedOutMessage = function () {
+    // If user is not logged out, don't show CTA.
+    if ($scope.auth.status !== 'signed-out') {
+      return false;
+    }
+
+    // If user has not landed on a direct linked annotation
+    // don't show the CTA.
+    if (!settings.annotations) {
+      return false;
+    }
+
+    // The user is logged out and has landed on a direct linked
+    // annotation. If there is an annotation selection and that
+    // selection is available to the user, show the CTA.
+    return searchClients.length === 0 &&
+           annotationUI.hasSelectedAnnotations() &&
+           !!threading.idTable[firstKey(annotationUI.selectedAnnotationMap)];
+  };
+
   $rootScope.$on(events.BEFORE_ANNOTATION_CREATED, function (event, data) {
     if (data.$highlight || (data.references && data.references.length > 0)) {
       return;

h/static/styles/app.scss

@@ -27,6 +27,7 @@ $base-line-height: 20px;
 @import './tags-input';
 @import './thread';
 @import './top-bar';
+@import './loggedout-message';
 
 // Top-level styles
 // ----------------

h/static/styles/loggedout-message.scss

@@ -0,0 +1,36 @@
+.loggedout-message {
+  margin: 25px auto;
+  width: 70%;
+  text-align: center;
+  color: $dg-3;
+  display: flex;
+  flex-direction: column;
+}
+
+.loggedout-message-actions {
+  margin: auto;
+  width: 75%;
+  text-align: center;
+}
+
+.loggedout-message-actions__link {
+  text-decoration: underline;
+  color: $dg-3;
+
+  &:hover {
+    color: $dg-1;
+  }
+}
+
+.loggedout-message-logo {
+  margin-top: 25px;
+}
+
+.loggedout-message-logo__icon {
+  font-size: 30px;
+  color: $dg-4;
+
+  &:hover {
+    color: $dg-1;
+  }
+}