task-manager/implementation_plan_refinements.md

Implementation Plan: Recent Requests Refinement

This document details the technical approach for implementing the recently added Translation, UI, Admin, and Security tasks.

1. Localization & UI Polish

Settings Page Translations

• Social & Privacy Box:
  • Target File: client/src/pages/settings.tsx
  • Action: Replace hardcoded English text with t() hooks.
  • Locales: Add keys under settings.social.* and settings.privacy.* in en.json and de.json.
• Administration Box:
  • Target File: client/src/pages/settings.tsx
  • Action: Ensure the "Administration" header and description for the Admin button are properly translated keys (settings.admin.*).

Achievements Page Polish

• Tabs (Inventory & History):
  • Target File: client/src/pages/AchievementsPage.tsx
  • Issue: Tabs likely have hardcoded labels or empty content.
  • Action:
    1. Translate Tab Triggers (Inventory, History).
    2. Inventory Tab: Implement a grid showing unlocked "Rewards" (Themes, Icons) purchased by the user. If empty, show "No items yet".
    3. History Tab: Implement a list showing xp_transactions (filter by type purchase or reward).
  • Locales: Add achievements.tabs.*, achievements.inventory.*, achievements.history.*.

Tasks Page Layout

• Calendar Bar Positioning:
  • Target File: client/src/components/TasksWithCalendar.tsx (or similar container).
  • Action:
    • Modify the container styling to ensure the CalendarBar is pinned to the bottom.
    • Use CSS sticky bottom-0 or fixed bottom-0 (depending on scroll container).
    • Height Check: Ensure the bottom bar's specific height is sufficient to show the calendar dates and the headline ("Next 7 Days") without cutting off.

Task Creation & Sharing

• Smart Input (NLP):
  • Target File: client/src/components/TaskInput.tsx (or SmartTaskInput).
  • Action: Verify the placeholder text is using t('taskCreation.smartPlaceholder'). Test that typing "Buy milk tomorrow" correctly parses "tomorrow" in both English and German contexts (requires checking nlp.ts for locale support).
• Single Task Sharing:
  • Target File: client/src/components/TaskCard.tsx.
  • Action: Ensure a "Share" button/icon is visible on the card (possibly under a "More" menu or direct action).
  • Logic: It should trigger the ShareAccessModal but pre-filled for just that singular task ID (Task Sharing MVP).

2. Admin & Account Features

Admin User Management

• Translations:
  • Target File: client/src/pages/AdminUserManagement.tsx
  • Action: Audit table headers (ID, Username, Role, Actions) and ensure they are translated keys.
• Safe User Deletion:
  • Action: Add a "Delete" (Trash) icon button next to a user.
  • UI: Opens a Dialog.
  • Validation: "To confirm deletion, type the number of users to delete (1) or the username". (User request mentions "number of users to be deleted", but usually single deletion requires unique ID confirmation. Will implement: "Type 'DELETE' to confirm").
  • Backend: Ensure DELETE /api/users/:id endpoint exists and has admin checks.

SMTP Settings Separation

• Target File: client/src/pages/AdminUserManagement.tsx.
• Action:
  • Remove the "Email Settings" card from AdminUserManagement.tsx.
  • Create a new route/page client/src/pages/AdminEmailSettings.tsx OR add a Tabs component to the Admin page: [Users] [Email Settings].
  • Recommendation: Use Tabs within the existing Admin page for better UX.

Account Box Enhancements

• Password Change:
  • Target File: client/src/pages/settings.tsx.
  • Action: Add "Change Password" button.
  • UI: Opens Dialog with Current Password, New Password, Confirm Password.
  • Backend: Create POST /api/user/password-change (requires current password validation).
• Profile Data:
  • Target File: client/src/pages/settings.tsx.
  • Action: Hide the numeric id. Display email.
  • Edit Email: Add "Change Email" button -> Opens Modal -> New Email input. Backend requires validation.

3. Security & Sessions (Phase 3)

2-Factor Authentication (2FA)

• Database:
  • File: shared/schema.ts
  • Change: Add emailOtp (string, nullable) and emailOtpExpires (timestamp) to users table.
• Auth Flow (server/auth.ts):
  • Login Step 1: User POSTs username/password.
  • Logic: If password correct -> Generate 6-digit Random Code -> Save to DB -> Send via EmailService.
  • Response: Return 200 OK but with specific flag { status: "2FA_REQUIRED", userId: ... }. Do NOT set session cookie yet.
  • Login Step 2: User POSTs code.
  • Logic: Verify code matches & not expired -> Set Session Cookie -> Log in.
• Frontend:
  • File: client/src/pages/AuthPage.tsx
  • UI: Add state for showTwoFactorInput. If Step 1 succeeds, switch form to simple "Enter 6-digit code" input.

Persistent Sessions ("Remember Me")

• Frontend:
  • File: client/src/pages/AuthPage.tsx
  • UI: Add <Checkbox> "Stay logged in" to Login form.
  • Logic: Pass rememberMe: true in the login payload.
• Backend:
  • File: server/auth.ts / server/index.ts
  • Logic:
    • If rememberMe is true, set the session cookie maxAge to 30 days (1000 * 60 * 60 * 24 * 30).
    • Default maxAge can remain 24h.
  • Config: Ensure express-session store (Memory or Database) is configured to handle potential long-lived sessions (Postgres store is recommended for production persistence).

4. Execution Order

1. Refactor Admin & Account Settings (SMTP Tabs, Translations, Password Modal).
2. Fix Achievements & Tasks UI (Tabs, Calendar Bar).
3. Implement Security Core (Schema Update, 2FA Flow, Session Config).
4. Final Localization Sweep.