Merge pull request #512 from cofacts/terms

Implements terms page directly under Cofacts website

components/AppLayout/AppFooter.js

@@ -8,7 +8,6 @@ import {
   PROJECT_HACKFOLDR,
   PROJECT_SOURCE_CODE,
   PROJECT_MEDIUM,
-  USER_AGREEMENT_URL,
   CONTACT_EMAIL,
   LINE_URL,
 } from 'constants/urls';
@@ -113,9 +112,7 @@ function AppFooter() {
           <div className={classes.column}>
             <h3>{t`About`}</h3>
             <CustomLink href="/about">{t`About Cofacts`}</CustomLink>
-            <CustomLink external href={USER_AGREEMENT_URL}>
-              {t`User Agreement`}
-            </CustomLink>
+            <CustomLink href="/terms">{t`User Agreement`}</CustomLink>
             <CustomLink external href={PROJECT_HACKFOLDR}>
               {t`Introduction`}
             </CustomLink>

components/AppLayout/LoginModal.js

@@ -3,11 +3,8 @@ import { makeStyles } from '@material-ui/core/styles';
 import Typography from '@material-ui/core/Typography';
 import { Dialog, DialogTitle, DialogContent } from '@material-ui/core';
 import getConfig from 'next/config';
-import {
-  LICENSE_URL,
-  USER_AGREEMENT_URL,
-  EDITOR_FACEBOOK_GROUP,
-} from 'constants/urls';
+import { LICENSE_URL, EDITOR_FACEBOOK_GROUP } from 'constants/urls';
+import Link from 'next/link';
 import { AUTHOR, LICENSE } from 'lib/terms';
 import Facebook from './images/facebook.svg';
 import Twitter from './images/twitter.svg';
@@ -91,7 +88,9 @@ function LoginModal({ onClose, redirectPath }) {
   const classes = useStyles();
 
   const termsLink = (
-    <a key="termsLink" href={USER_AGREEMENT_URL}>{t`User Agreement`}</a>
+    <Link href="/terms" key="termsLink">
+      <a>{t`User Agreement`}</a>
+    </Link>
   );
   const licenseLink = (
     <a key="licenseLink" href={LICENSE_URL}>

constants/urls.js

@@ -12,8 +12,6 @@ export const PROJECT_SOURCE_CODE =
 export const PROJECT_MEDIUM = 'https://medium.com/cofacts';
 export const DEVELOPER_HOMEPAGE = 'https://hackmd.io/s/r1nfwTrgM';
 export const LICENSE_URL = 'https://creativecommons.org/licenses/by-sa/4.0/';
-export const USER_AGREEMENT_URL =
-  'https://github.com/cofacts/rumors-site/blob/master/LEGAL.md';
 
 // https://developers.facebook.com/docs/sharing/reference/share-dialog#redirect
 export const FACEBOOK_SHARE_URL_PREFIX =

pages/terms.js

@@ -0,0 +1,120 @@
+import { useState, useEffect } from 'react';
+import { t, jt } from 'ttag';
+import Head from 'next/head';
+import { styled } from '@material-ui/core/styles';
+
+import AppLayout from 'components/AppLayout';
+import withData from 'lib/apollo';
+
+// Link to the user agreement content with commits that changes this file
+//
+const TERMS_REVISIONS_URL =
+  'https://github.com/cofacts/rumors-site/commits/master/LEGAL.md';
+
+// URL to the raw Markdown version of the user agreement
+//
+const TERMS_MARKDOWN_URL =
+  'https://raw.githubusercontent.com/cofacts/rumors-site/master/LEGAL.md';
+
+// cdn.js URL and checksum from cdn.js website
+//
+const JS_LIBS = [
+  [
+    'https://cdnjs.cloudflare.com/ajax/libs/marked/4.1.1/marked.min.js',
+    'sha512-+mCmSlBpa1bF0npQzdpxFWIyJaFbVdEcuyET6FtmHmlXIacQjN/vQs1paCsMlVHHZ2ltD2VTHy3fLFhXQu0AMA==',
+  ],
+  [
+    'https://cdnjs.cloudflare.com/ajax/libs/dompurify/2.4.0/purify.min.js',
+    'sha512-/hVAZO5POxCKdZMSLefw30xEVwjm94PAV9ynjskGbIpBvHO9EBplEcdUlBdCKutpZsF+La8Ag4gNrG0gAOn3Ig==',
+  ],
+];
+
+function getScriptId(idx) {
+  return `_terms_script_${idx}`;
+}
+
+const TermArticle = styled('article')(({ theme }) => ({
+  margin: '0 auto 36px',
+  maxWidth: '70em',
+
+  '& a': {
+    color: theme.palette.common.blue1,
+  },
+
+  '& h1': {
+    fontSize: 24,
+    fontWeight: 500,
+  },
+
+  '& h2': {
+    fontSize: 20,
+    fontWeight: 500,
+  },
+
+  '& hr': {
+    margin: '24px 0',
+    border: '0',
+    borderTop: `1px solid ${theme.palette.secondary[100]}`,
+  },
+
+  [theme.breakpoints.up('md')]: {
+    margin: '48px auto',
+    '& h1': {
+      fontSize: 34,
+    },
+  },
+}));
+
+function Terms() {
+  const [termsHtml, setTermsHtml] = useState(null);
+
+  useEffect(() => {
+    const markdownPromise = fetch(TERMS_MARKDOWN_URL).then(resp => resp.text());
+
+    const scriptPromises = JS_LIBS.map(([src, integrity], idx) => {
+      // Don't insert the same script when visit this page the second time
+      //
+      if (document.getElementById(getScriptId(idx)) !== null)
+        return Promise.resolve();
+
+      return new Promise(resolve => {
+        /**
+         * <script src="..." integrity="..." crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+         */
+        const scriptElem = document.createElement('script');
+        scriptElem.id = getScriptId(idx);
+        scriptElem.onload = resolve;
+        scriptElem.integrity = integrity;
+        scriptElem.crossOrigin = 'anonymous';
+        scriptElem.referrerPolicy = 'no-referrer';
+        scriptElem.src = src;
+        window.document.body.appendChild(scriptElem);
+      });
+    });
+
+    Promise.all([markdownPromise, ...scriptPromises]).then(([markdown]) => {
+      // All stuff is ready!
+      const { marked, DOMPurify } = window;
+      setTermsHtml({ __html: DOMPurify.sanitize(marked.parse(markdown)) });
+    });
+  }, []);
+
+  const revisionLink = (
+    <a key="revision" href={TERMS_REVISIONS_URL}>{t`Github`}</a>
+  );
+
+  return (
+    <AppLayout>
+      <Head>
+        <title>{t`User Agreement`}</title>
+      </Head>
+      <TermArticle>
+        {termsHtml ? <div dangerouslySetInnerHTML={termsHtml} /> : t`Loading`}
+        <hr />
+        <p>{jt`See ${revisionLink} for other revisions of the user agreement.`}</p>
+      </TermArticle>
+    </AppLayout>
+  );
+}
+
+export default withData(Terms);