# Extension & Server Projekt

Dieses Projekt besteht aus drei Hauptkomponenten:

## Extension
- **Zweck**: Browser-Extension mit JWT-basierter Authentifizierung
- **Speicherort**: `/Extension`
- Empfängt JWT von der Web-App und kommuniziert mit dem Backend

## Server (React Web App)
- **Zweck**: Login-Interface mit Appwrite-Authentifizierung
- **Speicherort**: `/Server`
- Basiert auf React mit Appwrite-Integration
- Sendet JWT an die Extension nach erfolgreichem Login

## Backend
- **Zweck**: Serverseitige JWT-Validierung und API-Endpoints
- **Speicherort**: `/Server/backend`
- Node/Express Server mit Appwrite-Integration
- Validiert JWTs und führt privilegierte Aktionen aus

## Getting Started

### 1. Backend starten

```powershell
cd Server\backend
npm install
npm run dev
```

Das Backend läuft auf `http://localhost:3000`

**Wichtig**: Vor dem Start `APPWRITE_API_KEY` in `Server/backend/.env` eintragen!

### 2. React Web App starten

```powershell
cd Server
npm install
npm run dev
```

Die Web-App läuft auf `http://localhost:5173` (oder einem anderen Port, den Vite anzeigt)

**Wichtig**: Stelle sicher, dass `Server/.env` die korrekten Appwrite-Konfigurationswerte enthält:
- `VITE_APPWRITE_ENDPOINT`
- `VITE_APPWRITE_PROJECT_ID`

### 3. Extension laden

1. Öffne Chrome/Edge und gehe zu `chrome://extensions/` (oder `edge://extensions/`)
2. Aktiviere **"Entwicklermodus"** (oben rechts)
3. Klicke auf **"Entpackte Erweiterung laden"**
4. Wähle den `Extension/` Ordner aus
5. Die Extension sollte jetzt geladen sein

### 4. Testen

1. Öffne die Web-App im Browser (`http://localhost:5173`)
2. Du siehst den Login-Sperrbildschirm
3. Logge dich mit deinen Appwrite-Credentials ein
4. Nach erfolgreichem Login verschwindet der Sperrbildschirm
5. Öffne die Extension (Klick auf das Extension-Icon)
6. Du solltest "Authed: true" sehen
7. Klicke auf "Test action" um die Backend-Verbindung zu testen

## Projektstruktur

```
eship/
├── Extension/              # Browser-Extension
│   ├── manifest.json
│   ├── background.js
│   ├── content-script.js
│   ├── popup.html
│   └── popup.js
├── Server/                 # React Web App
│   ├── src/
│   │   └── App.jsx        # Login-Sperrbildschirm
│   ├── .env               # Vite Env-Variablen
│   └── backend/            # Node/Express Backend
│       ├── server.js
│       ├── .env           # Backend Env-Variablen
│       └── package.json
└── setup/                  # Setup & Konfiguration
```

## Konfiguration

### Backend `.env` (Server/backend/.env)
```
APPWRITE_ENDPOINT=https://appwrite.webklar.com/v1
APPWRITE_PROJECT_ID=696b82bb0036d2e547ad
APPWRITE_API_KEY=<HIER_DEIN_API_KEY_EINTRAGEN>
PORT=3000
```

### React App `.env` (Server/.env)
```
VITE_APPWRITE_ENDPOINT=https://appwrite.webklar.com/v1
VITE_APPWRITE_PROJECT_ID=696b82bb0036d2e547ad
```

### Extension Backend URL (Extension/background.js)
```javascript
const BACKEND_URL = "http://localhost:3000"; // Anpassen falls nötig
```