MDL-88255 Authentication: Fix login page instruction and image format

Improve the styling that controls the image display to better display the image.
Switch from an embedded watermark in the image, to one using the css
::after pseudo-element so the watermark displays correctly on all
screen resolutions and can be translated.

Make the width of the instructions container wider for better
display of default and custom instructions.

public/theme/boost/lang/en/theme_boost.php

@@ -25,6 +25,7 @@
 defined('MOODLE_INTERNAL') || die();
 
 $string['advancedsettings'] = 'Advanced settings';
+$string['aigeneratedimage'] = 'AI generated image';
 $string['backgroundimage'] = 'Background image';
 $string['backgroundimage_desc'] = 'The image to display as a background of the site. The background image you upload here will override the background image in your theme preset files.';
 $string['brandcolor'] = 'Brand colour';

public/theme/boost/lib.php

@@ -58,19 +58,36 @@ function theme_boost_get_extra_scss($theme) {
     // Sets the login background image.
     $loginbackgroundimageurl = $theme->setting_file_url('loginbackgroundimage', 'loginbackgroundimage');
     $backgroundposition = '';
-    if (empty($loginbackgroundimageurl)) {
+    $isdefaultloginimage = empty($loginbackgroundimageurl);
+    if ($isdefaultloginimage) {
         // Use the default login background image.
         $loginbackgroundimageurl = $theme->image_url(
             'login_background',
             'theme',
         );
-        // Set the default background position to ensure the watermark is visible.
-        $backgroundposition = 'background-position: bottom right;';
+        // Set the default background position to center.
+        $backgroundposition = 'background-position: center;';
     }
     $content .= 'body.pagelayout-login #page .login-layout-left { ';
-    $content .= "background-image: url('$loginbackgroundimageurl'); background-size: cover; {$backgroundposition}";
+    $content .= "background-image: url('$loginbackgroundimageurl'); ";
+    $content .= "background-size: cover; {$backgroundposition} position: relative;";
     $content .= ' }';
 
+    // Add a watermark to indicate the image is AI generated, but only for the default image.
+    if ($isdefaultloginimage) {
+        $content .= 'body.pagelayout-login #page .login-layout-left::after {';
+        // Escape the label for use in a CSS string value: collapse newlines (which would break the CSS string)
+        // and escape single quotes and backslashes via addcslashes.
+        $ailabel = preg_replace('/[\r\n]+/', ' ', get_string('aigeneratedimage', 'theme_boost'));
+        $content .= " content: '" . addcslashes($ailabel, "'\\") . "';";
+        $content .= ' position: absolute; bottom: 1rem; right: 1rem;';
+        $content .= ' color: $white;';
+        $content .= ' font-size: 0.8rem;';
+        $content .= ' text-shadow: 0 1px 2px $black;';
+        $content .= ' pointer-events: none;';
+        $content .= ' }';
+    }
+
     // Always return the background image with the scss when we have it.
     return !empty($theme->settings->scss) ? "{$theme->settings->scss}  \n  {$content}" : $content;
 }

public/theme/boost/scss/moodle/login.scss

@@ -1,7 +1,7 @@
 $login-layout-left-bg: $primary !default;
 $login-layout-panel-padding: 3rem !default;
 $login-layout-content-width: 576px !default;
-$login-layout-copy-width: 360px !default;
+$login-layout-copy-width: 450px !default;
 $login-input-bg: $gray-100 !default;
 
 .pagelayout-login {
@@ -34,6 +34,7 @@ $login-input-bg: $gray-100 !default;
 .login-layout-left-content {
     max-width: $login-layout-copy-width;
     text-align: center;
+    text-shadow: 1px 1px 3px $black;
 }
 
 .login-layout-stats {

public/theme/boost/style/moodle.css

@@ -35599,8 +35599,9 @@ textarea[data-auto-rows] {
 }
 
 .login-layout-left-content {
-  max-width: 360px;
+  max-width: 450px;
   text-align: center;
+  text-shadow: 1px 1px 3px #000000;
 }
 
 .login-layout-stats {

public/theme/classic/lang/en/theme_classic.php

@@ -26,6 +26,7 @@
 defined('MOODLE_INTERNAL') || die();
 
 // Raw SCSS setting.
+$string['aigeneratedimage'] = 'AI generated image';
 $string['choosereadme'] = 'Classic is a highly-customisable theme, based on Boost, with an alternative navigation layout. This theme is intended to be used directly, or as a parent theme when creating or updating custom themes to utilise Bootstrap 4.';
 $string['configtitle'] = 'Classic';
 $string['navbardark'] = 'Use a dark style navbar';

public/theme/classic/lib.php

@@ -109,19 +109,36 @@ function theme_classic_get_extra_scss($theme) {
     // Sets the login background image.
     $loginbackgroundimageurl = $theme->setting_file_url('loginbackgroundimage', 'loginbackgroundimage');
     $backgroundposition = '';
-    if (empty($loginbackgroundimageurl)) {
+    $isdefaultloginimage = empty($loginbackgroundimageurl);
+    if ($isdefaultloginimage) {
         // Use the default login background image.
         $loginbackgroundimageurl = $theme->image_url(
             'login_background',
             'theme',
         );
-        // Set the default background position to ensure the watermark is visible.
-        $backgroundposition = 'background-position: bottom right;';
+        // Set the default background position to center.
+        $backgroundposition = 'background-position: center;';
     }
     $content .= 'body.pagelayout-login #page .login-layout-left { ';
-    $content .= "background-image: url('$loginbackgroundimageurl'); background-size: cover; {$backgroundposition}";
+    $content .= "background-image: url('$loginbackgroundimageurl'); ";
+    $content .= "background-size: cover; {$backgroundposition} position: relative;";
     $content .= ' }';
 
+    // Add a watermark to indicate the image is AI generated, but only for the default image.
+    if ($isdefaultloginimage) {
+        $content .= 'body.pagelayout-login #page .login-layout-left::after {';
+        // Escape the label for use in a CSS string value: collapse newlines (which would break
+        // the CSS string) and escape single quotes and backslashes via addcslashes.
+        $ailabel = preg_replace('/[\r\n]+/', ' ', get_string('aigeneratedimage', 'theme_classic'));
+        $content .= " content: '" . addcslashes($ailabel, "'\\") . "';";
+        $content .= ' position: absolute; bottom: 1rem; right: 1rem;';
+        $content .= ' color: $white;';
+        $content .= ' font-size: 0.8rem;';
+        $content .= ' text-shadow: 0 1px 2px $black;';
+        $content .= ' pointer-events: none;';
+        $content .= ' }';
+    }
+
     if (!empty($theme->settings->navbardark)) {
         $content .= file_get_contents($CFG->dirroot .
             '/theme/classic/scss/classic/navbar-dark.scss');

public/theme/classic/style/moodle.css

@@ -35599,8 +35599,9 @@ textarea[data-auto-rows] {
 }
 
 .login-layout-left-content {
-  max-width: 360px;
+  max-width: 450px;
   text-align: center;
+  text-shadow: 1px 1px 3px #000;
 }
 
 .login-layout-stats {