fix: backup preview (#10875)

* fix: bugfix for backup preview * fix: backup preview code
DimensionDev · Sep 27, 2023 · 601dff4 · 601dff4
1 parent acd733e
commit 601dff4
Show file tree

Hide file tree

Showing 6 changed files with 59 additions and 97 deletions.
diff --git a/packages/mask/background/services/backup/internal_create.ts b/packages/mask/background/services/backup/internal_create.ts
@@ -146,7 +146,7 @@ export async function createNewBackup(options: InternalBackupOptions): Promise<N
             if (!backupCreator) return
 
             async function backupPlugin() {
-                const result = await timeout(backupCreator!(), 3000, 'Timeout to backup creator.')
+                const result = await timeout(backupCreator!(), 60 * 1000, 'Timeout to backup creator.')
                 if (result.isNone()) return
                 // We limit the plugin contributed backups must be simple objects.
                 // We may allow plugin to store binary if we're moving to binary backup format like MessagePack.

diff --git a/packages/mask/dashboard/hooks/useBackupFormState.ts b/packages/mask/dashboard/hooks/useBackupFormState.ts
@@ -18,14 +18,13 @@ export function useBackupFormState() {
     const { value: hasPassword } = useAsync(Services.Wallet.hasPassword, [])
     const { value: previewInfo, loading } = useAsync(Services.Backup.generateBackupPreviewInfo, [])
     const { user } = UserContext.useContainer()
-    const [backupPersonas, setBackupPersonas] = useState(true)
     const [backupWallets, setBackupWallets] = useState(false)
 
     const formState = useForm<BackupFormInputs>({
         mode: 'onBlur',
         context: {
             user,
-            backupPersonas,
+
             backupWallets,
             hasPassword,
         },
@@ -35,14 +34,12 @@ export function useBackupFormState() {
         },
         resolver: zodResolver(
             z.object({
-                backupPassword: backupPersonas
-                    ? z
-                          .string()
-                          .min(8, t.incorrect_password())
-                          .max(20, t.incorrect_password())
-                          .refine((password) => password === user.backupPassword, t.incorrect_password())
-                          .refine((password) => passwordRegexp.test(password), t.incorrect_password())
-                    : z.string().optional(),
+                backupPassword: z
+                    .string()
+                    .min(8, t.incorrect_password())
+                    .max(20, t.incorrect_password())
+                    .refine((password) => password === user.backupPassword, t.incorrect_password())
+                    .refine((password) => passwordRegexp.test(password), t.incorrect_password()),
                 paymentPassword:
                     backupWallets && hasPassword
                         ? z
@@ -60,9 +57,7 @@ export function useBackupFormState() {
         hasPassword,
         previewInfo,
         loading,
-        backupPersonas,
         backupWallets,
-        setBackupPersonas,
         setBackupWallets,
         formState,
     }

diff --git a/packages/mask/dashboard/modals/BackupPreviewModal/BackupPreviewDialog.tsx b/packages/mask/dashboard/modals/BackupPreviewModal/BackupPreviewDialog.tsx
@@ -18,6 +18,7 @@ import { useNavigate, useSearchParams } from 'react-router-dom'
 import { DashboardRoutes } from '@masknet/shared-base'
 import formatDateTime from 'date-fns/format'
 import { UserContext } from '../../../shared-ui/index.js'
+import millisecondsToSeconds from 'date-fns/millisecondsToSeconds'
 
 const useStyles = makeStyles()((theme) => ({
     container: {
@@ -83,9 +84,7 @@ export const BackupPreviewDialog = memo<BackupPreviewDialogProps>(function Backu
         hasPassword,
         previewInfo,
         loading,
-        backupPersonas,
         backupWallets,
-        setBackupPersonas,
         setBackupWallets,
         formState: {
             clearErrors,
@@ -110,7 +109,7 @@ export const BackupPreviewDialog = memo<BackupPreviewDialogProps>(function Backu
                 }
 
                 const { file } = await Services.Backup.createBackupFile({
-                    excludeBase: !backupPersonas,
+                    excludeBase: false,
                     excludeWallet: !backupWallets,
                 })
 
@@ -134,7 +133,7 @@ export const BackupPreviewDialog = memo<BackupPreviewDialogProps>(function Backu
                     setParams((params) => {
                         params.set('size', encrypted.byteLength.toString())
                         params.set('abstract', name)
-                        params.set('uploadedAt', Date.now().toString())
+                        params.set('uploadedAt', millisecondsToSeconds(Date.now()).toString())
                         return params.toString()
                     })
                 }
@@ -146,7 +145,7 @@ export const BackupPreviewDialog = memo<BackupPreviewDialogProps>(function Backu
                 return false
             }
         },
-        [code, hasPassword, backupWallets, abstract, backupPersonas, code, account, type, t, navigate, updateUser],
+        [code, hasPassword, backupWallets, abstract, code, account, type, t, navigate, updateUser, params],
     )
 
     const handleClose = useCallback(() => {
@@ -161,7 +160,7 @@ export const BackupPreviewDialog = memo<BackupPreviewDialogProps>(function Backu
             keepDirtyValues: true,
             keepTouched: true,
         })
-    }, [backupPersonas, backupWallets, reset])
+    }, [backupWallets, reset])
 
     const content = useMemo(() => {
         if (value)
@@ -192,29 +191,22 @@ export const BackupPreviewDialog = memo<BackupPreviewDialogProps>(function Backu
             )
         return !loading && previewInfo ? (
             <Box display="flex" flexDirection="column">
-                <PersonasBackupPreview
-                    info={previewInfo}
-                    selectable
-                    selected={backupPersonas}
-                    onChange={setBackupPersonas}
-                />
+                <PersonasBackupPreview info={previewInfo} />
 
-                {backupPersonas ? (
-                    <Controller
-                        control={control}
-                        render={({ field }) => (
-                            <PasswordField
-                                {...field}
-                                onFocus={() => clearErrors('backupPassword')}
-                                sx={{ mb: 2 }}
-                                placeholder={t.settings_label_backup_password()}
-                                error={!!errors.backupPassword?.message}
-                                helperText={errors.backupPassword?.message}
-                            />
-                        )}
-                        name="backupPassword"
-                    />
-                ) : null}
+                <Controller
+                    control={control}
+                    render={({ field }) => (
+                        <PasswordField
+                            {...field}
+                            onFocus={() => clearErrors('backupPassword')}
+                            sx={{ mb: 2 }}
+                            placeholder={t.settings_label_backup_password()}
+                            error={!!errors.backupPassword?.message}
+                            helperText={errors.backupPassword?.message}
+                        />
+                    )}
+                    name="backupPassword"
+                />
 
                 <WalletsBackupPreview
                     wallets={previewInfo.wallets}
@@ -252,8 +244,6 @@ export const BackupPreviewDialog = memo<BackupPreviewDialogProps>(function Backu
         loading,
         previewInfo,
         control,
-        backupPersonas,
-        setBackupPersonas,
         t,
         JSON.stringify(errors),
         backupWallets,
@@ -284,12 +274,11 @@ export const BackupPreviewDialog = memo<BackupPreviewDialogProps>(function Backu
                 onClick={handleSubmit(handleUploadBackup)}
                 startIcon={isOverwrite ? <Icons.CloudBackup2 size={18} /> : <Icons.Cloud />}
                 color={isOverwrite ? 'error' : 'primary'}
-                disabled={!isDirty || !isValid || (!backupPersonas && !backupWallets)}>
+                disabled={!isDirty || !isValid}>
                 {isOverwrite ? t.cloud_backup_overwrite_backup() : t.cloud_backup_upload_to_cloud()}
             </ActionButton>
         )
     }, [
-        backupPersonas,
         backupWallets,
         isOverwrite,
         isDirty,

diff --git a/packages/mask/dashboard/pages/SetupPersona/CloudBackup/index.tsx b/packages/mask/dashboard/pages/SetupPersona/CloudBackup/index.tsx
@@ -84,12 +84,8 @@ const CloudBackupInner = memo(function CloudBackupInner() {
                         urlcat(DashboardRoutes.CloudBackupPreview, {
                             type: currentTab === tabs.email ? AccountType.Email : AccountType.Phone,
                             account: currentTab === tabs.email ? data.email : data.countryCode + data.phone,
+                            code: data.code,
                         }),
-                        {
-                            state: {
-                                code: data.code,
-                            },
-                        },
                     )
                 }
             })
@@ -105,12 +101,8 @@ const CloudBackupInner = memo(function CloudBackupInner() {
                     ...response,
                     type: currentTab === tabs.email ? AccountType.Email : AccountType.Phone,
                     account: currentTab === tabs.email ? data.email : data.countryCode + data.phone,
+                    code: data.code,
                 }),
-                {
-                    state: {
-                        code: data.code,
-                    },
-                },
             )
         },
         [currentTab, tabs, formState, navigate, updateUser, user],

diff --git a/packages/mask/dashboard/pages/SetupPersona/CloudBackupPreview/index.tsx b/packages/mask/dashboard/pages/SetupPersona/CloudBackupPreview/index.tsx
@@ -1,8 +1,8 @@
 import { Box, Typography } from '@mui/material'
-import { memo, useCallback, useEffect, useMemo, useState } from 'react'
+import { memo, useCallback, useMemo } from 'react'
 import { useDashboardI18N } from '../../../locales/i18n_generated.js'
 import { ActionButton, TextOverflowTooltip, makeStyles } from '@masknet/theme'
-import { useLocation, useNavigate, useSearchParams } from 'react-router-dom'
+import { useNavigate, useSearchParams } from 'react-router-dom'
 import { DashboardRoutes } from '@masknet/shared-base'
 import { Icons } from '@masknet/icons'
 import { formatFileSize } from '@masknet/kit'
@@ -55,9 +55,7 @@ export const CloudBackupPreview = memo(function CloudBackupPreview() {
     const t = useDashboardI18N()
 
     const { classes, theme, cx } = useStyles()
-    const [code, setCode] = useState('')
     const [params] = useSearchParams()
-    const location = useLocation()
 
     const navigate = useNavigate()
 
@@ -69,6 +67,7 @@ export const CloudBackupPreview = memo(function CloudBackupPreview() {
             uploadedAt: params.get('uploadedAt'),
             size: params.get('size'),
             type: params.get('type'),
+            code: params.get('code'),
         }
     }, [params])
 
@@ -78,25 +77,26 @@ export const CloudBackupPreview = memo(function CloudBackupPreview() {
             !previewInfo.account ||
             !previewInfo.size ||
             !previewInfo.uploadedAt ||
-            !previewInfo.type
+            !previewInfo.type ||
+            !previewInfo.code
         )
             return
         await MergeBackupModal.openAndWaitForClose({
             downloadLink: previewInfo.downloadLink,
             account: previewInfo.account,
             size: previewInfo.size,
             uploadedAt: previewInfo.uploadedAt,
-            code,
+            code: previewInfo.code,
             abstract: previewInfo.abstract ? previewInfo.abstract : undefined,
             type: previewInfo.type as AccountType,
         })
-    }, [t, previewInfo, code])
+    }, [t, previewInfo])
 
     const handleBackupClick = useCallback(() => {
-        if (!previewInfo.type || !previewInfo.account) return
+        if (!previewInfo.type || !previewInfo.account || !previewInfo.code) return
         BackupPreviewModal.open({
             isOverwrite: false,
-            code,
+            code: previewInfo.code,
             abstract: previewInfo.abstract ? previewInfo.abstract : undefined,
             type: previewInfo.type as AccountType,
             account: previewInfo.account,
@@ -114,11 +114,11 @@ export const CloudBackupPreview = memo(function CloudBackupPreview() {
             },
             onConfirm: () => {
                 ConfirmDialog.close(false)
-                if (!previewInfo.type || !previewInfo.account) return
+                if (!previewInfo.type || !previewInfo.account || !previewInfo.code) return
 
                 BackupPreviewModal.open({
                     isOverwrite: true,
-                    code,
+                    code: previewInfo.code,
                     abstract: previewInfo.abstract ? previewInfo.abstract : undefined,
                     type: previewInfo.type as AccountType,
                     account: previewInfo.account,
@@ -127,11 +127,6 @@ export const CloudBackupPreview = memo(function CloudBackupPreview() {
         })
     }, [t, previewInfo])
 
-    // cache the code to state
-    useEffect(() => {
-        if (location.state?.code) setCode(location.state.code)
-    }, [location.state?.code])
-
     return (
         <>
             <Box>

diff --git a/packages/mask/dashboard/pages/SetupPersona/LocalBackup/index.tsx b/packages/mask/dashboard/pages/SetupPersona/LocalBackup/index.tsx
@@ -40,9 +40,7 @@ export const LocalBackup = memo(function LocalBackup() {
         hasPassword,
         previewInfo,
         loading,
-        backupPersonas,
         backupWallets,
-        setBackupPersonas,
         setBackupWallets,
         formState: {
             setError,
@@ -63,7 +61,7 @@ export const LocalBackup = memo(function LocalBackup() {
                 }
             }
             const { file } = await Services.Backup.createBackupFile({
-                excludeBase: !backupPersonas,
+                excludeBase: false,
                 excludeWallet: !backupWallets,
             })
 
@@ -82,7 +80,7 @@ export const LocalBackup = memo(function LocalBackup() {
 
             window.close()
         },
-        [backupPersonas, backupWallets, hasPassword, setError, updateUser, user],
+        [backupWallets, hasPassword, setError, updateUser, user],
     )
 
     return (
@@ -94,29 +92,22 @@ export const LocalBackup = memo(function LocalBackup() {
                 <Typography className={classes.description}>{t.data_backup_description()}</Typography>
                 {!loading && previewInfo ? (
                     <Box display="flex" flexDirection="column">
-                        <PersonasBackupPreview
-                            info={previewInfo}
-                            selectable
-                            selected={backupPersonas}
-                            onChange={setBackupPersonas}
-                        />
+                        <PersonasBackupPreview info={previewInfo} />
 
-                        {backupPersonas ? (
-                            <Controller
-                                control={control}
-                                render={({ field }) => (
-                                    <PasswordField
-                                        {...field}
-                                        onFocus={() => clearErrors()}
-                                        sx={{ mb: 2 }}
-                                        placeholder={t.settings_label_backup_password()}
-                                        error={!!errors.backupPassword?.message}
-                                        helperText={errors.backupPassword?.message}
-                                    />
-                                )}
-                                name="backupPassword"
-                            />
-                        ) : null}
+                        <Controller
+                            control={control}
+                            render={({ field }) => (
+                                <PasswordField
+                                    {...field}
+                                    onFocus={() => clearErrors()}
+                                    sx={{ mb: 2 }}
+                                    placeholder={t.settings_label_backup_password()}
+                                    error={!!errors.backupPassword?.message}
+                                    helperText={errors.backupPassword?.message}
+                                />
+                            )}
+                            name="backupPassword"
+                        />
 
                         <WalletsBackupPreview
                             wallets={previewInfo.wallets}