fix: bugfix for popup settings (#10814)

* fix: bugfix for popup settings * fix: bugfix for phone verify
DimensionDev · Sep 21, 2023 · c83fd31 · c83fd31
1 parent 2d56f04
commit c83fd31
Show file tree

Hide file tree

Showing 24 changed files with 171 additions and 140 deletions.
diff --git a/packages/mask/background/tasks/NotCancellable/OnInstall.ts b/packages/mask/background/tasks/NotCancellable/OnInstall.ts
@@ -27,6 +27,7 @@ browser.runtime.onInstalled.addListener(async (detail) => {
                     phone: localStorage.getItem('phone'),
                     cloudBackupAt: backupMethod && backupMethod === 'cloud' ? localStorage.getItem('backupAt') : null,
                     localBackupAt: backupMethod && backupMethod === 'local' ? localStorage.getItem('backupAt') : null,
+                    cloudBackupMethod: null,
                 })
             }
         }

diff --git a/packages/mask/dashboard/components/BackupPreview/index.tsx b/packages/mask/dashboard/components/BackupPreview/index.tsx
@@ -39,7 +39,7 @@ const useStyles = makeStyles()((theme) => ({
         fontWeight: 700,
     },
     cardContent: {
-        padding: theme.spacing(1, 2),
+        padding: theme.spacing(1, 0),
         '&:last-child': {
             paddingBottom: theme.spacing(1),
         },
@@ -225,7 +225,7 @@ export const WalletsBackupPreview = memo<WalletsBackupPreviewProps>(function Wal
                 }
             />
             <CardContent className={classes.cardContent}>
-                <List className={cx(classes.wallets, classes.list)}>
+                <List className={cx(classes.wallets, classes.list)} sx={{ px: 0 }}>
                     {wallets.map((wallet) => (
                         <ListItem key={wallet} className={classes.wallet}>
                             <ListItemIcon className={classes.walletIcon}>

diff --git a/packages/mask/dashboard/components/PasswordField/index.tsx b/packages/mask/dashboard/components/PasswordField/index.tsx
@@ -13,8 +13,10 @@ const PasswordField = forwardRef(({ show = true, ...props }: PasswordFieldProps,
             {...props}
             ref={ref}
             type={showPassword ? 'text' : 'password'}
+            size="small"
             InputProps={{
                 ...props.InputProps,
+                size: 'small',
                 disableUnderline: true,
                 endAdornment: show ? (
                     <InputAdornment position="end">

diff --git a/packages/mask/dashboard/contexts/CloudBackupFormContext.tsx b/packages/mask/dashboard/contexts/CloudBackupFormContext.tsx
@@ -4,7 +4,7 @@ import { useForm } from 'react-hook-form'
 import { zodResolver } from '@hookform/resolvers/zod'
 import { z } from 'zod'
 import { useTabs } from '@masknet/theme'
-import { phoneRegexp } from '../utils/regexp.js'
+import { emailRegexp, phoneRegexp } from '../utils/regexp.js'
 import guessCallingCode from 'guess-calling-code'
 
 export interface CloudBackupFormInputs {
@@ -36,7 +36,10 @@ function useCloudBackupFormContext() {
                 .object({
                     email:
                         currentTab === tabs.email
-                            ? z.string().email(t.cloud_backup_incorrect_email_address())
+                            ? z
+                                  .string()
+                                  .email(t.cloud_backup_incorrect_email_address())
+                                  .refine((email) => emailRegexp.test(email), t.cloud_backup_incorrect_email_address())
                             : z.string().optional(),
                     countryCode: currentTab === tabs.mobile ? z.string() : z.string().optional(),
                     phone:

diff --git a/packages/mask/dashboard/initialization/Dashboard.tsx b/packages/mask/dashboard/initialization/Dashboard.tsx
@@ -1,5 +1,5 @@
 import { useEffect } from 'react'
-import { CssBaseline, ThemeProvider, StyledEngineProvider } from '@mui/material'
+import { CssBaseline, ThemeProvider, StyledEngineProvider, GlobalStyles } from '@mui/material'
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
 import {
     CustomSnackbarProvider,
@@ -22,6 +22,18 @@ import { Pages } from '../pages/routes.js'
 import { UserContext, useAppearance } from '../../shared-ui/index.js'
 import Services from '#services'
 
+const GlobalCss = (
+    <GlobalStyles
+        styles={{
+            '[data-hide-scrollbar]': {
+                '&::-webkit-scrollbar': {
+                    display: 'none',
+                },
+            },
+        }}
+    />
+)
+
 const PluginRender = createInjectHooksRenderer(useActivatedPluginsDashboard, (x) => x.GlobalInjection)
 
 export default function DashboardRoot(props: React.PropsWithChildren<{}>) {
@@ -55,6 +67,7 @@ export default function DashboardRoot(props: React.PropsWithChildren<{}>) {
                                             <CssBaseline />
                                             <CustomSnackbarProvider>
                                                 <SharedContextProvider>
+                                                    {GlobalCss}
                                                     <Pages />
                                                     <PluginRender />
                                                     {props.children}

diff --git a/packages/mask/dashboard/modals/BackupPreviewModal/BackupPreviewDialog.tsx b/packages/mask/dashboard/modals/BackupPreviewModal/BackupPreviewDialog.tsx
@@ -77,7 +77,7 @@ export const BackupPreviewDialog = memo<BackupPreviewDialogProps>(function Backu
     const { classes, theme } = useStyles()
     const navigate = useNavigate()
     const t = useDashboardI18N()
-    const { updateUser, user } = UserContext.useContainer()
+    const { updateUser } = UserContext.useContainer()
     const {
         hasPassword,
         previewInfo,
@@ -124,7 +124,7 @@ export const BackupPreviewDialog = memo<BackupPreviewDialogProps>(function Backu
                 if (response.ok) {
                     const now = formatDateTime(new Date(), 'yyyy-MM-dd HH:mm')
                     showSnackbar(t.settings_alert_backup_success(), { variant: 'success' })
-                    updateUser({ cloudBackupAt: now })
+                    updateUser({ cloudBackupAt: now, cloudBackupMethod: type })
                 }
                 return true
             } catch (error) {
@@ -285,7 +285,7 @@ export const BackupPreviewDialog = memo<BackupPreviewDialogProps>(function Backu
 
     return (
         <InjectedDialog title={t.cloud_backup_upload_backup()} open={open} onClose={handleClose}>
-            <DialogContent>{content}</DialogContent>
+            <DialogContent data-hide-scrollbar>{content}</DialogContent>
             <DialogActions>{action}</DialogActions>
         </InjectedDialog>
     )

diff --git a/packages/mask/dashboard/pages/SetupPersona/CloudBackup/EmailForm.tsx b/packages/mask/dashboard/pages/SetupPersona/CloudBackup/EmailForm.tsx
@@ -26,6 +26,7 @@ export const EmailForm = memo(function EmailForm() {
             clearErrors,
             control,
             watch,
+            trigger,
             formState: { errors },
         },
     } = CloudBackupFormContext.useContainer()
@@ -56,6 +57,7 @@ export const EmailForm = memo(function EmailForm() {
                     <TextField
                         {...field}
                         onFocus={() => clearErrors('email')}
+                        onBlur={() => trigger('email')}
                         fullWidth
                         placeholder={t.email()}
                         type="email"
@@ -84,7 +86,7 @@ export const EmailForm = memo(function EmailForm() {
                                     className={classes.send}
                                     disableFocusRipple
                                     disableRipple
-                                    disabled={!email && !!errors.email?.message}
+                                    disabled={!email || !!errors.email?.message}
                                     variant="text"
                                     sx={{ width: 120 }}
                                     onClick={handleSendVerificationCode}

diff --git a/packages/mask/dashboard/pages/SetupPersona/CloudBackup/PhoneForm.tsx b/packages/mask/dashboard/pages/SetupPersona/CloudBackup/PhoneForm.tsx
@@ -89,7 +89,7 @@ export const PhoneForm = memo(function PhoneForm() {
                                     className={classes.send}
                                     disableFocusRipple
                                     disableRipple
-                                    disabled={!phone && !!errors.phone?.message}
+                                    disabled={!phone || !!errors.phone?.message}
                                     variant="text"
                                     sx={{ width: 120 }}
                                     onClick={handleSendVerificationCode}

diff --git a/packages/mask/dashboard/pages/SetupPersona/CloudBackup/index.tsx b/packages/mask/dashboard/pages/SetupPersona/CloudBackup/index.tsx
@@ -70,7 +70,7 @@ const CloudBackupInner = memo(function CloudBackupInner() {
         async (data: CloudBackupFormInputs) => {
             const response = await fetchDownloadLink({
                 account: currentTab === tabs.email ? data.email : data.countryCode + data.phone,
-                type: AccountType.Email,
+                type: currentTab === tabs.email ? AccountType.Email : AccountType.Phone,
                 code: data.code,
             }).catch((error) => {
                 if (error.status === 400) {
@@ -80,7 +80,17 @@ const CloudBackupInner = memo(function CloudBackupInner() {
                     })
                 } else if (error.status === 404) {
                     // No cloud backup file
-                    navigate(DashboardRoutes.CloudBackupPreview)
+                    navigate(
+                        urlcat(DashboardRoutes.CloudBackupPreview, {
+                            type: currentTab === tabs.email ? AccountType.Email : AccountType.Phone,
+                            account: currentTab === tabs.email ? data.email : data.countryCode + data.phone,
+                        }),
+                        {
+                            state: {
+                                code: data.code,
+                            },
+                        },
+                    )
                 }
             })
 
@@ -107,14 +117,14 @@ const CloudBackupInner = memo(function CloudBackupInner() {
     )
 
     const description = useMemo(() => {
-        if (currentTab === tabs.email && user.email)
+        if (user.cloudBackupMethod === AccountType.Email && user.email)
             return (
                 <DashboardTrans.cloud_backup_email_exists
                     components={{ strong: <strong /> }}
                     values={{ account: user.email }}
                 />
             )
-        else if (currentTab === tabs.mobile && user.phone)
+        if (user.cloudBackupMethod === AccountType.Phone && user.phone)
             return (
                 <DashboardTrans.cloud_backup_mobile_exists
                     components={{ strong: <strong /> }}
@@ -123,7 +133,7 @@ const CloudBackupInner = memo(function CloudBackupInner() {
             )
 
         return t.cloud_backup_no_exist_tips()
-    }, [t, currentTab, tabs, user])
+    }, [user, DashboardTrans])
     return (
         <>
             <Box>

diff --git a/packages/mask/dashboard/pages/SetupPersona/LocalBackup/index.tsx b/packages/mask/dashboard/pages/SetupPersona/LocalBackup/index.tsx
@@ -28,6 +28,7 @@ const useStyles = makeStyles()((theme) => ({
         color: theme.palette.maskColor.second,
         fontSize: 14,
         marginTop: theme.spacing(1.5),
+        marginBottom: theme.spacing(3),
     },
 }))
 

diff --git a/packages/mask/dashboard/type.ts b/packages/mask/dashboard/type.ts
@@ -1,3 +1,4 @@
+export { BackupAccountType as AccountType } from '@masknet/shared-base'
 export interface BackupFileInfo {
     downloadURL: string
     size: number
@@ -6,11 +7,6 @@ export interface BackupFileInfo {
     abstract: string
 }
 
-export enum AccountType {
-    Email = 'email',
-    Phone = 'phone',
-}
-
 export enum Scenario {
     backup = 'backup',
     create = 'create_binding',

diff --git a/packages/mask/shared-ui/locales/en-US.json b/packages/mask/shared-ui/locales/en-US.json
@@ -958,7 +958,7 @@
     "popups_backup_password_rules_tips": "Backup password must be 8-20 characters, including uppercase, lowercase, special characters and numbers.",
     "popups_backup_password_tips": "Please set up backup password to export private key.",
     "popups_backup_password_inconsistency": "The two entered passwords are inconsistent.",
-    "popups_backup_password_incorrect": "Incorrect password.",
+    "popups_backup_password_incorrect": "Incorrect backup password.",
     "popups_backup_password_invalid": "Please enter backup password to export persona private key.",
     "popups_backup_password_set_successfully": "Backup password set successfully",
     "popups_export_private_key_tips": "This export is only for exporting private key. We do not export any other data. If you need more data, please go to Settings: <a> Global Backup </a>",

diff --git a/packages/mask/src/extension/popups/components/PasswordField/index.tsx b/packages/mask/src/extension/popups/components/PasswordField/index.tsx
@@ -4,10 +4,7 @@ import { StyledInput } from '../StyledInput/index.js'
 import { Icons } from '@masknet/icons'
 
 export const PasswordField = memo(
-    forwardRef<{}, TextFieldProps & { show?: boolean; onClear?: () => void }>(function PasswordField(
-        { show = true, onClear, ...rest },
-        ref,
-    ) {
+    forwardRef<{}, TextFieldProps & { show?: boolean }>(function PasswordField({ show = true, ...rest }, ref) {
         const theme = useTheme()
         const [showPassword, setShowPassword] = useState(false)
         return (
@@ -17,27 +14,20 @@ export const PasswordField = memo(
                 ref={ref}
                 InputProps={{
                     ...rest.InputProps,
-                    endAdornment:
-                        rest.error && onClear ? (
-                            <InputAdornment position="end" sx={{ paddingRight: 1.5 }}>
-                                <IconButton onClick={onClear} edge="end" size="small" sx={{ color: 'inherit' }}>
-                                    <Icons.Close size={24} />
+                    endAdornment: (
+                        <InputAdornment position="end">
+                            {show ? (
+                                <IconButton
+                                    aria-label="toggle password visibility"
+                                    onClick={() => setShowPassword(!showPassword)}
+                                    onMouseDown={(event) => event.preventDefault()}
+                                    edge="end"
+                                    size="small">
+                                    {showPassword ? <Icons.EyeOff /> : <Icons.Eye />}
                                 </IconButton>
-                            </InputAdornment>
-                        ) : (
-                            <InputAdornment position="end">
-                                {show ? (
-                                    <IconButton
-                                        aria-label="toggle password visibility"
-                                        onClick={() => setShowPassword(!showPassword)}
-                                        onMouseDown={(event) => event.preventDefault()}
-                                        edge="end"
-                                        size="small">
-                                        {showPassword ? <Icons.EyeOff /> : <Icons.Eye />}
-                                    </IconButton>
-                                ) : undefined}
-                            </InputAdornment>
-                        ),
+                            ) : undefined}
+                        </InputAdornment>
+                    ),
                 }}
             />
         )

diff --git a/packages/mask/src/extension/popups/modals/ChangeBackupPasswordModal/index.tsx b/packages/mask/src/extension/popups/modals/ChangeBackupPasswordModal/index.tsx
@@ -45,8 +45,6 @@ export const ChangeBackupPasswordModal = memo<ActionModalBaseProps>(function Cha
                 .object({
                     oldPassword: z
                         .string(t('popups_settings_backup_password_invalid'))
-                        .min(8, t('popups_settings_backup_password_invalid'))
-                        .max(20, t('popups_settings_backup_password_invalid'))
                         .refine(
                             (oldPassword) => oldPassword === user.backupPassword,
                             t('popups_backup_password_incorrect'),
@@ -57,25 +55,18 @@ export const ChangeBackupPasswordModal = memo<ActionModalBaseProps>(function Cha
                         ),
                     newPassword: z
                         .string(t('popups_settings_backup_password_invalid'))
-                        .min(8, t('popups_settings_backup_password_invalid'))
-                        .max(20, t('popups_settings_backup_password_invalid'))
                         .refine(
                             (newPassword) => MATCH_PASSWORD_RE.test(newPassword),
                             t('popups_settings_backup_password_invalid'),
                         ),
                     repeatPassword: z
                         .string(t('popups_settings_backup_password_invalid'))
-                        .min(8, t('popups_settings_backup_password_invalid'))
-                        .max(20, t('popups_settings_backup_password_invalid'))
                         .refine(
                             (repeatPassword) => MATCH_PASSWORD_RE.test(repeatPassword),
                             t('popups_settings_backup_password_invalid'),
                         ),
                 })
-                .refine((data) => data.oldPassword === user.backupPassword, {
-                    message: t('popups_backup_password_incorrect'),
-                    path: ['oldPassword'],
-                })
+
                 .refine((data) => data.newPassword !== data.oldPassword, {
                     message: t('popups_settings_new_backup_password_error_tips'),
                     path: ['newPassword'],
@@ -129,7 +120,6 @@ export const ChangeBackupPasswordModal = memo<ActionModalBaseProps>(function Cha
                                 {...field}
                                 placeholder={t('password')}
                                 autoFocus
-                                onClear={() => resetField('oldPassword', { defaultValue: '' })}
                                 error={!!errors.oldPassword?.message}
                                 helperText={errors.oldPassword?.message}
                             />
@@ -144,7 +134,6 @@ export const ChangeBackupPasswordModal = memo<ActionModalBaseProps>(function Cha
                         <PasswordField
                             {...field}
                             placeholder={t('popups_settings_new_backup_password')}
-                            onClear={() => resetField('newPassword', { defaultValue: '' })}
                             error={!!errors.newPassword?.message}
                             helperText={errors.newPassword?.message}
                         />
@@ -157,7 +146,6 @@ export const ChangeBackupPasswordModal = memo<ActionModalBaseProps>(function Cha
                         <PasswordField
                             {...field}
                             placeholder={t('reenter')}
-                            onClear={() => resetField('repeatPassword', { defaultValue: '' })}
                             error={!!errors.repeatPassword?.message}
                             helperText={errors.repeatPassword?.message}
                         />