76 lines
3.8 KiB
Markdown
76 lines
3.8 KiB
Markdown
# 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). |