email-verification.html.twig

{%  extends 'base.html.twig' %}

{% block javascripts %}
  {{ parent() }}
  {{ encore_entry_script_tags('email_verification') }}
{% endblock %}

{% block title %}email verification
{% endblock %}

{% block body %}
	<div class="flex flex-col items-center justify-center h-screen md:w-[540px] m-auto">
		<div class="w-[250px] h-[150px] lg:w-[300px] lg:h-[200px] mb-6">
			{{ source('assets/images/email.svg') }}
		</div>
		<h3 class="mt-4 mb-6 h3">Entrez le code reçu par mail</h3>
    <div class="w-[404px]">
      <form id="email-verification-form">

        <div id="error-message" class="hidden mb-4 text-xs">
          {% include "@components/Organisms/SnackBar/SnackBar.html.twig" with { text:"Le code saisi n’est pas le valide.", size:"full", variant: "error", withIcon: true } %}
        </div>

        <div class="flex flex-row gap-4">
          {% for i in 1..6 %}
            {% include "@components/Molecules/Fields/FieldInput/FieldInput.html.twig" with {
              name: "code",
              placeholder: '_',
              max: "1",
              verificationCode: true,
              classes: " verification-input",
            } %}
          {% endfor %}
        </div>
      </form>
    </div>
    <hr class="my-[40px] w-full"/>
    <p class="font-bold paragraph-2">Vous n’avez pas reçu le code ? </p>
    <p class="paragraph-3">Pensez à vérifier vos spams, puis essayez de <a href="#">renvoyer le code.</a></p>
	</div>
{% endblock %}