templates/login/login.html.twig line 1

Open in your IDE?
  1. <html>
  2.     <head>
  3.         <meta charset="utf-8">
  4.             <title>Login - MyAudio</title>
  5.             <link href="https://fonts.googleapis.com/css2?family=Dosis:wght@200;300;400;500;600;700;800&amp;display=swap" rel="stylesheet">
  6.             <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  7.              <script
  8.                     src="https://code.jquery.com/jquery-3.6.0.js"
  9.                     integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk="
  10.                     crossorigin="anonymous">
  11.                 </script>
  12.                 <script src="/assets/js/jquery-ui.js"></script>
  13.                             <script src="/assets/js/global.js"></script>
  14.                 <link rel="stylesheet" href="/assets/lib/bootstrap-5.1.3-dist/css/bootstrap.min.css">
  15.                 <script src="/assets/lib/bootstrap-5.1.3-dist/js/bootstrap.bundle.min.js"></script>
  16.             <link rel="stylesheet" href="/assets/css/login/login.css">
  17.     </head>
  18.     <body >
  19.          <img src="/assets/images/Logoproblanc.png" style="max-width: 250px; width: 100%;padding: 15px;">
  21.         <script>
  22.             $(document).ready(function () {
  23.             {% if token is defined %}
  24.                 token = "{{token}}";
  25.             {% else %}
  26.                 token = -1;
  27.             {% endif %}
  30.               if (token != -1){
  31.                   $('#changePassword').modal('show');
  32.               }  
  33.             });
  35.         </script>
  36.         <div class="login-container">
  37.             <div class="row login-row">
  38.                 <div class="col-md-12 login-form">
  39.                     <div id="formulaire">
  40.                         <h3>Identifiez-vous</h3>
  41.                         <form onsubmit="login(); return false;">
  42.                             <div class="form-group">
  43.                             <input type="text" class="form-control" pattern="^([0]{1}[0-9]{9})|([a-zA-Z0-9._-]+@[a-zA-Z0-9._-]+.[a-zA-Z.]{2,15})$" id="email" name="username" title="Téléphone à 10 chiffres ou email" required placeholder="Email">
  44.                             </div>
  45.                             <div class="form-group">
  46.                             <input type="password" class="form-control" id="password" name="password" required placeholder="Mot de passe">
  47.                             </div>
  48.                             <div class="form-group">
  49.                             <input type="submit"  class="btn btn-primary btn-lg btn-block" value="Se connecter">
  50.                             </div>
  51.                             <div id="erreur"></div>
  52.                             <div class="form-group forget-password">
  53.                                 <a onclick="$('#recoverModal').modal('show');" style=" cursor:pointer;" >Mot de passe oublié ?</a>
  54.                             </div>
  55.                         </form>
  56.                     </div>
  57.                    
  58.                 </div>
  59.             </div>
  60.         </div>
  61.         <script src="/assets/js/login.js"></script>
  63.         
  65.         <!-- Modal de récupération de mot de passe -->
  66.             <div class="modal fade" id="recoverModal" tabindex="-1" aria-labelledby="recoverModal" aria-hidden="true">
  67.             <div class="modal-dialog  modal-dialog-centered">
  68.                 <div class="modal-content">
  69.                 <div class="modal-header">
  70.                     <h5 class="modal-title" id="recoverModal">Mot de passe oublié</h5>
  71.                     <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
  72.                 </div>
  73.                 <div class="modal-body">
  74.                 <form name="lost_paswword" onsubmit="forgotPassword(); return false;" style="text-align:center;">
  75.                     <div class="input-group">
  76.                     <input type="email" class="form-control" id="mail" aria-describedby="email" placeholder="Votre e-mail" required />
  77.                     </div>
  78.                     <button type="submit" class="btn btn_sign btn-primary btn-lg btn-block" style="padding: 5px 40px;margin-top:20px;max-width:200px;">Valider</button><br>
  79.                     
  80.                     </form>
  81.                 </div>
  83.                 </div>
  84.             </div>
  85.             </div>
  87.             <!-- Modal de modification de mot de passe -->
  88.             <div class="modal fade" id="changePassword" tabindex="-1" aria-labelledby="changePassword" aria-hidden="true">
  89.             <div class="modal-dialog  modal-dialog-centered">
  90.                 <div class="modal-content">
  91.                 <div class="modal-header" style="display:block;">
  92.                     <h5 class="modal-title" >Mot de passe oublié</h5>
  93.                     <p style="font-size: 18px;margin-bottom: 0;">Créer un nouveau mot de passe</p>
  94.                     <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
  95.                 </div>
  96.                 <div class="modal-body">
  97.                     <form name="change_paswword" onsubmit="modifyPassword({% if token is defined %}'{{token}}'{% endif %}); return false;" style="text-align:center;">
  98.                     <div class="input-group" style="flex-wrap:wrap;">
  99.                         <div class="containerPassword passContainer" style="width:100%">
  100.                             <input type="password" class="form-control" id="new_password" aria-describedby="password_create"
  101.                             placeholder="Mot de passe" style="margin-bottom:0" required />
  102.                             <i class="far fa-eye" id="toggleNewPassword" style='right:0;'></i>
  103.                         </div>
  104.                         <div class="containerPassword confirmContainer" style="width:100%; margin-top:20px;">
  105.                             <input type="password" class="form-control " id="new_password_confirm" aria-describedby="password_confirm"
  106.                             placeholder="Confirmer mot de passe" style="margin-bottom:0" required />
  107.                             <i class="far fa-eye" id="toggleNewConfirm"></i>
  108.                         </div>
  109.                         </div>
  110.                         <p id="alertNewPassword" class="alertMyAudio" style="display:none; color:red;">Les mots de passes ne sont pas identiques</p>
  111.                         <button type="submit" class="btn btn_sign btn-primary btn-lg btn-block" style="padding: 5px 40px;margin-top:20px;max-width:200px;">Valider</button><br>
  112.                         <a class="textUnderButton" style="font-size:15px; cursor:pointer;" onclick="$('#changePassword').modal('hide');">Annuler</a>
  113.                         <p id="alertModifyPawd" class="alertMyAudio"></p>
  114.                     </form>
  115.                 </div>
  117.                 </div>
  118.             </div>
  119.             </div>
  121.             <!-- Modal de confirmation récup mdp -->
  122.             <div class="modal fade" id="recoverConfirmModal" tabindex="-1" aria-labelledby="recoverConfirmModal" aria-hidden="true">
  123.             <div class="modal-dialog  modal-dialog-centered">
  124.                 <div class="modal-content">
  125.                 <div class="modal-header">
  126.                     <h5 class="modal-title" id="recoverConfirmModal">Mot de passe oublié</h5>
  127.                     <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
  128.                 </div>
  129.                 <div class="modal-body">
  130.                     <p class="confirm_text">Un mail vous a été envoyé.</p>
  131.                     <p class="confirm_text">Cliquez sur le lien du mail afin de réinitialiser votre mot de passe.</p>
  132.                 </div>
  133.                 </div>
  134.             </div>
  135.             </div>
  137.              <!-- Modal Validation passwor -->
  139. <div class="modal fade" id="validChangePassword" tabindex="-1" aria-labelledby="validChangePassword" aria-hidden="true">
  140.     <div class="modal-dialog  modal-dialog-centered">
  141.       <div class="modal-content">
  142.         <div class="modal-header">
  143.           <h5 class="modal-title" id="valid_ChangePassword">Changement de votre mot de passe validé</h5>
  144.           <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
  145.         </div>
  146.         <div class="modal-body">
  147.           <img class="confirm_img" alt="confirm" src="/assets/images/OK.png" />
  148.           <p class="confirm_text">Votre mot de passe a bien été mis à jour avec succès</p>
  149.         </div>
  150.        
  151.       </div>
  152.     </div>
  153.   </div>
  154.     </body>
  155. </html>