Update OTP image generation to 3 digits, no caption, random labels and fonts, big numbers

backend/api/request-otp.php

@@ -97,8 +97,8 @@ if (!$rateLimit->checkIp($clientIp, 'request-otp', 30, 60)) {
     exit;
 }
 
-// Generate 4-digit OTP (cryptographically secure)
+// Generate 3-digit OTP (cryptographically secure)
-$otpCode = str_pad((string) random_int(0, 9999), 4, '0', STR_PAD_LEFT);
+$otpCode = str_pad((string) random_int(0, 999), 3, '0', STR_PAD_LEFT);
 
 // Determine delivery method
 $method = 'flash_call'; // Default fallback
@@ -180,13 +180,13 @@ try {
         }
 
         // Message caption / body
-        $messageText = "رمز التحقق الخاص بك هو: " . $otpCode . "\nيرجى إدخاله في التطبيق لإكمال العملية.";
+        $messageText = "رمز التحقق الخاص بك هو: " . $otpCode;
 
         $sent = false;
         try {
             if ($imagePngBase64) {
-                // Send premium image message with caption
+                // Send premium image message with NO caption
-                $sent = WhatsAppClient::sendMessage($phone, "رمز التحقق الخاص بك هو: " . $otpCode, $imagePngBase64);
+                $sent = WhatsAppClient::sendMessage($phone, "", $imagePngBase64);
             } else {
                 // Fallback to text message
                 $sent = WhatsAppClient::sendMessage($phone, $messageText);

backend/includes/WhatsApp.php

@@ -115,34 +115,66 @@ class WhatsAppClient {
         // Colors
         $bgColor = imagecolorallocate($im, 240, 244, 248); // Soft grey-blue
         $textColor = imagecolorallocate($im, 33, 37, 41);   // Dark charcoal
-        $accentColor = imagecolorallocate($im, 13, 110, 253); // Premium blue
         $noiseColor = imagecolorallocate($im, 200, 210, 220); // Light noise
 
         // Fill background
         imagefill($im, 0, 0, $bgColor);
 
-        // Draw some obfuscation lines / background noise
+        // --- 1. Draw Big OTP Text by Scaling ---
+        // Create a small image for the OTP
+        $otpWidth = 45; // 3 chars * 15px width roughly
+        $otpHeight = 20;
+        $otpIm = imagecreatetruecolor($otpWidth, $otpHeight);
+        $otpBg = imagecolorallocate($otpIm, 240, 244, 248);
+        $otpFg = imagecolorallocate($otpIm, 13, 110, 253);
+        imagefill($otpIm, 0, 0, $otpBg);
+        
+        $chars = str_split($otp);
+        $x = 2;
+        foreach ($chars as $char) {
+            $y = random_int(0, 5); // Slight vertical jitter
+            imagestring($otpIm, 5, $x, $y, $char, $otpFg);
+            $x += 14; // Font 5 width is approx 9px, leaving some space
+        }
+
+        // Scale it up by 3x onto the main image
+        $scale = 3;
+        $dstWidth = $otpWidth * $scale;
+        $dstHeight = $otpHeight * $scale;
+        
+        // Place it randomly in the bottom right-ish area
+        $dstX = random_int(80, 150);
+        $dstY = random_int(30, 40);
+        
+        imagecopyresampled($im, $otpIm, $dstX, $dstY, 0, 0, $dstWidth, $dstHeight, $otpWidth, $otpHeight);
+        imagedestroy($otpIm);
+
+        // --- 2. Add Background Noise (Lines & Dots) ---
+        // Drawing noise *after* the OTP helps to obstruct it slightly from OCR
         for ($i = 0; $i < 6; $i++) {
             imageline($im, random_int(0, 300), random_int(0, 100), random_int(0, 300), random_int(0, 100), $noiseColor);
         }
-
-        // Draw some random dots
         for ($i = 0; $i < 100; $i++) {
             imagesetpixel($im, random_int(0, 300), random_int(0, 100), $noiseColor);
         }
 
-        // Header text (smaller)
+        // --- 3. Draw Random Header Label with Variable Font ---
-        imagestring($im, 3, 20, 15, "Verification Code:", $textColor);
+        $labels = [
+            'Verification Code:',
+            'Your OTP:',
+            'Security Key:',
+            'Access Number:',
+            'Auth Code:',
+            'Login Pin:',
+            'Secret Key:',
+            'Your Number:',
+            'One Time Pass:',
+            'Code:'
+        ];
+        $label = $labels[array_rand($labels)];
+        $labelFont = random_int(3, 5); // Random built-in font (3, 4, or 5)
         
-        // Large OTP text (using larger font index 5 or custom size if possible)
+        imagestring($im, $labelFont, 20, 10, $label, $textColor);
-        // Split OTP and draw characters with varying Y positions and styling to make OCR harder
-        $chars = str_split($otp);
-        $x = 90;
-        foreach ($chars as $char) {
-            $y = random_int(35, 45);
-            imagestring($im, 5, $x, $y, $char, $accentColor);
-            $x += 30;
-        }
 
         // Draw a bounding border
         imagerectangle($im, 0, 0, 299, 99, $noiseColor);