add auth

spec/feature-auth.md

@@ -0,0 +1,76 @@
+# Feature Request: Authentication Support
+
+**Context:**
+We are upgrading the "LiteRequest" Tauri + Vue application. Currently, it supports Headers, Params, and Body.
+**Goal:** Add a dedicated **"Auth"** tab in the Request Configuration area to support common authentication methods.
+
+## 1. Functional Requirements
+
+### 1.1 Supported Auth Types
+The user should be able to select one of the following from a dropdown:
+1.  **No Auth** (Default)
+2.  **Basic Auth**: Inputs for `Username` and `Password`.
+3.  **Bearer Token**: Input for `Token` (e.g., JWT).
+4.  **API Key**: Inputs for `Key`, `Value`, and a selection for `Add To` ("Header" or "Query Params").
+
+### 1.2 State Management
+* Update `stores/requestStore.ts` to include an `auth` state object.
+* **Structure:**
+    ```typescript
+    state: {
+      // ... existing state
+      auth: {
+        type: 'none', // 'none' | 'basic' | 'bearer' | 'api_key'
+        basic: { username: '', password: '' },
+        bearer: { token: '' },
+        apiKey: { key: '', value: '', addTo: 'header' } // addTo: 'header' | 'query'
+      }
+    }
+    ```
+* **Persistence:** These values should be saved to `localStorage` along with the request history (careful note: in a real app we would encrypt this, but for this local MVP, plain text storage is acceptable).
+
+## 2. UI/UX Design
+
+### 2.1 Request Panel Update
+* In `RequestPanel.vue`, add a new Tab labeled **"Auth"** (place it first, before "Params").
+* **Layout:**
+    * **Type Selector:** A styled `<select>` or dropdown menu at the top of the tab content.
+    * **Dynamic Form:**
+        * If **No Auth**: Show a subtle message "This request does not use any authentication."
+        * If **Basic Auth**: Two fields (Username, Password). *Password field must use type="password" with a toggle to show/hide.*
+        * If **Bearer Token**: One large text area or input for the Token. Prefix it visually with "Bearer ".
+        * If **API Key**: Three inputs: Key (text), Value (text/password), Add To (Radio button or Select).
+
+### 2.2 Aesthetic Guidelines
+* Maintain the **Dark Mode** (Slate/Zinc) theme.
+* Inputs should look identical to the existing inputs in the "Headers" tab (rounded, dark background, border-slate-700).
+* Use `lucide-vue-next` icons (e.g., `ShieldCheck` icon for the Tab label).
+
+## 3. Technical Implementation Details
+
+### A. Frontend Logic (`requestStore.ts` & Component)
+* The Frontend needs to package this Auth data and send it to the Rust backend.
+* **Important:** Do *not* manually inject these into the `headers` list in the frontend UI (to avoid state sync issues). Pass the auth configuration as a separate object to the Rust command.
+
+### B. Backend Logic (`main.rs`)
+* Update the `execute_request` Tauri command signature to accept an `auth` argument.
+* **Logic Update:**
+    * Use `reqwest` built-in methods:
+    * **Basic:** `.basic_auth(username, Some(password))`
+    * **Bearer:** `.bearer_auth(token)`
+    * **API Key:**
+        * If `addTo == "header"`: Manually `.header(key, value)`
+        * If `addTo == "query"`: Manually append to the query params.
+
+## 4. Implementation Steps for AI
+
+Please generate the code updates in the following order:
+
+1.  **Store Update:** Modify `stores/requestStore.ts` to add the `auth` state structure.
+2.  **UI Component:** Create a new component `components/AuthPanel.vue` (or code to be added inside `RequestPanel.vue`) that handles the form switching and inputs.
+3.  **Rust Backend:** Update `main.rs`. Define the `Auth` struct (using `serde::Deserialize`) and update the `execute_request` logic to apply the auth.
+4.  **Integration:** Show how to update the `execute_request` invocation in the frontend to pass this new data.
+
+---
+**Instruction to AI:**
+Generate the code to implement these Authentication features. Ensure the UI matches the existing modern style (Tailwind CSS).