templates/security/index.html.twig line 1

Open in your IDE?
  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="utf-8">
  6.     <title>Mosaic HTML Demo - Sign in</title>
  7.     <meta name="viewport" content="width=device-width,initial-scale=1">
  8.     {% block stylesheets %}
  9.         {# 'app' must match the first argument to addEntry() in webpack.config.js #}
  10.         <link href="{{ asset('css/vendors/flatpickr.min.css') }}" rel="stylesheet">
  11.         <link href="{{ asset('build/app.css') }}" rel="stylesheet">
  12.         {{ encore_entry_link_tags('app') }}
  14.         <!-- Renders a link tag (if your module requires any CSS)
  15.              <link rel="stylesheet" href="/build/app.css"> -->
  16.     {% endblock %}
  17. </head>
  19. <body class="font-inter antialiased bg-slate-100 text-slate-600">
  21. <script>
  22.     if (localStorage.getItem('sidebar-expanded') == 'true') {
  23.         document.querySelector('body').classList.add('sidebar-expanded');
  24.     } else {
  25.         document.querySelector('body').classList.remove('sidebar-expanded');
  26.     }
  27. </script>
  29. <main class="bg-white">
  31.     <div class="relative flex">
  33.         <!-- Content -->
  34.         <div class="w-full md:w-1/2">
  36.             <div class="min-h-screen h-full flex flex-col after:flex-1">
  38.                 <!-- Header -->
  39.                 <div class="flex-1">
  40.                     <div class="flex items-center justify-between h-16 px-4 sm:px-6 lg:px-8">
  41.                         <!-- Logo -->
  42.                         <a class="block" href="index.html">
  43.                             <svg width="32" height="32" viewBox="0 0 32 32">
  44.                                 <defs>
  45.                                     <linearGradient x1="28.538%" y1="20.229%" x2="100%" y2="108.156%" id="logo-a">
  46.                                         <stop stop-color="#A5B4FC" stop-opacity="0" offset="0%"/>
  47.                                         <stop stop-color="#A5B4FC" offset="100%"/>
  48.                                     </linearGradient>
  49.                                     <linearGradient x1="88.638%" y1="29.267%" x2="22.42%" y2="100%" id="logo-b">
  50.                                         <stop stop-color="#38BDF8" stop-opacity="0" offset="0%"/>
  51.                                         <stop stop-color="#38BDF8" offset="100%"/>
  52.                                     </linearGradient>
  53.                                 </defs>
  54.                                 <rect fill="#6366F1" width="32" height="32" rx="16"/>
  55.                                 <path d="M18.277.16C26.035 1.267 32 7.938 32 16c0 8.837-7.163 16-16 16a15.937 15.937 0 01-10.426-3.863L18.277.161z"
  56.                                       fill="#4F46E5"/>
  57.                                 <path d="M7.404 2.503l18.339 26.19A15.93 15.93 0 0116 32C7.163 32 0 24.837 0 16 0 10.327 2.952 5.344 7.404 2.503z"
  58.                                       fill="url(#logo-a)"/>
  59.                                 <path d="M2.223 24.14L29.777 7.86A15.926 15.926 0 0132 16c0 8.837-7.163 16-16 16-5.864 0-10.991-3.154-13.777-7.86z"
  60.                                       fill="url(#logo-b)"/>
  61.                             </svg>
  62.                         </a>
  63.                     </div>
  64.                 </div>
  66.                 <div class="max-w-sm mx-auto px-4 py-8">
  68.                     <h1 class="text-3xl text-slate-800 font-bold mb-6">Welcome back! ✨</h1>
  69.                     <!-- Form -->
  70.                     <form method="post" action="{{ path("app_login") }}">
  71.                         <div class="space-y-4">
  72.                             <div>
  73.                                 <label class="block text-sm font-medium mb-1"
  74.                                        for="email">{{ "Email Address"| trans }}</label>
  75.                                 <input class="form-input w-full" type="email" id="username" name="_username"
  76.                                        value="{{ last_username }}"/>
  77.                             </div>
  78.                             <div>
  79.                                 <label class="block text-sm font-medium mb-1"
  80.                                        for="password">{{ "Password"| trans }}</label>
  81.                                 <input id="password" class="form-input w-full" type="password" name="_password"
  82.                                        autocomplete="on"/>
  83.                             </div>
  84.                         </div>
  85.                         <div class="flex items-center justify-between mt-6">
  86.                             <div class="mr-1">
  88.                             </div>
  89.                             <button class="btn bg-indigo-500 hover:bg-indigo-600 text-white ml-3">{{ "Log in"|trans }}</button>
  90.                         </div>
  91.                         <input type="hidden" name="_csrf_token"
  92.                                value="{{ csrf_token('authenticate') }}"
  93.                         >
  94.                     </form>
  95.                     <!-- Footer -->
  96.                     <div class="pt-5 mt-6 border-t border-slate-200">
  97.                         <!-- Warning -->
  98.                         {% if error %}
  99.                             <div class="mt-5">
  100.                                 <div class="bg-amber-100 text-amber-600 px-3 py-2 rounded">
  101.                                     <svg class="inline w-3 h-3 shrink-0 fill-current" viewBox="0 0 12 12">
  102.                                         <path d="M10.28 1.28L3.989 7.575 1.695 5.28A1 1 0 00.28 6.695l3 3a1 1 0 001.414 0l7-7A1 1 0 0010.28 1.28z"/>
  103.                                     </svg>
  104.                                     <span class="text-sm">
  105.                                     {{ error.messageKey|trans(error.messageData, 'security') }}
  106.                                     </span>
  107.                                 </div>
  108.                             </div>
  109.                         {% endif %}
  110.                     </div>
  112.                 </div>
  114.             </div>
  116.         </div>
  118.         <!-- Image -->
  119.         <div class="hidden md:block absolute top-0 bottom-0 right-0 md:w-1/2" aria-hidden="true">
  120.             <img class="object-cover object-center w-full h-full" src="./images/auth-image.jpg" width="760"
  121.                  height="1024" alt="Authentication image"/>
  122.             <img class="absolute top-1/4 left-0 -translate-x-1/2 ml-8 hidden lg:block"
  123.                  src="./images/auth-decoration.png" width="218" height="224" alt="Authentication decoration"/>
  124.         </div>
  126.     </div>
  128. </main>
  129. {% block javascripts %}
  130.     <script src="{{ asset('/vendors/alpinejs.min.js') }}" defer></script>
  131.     {{ encore_entry_script_tags('app') }}
  133.     <!-- Renders app.js & a webpack runtime.js file
  134.         <script src="/build/runtime.js" defer></script>
  135.         <script src="/build/app.js" defer></script>
  136.         See note below about the "defer" attribute -->
  137. {% endblock %}
  139. </body>
  141. </html>