Merge branch 'release/1.5.0' into released

.gitignore

@@ -18,6 +18,7 @@ public/polyfill
 
 # misc
 .DS_Store
+.idea
 .env.local
 .env.development.local
 .env.test.local

.storybook/addons.js

@@ -1,3 +1,4 @@
 import '@storybook/addon-knobs/register'
 import '@storybook/addon-actions/register'
 import '@storybook/addon-links/register'
+import '@storybook/addon-viewport/register'

config-overrides.js

@@ -9,11 +9,13 @@ module.exports = function override(/** @type{import("webpack").Configuration} */
     else delete config.devtool
     config.optimization.minimize = false
     config.entry = {
+        devtools: 'react-devtools',
         app: path.join(__dirname, './src/index.tsx'),
         contentscript: path.join(__dirname, './src/content-script.ts'),
         backgroundservice: path.join(__dirname, './src/background-service.ts'),
         injectedscript: path.join(__dirname, './src/extension/injected-script/index.ts'),
     }
+    if (env !== 'development') delete config.entry.devtools
     config.output.filename = 'js/[name].js'
     config.output.chunkFilename = 'js/[name].chunk.js'
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "maskbook",
-  "version": "1.4.2",
+  "version": "1.5.0",
   "private": true,
   "dependencies": {
     "@holoflows/kit": "https://github.com/DimensionDev/holoflows-kit",
@@ -32,7 +32,6 @@
     "react-router-dom": "^5.0.0",
     "react-scripts": "^3.0.1",
     "serialijse": "^0.1.3",
-    "storybook-addon-material-ui": "^0.9.0-alpha.19",
     "tiny-secp256k1": "^1.1.2",
     "ts-loader": "^6.0.1",
     "tslint": "^5.16.0",
@@ -48,14 +47,16 @@
     "test": "react-app-rewired test",
     "start": "start-storybook -p 9009 -s public",
     "build-storybook": "build-storybook -s public",
-    "postinstall": "cd node_modules/@holoflows/kit\nyarn\nyarn build"
+    "load-to-firefox": "npx web-ext run --source-dir ./dist/ --verbose",
+    "postinstall": "cd node_modules/@holoflows/kit && yarn && yarn build"
   },
   "devDependencies": {
     "@babel/core": "^7.4.3",
     "@storybook/addon-actions": "^5.1.0-rc.1",
     "@storybook/addon-info": "^5.1.0-rc.1",
     "@storybook/addon-knobs": "^5.1.0-rc.1",
     "@storybook/addon-links": "^5.1.0-rc.1",
+    "@storybook/addon-viewport": "^5.1.9",
     "@storybook/addons": "^5.1.0-rc.1",
     "@storybook/react": "^5.1.0-rc.1",
     "@types/storybook__addon-actions": "^3.4.2",
@@ -64,7 +65,8 @@
     "@types/storybook__addon-links": "^3.3.4",
     "@types/storybook__react": "^4.0.1",
     "awesome-typescript-loader": "^5.2.1",
-    "react-devtools": "^3.6.1"
+    "react-devtools": "^3.6.1",
+    "storybook-addon-material-ui": "^0.9.0-alpha.19"
   },
   "browserslist": {
     "production": [

public/manifest.json

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

src/_locales/en/messages.json

@@ -2,9 +2,6 @@
     "manifest_description": {
         "message": "Encrypt your posts & chats on You-Know-Where. Allow only your friends to decrypt."
     },
-    "additional_post_box__dont_know_who_you_are": {
-        "message": "Sorry, Maskbook cannot identify who you are. Please try again later."
-    },
     "additional_post_box__placeholder_w_name": {
         "message": "Hey $1, what's your mind? Encrypt with Maskbook"
     },
@@ -35,8 +32,8 @@
     "decrypted_postbox_title": {
         "message": "Maskbook decrypted content:"
     },
-    "decrypted_postbox_add_decryptor": {
-        "message": "View / add receiver"
+    "decrypted_postbox_add_recipients": {
+        "message": "View / add recipients"
     },
     "click_to_setup": {
         "message": "Click here to setup your Maskbook account!"
@@ -246,10 +243,10 @@
         "message": "Please click the \"Edit bio\" button or the pencil on the bio box."
     },
     "automation_request_paste_into_bio_box": {
-        "message": "Your prove content is write to your clipboard. Please paste into the bio input!"
+        "message": "Please copy your public key into the bio box and publish it."
     },
     "automation_request_paste_into_post_box": {
-        "message": "Prove content has been copied into the clipboard!\nHowever, you need to paste it to the post box by yourself."
+        "message": "Please copy your public key and publish it to your timeline!"
     },
     "payload_not_found": {
         "message": "Doesn't find payload"

src/_locales/zh/messages.json

@@ -2,9 +2,6 @@
     "manifest_description": {
         "message": "在臉書發佈加密訊息，只讓你的朋友閱讀。"
     },
-    "additional_post_box__dont_know_who_you_are": {
-        "message": "抱歉，Maskbook 無法發現你是誰，所以加密框暫時不可用。"
-    },
     "additional_post_box__placeholder_w_name": {
         "message": "Hey $1, 有何所思？用 Maskbook 加密分享。"
     },
@@ -36,8 +33,8 @@
     "decrypted_postbox_title": {
         "message": "Maskbook 解密出的文本："
     },
-    "decrypted_postbox_add_decryptor": {
-        "message": "查看或添加可解密權限者"
+    "decrypted_postbox_add_recipients": {
+        "message": "查看或添加收件人"
     },
     "click_to_setup": {
         "message": "點此開始配置"
@@ -247,10 +244,10 @@
         "message": "請點擊「編輯簡介」按鈕或簡介旁的鉛筆圖標"
     },
     "automation_request_paste_into_bio_box": {
-        "message": "已將公鑰拷貝至剪貼板，可以直接粘貼到輸入框。"
+        "message": "請拷貝公鑰，然後發佈到個人簡介上。"
     },
     "automation_request_paste_into_post_box": {
-        "message": "已將公鑰拷貝至剪貼板，可以直接粘貼到輸入框。"
+        "message": "請拷貝公鑰，然後發佈到時間綫上。"
     },
     "payload_not_found": {
         "message": "找不到 payload"

src/components/DataSource/PeopleRef.ts

@@ -4,6 +4,7 @@ import { MessageCenter } from '../../utils/messages'
 import Services from '../../extension/service'
 import { Person } from '../../database'
 import { PersonIdentifier, GroupIdentifier } from '../../database/type'
+import { useValueRef } from '../../utils/hooks/useValueRef'
 
 const ref = new ValueRef<Person[]>([])
 Services.People.queryPeople('facebook.com').then(p => (ref.value = p))
@@ -16,9 +17,7 @@ MessageCenter.on('newPerson', person => {
     ref.value = [...old, person]
 })
 export function usePeople() {
-    const [people, setPeople] = React.useState<Person[]>(ref.value)
-    React.useEffect(() => ref.addListener(val => setPeople(val)), [])
-    return people
+    return useValueRef(ref)
 }
 
 export const MyIdentityContext = React.createContext<Person | null>(null)

src/components/InjectedComponents/AdditionalPostBox.tsx

@@ -11,6 +11,7 @@ import { geti18nString } from '../../utils/i18n'
 import { makeStyles } from '@material-ui/styles'
 import { Card, CardHeader, Typography, Divider, Paper, InputBase, Button, Box } from '@material-ui/core'
 import { Person } from '../../database'
+import { NotSetupYetPrompt } from './NotSetupYetPrompt'
 
 interface Props {
     people: Person[]
@@ -83,6 +84,7 @@ export function AdditionalPostBoxUI(props: Props) {
 
 export function AdditionalPostBox() {
     const people = usePeople()
+    const classes = useStyles()
     const [identity, setIdentity] = useState<Person[]>([])
     useAsync(() => Services.People.queryMyIdentity('facebook.com'), []).then(setIdentity)
 
@@ -95,11 +97,14 @@ export function AdditionalPostBox() {
             )
             const fullPost = geti18nString('additional_post_box__encrypted_post_pre', encrypted)
             pasteIntoPostBox(fullPost, geti18nString('additional_post_box__encrypted_failed'))
-            Services.Crypto.publishPostAESKey(token)
+            Services.Crypto.publishPostAESKey(token, identity[0].identifier)
         },
         [identity[0]],
     )
-    if (identity.length === 0) return <>{geti18nString('additional_post_box__dont_know_who_you_are')}</>
+
+    if (identity.length === 0) {
+        return <NotSetupYetPrompt />
+    }
 
     // TODO: Multiple account
     if (identity.length > 1) console.warn('Multiple identity found. Let user choose one.')

src/components/InjectedComponents/AdditionalPostContent.tsx

@@ -11,7 +11,7 @@ interface Props {
 const useStyles = makeStyles({
     upDivider: { marginBottom: 6 },
     title: { display: 'flex' },
-    icon: { transform: 'translate(-1px, -1px)' },
+    icon: { transform: 'translate(-1px, -1px)', marginLeft: 6 },
     content: {
         marginBottom: 6,
         marginTop: 6,

src/components/InjectedComponents/CommentBox.tsx

@@ -0,0 +1,29 @@
+import React, { useEffect, useState, useRef } from 'react'
+import { styled } from '@material-ui/core/styles'
+import { useCapturedInput } from '../../utils/hooks/useCapturedEvents'
+
+const Input = styled('input')({
+    background: '#f2f3f5',
+    border: '1px solid #ccd0d5',
+    width: '100%',
+    height: 34,
+    borderRadius: 20,
+    padding: '2px 1em',
+    boxSizing: 'border-box',
+    marginTop: 6,
+})
+export function CommentBox(props: { onSubmit(newVal: string): void; display: boolean }) {
+    const InputRef = useRef<HTMLInputElement | null>()
+    const binder = useCapturedInput(InputRef, () => {})
+    useEffect(
+        binder(['keypress'], e => {
+            if (!InputRef.current) return
+            if (e.key === 'Enter') {
+                props.onSubmit(InputRef.current.value)
+                InputRef.current.value = ''
+            }
+        }),
+    )
+    if (!props.display) return null
+    return <Input ref={ref => (InputRef.current = ref)} placeholder="Maskbook!" />
+}

src/components/InjectedComponents/DecryptedPost.tsx

@@ -6,15 +6,14 @@ import { sleep } from '../../utils/utils'
 import Services from '../../extension/service'
 import { geti18nString } from '../../utils/i18n'
 import { makeStyles } from '@material-ui/styles'
-import { Link, Box, SnackbarContent, Button } from '@material-ui/core'
+import { Link, Box, useMediaQuery, useTheme } from '@material-ui/core'
 import { Person } from '../../database'
 import { PersonIdentifier } from '../../database/type'
-import { myUsernameRef } from '../../extension/content-script/injections/MyUsername'
-import { isMobile } from '../../social-network/facebook.com/isMobile'
+import { NotSetupYetPrompt } from './NotSetupYetPrompt'
 
 interface DecryptPostSuccessProps {
     data: { signatureVerifyResult: boolean; content: string }
-    requestAppendDecryptor(to: Person[]): Promise<void>
+    requestAppendRecipients?(to: Person[]): Promise<void>
     alreadySelectedPreviously: Person[]
     people: Person[]
 }
@@ -25,21 +24,33 @@ const useStyles = makeStyles({
 })
 function DecryptPostSuccess({ data, people, ...props }: DecryptPostSuccessProps) {
     const classes = useStyles()
-    const { ShareMenu, showShare } = useShareMenu(people, props.requestAppendDecryptor, props.alreadySelectedPreviously)
+    const { ShareMenu, showShare } = useShareMenu(
+        people,
+        props.requestAppendRecipients || (async () => {}),
+        props.alreadySelectedPreviously,
+    )
+    const theme = useTheme()
+    const mediaQuery = useMediaQuery(theme.breakpoints.down('sm'))
+    let passString = geti18nString('decrypted_postbox_verified')
+    let failString = geti18nString('decrypted_postbox_not_verified')
+    if (mediaQuery) passString = passString[passString.length - 1]
+    if (failString) failString = failString[failString.length - 1]
     return (
         <AdditionalContent
             title={
                 <>
                     {ShareMenu}
                     {geti18nString('decrypted_postbox_title')}
                     <Box flex={1} />
-                    <Link color="primary" onClick={showShare} className={classes.link}>
-                        {geti18nString('decrypted_postbox_add_decryptor')}
-                    </Link>
+                    {props.requestAppendRecipients && (
+                        <Link color="primary" onClick={showShare} className={classes.link}>
+                            {geti18nString('decrypted_postbox_add_recipients')}
+                        </Link>
+                    )}
                     {data.signatureVerifyResult ? (
-                        <span className={classes.pass}>{geti18nString('decrypted_postbox_verified')}</span>
+                        <span className={classes.pass}>{passString}</span>
                     ) : (
-                        <span className={classes.fail}>{geti18nString('decrypted_postbox_not_verified')}</span>
+                        <span className={classes.fail}>{failString}</span>
                     )}
                 </>
             }
@@ -49,30 +60,11 @@ function DecryptPostSuccess({ data, people, ...props }: DecryptPostSuccessProps)
 }
 
 const DecryptPostAwaiting = <AdditionalContent title={geti18nString('decrypted_postbox_decrypting')} />
-const useNotSetUpYetStyles = makeStyles({
+export const useNotSetUpYetStyles = makeStyles({
     root: {
         marginBottom: '2em',
     },
 })
-function NotSetupYetPrompt() {
-    const [id, set] = useState(myUsernameRef.value)
-    useEffect(() => myUsernameRef.addListener(set))
-
-    const styles = useNotSetUpYetStyles()
-    const button = (
-        <Button onClick={() => Services.Welcome.openWelcomePage(id, isMobile)} color="primary" size="small">
-            {geti18nString('click_to_setup')}
-        </Button>
-    )
-    return (
-        <SnackbarContent
-            classes={styles}
-            elevation={0}
-            message={geti18nString('service_not_setup_yet')}
-            action={button}
-        />
-    )
-}
 function DecryptPostFailed({ error }: { error: Error }) {
     if (error && error.message === geti18nString('service_not_setup_yet')) {
         return <NotSetupYetPrompt />
@@ -85,40 +77,41 @@ function DecryptPostFailed({ error }: { error: Error }) {
 }
 
 interface DecryptPostProps {
+    onDecrypted(post: string): void
     postBy: PersonIdentifier
     whoAmI: PersonIdentifier
     encryptedText: string
     people: Person[]
     alreadySelectedPreviously: Person[]
-    requestAppendDecryptor(to: Person[]): Promise<void>
+    requestAppendRecipients(to: Person[]): Promise<void>
 }
 function DecryptPost(props: DecryptPostProps) {
-    const { postBy, whoAmI, encryptedText, people, alreadySelectedPreviously, requestAppendDecryptor } = props
+    const { postBy, whoAmI, encryptedText, people, alreadySelectedPreviously, requestAppendRecipients } = props
     const rAD = useCallback(
         async (people: Person[]) => {
-            await requestAppendDecryptor(people)
+            await requestAppendRecipients(people)
             await sleep(1500)
         },
-        [requestAppendDecryptor],
+        [requestAppendRecipients],
     )
-    function ifError(x: any): x is { error: string } {
-        return 'error' in x
-    }
     return (
         <AsyncComponent
             promise={() => Services.Crypto.decryptFrom(encryptedText, postBy, whoAmI)}
             dependencies={[encryptedText, people, alreadySelectedPreviously]}
             awaitingComponent={DecryptPostAwaiting}
-            completeComponent={props =>
-                ifError(props.data) ? (
-                    <DecryptPostFailed error={new Error(props.data.error)} />
+            completeComponent={_props =>
+                'error' in _props.data ? (
+                    <DecryptPostFailed error={new Error(_props.data.error)} />
                 ) : (
-                    <DecryptPostSuccess
-                        data={props.data}
-                        alreadySelectedPreviously={alreadySelectedPreviously}
-                        requestAppendDecryptor={rAD}
-                        people={people}
-                    />
+                    (props.onDecrypted(_props.data.content),
+                    (
+                        <DecryptPostSuccess
+                            data={_props.data}
+                            alreadySelectedPreviously={alreadySelectedPreviously}
+                            requestAppendRecipients={postBy.equals(whoAmI) ? rAD : undefined}
+                            people={people}
+                        />
+                    ))
                 )
             }
             failedComponent={DecryptPostFailed}