Skip to content

Commit

Permalink
fix: bugfix for popups settings ui (#10831)
Browse files Browse the repository at this point in the history
  • Loading branch information
@nuanyang233
nuanyang233 committed Sep 22, 2023
1 parent 49385e5 commit 6bb9520
Show file tree
Hide file tree
Showing 11 changed files with 52 additions and 18 deletions.
2 changes: 1 addition & 1 deletion packages/mask/dashboard/locales/en-US.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -443,7 +443,7 @@
"persona_create_tips": "Create your persona to get started",
"persona_setup_persona_example": "Example: Alice",
"data_recovery_title": "Recover your data",
"data_recovery_description": "12-word recovery phrase is used to recover your persona data.",
"data_recovery_description": "Please select the appropriate method to restore your personal data.",
"data_recovery_email": "Email",
"data_recovery_email_code": "Email verification code",
"data_recovery_mobile": "Mobile",
Expand Down
2 changes: 1 addition & 1 deletion packages/mask/dashboard/modals/BackupPreviewModal/BackupPreviewDialog.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -238,7 +238,7 @@ export const BackupPreviewDialog = memo<BackupPreviewDialogProps>(function Backu
backupPersonas,
setBackupPersonas,
t,
errors,
JSON.stringify(errors),
backupWallets,
setBackupWallets,
isOverwrite,
Expand Down
2 changes: 1 addition & 1 deletion packages/mask/dashboard/pages/SetupPersona/CloudBackupPreview/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -205,7 +205,7 @@ export const CloudBackupPreview = memo(function CloudBackupPreview() {
</Box>
{!previewInfo.downloadLink ? (
<SetupFrameController>
<ActionButton startIcon={<Icons.CloudBackup2 size={20} onClick={handleBackupClick} />}>
<ActionButton onClick={handleBackupClick} startIcon={<Icons.CloudBackup2 size={20} />}>
{t.backup()}
</ActionButton>
</SetupFrameController>
Expand Down
4 changes: 2 additions & 2 deletions packages/mask/dashboard/pages/SetupPersona/LocalBackup/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,8 +63,8 @@ export const LocalBackup = memo(function LocalBackup() {
}
}
const { file } = await Services.Backup.createBackupFile({
excludeBase: backupPersonas,
excludeWallet: backupWallets,
excludeBase: !backupPersonas,
excludeWallet: !backupWallets,
})

const encrypted = await encryptBackup(encode(data.backupPassword), encode(file))
Expand Down
49 changes: 39 additions & 10 deletions packages/mask/src/extension/popups/modals/ChangeBackupPasswordModal/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,6 @@ export const ChangeBackupPasswordModal = memo<ActionModalBaseProps>(function Cha

const {
control,
resetField,
handleSubmit,
formState: { errors, isValid, isSubmitting, isDirty },
} = useForm<FormInputs>({
Expand All @@ -44,7 +43,9 @@ export const ChangeBackupPasswordModal = memo<ActionModalBaseProps>(function Cha
z
.object({
oldPassword: z
.string(t('popups_settings_backup_password_invalid'))
.string()
.min(8)
.max(20)
.refine(
(oldPassword) => oldPassword === user.backupPassword,
t('popups_backup_password_incorrect'),
Expand All @@ -55,18 +56,21 @@ export const ChangeBackupPasswordModal = memo<ActionModalBaseProps>(function Cha
),
newPassword: z
.string(t('popups_settings_backup_password_invalid'))
.min(8)
.max(20)
.refine(
(newPassword) => MATCH_PASSWORD_RE.test(newPassword),
t('popups_settings_backup_password_invalid'),
),
repeatPassword: z
.string(t('popups_settings_backup_password_invalid'))
.string()
.min(8)
.max(20)
.refine(
(repeatPassword) => MATCH_PASSWORD_RE.test(repeatPassword),
t('popups_settings_backup_password_invalid'),
),
})

.refine((data) => data.newPassword !== data.oldPassword, {
message: t('popups_settings_new_backup_password_error_tips'),
path: ['newPassword'],
Expand All @@ -91,6 +95,7 @@ export const ChangeBackupPasswordModal = memo<ActionModalBaseProps>(function Cha
[handleSubmit, updateUser, showSnackbar],
)

console.log(errors.oldPassword?.type)
return (
<ActionModal
header={t('popups_settings_change_backup_password')}
Expand Down Expand Up @@ -120,8 +125,16 @@ export const ChangeBackupPasswordModal = memo<ActionModalBaseProps>(function Cha
{...field}
placeholder={t('password')}
autoFocus
error={!!errors.oldPassword?.message}
helperText={errors.oldPassword?.message}
error={
errors.oldPassword?.type !== 'too_small' && errors.oldPassword?.type !== 'too_big'
? !!errors.oldPassword?.message
: false
}
helperText={
errors.oldPassword?.type !== 'too_small' && errors.oldPassword?.type !== 'too_big'
? errors.oldPassword?.message
: ''
}
/>
)
}}
Expand All @@ -134,8 +147,16 @@ export const ChangeBackupPasswordModal = memo<ActionModalBaseProps>(function Cha
<PasswordField
{...field}
placeholder={t('popups_settings_new_backup_password')}
error={!!errors.newPassword?.message}
helperText={errors.newPassword?.message}
error={
errors.newPassword?.type !== 'too_small' && errors.newPassword?.type !== 'too_big'
? !!errors.newPassword?.message
: false
}
helperText={
errors.newPassword?.type !== 'too_small' && errors.newPassword?.type !== 'too_big'
? errors.newPassword?.message
: ''
}
/>
)}
/>
Expand All @@ -146,8 +167,16 @@ export const ChangeBackupPasswordModal = memo<ActionModalBaseProps>(function Cha
<PasswordField
{...field}
placeholder={t('reenter')}
error={!!errors.repeatPassword?.message}
helperText={errors.repeatPassword?.message}
error={
errors.repeatPassword?.type !== 'too_small' && errors.repeatPassword?.type !== 'too_big'
? !!errors.repeatPassword?.message
: false
}
helperText={
errors.repeatPassword?.type !== 'too_small' && errors.repeatPassword?.type !== 'too_big'
? errors.repeatPassword?.message
: ''
}
/>
)}
/>
Expand Down
1 change: 1 addition & 0 deletions packages/mask/src/extension/popups/modals/SelectAppearanceModal/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import { useAppearance } from '../../../../../shared-ui/index.js'
const useStyles = makeStyles()((theme) => ({
item: {
padding: theme.spacing(1.5),
borderRadius: 8,
},
icon: {
minWidth: 24,
Expand Down
1 change: 1 addition & 0 deletions packages/mask/src/extension/popups/modals/SelectLanguageModal/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ const LANGUAGE_OPTIONS_ICON_MAP = {
const useStyles = makeStyles()((theme) => ({
item: {
padding: theme.spacing(1.5),
borderRadius: 8,
},
icon: {
minWidth: 24,
Expand Down
4 changes: 2 additions & 2 deletions packages/mask/src/extension/popups/modals/SwitchPersonaModal/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import { useI18N } from '../../../../utils/i18n-next-ui.js'
import { ActionButton, makeStyles } from '@masknet/theme'
import { PersonaContext } from '@masknet/shared'
import { PersonaItem } from './PersonaItem.js'
import { DashboardRoutes, type PersonaInformation } from '@masknet/shared-base'
import { DashboardRoutes, PopupRoutes, type PersonaInformation } from '@masknet/shared-base'
import Services from '#services'
import { useNavigate } from 'react-router-dom'
import { Icons } from '@masknet/icons'
Expand Down Expand Up @@ -65,7 +65,7 @@ export const SwitchPersonaModal = memo<ActionModalBaseProps>(function SwitchPers
size="small"
variant="outlined"
startIcon={<Icons.History size={18} />}
onClick={() => handleOpenDashboard(DashboardRoutes.LocalBackup)}>
onClick={() => navigate(PopupRoutes.Settings)}>
{t('backup')}
</ActionButton>
<ActionButton
Expand Down
2 changes: 1 addition & 1 deletion packages/shared/src/UI/components/CountryCodePicker/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -73,7 +73,7 @@ export const CountryCodePicker = memo<CountryCodePickerProps>(({ open, anchorEl,
isCaseSensitive: false,
includeMatches: true,
threshold: 0.8,
minMatchCharLength: 2,
minMatchCharLength: 1,
findAllMatches: true,
keys: ['country_region', 'dialing_code'],
})
Expand Down
1 change: 1 addition & 0 deletions packages/theme/src/Components/SendingCodeField/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -62,6 +62,7 @@ export function SendingCodeField({
className={classes.countdown}
size="small"
variant="text"
sx={{ width: 120 }}
onClick={onSend}
disabled={resendDisabled || disabled}>
{sendButtonText}
Expand Down
2 changes: 2 additions & 0 deletions packages/theme/src/Theme/component-changes.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -812,6 +812,7 @@ export const InputBase = (mode: PaletteMode, colors: MaskColor) => ({
style: {
outline: `2px solid ${alpha(colors.maskColor.danger, 0.2)}`,
border: `1px solid ${alpha(colors.maskColor.danger, 0.5)}`,
paddingRight: 12,
[`&.${inputBaseClasses.focused}`]: {
outline: `2px solid ${alpha(colors.maskColor.danger, 0.2)}`,
border: `1px solid ${alpha(colors.maskColor.danger, 0.5)}`,
Expand All @@ -829,6 +830,7 @@ export const InputBase = (mode: PaletteMode, colors: MaskColor) => ({
style: {
outline: `2px solid ${alpha(colors.maskColor.danger, 0.2)}`,
border: `1px solid ${alpha(colors.maskColor.danger, 0.5)}`,
background: '#fffff',
[`&.${inputBaseClasses.focused}`]: {
outline: `2px solid ${alpha(colors.maskColor.danger, 0.2)}`,
border: `1px solid ${alpha(colors.maskColor.danger, 0.5)}`,
Expand Down

0 comments on commit 6bb9520

Please sign in to comment.