templates/frame.html.twig line 1

  1. <!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <meta name="author" content="Maether IT" />
        <meta name="publisher" content="Maether IT" />

        <title>{% block title %}Welcome!{% endblock %}</title>

        <link rel="shortcut icon" type="image/x-icon" href="{{ asset('resources/img/mit_logo_small.png') }}" />
        <link rel="icon" type="image/x-icon" href="{{ asset('resources/img/mit_logo_small.png') }}" />

        {% block stylesheets %}
            <!-- Vendor styles -->
            <link rel="stylesheet" href="{{ asset('resources/vendors/zwicon/zwicon.min.css') }}">
            <link rel="stylesheet" href="{{ asset('resources/vendors/animate.css/animate.min.css') }}">
            <link rel="stylesheet" href="{{ asset('resources/vendors/overlay-scrollbars/OverlayScrollbars.min.css') }}">
            <link rel="stylesheet" href="{{ asset('resources/vendors/fullcalendar/core/main.min.css') }}">
            <link rel="stylesheet" href="{{ asset('resources/vendors/fullcalendar/daygrid/main.min.css') }}">

            <!-- App styles -->
            <link rel="stylesheet" href="{{ asset('resources/css/app.min.css') }}">
        {% endblock %}
    </head>
    <body data-sa-theme="2">

        <div id="content-wrapper">
            {% block body %}{% endblock %}
        </div>

        {% if app.getUser %}
            {% set randomKey = [] %}
            {% set alpha = 'abcdefghijklmnopqrstuvwxyz' %}
            {% set numbers = '0123456789' %}

            {% for i in 1..10 %}
                {% set randomCharacter = random(alpha ~ alpha|upper ~ numbers ~ '-_') %}
                {% set randomKey = randomKey|merge([randomCharacter]) %}
            {% endfor %}
            {% set randomKey = randomKey|join %}

        <div id="content-lockscreen" style="display:none;" class="login">

            <!-- Login -->
            <div class="login__block active">
                <div class="login__block__header">
                    <img src="{{ asset('demo/img/profile-pics/2.jpg') }}" alt="">
                    Welcome back {{ app.getUser.getName }}!
                </div>

                <div class="login__block__body">
                    <form id="formLockscreen">
                        <div class="form-group">
                            <input type="hidden" id="lockscreenEmail" name="{{ randomKey }}" value="{{ app.getUser.getEmail }}">
                            <input type="password" class="form-control text-center" id="lockscreenPassword" name="password" placeholder="Password" autocomplete="">
                        </div>

                        <button type="submit" class="btn btn--icon btn-theme"><i id="lockscreenIcon" class="zwicon-checkmark"></i></button>
                    </form>
                </div>
            </div>
        </div>
        {% endif %}

        {% block javascripts %}
            <!-- Javascript -->
            <!-- Vendors -->
            <script src="{{ asset('resources/vendors/jquery/jquery.min.js') }}"></script>
            <script src="{{ asset('resources/vendors/popper.js/popper.min.js') }}"></script>
            <script src="{{ asset('resources/vendors/bootstrap/js/bootstrap.min.js') }}"></script>
            <script src="{{ asset('resources/vendors/overlay-scrollbars/jquery.overlayScrollbars.min.js') }}"></script>

            <!-- App functions and actions -->
            <script src="{{ asset('resources/js/app.min.js') }}"></script>

            {% if app.getUser %}
            <script>
                var sessionExtenderActive = true;
                var sessionExtenderDelay = 30000;
                var csrfToken = '{{ csrf_token("authenticate") }}';

                $('body').mousemove(throttle(sessionExtenderDelay, function() {
                    if (sessionExtenderActive) {
                        triggerActivity(sessionExtenderDelay);
                    }
                }));

                window.addEventListener('beforeunload', (event) => {
                    sessionExtenderActive = false;
                });

                function triggerActivity(timeout) {
                    $.ajax({
                        type: "GET",
                        url:"{{ path('session') }}",
                        timeout: timeout,
                        success:function(data) {
                            //console.log(data);
                        },
                        error:function(data) {
                            //console.log(data);

                            if (sessionExtenderActive) {
                                sessionExtenderActive = false;
                                toggleLockscreen();
                            }
                        },
                    });
                }

                var previousCall = new Date().getTime() + sessionExtenderDelay;
                function throttle(delay, callback) {
                    return function() {
                        var time = new Date().getTime();

                        if ((time - previousCall) >= delay) {
                            previousCall = time;
                            callback.apply(null, arguments);
                        }
                    };
                }

                function toggleLockscreen() {
                    $('#content-wrapper').toggle();
                    $('#content-lockscreen').toggle();
                }

                function toggleLockscreenIcon() {
                    var e = $('#lockscreenIcon');
                    if (e.hasClass('zwicon-checkmark')) {
                        e.removeClass('zwicon-checkmark').addClass('zwicon-rotate-right');
                    } else {
                        e.removeClass('zwicon-rotate-right').addClass('zwicon-checkmark');
                    }
                }

                $('#formLockscreen').submit(function(){
                    toggleLockscreenIcon();
                    $.ajax({
                        type: "POST",
                        url:"/login_check?_target_path={{ path('session') }}",
                        data: {
                            email: $('#lockscreenEmail').val(),
                            password: $('#lockscreenPassword').val(),
                            _csrf_token: csrfToken,
                            noredirect: true,
                        },
                        success:function(data) {
                            if (data === 'OK') {
                                previousCall = new Date().getTime() + sessionExtenderDelay;
                                sessionExtenderActive = true;
                                toggleLockscreen();
                                toggleLockscreenIcon();
                            } else {
                                console.log(data);
                                toggleLockscreenIcon();
                            }

                        },
                        error:function(data) {
                            toggleLockscreenIcon();
                        },
                    });

                    return false;
                });
            </script>
            {% endif %}
        {% endblock %}
    </body>
</html>