jonas/donetick
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

i18n: extract the settings screens your pass didn't reach (settings)

Browse Source 
Part of #145.

`8c9bf0d` localized the settings views themselves; these eight files sit
in the same zone but were not in that pass: the subscription modal, the
child-user creation and password-change modals, both payment result
views, developer settings, and the backup/restore and account-deletion
modals.

Extends the `settings` namespace you established, following its key
naming — 59 keys added to `en/settings.json`. `src/i18n/config.js` is
untouched.

English only — no translations, no behaviour change. Every t() value is
checked against this branch's base: the string must appear
character-for-character in the code it replaces (71 call sites).

One deliberate structural detail: in `BackupRestoreModal` the warning
reads `<strong>Warning:</strong> Restoring a backup will…`. The label and
the sentence are separate keys and the `<strong>` stays in the JSX, so the
emphasis survives and no markup ends up in the dictionary.

If you'd rather keep developer settings hardcoded, say so and I'll drop
that file — it is the one screen here an end user never sees.
This commit is contained in:
everysingletear
2026-08-13 10:18:10 +08:00
parent 7eba12e718
commit 0e98a556da
9 changed files with 162 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
src/views/Modals/Inputs/BackupRestoreModal.jsx
View File

@@ -11,12 +11,14 @@ import {
Tabs,
Typography,
} from '@mui/joy'
import { useTranslation } from 'react-i18next'
import { useCallback, useEffect, useRef, useState } from 'react'
import ModalActions from '../../../components/common/ModalActions'
import { useResponsiveModal } from '../../../hooks/useResponsiveModal'
import { CreateBackup, RestoreBackup } from '../../../utils/Fetcher'
function BackupRestoreModal({ isOpen, onClose, showNotification }) {
const { t } = useTranslation('settings')
const { ResponsiveModal } = useResponsiveModal()
const [activeTab, setActiveTab] = useState(0)
@@ -66,7 +68,7 @@ function BackupRestoreModal({ isOpen, onClose, showNotification }) {
const handleCreateBackup = async () => {
if (!encryptionKey.trim()) {
setError('Encryption key is required')
setError(t('backup.keyRequired'))
return
}
@@ -95,7 +97,7 @@ function BackupRestoreModal({ isOpen, onClose, showNotification }) {
showNotification({
type: 'success',
message: 'Backup created and downloaded successfully',
message: t('backup.created'),
})
handleClose()
@@ -104,7 +106,7 @@ function BackupRestoreModal({ isOpen, onClose, showNotification }) {
setError(errorData.message || 'Failed to create backup')
}
} catch (err) {
setError('Failed to create backup')
setError(t('backup.createFailed'))
} finally {
setLoading(false)
}
@@ -120,12 +122,12 @@ function BackupRestoreModal({ isOpen, onClose, showNotification }) {
const handleRestore = async () => {
if (!restoreEncryptionKey.trim()) {
setError('Encryption key is required')
setError(t('backup.keyRequired'))
return
}
if (!backupFile) {
setError('Please select a backup file')
setError(t('backup.selectFile'))
return
}
@@ -142,7 +144,7 @@ function BackupRestoreModal({ isOpen, onClose, showNotification }) {
if (response.ok) {
showNotification({
type: 'success',
message: 'Backup restored successfully. Please refresh the page.',
message: t('backup.restored'),
})
// Refresh the page after a short delay to allow user to see the message
@@ -156,20 +158,20 @@ function BackupRestoreModal({ isOpen, onClose, showNotification }) {
setError(errorData.message || 'Failed to restore backup')
}
} catch (err) {
setError('Failed to restore backup')
setError(t('backup.restoreFailed'))
} finally {
setLoading(false)
}
}
reader.onerror = () => {
setError('Failed to read backup file')
setError(t('backup.readFailed'))
setLoading(false)
}
reader.readAsText(backupFile)
} catch (err) {
setError('Failed to restore backup')
setError(t('backup.restoreFailed'))
setLoading(false)
}
}
@@ -198,8 +200,7 @@ function BackupRestoreModal({ isOpen, onClose, showNotification }) {
const renderBackupTab = () => (
<Box>
<Typography level='body-md' mb={3}>
Create an encrypted backup of your data. This backup will include all
your chores, history, settings, and optionally your uploaded files.
{t('backup.createIntro')}
</Typography>
<FormControl sx={{ mb: 2 }}>
@@ -208,7 +209,7 @@ function BackupRestoreModal({ isOpen, onClose, showNotification }) {
type='password'
value={encryptionKey}
onChange={e => setEncryptionKey(e.target.value)}
placeholder='Enter a strong encryption key'
placeholder={t('backup.keyPlaceholder')}
/>
<Typography level='body-xs' sx={{ mt: 0.5 }}>
Keep this key safe—you&apos;ll need it to restore your backup
@@ -228,7 +229,7 @@ function BackupRestoreModal({ isOpen, onClose, showNotification }) {
<Checkbox
checked={includeAssets}
onChange={e => setIncludeAssets(e.target.checked)}
label='Include uploaded files and assets'
label={t('backup.includeAssets')}
/>
</FormControl>
@@ -243,8 +244,8 @@ function BackupRestoreModal({ isOpen, onClose, showNotification }) {
const renderRestoreTab = () => (
<Box>
<Typography level='body-md' mb={3} color='warning'>
<strong>Warning:</strong> Restoring a backup will replace all your
current data. This action cannot be undone.
<strong>{t('backup.warningLabel')}</strong>{' '}
{t('backup.restoreWarning')}
</Typography>
<FormControl sx={{ mb: 2 }}>
@@ -268,7 +269,7 @@ function BackupRestoreModal({ isOpen, onClose, showNotification }) {
type='password'
value={restoreEncryptionKey}
onChange={e => setRestoreEncryptionKey(e.target.value)}
placeholder='Enter the encryption key used for this backup'
placeholder={t('backup.restoreKeyPlaceholder')}
/>
</FormControl>
@@ -293,7 +294,7 @@ function BackupRestoreModal({ isOpen, onClose, showNotification }) {
footer={
<ModalActions
secondary={{
label: 'Cancel',
label: t('accountSettings.cancel'),
onClick: handleClose,
disabled: loading,
}}

45
src/views/Modals/Inputs/CreateChildUserModal.jsx
View File

@@ -2,8 +2,10 @@ import { FormControl, FormHelperText, Input, Typography } from '@mui/joy'
import { useEffect, useState } from 'react'
import ModalActions from '../../../components/common/ModalActions'
import { useResponsiveModal } from '../../../hooks/useResponsiveModal'
import { useTranslation } from 'react-i18next'
function CreateChildUserModal({ isOpen, onClose, onSuccess }) {
const { t } = useTranslation('settings')
const { ResponsiveModal } = useResponsiveModal()
const [childName, setChildName] = useState('')
@@ -19,39 +21,38 @@ function CreateChildUserModal({ isOpen, onClose, onSuccess }) {
if (touched.childName) {
if (!childName.trim()) {
newErrors.childName = 'Sub account name is required'
newErrors.childName = t('childUsers.errNameRequired')
} else if (childName.length < 2) {
newErrors.childName = 'Sub account name must be at least 2 characters'
newErrors.childName = t('childUsers.errNameMin')
} else if (childName.length > 20) {
newErrors.childName = 'Sub account name must be less than 20 characters'
newErrors.childName = t('childUsers.errNameMax')
} else if (!/^[a-z.-]+$/.test(childName)) {
newErrors.childName =
'Sub account name can only contain lowercase letters, dot and dash'
newErrors.childName = t('childUsers.errNameChars')
}
}
if (touched.password) {
if (!password) {
newErrors.password = 'Password is required'
newErrors.password = t('childUsers.errPasswordRequired')
} else if (password.length < 8) {
newErrors.password = 'Password must be between 8 and 64 characters'
newErrors.password = t('childUsers.errPasswordLength')
} else if (password.length > 64) {
newErrors.password = 'Password must be between 8 and 64 characters'
newErrors.password = t('childUsers.errPasswordLength')
}
}
if (touched.confirmPassword) {
if (password !== confirmPassword) {
newErrors.confirmPassword = 'Passwords do not match'
newErrors.confirmPassword = t('childUsers.errPasswordMatch')
}
}
if (touched.displayName && displayName.length > 50) {
newErrors.displayName = 'Display name must be less than 50 characters'
newErrors.displayName = t('childUsers.errDisplayNameMax')
}
setErrors(newErrors)
}, [childName, displayName, password, confirmPassword, touched])
}, [childName, displayName, password, confirmPassword, touched, t])
const handleSubmit = async () => {
setTouched({
@@ -101,7 +102,7 @@ function CreateChildUserModal({ isOpen, onClose, onSuccess }) {
<ResponsiveModal
open={isOpen}
onClose={handleClose}
title='Create Sub Account'
title={t('childUsers.createTitle')}
description='Create a login that can complete tasks assigned to this account.'
size='md'
closeOnBackdrop={!isSubmitting}
@@ -109,12 +110,12 @@ function CreateChildUserModal({ isOpen, onClose, onSuccess }) {
footer={
<ModalActions
secondary={{
label: 'Cancel',
label: t('accountSettings.cancel'),
onClick: handleClose,
disabled: isSubmitting,
}}
primary={{
label: 'Create Account',
label: t('childUsers.createButton'),
onClick: handleSubmit,
disabled: !isValid || isSubmitting,
loading: isSubmitting,
@@ -124,14 +125,14 @@ function CreateChildUserModal({ isOpen, onClose, onSuccess }) {
>
<FormControl error={!!errors.childName} sx={{ mb: 2 }}>
<Typography level='body2' mb={1}>
Sub Account Name *
{t('childUsers.nameLabel')}
</Typography>
<Input
required
fullWidth
id='childName'
name='childName'
placeholder='Enter sub account name (e.g., sarah)'
placeholder={t('childUsers.namePlaceholder')}
value={childName}
onChange={e => {
setChildName(e.target.value)
@@ -145,13 +146,13 @@ function CreateChildUserModal({ isOpen, onClose, onSuccess }) {
<FormControl error={!!errors.displayName} sx={{ mb: 2 }}>
<Typography level='body2' mb={1}>
Display Name
{t('childUsers.displayNameLabel')}
</Typography>
<Input
fullWidth
id='displayName'
name='displayName'
placeholder='Display name (optional, defaults to sub account name)'
placeholder={t('childUsers.displayNamePlaceholder')}
value={displayName}
onChange={e => {
setDisplayName(e.target.value)
@@ -165,7 +166,7 @@ function CreateChildUserModal({ isOpen, onClose, onSuccess }) {
<FormControl error={!!errors.password} sx={{ mb: 2 }}>
<Typography level='body2' mb={1}>
Password *
{t('childUsers.passwordLabel')}
</Typography>
<Input
required
@@ -173,7 +174,7 @@ function CreateChildUserModal({ isOpen, onClose, onSuccess }) {
name='password'
type='password'
id='password'
placeholder='Enter password (8-64 characters)'
placeholder={t('childUsers.passwordPlaceholder')}
value={password}
onChange={e => {
setPassword(e.target.value)
@@ -185,7 +186,7 @@ function CreateChildUserModal({ isOpen, onClose, onSuccess }) {
<FormControl error={!!errors.confirmPassword} sx={{ mb: 3 }}>
<Typography level='body2' mb={1}>
Confirm Password *
{t('childUsers.confirmPasswordLabel')}
</Typography>
<Input
required
@@ -193,7 +194,7 @@ function CreateChildUserModal({ isOpen, onClose, onSuccess }) {
name='confirmPassword'
type='password'
id='confirmPassword'
placeholder='Confirm password'
placeholder={t('childUsers.confirmPasswordPlaceholder')}
value={confirmPassword}
onChange={e => {
setConfirmPassword(e.target.value)

14
src/views/Modals/Inputs/PasswordChangeModal.jsx
View File

@@ -2,8 +2,10 @@ import { FormControl, FormHelperText, Input, Typography } from '@mui/joy'
import { useEffect, useState } from 'react'
import ModalActions from '../../../components/common/ModalActions'
import { useResponsiveModal } from '../../../hooks/useResponsiveModal'
import { useTranslation } from 'react-i18next'
function PasswordChangeModal({ isOpen, onClose }) {
const { t } = useTranslation('settings')
const { ResponsiveModal } = useResponsiveModal()
const [password, setPassword] = useState('')
const [confirmPassword, setConfirmPassword] = useState('')
@@ -17,13 +19,13 @@ function PasswordChangeModal({ isOpen, onClose }) {
if (password !== confirmPassword) {
setPasswordError('Passwords do not match')
} else if (password.length < 8) {
setPasswordError('Password must be at least 8 characters')
setPasswordError(t('passwordChange.minLength'))
} else if (password.length > 64) {
setPasswordError('Password must be less than 64 characters')
setPasswordError(t('passwordChange.maxLength'))
} else {
setPasswordError(null)
}
}, [password, confirmPassword, passwordTouched, confirmPasswordTouched])
}, [password, confirmPassword, passwordTouched, confirmPasswordTouched, t])
const handleAction = isConfirmed => onClose(isConfirmed ? password : null)
const canSubmit =
@@ -38,13 +40,13 @@ function PasswordChangeModal({ isOpen, onClose }) {
open={isOpen}
onClose={() => handleAction(false)}
size='sm'
title='Change Password'
title={t('accountSettings.changePassword')}
description='Choose a password between 8 and 64 characters.'
footer={
<ModalActions
secondary={{ label: 'Cancel', onClick: () => handleAction(false) }}
secondary={{ label: t('accountSettings.cancel'), onClick: () => handleAction(false) }}
primary={{
label: 'Change Password',
label: t('accountSettings.changePassword'),
disabled: !canSubmit,
onClick: () => handleAction(true),
}}

23
src/views/Modals/Inputs/UserDeletionModal.jsx
View File

@@ -14,8 +14,10 @@ import ModalActions from '../../../components/common/ModalActions'
import { useNavigate } from 'react-router-dom'
import { useResponsiveModal } from '../../../hooks/useResponsiveModal'
import { CheckUserDeletion, DeleteUser } from '../../../utils/Fetcher'
import { useTranslation } from 'react-i18next'
function UserDeletionModal({ isOpen, onClose }) {
const { t } = useTranslation('settings')
const { ResponsiveModal } = useResponsiveModal()
const Navigate = useNavigate()
const [step, setStep] = useState(1) // 1: Warning, 2: Transfer, 3: Confirm
@@ -47,7 +49,7 @@ function UserDeletionModal({ isOpen, onClose }) {
const checkDeletionRequirements = async () => {
if (password.trim() === '') {
setError('Please enter your password to continue')
setError(t('deletion.passwordRequired'))
return
}
@@ -97,7 +99,7 @@ function UserDeletionModal({ isOpen, onClose }) {
const executeUserDeletion = async () => {
if (password.trim() === '' || confirmation !== 'DELETE') {
setError('Please enter your password and type DELETE to confirm')
setError(t('deletion.passwordAndDelete'))
return
}
@@ -120,7 +122,7 @@ function UserDeletionModal({ isOpen, onClose }) {
}
} catch (err) {
console.error('Failed to delete account:', err)
setError('Failed to delete account')
setError(t('deletion.failed'))
} finally {
setLoading(false)
}
@@ -181,7 +183,7 @@ function UserDeletionModal({ isOpen, onClose }) {
type='password'
value={password}
onChange={e => setPassword(e.target.value)}
placeholder='Enter your password'
placeholder={t('deletion.passwordPlaceholder')}
/>
</FormControl>
@@ -196,7 +198,7 @@ function UserDeletionModal({ isOpen, onClose }) {
const renderTransferStep = () => (
<>
<Typography level='body-md' mb={3}>
You own circles that require ownership transfer before deletion. Please
{t('deletion.transferIntro')}
select new owners:
</Typography>
@@ -208,7 +210,7 @@ function UserDeletionModal({ isOpen, onClose }) {
<FormControl>
<FormLabel>New Owner</FormLabel>
<Select
placeholder='Select new owner'
placeholder={t('deletion.selectOwner')}
value={
transferOptions.find(t => t.circleId === circle.id)
?.newOwnerId || ''
@@ -237,8 +239,7 @@ function UserDeletionModal({ isOpen, onClose }) {
const renderConfirmationStep = () => (
<>
<Typography level='body-md' mb={3}>
Please enter your password and type <strong>DELETE</strong> to confirm
account deletion.
{t('deletion.confirmPrompt')}
</Typography>
<Typography level='body-sm' mb={2}>
on successful deletion, you will be logged out and redirected to the
@@ -251,7 +252,7 @@ function UserDeletionModal({ isOpen, onClose }) {
type='password'
value={password}
onChange={e => setPassword(e.target.value)}
placeholder='Enter your password'
placeholder={t('deletion.passwordPlaceholder')}
/>
</FormControl>
@@ -260,7 +261,7 @@ function UserDeletionModal({ isOpen, onClose }) {
<Input
value={confirmation}
onChange={e => setConfirmation(e.target.value)}
placeholder='DELETE'
placeholder={t('deletion.typeDelete')}
/>
</FormControl>
@@ -304,7 +305,7 @@ function UserDeletionModal({ isOpen, onClose }) {
<ModalActions
stackOnMobile
secondary={{
label: 'Cancel',
label: t('accountSettings.cancel'),
onClick: () => handleClose(false),
}}
primary={{