Merge pull request 'Add page visit Telegram notifications' (#6) from feature/page-visit-notifications into main

Reviewed-on: #6

app/Http/Controllers/FrontendController.php

@@ -2,7 +2,9 @@
 
 namespace App\Http\Controllers;
 
+use App\Http\Requests\PageVisitRequest;
 use App\Jobs\NotifyTelegramAboutContactMessage;
+use App\Jobs\NotifyTelegramAboutPageVisit;
 use App\Jobs\NotifyTelegramAboutPersonaliaClick;
 use App\Models\Education;
 use App\Models\Personalia;
@@ -58,4 +60,16 @@ class FrontendController extends Controller
 
         return response()->json(['status' => 'success']);
     }
+
+    public function pageVisit(PageVisitRequest $request): JsonResponse
+    {
+        NotifyTelegramAboutPageVisit::dispatch(
+            $request->validated(),
+            $request->ip(),
+            $request->userAgent(),
+            $request->header('Accept-Language')
+        );
+
+        return response()->json(['status' => 'queued']);
+    }
 }

app/Http/Requests/PageVisitRequest.php

@@ -0,0 +1,43 @@
+<?php
+
+namespace App\Http\Requests;
+
+use Illuminate\Foundation\Http\FormRequest;
+
+class PageVisitRequest extends FormRequest
+{
+    public function authorize(): bool
+    {
+        return true;
+    }
+
+    /**
+     * @return array<string, list<string>>
+     */
+    public function rules(): array
+    {
+        return [
+            'visitor_id' => ['required', 'string', 'max:100'],
+            'url' => ['required', 'url', 'max:2048'],
+            'path' => ['nullable', 'string', 'max:2048'],
+            'title' => ['nullable', 'string', 'max:255'],
+            'referrer' => ['nullable', 'string', 'max:2048'],
+            'language' => ['nullable', 'string', 'max:50'],
+            'timezone' => ['nullable', 'string', 'max:100'],
+            'screen' => ['nullable', 'array'],
+            'screen.width' => ['nullable', 'integer', 'min:0', 'max:100000'],
+            'screen.height' => ['nullable', 'integer', 'min:0', 'max:100000'],
+            'viewport' => ['nullable', 'array'],
+            'viewport.width' => ['nullable', 'integer', 'min:0', 'max:100000'],
+            'viewport.height' => ['nullable', 'integer', 'min:0', 'max:100000'],
+            'device_pixel_ratio' => ['nullable', 'numeric', 'min:0', 'max:100'],
+            'color_depth' => ['nullable', 'integer', 'min:0', 'max:1000'],
+            'platform' => ['nullable', 'string', 'max:255'],
+            'vendor' => ['nullable', 'string', 'max:255'],
+            'hardware_concurrency' => ['nullable', 'integer', 'min:0', 'max:1024'],
+            'device_memory' => ['nullable', 'numeric', 'min:0', 'max:1024'],
+            'cookies_enabled' => ['nullable', 'boolean'],
+            'online' => ['nullable', 'boolean'],
+        ];
+    }
+}

app/Jobs/NotifyTelegramAboutContactMessage.php

@@ -2,12 +2,12 @@
 
 namespace App\Jobs;
 
+use App\Services\TelegramNotificationService;
 use Illuminate\Bus\Queueable;
 use Illuminate\Contracts\Queue\ShouldQueue;
 use Illuminate\Foundation\Bus\Dispatchable;
 use Illuminate\Queue\InteractsWithQueue;
 use Illuminate\Queue\SerializesModels;
-use Illuminate\Support\Facades\Http;
 
 class NotifyTelegramAboutContactMessage implements ShouldQueue
 {
@@ -35,30 +35,15 @@ class NotifyTelegramAboutContactMessage implements ShouldQueue
         $this->phone = $phone;
     }
 
-    public function handle(): void
+    public function handle(TelegramNotificationService $telegram): void
     {
-        $email = $this->email ?? '–';
-        $phone = $this->phone ?? '–';
-
-        $text = <<<TEXT
-📩 *Nieuw contactbericht ontvangen*
-
-👤 Naam: *{$this->name}*
-
-💬 Bericht:
-{$this->message}
-📧 Email: {$email}
-📱 Telefoon: {$phone}
-🌐 IP: {$this->ip}
-🧭 User Agent: `{$this->userAgent}`
-
-🕒 Tijdstip: *{now()->format('d-m-Y H:i')}*
-TEXT;
-
-        Http::post('https://api.telegram.org/bot'.config('services.telegram.bot_token').'/sendMessage', [
-            'chat_id' => config('services.telegram.chat_id'),
-            'text' => $text,
-            'parse_mode' => 'Markdown',
-        ]);
+        $telegram->notifyContactMessage(
+            $this->name,
+            $this->message,
+            $this->ip,
+            $this->userAgent,
+            $this->email,
+            $this->phone
+        );
     }
 }

app/Jobs/NotifyTelegramAboutPageVisit.php

@@ -0,0 +1,30 @@
+<?php
+
+namespace App\Jobs;
+
+use App\Services\TelegramNotificationService;
+use Illuminate\Bus\Queueable;
+use Illuminate\Contracts\Queue\ShouldQueue;
+use Illuminate\Foundation\Bus\Dispatchable;
+use Illuminate\Queue\InteractsWithQueue;
+use Illuminate\Queue\SerializesModels;
+
+class NotifyTelegramAboutPageVisit implements ShouldQueue
+{
+    use Dispatchable, InteractsWithQueue, Queueable, SerializesModels;
+
+    /**
+     * @param  array<string, mixed>  $visit
+     */
+    public function __construct(
+        protected array $visit,
+        protected ?string $ip,
+        protected ?string $userAgent,
+        protected ?string $acceptLanguage
+    ) {}
+
+    public function handle(TelegramNotificationService $telegram): void
+    {
+        $telegram->notifyPageVisit($this->visit, $this->ip, $this->userAgent, $this->acceptLanguage);
+    }
+}

app/Jobs/NotifyTelegramAboutPersonaliaClick.php

@@ -3,12 +3,12 @@
 namespace App\Jobs;
 
 use App\Models\Personalia;
+use App\Services\TelegramNotificationService;
 use Illuminate\Bus\Queueable;
 use Illuminate\Contracts\Queue\ShouldQueue;
 use Illuminate\Foundation\Bus\Dispatchable;
 use Illuminate\Queue\InteractsWithQueue;
 use Illuminate\Queue\SerializesModels;
-use Illuminate\Support\Facades\Http;
 
 class NotifyTelegramAboutPersonaliaClick implements ShouldQueue
 {
@@ -27,25 +27,8 @@ class NotifyTelegramAboutPersonaliaClick implements ShouldQueue
         $this->userAgent = $userAgent;
     }
 
-    public function handle(): void
+    public function handle(TelegramNotificationService $telegram): void
     {
-        $ip = $this->ip ?? '–';
-        $userAgent = $this->userAgent ?? '–';
-
-        $message = <<<TEXT
-👤 *Persoonlijke gegevens bekeken*
-
-Naam: {$this->personalia->value}
-IP: {$ip}
-User Agent: `{$userAgent}`
-
-📅 Tijdstip: *{now()->format('d-m-Y H:i')}*
-TEXT;
-
-        Http::post('https://api.telegram.org/bot'.config('services.telegram.bot_token').'/sendMessage', [
-            'chat_id' => config('services.telegram.chat_id'),
-            'text' => $message,
-            'parse_mode' => 'Markdown',
-        ]);
+        $telegram->notifyPersonaliaClick($this->personalia, $this->ip, $this->userAgent);
     }
 }

app/Services/TelegramNotificationService.php

@@ -0,0 +1,146 @@
+<?php
+
+namespace App\Services;
+
+use App\Models\Personalia;
+use Illuminate\Support\Facades\Http;
+
+class TelegramNotificationService
+{
+    public function notifyContactMessage(
+        string $name,
+        string $message,
+        string $ip,
+        string $userAgent,
+        ?string $email = null,
+        ?string $phone = null
+    ): void {
+        $email ??= '-';
+        $phone ??= '-';
+
+        $text = <<<TEXT
+Nieuw contactbericht ontvangen
+
+Naam: {$name}
+Email: {$email}
+Telefoon: {$phone}
+IP: {$ip}
+User Agent: {$userAgent}
+
+Bericht:
+{$message}
+
+Tijdstip: {now()->format('d-m-Y H:i')}
+TEXT;
+
+        $this->send($text);
+    }
+
+    public function notifyPersonaliaClick(Personalia $personalia, ?string $ip, ?string $userAgent): void
+    {
+        $ip ??= '-';
+        $userAgent ??= '-';
+
+        $message = <<<TEXT
+Persoonlijke gegevens bekeken
+
+Naam: {$personalia->value}
+IP: {$ip}
+User Agent: {$userAgent}
+
+Tijdstip: {now()->format('d-m-Y H:i')}
+TEXT;
+
+        $this->send($message);
+    }
+
+    /**
+     * @param  array<string, mixed>  $visit
+     */
+    public function notifyPageVisit(array $visit, ?string $ip, ?string $userAgent, ?string $acceptLanguage): void
+    {
+        $screen = $this->formatDimensions($visit['screen'] ?? null);
+        $viewport = $this->formatDimensions($visit['viewport'] ?? null);
+
+        $message = <<<TEXT
+Pagina bezocht
+
+URL: {$this->value($visit['url'] ?? null)}
+Pad: {$this->value($visit['path'] ?? null)}
+Titel: {$this->value($visit['title'] ?? null)}
+Referrer: {$this->value($visit['referrer'] ?? null)}
+
+Visitor ID: {$this->value($visit['visitor_id'] ?? null)}
+IP: {$this->value($ip)}
+User Agent: {$this->value($userAgent)}
+Accept-Language: {$this->value($acceptLanguage)}
+Browser taal: {$this->value($visit['language'] ?? null)}
+Timezone: {$this->value($visit['timezone'] ?? null)}
+Platform: {$this->value($visit['platform'] ?? null)}
+Vendor: {$this->value($visit['vendor'] ?? null)}
+Scherm: {$screen}
+Viewport: {$viewport}
+DPR: {$this->value($visit['device_pixel_ratio'] ?? null)}
+Color depth: {$this->value($visit['color_depth'] ?? null)}
+CPU cores: {$this->value($visit['hardware_concurrency'] ?? null)}
+Device memory: {$this->value($visit['device_memory'] ?? null)}
+Cookies: {$this->boolean($visit['cookies_enabled'] ?? null)}
+Online: {$this->boolean($visit['online'] ?? null)}
+
+Tijdstip: {now()->format('d-m-Y H:i')}
+TEXT;
+
+        $this->send($message);
+    }
+
+    protected function send(string $text): void
+    {
+        $botToken = config('services.telegram.bot_token');
+        $chatId = config('services.telegram.chat_id');
+
+        if (! is_string($botToken) || $botToken === '' || ! is_string($chatId) || $chatId === '') {
+            return;
+        }
+
+        Http::post("https://api.telegram.org/bot{$botToken}/sendMessage", [
+            'chat_id' => $chatId,
+            'text' => $text,
+        ]);
+    }
+
+    protected function value(mixed $value): string
+    {
+        if (is_bool($value)) {
+            return $this->boolean($value);
+        }
+
+        if (is_scalar($value)) {
+            $value = trim((string) $value);
+
+            return $value !== '' ? $value : '-';
+        }
+
+        return '-';
+    }
+
+    protected function boolean(mixed $value): string
+    {
+        return match ($value) {
+            true => 'ja',
+            false => 'nee',
+            default => '-',
+        };
+    }
+
+    protected function formatDimensions(mixed $dimensions): string
+    {
+        if (! is_array($dimensions)) {
+            return '-';
+        }
+
+        $width = $this->value($dimensions['width'] ?? null);
+        $height = $this->value($dimensions['height'] ?? null);
+
+        return "{$width}x{$height}";
+    }
+}

resources/views/welcome.blade.php

@@ -170,6 +170,62 @@
             });
         </script>
 
+        <script>
+            (() => {
+                const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content');
+
+                if (!csrfToken || !window.fetch) {
+                    return;
+                }
+
+                const visitorKey = 'cv_visitor_id';
+                const createVisitorId = () => window.crypto?.randomUUID?.() ?? `${Date.now()}-${Math.random().toString(36).slice(2)}`;
+                let visitorId = createVisitorId();
+
+                try {
+                    visitorId = window.localStorage.getItem(visitorKey) || visitorId;
+                    window.localStorage.setItem(visitorKey, visitorId);
+                } catch {
+                    // Tracking should never break the page when storage is blocked.
+                }
+
+                window.fetch('{{ route('page-visits.store') }}', {
+                    method: 'POST',
+                    keepalive: true,
+                    headers: {
+                        'Content-Type': 'application/json',
+                        'Accept': 'application/json',
+                        'X-CSRF-TOKEN': csrfToken,
+                    },
+                    body: JSON.stringify({
+                        visitor_id: visitorId,
+                        url: window.location.href,
+                        path: window.location.pathname,
+                        title: document.title,
+                        referrer: document.referrer,
+                        language: navigator.language,
+                        timezone: Intl.DateTimeFormat().resolvedOptions().timeZone,
+                        screen: {
+                            width: window.screen?.width,
+                            height: window.screen?.height,
+                        },
+                        viewport: {
+                            width: window.innerWidth,
+                            height: window.innerHeight,
+                        },
+                        device_pixel_ratio: window.devicePixelRatio,
+                        color_depth: window.screen?.colorDepth,
+                        platform: navigator.platform,
+                        vendor: navigator.vendor,
+                        hardware_concurrency: navigator.hardwareConcurrency,
+                        device_memory: navigator.deviceMemory,
+                        cookies_enabled: navigator.cookieEnabled,
+                        online: navigator.onLine,
+                    }),
+                }).catch(() => {});
+            })();
+        </script>
+
         @stack('scripts')
 
 </body>

routes/web.php

@@ -13,6 +13,7 @@ Route::get('/dashboard', function (): \Illuminate\View\View {
 })->middleware(['auth', 'verified'])->name('dashboard');
 Route::get('/getPersonalia/{personalia}', [FrontendController::class, 'getPersonalia'])->name('personalia');
 Route::post('/contact', [FrontendController::class, 'message'])->name('contact');
+Route::post('/page-visits', [FrontendController::class, 'pageVisit'])->name('page-visits.store');
 
 Route::middleware('auth')->group(function () {
     Route::get('/profile', [ProfileController::class, 'edit'])->name('profile.edit');

tests/Feature/Controllers/FrontendControllerTest.php

@@ -1,6 +1,7 @@
 <?php
 
 use App\Jobs\NotifyTelegramAboutContactMessage;
+use App\Jobs\NotifyTelegramAboutPageVisit;
 use App\Jobs\NotifyTelegramAboutPersonaliaClick;
 use App\Models\Education;
 use App\Models\Personalia;
@@ -99,3 +100,55 @@ test('a contact message requires a name and message', function () {
 
     Queue::assertNotPushed(NotifyTelegramAboutContactMessage::class);
 });
+
+test('a page visit can be submitted and is queued for notification', function () {
+    Queue::fake();
+
+    $this->withHeaders([
+        'User-Agent' => 'Pest Browser',
+        'Accept-Language' => 'nl-NL,nl;q=0.9',
+    ])->postJson(route('page-visits.store'), [
+        'visitor_id' => 'visitor-123',
+        'url' => 'https://cv.robert.ooo/',
+        'path' => '/',
+        'title' => 'CV Roberto',
+        'referrer' => 'https://example.com',
+        'language' => 'nl-NL',
+        'timezone' => 'Europe/Amsterdam',
+        'screen' => [
+            'width' => 1920,
+            'height' => 1080,
+        ],
+        'viewport' => [
+            'width' => 1440,
+            'height' => 900,
+        ],
+        'device_pixel_ratio' => 1,
+        'color_depth' => 24,
+        'platform' => 'Linux x86_64',
+        'vendor' => 'Google Inc.',
+        'hardware_concurrency' => 8,
+        'device_memory' => 8,
+        'cookies_enabled' => true,
+        'online' => true,
+    ])
+        ->assertOk()
+        ->assertJson([
+            'status' => 'queued',
+        ]);
+
+    Queue::assertPushed(NotifyTelegramAboutPageVisit::class);
+});
+
+test('a page visit requires a visitor id and valid url', function () {
+    Queue::fake();
+
+    $this->postJson(route('page-visits.store'), [
+        'visitor_id' => '',
+        'url' => 'not-a-url',
+    ])
+        ->assertUnprocessable()
+        ->assertJsonValidationErrors(['visitor_id', 'url']);
+
+    Queue::assertNotPushed(NotifyTelegramAboutPageVisit::class);
+});

tests/Feature/TelegramNotificationServiceTest.php

@@ -0,0 +1,78 @@
+<?php
+
+use App\Models\Personalia;
+use App\Services\TelegramNotificationService;
+use Illuminate\Support\Facades\Http;
+
+test('telegram service sends a contact message notification', function () {
+    config([
+        'services.telegram.bot_token' => 'telegram-token',
+        'services.telegram.chat_id' => 'telegram-chat',
+    ]);
+
+    Http::fake();
+
+    app(TelegramNotificationService::class)->notifyContactMessage(
+        name: 'Roberto',
+        message: 'Hoi, ik wil graag contact opnemen.',
+        ip: '127.0.0.1',
+        userAgent: 'Pest Browser',
+        email: 'roberto@example.com',
+        phone: '+31612345678'
+    );
+
+    Http::assertSent(fn ($request) => $request->url() === 'https://api.telegram.org/bottelegram-token/sendMessage'
+        && $request['chat_id'] === 'telegram-chat'
+        && str_contains($request['text'], 'Nieuw contactbericht ontvangen')
+        && str_contains($request['text'], 'roberto@example.com'));
+});
+
+test('telegram service sends a personalia click notification', function () {
+    config([
+        'services.telegram.bot_token' => 'telegram-token',
+        'services.telegram.chat_id' => 'telegram-chat',
+    ]);
+
+    Http::fake();
+
+    $personalia = Personalia::factory()->create([
+        'value' => 'roberto@example.com',
+    ]);
+
+    app(TelegramNotificationService::class)->notifyPersonaliaClick($personalia, '127.0.0.1', 'Pest Browser');
+
+    Http::assertSent(fn ($request) => str_contains($request['text'], 'Persoonlijke gegevens bekeken')
+        && str_contains($request['text'], 'roberto@example.com'));
+});
+
+test('telegram service sends a page visit notification', function () {
+    config([
+        'services.telegram.bot_token' => 'telegram-token',
+        'services.telegram.chat_id' => 'telegram-chat',
+    ]);
+
+    Http::fake();
+
+    app(TelegramNotificationService::class)->notifyPageVisit([
+        'visitor_id' => 'visitor-123',
+        'url' => 'https://cv.robert.ooo/',
+        'path' => '/',
+        'title' => 'CV Roberto',
+        'referrer' => 'https://example.com',
+        'language' => 'nl-NL',
+        'timezone' => 'Europe/Amsterdam',
+        'screen' => [
+            'width' => 1920,
+            'height' => 1080,
+        ],
+        'viewport' => [
+            'width' => 1440,
+            'height' => 900,
+        ],
+    ], '127.0.0.1', 'Pest Browser', 'nl-NL,nl;q=0.9');
+
+    Http::assertSent(fn ($request) => str_contains($request['text'], 'Pagina bezocht')
+        && str_contains($request['text'], 'Visitor ID: visitor-123')
+        && str_contains($request['text'], 'Scherm: 1920x1080')
+        && str_contains($request['text'], 'Viewport: 1440x900'));
+});