templates/Authentication/template.html.twig line 1

Open in your IDE?
  1. {# templates/login/index.html.twig #}
  2. <!DOCTYPE html>
  3. <html lang="fr">
  4.     <head>
  5.         <meta charset="utf-8"/>
  6.         <title>{% block title %}{% endblock %} | {{ clientName() }}</title>
  7.         <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.         <!-- App favicon -->
  9.         <link rel="shortcut icon" href="{{ path('app_static_favicon') }}">
  10.         <!-- Bootstrap Css -->
  11.         <link href="/assets/css/bootstrap.min.css" id="bootstrap-style" rel="stylesheet" type="text/css"/>
  12.         <!-- Icons Css -->
  13.         <link href="/assets/css/icons.min.css" rel="stylesheet" type="text/css"/>
  14.         <!-- App Css-->
  15.         <link href="/assets/css/app.min.css" id="app-style" rel="stylesheet" type="text/css"/>
  16.         <!-- App Css-->
  17.         <link href="/assets/css/app.custom.css" rel="stylesheet" type="text/css"/>
  18.         <style>
  19.             body {
  20.                 background-color: black !important;
  21.             }
  23.             .layer-video {
  24.                 position: fixed;
  25.                 top: 0;
  26.                 left: 0;
  27.                 width: 100%;
  28.                 height: 100%;
  29.                 opacity: .7;
  30.             }
  32.             .layer-video video {
  33.                 position: relative;
  34.                 height: 120vh;
  35.                 /*margin-left: -70%;*/
  36.                 /*margin-top: -300px;*/
  37.             }
  39.             @media (max-width: 768px) {
  40.                 .left-section {
  41.                     display: none;
  42.                 }
  44.                 .right-section .auth-full-page-content {
  45.                     justify-content: center;
  46.                 }
  47.             }
  48.         </style>
  49.     </head>
  50.     <body class="auth-body-bg">
  51.         <div>
  52.             {% if "LOGIN_BACKGROUND_IMAGE"|param is null %}
  53.                 <div class="layer-video">
  54.                     <video loop muted autoplay>
  55.                         <source src="/assets/videos/login.webm" type="video/webm">
  56.                     </video>
  57.                 </div>
  58.             {% else %}
  59.                 <div class="layer-video" style="background: url('/static/bg-login.png'); background-size:cover;"></div>
  60.             {% endif %}
  61.             <div class="container-fluid p-0" style="height:100vh;">
  62.                 <div class="row g-0" style="height: 100vh; margin:0!important;">
  63.                     <div class="col-md-6 left-section">
  64.                         <div class="auth-full-bg pt-lg-5 p-4" style="background:transparent;">
  65.                             <div class="w-100">
  66.                                 <div class="d-flex h-100 flex-column">
  67.                                     <div class="p-4 mt-auto">
  68.                                         <div class="row justify-content-center">
  69.                                             <div class="col-lg-10">
  70.                                                 {% if "LOGIN_ENABLE_CITATION"|param|default(1) == 1 %}
  71.                                                     <div class="text-center" style="background:rgba(0,0,0,0.6); border-radius: 10px 10px 3px 10px; padding: 10px 15px;">
  72.                                                         <div dir="ltr">
  73.                                                             <div class="owl-carousel owl-theme auth-review-carousel" id="auth-review-carousel">
  74.                                                                 <div class="item">
  75.                                                                     <div class="py-3" style="padding-bottom: 7px!important; padding-top: 0px!important;">
  76.                                                                         <p class="font-size-16 mb-4 text-white" style="margin-bottom: 0!important;">
  77.                                                                             {{ quotationDay().quotation }}
  78.                                                                         </p>
  79.                                                                         <p class="font-size-16 mb-4 text-center" style="margin-bottom: 0!important; color:#8b8b8b!important; font-size:1em!important; font-style: italic">
  80.                                                                             {{ quotationDay().author ~ (quotationDay().date is not empty ? " " ~ quotationDay().date : "") }}
  81.                                                                         </p>
  82.                                                                     </div>
  83.                                                                 </div>
  84.                                                             </div>
  85.                                                         </div>
  86.                                                     </div>
  87.                                                 {% endif %}
  88.                                             </div>
  89.                                         </div>
  90.                                     </div>
  91.                                 </div>
  92.                             </div>
  93.                         </div>
  94.                     </div>
  95.                     <!-- end col -->
  96.                     <div class="col-md-6 right-section" style="background: rgba(255,255,255,0.9);">
  97.                         <div class="auth-full-page-content p-md-5 p-4">
  98.                             <div class="w-100">
  99.                                 <div class="d-flex flex-column h-100">
  100.                                     <div class="dropdown d-inline-block" style="position:absolute; top: 0; right: 0;">
  101.                                         <button type="button" class="btn header-item waves-effect" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="height: 35px;">
  102.                                             <img id="header-lang-img" src="/assets/images/flags/{{ localeLangage }}.jpg" height="16">
  103.                                         </button>
  104.                                         <div class="dropdown-menu dropdown-menu-end">
  105.                                             <!-- item-->
  106.                                             <a href="javascript:void(0);" class="dropdown-item notify-item language lang-selector" data-lang="fr" style="cursor: pointer;">
  107.                                                 <img src="/assets/images/flags/fr.jpg" height="12"> <span class="align-middle">Français</span>
  108.                                             </a>
  109.                                             <!-- item-->
  110.                                             {# <a href="javascript:void(0);" class="dropdown-item notify-item language lang-selector" data-lang="en" style="cursor: pointer;"> #}
  111.                                             {# <img src="/assets/images/flags/en.jpg" height="12"> <span class="align-middle">English</span> #}
  112.                                             {# </a> #}
  113.                                         </div>
  114.                                     </div>
  115.                                     <div class="mb-4 mb-md-5">
  116.                                         <a href="#" class="d-block auth-logo text-center">
  117.                                             <img src="{{ path('app_static_logo') }}" alt="" height="80" class="auth-logo-dark" style="margin:auto;">
  118.                                         </a>
  119.                                     </div>
  120.                                     <div class="my-auto" style="max-width: 400px;">
  121.                                         {% block content %}
  122.                                             <div>
  123.                                                 <h5 class="text-primary">{{ "app_login.welcome"|trans({}, "authenticator") }}</h5>
  124.                                                 <p class="text-muted">{{ "app_login.connect_to_access"|trans({}, "authenticator") }}</p>
  125.                                             </div>
  126.                                             <div class="mt-4">
  127.                                                 <form action="{{ path('login') }}" method="POST">
  128.                                                     {% if error %}
  129.                                                         <div class="alert alert-danger">{{ error.messageKey|trans(error.messageData, 'security') }}</div>
  130.                                                     {% endif %}
  131.                                                     <div class="mb-3">
  132.                                                         <label for="_username" class="form-label">{{ "app_login.username"|trans({}, "authenticator") }}</label>
  133.                                                         <input type="email" class="form-control" id="_username" name="_username" placeholder="{{ "app_login.username"|trans({}, "authenticator") }}" required>
  134.                                                     </div>
  135.                                                     <div class="mb-3">
  136.                                                         <div class="float-end">
  137.                                                             <a href="{{ path("forgot_password") }}" tabindex="-1" class="text-muted">{{ "app_login.forgot_password"|trans({}, "authenticator") }}</a>
  138.                                                         </div>
  139.                                                         <label class="form-label">{{ "app_login.password"|trans({}, "authenticator") }}</label>
  140.                                                         <div class="input-group auth-pass-inputgroup">
  141.                                                             <input type="password" name="_password" class="form-control" placeholder="{{ "app_login.password"|trans({}, "authenticator") }}" aria-label="Password" aria-describedby="password-addon">
  142.                                                             <button class="btn btn-light " type="button" id="password-addon" style="border: #ced4da solid 1px"><i class="mdi mdi-eye-outline"></i></button>
  143.                                                         </div>
  144.                                                     </div>
  145.                                                     <input type="hidden" name="_csrf_token" value="{{ csrf_token('authenticate') }}">
  146.                                                     <div class="mt-3 d-grid">
  147.                                                         <button class="btn btn-primary waves-effect " type="submit">{{ "app_login.login"|trans({}, "authenticator") }}</button>
  148.                                                     </div>
  149.                                                 </form>
  150.                                             </div>
  151.                                         {% endblock %}
  152.                                     </div>
  153.                                     <div class="mt-4 mt-md-5 text-center">
  154.                                         <p class="mb-0"> &copy;{{ "now"|date("Y") }} Club la Pelle- Développé par AdherIA</p>
  155.                                     </div>
  156.                                 </div>
  157.                             </div>
  158.                         </div>
  159.                     </div>
  160.                     <!-- end col -->
  161.                 </div>
  162.                 <!-- end row -->
  163.             </div>
  164.             <!-- end container-fluid -->
  165.         </div>
  166.         <!-- JAVASCRIPT -->
  167.         <script src="/assets/libs/jquery/dist/jquery.min.js"></script>
  168.         <script src="/assets/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
  169.         <script src="/assets/libs/metismenu/dist/metisMenu.min.js"></script>
  170.         <script src="/assets/libs/simplebar/dist/simplebar.min.js"></script>
  171.         <script src="/assets/libs/node-waves/dist/waves.min.js"></script>
  172.         <!-- App js -->
  173.         <script src="/assets/js/app.js"></script>
  174.         <script type="text/javascript">
  175.             $('input[name="_username"]').focus();
  177.             // Lang selector.
  178.             $('a.lang-selector[data-lang]')
  179.                 .on('click', function () {
  180.                     var lang = $(this).attr('data-lang');
  181.                     fetch("/lang/set/" + lang)
  182.                         .then((response) => {
  183.                             return response.json();
  184.                         })
  185.                         .then((response) => {
  186.                             if (true === response) {
  187.                                 window.location.reload();
  188.                             }
  189.                         });
  190.                 })
  191.                 .css("cursor", "pointer");
  192.         </script>
  193.     </body>
  194. </html>