diff --git a/lemarche/templates/auth/signup.html b/lemarche/templates/auth/signup.html index 794ac5bb8..4c59584f8 100644 --- a/lemarche/templates/auth/signup.html +++ b/lemarche/templates/auth/signup.html @@ -1,126 +1,164 @@ {% extends "layouts/base.html" %} -{% load dsfr_tags %} +{% load static dsfr_tags process_dict %} {% block title %}Inscription{{ block.super }}{% endblock title %} -{% block content %} -
-
-
-
- -
-
-
-
- -
-
-
-
-

Inscription

-
-
-
-
+{% block breadcrumb %} + {% process_dict current="Inscription" as breadcrumb_data %} + {% dsfr_breadcrumb breadcrumb_data %} +{% endblock breadcrumb %} -
-
-
-
-
- {% csrf_token %} - {% if form.non_field_errors %} -
- {{ form.non_field_errors }} -
- {% endif %} - - -
- Vous êtes * - {% dsfr_form_field form.kind %} -
-
- - -
- Contact - {% dsfr_form_field form.first_name %} - {% dsfr_form_field form.last_name %} - {% dsfr_form_field form.phone %} -
-
- - -
- Informations structure - {% dsfr_form_field form.buyer_kind_detail %} - {% dsfr_form_field form.partner_kind %} - {% dsfr_form_field form.company_name %} - {% dsfr_form_field form.position %} - {% dsfr_form_field form.sectors %} -
- -
- Une fois votre compte créé, vous pourrez ajouter puis modifier votre structure. -
-
-
-
- - -
- Création du mot de passe - {% dsfr_form_field form.email %} - {% dsfr_form_field form.password1 %} - {% dsfr_form_field form.password2 %} -
-
- - -
-
-
- {% dsfr_form_field form.nb_of_inclusive_provider_last_year %} - {% dsfr_form_field form.nb_of_handicap_provider_last_year %} - Ces informations resteront confidentielles, elles ne seront traitées qu'à des fins statistiques. -
-
-
-
-
- {{ form.accept_rgpd }} - -
-
- {% dsfr_form_field form.accept_survey %} - {% dsfr_form_field form.accept_share_contact_to_external_partners %} -
-
- - -
-
-
- -
-
-
-
+{% block content %} +
+
+
+
+
+

Inscription

+
+
+ {% csrf_token %} + {% if form.non_field_errors %} +
+ {{ form.non_field_errors }} +
+ {% endif %} +
+
+ +
+ +

Vous êtes

+ +
+
+
+ {% dsfr_form_field form.kind %} +
+
+
+
+ +
+ +

Contact

+ +
+
+
+ {% dsfr_form_field form.first_name %} +
+
+ {% dsfr_form_field form.last_name %} +
+
+ {% dsfr_form_field form.phone %} +
+
+
+
+ +
+ +

Informations structure

+ +
+
+
+ {% dsfr_form_field form.buyer_kind_detail %} +
+
+ {% dsfr_form_field form.partner_kind %} +
+
+ {% dsfr_form_field form.company_name %} +
+
+ {% dsfr_form_field form.position %} +
+
+ {% dsfr_form_field form.sectors %} +
+
+ {% dsfr_alert title="Le nom de votre structure" type="info" content="Une fois votre compte créé, vous pourrez ajouter puis modifier votre structure." %} +
+
+
+
+ +
+ +

Création du mot de passe

+ +
+
+
+ {% dsfr_form_field form.email %} +
+
+ {% dsfr_form_field form.password1 %} +
+
+ {% dsfr_form_field form.password2 %} +
+
+
+
+ +
+
+
+
+ {% dsfr_form_field form.nb_of_inclusive_provider_last_year %} +
+
+ {% dsfr_form_field form.nb_of_handicap_provider_last_year %} +
+
+

Ces informations resteront confidentielles, elles ne seront traitées qu'à des fins statistiques.

+
+
+
+
+ +
+
+
+
+ {% dsfr_form_field form.accept_survey %} +
+
+ {% dsfr_form_field form.accept_share_contact_to_external_partners %} +
+
+
+ {{ form.accept_rgpd }} + +
+
+
+
+
+
+
+
    +
  • + +
    • +
+
+
+
+
+
-
+ {% endblock content %} {% block extra_js %} @@ -147,19 +185,30 @@

Inscription

let positionInput = document.getElementById('id_position'); let acceptSurveyInput = document.getElementById('id_accept_survey'); let acceptShareContactInput = document.getElementById('id_accept_share_contact_to_external_partners'); - let statsSignupBuyerContent = document.getElementById('statsSignupBuyer'); - let sectorsInput = document.getElementById('id_sectors_multiselect'); + let statsSignupBuyerContent = document.getElementById('statsSignupBuyerFieldset'); + let sectorsInput = document.getElementById('id_sectors'); + let phoneFieldsetElement = document.getElementById('phoneFieldsetElement'); let infoStructuresFieldset = document.getElementById('infoStructuresFieldset'); + let buyerKindDetailFieldsetElement = document.getElementById('buyerKindDetailFieldsetElement'); + let partnerKindFieldsetElement = document.getElementById('partnerKindFieldsetElement'); + let companyNameFieldsetElement = document.getElementById('companyNameFieldsetElement'); + let positionFieldsetElement = document.getElementById('positionFieldsetElement'); + let acceptSurveyFieldsetElement = document.getElementById('acceptSurveyFielsetElement'); + let acceptShareContactFieldsetElement = document.getElementById('shareContactFielsetElement'); + let sectorsFieldsetElement = document.getElementById('sectorsFieldsetElement'); + let kindRadios = document.querySelectorAll('input[type=radio][name="kind"]'); kindRadios.forEach(radio => radio.addEventListener('change', () => { if (radio.value === 'SIAE') { - companyNameSiaeFormGroupDiv.classList.remove('d-none'); + companyNameSiaeFormGroupDiv.classList.remove('fr-hidden'); + companyNameFieldsetElement.classList.add('fr-hidden'); toggleInputElement(false, element=companyNameInput, required=false); toggleInputElement(false, element=acceptSurveyInput); toggleInputElement(true, element=acceptShareContactInput); } else { - companyNameSiaeFormGroupDiv.classList.add('d-none'); + companyNameSiaeFormGroupDiv.classList.add('fr-hidden'); + companyNameFieldsetElement.classList.remove('fr-hidden'); toggleInputElement(true, element=companyNameInput, required=true); toggleInputElement(true, element=acceptSurveyInput); toggleInputElement(false, element=acceptShareContactInput); @@ -169,13 +218,13 @@

Inscription

toggleInputElement(true, element=buyerKindDetailInput, required=true); toggleInputElement(true, element=positionInput, required=true); toggleInputElement(true, element=phoneInput, required=true); - statsSignupBuyerContent.classList.remove('d-none'); + statsSignupBuyerContent.classList.remove('fr-hidden'); toggleInputElement(true, element=sectorsInput, required=false); } else { toggleInputElement(false, element=buyerKindDetailInput, required=false); toggleInputElement(false, element=positionInput, required=false); toggleInputElement(true, element=phoneInput, required=false); - statsSignupBuyerContent.classList.add('d-none'); + statsSignupBuyerContent.classList.add('fr-hidden'); toggleInputElement(false, element=sectorsInput, required=false); } @@ -187,9 +236,9 @@

Inscription

if (radio.value === 'INDIVIDUAL') { toggleInputElement(false, element=companyNameInput, required=false); - infoStructuresFieldset.classList.add('d-none'); + infoStructuresFieldset.classList.add('fr-hidden'); } else { - infoStructuresFieldset.classList.remove('d-none'); + infoStructuresFieldset.classList.remove('fr-hidden'); } })); }); diff --git a/lemarche/templates/layouts/base.html b/lemarche/templates/layouts/base.html index 1a4fb20f7..8fbb86e6a 100644 --- a/lemarche/templates/layouts/base.html +++ b/lemarche/templates/layouts/base.html @@ -57,7 +57,8 @@ {% endblock footer %} {% dsfr_js nonce=request.csp_nonce %} - + + {% block extra_js %} {% endblock extra_js %} diff --git a/lemarche/www/auth/forms.py b/lemarche/www/auth/forms.py index be9e433c7..87d8efbcc 100644 --- a/lemarche/www/auth/forms.py +++ b/lemarche/www/auth/forms.py @@ -11,7 +11,7 @@ from lemarche.utils.password_validation import CnilCompositionPasswordValidator -class SignupForm(UserCreationForm): +class SignupForm(UserCreationForm, DsfrBaseForm): KIND_CHOICES_FORM = ( (User.KIND_SIAE, "Une entreprise sociale inclusive (SIAE ou structure du handicap, GEIQ)"), (User.KIND_BUYER, "Un acheteur"),