Improve error when flagging when logged out

Improve the error message that's shown to the user when trying to flag
an annotation while logged out.

Instead of showing a "404 Not Found. Either the resource you requested
doesn't exist, or you are not currently authorized to see it." error
from the server, show a friendlier "You must be logged in to report an
annotation" message.

This is done client-side by checking whether the user is logged in when
they click the flag button, and if not showing an error instead of
sending the flag request to the API. This is because the API doesn't
respond with a unique "You must be logged in to flag" error that the
client could depend on, it just returns a 404, which could be for a
number of reasons (e.g. the annotation no longer exists).

src/sidebar/components/annotation.js

@@ -182,6 +182,14 @@ function AnnotationController(
     * @description Flag the annotation.
     */
   this.flag = function() {
+    if (!session.state.userid) {
+      flash.error(
+        'You must be logged in to report an annotation to the moderators.',
+        'Login to flag annotations'
+      );
+      return;
+    }
+
     var onRejected = function(err) {
       flash.error(err.message, 'Flagging annotation failed');
     };

src/sidebar/components/test/annotation-test.js

@@ -730,37 +730,58 @@ describe('annotation', function() {
         fakeAnnotationMapper.flagAnnotation = sandbox.stub();
       });
 
-      it(
-        'calls annotationMapper.flag() when an annotation is flagged',
-        function(done) {
-          var parts = createDirective();
-          fakeAnnotationMapper.flagAnnotation.returns($q.resolve());
-          parts.controller.flag();
-          assert.calledWith(fakeAnnotationMapper.flagAnnotation,
-              parts.annotation);
-          done();
-        }
-      );
+      context('when the user is not logged in', function() {
+        beforeEach(function() {
+          delete fakeSession.state.userid;
+        });
 
-      it('flashes an error if the flag fails', function(done) {
-        var controller = createDirective().controller;
-        var err = new Error('500 Server error');
-        fakeAnnotationMapper.flagAnnotation.returns(Promise.reject(err));
-        controller.flag();
-        setTimeout(function () {
-          assert.calledWith(fakeFlash.error, '500 Server error', 'Flagging annotation failed');
-          done();
-        }, 0);
+        it('flashes an error', function() {
+          createDirective().controller.flag();
+
+          assert.isTrue(fakeFlash.error.calledOnce);
+          assert.equal('Login to flag annotations', fakeFlash.error.args[0][1]);
+        });
+
+        it('doesn\'t try to flag the annotation', function() {
+          createDirective().controller.flag();
+
+          assert.isFalse(fakeAnnotationMapper.flagAnnotation.called);
+        });
       });
 
-      it('doesn\'t flash an error if the flag succeeds', function(done) {
-        var controller = createDirective().controller;
-        fakeAnnotationMapper.flagAnnotation.returns($q.resolve());
-        controller.flag();
-        setTimeout(function () {
-          assert.notCalled(fakeFlash.error);
-          done();
-        }, 0);
+      context('when the user is logged in', function() {
+        it(
+          'calls annotationMapper.flag() when an annotation is flagged',
+          function(done) {
+            var parts = createDirective();
+            fakeAnnotationMapper.flagAnnotation.returns($q.resolve());
+            parts.controller.flag();
+            assert.calledWith(fakeAnnotationMapper.flagAnnotation,
+                parts.annotation);
+            done();
+          }
+        );
+
+        it('flashes an error if the flag fails', function(done) {
+          var controller = createDirective().controller;
+          var err = new Error('500 Server error');
+          fakeAnnotationMapper.flagAnnotation.returns(Promise.reject(err));
+          controller.flag();
+          setTimeout(function () {
+            assert.calledWith(fakeFlash.error, '500 Server error', 'Flagging annotation failed');
+            done();
+          }, 0);
+        });
+
+        it('doesn\'t flash an error if the flag succeeds', function(done) {
+          var controller = createDirective().controller;
+          fakeAnnotationMapper.flagAnnotation.returns($q.resolve());
+          controller.flag();
+          setTimeout(function () {
+            assert.notCalled(fakeFlash.error);
+            done();
+          }, 0);
+        });
       });
     });