Merge pull request #1234 from hypothesis/logged-out-message-preact

Migrate `LoggedOutMessage` to preact

src/sidebar/components/logged-out-message.js

+'use strict';
+
+const propTypes = require('prop-types');
+const { createElement } = require('preact');
+
+const { withServices } = require('../util/service-context');
+
+const SvgIcon = require('./svg-icon');
+
+/**
+ * Render a call-to-action to log in or sign up. This message is intended to be
+ * displayed to non-auth'd users when viewing a single annotation in a
+ * direct-linked context (i.e. URL with syntax `/#annotations:<annotation_id>`)
+ */
+function LoggedOutMessage({ onLogin, serviceUrl }) {
+  return (
+    <div className="logged-out-message">
+      <span>
+        This is a public annotation created with Hypothesis. <br />
+        To reply or make your own annotations on this document,{' '}
+        <a
+          className="logged-out-message__link"
+          href={serviceUrl('signup')}
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          create a free account
+        </a>{' '}
+        or{' '}
+        <a className="logged-out-message__link" href="" onClick={onLogin}>
+          log in
+        </a>
+        .
+      </span>
+      <div className="logged-out-message__logo">
+        <a href="https://hypothes.is">
+          <SvgIcon name="logo" className="logged-out-message__logo-icon" />
+        </a>
+      </div>
+    </div>
+  );
+}
+
+LoggedOutMessage.propTypes = {
+  onLogin: propTypes.func.isRequired,
+  serviceUrl: propTypes.func.isRequired,
+};
+
+LoggedOutMessage.injectedProps = ['serviceUrl'];
+
+module.exports = withServices(LoggedOutMessage);

src/sidebar/components/loggedout-message.js

-'use strict';
-
-module.exports = {
-  controllerAs: 'vm',
-  //@ngInject
-  controller: function(serviceUrl) {
-    this.serviceUrl = serviceUrl;
-  },
-  bindings: {
-    /**
-     * Called when the user clicks on the "Log in" text.
-     */
-    onLogin: '&',
-  },
-  template: require('../templates/loggedout-message.html'),
-};

src/sidebar/components/svg-icon.js

@@ -16,6 +16,7 @@ const icons = {
   help: require('../../images/icons/help.svg'),
   leave: require('../../images/icons/leave.svg'),
   lock: require('../../images/icons/lock.svg'),
+  logo: require('../../images/icons/logo.svg'),
   public: require('../../images/icons/public.svg'),
   refresh: require('../../images/icons/refresh.svg'),
   share: require('../../images/icons/share.svg'),

src/sidebar/components/test/logged-out-message-test.js

+'use strict';
+
+const { createElement } = require('preact');
+const { shallow } = require('enzyme');
+
+const LoggedOutMessage = require('../logged-out-message');
+
+describe('LoggedOutMessage', () => {
+  const createLoggedOutMessage = props => {
+    return shallow(
+      <LoggedOutMessage
+        onLogin={sinon.stub()}
+        serviceUrl={sinon.stub()}
+        {...props}
+      />
+    ).dive(); // Dive needed because this component uses `withServices`
+  };
+
+  it('should link to signup', () => {
+    const fakeServiceUrl = sinon.stub().returns('signup_link');
+    const wrapper = createLoggedOutMessage({ serviceUrl: fakeServiceUrl });
+
+    const signupLink = wrapper.find('.logged-out-message__link').at(0);
+
+    assert.calledWith(fakeServiceUrl, 'signup');
+    assert.equal(signupLink.prop('href'), 'signup_link');
+  });
+
+  it('should have a login click handler', () => {
+    const fakeOnLogin = sinon.stub();
+    const wrapper = createLoggedOutMessage({ onLogin: fakeOnLogin });
+
+    const loginLink = wrapper.find('.logged-out-message__link').at(1);
+
+    assert.equal(loginLink.prop('onClick'), fakeOnLogin);
+  });
+});

src/sidebar/index.js

@@ -171,7 +171,10 @@ function startAngularApp(config) {
       wrapReactComponent(require('./components/help-link'))
     )
     .component('helpPanel', require('./components/help-panel'))
-    .component('loggedoutMessage', require('./components/loggedout-message'))
+    .component(
+      'loggedOutMessage',
+      wrapReactComponent(require('./components/logged-out-message'))
+    )
     .component('markdown', require('./components/markdown'))
     .component(
       'moderationBanner',

src/sidebar/templates/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('signup')}}" target="_blank">create a free account</a>
-    or
-    <a class="loggedout-message__link" href="" ng-click="vm.onLogin()">log 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>

src/sidebar/templates/sidebar-content.html

@@ -46,5 +46,5 @@
   thread="vm.rootThread">
 </thread-list>
 
-<loggedout-message ng-if="vm.shouldShowLoggedOutMessage()" on-login="vm.onLogin()">
-</loggedout-message>
+<logged-out-message ng-if="vm.shouldShowLoggedOutMessage()" on-login="vm.onLogin()">
+</logged-out-message>

src/styles/sidebar/components/loggedout-message.scss → src/styles/sidebar/components/logged-out-message.scss

-.loggedout-message {
+.logged-out-message {
   margin: 25px auto;
   width: 70%;
   text-align: center;
@@ -7,7 +7,7 @@
   flex-direction: column;
 }
 
-.loggedout-message__link {
+.logged-out-message__link {
   text-decoration: underline;
   color: $grey-5;
 
@@ -16,11 +16,13 @@
   }
 }
 
-.loggedout-message-logo {
+.logged-out-message__logo {
   margin-top: 25px;
+  display: flex;
+  justify-content: center;
 }
 
-.loggedout-message-logo__icon {
+.logged-out-message__logo-icon {
   font-size: 30px;
   color: $grey-4;
 

src/styles/sidebar/sidebar.scss

@@ -30,7 +30,7 @@ $base-line-height: 20px;
 @import './components/group-list';
 @import './components/group-list-item';
 @import './components/help-panel';
-@import './components/loggedout-message';
+@import './components/logged-out-message';
 @import './components/markdown';
 @import './components/menu';
 @import './components/menu-item';