Merge pull request #129 from Financial-Times/access-cookies

Clarify access mock instructions, and ensure cookies are immediately applied

scss/style.scss

@@ -437,6 +437,15 @@ body {
 	min-width: 90px;
 	right: 0;
 	z-index: 1;
+
+	ul {
+		padding: 0;
+		margin: 0 0 0 10px;
+	}
+
+	li {
+		margin-bottom: 10px;
+	}
 }
 
 .amp-access-login {

server/controllers/access-mock.js

@@ -16,9 +16,12 @@ module.exports = (req, res) => {
 
 	const signedIn = !!req.cookies['amp-access-mock-logged-in'];
 	const fcf = !!req.cookies['amp-access-mock-fcf'];
-	const hasAccess = fcf || signedIn && !req.cookies['amp_access_mock-no-access'];
+	const noAccess = !!req.cookies['amp-access-mock-no-access'];
+	const hasAccess = !noAccess && (fcf || signedIn);
 
 	setTimeout(() => {
+		const returnUrl = req.header('Referer');
+
 		switch(req.query.type) {
 
 		case 'access':
@@ -43,32 +46,51 @@ module.exports = (req, res) => {
 
 		case 'enable':
 			res.cookie('amp-access-mock', '1');
+			if(returnUrl) return res.redirect(303, returnUrl);
 			res.status(200).send('Your amp-access-mock cookie was set. Please revisit the ' +
-				'<a href="javascript:history.back()">previous page</a>.');
+				'<a href="javascript:history.back()">previous page</a> and then ' +
+				'<strong>refresh to apply the new settings</strong>.');
 			break;
 
 		case 'clear':
 			res.clearCookie('amp-access-mock');
+			if(returnUrl) return res.redirect(303, returnUrl);
 			res.status(200).send('Your amp-access-mock cookie was cleared. Please revisit the ' +
-				'<a href="javascript:history.back()">previous page</a>.');
+				'<a href="javascript:history.back()">previous page</a> and then ' +
+				'<strong>refresh to apply the new settings</strong>.');
 			break;
 
 		case 'enable-fcf':
 			res.cookie('amp-access-mock-fcf', '1');
+			if(returnUrl) return res.redirect(303, returnUrl);
 			res.status(200).send('Your amp-access-mock-fcf cookie was set. Please revisit the ' +
-				'<a href="javascript:history.back()">previous page</a>.');
+				'<a href="javascript:history.back()">previous page</a> and then ' +
+				'<strong>refresh to apply the new settings</strong>.');
 			break;
 
 		case 'clear-fcf':
 			res.clearCookie('amp-access-mock-fcf');
+			if(returnUrl) return res.redirect(303, returnUrl);
 			res.status(200).send('Your amp-access-mock-fcf cookie was cleared. Please revisit the ' +
-				'<a href="javascript:history.back()">previous page</a>.');
+				'<a href="javascript:history.back()">previous page</a> and then ' +
+				'<strong>refresh to apply the new settings</strong>.');
 			break;
 
 		case 'prevent-access':
 			res.cookie('amp-access-mock-no-access', '1');
-			res.status(200).send('Your amp_access_mock-no-access cookie was set. You will not be able to access' +
-				'content, even when signed-in. Please revisit the <a href="javascript:history.back()">previous page</a>.');
+			if(returnUrl) return res.redirect(303, returnUrl);
+			res.status(200).send('Your amp_access_mock-no-access cookie was set. You will not be able to access ' +
+				'content, even when signed-in. Please revisit the ' +
+				'<a href="javascript:history.back()">previous page</a> and then ' +
+				'<strong>refresh to apply the new settings</strong>.');
+			break;
+
+		case 'allow-access':
+			res.clearCookie('amp-access-mock-no-access');
+			if(returnUrl) return res.redirect(303, returnUrl);
+			res.status(200).send('Your amp-access-mock-no-access cookie was cleared. Please revisit the ' +
+				'<a href="javascript:history.back()">previous page</a> and then ' +
+				'<strong>refresh to apply the new settings</strong>.');
 			break;
 
 		default:

server/controllers/amp-page.js

@@ -44,28 +44,32 @@ function getAndRender(uuid, options) {
 			.then(() => article))
 		)
 		.then(article => {
-			article.AUTH_AUTHORIZATION_URL = options.accessMock ?
+			article.AUTH_AUTHORIZATION_URL = options.accessMocked ?
 				`//${options.host}/amp-access-mock?type=access&` :
 				`https://${liveAccessHost}/amp-access?`;
 
-			article.AUTH_PINGBACK_URL = options.accessMock ?
+			article.AUTH_PINGBACK_URL = options.accessMocked ?
 				`//${options.host}/amp-access-mock?type=pingback&` :
 				`https://${liveAccessHost}/amp-pingback?`;
 
-			article.AUTH_LOGIN_URL = options.accessMock ?
+			article.AUTH_LOGIN_URL = options.accessMocked ?
 				`//${options.host}/amp-access-mock?type=login&` :
 				'https://accounts.ft.com/login?';
 
-			article.AUTH_LOGOUT_URL = options.accessMock ?
+			article.AUTH_LOGOUT_URL = options.accessMocked ?
 				`//${options.host}/amp-access-mock?type=logout&` :
 				`https://${liveAccessHost}/amp-logout?`;
 
 			article.SOURCE_PORT = options.production ? '' : ':5000';
 
 			article.freeArticle = !!options.alwaysFree;
-			article.accessMocked = !!options.accessMock;
 			article.enableSidebarMenu = !!options.enableSidebarMenu;
 
+			article.accessMocked = !!options.accessMocked;
+			article.accessMockLoggedIn = !!options.accessMockLoggedIn;
+			article.accessMockFcf = !!options.accessMockFcf;
+			article.accessMockPreventAccess = !!options.accessMockPreventAccess;
+
 			article.nextUrl = `https://next.ft.com/content/${uuid}`;
 
 			return article;
@@ -81,7 +85,10 @@ module.exports = (req, res, next) => {
 		ip: req.ip,
 		ua: req.get('User-Agent'),
 		relatedArticleDeduper: [req.params.uuid],
-		accessMock: req.cookies['amp-access-mock'],
+		accessMocked: req.cookies['amp-access-mock'],
+		accessMockLoggedIn: req.cookies['amp-access-mock-logged-in'],
+		accessMockFcf: req.cookies['amp-access-mock-fcf'],
+		accessMockPreventAccess: req.cookies['amp-access-mock-no-access'],
 		lightSignupUrl: process.env.LIGHT_SIGNUP_URL || 'https://distro-light-signup-prod.herokuapp.com',
 		lightSignupProduct: encodeURIComponent(lightSignupProduct),
 		lightSignupMailinglist: encodeURIComponent(lightSignupMailinglist),
@@ -90,7 +97,13 @@ module.exports = (req, res, next) => {
 		uuid: req.params.uuid,
 	})
 		.then(content => {
-			res.setHeader('cache-control', 'public, max-age=30, no-transform');
+			if(req.cookies['amp-access-mock']) {
+				// No caching, to allow access mock cookies to be applied immediately
+				res.setHeader('Cache-Control', 'private, no-cache, no-store, must-revalidate');
+			} else {
+				res.setHeader('cache-control', 'public, max-age=30, no-transform');
+			}
+
 			res.send(content);
 		})
 		.catch(next);

views/article.html

@@ -88,7 +88,17 @@
 		{{/if}}
 
 		{{#if accessMocked}}
-		<div class="access-mocked">You are currently mocking membership access. <a href="/_access_mock/clear">Click here</a> to return to live membership access.</div>
+		<div class="access-mocked">
+			<ul>
+				<li>You are currently mocking membership access. <a href="/amp-access-mock?type=clear">Click here</a> to return to live membership access.</li>
+				<li>{{#if accessMockFcf}}You are mocking 'First Click Free', so all articles will be free to read, even when anonymous. <a href="/amp-access-mock?type=clear-fcf">Click here</a> to disable FCF.{{else}}<a href="/amp-access-mock?type=enable-fcf">Click here</a> to mock 'First Click Free'.{{/if}}</li>
+				<li>{{#if accessMockPreventAccess}}Access is blocked, even when signed-in (simulating premium content, and requiring an upgrade). <a href="/amp-access-mock?type=allow-access">Click here</a> to allow access.{{else}}<a href="/amp-access-mock?type=prevent-access">Click here</a> to block all access, to simulate premium content and require an upgrade.{{/if}}</li>
+				<li amp-access="access" amp-access-hide>You have access. </li>
+				<li amp-access="NOT access" amp-access-hide>You have no access. </li>
+				<li amp-access="session" amp-access-hide>You are logged in. <a href="#" on="tap:amp-access.login-logout">Click here</a> to log out.</li>
+				<li amp-access="NOT session" amp-access-hide>You are an anonymous visitor. <a  href="#" on="tap:amp-access.login-login">Click here</a> to log in.</li>
+			</ul>
+		</div>
 		{{/if}}
 
 		<div class="main-wrapper">