Commit cb7b6dbd authored by Lyza Danger Gardner's avatar Lyza Danger Gardner

Migrate `LoggedOutMessage` to preact

- Rename from `loggedout-message` to `logged-out-message` for consistency
parent aea2d10c
'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);
'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'),
};
......@@ -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'),
......
'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);
});
});
......@@ -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',
......
<!-- 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>
......@@ -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>
.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;
......
......@@ -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';
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment