small cleanup to error messages in general while focusing on #1601.

www/common.inc

@@ -149,7 +149,7 @@ if (!$privateInstall) {
 
 // constants
 define('VER_WEBPAGETEST', '21.07');   // webpagetest version
-define('VER_CSS', 153.3);                // version of the sitewide css file
+define('VER_CSS', 153.4);                // version of the sitewide css file
 define('VER_JS', 40);                 // version of the sitewide javascript file
 define('VER_JS_TEST', 47);            // version of the javascript specific to the test pages
 define('VER_JS_RUNNING', 1);          // version of the javascript specific to the test running status page

www/pagestyle2.css

@@ -1779,6 +1779,54 @@ body.compact .box {
     }
 }
 
+/* error page styles */
+.testerror {
+    text-align: left;
+    max-width: 34rem;
+    margin: 0 auto;
+    padding: 3rem;
+}
+.testerror h1 {
+    color: #dc9739;
+    text-align: left;
+    margin: 1em 0;
+}
+.testerror h1 em {
+    display: block;
+    font-style: normal;
+    font-weight: 500;
+    font-size: .8em;
+    color: #333;
+    margin: .3em 0 .5em;
+    border-bottom: 1px solid #ddd;
+    padding-bottom: 1em;
+}
+.testerror_login {
+    margin: 0 auto;
+    justify-content: center;
+}
+.testerror_loginperks {
+    list-style: disc;
+    padding: 0 0 0 3em;
+}
+.testerror p,
+.testerror_loginperks {
+    line-height: 1.4;
+    margin: 0 0 1.5em;
+}
+.testerror_loginperks li {
+    margin-bottom: 0.5em;
+}
+.testerror_login {
+    margin: 3rem 0 0;
+    justify-content: center;
+    display: flex;
+    gap: 2em;
+    background: #f6f6f6;
+    padding: 1.5em;
+    border-radius: 8px;
+}
+
 /* compare page styles */
 .video_runlabel {
     text-align: left;
@@ -1850,14 +1898,15 @@ body.compact #header_container {
 .test_results-content {
     padding: 1em 1.5em;
 }
-.test_menu + .test_results-content {
+.test_menu+.test_results-content {
     padding-top: 0;
 }
 @media (min-width: 50em) {
     .test_results-content {
         padding: 1em 3em 0;
     }
-    .test_menu + .test_results-content {
+
+    .test_menu+.test_results-content {
         padding-top: 0;
     }
 }

www/runtest.php

@@ -61,7 +61,7 @@ function DealWithMagicQuotes(&$arr) {
     require_once('common.inc');
     require_once('./ec2/ec2.inc.php');
     require_once(__DIR__ . '/include/CrUX.php');
-    require_once(__DIR__ . '/ratelimit/check_monthly_rate_limit.php');
+    require_once(__DIR__ . '/ratelimit/check_monthly_rate_limit.php');
     set_time_limit(300);
 
     $redirect_cache = array();
@@ -2881,10 +2881,10 @@ function ErrorPage($error) {
                 <?php
                 include 'header.inc';
               ?>
-              <h1>There was an error with the test</h1>
-                        <div class="box">
-
-              <?php
+
+              <div class="testerror box">
+                <h1>Oops! <em>There was a problem with the test.</em></h1>
+                <?php
                 echo $error;
                 ?>
           </div>
@@ -3068,6 +3068,25 @@ function ReportAnalytics(&$test, $testId)
   }
 }
 
+function loggedOutLoginForm(){
+  $ret = '<ul class="testerror_login"><li><a href="/saml/login.php">Login</a></li>';
+  $reg .= GetSetting('saml_register');
+  if ($reg) {
+      $ret .= "<li><a class='pill' href='$reg'>Sign-up</a></li>";
+  }
+  $ret .= "</ul>";
+  return $ret;
+}
+
+function loggedInPerks(){
+  $msg = '<ul class="testerror_loginperks">';
+  $msg .= '<li>Access to 13 months of saved tests (<em>including this one!</em>), making it easier to compare tests and analyze trends.</li>';
+  $msg .= '<li>Ability to contribute to the <a href="https://forums.webpagetest.org/">WebPageTest Forum</a>.</li>';
+  $msg .= '<li>Access to upcoming betas and new features that will enhance your WebPageTest experience.</li>';
+  $msg .= '</ul>';
+  return $msg;
+}
+
 function CheckRateLimit($test, &$error) {
   global $USER_EMAIL;
   global $supportsSaml;
@@ -3087,14 +3106,16 @@ function CheckRateLimit($test, &$error) {
   if (isset($USER_EMAIL) && strlen($USER_EMAIL)) {
     return true;
   }
-
-  $cmrl = new CheckMonthlyRateLimit($test['ip']);
-  $passesMonthly = $cmrl->check();
-
-  if(!$passesMonthly) {
-    $error = "The test has been blocked for exceeding the volume of testing allowed by anonymous users from your IP address.<br>Please log in with a registered account.";
-    return false;
-  }
+
+  $cmrl = new CheckMonthlyRateLimit($test['ip']);
+  $passesMonthly = $cmrl->check();
+
+  if(!$passesMonthly) {
+    $error = '<p>You\'ve reached the limit for logged-out tests this month, but don\'t worry! You can keep testing once you log in, which will give you access to other nice features like:</p>';
+    $error .= loggedInPerks();
+    $error .= loggedOutLoginForm();
+    return false;
+  }
 
   // Enforce per-IP rate limits for testing
   $limit = GetSetting('rate_limit_anon', null);
@@ -3113,11 +3134,15 @@ function CheckRateLimit($test, &$error) {
     } else {
       $register = GetSetting('saml_register');
       $apiUrl = GetSetting('api_url');
+      $error = '<p>You\'ve reached the limit for logged-out tests per hour, but don\'t worry! You can keep testing once you log in, which will give you access to other nice features like:</p>';
+
+      $error .= loggedInPerks();
+
+
       if ($supportsSaml && $register && $apiUrl) {
-        $error = "The test has been blocked for exceeding the volume of testing allowed by anonymous users from your IP address.<br>Please <a href='/saml/login.php'>log in</a> with a <a href='$register'>registered account</a> or wait an hour before retrying.<br>If you need to run tests programmatically there is also the <a href='$apiUrl'>WebPageTest API</a>.";
-      } else {
-        $error = "The test has been blocked for exceeding the volume of testing allowed by anonymous users from your IP address.<br>Please log in with a registered account or wait an hour before retrying.";
+        $error .= "<p>And also, if you need to run tests programmatically you might be interested in the <a href='$apiUrl'>WebPageTest API</a></p>";
       }
+      $error .= loggedOutLoginForm();
       $ret = false;
     }
   }