templates/account/account.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block title %}Les trésors de Luna{% endblock %}
  5. {% block javascripts %}
  7.     <script type="module">
  8.         import FormValidation from '{{asset("js/classes/FormValidation.js")}}'
  9.         window.addEventListener('load', () => {
  10.             
  11.             const registrationForm = document.getElementById('registration_form')
  12.             const excludedInputsId = ['registration_form_agreeTerms', 'registration_form__token']
  13.             const createAccountButton = document.getElementById('create-user-acount-button')
  14.             
  15.             const formValidation = new FormValidation(registrationForm, createAccountButton, excludedInputsId)
  16.             
  17.         })
  19.     </script>
  20. {% endblock javascripts %}
  22. {% block body %}
  24. <body>
  26.     <svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
  27.         <defs>
  28.             <symbol xmlns="http://www.w3.org/2000/svg" id="link" viewBox="0 0 24 24">
  29.                 <path fill="currentColor"
  30.                     d="M12 19a1 1 0 1 0-1-1a1 1 0 0 0 1 1Zm5 0a1 1 0 1 0-1-1a1 1 0 0 0 1 1Zm0-4a1 1 0 1 0-1-1a1 1 0 0 0 1 1Zm-5 0a1 1 0 1 0-1-1a1 1 0 0 0 1 1Zm7-12h-1V2a1 1 0 0 0-2 0v1H8V2a1 1 0 0 0-2 0v1H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3V6a3 3 0 0 0-3-3Zm1 17a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-9h16Zm0-11H4V6a1 1 0 0 1 1-1h1v1a1 1 0 0 0 2 0V5h8v1a1 1 0 0 0 2 0V5h1a1 1 0 0 1 1 1ZM7 15a1 1 0 1 0-1-1a1 1 0 0 0 1 1Zm0 4a1 1 0 1 0-1-1a1 1 0 0 0 1 1Z" />
  31.             </symbol>
  32.             <symbol xmlns="http://www.w3.org/2000/svg" id="arrow-right" viewBox="0 0 24 24">
  33.                 <path fill="currentColor"
  34.                     d="M17.92 11.62a1 1 0 0 0-.21-.33l-5-5a1 1 0 0 0-1.42 1.42l3.3 3.29H7a1 1 0 0 0 0 2h7.59l-3.3 3.29a1 1 0 0 0 0 1.42a1 1 0 0 0 1.42 0l5-5a1 1 0 0 0 .21-.33a1 1 0 0 0 0-.76Z" />
  35.             </symbol>
  36.             <symbol xmlns="http://www.w3.org/2000/svg" id="category" viewBox="0 0 24 24">
  37.                 <path fill="currentColor"
  38.                     d="M19 5.5h-6.28l-.32-1a3 3 0 0 0-2.84-2H5a3 3 0 0 0-3 3v13a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-10a3 3 0 0 0-3-3Zm1 13a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-13a1 1 0 0 1 1-1h4.56a1 1 0 0 1 .95.68l.54 1.64a1 1 0 0 0 .95.68h7a1 1 0 0 1 1 1Z" />
  39.             </symbol>
  40.             <symbol xmlns="http://www.w3.org/2000/svg" id="calendar" viewBox="0 0 24 24">
  41.                 <path fill="currentColor"
  42.                     d="M19 4h-2V3a1 1 0 0 0-2 0v1H9V3a1 1 0 0 0-2 0v1H5a3 3 0 0 0-3 3v12a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3V7a3 3 0 0 0-3-3Zm1 15a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-7h16Zm0-9H4V7a1 1 0 0 1 1-1h2v1a1 1 0 0 0 2 0V6h6v1a1 1 0 0 0 2 0V6h2a1 1 0 0 1 1 1Z" />
  43.             </symbol>
  44.             <symbol xmlns="http://www.w3.org/2000/svg" id="heart" viewBox="0 0 24 24">
  45.                 <path fill="currentColor"
  46.                     d="M20.16 4.61A6.27 6.27 0 0 0 12 4a6.27 6.27 0 0 0-8.16 9.48l7.45 7.45a1 1 0 0 0 1.42 0l7.45-7.45a6.27 6.27 0 0 0 0-8.87Zm-1.41 7.46L12 18.81l-6.75-6.74a4.28 4.28 0 0 1 3-7.3a4.25 4.25 0 0 1 3 1.25a1 1 0 0 0 1.42 0a4.27 4.27 0 0 1 6 6.05Z" />
  47.             </symbol>
  48.             <symbol xmlns="http://www.w3.org/2000/svg" id="plus" viewBox="0 0 24 24">
  49.                 <path fill="currentColor"
  50.                     d="M19 11h-6V5a1 1 0 0 0-2 0v6H5a1 1 0 0 0 0 2h6v6a1 1 0 0 0 2 0v-6h6a1 1 0 0 0 0-2Z" />
  51.             </symbol>
  52.             <symbol xmlns="http://www.w3.org/2000/svg" id="minus" viewBox="0 0 24 24">
  53.                 <path fill="currentColor" d="M19 11H5a1 1 0 0 0 0 2h14a1 1 0 0 0 0-2Z" />
  54.             </symbol>
  55.             <symbol xmlns="http://www.w3.org/2000/svg" id="cart" viewBox="0 0 24 24">
  56.                 <path fill="currentColor"
  57.                     d="M8.5 19a1.5 1.5 0 1 0 1.5 1.5A1.5 1.5 0 0 0 8.5 19ZM19 16H7a1 1 0 0 1 0-2h8.491a3.013 3.013 0 0 0 2.885-2.176l1.585-5.55A1 1 0 0 0 19 5H6.74a3.007 3.007 0 0 0-2.82-2H3a1 1 0 0 0 0 2h.921a1.005 1.005 0 0 1 .962.725l.155.545v.005l1.641 5.742A3 3 0 0 0 7 18h12a1 1 0 0 0 0-2Zm-1.326-9l-1.22 4.274a1.005 1.005 0 0 1-.963.726H8.754l-.255-.892L7.326 7ZM16.5 19a1.5 1.5 0 1 0 1.5 1.5a1.5 1.5 0 0 0-1.5-1.5Z" />
  58.             </symbol>
  59.             <symbol xmlns="http://www.w3.org/2000/svg" id="check" viewBox="0 0 24 24">
  60.                 <path fill="currentColor"
  61.                     d="M18.71 7.21a1 1 0 0 0-1.42 0l-7.45 7.46l-3.13-3.14A1 1 0 1 0 5.29 13l3.84 3.84a1 1 0 0 0 1.42 0l8.16-8.16a1 1 0 0 0 0-1.47Z" />
  62.             </symbol>
  63.             <symbol xmlns="http://www.w3.org/2000/svg" id="trash" viewBox="0 0 24 24">
  64.                 <path fill="currentColor"
  65.                     d="M10 18a1 1 0 0 0 1-1v-6a1 1 0 0 0-2 0v6a1 1 0 0 0 1 1ZM20 6h-4V5a3 3 0 0 0-3-3h-2a3 3 0 0 0-3 3v1H4a1 1 0 0 0 0 2h1v11a3 3 0 0 0 3 3h8a3 3 0 0 0 3-3V8h1a1 1 0 0 0 0-2ZM10 5a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v1h-4Zm7 14a1 1 0 0 1-1 1H8a1 1 0 0 1-1-1V8h10Zm-3-1a1 1 0 0 0 1-1v-6a1 1 0 0 0-2 0v6a1 1 0 0 0 1 1Z" />
  66.             </symbol>
  67.             <symbol xmlns="http://www.w3.org/2000/svg" id="star-outline" viewBox="0 0 15 15">
  68.                 <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
  69.                     d="M7.5 9.804L5.337 11l.413-2.533L4 6.674l2.418-.37L7.5 4l1.082 2.304l2.418.37l-1.75 1.793L9.663 11L7.5 9.804Z" />
  70.             </symbol>
  71.             <symbol xmlns="http://www.w3.org/2000/svg" id="star-solid" viewBox="0 0 15 15">
  72.                 <path fill="currentColor"
  73.                     d="M7.953 3.788a.5.5 0 0 0-.906 0L6.08 5.85l-2.154.33a.5.5 0 0 0-.283.843l1.574 1.613l-.373 2.284a.5.5 0 0 0 .736.518l1.92-1.063l1.921 1.063a.5.5 0 0 0 .736-.519l-.373-2.283l1.574-1.613a.5.5 0 0 0-.283-.844L8.921 5.85l-.968-2.062Z" />
  74.             </symbol>
  75.             <symbol xmlns="http://www.w3.org/2000/svg" id="search" viewBox="0 0 24 24">
  76.                 <path fill="currentColor"
  77.                     d="M21.71 20.29L18 16.61A9 9 0 1 0 16.61 18l3.68 3.68a1 1 0 0 0 1.42 0a1 1 0 0 0 0-1.39ZM11 18a7 7 0 1 1 7-7a7 7 0 0 1-7 7Z" />
  78.             </symbol>
  79.             <symbol xmlns="http://www.w3.org/2000/svg" id="user" viewBox="0 0 24 24">
  80.                 <path fill="currentColor"
  81.                     d="M15.71 12.71a6 6 0 1 0-7.42 0a10 10 0 0 0-6.22 8.18a1 1 0 0 0 2 .22a8 8 0 0 1 15.9 0a1 1 0 0 0 1 .89h.11a1 1 0 0 0 .88-1.1a10 10 0 0 0-6.25-8.19ZM12 12a4 4 0 1 1 4-4a4 4 0 0 1-4 4Z" />
  82.             </symbol>
  83.             <symbol xmlns="http://www.w3.org/2000/svg" id="close" viewBox="0 0 15 15">
  84.                 <path fill="currentColor"
  85.                     d="M7.953 3.788a.5.5 0 0 0-.906 0L6.08 5.85l-2.154.33a.5.5 0 0 0-.283.843l1.574 1.613l-.373 2.284a.5.5 0 0 0 .736.518l1.92-1.063l1.921 1.063a.5.5 0 0 0 .736-.519l-.373-2.283l1.574-1.613a.5.5 0 0 0-.283-.844L8.921 5.85l-.968-2.062Z" />
  86.             </symbol>
  88.         </defs>
  89.     </svg>
  91.     <div class="preloader-wrapper">
  92.         <div class="preloader">
  93.         </div>
  94.     </div>
  96.     <div class="offcanvas offcanvas-end" data-bs-scroll="true" tabindex="-1" id="offcanvasCart"
  97.         aria-labelledby="My Cart">
  98.         <div class="offcanvas-header justify-content-center">
  99.             <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  100.         </div>
  101.         <div class="offcanvas-body">
  102.             <div class="order-md-last">
  103.                 <h4 class="d-flex justify-content-between align-items-center mb-3">
  104.                     <span class="text-primary">Your cart</span>
  105.                     <span class="badge bg-primary rounded-circle pt-2">3</span>
  106.                 </h4>
  107.                 <ul class="list-group mb-3">
  108.                     <li class="list-group-item d-flex justify-content-between lh-sm">
  109.                         <div>
  110.                             <h6 class="my-0">Grey Hoodie</h6>
  111.                             <small class="text-body-secondary">Brief description</small>
  112.                         </div>
  113.                         <span class="text-body-secondary">$12</span>
  114.                     </li>
  115.                     <li class="list-group-item d-flex justify-content-between lh-sm">
  116.                         <div>
  117.                             <h6 class="my-0">Dog Food</h6>
  118.                             <small class="text-body-secondary">Brief description</small>
  119.                         </div>
  120.                         <span class="text-body-secondary">$8</span>
  121.                     </li>
  122.                     <li class="list-group-item d-flex justify-content-between lh-sm">
  123.                         <div>
  124.                             <h6 class="my-0">Soft Toy</h6>
  125.                             <small class="text-body-secondary">Brief description</small>
  126.                         </div>
  127.                         <span class="text-body-secondary">$5</span>
  128.                     </li>
  129.                     <li class="list-group-item d-flex justify-content-between">
  130.                         <span class="fw-bold">Total (USD)</span>
  131.                         <strong>$20</strong>
  132.                     </li>
  133.                 </ul>
  135.                 <button class="w-100 btn btn-primary btn-lg" type="submit">Continue to checkout</button>
  136.             </div>
  137.         </div>
  138.     </div>
  140.     <div class="offcanvas offcanvas-end" data-bs-scroll="true" tabindex="-1" id="offcanvasSearch"
  141.         aria-labelledby="Search">
  142.         <div class="offcanvas-header justify-content-center">
  143.             <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  144.         </div>
  145.         <div class="offcanvas-body">
  147.             <div class="order-md-last">
  148.                 <h4 class="text-primary text-uppercase mb-3">
  149.                     Search
  150.                 </h4>
  151.                 {#
  152.                 <div class="search-bar border rounded-2 border-dark-subtle">
  153.                     <form id="search-form" class="text-center d-flex align-items-center" action="" method="">
  154.                         <input type="text" class="form-control border-0 bg-transparent" placeholder="Search Here" />
  155.                         <iconify-icon icon="tabler:search" class="fs-4 me-3"></iconify-icon>
  156.                     </form>
  157.                 </div>
  158.                 #}
  160.             </div>
  161.         </div>
  162.     </div>
  164.     <section id="banner" class="py-3" style="background: #F9F3EC;">
  165.         <div class="container">
  166.             <div class="hero-content py-5 my-3">
  167.                 <h2 class="display-1 mt-3 mb-0">Votre compte</h2>
  168.                 <nav class="breadcrumb">
  169.                     <a class="breadcrumb-item nav-link" href="{{path('app_home')}}">Accueil</a>
  170.                     <span class="breadcrumb-item active" aria-current="page">Compte utilisateur</span>
  171.                 </nav>
  172.             </div>
  173.         </div>
  174.     </section>
  176.     {% for flash_error in app.flashes('verify_email_error') %}
  177.         <div class="alert alert-danger" role="alert">{{ flash_error }}</div>
  178.     {% endfor %}
  180.     <section class="login-tabs padding-large">
  181.         <div class="container my-5 py-5">
  182.             <div class="row">
  183.                 <div class="tabs-listing">
  184.                     <nav>
  185.                         <div class="nav nav-tabs d-flex justify-content-center border-dark-subtle mb-3" id="nav-tab"
  186.                             role="tablist">
  187.                             <button
  188.                                 class="nav-link mx-3 fs-3 border-bottom border-dark-subtle border-0 text-uppercase active"
  189.                                 id="nav-sign-in-tab" data-bs-toggle="tab" data-bs-target="#nav-sign-in" type="button"
  190.                                 role="tab" aria-controls="nav-sign-in" aria-selected="true">Connexion</button>
  191.                             <button class="nav-link mx-3 fs-3 border-bottom border-dark-subtle border-0 text-uppercase"
  192.                                 id="nav-register-tab" data-bs-toggle="tab" data-bs-target="#nav-register" type="button"
  193.                                 role="tab" aria-controls="nav-register" aria-selected="false">Créer un compte</button>
  194.                         </div>
  195.                     </nav>
  196.                     
  197.                     <div class="tab-content" id="nav-tabContent">
  198.                         <div class="tab-pane fade active show" id="nav-sign-in" role="tabpanel"
  199.                             aria-labelledby="nav-sign-in-tab">
  200.                             <div class="col-lg-8 offset-lg-2 mt-5">
  201.                                 {#
  202.                                 <p class="mb-0">Log-In With Social</p>
  203.                                 <hr class="my-1">
  204.                                 #}
  205.                                 <div class="social-wrapper row mt-4 mb-4">
  206.                                     <div class="d-grid col-md-6 my-2">
  207.                                         <div id="g_id_onload"
  208.                                         data-client_id="221318372673-1p9ujk71bfmi1t4a8n5n38c6g8qvs1b4.apps.googleusercontent.com"
  209.                                         data-context="signin"
  210.                                         data-ux_mode="popup"
  211.                                         data-login_uri="https://lestresorsdeluna.fr/connect/google/callback"
  212.                                         data-auto_prompt="false">
  213.                                    </div>
  214.                                    
  215.                                    <div class="g_id_signin"
  216.                                         data-type="standard"
  217.                                         data-shape="rectangular"
  218.                                         data-theme="outline"
  219.                                         data-text="signin_with"
  220.                                         data-size="large"
  221.                                         data-logo_alignment="left">
  222.                                    </div>
  223.                                     </div>
  224.                                     {#
  225.                                     <div class="d-grid col-md-6 my-2">
  226.                                         <a href="#" class="btn btn-outline-dark btn-lg text-uppercase fs-6 rounded-1 ">
  227.                                             <div class="d-flex flex-wrap justify-content-center">
  228.                                                 <iconify-icon icon="ion:logo-facebook"
  229.                                                     class="signup-social-icon me-2"></iconify-icon>
  230.                                                 <p class="mb-0">Facebook</p>
  231.                                             </div>
  232.                                         </a>
  233.                                     </div>
  234.                                     #}
  235.                                 </div>
  238.                                 <p class="mb-0">Connexion par Email</p>
  239.                                 <hr class="my-1">
  241.                                 <form id="login_form" action="{{ path('app_login') }}" data-link="{{path('app_login')}}" method="post" class="form-group flex-wrap ">
  243.                                     {% if error %}
  244.                                     <div class="alert alert-danger">{{ error.messageKey|trans(error.messageData, 'security') }}</div>
  245.                                     {% endif %}
  246.                                     
  247.                                     {% if app.user %}
  248.                                     <div class="mb-3">
  249.                                     Vous êtes connecté à {{ app.user.userIdentifier }}, <a href="{{ path('app_logout') }}">Logout</a>
  250.                                     </div>
  251.                                     {% endif %}                                    
  252.                                     <div class="form-input col-lg-12 my-4">
  253.                                     
  254.                                     <input type="email" value="{{ last_username }}" name="_username" id="username" class="form-control mb-3 p-4" placeholder="Email" autocomplete="email" required autofocus>
  255.                                     <input type="password" name="_password" id="password" class="form-control mb-3 p-4" placeholder="Mot de passe" autocomplete="current-password" aria-describedby="passwordHelpBlock" required>
  256.                                     <input type="hidden" name="_csrf_token" value="{{ csrf_token('authenticate') }}">                                        
  257.                                     
  258.                                     <label class="py-3 d-flex flex-wrap justify-content-between">
  259.                                     <div>
  260.                                     <input type="checkbox" name="_remember_me" class="d-inline">
  261.                                     <span class="label-body ">Se rappeler de moi</span>
  262.                                     </div>
  263.                                     
  264.                                     <div id="passwordHelpBlock" class="form-text ">
  265.                                     <a href="#" class="text-primary  fw-bold"> Mot de passe oublié ?</a>
  266.                                     </div>
  267.                                     </label>
  268.                                     
  269.                                     <div class="d-grid my-3">
  270.                                     <button type="submit" href="#" class="btn btn-dark btn-lg rounded-1">Se connecter</button>
  271.                                     </div>                                     
  272.                                     
  273.                                     </div>
  274.                                     
  275.                                     
  276.                                                                         
  277.                                 </form>
  279.                             </div>
  281.                         </div>
  282.                         <div class="tab-pane fade" id="nav-register" role="tabpanel" aria-labelledby="nav-register-tab">
  283.                             <div class="col-lg-8 offset-lg-2 mt-5">
  284.                                 
  285.                                 {{form_start(registrationForm)}}
  286.                                 <div class="form-input col-lg-12 my-4">
  288.                                     <label style="color: red;" for="registration_form_surname"></label>
  289.                                     {{form_widget(registrationForm.surname)}}
  291.                                     <label style="color: red;" for="registration_form_firstname"></label>
  292.                                     {{form_widget(registrationForm.firstname)}}
  294.                                     <label style="color: red;" for="registration_form_phone"></label>
  295.                                     {{form_widget(registrationForm.phone)}}
  297.                                     <label style="color: red;" for="registration_form_adress"></label>
  298.                                     {{form_widget(registrationForm.adress)}}
  300.                                     <label style="color: red;" for="registration_form_additionalAdressInformation"></label>
  301.                                     {{form_widget(registrationForm.additionalAdressInformation)}}
  303.                                     <label style="color: red;" for="registration_form_city"></label>
  304.                                     {{form_widget(registrationForm.city)}}
  306.                                     <label style="color: red;" for="registration_form_zipcode"></label>
  307.                                     {{form_widget(registrationForm.zipcode)}}
  309.                                     <label style="color: red;" for="registration_form_email"></label>
  310.                                     {{form_widget(registrationForm.email)}}
  312.                                     <div class="errors" style="color: red;">
  313.                                         {{ form_errors(registrationForm.plainPassword) }}
  314.                                     </div>
  315.                                     <label style="color: red;" for="registration_form_plainPassword"></label>
  316.                                     {{form_widget(registrationForm.plainPassword)}}
  318.                                     <label id="repeated-pass-label" style="color: red;" for="inputPassword2"></label>
  319.                                     <input type="password" id="inputPassword2" placeholder="Retapez votre mot de passe"
  320.                                     class="form-control mb-3 p-4 formValidationCode" aria-describedby="passwordHelpBlock" required>
  322.                                     <label class="py-3 d-flex flex-wrap justify-content-between">
  323.                                         <div>
  324.                                             {{form_widget(registrationForm.agreeTerms)}}
  325.                                             {{form_label(registrationForm.agreeTerms)}} <a style="font-size: 1rem; color: black; font-weight: bold;" href="{{path('cgv')}}" target="_blank">Lire les CGV</a>
  326.                                             
  327.                                         </div>
  328.                                     </label>
  330.                                     <div class="d-grid my-3">
  331.                                         <button id="create-user-acount-button" type="submit" class="btn btn-dark btn-lg rounded-1">Créer le compte</a>
  332.                                     </div>
  334.                                 </div>
  335.                                 {{form_end(registrationForm)}}
  337.                             </div>
  338.                         </div>
  339.                     </div>
  340.                 </div>
  341.             </div>
  342.         </div>
  343.     </section>
  345.     <script src="{{asset('js/login.js')}}"></script>
  347. </body>
  349. {% endblock %}