From 5ac3255d17b553c03ae185e11f993ecdd5bf987d Mon Sep 17 00:00:00 2001 From: Vyrtsev Mikhail Date: Wed, 14 Nov 2018 07:00:42 +0300 Subject: [PATCH 1/6] third party cookies blocked fallback --- web/app/common/constants.js | 26 ++++++++ web/app/common/localStorage.js | 30 ++++++++++ web/app/components/auth-panel/auth-panel.jsx | 60 ++++++++++++------- .../components/thread/getCollapsedComments.js | 3 +- .../thread/saveCollapsedComments.js | 3 +- web/comments.ejs | 58 ++++++++++++++++++ web/webpack.config.js | 5 ++ 7 files changed, 162 insertions(+), 23 deletions(-) create mode 100644 web/app/common/localStorage.js create mode 100644 web/comments.ejs diff --git a/web/app/common/constants.js b/web/app/common/constants.js index 77937f25..a4e1ef28 100644 --- a/web/app/common/constants.js +++ b/web/app/common/constants.js @@ -38,3 +38,29 @@ export const BLOCKING_DURATIONS = [ value: `${60 * 24}m`, }, ]; + +/** + * Defines if browser storage features (cookies, localsrotage) + * are available or blocked via browser preferences + */ +export const STORAGE_AVAILABLE = (() => { + try { + localStorage.setItem('localstorage_availability_test', null); + localStorage.removeItem('localstorage_availability_test'); + } catch (e) { + return false; + } + return true; +})(); + +/** + * Defines whether iframe loaded in cross origin environment + * Usefull for checking if some privacy restriction may be applied + */ +export const IS_THIRD_PARTY = (() => { + try { + return window.parent.document.location.host !== window.location.host; + } catch (e) { + return true; + } +})(); diff --git a/web/app/common/localStorage.js b/web/app/common/localStorage.js new file mode 100644 index 00000000..417f7dc4 --- /dev/null +++ b/web/app/common/localStorage.js @@ -0,0 +1,30 @@ +export const isAvailable = (() => { + try { + localStorage.setItem('localstorage_availability_test', null); + localStorage.removeItem('localstorage_availability_test'); + } catch (e) { + return false; + } + return true; +})(); + +const failMessage = 'remark42: localStorage access denied, check browser preferences'; + +export const setItem = isAvailable + ? localStorage.setItem.bind(localStorage) + : () => { + console.error(failMessage); // eslint-disable-line no-console + }; + +export const getItem = isAvailable + ? localStorage.getItem.bind(localStorage) + : () => { + console.error(failMessage); // eslint-disable-line no-console + return null; + }; + +export const removeItem = isAvailable + ? localStorage.removeItem.bind(localStorage) + : () => { + console.error(failMessage); // eslint-disable-line no-console + }; diff --git a/web/app/components/auth-panel/auth-panel.jsx b/web/app/components/auth-panel/auth-panel.jsx index 2ed169dc..1cc5ef76 100644 --- a/web/app/components/auth-panel/auth-panel.jsx +++ b/web/app/components/auth-panel/auth-panel.jsx @@ -4,7 +4,7 @@ import { h, Component } from 'preact'; import UserId from './__user-id/auth-panel__user-id'; import Dropdown, { DropdownItem } from 'components/dropdown'; import Button from 'components/button'; -import { PROVIDER_NAMES } from 'common/constants'; +import { PROVIDER_NAMES, STORAGE_AVAILABLE, IS_THIRD_PARTY } from 'common/constants'; import { requestDeletion } from 'utils/email'; import { getHandleClickProps } from 'common/accessibility'; @@ -76,28 +76,46 @@ export default class AuthPanel extends Component { )} - {!loggedIn && ( -
- Sign in to comment using{' '} - {providers.map((provider, i) => { - const comma = i === 0 ? '' : i === providers.length - 1 ? ' or ' : ', '; + {STORAGE_AVAILABLE && + !loggedIn && ( +
+ Sign in to comment using{' '} + {providers.map((provider, i) => { + const comma = i === 0 ? '' : i === providers.length - 1 ? ' or ' : ', '; - return ( - - {comma} - props.onSignIn(provider))} - role="link" - > - {PROVIDER_NAMES[provider]} + return ( + + {comma} + props.onSignIn(provider))} + role="link" + > + {PROVIDER_NAMES[provider]} + - - ); - })} - {'.'} -
- )} + ); + })} + {'.'} +
+ )} + + {!STORAGE_AVAILABLE && + IS_THIRD_PARTY && ( +
+ Disable third-party cookies blocking to sign in or open comments in{' '} + + new page + +
+ )} + + {!STORAGE_AVAILABLE && + !IS_THIRD_PARTY &&
Allow cookies to sign in and comment
}
{user.admin && ( diff --git a/web/app/components/thread/getCollapsedComments.js b/web/app/components/thread/getCollapsedComments.js index 6568e6af..b240a8b5 100644 --- a/web/app/components/thread/getCollapsedComments.js +++ b/web/app/components/thread/getCollapsedComments.js @@ -1,5 +1,6 @@ import { LS_COLLAPSE_KEY } from 'common/constants'; +import { getItem } from 'common/localStorage'; -const getCollapsedComments = () => JSON.parse(localStorage.getItem(LS_COLLAPSE_KEY) || '[]'); +const getCollapsedComments = () => JSON.parse(getItem(LS_COLLAPSE_KEY) || '[]'); export default getCollapsedComments; diff --git a/web/app/components/thread/saveCollapsedComments.js b/web/app/components/thread/saveCollapsedComments.js index 3d0179c2..bb2da2de 100644 --- a/web/app/components/thread/saveCollapsedComments.js +++ b/web/app/components/thread/saveCollapsedComments.js @@ -1,5 +1,6 @@ import { LS_COLLAPSE_KEY } from 'common/constants'; +import { setItem } from 'common/localStorage'; -const saveCollapsedComments = comments => localStorage.setItem(LS_COLLAPSE_KEY, JSON.stringify(comments)); +const saveCollapsedComments = comments => setItem(LS_COLLAPSE_KEY, JSON.stringify(comments)); export default saveCollapsedComments; diff --git a/web/comments.ejs b/web/comments.ejs new file mode 100644 index 00000000..dbd08fc9 --- /dev/null +++ b/web/comments.ejs @@ -0,0 +1,58 @@ + + + + + + remark42 + + + + +
+
+
+
+ + + + + diff --git a/web/webpack.config.js b/web/webpack.config.js index 2b7efeed..869af3a1 100644 --- a/web/webpack.config.js +++ b/web/webpack.config.js @@ -114,6 +114,11 @@ module.exports = { filename: 'last-comments.html', inject: false, }), + new Html({ + template: path.resolve(__dirname, 'comments.ejs'), + filename: 'comments.html', + inject: false, + }), new ExtractText({ filename: `remark.css`, allChunks: true, From ae9332c0e5f6ba32e76b5a248da9c8e55b391ae2 Mon Sep 17 00:00:00 2001 From: Vyrtsev Mikhail Date: Wed, 14 Nov 2018 09:52:51 +0300 Subject: [PATCH 2/6] fix unnecessary property --- web/app/common/constants.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web/app/common/constants.js b/web/app/common/constants.js index a4e1ef28..a526c2c7 100644 --- a/web/app/common/constants.js +++ b/web/app/common/constants.js @@ -59,7 +59,7 @@ export const STORAGE_AVAILABLE = (() => { */ export const IS_THIRD_PARTY = (() => { try { - return window.parent.document.location.host !== window.location.host; + return window.parent.location.host !== window.location.host; } catch (e) { return true; } From 87d011fe329334d828200c2d3b9e79bb4eb9664e Mon Sep 17 00:00:00 2001 From: Vyrtsev Mikhail Date: Wed, 14 Nov 2018 17:56:48 +0300 Subject: [PATCH 3/6] after @igoradamenko review --- web/app/common/constants.js | 2 +- web/app/common/localStorage.js | 10 +--------- web/app/components/auth-panel/auth-panel.jsx | 8 ++++---- web/app/components/thread/getCollapsedComments.js | 4 ++-- web/app/components/thread/saveCollapsedComments.js | 4 ++-- web/comments.ejs | 4 ++-- 6 files changed, 12 insertions(+), 20 deletions(-) diff --git a/web/app/common/constants.js b/web/app/common/constants.js index a526c2c7..5301d7ae 100644 --- a/web/app/common/constants.js +++ b/web/app/common/constants.js @@ -43,7 +43,7 @@ export const BLOCKING_DURATIONS = [ * Defines if browser storage features (cookies, localsrotage) * are available or blocked via browser preferences */ -export const STORAGE_AVAILABLE = (() => { +export const IS_STORAGE_AVAILABLE = (() => { try { localStorage.setItem('localstorage_availability_test', null); localStorage.removeItem('localstorage_availability_test'); diff --git a/web/app/common/localStorage.js b/web/app/common/localStorage.js index 417f7dc4..4de98c09 100644 --- a/web/app/common/localStorage.js +++ b/web/app/common/localStorage.js @@ -1,12 +1,4 @@ -export const isAvailable = (() => { - try { - localStorage.setItem('localstorage_availability_test', null); - localStorage.removeItem('localstorage_availability_test'); - } catch (e) { - return false; - } - return true; -})(); +import { isAvailable } from 'common/constants'; const failMessage = 'remark42: localStorage access denied, check browser preferences'; diff --git a/web/app/components/auth-panel/auth-panel.jsx b/web/app/components/auth-panel/auth-panel.jsx index 1cc5ef76..0926ddef 100644 --- a/web/app/components/auth-panel/auth-panel.jsx +++ b/web/app/components/auth-panel/auth-panel.jsx @@ -4,7 +4,7 @@ import { h, Component } from 'preact'; import UserId from './__user-id/auth-panel__user-id'; import Dropdown, { DropdownItem } from 'components/dropdown'; import Button from 'components/button'; -import { PROVIDER_NAMES, STORAGE_AVAILABLE, IS_THIRD_PARTY } from 'common/constants'; +import { PROVIDER_NAMES, IS_STORAGE_AVAILABLE, IS_THIRD_PARTY } from 'common/constants'; import { requestDeletion } from 'utils/email'; import { getHandleClickProps } from 'common/accessibility'; @@ -76,7 +76,7 @@ export default class AuthPanel extends Component {
)} - {STORAGE_AVAILABLE && + {IS_STORAGE_AVAILABLE && !loggedIn && (
Sign in to comment using{' '} @@ -100,7 +100,7 @@ export default class AuthPanel extends Component {
)} - {!STORAGE_AVAILABLE && + {!IS_STORAGE_AVAILABLE && IS_THIRD_PARTY && (
Disable third-party cookies blocking to sign in or open comments in{' '} @@ -114,7 +114,7 @@ export default class AuthPanel extends Component {
)} - {!STORAGE_AVAILABLE && + {!IS_STORAGE_AVAILABLE && !IS_THIRD_PARTY &&
Allow cookies to sign in and comment
}
diff --git a/web/app/components/thread/getCollapsedComments.js b/web/app/components/thread/getCollapsedComments.js index b240a8b5..a239b0fa 100644 --- a/web/app/components/thread/getCollapsedComments.js +++ b/web/app/components/thread/getCollapsedComments.js @@ -1,6 +1,6 @@ import { LS_COLLAPSE_KEY } from 'common/constants'; -import { getItem } from 'common/localStorage'; +import { getItem as localStorageGetItem } from 'common/localStorage'; -const getCollapsedComments = () => JSON.parse(getItem(LS_COLLAPSE_KEY) || '[]'); +const getCollapsedComments = () => JSON.parse(localStorageGetItem(LS_COLLAPSE_KEY) || '[]'); export default getCollapsedComments; diff --git a/web/app/components/thread/saveCollapsedComments.js b/web/app/components/thread/saveCollapsedComments.js index bb2da2de..53b29b62 100644 --- a/web/app/components/thread/saveCollapsedComments.js +++ b/web/app/components/thread/saveCollapsedComments.js @@ -1,6 +1,6 @@ import { LS_COLLAPSE_KEY } from 'common/constants'; -import { setItem } from 'common/localStorage'; +import { setItem as localStorageSetItem } from 'common/localStorage'; -const saveCollapsedComments = comments => setItem(LS_COLLAPSE_KEY, JSON.stringify(comments)); +const saveCollapsedComments = comments => localStorageSetItem(LS_COLLAPSE_KEY, JSON.stringify(comments)); export default saveCollapsedComments; diff --git a/web/comments.ejs b/web/comments.ejs index dbd08fc9..1b1ced18 100644 --- a/web/comments.ejs +++ b/web/comments.ejs @@ -39,8 +39,8 @@ titleElement.innerHTML = '

Comments for '+query.url+'

' var remark_config = { - site_id: 'remark', - url: 'https://remark42.com/demo/', + site_id: query.site_id, + url: query.url, }; (function () { From 4bac8f4d2c4d081d61c70ea09978fc28a5ee9946 Mon Sep 17 00:00:00 2001 From: Vyrtsev Mikhail Date: Wed, 14 Nov 2018 18:28:44 +0300 Subject: [PATCH 4/6] comments page in style of https://remark42.com/demo/ --- web/comments.ejs | 125 ++++++++++++++++++++++++++++------------------- 1 file changed, 76 insertions(+), 49 deletions(-) diff --git a/web/comments.ejs b/web/comments.ejs index 1b1ced18..23ed1488 100644 --- a/web/comments.ejs +++ b/web/comments.ejs @@ -1,58 +1,85 @@ - - - - - remark42 + + + + + Remark42 demo + - - -
-
-
-
+ h1 { + font-size: 50px; + margin-left: -0.05em; + } - - - + + if (query.site_id && query.url) { + var titleElement = document.getElementById('title'); + titleElement.innerHTML = 'Comments for ' + query.url + ''; + + var remark_config = { + site_id: query.site_id, + url: query.url, + }; + + (function() { + var d = document, + s = d.createElement('script'); + s.src = '/web/embed.js'; + s.type = 'text/javascript'; + (d.head || d.body).appendChild(s); + })(); + } + + + From 6b11cd85d9d2cae301e0ece5e4fe46633df40502 Mon Sep 17 00:00:00 2001 From: Vyrtsev Mikhail Date: Wed, 14 Nov 2018 18:31:06 +0300 Subject: [PATCH 5/6] comments page remark href fix --- web/comments.ejs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web/comments.ejs b/web/comments.ejs index 23ed1488..40a8653c 100644 --- a/web/comments.ejs +++ b/web/comments.ejs @@ -42,7 +42,7 @@ From 8e48605b75d0205dabf13bc4c631e610fd3e7d72 Mon Sep 17 00:00:00 2001 From: Vyrtsev Mikhail Date: Wed, 14 Nov 2018 21:20:41 +0300 Subject: [PATCH 6/6] oh no --- web/app/common/localStorage.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/web/app/common/localStorage.js b/web/app/common/localStorage.js index 4de98c09..00187297 100644 --- a/web/app/common/localStorage.js +++ b/web/app/common/localStorage.js @@ -1,21 +1,21 @@ -import { isAvailable } from 'common/constants'; +import { IS_STORAGE_AVAILABLE } from 'common/constants'; const failMessage = 'remark42: localStorage access denied, check browser preferences'; -export const setItem = isAvailable +export const setItem = IS_STORAGE_AVAILABLE ? localStorage.setItem.bind(localStorage) : () => { console.error(failMessage); // eslint-disable-line no-console }; -export const getItem = isAvailable +export const getItem = IS_STORAGE_AVAILABLE ? localStorage.getItem.bind(localStorage) : () => { console.error(failMessage); // eslint-disable-line no-console return null; }; -export const removeItem = isAvailable +export const removeItem = IS_STORAGE_AVAILABLE ? localStorage.removeItem.bind(localStorage) : () => { console.error(failMessage); // eslint-disable-line no-console