templates/user/ask_password.html.twig line 1

Open in your IDE?
  1. {% extends "base_security.html.twig" %}
  3. {% block fos_user_title %}
  4.     <h4 class="auth-header">{{ 'menu.init_reset_password' | trans }}</h4>
  5. {% endblock fos_user_title %}
  7. {% block fos_user_content %}
  8.     <div class="container">
  9.         <div class="comoros-flag-animation">
  10.             <div class="flag-wave">
  11.                 <svg viewBox="0 0 600 400" xmlns="http://www.w3.org/2000/svg">
  12.                     <!-- Drapeau des Comores animé -->
  13.                     <defs>
  14.                         <linearGradient id="waveGrad" x1="0%" y1="0%" x2="100%" y2="0%">
  15.                             <stop offset="0%" style="stop-color:#3b6e2c;stop-opacity:1" />
  16.                             <stop offset="50%" style="stop-color:#ffffff;stop-opacity:1" />
  17.                             <stop offset="100%" style="stop-color:#cf0921;stop-opacity:1" />
  18.                         </linearGradient>
  19.                         <filter id="shadow">
  20.                             <feDropShadow dx="2" dy="4" stdDeviation="3" flood-opacity="0.3"/>
  21.                         </filter>
  22.                     </defs>
  23.                     
  24.                     <!-- Bande jaune (lune et étoiles) -->
  25.                     <rect x="0" y="0" width="600" height="400" fill="#f3c300"/>
  26.                     
  27.                     <!-- Bandes horizontales -->
  28.                     <rect x="80" y="0" width="520" height="80" fill="#3b6e2c"/>
  29.                     <rect x="80" y="80" width="520" height="80" fill="#ffffff"/>
  30.                     <rect x="80" y="160" width="520" height="80" fill="#cf0921"/>
  31.                     <rect x="80" y="240" width="520" height="160" fill="#f3c300"/>
  32.                     
  33.                     <!-- Triangle blanc -->
  34.                     <polygon points="0,0 120,0 120,400 0,400" fill="#ffffff"/>
  35.                     
  36.                     <!-- Triangle vert -->
  37.                     <polygon points="0,0 100,0 100,400 0,400" fill="#3b6e2c"/>
  38.                     
  39.                     <!-- Croissant et étoiles -->
  40.                     <g class="moon-stars" filter="url(#shadow)">
  41.                         <!-- Croissant de lune -->
  42.                         <circle cx="55" cy="200" r="35" fill="#f3c300"/>
  43.                         <circle cx="70" cy="195" r="28" fill="#3b6e2c"/>
  44.                         
  45.                         <!-- 4 étoiles -->
  46.                         <polygon points="45,120 48,130 58,130 50,136 53,146 45,140 37,146 40,136 32,130 42,130" fill="#ffffff" class="star1"/>
  47.                         <polygon points="85,280 88,290 98,290 90,296 93,306 85,300 77,306 80,296 72,290 82,290" fill="#ffffff" class="star2"/>
  48.                         <polygon points="25,300 28,310 38,310 30,316 33,326 25,320 17,326 20,316 12,310 22,310" fill="#ffffff" class="star3"/>
  49.                         <polygon points="95,140 98,150 108,150 100,156 103,166 95,160 87,166 90,156 82,150 92,150" fill="#ffffff" class="star4"/>
  50.                     </g>
  51.                 </svg>
  52.             </div>
  53.         </div>
  55.         <div class="form-text text-md-center">
  56.             <em>
  57.                 {{ 'menu.information_for_reset_password_with_tag' | trans({'%tag_br%': '<br/>'}) | raw }}
  58.             </em>
  59.         </div>
  61.         <form action="{{ path('register_ask_new_password') }}" method="POST" class="fos_user_resetting_request">
  62.             {{ form_widget(form._token) }}
  63.             <div class="form-group">
  64.                 <label for="">{{ 'menu.login_phone' | trans }}*</label>
  65.                 {{ form_widget(form.phone) }}
  66.                 <div class="pre-icon os-icon os-icon-user-male-circle"></div>
  67.             </div>
  68.             <div class="form-group">
  69.                 <label for="">{{ 'menu.optional_email' | trans }}</label>
  70.                 {{ form_widget(form.email) }}
  71.                 <div class="pre-icon os-icon os-icon-email-forward"></div>
  72.             </div>
  73.             <div class="form-group">
  74.                 <label for="">{{ 'menu.verification_code' | trans }}</label>
  75.                 {{ form_widget(form.validCode, { 'value': '' }) }}
  76.                 <div class="pre-icon os-icon os-icon-fingerprint"></div>
  77.             </div>
  78.             <div class="multi_submit">
  79.                 <input id="submit_change_password" class="btn btn-primary" type="submit" value="Initialiser" />
  80.                 <a class="btn btn-primary" href="{{ path('logout') }}">{{ 'menu.cancel' | trans }}</a>
  81.             </div>
  82.         </form>
  83.     </div>
  84. {% endblock fos_user_content %}
  86. {% block stylesheets %}
  87.     {{ parent() }}
  88.     <style>
  89.         /* ============================================
  90.            CADRE RECTANGLE - LARGEUR RÉDUITE
  91.            ============================================ */
  92.         
  93.         /* Cadre rectangle plus petit */
  94.         .auth-box-w {
  95.             max-width: 380px !important;
  96.             width: 100% !important;
  97.             margin: 30px auto !important;
  98.             padding: 25px 28px 30px 28px !important;
  99.             border-radius: 16px !important;
  100.             background: white !important;
  101.             box-shadow: 0 5px 20px rgba(0,0,0,0.1) !important;
  102.             border: 1px solid #ddd !important;
  103.             position: relative !important;
  104.             z-index: 2 !important;
  105.         }
  106.         
  107.         /* Centrage de la carte */
  108.         .auth-wrapper {
  109.             display: flex !important;
  110.             justify-content: center !important;
  111.             align-items: center !important;
  112.             min-height: 100vh !important;
  113.             background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
  114.             position: relative !important;
  115.             overflow: hidden !important;
  116.         }
  117.         
  118.         /* Animation du drapeau comorien en arrière-plan */
  119.         .comoros-flag-animation {
  120.             position: fixed !important;
  121.             top: 0 !important;
  122.             left: 0 !important;
  123.             width: 100% !important;
  124.             height: 100% !important;
  125.             z-index: 1 !important;
  126.             pointer-events: none !important;
  127.             overflow: hidden !important;
  128.         }
  129.         
  130.         .flag-wave {
  131.             position: absolute !important;
  132.             top: 50% !important;
  133.             left: 50% !important;
  134.             transform: translate(-50%, -50%) scale(0.8) !important;
  135.             width: 600px !important;
  136.             height: 400px !important;
  137.             opacity: 0.15 !important;
  138.             animation: floatFlag 8s ease-in-out infinite, rotateFlag 20s linear infinite !important;
  139.         }
  140.         
  141.         .flag-wave svg {
  142.             width: 100% !important;
  143.             height: 100% !important;
  144.             animation: waveFlag 3s ease-in-out infinite !important;
  145.         }
  146.         
  147.         /* Animation des étoiles */
  148.         .star1 {
  149.             animation: starGlow 2s ease-in-out infinite;
  150.             transform-origin: 45px 140px;
  151.         }
  152.         
  153.         .star2 {
  154.             animation: starGlow 2.5s ease-in-out infinite 0.5s;
  155.             transform-origin: 85px 300px;
  156.         }
  157.         
  158.         .star3 {
  159.             animation: starGlow 3s ease-in-out infinite 1s;
  160.             transform-origin: 25px 320px;
  161.         }
  162.         
  163.         .star4 {
  164.             animation: starGlow 2.2s ease-in-out infinite 1.5s;
  165.             transform-origin: 95px 160px;
  166.         }
  167.         
  168.         .moon-stars {
  169.             animation: pulse 3s ease-in-out infinite;
  170.         }
  171.         
  172.         @keyframes floatFlag {
  173.             0%, 100% {
  174.                 transform: translate(-50%, -50%) scale(0.8) translateY(0px);
  175.             }
  176.             50% {
  177.                 transform: translate(-50%, -50%) scale(0.85) translateY(-20px);
  178.             }
  179.         }
  180.         
  181.         @keyframes rotateFlag {
  182.             0% {
  183.                 transform: translate(-50%, -50%) scale(0.8) rotate(0deg);
  184.             }
  185.             100% {
  186.                 transform: translate(-50%, -50%) scale(0.8) rotate(360deg);
  187.             }
  188.         }
  189.         
  190.         @keyframes waveFlag {
  191.             0%, 100% {
  192.                 transform: skewX(0deg) scaleX(1);
  193.             }
  194.             50% {
  195.                 transform: skewX(5deg) scaleX(1.05);
  196.             }
  197.         }
  198.         
  199.         @keyframes starGlow {
  200.             0%, 100% {
  201.                 opacity: 0.7;
  202.                 transform: scale(1);
  203.             }
  204.             50% {
  205.                 opacity: 1;
  206.                 transform: scale(1.2);
  207.             }
  208.         }
  209.         
  210.         @keyframes pulse {
  211.             0%, 100% {
  212.                 transform: scale(1);
  213.             }
  214.             50% {
  215.                 transform: scale(1.05);
  216.             }
  217.         }
  218.         
  219.         /* Logos en haut */
  220.         .logo-w {
  221.             padding: 10px 0 20px 0 !important;
  222.             margin-bottom: 10px !important;
  223.             gap: 15px !important;
  224.             display: flex !important;
  225.             justify-content: center !important;
  226.             position: relative !important;
  227.             z-index: 2 !important;
  228.         }
  229.         
  230.         .logo-w img {
  231.             max-width: 85px !important;
  232.             height: auto !important;
  233.         }
  234.         
  235.         /* Bouton langue */
  236.         #buttonSelectLang {
  237.             height: 32px !important;
  238.             margin: 0 !important;
  239.             padding: 4px 10px !important;
  240.             font-size: 11px !important;
  241.         }
  242.         
  243.         /* Titre */
  244.         .auth-header {
  245.             font-size: 22px !important;
  246.             font-weight: 600 !important;
  247.             text-align: center !important;
  248.             margin-bottom: 20px !important;
  249.             padding-bottom: 10px !important;
  250.             border-bottom: 2px solid #e0e0e0 !important;
  251.             color: #333 !important;
  252.         }
  253.         
  254.         /* Texte d'information */
  255.         .form-text {
  256.             background: #f9f9f9 !important;
  257.             padding: 10px 12px !important;
  258.             border-radius: 8px !important;
  259.             margin-bottom: 20px !important;
  260.             font-size: 12px !important;
  261.             color: #666 !important;
  262.             text-align: center !important;
  263.             border-left: 3px solid #007bff !important;
  264.         }
  265.         
  266.         /* Champs de formulaire */
  267.         .form-group {
  268.             margin-bottom: 18px !important;
  269.         }
  270.         
  271.         .form-group label {
  272.             font-size: 12px !important;
  273.             font-weight: 500 !important;
  274.             color: #333 !important;
  275.             margin-bottom: 5px !important;
  276.             display: block !important;
  277.         }
  278.         
  279.         .form-control {
  280.             width: 100% !important;
  281.             padding: 8px 10px !important;
  282.             border: 1px solid #ccc !important;
  283.             border-radius: 6px !important;
  284.             font-size: 13px !important;
  285.             background: #fff !important;
  286.         }
  287.         
  288.         .form-control:focus {
  289.             border-color: #007bff !important;
  290.             outline: none !important;
  291.             box-shadow: 0 0 0 2px rgba(0,123,255,0.1) !important;
  292.         }
  293.         
  294.         /* Boutons */
  295.         .multi_submit {
  296.             display: flex !important;
  297.             gap: 12px !important;
  298.             margin-top: 20px !important;
  299.         }
  300.         
  301.         .btn-primary {
  302.             flex: 1 !important;
  303.             background: #007bff !important;
  304.             border: none !important;
  305.             padding: 8px !important;
  306.             border-radius: 6px !important;
  307.             font-size: 13px !important;
  308.             font-weight: 500 !important;
  309.             cursor: pointer !important;
  310.             color: white !important;
  311.             text-align: center !important;
  312.             transition: background 0.2s !important;
  313.         }
  314.         
  315.         .btn-primary:hover {
  316.             background: #0056b3 !important;
  317.         }
  318.         
  319.         /* Cacher les icônes */
  320.         .pre-icon {
  321.             display: none !important;
  322.         }
  323.         
  324.         /* Petits drapeaux décoratifs */
  325.         .small-flags {
  326.             position: fixed !important;
  327.             bottom: 20px !important;
  328.             right: 20px !important;
  329.             z-index: 2 !important;
  330.             display: flex !important;
  331.             gap: 5px !important;
  332.         }
  333.         
  334.         .small-flag {
  335.             width: 30px !important;
  336.             height: 20px !important;
  337.             background: linear-gradient(135deg, #3b6e2c 33%, #ffffff 33%, #ffffff 66%, #cf0921 66%) !important;
  338.             border-radius: 3px !important;
  339.             animation: smallFlagWave 1s ease-in-out infinite !important;
  340.         }
  341.         
  342.         @keyframes smallFlagWave {
  343.             0%, 100% {
  344.                 transform: rotate(0deg);
  345.             }
  346.             50% {
  347.                 transform: rotate(5deg);
  348.             }
  349.         }
  350.         
  351.         /* Responsive */
  352.         @media (max-width: 500px) {
  353.             .auth-box-w {
  354.                 max-width: 95% !important;
  355.                 margin: 15px auto !important;
  356.                 padding: 18px 18px 22px 18px !important;
  357.             }
  358.             
  359.             .logo-w img {
  360.                 max-width: 60px !important;
  361.             }
  362.             
  363.             .multi_submit {
  364.                 flex-direction: column !important;
  365.                 gap: 8px !important;
  366.             }
  367.             
  368.             .flag-wave {
  369.                 transform: translate(-50%, -50%) scale(0.4) !important;
  370.             }
  371.         }
  372.     </style>
  373. {% endblock %}
  375. {% block fos_user_script %}
  376.     {{ parent() }}
  377.     <script>
  378.         change_submit_name();
  379.         $('#userbundle_user_validCode').on('input', function(e) {
  380.             change_submit_name();
  381.         });
  382.         
  383.         function change_submit_name() {
  384.             if($('#userbundle_user_validCode').val().length > 0) {
  385.                 $('#submit_change_password').val("Initialiser votre mot de passe");
  386.             } else {
  387.                 $('#submit_change_password').val("Demander le code");
  388.             }
  389.         }
  390.         
  391.         // animations supplémentaires
  392.         $(document).ready(function() {
  393.             // Créer des petites particules aux couleurs du drapeau
  394.             setInterval(function() {
  395.                 var colors = ['#3b6e2c', '#ffffff', '#cf0921', '#f3c300'];
  396.                 var particle = $('<div class="flag-particle"></div>');
  397.                 particle.css({
  398.                     position: 'fixed',
  399.                     width: '5px',
  400.                     height: '5px',
  401.                     background: colors[Math.floor(Math.random() * colors.length)],
  402.                     borderRadius: '50%',
  403.                     bottom: '0px',
  404.                     left: Math.random() * window.innerWidth + 'px',
  405.                     opacity: Math.random() * 0.5 + 0.2,
  406.                     zIndex: 1,
  407.                     pointerEvents: 'none'
  408.                 });
  409.                 $('body').append(particle);
  410.                 
  411.                 particle.animate({
  412.                     bottom: window.innerHeight + 'px',
  413.                     opacity: 0
  414.                 }, Math.random() * 3000 + 2000, function() {
  415.                     particle.remove();
  416.                 });
  417.             }, 500);
  418.         });
  419.     </script>
  420. {% endblock %}