Merge branch 'master' of github.com:/DimensionDev/Maskbook into featu…

…re/firefox

.gitignore

@@ -15,6 +15,7 @@ public/polyfill
 # production
 /build
 /dist
+/storybook-static
 
 # misc
 .DS_Store

.yarnrc

@@ -0,0 +1 @@
+network-timeout 1200000

package.json

@@ -1,6 +1,6 @@
 {
   "name": "maskbook",
-  "version": "1.5.0",
+  "version": "1.5.2",
   "private": true,
   "dependencies": {
     "@holoflows/kit": "https://github.com/DimensionDev/holoflows-kit",
@@ -12,6 +12,7 @@
     "@types/jest": "^24.0.13",
     "@types/lodash-es": "^4.17.3",
     "@types/node": "^12.0.2",
+    "@types/qrcode": "^1.3.3",
     "@types/react": "^16.8.18",
     "@types/react-dom": "^16.8.4",
     "@types/react-router-dom": "^4.3.3",
@@ -23,9 +24,11 @@
     "elliptic": "^6.4.1",
     "gun": "0.2019.422",
     "idb": "^4.0.3",
+    "jsqr": "^1.2.0",
     "lodash-es": "^4.17.11",
     "npm-run-all": "^4.1.5",
     "pvtsutils": "^1.0.4",
+    "qrcode": "^1.4.1",
     "react": "^16.8.3",
     "react-app-rewired": "^2.1.3",
     "react-dom": "^16.8.3",
@@ -36,12 +39,11 @@
     "ts-loader": "^6.0.1",
     "tslint": "^5.16.0",
     "typescript": "^3.5.1",
+    "web-ext": "^3.1.1",
     "web-ext-types": "^3.1.0",
     "webcrypto-liner": "0.1.38",
     "webextension-polyfill": "^0.4.0",
-    "write-file-webpack-plugin": "^4.5.0",
-    "@types/qrcode": "^1.3.3",
-    "qrcode": "^1.4.1"
+    "write-file-webpack-plugin": "^4.5.0"
   },
   "scripts": {
     "watch": "react-app-rewired start",

public/manifest.json

@@ -1,7 +1,7 @@
 {
     "$schema": "http://json.schemastore.org/chrome-manifest",
     "name": "Maskbook",
-    "version": "1.5.0",
+    "version": "1.5.2",
     "manifest_version": 2,
     "content_scripts": [
         {

src/_locales/en/messages.json

@@ -90,7 +90,7 @@
         "message": "Welcome to Maskbook"
     },
     "welcome_0_description": {
-        "message": "You can post on Facebook without allowing Facebook to stalk, analyze, and peep into you."
+        "message": "You can post on Facebook without allowing Facebook to stalk, analyze, or spy on you."
     },
     "welcome_0_new_user": {
         "message": "New user?"
@@ -108,13 +108,13 @@
         "message": "Lost your keypair backup? No worry. Simply start as a new user."
     },
     "welcome_1a2_title": {
-        "message": "Encrypt message use this postbox"
+        "message": "Encrypt message in a Maskbook postbox"
     },
     "welcome_1a2_imgalt": {
         "message": "Screenshot of how to encrypt message with Maskbook"
     },
     "welcome_1a2_description": {
-        "message": "Then only people you selected with Maskbook can see the post content"
+        "message": "Then only people you select with Maskbook can see the posted content."
     },
     "welcome_1a2_done_button": {
         "message": "Nice!"
@@ -123,10 +123,10 @@
         "message": "Keep your backups carefully"
     },
     "welcome_1a3_description1": {
-        "message": "The first backup has been put in your Downloads folder."
+        "message": "Our extension is asking you to download your key as a file."
     },
     "welcome_1a3_description2": {
-        "message": "And export backups frequently!"
+        "message": "Back it up often."
     },
     "welcome_1a3_done_button": {
         "message": "Got it!"
@@ -182,6 +182,15 @@
     "welcome_1b_title": {
         "message": "Restore your keypair"
     },
+    "welcome_1b_tabs_backup": {
+        "message": "Select the backup file"
+    },
+    "welcome_1b_tabs_qr": {
+        "message": "Scan the QR Code"
+    },
+    "welcome_1b_tabs_text": {
+        "message": "Paste the content of the backup file by yourself"
+    },
     "welcome_1b_dragging": {
         "message": "Drag your key backup into this dialog"
     },
@@ -191,6 +200,24 @@
     "welcome_1b_file_selected": {
         "message": "Selected exported key backup: $1"
     },
+    "welcome_1b_qr_0": {
+        "message": "You can find QR Code by"
+    },
+    "welcome_1b_qr_1": {
+        "message": "1. right-click the icon of the Maskbook in the browser address bar"
+    },
+    "welcome_1b_qr_2": {
+        "message": "2. click \"Options\""
+    },
+    "welcome_1b_qr_3": {
+        "message": "3. click \"Setup for Mobile\""
+    },
+    "welcome_1b_qr_error_1": {
+        "message": "There is an error occur during the scanning."
+    },
+    "welcome_1b_qr_error_2": {
+        "message": "You may try other ways to restore your account."
+    },
     "welcome_2_title": {
         "message": "You're done!"
     },

src/_locales/zh/messages.json

@@ -109,7 +109,7 @@
         "message": "弄丟了備份檔案？不用擔心，當作自己是新用戶即可。"
     },
     "welcome_1a2_title": {
-        "message": "使用這個輸入框來加密"
+        "message": "使用 Maskbook 的輸入框來加密"
     },
     "welcome_1a2_imgalt": {
         "message": "關於如何使用 Maskbook 加密的截圖"
@@ -124,7 +124,7 @@
         "message": "請妥善保管備份檔案"
     },
     "welcome_1a3_description1": {
-        "message": "第一個備份檔案已經放在「下載」文件夾。"
+        "message": "稍後會有一個保存提示，請妥善保管備份檔案。"
     },
     "welcome_1a3_description2": {
         "message": "記得經常創建新備份！"
@@ -183,6 +183,15 @@
     "welcome_1b_title": {
         "message": "導入備份檔案"
     },
+    "welcome_1b_tabs_backup": {
+        "message": "選擇備份檔案"
+    },
+    "welcome_1b_tabs_qr": {
+        "message": "掃描 QR 碼"
+    },
+    "welcome_1b_tabs_text": {
+        "message": "手動貼入備份檔案的内容"
+    },
     "welcome_1b_dragging": {
         "message": "將備份檔案拖拽到此處"
     },
@@ -192,6 +201,24 @@
     "welcome_1b_file_selected": {
         "message": "已選取備份檔案：$1"
     },
+    "welcome_1b_qr_0": {
+        "message": "你可以以以下方式找到 QR 碼"
+    },
+    "welcome_1b_qr_1": {
+        "message": "1. 右鍵點擊瀏覽器右上方的 Maskbook 按鈕"
+    },
+    "welcome_1b_qr_2": {
+        "message": "2. 點擊「選項」"
+    },
+    "welcome_1b_qr_3": {
+        "message": "3. 點擊「設定移動版」"
+    },
+    "welcome_1b_qr_error_1": {
+        "message": "掃描過程中出現錯誤"
+    },
+    "welcome_1b_qr_error_2": {
+        "message": "你或許可以試試其他方式來恢復賬號設定。"
+    },
     "welcome_2_title": {
         "message": "完畢！"
     },

src/components/Welcomes/1b1.tsx

@@ -3,9 +3,15 @@ import * as React from 'react'
 import ArrowBack from '@material-ui/icons/ArrowBack'
 import { useDragAndDrop } from '../../utils/hooks/useDragAndDrop'
 import { geti18nString } from '../../utils/i18n'
-import { makeStyles, Paper, Button, Typography, Theme } from '@material-ui/core'
+import { makeStyles, Button, Typography, Tabs, Tab } from '@material-ui/core'
 import { styled } from '@material-ui/styles'
+import FolderOpen from '@material-ui/icons/FolderOpen'
+import Camera from '@material-ui/icons/CameraAlt'
+import Text from '@material-ui/icons/TextFormat'
 import WelcomeContainer from './WelcomeContainer'
+import QRScanner from './QRScanner'
+import { isWKWebkit, iOSHost } from '../../utils/iOS-RPC'
+import { useAsync } from '../../utils/components/AsyncComponent'
 
 const RestoreBox = styled('div')(({ theme }) => ({
     color: theme.palette.text.hint,
@@ -24,8 +30,9 @@ const RestoreBox = styled('div')(({ theme }) => ({
 }))
 interface Props {
     back(): void
-    restore(file: File): void
+    restore(file: File | string): void
 }
+const videoHeight = 360
 const useStyles = makeStyles(theme => ({
     nav: {
         paddingTop: theme.spacing(1),
@@ -58,11 +65,35 @@ const useStyles = makeStyles(theme => ({
             color: 'black',
         },
     },
+    video: {
+        background: 'black',
+        height: videoHeight,
+    },
+    videoError: {
+        background: 'rgba(0, 0, 0, 0.7)',
+        height: videoHeight,
+        transform: `translate(0px, -${videoHeight + 28}px)`,
+        color: 'white',
+        paddingTop: videoHeight / 2,
+        boxSizing: 'border-box',
+        marginBottom: -videoHeight,
+        paddingLeft: '2em',
+        paddingRight: '2em',
+    },
+    textarea: {
+        width: '100%',
+        height: 200,
+    },
 }))
 export default function Welcome({ back, restore }: Props) {
     const classes = useStyles()
     const ref = React.useRef<HTMLInputElement>(null)
+    const textAreaRef = React.useRef<HTMLTextAreaElement>(null)
     const { dragEvents, fileReceiver, fileRef, dragStatus } = useDragAndDrop()
+
+    const [tab, setTab] = React.useState(0)
+    const [qrError, setError] = React.useState<boolean>(false)
+
     return (
         <WelcomeContainer {...dragEvents}>
             <nav className={classes.nav}>
@@ -71,7 +102,52 @@ export default function Welcome({ back, restore }: Props) {
                     {geti18nString('back')}
                 </Button>
             </nav>
+            <Tabs
+                value={tab}
+                onChange={(e, i) => setTab(i)}
+                variant="fullWidth"
+                indicatorColor="primary"
+                textColor="primary"
+                aria-label="icon tabs example">
+                <Tab icon={<FolderOpen />} aria-label={geti18nString('welcome_1b_tabs_backup')} />
+                <Tab
+                    disabled={!('BarcodeDetector' in window || isWKWebkit)}
+                    icon={<Camera />}
+                    aria-label={geti18nString('welcome_1b_tabs_qr')}
+                />
+                <Tab icon={<Text />} aria-label={geti18nString('welcome_1b_tabs_text')} />
+            </Tabs>
             <main className={classes.main}>
+                {tab === 0 ? FileUI() : null}
+                {tab === 1 ? isWKWebkit ? <WKWebkitQR onScan={restore} onQuit={() => setTab(0)} /> : QR() : null}
+                {tab === 2 ? TextArea() : null}
+
+                {tab === 0 ? (
+                    <Button
+                        onClick={() => restore(fileRef.current!)}
+                        disabled={!fileRef.current}
+                        variant="contained"
+                        color="primary"
+                        className={classes.button}>
+                        {geti18nString('restore')}
+                    </Button>
+                ) : null}
+                {tab === 2 ? (
+                    <Button
+                        onClick={() => restore(textAreaRef.current!.value)}
+                        variant="contained"
+                        color="primary"
+                        className={classes.button}>
+                        {geti18nString('restore')}
+                    </Button>
+                ) : null}
+            </main>
+        </WelcomeContainer>
+    )
+
+    function FileUI() {
+        return (
+            <>
                 <Typography variant="h5">{geti18nString('welcome_1b_title')}</Typography>
                 <form>
                     <input
@@ -92,15 +168,48 @@ export default function Welcome({ back, restore }: Props) {
                             : geti18nString('welcome_1b_no_file_selected')}
                     </RestoreBox>
                 </form>
-                <Button
-                    onClick={() => restore(fileRef.current!)}
-                    disabled={!fileRef.current}
-                    variant="contained"
-                    color="primary"
-                    className={classes.button}>
-                    {geti18nString('restore')}
-                </Button>
-            </main>
-        </WelcomeContainer>
-    )
+            </>
+        )
+    }
+    function WKWebkitQR(props: { onScan(val: string): void; onQuit(): void }) {
+        useAsync(() => iOSHost.scanQRCode(), []).then(props.onScan, props.onQuit)
+        return null
+    }
+    function QR() {
+        return (
+            <>
+                <Typography variant="h5">{geti18nString('welcome_1b_tabs_qr')}</Typography>
+                <Typography variant="body1">
+                    {geti18nString('welcome_1b_qr_0')} <br />
+                    {geti18nString('welcome_1b_qr_1')} <br />
+                    {geti18nString('welcome_1b_qr_2')} <br />
+                    {geti18nString('welcome_1b_qr_3')}
+                </Typography>
+                <QRScanner
+                    onError={() => setError(true)}
+                    scanning
+                    className={classes.video}
+                    width="100%"
+                    onResult={restore}
+                />
+                {qrError ? (
+                    <div className={classes.videoError}>
+                        {geti18nString('welcome_1b_qr_error_1')}
+                        There is an error occur during the scanning.
+                        <br />
+                        {geti18nString('welcome_1b_qr_error_2')}
+                        You may try other ways to restore your account.
+                    </div>
+                ) : null}
+            </>
+        )
+    }
+    function TextArea() {
+        return (
+            <>
+                <Typography variant="h5">Paste the JSON here</Typography>
+                <textarea className={classes.textarea} ref={textAreaRef} />
+            </>
+        )
+    }
 }