FOSUserBundle integration with login layout

matteogatti commented 6 years ago

Thanks for the bundle. I've integrated AdminThemeBundle without any problems, and I see the graphic theme correctly. Then i integrated FOSUserBundle, but the login page isn't displayed with AdminLTE graphics.

I tried to override app/FOSUserBundle/Resources/views/Security/login_content.html.twig with AdminThemeBundle/Resources/views/Security/login.html.twig but the assets return 404

Can you give me some info about it?

**Symfony 3.3.* AdminThemeBundle 1.3.5**

shakaran commented 6 years ago

@matteogatti thanks for your report, could you provide your template files overrides?

Also, could you try with latest master instead AdminThemeBundle 1.3.5?

Which path routes for the assets are returning 404 exactly?

matteogatti commented 6 years ago

@shakaran i have copied both files login.html.twig and login_content.html.twig from FOSUserBundle folder to app/Resources/FOSUserBundle/views/Security. The content of login_content.html.twig was replaced with the content of file https://github.com/avanzu/AdminThemeBundle/blob/hotfix-1.3.5/Resources/views/Security/login.html.twig and i provided to add the reference to FOSUserBundle route.

I tried to use branch 1.5.3 and 2.0.0-beta.8 with the same results Actually i use branch hotfix-1.3.5

login.html.twig

{% extends "@FOSUser/layout.html.twig" %}

{% block fos_user_content %}
    {{ include('@FOSUser/Security/login_content.html.twig') }}
{% endblock fos_user_content %}

login_content.html.twig

<!DOCTYPE html>
<html class="bg-black">
<head>
    <meta charset="UTF-8">
    <title>{% block title %} Log in {% endblock %}</title>
    <meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport'>

    {% stylesheets '@admin_lte_css' %}
    <link href="{{ asset_url }}" rel="stylesheet" type="text/css" />
    {% endstylesheets %}

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>

    <![endif]-->
</head>
<body class="bg-black">

<div class="form-box" id="login-box">
    <div class="header">Sign In</div>

    {% trans_default_domain 'FOSUserBundle' %}

    {% if error %}
        <div>{{ error.messageKey|trans(error.messageData, 'security') }}</div>
    {% endif %}

    <form action="{{ path("fos_user_security_check") }}" method="post">
        <div class="body bg-gray">
            <div class="form-group">
                <label for="username">{{ 'security.login.username'|trans }}</label>
                <input type="text" name="_username" class="form-control" placeholder="username" value="{{ last_username }}"/>
            </div>
            <div class="form-group">
                <label for="password">{{ 'security.login.password'|trans }}</label>
                <input type="password" name="_password" class="form-control" placeholder="Password"/>
            </div>
            <div class="form-group">
                <input type="checkbox" id="remember_me" name="_remember_me" value="on" />
                <label for="remember_me">{{ 'security.login.remember_me'|trans }}</label>
            </div>
        </div>
        <div class="footer">
            <input type="submit" class="btn bg-olive btn-block" id="_submit" name="_submit" value="{{ 'security.login.submit'|trans }}" />

            <p><a href="#">I forgot my password</a></p>

            <a href="register.html" class="text-center">Register a new membership</a>
        </div>
    </form>

    <div class="margin text-center">
        <span>Sign in using social networks</span>
        <br/>
        <button class="btn bg-light-blue btn-circle"><i class="fa fa-facebook"></i></button>
        <button class="btn bg-aqua btn-circle"><i class="fa fa-twitter"></i></button>
        <button class="btn bg-red btn-circle"><i class="fa fa-google-plus"></i></button>

    </div>
</div>

<!-- jQuery 2.0.2 -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<!-- Bootstrap -->
<script src="../../js/bootstrap.min.js" type="text/javascript"></script>

</body>
</html>

On the screen below the result

shakaran commented 6 years ago

@matteogatti did you fetch and build the vendors and link the assets?

It seems that you have missing asset block called admin_lte_css, from (dev-master) is:

'admin_lte_css' => [
                    'inputs' => [
                        $jsAssets . 'bower/bower_components/adminlte/bootstrap/css/bootstrap.min.css',
                        $jsAssets . 'bower/bower_components/adminlte/plugins/bootstrap-slider/slider.css',
                        $jsAssets . 'bower/bower_components/adminlte/plugins/datatables/dataTables.bootstrap.css',
                        $jsAssets . 'bower/bower_components/fontawesome/css/font-awesome.min.css',
                        $jsAssets . 'bower/bower_components/ionicons/css/ionicons.min.css',
                        $jsAssets . 'bower/bower_components/adminlte/dist/css/AdminLTE.min.css',
                        $jsAssets . 'bower/bower_components/adminlte/dist/css/skins/_all-skins.min.css',
                    ],
                ],

So try with:

php bin/console avanzu:admin:fetch-vendor
php bin/console avanzu:admin:build-vendor
php bin/console assets:install --symlink

matteogatti commented 6 years ago

The first command return an error:

root@cbac0bb1e511:/var/www/develop# php bin/console avanzu:admin:fetch-vendor -r
[Executing] /usr/local/bin/bower install --allow-root
[Error] bower                     invalid-meta for:/var/www/develop/vendor/avanzu/admin-theme-bundle/Resources/bower/bower.json
[Error] bower                     invalid-meta The "name" is recommended to be lowercase, can contain digits, dots, dashes

Have changed name in bower.json to avanzu-admin-theme and it proceed.

After that have launched php bin/console avanzu:admin:build-assets but stop to:

uglifycss: unable to process "/var/www/develop/web/bundles/avanzuadmintheme/vendor/adminlte/plugins/daterangepicker/daterangepicker-bs3.css"
    Error: ENOENT, no such file or directory '/var/www/develop/web/bundles/avanzuadmintheme/vendor/adminlte/plugins/daterangepicker/daterangepicker-bs3.css'

matteogatti commented 6 years ago

Switched to dev-master branch the commands don't produce error, but the result is the same of the initial screen i've posted in comment

shakaran commented 6 years ago

@matteogatti the problem in the build was fixed in 1.3.6, if you want use 1.3.X you should update or change in composer to that version that solve the problem with datapicker-bs3. Let me know when you test it

matteogatti commented 6 years ago

I just tried the 1.3.6 version, with the commands:

php bin/console avanzu:admin:fetch-vendor -r
php bin/console avanzu:admin:build-assets
php bin/console assets:install --symlink

The first command produce the same error in comment and i provided to change the name in bower.json in avanzu-admin-theme otherwise, the command appears to hang.

Instead for the command php bin/console avanzu:admin:build-assets now works correctly.

But the error 404 is the same in screen image on comment on file http://myproject.dev/css/3ca43a5_part_1.css

shakaran commented 6 years ago

@matteogatti probably it is needed that you clear your cache, since a new filename was generated and the cache should be warmed again

shakaran commented 6 years ago

@matteogatti if you want make a PR for the bower naming issue (it is fixed on master, but for 1.3.6 is not cherry picked) if you don't have time, I will fix that later, thanks!

matteogatti commented 6 years ago

@shakaran PR: https://github.com/avanzu/AdminThemeBundle/pull/187

shakaran commented 6 years ago

@matteogatti ok PR merged and 1.3.7 version released. Let me know if it is all ok for you, so the issue could be closed, thanks for your contribution!

matteogatti commented 6 years ago

Using the original code doesn't work for me.

{% stylesheets '@admin_lte_css' %}
    <link href="{{ asset_url }}" rel="stylesheet" type="text/css" />
{% endstylesheets %}

I've replaced that code with:

<link rel="stylesheet" href="{{ asset('bundles/avanzuadmintheme/static/'~ app.environment ~'/styles/admin-lte-all.css') }}" />

But I absolutely prefer this layout https://adminlte.io/themes/AdminLTE/pages/examples/login.html to the current style. When I have time to integrate it maybe i'll propose you a PR ;-)

shakaran commented 6 years ago

@matteogatti it seems that for use the asset @admin_lte_css you need to have configured in your config the use_assetic option that is:

avanzu_admin_theme:
    use_assetic: true

Also you need have installed AsseticBundle.

About the new layout, I push some changes in master, so you can use for example thenew login layout which is integrated for fosuserbundle under the file Resources/views/layout/login-fosuserbundle.html.twig

Let me know if the new layout is suitable for you, and if the old one works fine for use using the use_assetic option

shakaran commented 6 years ago

@matteogatti any update or feedback about this? Thanks

matteogatti commented 6 years ago

I'm sorry for the long delay to answer your question. For the assetic, I also added use_assetic but receive the message Unrecognized option "use_assetic" under "avanzu_admin_theme"with version 1.3.7 and 1.3.6.

With dev-master version and fosuserbundle.html.twig layout i also receive 404 errors for the assets. I haven't been able to do many tests, as soon as i have some news i will update you.

shakaran commented 6 years ago

@matteogatti sorry for my delay too, I have a busy week. For 1.3.x it should be work, but it will not be fixed since I am focusing the time for release an stable 2.x using master.

Which 404 errors did you receive (please be more descriptive showing the paths)? Did you fetch and build the assets (note that probably you need --env prod or --env dev for build command)

avanzu / AdminThemeBundle

FOSUserBundle integration with login layout #185