# 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**.