Fix subscription form

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

@@ -1,38 +1,43 @@
 import { userFetchUser } from "#openapi";
 
-document.addEventListener("alpine:init", () => {
-  Alpine.data("existing_user_subscription_form", () => ({
-    loading: false,
-    profileFragment: "" as string,
+Alpine.data("existing_user_subscription_form", () => ({
+  loading: false,
+  selectedUser: "",
+  profileFragment: "",
+  dateOfBirth: "",
+  dateOfBirthHidden: true,
 
-    async init() {
-      const userSelect = document.getElementById("id_member") as HTMLSelectElement;
-      userSelect.addEventListener("change", async () => {
-        await this.loadProfile(Number.parseInt(userSelect.value, 10));
-      });
-      await this.loadProfile(Number.parseInt(userSelect.value, 10));
-    },
+  async init() {
+    this.$watch("selectedUser", async () => {
+      await this.loadProfile(Number.parseInt(this.selectedUser, 10));
+    });
 
-    async loadProfile(userId: number) {
-      const birthdayInput = document.getElementById("id_birthdate") as HTMLInputElement;
-      if (!Number.isInteger(userId)) {
-        this.profileFragment = "";
-        birthdayInput.hidden = true;
-        return;
-      }
-      this.loading = true;
-      const [miniProfile, userInfos] = await Promise.all([
-        fetch(`/user/${userId}/mini/`),
-        // biome-ignore lint/style/useNamingConvention: api is snake_case
-        userFetchUser({ path: { user_id: userId } }),
-      ]);
-      this.profileFragment = await miniProfile.text();
-      // If the user has no birthdate yet, show the form input
-      // to fill this info.
-      // Else keep the input hidden and change its value to the user birthdate
-      birthdayInput.value = userInfos.data.date_of_birth;
-      birthdayInput.hidden = userInfos.data.date_of_birth !== null;
-      this.loading = false;
-    },
-  }));
-});
+    // Wait for web components to load
+    await this.$nextTick();
+
+    // Force to detect the initial value
+    this.selectedUser = this.$refs.userSelect.widget.getValue();
+  },
+
+  async loadProfile(userId: number) {
+    if (!Number.isInteger(userId)) {
+      this.profileFragment = "";
+      this.dateOfBirth = "";
+      this.dateOfBirthHidden = true;
+      return;
+    }
+    this.loading = true;
+    const [miniProfile, userInfos] = await Promise.all([
+      fetch(`/user/${userId}/mini/`),
+      // biome-ignore lint/style/useNamingConvention: api is snake_case
+      userFetchUser({ path: { user_id: userId } }),
+    ]);
+    this.profileFragment = await miniProfile.text();
+    // If the user has no birthdate yet, show the form input
+    // to fill this info.
+    // Else keep the input hidden and change its value to the user birthdate
+    this.dateOfBirth = userInfos.data.date_of_birth;
+    this.dateOfBirthHidden = userInfos.data.date_of_birth !== null;
+    this.loading = false;
+  },
+}));

subscription/templates/subscription/fragments/creation_form_existing_user.jinja

@@ -6,13 +6,28 @@
 >
   {% csrf_token %}
 
-  <div x-data="existing_user_subscription_form" class="form-content existing-user">
+  {% set alpine_input_attrs = {
+  '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>
-      {{ form.errors }}
+      {% if form.errors %}
+        {{ form.errors.__all__ }}
+      {% endif %}
       {% for field in form %}
-        <div class="form-group">
+        <div
+          class="form-group"
+          {% for attr in alpine_field_attrs.get(field.auto_id, []) %}
+            {{ attr }}
+          {% endfor %}>
           {{ field.label_tag() }}
-          {{ field }}
+          {{ field|add_attr(alpine_input_attrs.get(field.auto_id, "")) }}
           {% if field.help_text %}
             <span class="helptext">{{ field.help_text }}</span>
           {% endif %}