Add Admin Panel login page

src/Sylius/Bundle/AdminBundle/Resources/assets/entrypoint.js

@@ -15,3 +15,4 @@ import './scripts/choices';
 import 'bootstrap';
 
 import './images/sylius-logo.svg';
+import './images/sylius-logo-dark-text.png';

src/Sylius/Bundle/AdminBundle/Resources/assets/styles/_navbar.scss

@@ -11,4 +11,8 @@
     &.navbar-nav {
         gap: 0.5rem;
     }
+
+    &.navbar-brand-image {
+        height: 4rem;
+    }
 }

src/Sylius/Bundle/AdminBundle/Resources/assets/styles/main.scss

@@ -8,6 +8,7 @@
  */
 
 $assets-base: $rootDir + "/node_modules/@tabler/core/dist";
+$primary: #1ABB9C;
 
 @import "choices.js/src/styles/choices.scss";
 @import "@tabler/core/src/scss/tabler.scss";

src/Sylius/Bundle/AdminBundle/Resources/config/app/template_events.yaml

@@ -35,3 +35,25 @@ sylius_ui:
                     template: '@SyliusAdmin/Shared/Crud/Common/Sidebar/_userDropdown.html.twig'
                 menu:
                     template: '@SyliusAdmin/Shared/Crud/Common/Sidebar/_menu.html.twig'
+        sylius.admin.security.login:
+            blocks:
+                logo:
+                    template: '@SyliusAdmin/Security/Login/_logo.html.twig'
+                content:
+                    template: '@SyliusAdmin/Security/Login/_content.html.twig'
+        sylius.admin.security.login.content:
+            blocks:
+                header:
+                    template: '@SyliusAdmin/Security/Login/Content/_header.html.twig'
+                form:
+                    template: '@SyliusAdmin/Security/Login/Content/_form.html.twig'
+        sylius.admin.security.login.content.form:
+            blocks:
+                username_field:
+                    template: '@SyliusAdmin/Security/Login/Content/Form/_usernameField.html.twig'
+                password_field:
+                    template: '@SyliusAdmin/Security/Login/Content/Form/_passwordField.html.twig'
+                remember_me_field:
+                    template: '@SyliusAdmin/Security/Login/Content/Form/_rememberMeField.html.twig'
+                submit_button:
+                    template: '@SyliusAdmin/Security/Login/Content/Form/_submitButton.html.twig'

src/Sylius/Bundle/AdminBundle/Resources/views/Security/Login/Content/Form/_passwordField.html.twig

@@ -0,0 +1 @@
+{{ form_row(form._password) }}

src/Sylius/Bundle/AdminBundle/Resources/views/Security/Login/Content/Form/_rememberMeField.html.twig

@@ -0,0 +1 @@
+{{ form_row(form._remember_me) }}

src/Sylius/Bundle/AdminBundle/Resources/views/Security/Login/Content/Form/_submitButton.html.twig

@@ -0,0 +1,3 @@
+{% import '@SyliusAdmin/Shared/Helper/button.html.twig' as _button %}
+
+{{ _button.primary({ text: 'sylius.ui.login'|trans, type: 'submit', class: 'btn btn-primary w-100' }) }}

src/Sylius/Bundle/AdminBundle/Resources/views/Security/Login/Content/Form/_usernameField.html.twig

@@ -0,0 +1 @@
+{{ form_row(form._username, {'value': last_username|default('')}) }}

src/Sylius/Bundle/AdminBundle/Resources/views/Security/Login/Content/_form.html.twig

@@ -0,0 +1,7 @@
+{% form_theme form 'bootstrap_5_layout.html.twig' %}
+{% set event_name = _context.event_prefix ~ '.form' %}
+
+{{ form_start(form, {'action': path('sylius_admin_login_check'), 'attr': {'class': 'ui large loadable form', 'novalidate': 'novalidate'}}) }}
+    {{ sylius_template_event(event_name, _context|merge({ event_prefix: event_name })) }}
+    <input type="hidden" name="_csrf_admin_security_token" value="{{ csrf_token('admin_authenticate') }}">
+{{ form_end(form, {'render_rest': false}) }}

src/Sylius/Bundle/AdminBundle/Resources/views/Security/Login/Content/_header.html.twig

@@ -0,0 +1 @@
+<h2 class="h2 text-center mb-4">{{ 'sylius.ui.login_to_your_account'|trans }}</h2>

src/Sylius/Bundle/AdminBundle/Resources/views/Security/Login/_content.html.twig

@@ -0,0 +1,7 @@
+{% set event_name = _context.event_prefix ~ '.content' %}
+
+<div class="card card-md">
+    <div class="card-body">
+        {{ sylius_template_event(event_name, _context|merge({ event_prefix: event_name })) }}
+    </div>
+</div>

src/Sylius/Bundle/AdminBundle/Resources/views/Security/Login/_logo.html.twig

@@ -0,0 +1,3 @@
+<div class="text-center mb-4">
+    <img src="{{ asset('build/admin/images/sylius-logo-dark-text.png', 'admin') }}" alt="Sylius" class="sylius navbar-brand-image">
+</div>

src/Sylius/Bundle/AdminBundle/Resources/views/Security/login.html.twig

@@ -1,15 +1,15 @@
-{% extends '@SyliusUi/Layout/centered.html.twig' %}
+{% extends '@SyliusAdmin/Shared/Layout/base.html.twig' %}
 
-{% block title %}Sylius | {{ 'sylius.ui.administration_panel_login'|trans }}{% endblock %}
+{% set event_name = 'sylius.admin.security.login' %}
 
-{% block stylesheets %}
-    {{ sylius_template_event('sylius.admin.layout.stylesheets') }}
-{% endblock %}
+{% block title %}Sylius | {{ 'sylius.ui.administration_panel_login'|trans }}{% endblock %}
 
-{% block content %}
-    {{ sylius_template_event('sylius.admin.login.content', _context) }}
-{% endblock %}
+{% block body_class %}d-flex flex-column{% endblock %}
 
-{% block javascripts %}
-    {{ sylius_template_event('sylius.admin.layout.javascripts') }}
+{% block body %}
+    <div class="page page-center">
+        <div class="container container-tight py-4">
+            {{ sylius_template_event(event_name, { event_prefix: event_name }|merge(_context)) }}
+        </div>
+    </div>
 {% endblock %}

src/Sylius/Bundle/AdminBundle/Resources/views/Shared/Layout/base.html.twig

@@ -11,7 +11,7 @@
     {{ encore_entry_link_tags('admin-entry', null, 'admin') }}
     {% block stylesheets %}{% endblock %}
 </head>
-<body>
+<body class="{% block body_class %}{% endblock %}">
 <div class="page">
     {% block body %}{% endblock %}
 </div>

src/Sylius/Bundle/UiBundle/Resources/translations/messages.en.yml

@@ -447,6 +447,7 @@ sylius:
         login: 'Login'
         login_button: 'Login'
         login_sylius_store: 'Login <small>Sylius store</small>'
+        login_to_your_account: 'Login to your account'
         logout: 'Logout'
         look_and_feel: 'Look & feel'
         lowest_price_before_discount: 'Lowest price before discount'