[Login] Add Login-cover page (kevinpapst#143)

docs/layout.md

@@ -30,6 +30,19 @@ The `security.html.twig` file for login, register ... can be used with:
 {% extends '@Tabler/security.html.twig' %}
 ```
 
+See example at [https://preview.tabler.io/sign-in.html](https://preview.tabler.io/sign-in.html)
+
+**For your security screens (with huge cover image)**
+
+The `security-cover.html.twig` file (for login, register, ...) can be used with:   
+```
+{% extends '@Tabler/security-cover.html.twig' %}
+```
+
+The cover image is configurable at `tabler.options.security_cover_url` or via `ConextHelper::setSecurityCoverUrl()`.
+
+See example at [https://preview.tabler.io/sign-in-cover.html](https://preview.tabler.io/sign-in-cover.html)
+
 **For your error pages**
 
 The `error.html.twig` for all of your [error pages](error_pages.md):   

src/DependencyInjection/Configuration.php

@@ -152,6 +152,9 @@ private function getOptionsConfig(): NodeDefinition
                 ->scalarNode('logo_url')
                     ->defaultNull()
                 ->end()
+                ->scalarNode('security_cover_url')
+                    ->defaultValue('https://placehold.co/1000')
+                ->end()
             ->end()
         ->end();
 

src/Helper/ContextHelper.php

@@ -101,6 +101,16 @@ public function setIsBoxedLayout(bool $boxed): void
         $this->setOption('boxed_layout', $boxed);
     }
 
+    public function getSecurityCoverUrl(): string
+    {
+        return (string) $this->getOption('security_cover_url');
+    }
+
+    public function setSecurityCoverUrl(string $url): void
+    {
+        $this->setOption('security_cover_url', $url);
+    }
+
     public function getOptions(): array
     {
         return $this->getArrayCopy();

templates/security-cover.html.twig

@@ -0,0 +1,20 @@
+{% extends '@Tabler/security.html.twig' %}
+
+{% block body_login_border %}{% endblock %}
+{% block page_classes %}row g-0 flex-fill{% endblock %}
+{% block container_before %}
+<div class="col-12 col-lg-6 col-xl-4 {% block login_border %}border-top-wide border-primary{% endblock %} d-flex flex-column justify-content-center">
+    {% endblock %}
+
+    {% block container_classes %}container container-tight my-5 px-lg-5{% endblock %}
+    {% block card_classes %}{% endblock %}
+
+    {% block container_after %}
+</div>
+
+<div class="col-12 col-lg-6 col-xl-8 d-none d-lg-block">
+    {% block before_cover %}{% endblock %}
+    <div class="{% block cover_classes %}bg-cover h-100 min-vh-100{% endblock %}" style="{% block cover_style %}background-image: url({% block cover_url %}{{ tabler_bundle.getSecurityCoverUrl() }}{% endblock %}){% endblock %}"></div>
+    {% block after_cover %}{% endblock %}
+</div>
+{% endblock %}

templates/security.html.twig

@@ -13,15 +13,17 @@
         {% endif %}
     {% endblock %}
 </head>
-<body{% block body_start %}{% endblock %} class="antialiased border-top-wide border-primary d-flex flex-column {% block body_class %}{% endblock %}">
+<body{% block body_start %}{% endblock %} class="antialiased {% block body_login_border %}border-top-wide border-primary{% endblock %} d-flex flex-column {% block body_class %}{% endblock %}">
 {% block after_body_start %}{% endblock %}
-<div class="page page-center">
-    <div class="container-tight py-4">
+{% block page_before %}{% endblock %}
+<div class="{% block page_classes %}page page-center{% endblock %}">
+    {% block container_before %}{% endblock %}
+    <div class="{% block container_classes %}container-tight py-4{% endblock %}">
         <div class="text-center mb-4">
             <h1>{% block logo_login %}Tabler{% endblock %}</h1>
         </div>
 
-        <div class="card card-md">
+        <div class="{% block card_classes %}card card-md{% endblock %}">
             {% block login_box %}
             <div class="card-body">
                 <h2 class="card-title text-center mb-4">{% block login_box_msg %}{% endblock %}</h2>
@@ -71,6 +73,7 @@
                 {% endblock %}
             </div>
             {% endblock %}
+
             {% block login_social_auth %}
             <div class="hr-text">{{ 'or'|trans({}, 'TablerBundle') }}</div>
             <div class="card-body">
@@ -102,6 +105,7 @@
             {% endblock %}
         {% endblock %}
     </div>
+    {% block container_after %}{% endblock %}
 </div>
 
 {% block javascripts %}

tests/DependencyInjection/ConfigurationTest.php

@@ -58,6 +58,7 @@ protected function getDefaultConfig()
                     'user_menu_condensed' => false,
                     'logo_url' => null,
                     'navbar_overlap' => false,
+                    'security_cover_url' => 'https://placehold.co/1000',
                 ],
                 'knp_menu' => [
                     'enable' => false,

tests/Helper/ContextHelperTest.php

@@ -19,19 +19,27 @@ class ContextHelperTest extends TestCase
 {
     public function testOptions()
     {
-        $context = new ContextHelper([
+        $input = [
             'foo' => 'bar',
-        ]);
+            'security_cover_url' => 'https://placehold.co/1000',
+        ];
+
+        $context = new ContextHelper($input);
 
         $this->assertFalse($context->hasOption('test'));
         $this->assertNull($context->getOption('test'));
 
         $this->assertTrue($context->hasOption('foo'));
         $this->assertEquals('bar', $context->getOption('foo'));
-        $this->assertEquals(['foo' => 'bar'], $context->getOptions());
+        $this->assertEquals($input, $context->getOptions());
 
         $context->setOption('test', 'bla');
         $this->assertTrue($context->hasOption('test'));
         $this->assertEquals('bla', $context->getOption('test'));
+
+        $this->assertEquals('https://placehold.co/1000', $context->getSecurityCoverUrl());
+        $this->assertEquals('https://placehold.co/1000', $context->getOption('security_cover_url'));
+        $context->setSecurityCoverUrl('https://placehold.co/1234');
+        $this->assertEquals('https://placehold.co/1234', $context->getSecurityCoverUrl());
     }
 }