feat: let Welcome1a4v2 supports multiple composition

src/_locales/en/messages.json

@@ -164,8 +164,8 @@
     "welcome_1a4_title": {
         "message": "Verify Account Ownership"
     },
-    "welcome_1a4_bio_disabled": {
-        "message": "Sorry, automatically verify your account through bio is not available now."
+    "welcome_1a4_disabled": {
+        "message": "Sorry, only one automatic verification method is available."
     },
     "welcome_1a4_type_auto_subtitle1": {
         "message": "Avoid any confusion before your first encrypted post."

src/_locales/zh/messages.json

@@ -165,8 +165,8 @@
     "welcome_1a4_title": {
         "message": "驗證賬號歸屬權"
     },
-    "welcome_1a4_bio_disabled": {
-        "message": "由於技術問題，此驗證方式暫時不可用。"
+    "welcome_1a4_disabled": {
+        "message": "由於技術問題，暫時只有一種驗證方式可用。"
     },
     "welcome_1a4_type_auto_subtitle1": {
         "message": "避免好友感到迷惑"

src/components/Welcomes/1a4.auto.tsx

@@ -25,8 +25,11 @@ function Option(props: React.PropsWithChildren<{ activated: boolean }>) {
     return <div className={classes.root} children={props.children} />
 }
 interface Props {
+    hasBio: boolean
+    hasPost: boolean
+    postDisabled: boolean
     bioDisabled: boolean
-    type: 'bio' | 'post'
+    type: 'bio' | 'post' | undefined
     setType(type: Props['type']): void
 }
 const useStyles = makeStyles(theme => ({
@@ -48,51 +51,58 @@ const useStyles = makeStyles(theme => ({
     title: { fontWeight: 'bold', '& + *': { opacity: 0.6 } },
     red: { color: 'red' },
 }))
-export default function Auto({ type, setType, bioDisabled }: Props) {
+export default function Auto({ type, setType, bioDisabled, hasBio, hasPost, postDisabled }: Props) {
     const classes = useStyles()
+    const bio = (
+        <FormControlLabel
+            disabled={bioDisabled}
+            value="bio"
+            labelPlacement="top"
+            control={<Radio classes={{ root: classes.radio, checked: classes.checked }} />}
+            label={
+                <Option activated={type === 'bio'}>
+                    <Typography variant="subtitle2" className={classes.title}>
+                        {geti18nString('welcome_1a4_auto_profile_title')}
+                    </Typography>
+                    <Typography variant="subtitle2">
+                        {geti18nString('welcome_1a4_auto_profile_description1')}
+                        <br />
+                        {geti18nString('welcome_1a4_auto_profile_description2')}
+                    </Typography>
+                </Option>
+            }
+        />
+    )
+    const post = (
+        <FormControlLabel
+            value="post"
+            disabled={postDisabled}
+            labelPlacement="top"
+            control={<Radio classes={{ root: classes.radio, checked: classes.checked }} />}
+            label={
+                <Option activated={type === 'post'}>
+                    <Typography variant="subtitle2" className={classes.title}>
+                        {geti18nString('welcome_1a4_auto_post_title')}
+                    </Typography>
+                    <Typography variant="subtitle2">
+                        {geti18nString('welcome_1a4_auto_post_description1')}
+                        <br />
+                        {geti18nString('welcome_1a4_auto_post_description2')}
+                    </Typography>
+                </Option>
+            }
+        />
+    )
     return (
         <div className={classes.root}>
             <FormControl component={'fieldset' as any} className={classes.root}>
                 <RadioGroup
                     className={classes.group}
                     aria-label={geti18nString('welcome_1a4_auto_radio_aria')}
-                    value={type}
+                    value={type === undefined ? '__' : type}
                     onChange={(e, v) => setType(v as any)}>
-                    <FormControlLabel
-                        disabled={bioDisabled}
-                        value="bio"
-                        labelPlacement="top"
-                        control={<Radio classes={{ root: classes.radio, checked: classes.checked }} />}
-                        label={
-                            <Option activated={type === 'bio'}>
-                                <Typography variant="subtitle2" className={classes.title}>
-                                    {geti18nString('welcome_1a4_auto_profile_title')}
-                                </Typography>
-                                <Typography variant="subtitle2">
-                                    {geti18nString('welcome_1a4_auto_profile_description1')}
-                                    <br />
-                                    {geti18nString('welcome_1a4_auto_profile_description2')}
-                                </Typography>
-                            </Option>
-                        }
-                    />
-                    <FormControlLabel
-                        value="post"
-                        labelPlacement="top"
-                        control={<Radio classes={{ root: classes.radio, checked: classes.checked }} />}
-                        label={
-                            <Option activated={type === 'post'}>
-                                <Typography variant="subtitle2" className={classes.title}>
-                                    {geti18nString('welcome_1a4_auto_post_title')}
-                                </Typography>
-                                <Typography variant="subtitle2">
-                                    {geti18nString('welcome_1a4_auto_post_description1')}
-                                    <br />
-                                    {geti18nString('welcome_1a4_auto_post_description2')}
-                                </Typography>
-                            </Option>
-                        }
-                    />
+                    {hasBio ? bio : null}
+                    {hasPost ? post : null}
                 </RadioGroup>
             </FormControl>
         </div>

src/components/Welcomes/1a4.v2.tsx

@@ -7,6 +7,10 @@ import { makeStyles, Typography, Button } from '@material-ui/core'
 import WelcomeContainer from './WelcomeContainer'
 
 interface Props {
+    hasBio: boolean
+    hasPost: boolean
+    hasManual: boolean
+    postDisabled?: boolean
     bioDisabled?: boolean
     provePost: string
     requestAutoVerify(type: 'bio' | 'post'): void
@@ -25,14 +29,35 @@ const useStyles = makeStyles(theme => ({
     textFieldLong: { minHeight: '11em' },
     red: { color: 'red' },
 }))
-export default function Welcome({ provePost, requestAutoVerify, requestManualVerify, bioDisabled }: Props) {
+export default function Welcome(props: Props) {
+    const { provePost, requestAutoVerify, requestManualVerify } = props
+    const { bioDisabled, postDisabled, hasBio, hasPost, hasManual } = props
+
     const classes = useStyles()
-    const [actionType, setActionType] = React.useState<'auto' | 'manual'>('auto')
-    const [type, setType] = React.useState<'bio' | 'post'>(bioDisabled ? 'post' : 'bio')
 
+    const [actionType, setActionType] = React.useState<'auto' | 'manual'>(hasBio || hasPost ? 'auto' : 'manual')
+
+    const bioAvailable = hasBio && !bioDisabled
+    const postAvailable = hasPost && !postDisabled
+    const autoAvailable = bioAvailable || postAvailable
+
+    const [type, setType] = React.useState<'bio' | 'post' | undefined>(undefined)
     const setManual = React.useCallback(() => setActionType('manual'), [])
     const setAuto = React.useCallback(() => setActionType('auto'), [])
-    const finish = React.useCallback(() => requestAutoVerify(type), [type])
+    const finish = React.useCallback(() => requestAutoVerify(type!), [type])
+
+    if (!autoAvailable && !hasManual) return <>There is no way to setup Maskbook</>
+    if (type === undefined) {
+        if (bioAvailable) setType('bio')
+        else if (postAvailable) setType('post')
+    }
+    if (!bioAvailable && type === 'bio' && postAvailable) setType('post')
+    if (!postAvailable && type === 'post' && bioAvailable) setType('bio')
+    if (!autoAvailable && actionType === 'auto') {
+        setType(undefined)
+        setManual()
+    }
+    if (!hasManual && actionType === 'manual') setAuto()
 
     const auto = (
         <>
@@ -41,13 +66,17 @@ export default function Welcome({ provePost, requestAutoVerify, requestManualVer
                 <br />
                 {geti18nString('welcome_1a4_type_auto_subtitle2')}
             </Typography>
-            <Button onClick={finish} variant="contained" color="primary" className={classes.button}>
-                {geti18nString('finish')}
-            </Button>
+            {(bioAvailable || postAvailable) && (
+                <Button onClick={finish} variant="contained" color="primary" className={classes.button}>
+                    {geti18nString('finish')}
+                </Button>
+            )}
             <br />
-            <Button color="primary" onClick={setManual}>
-                {geti18nString('welcome_1a4_type_auto_switch')}
-            </Button>
+            {hasManual && (
+                <Button color="primary" onClick={setManual}>
+                    {geti18nString('welcome_1a4_type_auto_switch')}
+                </Button>
+            )}
         </>
     )
     const manual = (
@@ -61,21 +90,30 @@ export default function Welcome({ provePost, requestAutoVerify, requestManualVer
                 {geti18nString('welcome_1a4_type_manual_goto')}
             </Button>
             <br />
-            <Button color="primary" onClick={setAuto}>
-                {geti18nString('welcome_1a4_type_manual_switch')}
-            </Button>
+            {autoAvailable && (
+                <Button color="primary" onClick={setAuto}>
+                    {geti18nString('welcome_1a4_type_manual_switch')}
+                </Button>
+            )}
         </>
     )
     return (
         <WelcomeContainer className={classes.paper}>
             <Typography variant="h5">{geti18nString('welcome_1a4_title')}</Typography>
             {actionType === 'auto' ? (
-                <Auto bioDisabled={!!bioDisabled} type={type} setType={setType} />
+                <Auto
+                    hasBio={hasBio}
+                    hasPost={hasPost}
+                    postDisabled={!!postDisabled}
+                    bioDisabled={!!bioDisabled}
+                    type={type}
+                    setType={setType}
+                />
             ) : (
                 <Manual provePost={provePost} />
             )}
-            {actionType === 'auto' && bioDisabled && (
-                <span className={classes.red}>{geti18nString('welcome_1a4_bio_disabled')}</span>
+            {actionType === 'auto' && ((bioDisabled && hasBio) || (postDisabled && hasPost)) && (
+                <span className={classes.red}>{geti18nString('welcome_1a4_disabled')}</span>
             )}
             {actionType === 'auto' ? auto : manual}
         </WelcomeContainer>

src/extension/background-script/WorkerService.ts

@@ -4,7 +4,7 @@ import { Identifier } from '../../database/type'
 import { GetContext, AsyncCall, OnlyRunInContext } from '@holoflows/kit/es'
 import Serialization from '../../utils/type-transform/Serialization'
 
-type ServiceType = Required<Pick<SocialNetworkWorker, 'autoVerifyBio' | 'autoVerifyPost'>>
+type ServiceType = Required<Pick<SocialNetworkWorker, 'autoVerifyBio' | 'autoVerifyPost' | 'manualVerifyPost'>>
 const cache = new Map<SocialNetworkWorker, ServiceType>()
 
 export function getCurrentNetworkWorkerService(network: string | Identifier) {
@@ -26,6 +26,7 @@ export function startWorkerService(e: SocialNetworkWorker) {
     const impl: ServiceType = {
         autoVerifyBio: e.autoVerifyBio || notImplemented,
         autoVerifyPost: e.autoVerifyPost || notImplemented,
+        manualVerifyPost: e.manualVerifyPost || notImplemented,
     }
     AsyncCall(impl, { serializer: Serialization, key: e.name })
 }

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

@@ -15,6 +15,7 @@ import { ValueRef } from '@holoflows/kit/es'
 import { useValueRef } from '../../../utils/hooks/useValueRef'
 import { Person } from '../../../database'
 import { getCurrentNetworkWorkerService } from '../../background-script/WorkerService'
+import getCurrentNetworkWorker from '../../../social-network/utils/getCurrentNetworkWorker'
 
 enum WelcomeState {
     // Step 0
@@ -111,8 +112,12 @@ function Welcome(props: Welcome) {
             sideEffects.backupMyKeyPair(props.whoAmI.identifier)
             return <Welcome1a3 next={() => onStepChange(WelcomeState.ProvePost)} />
         case WelcomeState.ProvePost:
+            const worker = getCurrentNetworkWorker(props.whoAmI.identifier)
             return (
                 <Welcome1a4v2
+                    hasManual={!!worker.manualVerifyPost}
+                    hasBio={!!worker.autoVerifyBio}
+                    hasPost={!!worker.autoVerifyPost}
                     bioDisabled={whoAmI.identifier.isUnknown}
                     provePost={provePost}
                     requestManualVerify={() => {

src/social-network/worker.ts

@@ -38,6 +38,12 @@ export interface SocialNetworkWorker extends SocialNetworkWorkerAndUI {
      * If this function is not provided, autoVerifyPost in Welcome will be unavailable
      */
     autoVerifyPost?(user: PersonIdentifier, provePost: string): void
+    /**
+     * This function should open a new page, then let user add it by themself
+     *
+     * If this function is not provided, manualVerifyPost in Welcome will be unavailable
+     */
+    manualVerifyPost?(user: PersonIdentifier, provePost: string): void
 }
 
 export const definedSocialNetworkWorkers = new Set<SocialNetworkWorker>()

src/stories/Welcome.tsx

@@ -71,6 +71,11 @@ storiesOf('Welcome', module)
     .add('New Step 1a-4', () => (
         <ResponsiveDialog open>
             <Welcome1a4v2
+                hasManual={boolean('hasManual', true)}
+                hasBio={boolean('hasBio', true)}
+                hasPost={boolean('hasPost', true)}
+                bioDisabled={boolean('bioDisabled', false)}
+                postDisabled={boolean('postDisabled', false)}
                 provePost={text('Prove', '🔒ApfdMwLoV/URKn7grgcNWdMR2iWMGdHpQBk5LVGFxhul🔒')}
                 requestAutoVerify={action('Auto')}
                 requestManualVerify={action('Manual')}