126 lines
3.1 KiB
Markdown
126 lines
3.1 KiB
Markdown
# MultiMailer WebUI
|
|
|
|
Standalone React/Vite WebUI for MultiMailer.
|
|
|
|
## Layout
|
|
|
|
This shell implements the requested layout:
|
|
|
|
```text
|
|
+--------+----------------------------------------------------------------------------------------+
|
|
| MSM | Titlebar with tenant selector ? Help Account selector |
|
|
| +----------------------------------------------------------------------------------------+
|
|
| Icon | Breadcrumb |
|
|
| +---------------+-----------------------------------------------------------------------+
|
|
| Icon | Submenu | Content |
|
|
| | | |
|
|
```
|
|
|
|
## Run locally
|
|
|
|
Start the backend first:
|
|
|
|
```bash
|
|
cd multimailer-server/server
|
|
source .venv/bin/activate
|
|
python -m uvicorn app.main:app --reload --host 127.0.0.1 --port 8000
|
|
```
|
|
|
|
Start the WebUI:
|
|
|
|
```bash
|
|
cd multimailer-webui
|
|
npm install
|
|
npm run dev
|
|
```
|
|
|
|
Open:
|
|
|
|
```text
|
|
http://127.0.0.1:5173
|
|
```
|
|
|
|
Use the development API key:
|
|
|
|
```text
|
|
dev-multimailer-api-key
|
|
```
|
|
|
|
## Current UI scope
|
|
|
|
Included now:
|
|
|
|
- screenshot-inspired app shell
|
|
- dark left icon rail
|
|
- top titlebar with tenant selector, help and account area
|
|
- breadcrumb/action bar
|
|
- module submenu
|
|
- dashboard cards
|
|
- campaign workspace
|
|
- Create / Review / Send wizard skeletons
|
|
- structured editor placeholders
|
|
- settings/admin placeholders
|
|
- local API key storage
|
|
|
|
Next steps:
|
|
|
|
1. Wire campaign list and version detail to backend.
|
|
2. Wire version autosave endpoints.
|
|
3. Implement Create Wizard data model.
|
|
4. Implement fields editor.
|
|
5. Implement recipient mapping table.
|
|
6. Implement attachment rule editor.
|
|
7. Implement review wizard around missing/ambiguous attachments.
|
|
|
|
|
|
## Troubleshooting: campaigns response does not render
|
|
|
|
The server returns campaign lists as:
|
|
|
|
```json
|
|
{
|
|
"campaigns": []
|
|
}
|
|
```
|
|
|
|
The WebUI client normalizes this to an array internally. If the page still shows
|
|
"No campaigns loaded yet", check:
|
|
|
|
```bash
|
|
curl -H "X-API-Key: dev-multimailer-api-key" \
|
|
http://127.0.0.1:8000/api/v1/campaigns
|
|
```
|
|
|
|
During Vite development, either:
|
|
|
|
1. leave the WebUI API base URL empty and use the Vite `/api` proxy, or
|
|
2. configure FastAPI CORS and use `http://127.0.0.1:8000` as API base URL.
|
|
|
|
To reset the saved API base URL:
|
|
|
|
```js
|
|
localStorage.removeItem("multimailer.apiSettings.baseUrl")
|
|
```
|
|
|
|
|
|
## Login and help shell update
|
|
|
|
The top line no longer contains the API URL, API key field or Blog link. The URL/API key remain under Settings for development and automation access.
|
|
|
|
The Help menu includes:
|
|
|
|
- context-sensitive Help, opened by the Help menu or `F1`
|
|
- User docs placeholder
|
|
- Admin docs placeholder
|
|
- GitLab link
|
|
- About modal
|
|
|
|
The account selector now opens a login flow. Development login requires the backend auth-session update:
|
|
|
|
```text
|
|
Email: admin@example.local
|
|
Password: dev-admin
|
|
```
|
|
|
|
The tenant selector is currently informational. It becomes actionable once users can have memberships in multiple tenants.
|