# Bento - Installation & Setup Guide

This guide covers setting up the Bento Web application (landing page + authentication API) on a shared hosting environment like `o2switch.fr`, and configuring the Figma Plugin to connect to it.

## 1. Hosting Setup (o2switch.fr)

1. **Upload Files:** Upload the entire contents of the `Bento-Web` folder to your public directory (e.g., `public_html/bento` or the root `public_html`).
2. **Database Setup:** 
   - Go to your hosting control panel (cPanel) and open **MySQL Databases**.
   - Create a new database (e.g., `o2switchuser_bento`).
   - Create a new MySQL user and assign it full privileges to the database.
   - Open **phpMyAdmin**, select your new database, and import the `schema.sql` file located in the `Bento-Web` folder.
3. **Configuration:**
   - Open `includes/config.php`.
   - Update the database credentials (`DB_HOST`, `DB_USER`, `DB_PASS`, `DB_NAME`) to match the ones you created.
   - Update `BASE_URL` to your live domain (e.g., `https://bentoplugin.com/`). Ensure it ends with a trailing slash `/`.
4. **Permissions:**
   - Ensure the `uploads/` directory inside `Bento-Web` has write permissions (usually `0755`).

## 2. Admin Configuration

1. Visit your admin dashboard: `https://your-domain.com/admin.php`.
2. Log in using the default credentials:
   - **Username:** `bento`
   - **Password:** `jZThifNC8pzlc7D3`
3. Upload your **Site Logo** and **Favicon**. The favicon will automatically sync with the Figma plugin.
4. Set up your **SMTP Configuration**. This is required for users to send test emails from within the Figma plugin.

## 3. Figma Plugin Setup

1. Open `Bento Plugin/ui.html`.
2. Locate the `BACKEND_URL` variable near line 545.
3. Change it from `http://localhost/Bento-Project/Bento-Web/api/` to your live API endpoint:
   ```javascript
   const BACKEND_URL = 'https://your-domain.com/api/';
   ```
4. Also update the favicon `<img src="...">` URL around line 462 in `ui.html` to point to your live `api/favicon.php`.
5. Open Figma desktop app.
6. Go to **Plugins > Development > Import plugin from manifest...**
7. Select the `manifest.json` inside the `Bento Plugin` folder.

## 4. Usage

- Open the plugin in Figma.
- Click **Login**. It will open your web platform where users can register or sign in.
- Once signed in, the plugin will automatically authenticate, unlocking the ability to **Export ZIP** and **Send Test Email**.
