templates/compte_client/mot_de_passe_oublier.html.twig line 1

Open in your IDE?
  1. {% extends 'layouts/layout_no_connected.html.twig' %}
  3. {% block title %}Mes identifiants{% endblock %}
  5. {% block body %}
  6. <style>
  7. .input-view-password-forget {
  8. border-top-right-radius: .375rem!important;
  9. border-bottom-right-radius: .375rem!important;
  10. }
  11. </style>
  12. <body class="d-flex align-items-center bg-auth border-top border-top-2 border-primary">
  13. <div class="container-fluid">
  14. <div class="row justify-content-center">
  15. <div class="col-12 col-md-5 col-lg-6 col-xl-4 px-lg-6 my-5 align-self-center">
  16. <div id="carousel-mot-de-passe-oublier" class="carousel slide" data-bs-touch="false" data-bs-interval="false">
  17. <div class="carousel-inner">
  18. <div class="carousel-item active">
  19. <h1 class="display-4 text-center mb-3">
  20. Mot de passe oublié ?
  21. </h1>
  22. <p class="text-muted text-center mb-5">
  23. Entrez votre adresse email et nous vous enverrons un code pour accéder à votre compte.
  24. </p>
  25. {% include "partials/_information.html.twig" %}
  26. <form method="POST" id="tunnel-verification-email-compte" action="#">
  27. <div class="form-group">
  28. <label class="form-label">
  29. Adresse e-mail
  30. </label>
  31. <input type="email" id="tunnel-verification-email-input" name="email" class="form-control" placeholder="name@address.com" required autofocus>
  32. <div class="invalid-feedback" id="tunnel-verification-email-input-error"></div>
  33. </div>
  34. <input type="hidden" name="token" value="{{ csrf_token('check-email-compte') }}">
  35. </form>
  36. <button class="btn btn-lg w-100 btn-info mb-3" type="button" id="tunnel-carrousel-password-forget-1">
  37. <span class="spinner-border spinner-border-sm spinner-14px d-none" id="spinner-tunnel-carrousel-password-forget-1" role="status" aria-hidden="true"></span>
  38. suivant
  39. </button>
  40. <a href="{{ path('app_login') }}" class="btn btn-lg w-100 btn-info mt-3 mb-3">
  41. Annuler
  42. </a>
  43. </div>
  44. <div class="carousel-item">
  45. <p class="text-muted">
  46. Un code de confirmation est envoyé (dans les 3 min) à l'adresse <span id="tunnnel-email-verified"></span>.
  47. <br>
  48. Renseignez-le ci-dessous puis créez votre mot de passe.
  49. </p>
  50. <p class="text-muted">
  51. Le mot de passe doit contenir au minimum 8 caratères et avoir au moins :
  52. </p>
  53. <ul class="text-muted mb-5">
  54. <li>Une majuscule</li>
  55. <li>Un chiffre</li>
  56. <li>Un des caractères suivantes : @ / # ! </li>
  57. </ul>
  58. <div class="alert alert-danger d-none text-justify" id="alert-message-code-confirmation" role="alert">
  59. <span id="message-code-confirmation"></span>
  60. </div>
  61. <form method="POST" action="#" id="tunnnel-code-confirmation-compte">
  62. <div class="form-group">
  63. <label class="form-label">
  64. Code de confirmation
  65. </label>
  66. <input type="text" name="code-confirmation" id="code-confirmation" class="form-control" placeholder="Saisir le code de confirmation" required>
  67. <div class="invalid-feedback" id="code-confirmation-error"></div>
  68. </div>
  69. <div class="form-group">
  70. <div class="row">
  71. <div class="col">
  72. <label class="form-label">
  73. Nouveau mot de passe
  74. </label>
  75. </div>
  76. </div>
  77. <div class="input-group input-group-merge">
  78. <input type="password" name="password-new" id="password-new" class="form-control" placeholder="Tapez votre mot de passe" required>
  79. <a href="#" class="input-group-text text-muted input-view-password-forget" data-type="1">
  80. <i class="fe fe-eye"></i>
  81. </a>
  82. <div class="invalid-feedback" id="password-new-error"></div>
  83. </div>
  84. </div>
  85. <div class="form-group">
  86. <div class="row">
  87. <div class="col">
  88. <label class="form-label">
  89. Confirmer le mot de passe
  90. </label>
  91. </div>
  92. </div>
  93. <div class="input-group input-group-merge">
  94. <input type="password" name="password-confirme" id="password-confirme" class="form-control" placeholder="Tapez votre mot de passe" required>
  95. <a href="#" class="input-group-text text-muted input-view-password-forget" data-type="1">
  96. <i class="fe fe-eye"></i>
  97. </a>
  98. <div class="invalid-feedback" id="password-confirme-error"></div>
  99. </div>
  100. </div>
  101. <input type="hidden" name="token" value="{{ csrf_token('code-confirmation') }}">
  102. <input type="hidden" name="email" id="email-code-confirmation" value="">
  103. <button class="btn btn-lg w-100 btn-info mb-3" type="button" id="tunnel-carrousel-password-forget-2">
  104. <span class="spinner-border spinner-border-sm spinner-14px d-none" id="spinner-tunnel-carrousel-password-forget-2" role="status" aria-hidden="true"></span>
  105. suivant
  106. </button>
  107. <button class="btn btn-lg w-100 btn-info mb-3 tunnel-carrousel-password-forget-prev" type="button">
  108. Précedent
  109. </button>
  110. </form>
  111. </div>
  112. <div class="carousel-item">
  113. <h2 class="text-center text-info mb-5">
  114. <span class="fe fe-check-circle" style="font-size: 50px;"></span>
  115. </h2>
  116. <p class="text-muted text-center mb-5">
  117. Votre mot de passe a été mis à jour.
  118. </p>
  119. <a href="{{ path('app_login') }}" class="btn btn-lg w-100 btn-info mt-3 mb-3">
  120. Se connecter
  121. </a>
  122. </div>
  123. </div>
  124. </div>
  125. </div>
  126. <div
  127. class="col-12 col-md-7 col-lg-6 col-xl-8 d-none d-lg-block">
  128. <div class="bg-cover h-100 min-vh-100 mt-n1 me-n3" style="background-image: url(assets/img/centre/bg-login.png);"></div>
  129. </div>
  130. </div>
  131. </div>
  132. </body>
  133. </body>
  134. {% endblock %}
  136. {% block javascripts %}
  137. {{ parent() }}
  139. {% include "compte_client/mot_de_passe_oublier.js.twig" %}
  140. {% endblock %}