feat: add privacy policy

src/components/OptionsPage/index.tsx

@@ -25,20 +25,21 @@ const useStyles = makeStyles(
     }),
 )
 
-export function OptionsPage({ linkComponent }: { linkComponent?: any }) {
+export function OptionsPage(props: { linkComponent?: any; title: string; buttonTitle: string; to: string }) {
+    const { linkComponent, title, buttonTitle, to } = props
     const classes = useStyles()
 
     return (
         <Card className={classes.card}>
             <CardMedia className={classes.media} />
             <CardContent>
                 <Typography gutterBottom variant="h5" component="h2">
-                    {geti18nString('options_index_welcome')}
+                    {title}
                 </Typography>
             </CardContent>
             <CardActions>
-                <Button component={linkComponent} to="/welcome" color="primary" variant="contained">
-                    {geti18nString('options_index_setup')}
+                <Button component={linkComponent} to={to} color="primary" variant="contained">
+                    {buttonTitle}
                 </Button>
             </CardActions>
         </Card>

src/components/Welcomes/WelcomeVersion.ts

@@ -3,9 +3,11 @@
      * Upgrade version from true to number.
      * Remove this after 1/1/2020
      */
-    browser.storage.local.get().then(items => {
-        if (items.init === true) browser.storage.local.set({ init: WelcomeVersion.A })
-    })
+    typeof browser === 'object' &&
+        browser.storage &&
+        browser.storage.local.get().then(items => {
+            if (items.init === true) browser.storage.local.set({ init: WelcomeVersion.A })
+        })
 }
 interface Storage {
     init: WelcomeVersion

src/extension/options-page/Welcome/Privacy.tsx

@@ -0,0 +1,102 @@
+import React from 'react'
+
+export default (
+    <div className="container">
+        <style>
+            {`#root {
+                min-width: initial;
+            }
+            body {
+                margin: 8px !important;
+            }`}
+        </style>
+        <div className="row">
+            <div className="col-12 col-lg-8 offset-lg-2">
+                <h1>Maskbook (Browser Extension) Privacy Policy</h1>
+
+                <p>Last Updated on July 22, 2019</p>
+
+                <h2>Coverage</h2>
+
+                <p>
+                    This privacy policy document covers first-party implementations of Maskbook the Extension Software,
+                    which are engineered to work with web browsers, e.g. Google Chrome, Mozilla Firefox. It does not
+                    cover distribution methods (e.g. Google Chrome Web Store), Maskbook website, third-party
+                    implementations of Maskbook, or other first-party implementations of Maskbook which are engineered
+                    to work in alternative environments (e.g. Apple iOS and Google Android).
+                </p>
+
+                <h2>Information Being Collected by Maskbook the Extension Software</h2>
+
+                <p>
+                    The Extension Software collects the following information and store them locally only and will not
+                    send them over network, except for which are specified in other sections. These information are
+                    collected for and only for the fulfillment of functionalities of the Extension Software.
+                </p>
+
+                <ul>
+                    <li>Your Facebook profile metadata, including name, username, avatar, etc.</li>
+                    <li>Your Facebook timeline information, including posts, comments under posts, etc.</li>
+                    <li>Information you generate and/or create with Maskbook the Extension Software.</li>
+                    <li>Information you transfer from alternative implementations of Maskbook.</li>
+                </ul>
+
+                <h2>Intermediary Services</h2>
+
+                <p>
+                    Definition: An intermediary service is an online network service which is designed to work with
+                    Maskbook software implementations in order to allow Maskbook work properly (or efficiently).
+                </p>
+
+                <p>
+                    Some information are sent to intermediary services over network, for and only for the fulfillment of
+                    functionalities of Maskbook the Extension Software.
+                </p>
+
+                <ul>
+                    <li>Your Maskbook public key.</li>
+                    <li>The URL of your Facebook profile.</li>
+                    <li>The URL of your Facebook account ownership proof post.</li>
+                    <li>
+                        Un-anonymized recipient-specific asymmetric ciphers (ECDH) which encrypt the post-encryption
+                        keys (AES). (to be anonymized)
+                    </li>
+                </ul>
+
+                <p>
+                    Maskbook the Extension Software is designed to work with alternative intermediary services.
+                    Alternative intermediary services are those intermediary services which are operated by parties
+                    other than the developer of Maskbook. Maskbook will discover alternative intermediary services when
+                    first-party intermediary services (those intermediary services provided by the developer of
+                    Maskbook) are unavailable or unstable. These alternative intermediary services will be able to
+                    obtain the same information which are sent to first-party intermediary services, no less, no more.
+                </p>
+
+                <h2>Information Being Collected by Alternative Parties</h2>
+
+                <p>
+                    As long as the online services provided by the developers of Maskbook run on PaaS and IaaS
+                    cloud-computing platforms and through CDN, services employed by the developer of Maskbook, including
+                    Amazon AWS, Google Cloud Engine, Microsoft Azure, CloudFlare, Fastly, GitHub, Akamai, Linode, and
+                    Digital Ocean may technically be able to intercept communication and computation of online services
+                    provided by the developer of Maskbook which are designed for and only for the fulfillment of the
+                    functionalities of Maskbook.
+                </p>
+
+                <h2>Changes to this Statement / Contact Us</h2>
+
+                <p>
+                    We may update this Privacy Policy to reflect changes to our information practices. If we make any
+                    material changes we will provide notice on this website, prior to the change becoming effective. We
+                    encourage you to periodically review this page for the latest information on our privacy practices.
+                    If you continue to use Maskbook the Extension Software after those changes are in effect, you agree
+                    to the revised policy.
+                </p>
+                <p>
+                    If you have any other questions about this policy please contact{' '}
+                    <a href="[email protected]">[email protected]</a>.
+                </p>
+            </div>
+        </div>
+    </div>
+)

src/index.tsx

@@ -7,14 +7,36 @@ import Welcome from './extension/options-page/Welcome'
 import { ThemeProvider } from '@material-ui/styles'
 import { MaskbookLightTheme } from './utils/theme'
 import { OptionsPage } from './components/OptionsPage'
+import { geti18nString } from './utils/i18n'
+import Privacy from './extension/options-page/Welcome/Privacy'
 
 uiSetup()
 function App() {
     return (
         <ThemeProvider theme={MaskbookLightTheme}>
             <Router>
-                <Route exact path="/" component={() => <OptionsPage linkComponent={Link} />} />
+                <Route
+                    exact
+                    path="/"
+                    component={() => (
+                        <>
+                            <OptionsPage
+                                buttonTitle={geti18nString('options_index_welcome')}
+                                title={geti18nString('options_index_setup')}
+                                to="/welcome"
+                                linkComponent={Link}
+                            />
+                            <OptionsPage
+                                buttonTitle="View our privacy policy"
+                                title="How we collect and use your data"
+                                to="/privacy"
+                                linkComponent={Link}
+                            />
+                        </>
+                    )}
+                />
                 <Route path="/welcome" component={Welcome} />
+                <Route path="/privacy" component={() => Privacy} />
             </Router>
         </ThemeProvider>
     )

src/stories/OptionsPage.tsx

@@ -6,7 +6,7 @@ import { demoPeople } from './demoPeople'
 import { action } from '@storybook/addon-actions'
 import Dashboard from '../components/Dashboard/Dashboard'
 
-storiesOf('Options page', module).add('Index', () => <OptionsPage />)
+storiesOf('Options page', module).add('Index', () => <OptionsPage buttonTitle="Title 2" title="Title" to="/" />)
 storiesOf('Dashboard (unused)', module)
     .add('Identity Component (unused)', () => <Identity person={demoPeople[0]} onClick={action('Click')} />)
     .add('Dashboard (unused)', () => (

src/utils/hooks/useCapturedEvents.ts

@@ -7,7 +7,6 @@ export function useCapturedInput(
     ref: React.MutableRefObject<HTMLInputElement | undefined | null>,
     onChange: (newVal: string) => void,
 ) {
-    console.log(ref)
     const stop = useCallback((e: Event) => e.stopPropagation(), [])
     const use = useCallback((e: Event) => onChange((e.currentTarget as HTMLInputElement).value), [onChange])
     function binder<T extends keyof HTMLElementEventMap>(keys: T[], fn: (e: HTMLElementEventMap[T]) => void) {