Apply review comments

subscription/static/bundled/subscription/creation-form-existing-user-index.ts

@@ -7,16 +7,15 @@ Alpine.data("existing_user_subscription_form", () => ({
   dateOfBirth: "",
   dateOfBirthHidden: true,
 
-  async init() {
+  init() {
     this.$watch("selectedUser", async () => {
       await this.loadProfile(Number.parseInt(this.selectedUser, 10));
     });
 
-    // Wait for web components to load
+    this.$nextTick(() => {
-    await this.$nextTick();
-
       // Force to detect the initial value
       this.selectedUser = this.$refs.userSelect.widget.getValue();
+    });
   },
 
   async loadProfile(userId: number) {

subscription/static/subscription/css/subscription.scss

@@ -5,7 +5,8 @@
     margin-top: 0;
   }
 
-  fieldset p:first-of-type, & > p:first-of-type {
+  fieldset p:first-of-type,
+  &>p:first-of-type {
     margin-top: 0;
   }
 
@@ -24,7 +25,7 @@
     fieldset {
       flex: 0 1 auto;
 
-      p:has(input[hidden]) {
+      .form-group:has(input[hidden]) {
         // when the input is hidden, hide the whole label+input+help text group
         display: none;
       }

subscription/templates/subscription/fragments/creation_form_existing_user.jinja

@@ -6,41 +6,29 @@
 >
   {% csrf_token %}
 
-  {% set alpine_input_attrs = {
+  <div x-data="existing_user_subscription_form" class="form-content existing-user">
-  'id_member': 'x-ref=userSelect,x-model=selectedUser',
-  'id_birthdate': ':value=dateOfBirth,:hidden=dateOfBirthHidden',
-  } %}
-
-  {% set alpine_field_attrs = {
-  'id_birthdate': (':hidden=dateOfBirthHidden', 'x-cloack')
-  } %}
-
-  <div x-data="existing_user_subscription_form()" class="form-content existing-user">
     <fieldset>
-      {% if form.errors %}
+      {{ form.non_field_errors() }}
-        {{ form.errors.__all__ }}
+      <div class="form-group">
-      {% endif %}
+        {{ form.member.label_tag() }}
-      {% for field in form %}
+        {{ form.member|add_attr("x-ref=userSelect,x-model=selectedUser") }}
-        <div
+      </div>
-          class="form-group"
+      <div class="form-group">
-          {% for attr in alpine_field_attrs.get(field.auto_id, []) %}
+        {{ form.birthdate.label_tag() }}
-            {{ attr }}
+        {{ form.birthdate|add_attr(":value=dateOfBirth,:hidden=dateOfBirthHidden,:type=dateOfBirthHidden ? 'hidden' : 'date'") }}
-          {% endfor %}>
+        <span class="helptext">{{ form.birthdate.help_text }}</span>
-          {{ field.label_tag() }}
+      </div>
-          {{ field|add_attr(alpine_input_attrs.get(field.auto_id, "")) }}
+      <div class="form-group">{{ form.subscription_type.as_field_group() }}</div>
-          {% if field.help_text %}
+      <div class="form-group">
-            <span class="helptext">{{ field.help_text }}</span>
+        {{ form.payment_method.as_field_group() }}
-          {% endif %}
-          {% if field.name == "payment_method" %}
         <i>
           {% trans trimmed %}
             If the subscription is done using the AE account,
             you must also click it on the AE counter.
           {% endtrans %}
         </i>
-          {% endif %}
       </div>
-      {% endfor %}
+      <div class="form-group">{{ form.location.as_field_group() }}</div>
     </fieldset>
     <div
       id="subscription-form-user-mini-profile"