Next major version 2 with PHP 8.1, Symfony 6, Tabler UI, 2FA ... (#2902)

templates/security/2fa.html.twig

@@ -0,0 +1,56 @@
+{% extends 'security/unlock.html.twig' %}
+
+{% block login_box_msg %}{{ 'profile.2fa'|trans({'%provider%': twoFactorProvider }) }}{% endblock %}
+{% block unlock_title %}{{ 'login.2fa_intro'|trans }}{% endblock %}
+
+{% block unlock_form %}
+
+    {# Let the user select the authentication method #}
+    {% if availableTwoFactorProviders|length > 1 %}
+        <p>{{ "choose_provider"|trans({}, 'SchebTwoFactorBundle') }}:
+            {% for provider in availableTwoFactorProviders %}
+                <a href="{{ path("2fa_login", {"preferProvider": provider}) }}">{{ provider }}</a>
+            {% endfor %}
+        </p>
+    {% endif %}
+
+    <form class="form" action="{{ checkPathUrl ? checkPathUrl: path(checkPathRoute) }}" method="post">
+        <div class="mb-3">
+                <div class="mb-3">
+                    <label for="_auth_code" class="form-label">{{ 'login.2fa_label'|trans }}</label>
+                    <input id="_auth_code" type="text" name="{{ authCodeParameterName }}" autocomplete="one-time-code" autofocus class="form-control{% if authenticationError %} is-invalid{% endif %}" placeholder="{{ 'login.2fa_label'|trans }}" />
+                    {% if authenticationError %}
+                        <div class="invalid-feedback d-block">
+                            {{ authenticationError|trans(authenticationErrorData, 'SchebTwoFactorBundle') }}
+                        </div>
+                    {% endif %}
+                </div>
+
+                {#
+                    https://www.twilio.com/blog/html-attributes-two-factor-authentication-autocomplete
+                    If your 2fa methods are using numeric codes only, add these attributes for better user experience:
+                    inputmode="numeric" pattern="[0-9]*"
+                #}
+        </div>
+
+        {% if displayTrustedOption %}
+            <p class="widget"><label for="_trusted"><input id="_trusted" type="checkbox" name="{{ trustedParameterName }}" /> {{ "trusted"|trans({}, 'SchebTwoFactorBundle') }}</label></p>
+        {% endif %}
+        <input type="hidden" name="{{ csrfParameterName }}" value="{{ csrf_token(csrfTokenId) }}">
+        <div class="form-footer">
+            <button type="submit" tabindex="40" class="btn btn-primary w-100">
+                {{ 'Sign In'|trans({}, 'TablerBundle') }}
+            </button>
+        </div>
+    </form>
+
+    <div class="hr-text">{{ 'or'|trans({}, 'TablerBundle') }}</div>
+
+    <div class="row">
+        <div class="col text-center">
+            {# The logout link gives the user a way out if they can't complete two-factor authentication #}
+            <a class="btn" href="{{ logoutPath }}">{{ 'cancel'|trans }}</a>
+        </div>
+    </div>
+
+{% endblock %}

templates/security/login.html.twig

@@ -1,4 +1,4 @@
-{% extends '@AdminLTE/FOSUserBundle/Security/login.html.twig' %}
+{% extends '@theme/security/login.html.twig' %}
 
 {% block logo_login %}{% include 'partials/logo_login.html.twig' %}{% endblock %}
 {% block title %}{{- get_title() -}}{% endblock %}
@@ -11,6 +11,7 @@
 {% endblock %}
 
 {% block stylesheets %}
+    {{ parent() }}
     {{ encore_entry_link_tags('app') }}
     {% set event = trigger(constant('App\\Event\\ThemeEvent::STYLESHEET')) %}
     {{ event.content|raw }}
@@ -19,19 +20,57 @@
 {% block javascripts %}
     {{ encore_entry_script_tags('app') }}
     {% set event = trigger(constant('App\\Event\\ThemeEvent::JAVASCRIPT')) %}
+    <script>
+        let profile = localStorage.getItem('kimai_profile');
+        if (profile === null) {
+            {#
+                screen.width = real screen width
+                screen.availWidth = screen minus e.g. OS elements
+                window.screen.width * window.devicePixelRatio = screen resolution is not relevant
+                window.innerWidth = browser screen width minus browser elements (doesn’t include scroll bars and borders)
+                window.visualViewport.width = window.innerWidth - border(?) => only a couple of pixels smaller
+
+                See https://getbootstrap.com/docs/5.0/layout/breakpoints/ for the min width, as of v5 this is 576px
+            #}
+            profile = '{{ constant('\\App\\Utils\\ProfileManager::PROFILE_DESKTOP') }}'
+            const size = window.visualViewport !== undefined ? window.visualViewport.width : window.innerWidth;
+            if (size < 576) {
+                profile = '{{ constant('\\App\\Utils\\ProfileManager::PROFILE_MOBILE') }}';
+            }
+            localStorage.setItem('kimai_profile', profile);
+        }
+        document.cookie = "{{ constant('\\App\\Utils\\ProfileManager::COOKIE_PROFILE') }}="+profile+"; path=/; expires=; SameSite=Strict; Secure";
+    </script>
     {{ event.content|raw }}
 {% endblock %}
 
 {% block login_social_auth %}
     {% if saml_config.isActivated() %}
-        {% set class = 'btn-primary' %}
         {% if kimai_config.loginFormActive %}
-            {% set class = 'btn-google' %}
+            <div class="hr-text">{{ 'or'|trans({}, 'TablerBundle') }}</div>
         {% endif %}
-        <a href="{{ path('saml_login') }}" class="btn btn-block {{ class }}">
-            <span>{{ saml_config.getTitle()|trans }}</span>
-        </a>
-        <br>
+        <div class="card-body">
+            <div class="row">
+                {% if not kimai_config.loginFormActive %}
+                    <h2 class="card-title text-center mb-4">{{ block('login_box_msg') }}</h2>
+                {% endif %}
+                <div class="col text-center">
+                    <a href="{{ path('saml_login') }}" id="social-login-button" tabindex="50" class="btn btn-white w-50">
+                        {% set provider = saml_config.getProvider() %}
+                        {% if provider is not null %}
+                            <i class="icon fab fa-{{ provider}} text-{{ provider }}"></i>
+                        {% endif %}
+                        {{ saml_config.getTitle()|trans }}
+                    </a>
+                </div>
+            </div>
+        </div>
+    {% endif %}
+{% endblock %}
+
+{% block login_box %}
+    {% if kimai_config.loginFormActive %}
+        {{ parent() }}
     {% endif %}
 {% endblock %}
 
@@ -41,17 +80,16 @@
     {% endif %}
 {% endblock %}
 
-{% block login_actions %}
-    <div class="login-actions">
+{% block password_forgotten %}
     {% if kimai_config.passwordResetActive %}
-        <a class="text-muted action-register" href="{{ path('fos_user_resetting_request') }}">
-            {{ 'I forgot my password'|trans({}, 'AdminLTEBundle') }}
-        </a>
+        {{ parent() }}
     {% endif %}
-    {% if kimai_config.selfRegistrationActive %}
-        <a class="text-muted action-password" href="{{ path('fos_user_registration_register') }}">
-            {{ 'Register a new account'|trans({}, 'AdminLTEBundle') }}
-        </a>
-    {% endif %}
-    </div>
 {% endblock %}
+
+{% block registration %}
+    {% if kimai_config.selfRegistrationActive %}
+        {{ parent() }}
+    {% endif %}
+{% endblock %}
+
+{% block remember_me %}{% endblock %}

templates/security/password-reset/layout.html.twig

@@ -1,23 +1,4 @@
-{% extends '@AdminLTE/FOSUserBundle/Resetting/request.html.twig' %}
+{% extends '@theme/security/password-reset.html.twig' %}
 
 {% block logo_login %}{% include 'partials/logo_login.html.twig' %}{% endblock %}
 {% block title %}{{- get_title() -}}{% endblock %}
-
-{% block head %}
-    {{ parent() }}
-    {% include 'partials/head.html.twig' %}
-    {% set event = trigger(constant('App\\Event\\ThemeEvent::HTML_HEAD')) %}
-    {{ event.content|raw }}
-{% endblock %}
-
-{% block stylesheets %}
-    {{ encore_entry_link_tags('app') }}
-    {% set event = trigger(constant('App\\Event\\ThemeEvent::STYLESHEET')) %}
-    {{ event.content|raw }}
-{% endblock %}
-
-{% block javascripts %}
-    {{ encore_entry_script_tags('app') }}
-    {% set event = trigger(constant('App\\Event\\ThemeEvent::JAVASCRIPT')) %}
-    {{ event.content|raw }}
-{% endblock %}

templates/security/password-reset/reset.html.twig

@@ -2,15 +2,15 @@
 
 {% block login_form %}
 
-    {{ form_start(form, { 'action': path('fos_user_resetting_reset', {'token': token}), 'attr': { 'class': 'fos_user_resetting_reset' } }) }}
+    {{ form_start(form, { 'action': path('resetting_reset', {'token': token}), 'attr': { 'class': 'resetting_reset' } }) }}
     {{ form_widget(form) }}
 
     <div class="row">
         <div class="col-xs-12">
-            <button type="submit" class="btn btn-primary btn-block btn-flat">{{ 'Reset your password'|trans({}, 'AdminLTEBundle') }}</button>
+            <button type="submit" class="btn btn-primary">{{ 'Reset your password'|trans({}, 'TablerBundle') }}</button>
         </div>
     </div>
-    
+
     {{ form_end(form) }}
 
 {% endblock %}

templates/security/self-registration/confirmed.html.twig

@@ -1,16 +1,15 @@
 {% extends 'security/self-registration/layout.html.twig' %}
 
 {% block login_form %}
-
     <p>
-        {{ 'registration.confirmed'|trans({'%username%': user.username}, 'AdminLTEBundle') }}
+        {{ 'registration.confirmed'|trans({'%username%': user.username}, 'TablerBundle') }}
     </p>
-
 {% endblock %}
 
 {% block login_actions %}
-    <br>
-    <a href="{{ path('homepage') }}">
-        {{ 'Show homepage'|trans({}, 'AdminLTEBundle') }}
-    </a>
+    <div class="text-center text-muted mt-3">
+        <a href="{{ path('homepage') }}">
+            {{ 'Show homepage'|trans({}, 'TablerBundle') }}
+        </a>
+    </div>
 {% endblock %}

templates/security/self-registration/layout.html.twig

@@ -1,23 +1,4 @@
-{% extends '@AdminLTE/FOSUserBundle/Registration/register.html.twig' %}
+{% extends '@theme/security/registration.html.twig' %}
 
 {% block logo_login %}{% include 'partials/logo_login.html.twig' %}{% endblock %}
 {% block title %}{{- get_title() -}}{% endblock %}
-
-{% block head %}
-    {{ parent() }}
-    {% include 'partials/head.html.twig' %}
-    {% set event = trigger(constant('App\\Event\\ThemeEvent::HTML_HEAD')) %}
-    {{ event.content|raw }}
-{% endblock %}
-
-{% block stylesheets %}
-    {{ encore_entry_link_tags('app') }}
-    {% set event = trigger(constant('App\\Event\\ThemeEvent::STYLESHEET')) %}
-    {{ event.content|raw }}
-{% endblock %}
-
-{% block javascripts %}
-    {{ encore_entry_script_tags('app') }}
-    {% set event = trigger(constant('App\\Event\\ThemeEvent::JAVASCRIPT')) %}
-    {{ event.content|raw }}
-{% endblock %}

templates/security/unlock.html.twig

@@ -0,0 +1,40 @@
+{% extends 'security/login.html.twig' %}
+
+{% block login_social_auth %}{% endblock %}
+{% block password_forgotten %}{% endblock %}
+{% block registration %}{% endblock %}
+
+{% block login_box_msg %}{{ 'security.unlock.title'|trans }}{% endblock %}
+
+{% block login_form %}
+        <p class="text-muted text-center mb-4">
+            {% block unlock_title %}{{ 'security.unlock.intro'|trans }}{% endblock %}
+        </p>
+        <div class="mb-4 text-center">
+            {% from "macros/widgets.html.twig" import user_avatar, username %}
+            {{ user_avatar(app.user, false, 'avatar-xl mb-3') }}
+            <h3>{{ username(app.user) }}</h3>
+            {% if app.user.title is not empty %}
+                <p class="text-muted">{{ app.user.title }}</p>
+            {% endif %}
+        </div>
+        {% block unlock_form %}
+            {% if kimai_config.loginFormActive %}
+            <form action="{{ path('tabler_login_check'|tabler_route) }}" method="post" autocomplete="off" class="login-box-body security-login">
+                <input type="hidden" name="_remember_me" value="on">
+                <input type="hidden" name="_username" value="{{ app.user.userIdentifier }}">
+                <div class="mb-3">
+                    <div class="input-group input-group-flat">
+                        <input name="_password" type="password" tabindex="20" class="form-control" placeholder="{{ 'Password'|trans({}, 'TablerBundle') }}">
+                    </div>
+                </div>
+                <div class="form-footer">
+                    <button type="submit" tabindex="40" class="btn btn-primary w-100">
+                        {{ icon('unlocked', true) }} {{ 'security.unlock.button'|trans }}
+                    </button>
+                </div>
+                <input type="hidden" name="_csrf_token" value="{{ csrf_token('authenticate') }}"/>
+            </form>
+            {% endif %}
+        {% endblock %}
+{% endblock %}