register.html.twig

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

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

{% block title %}Register
{% endblock %}

{% block body %}
    {% include "@components//Molecules/Step/Steps.html.twig" with {
        checkoutSteps:{
          "CART": {
            "id": 1,
            "label": "Vos identifiants"
          },
          "DELIVERY": {
            "id": 2,
            "label": "Vos informations"
          }
        }
    } %}
	<div class="max-w-[400px] px-[25px] pt-[30px] pb-[54px] lg:px-0 lg:pt-[50px] lg:pb-[120px] mx-auto">
		<form action="/email-verification">
			<h2 class="mb-4 h2">Créer mon compte</h2>
      <p class="mb-8">
        Grâce à votre compte, vous pourrez suivre vos commandes, gérer votre profil, recevoir la newsletter, gérer vos listes d’envie...
      </p>

      <div class="step-content active" id="step1">
        <div class="flex flex-col gap-6 mb-3">
          {% include "@components/Molecules/Fields/FieldInput/FieldInput.html.twig" with {
            label: 'Email',
            name: 'email',
            type: 'email',
            placeholder: 'e.shellstrop@mail.com',
            required: true,
          } %}

          {% include "@components/Molecules/Fields/FieldInput/FieldInput.html.twig" with {
            label: 'Mot de passe',
            name: 'password',
            type: 'password',
            placeholder: '########',
            required: true,
          } %}
        </div>
        {% include "@components/Molecules/PasswordControls/PasswordControls.html.twig" %}

        <div class="flex flex-col items-start mt-7">
          {% include "@components/Molecules/Button/Button.html.twig" with { classes: "next-btn", icon_right: 'chevron-right', text: "Etape suivante", variant: "large" } %}

          <div class="mt-9">
            <p>Vous avez déjà un compte ?</p>
            {% include "@components/Molecules/Link/Link.html.twig" with {
              customText: 'Connectez-vous',
              href: '/login'
            } %}
          </div>
        </div>
      </div>

      <div class="step-content" id="step2">
        <div class="flex flex-col gap-6 mb-7">
          {% include "@components/Molecules/Fields/FieldInput/FieldInput.html.twig" with {
            label: 'Prénom',
            name: 'firstname',
            placeholder: 'Ex. Eleanor',
            required: true,
          } %}

          {% include "@components/Molecules/Fields/FieldInput/FieldInput.html.twig" with {
            label: 'Nom',
            name: 'lastname',
            placeholder: 'Ex. Shellstrop',
            required: true,
          } %}
        </div>
        {% include "@components/Atoms/Form/Checkbox.html.twig" with {
          label: 'En souscrivant à notre newsletter, vous acceptez <a href="/politique-de-protection-des-donnees">notre politique de protection des données.*</a>',
          name: 'acceptance',
          required: true,
        } %}

          <div class="mt-9">
            {% include "@components/Molecules/Button/Button.html.twig"  with { classes: "next-btn", icon_right: 'chevron-right', text: "Valider mon inscription",  type: 'submit', variant: "large" } %}
            <p class="mt-6 paragraph-5">* Vos données sont traitées par [Nom de l'entreprise] pour gérer notre relation clientèle, réaliser des analyses statistiques, et vous envoyer des informations sur nos produits, services et évènements, si vous consentez. Vous pouvez vous opposer à ces communications. Vous avez le droit d'accéder, de rectifier, d'effacer, de vous opposer au traitement de vos données. Contactez notre responsable des données à [dpo@domain.com].</p>
          </div>
      </div>

		</form>
	</div>
{% endblock %}