Add field to display settings image in background

Author: maximehuran

src/Form/Type/Settings/AdminSettingsType.php

@@ -28,26 +28,6 @@ class AdminSettingsType extends AbstractSettingsType implements SettingsTypeInte
      */
     public function buildForm(FormBuilderInterface $builder, array $options): void
     {
-        $this->addWithDefaultCheckbox(
-            $builder,
-            'color',
-            ColorType::class,
-            [
-                'label' => 'monsieurbiz_better_admin.form.color',
-                'help' => 'monsieurbiz_better_admin.form.color_help',
-                'required' => false,
-            ]
-        );
-        $this->addWithDefaultCheckbox(
-            $builder,
-            'circular_icon_color',
-            ColorType::class,
-            [
-                'label' => 'monsieurbiz_better_admin.form.circular_icon_color',
-                'help' => 'monsieurbiz_better_admin.form.circular_icon_color_help',
-                'required' => false,
-            ]
-        );
         $this->addWithDefaultCheckbox(
             $builder,
             'logo',
@@ -90,21 +70,40 @@ public function buildForm(FormBuilderInterface $builder, array $options): void
         );
         $this->addWithDefaultCheckbox(
             $builder,
-            'custom_css',
-            TextareaType::class,
+            'background_image',
+            ImageType::class,
             [
-                'label' => 'monsieurbiz_better_admin.form.custom_css',
-                'help' => 'monsieurbiz_better_admin.form.custom_css_help',
+                'label' => 'monsieurbiz_better_admin.form.background_image',
                 'required' => false,
             ]
         );
         $this->addWithDefaultCheckbox(
             $builder,
-            'background_image_keywords',
-            TextType::class,
+            'color',
+            ColorType::class,
+            [
+                'label' => 'monsieurbiz_better_admin.form.color',
+                'help' => 'monsieurbiz_better_admin.form.color_help',
+                'required' => false,
+            ]
+        );
+        $this->addWithDefaultCheckbox(
+            $builder,
+            'circular_icon_color',
+            ColorType::class,
             [
-                'label' => 'monsieurbiz_better_admin.form.background_image_keywords',
-                'help' => 'monsieurbiz_better_admin.form.background_image_keywords_help',
+                'label' => 'monsieurbiz_better_admin.form.circular_icon_color',
+                'help' => 'monsieurbiz_better_admin.form.circular_icon_color_help',
+                'required' => false,
+            ]
+        );
+        $this->addWithDefaultCheckbox(
+            $builder,
+            'custom_css',
+            TextareaType::class,
+            [
+                'label' => 'monsieurbiz_better_admin.form.custom_css',
+                'help' => 'monsieurbiz_better_admin.form.custom_css_help',
                 'required' => false,
             ]
         );

src/Resources/config/monsieurbiz/settings.yaml

@@ -13,4 +13,3 @@ monsieurbiz_sylius_settings:
                 circular_icon_color: '#ffffff'
                 logo_login_width: '200'
                 logo_sidebar_width: '90'
-                background_image_keywords: 'computer,typing,editor'

src/Resources/config/sylius/images.yaml

@@ -8,3 +8,7 @@ liip_imagine:
             filters:
                 relative_resize:
                     widen: 250
+        admin_login_background:
+            filters:
+                relative_resize:
+                    widen: 1600

src/Resources/translations/messages.en.yaml

@@ -14,8 +14,7 @@ monsieurbiz_better_admin:
         logo_sidebar_help: 'Displayed in sidebar (in dark background)'
         logo_sidebar_width: 'Logo width in sidebar'
         logo_sidebar_width_help: 'Width of the logo in the sidebar in pixels'
-        background_image_keywords: 'Background image keywords in login page'
-        background_image_keywords_help: 'Keywords to search a background image in Unsplash'
+        background_image: 'Background image of the login page'
     settings:
         admin:
             plugin_name: Admin

src/Resources/translations/messages.fr.yaml

@@ -14,8 +14,7 @@ monsieurbiz_better_admin:
         logo_sidebar_help: 'Affiché dans la barre latérale (sur fond sombre)'
         logo_sidebar_width: 'Largeur du logo dans la barre latérale'
         logo_sidebar_width_help: 'Largeur du logo dans la barre latérale en pixels'
-        background_image_keywords: 'Mots-clés de l''image de fond dans la page de connexion'
-        background_image_keywords_help: 'Mots-clés pour rechercher une image de fond dans Unsplash'
+        background_image: 'Image de fond de la page de connexion'
     settings:
         admin:
             plugin_name: Admin

src/Resources/views/SyliusUiBundle/Security/_login.html.twig

@@ -3,6 +3,8 @@
 {% import '@SyliusUi/Macro/messages.html.twig' as messages %}
 
 {% set logo = setting('monsieurbiz_better_admin.admin', 'logo')|default('') %}
+{% set backgroundImage = setting('monsieurbiz_better_admin.admin', 'background_image')|default('') %}
+
 <div class="ui middle aligned center aligned grid">
     <div class="right floated column" style="margin-right: 2%;">
         {{ sonata_block_render_event('sylius.admin.login.before_form', {'form': form}) }}
@@ -35,3 +37,21 @@
         {{ form_end(form, {'render_rest': false}) }}
     </div>
 </div>
+
+<script type="text/javascript">
+    function changeBodyBackground(imgUrl)
+    {
+        let bodyStyle = document.body.style;
+        bodyStyle.backgroundSize = 'cover';
+        bodyStyle.backgroundRepeat = 'no-repeat';
+        bodyStyle.backgroundImage = "url('" + imgUrl + "')";
+    }
+
+    document.addEventListener('DOMContentLoaded', function() {
+        {% if backgroundImage is empty %}
+        changeBodyBackground('https://picsum.photos/1600/900?random');
+        {% else %}
+        changeBodyBackground('{{ asset(backgroundImage) | imagine_filter('admin_login_background') | escape('js') }}');
+        {% endif %}
+    });
+</script>