i18n-dashboard 0.13.2 → 0.15.2

package/README.md

@@ -77,6 +77,19 @@ npx i18n-dashboard start
 
 ---
 
+## 🤔 Why I built this
+
+Editing i18n JSON files was breaking my flow.
+
+I wanted something that:
+- works with vue-i18n
+- doesn't require migration
+- stays simple but scalable
+
+So I built this.
+
+---
+
 ## 📘 Documentation
 
 - See USAGE.md for workflows
@@ -86,8 +99,11 @@ npx i18n-dashboard start
 
 ## 💬 Feedback
 
-Looking for feedback 👀  
-Open an issue or discussion!
+If you're using vue-i18n, I'd genuinely love your feedback.
+
+This tool comes from a real pain point, and I'm trying to improve it.
+
+Feel free to open an issue or share your thoughts.
 
 ---
 

package/nuxt.config.ts

@@ -15,6 +15,10 @@ export default defineNuxtConfig({
   compatibilityDate: '2025-01-01',
   devtools: { enabled: false },
 
+  app: {
+    pageTransition: { name: 'page', mode: 'out-in' },
+  },
+
   srcDir: 'src',
   serverDir: 'src/server',
 
@@ -41,6 +45,11 @@ export default defineNuxtConfig({
     localesPath: process.env.I18N_LOCALES_PATH || 'src/locales',
     // Auth — set SESSION_SECRET to a strong random value in production
     sessionSecret: process.env.SESSION_SECRET || DEFAULT_SECRET,
+    // Security — tunable without code changes
+    bcryptRounds: process.env.BCRYPT_ROUNDS || '12',
+    sessionTtlMinutes: process.env.SESSION_TTL_MINUTES || '15',
+    refreshTokenTtlDays: process.env.REFRESH_TOKEN_TTL_DAYS || '7',
+    resetTokenTtlHours: process.env.RESET_TOKEN_TTL_HOURS || '1',
     // Email (SMTP) — optional
     smtpHost: process.env.SMTP_HOST || '',
     smtpPort: process.env.SMTP_PORT || '587',
@@ -69,6 +78,10 @@ export default defineNuxtConfig({
         dir: './src/assets/locales',
       },
     ],
+    experimental: { tasks: true },
+    scheduledTasks: {
+      '0 * * * *': ['purge-logs'],
+    },
     // ── Security headers ─────────────────────────────────────────────────────
     // Applied to every response from the Nitro server.
     routeRules: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "i18n-dashboard",
-  "version": "0.13.2",
+  "version": "0.15.2",
   "description": "A web dashboard to manage vue-i18n translation keys with database persistence",
   "type": "module",
   "bin": {
@@ -16,12 +16,13 @@
     "stop": "node bin/cli.mjs stop",
     "init": "node bin/cli.mjs init",
     "sync": "node bin/cli.mjs sync",
-    "cy:open": "cypress open",
-    "cy:run": "cypress run",
+    "lint": "eslint .",
+    "lint:fix": "eslint . --fix",
     "test": "vitest",
     "test:ui": "vitest --ui",
     "test:run": "vitest run",
-    "test:coverage": "vitest run --coverage"
+    "test:coverage": "vitest run --coverage",
+    "prepare": "husky"
   },
   "dependencies": {
     "@nuxt/ui": "^3.3.7",
@@ -77,11 +78,17 @@
   "devDependencies": {
     "@iconify-json/heroicons": "^1.2.3",
     "@types/node": "^25.3.5",
+    "@typescript-eslint/eslint-plugin": "^8.57.1",
+    "@typescript-eslint/parser": "^8.57.1",
     "@vitest/coverage-v8": "^4.1.0",
     "@vitest/ui": "^4.1.0",
+    "@vue/eslint-config-typescript": "^14.7.0",
     "@vue/test-utils": "^2.4.6",
-    "cypress": "^15.12.0",
+    "eslint": "^10.0.3",
+    "eslint-plugin-vue": "^10.8.0",
     "happy-dom": "^20.8.4",
-    "vitest": "^4.1.0"
+    "husky": "^9.1.7",
+    "vitest": "^4.1.0",
+    "vue-eslint-parser": "^10.4.0"
   }
 }

package/src/app.vue

@@ -1,8 +1,12 @@
 <template>
   <UApp>
-    <NuxtLoadingIndicator color="rgb(var(--ui-primary))" :height="3" :throttle="100" />
+    <NuxtLoadingIndicator
+      color="rgb(var(--ui-primary))"
+      :height="3"
+      :throttle="100"
+    />
     <NuxtLayout>
-      <NuxtPage :transition="{ name: 'page', mode: 'out-in' }" />
+      <NuxtPage />
     </NuxtLayout>
   </UApp>
 </template>

package/src/assets/locales/en.json

@@ -52,6 +52,7 @@
   "translations.search": "Search for a key...",
   "translations.add_key": "New key",
   "translations.translate_all": "Translate all",
+  "translations.nothing_to_translate": "Nothing to translate",
   "translations.no_results": "No keys found",
   "translations.no_results_hint": "Try a different search term.",
   "translations.add_description": "Add a description…",
@@ -108,6 +109,8 @@
   "review.mark_all_reviewed": "Mark all as reviewed",
   "review.reject": "Reject",
   "review.mark_reviewed": "Mark as reviewed",
+  "review.awaiting_approval": "Awaiting approval",
+  "review.translations_approved": "translation(s) approved",
   "languages.deleted": "Language deleted",
   "languages.translating": "Translating",
   "languages.translate_done": "Translation complete",
@@ -409,6 +412,11 @@
   "onboarding.passwords_mismatch": "Passwords do not match.",
   "onboarding.admin_creation_error": "Error creating administrator account.",
   "onboarding.project_name_path_required": "Project name and path are required.",
+  "onboarding.project_name_required": "Project name is required.",
+  "onboarding.project_path_required": "Project path is required.",
+  "onboarding.project_git_url_required": "Repository URL is required.",
+  "onboarding.source_local": "Local path",
+  "onboarding.source_git": "Git repository",
   "onboarding.project_creation_error": "Error creating project.",
   "settings.snapshot_title": "Project snapshot",
   "settings.snapshot_hint": "Export a complete snapshot of this project (config, languages, all translation keys and values) as a single JSON file. Import it on any other instance to restore.",
@@ -456,5 +464,98 @@
   "scan.files_scanned": "files scanned",
   "scan.errors": "errors",
   "scan.run": "Scan",
-  "scan.translations_synced": "translations imported"
+  "scan.translations_synced": "translations imported",
+
+  "forgot_password.title": "Forgot password",
+  "forgot_password.description": "Enter your email address and we'll send you a link to reset your password.",
+  "forgot_password.submit": "Send link",
+  "forgot_password.back_to_login": "Back to login",
+  "forgot_password.success": "If this email is associated with an account, a reset link has been sent to you.",
+  "forgot_password.error_fallback": "An error occurred",
+
+  "reset_password.title": "New password",
+  "reset_password.invalid_link": "Invalid link. Please make a new reset request.",
+  "reset_password.request_new_link": "Request a new link",
+  "reset_password.success": "Password changed successfully.",
+  "reset_password.login": "Sign in",
+  "reset_password.label_new_password": "New password",
+  "reset_password.hint_min_length": "Minimum 8 characters",
+  "reset_password.label_confirm": "Confirm password",
+  "reset_password.submit": "Change password",
+  "reset_password.error_mismatch": "Passwords do not match",
+  "reset_password.error_too_short": "Password must be at least 8 characters",
+  "reset_password.error_fallback": "An error occurred",
+
+  "security.title": "Security",
+  "security.description": "Password policy and security settings",
+  "security.password_policy_title": "Password policy",
+  "security.min_length_label": "Minimum length",
+  "security.min_length_hint": "Minimum number of characters required",
+  "security.complexity_title": "Required complexity",
+  "security.require_uppercase": "At least one uppercase letter (A–Z)",
+  "security.require_number": "At least one digit (0–9)",
+  "security.require_special": "At least one special character (!@#$...)",
+  "security.current_rules": "Current rules:",
+  "security.rule_min_length_pre": "Minimum",
+  "security.rule_character": "character",
+  "security.rule_characters": "characters",
+  "security.rule_uppercase": "At least one uppercase letter",
+  "security.rule_number": "At least one digit",
+  "security.rule_special": "At least one special character",
+  "security.save": "Save",
+  "security.saved": "Settings saved",
+  "security.infra_title": "Infrastructure settings",
+  "security.infra_description": "These values are configured via environment variables and require a restart.",
+  "security.bcrypt_rounds": "Bcrypt rounds",
+  "security.session_duration": "Session duration",
+  "security.refresh_token_duration": "Refresh token duration",
+  "security.reset_link_expiry": "Reset link expiry",
+
+  "logs.title": "System logs",
+  "logs.description": "Error and warning logs generated by background processes",
+  "logs.settings_title": "Auto-purge settings",
+  "logs.retention_days_label": "Retain logs for (days)",
+  "logs.purge_interval_label": "Auto-purge interval (hours)",
+  "logs.purge_all": "Purge all",
+  "logs.empty": "No logs found",
+  "logs.filter_context": "Filter by context...",
+  "logs.show_details": "Details",
+  "logs.purged_toast": "Logs purged",
+  "logs.entries_deleted": "entries deleted",
+  "logs.level_all": "All levels",
+  "logs.level_error": "Error",
+  "logs.level_warn": "Warning",
+  "logs.level_info": "Info",
+  "logs.nav_label": "System logs",
+  "common.refresh": "Refresh",
+  "smtp.title": "SMTP configuration",
+  "smtp.description": "Configure email sending for invitations and password resets",
+  "smtp.host_label": "SMTP host",
+  "smtp.port_label": "Port",
+  "smtp.secure_label": "Secure connection (TLS/SSL)",
+  "smtp.user_label": "Username",
+  "smtp.pass_label": "Password",
+  "smtp.pass_set_hint": "Password is set — leave blank to keep current",
+  "smtp.from_label": "From address",
+  "smtp.dashboard_url_label": "Dashboard URL",
+  "smtp.dashboard_url_hint": "Used for links in emails",
+  "smtp.save": "Save",
+  "smtp.test": "Test",
+  "smtp.test_email_label": "Send test email to",
+  "smtp.not_configured": "SMTP not configured — emails will not be sent",
+  "smtp.test_sent": "Test email sent",
+  "smtp.test_failed": "Send failed",
+  "smtp.saved": "SMTP configuration saved",
+  "smtp.nav_label": "SMTP",
+  "smtp.config_file_title": "Local config file",
+  "smtp.config_file_hint": "For local deployments, you can configure SMTP in a JSON file at your project root. Values are seeded into the database on first start.",
+  "smtp.provider_label": "Quick setup",
+  "smtp.provider_custom": "Custom",
+  "smtp.secure_hint": "Keep off for port 587 (STARTTLS). Enable only for port 465.",
+  "smtp.gmail_hint_title": "Gmail requires an App Password",
+  "smtp.gmail_step1": "Click this link:",
+  "smtp.gmail_step2": "If the page shows \"The setting you are looking for is not available\" → you must first enable 2-Step Verification on your Google account",
+  "smtp.gmail_step3": "Type a name (e.g. \"i18n-dashboard\") and click Create",
+  "smtp.gmail_step4": "Copy the 16-character code shown (e.g. abcd efgh ijkl mnop)",
+  "smtp.gmail_step5": "Paste it in the Password field below — use your Gmail address as Username"
 }

package/src/components/GitRepoManager.vue

@@ -1,21 +1,43 @@
 <template>
   <div class="space-y-2">
     <div class="grid grid-cols-2 gap-2">
-      <UFormField :label="t('projects.git_repo_url_label', 'Repository URL')" class="col-span-2">
-        <UInput v-model="local.url" class="w-full" placeholder="https://github.com/org/repo.git" @input="emitCurrent" />
+      <UFormField
+        :label="t('projects.git_repo_url_label', 'Repository URL')"
+        class="col-span-2"
+      >
+        <UInput
+          v-model="local.url"
+          class="w-full"
+          placeholder="https://github.com/org/repo.git"
+          @input="emitCurrent"
+        />
       </UFormField>
-      <UFormField :label="t('projects.git_repo_branch_label', 'Branch')" class="col-span-2">
-        <UInput v-model="local.branch" class="w-full" placeholder="main" @input="emitCurrent" />
+      <UFormField
+        :label="t('projects.git_repo_branch_label', 'Branch')"
+        class="col-span-2"
+      >
+        <UInput
+          v-model="local.branch"
+          class="w-full"
+          placeholder="main"
+          @input="emitCurrent"
+        />
       </UFormField>
     </div>
     <UFormField :label="t('projects.git_token_label', 'Access token (optional)')">
-      <UInput v-model="local.token" type="password" class="w-full" :placeholder="t('projects.git_token_placeholder', 'ghp_...')" @input="emitCurrent" />
+      <UInput
+        v-model="local.token"
+        type="password"
+        class="w-full"
+        :placeholder="t('projects.git_token_placeholder', 'ghp_...')"
+        @input="emitCurrent"
+      />
     </UFormField>
   </div>
 </template>
 
 <script setup lang="ts">
-import type { IGitRepo } from '~/interfaces/project.interface'
+import type { IGitRepo } from '../interfaces/project.interface'
 
 const { t } = useT()
 

package/src/components/LanguagePicker.vue

@@ -22,9 +22,16 @@
           <span class="font-mono text-xs text-gray-400 w-14 shrink-0">{{ lang.code }}</span>
           <span class="flex-1">{{ lang.nativeName }}</span>
           <span class="text-xs text-gray-400 shrink-0">{{ lang.name }}</span>
-          <UIcon v-if="isSelected(lang.code)" name="i-heroicons-check" class="text-primary-500 shrink-0" />
+          <UIcon
+            v-if="isSelected(lang.code)"
+            name="i-heroicons-check"
+            class="text-primary-500 shrink-0"
+          />
         </button>
-        <div v-if="!filteredList.length" class="px-3 py-4 text-sm text-center text-gray-400">
+        <div
+          v-if="!filteredList.length"
+          class="px-3 py-4 text-sm text-center text-gray-400"
+        >
           {{ t('languages.none_found', 'No language found') }}
         </div>
       </div>
@@ -38,16 +45,30 @@
           class="w-full flex items-center gap-3 px-3 py-2.5 text-sm text-left hover:bg-amber-50 dark:hover:bg-amber-900/20 text-gray-500 dark:text-gray-400 transition-colors"
           @click="addCustom(search)"
         >
-          <UIcon name="i-heroicons-plus-circle" class="shrink-0 text-amber-500" />
+          <UIcon
+            name="i-heroicons-plus-circle"
+            class="shrink-0 text-amber-500"
+          />
           <span class="flex-1">{{ t('languages.use_code', 'Use code') }} <code class="font-mono bg-gray-100 dark:bg-gray-800 px-1 rounded">{{ search }}</code></span>
-          <UBadge size="xs" color="warning" variant="soft">BCP 47</UBadge>
+          <UBadge
+            size="xs"
+            color="warning"
+            variant="soft"
+          >
+            BCP 47
+          </UBadge>
         </button>
       </div>
     </div>
 
     <!-- Selected languages -->
-    <div v-if="modelValue.length" class="space-y-1.5">
-      <p class="text-xs font-medium text-gray-500 dark:text-gray-400">{{ t('languages.selected', 'Selected languages') }}</p>
+    <div
+      v-if="modelValue.length"
+      class="space-y-1.5"
+    >
+      <p class="text-xs font-medium text-gray-500 dark:text-gray-400">
+        {{ t('languages.selected', 'Selected languages') }}
+      </p>
       <div class="flex flex-wrap gap-2">
         <div
           v-for="lang in modelValue"
@@ -62,17 +83,28 @@
             variant="soft"
             class="cursor-pointer"
             @click="setDefault(lang.code)"
-          >{{ t('languages.default_badge', 'Default') }}</UBadge>
+          >
+            {{ t('languages.default_badge', 'Default') }}
+          </UBadge>
           <button
             v-else
             class="text-xs text-gray-400 hover:text-primary-500 transition-colors"
             :title="t('languages.set_as_default', 'Set as default')"
             @click="setDefault(lang.code)"
           >
-            <UIcon name="i-heroicons-star" class="text-xs" />
+            <UIcon
+              name="i-heroicons-star"
+              class="text-xs"
+            />
           </button>
-          <button class="text-gray-300 hover:text-red-500 transition-colors" @click="remove(lang.code)">
-            <UIcon name="i-heroicons-x-mark" class="text-xs" />
+          <button
+            class="text-gray-300 hover:text-red-500 transition-colors"
+            @click="remove(lang.code)"
+          >
+            <UIcon
+              name="i-heroicons-x-mark"
+              class="text-xs"
+            />
           </button>
         </div>
       </div>
@@ -81,7 +113,7 @@
 </template>
 
 <script setup lang="ts">
-import { LANGUAGES } from '~/consts/languages.const'
+import { LANGUAGES } from '../consts/languages.const'
 
 const { t } = useT()
 

package/src/components/LinkedKeyPicker.vue

@@ -10,7 +10,11 @@
     />
   </UTooltip>
 
-  <UModal v-model:open="open" :title="t('key.link_key_title', 'Link a key')" :ui="{ width: 'sm:max-w-lg' }">
+  <UModal
+    v-model:open="open"
+    :title="t('key.link_key_title', 'Link a key')"
+    :ui="{ width: 'sm:max-w-lg' }"
+  >
     <template #body>
       <div class="space-y-4">
         <!-- Modifier selector -->
@@ -40,13 +44,25 @@
 
         <!-- Key list -->
         <div class="border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden">
-          <div v-if="loading" class="py-8 text-center">
-            <UIcon name="i-heroicons-arrow-path" class="animate-spin text-gray-400 text-lg" />
+          <div
+            v-if="loading"
+            class="py-8 text-center"
+          >
+            <UIcon
+              name="i-heroicons-arrow-path"
+              class="animate-spin text-gray-400 text-lg"
+            />
           </div>
-          <div v-else-if="!keys.length" class="py-8 text-center text-sm text-gray-400">
+          <div
+            v-else-if="!keys.length"
+            class="py-8 text-center text-sm text-gray-400"
+          >
             {{ t('key.none_found', 'No key found') }}
           </div>
-          <div v-else class="max-h-72 overflow-y-auto divide-y divide-gray-100 dark:divide-gray-800">
+          <div
+            v-else
+            class="max-h-72 overflow-y-auto divide-y divide-gray-100 dark:divide-gray-800"
+          >
             <button
               v-for="key in keys"
               :key="key.id"

package/src/components/PathPicker.vue

@@ -14,10 +14,13 @@
     />
   </div>
 
-  <UModal v-model:open="open" :title="t('pathpicker.title', 'Select a folder')" :ui="{ width: 'sm:max-w-xl' }">
+  <UModal
+    v-model:open="open"
+    :title="t('pathpicker.title', 'Select a folder')"
+    :ui="{ width: 'sm:max-w-xl' }"
+  >
     <template #body>
       <div class="space-y-3">
-
         <!-- Breadcrumbs + home -->
         <div class="flex items-center gap-1 flex-wrap min-h-6">
           <UButton
@@ -27,8 +30,14 @@
             size="xs"
             @click="browse(data?.home ?? '')"
           />
-          <template v-for="(crumb, i) in data?.breadcrumbs" :key="crumb.path">
-            <UIcon name="i-heroicons-chevron-right" class="text-gray-400 text-xs shrink-0" />
+          <template
+            v-for="(crumb, i) in data?.breadcrumbs"
+            :key="crumb.path"
+          >
+            <UIcon
+              name="i-heroicons-chevron-right"
+              class="text-gray-400 text-xs shrink-0"
+            />
             <button
               class="text-xs px-1.5 py-0.5 rounded transition-colors hover:bg-gray-100 dark:hover:bg-gray-800 font-mono"
               :class="i === (data?.breadcrumbs.length ?? 0) - 1
@@ -49,51 +58,88 @@
             class="w-full flex items-center gap-2.5 px-3 py-2 text-sm text-gray-500 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-800/60 border-b border-gray-100 dark:border-gray-800 transition-colors"
             @click="browse(data.parent)"
           >
-            <UIcon name="i-heroicons-arrow-up" class="text-gray-400 shrink-0" />
+            <UIcon
+              name="i-heroicons-arrow-up"
+              class="text-gray-400 shrink-0"
+            />
             <span class="font-mono">../</span>
           </button>
 
           <!-- Loading -->
-          <div v-if="loading" class="py-8 text-center">
-            <UIcon name="i-heroicons-arrow-path" class="animate-spin text-gray-400 text-lg" />
+          <div
+            v-if="loading"
+            class="py-8 text-center"
+          >
+            <UIcon
+              name="i-heroicons-arrow-path"
+              class="animate-spin text-gray-400 text-lg"
+            />
           </div>
 
           <!-- Empty -->
-          <div v-else-if="!data?.entries.length" class="py-8 text-center text-sm text-gray-400">
+          <div
+            v-else-if="!data?.entries.length"
+            class="py-8 text-center text-sm text-gray-400"
+          >
             {{ t('pathpicker.empty', 'No subfolder') }}
           </div>
 
           <!-- Entries -->
-          <div v-else class="max-h-72 overflow-y-auto divide-y divide-gray-100 dark:divide-gray-800">
+          <div
+            v-else
+            class="max-h-72 overflow-y-auto divide-y divide-gray-100 dark:divide-gray-800"
+          >
             <button
               v-for="entry in data.entries"
               :key="entry.path"
               class="w-full flex items-center gap-2.5 px-3 py-2 text-sm text-left hover:bg-gray-50 dark:hover:bg-gray-800/60 transition-colors group"
               @click="browse(entry.path)"
             >
-              <UIcon name="i-heroicons-folder" class="text-amber-400 shrink-0" />
+              <UIcon
+                name="i-heroicons-folder"
+                class="text-amber-400 shrink-0"
+              />
               <span class="font-mono text-gray-700 dark:text-gray-300 flex-1 truncate">{{ entry.name }}</span>
-              <UIcon name="i-heroicons-chevron-right" class="text-gray-300 dark:text-gray-600 shrink-0 group-hover:text-gray-400 transition-colors" />
+              <UIcon
+                name="i-heroicons-chevron-right"
+                class="text-gray-300 dark:text-gray-600 shrink-0 group-hover:text-gray-400 transition-colors"
+              />
             </button>
           </div>
         </div>
 
         <!-- Current selection -->
         <div class="bg-gray-50 dark:bg-gray-800 rounded-lg px-3 py-2 flex items-center gap-2">
-          <UIcon name="i-heroicons-map-pin" class="text-primary-500 shrink-0 text-sm" />
+          <UIcon
+            name="i-heroicons-map-pin"
+            class="text-primary-500 shrink-0 text-sm"
+          />
           <code class="text-xs font-mono text-gray-700 dark:text-gray-300 flex-1 truncate">{{ data?.current ?? '…' }}</code>
         </div>
 
-        <p v-if="browseError" class="text-xs text-red-500">{{ browseError }}</p>
+        <p
+          v-if="browseError"
+          class="text-xs text-red-500"
+        >
+          {{ browseError }}
+        </p>
       </div>
     </template>
 
     <template #footer>
       <div class="flex justify-end gap-2">
-        <UButton color="neutral" variant="ghost" @click="open = false">
+        <UButton
+          color="neutral"
+          variant="ghost"
+          @click="open = false"
+        >
           {{ t('common.cancel', 'Cancel') }}
         </UButton>
-        <UButton icon="i-heroicons-check" :disabled="!data?.current" @click="select">
+        <UButton
+          icon="i-heroicons-check"
+          :disabled="!data?.current"
+          @click="select"
+        >
           {{ t('pathpicker.select', 'Select this folder') }}
         </UButton>
       </div>