# Contact Form API Kullanım Kılavuzu

## Yapılandırma

### 1. Environment Variables (.env dosyası)

`.env` dosyanıza aşağıdaki satırları ekleyin ve kendi bilgilerinizle güncelleyin:

```env
# Backend Credentials for Contact Form
BACKEND_EMAIL='your-admin-email@example.com'
BACKEND_PASSWORD='your-admin-password'
```

### 2. Backend API Endpoint'leri

Contact form sistemi aşağıdaki backend endpoint'lerini kullanır:

- **Login:** `http://127.0.0.1:8000/api/v1/auth/jwt/create/`
- **Contact Create:** `http://127.0.0.1:8000/api/v1/contact/create/`

## Nasıl Çalışır?

### Server-Side Flow (Nuxt Server API)

1. Kullanıcı formu doldurur ve gönderir
2. Frontend `/api/contact/post.create` endpoint'ine POST request gönderir
3. Nuxt server API:
   - `.env` dosyasından admin credentials'ları alır
   - Backend'e login olur ve JWT token alır
   - Token ile contact form verisini backend'e gönderir
4. Backend'den gelen response frontend'e iletilir

### Güvenlik

- **Admin credentials** sadece server-side'da saklanır (`.env` dosyası)
- Client-side'da hiçbir zaman admin şifresi görünmez
- Her form gönderiminde otomatik login yapılır
- JWT token sadece server-side'da kullanılır

## Form Alanları

Contact form aşağıdaki zorunlu alanları içerir:

```typescript
{
  name: string,      // İsim
  email: string,     // E-posta
  ip: string,        // IP Adresi (server-side otomatik eklenir)
  subject: string,   // Konu
  message: string    // Mesaj
}
```

**Not:** IP adresi kullanıcıdan alınmaz, server-side'da otomatik olarak tespit edilir ve backend'e gönderilir.

## Frontend Kullanımı

Form zaten `app/pages/index.vue` sayfasında entegre edilmiştir. Kullanıcı:

1. Formu doldurur
2. Turnstile captcha'yı tamamlar
3. "Send Message" butonuna tıklar
4. Başarılı/hatalı mesaj görür

## API Response

### Başarılı Response:
```json
{
  "success": true,
  "data": { /* backend response */ },
  "message": "Mesajınız başarıyla gönderildi"
}
```

### Hata Response:
```json
{
  "statusCode": 400,
  "statusMessage": "Tüm alanlar zorunludur: name, email, subject, message"
}
```

## Test Etme

1. Sunucuyu başlatın: `npm run dev`
2. Anasayfaya gidin: `http://localhost:3000`
3. Contact bölümüne scroll edin
4. Formu doldurun ve gönderin

## Hata Ayıklama

Konsol loglarını kontrol edin:
```bash
# Server-side logs
Terminal'de Nuxt server logları

# Client-side logs
Browser Console
```

## Önemli Notlar

- ⚠️ `.env` dosyasını asla Git'e commit etmeyin
- ✅ Production'da gerçek admin credentials kullanın
- ✅ Backend'inizde contact endpoint'inin aktif olduğundan emin olun
- ✅ Turnstile Cloudflare doğrulaması aktif