add back user profiles on subscription form

subscription/forms.py

@@ -61,6 +61,8 @@ class SubscriptionNewUserForm(SubscriptionForm):
         assert user.is_subscribed
     """
 
+    template_name = "subscription/forms/create_new_user.html"
+
     __user_fields = forms.fields_for_model(
         User,
         ["first_name", "last_name", "email", "date_of_birth"],
@@ -114,6 +116,8 @@ class SubscriptionNewUserForm(SubscriptionForm):
 class SubscriptionExistingUserForm(SubscriptionForm):
     """Form to add a subscription to an existing user."""
 
+    template_name = "subscription/forms/create_existing_user.html"
+
     class Meta:
         model = Subscription
         fields = ["member", "subscription_type", "payment_method", "location"]

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

@@ -0,0 +1,25 @@
+document.addEventListener("alpine:init", () => {
+  Alpine.data("existing_user_subscription_form", () => ({
+    loading: false,
+    profileFragment: "" as string,
+
+    async init() {
+      const userSelect = document.getElementById("id_member") as HTMLSelectElement;
+      userSelect.addEventListener("change", async () => {
+        await this.loadProfile(Number.parseInt(userSelect.value));
+      });
+      await this.loadProfile(Number.parseInt(userSelect.value));
+    },
+
+    async loadProfile(userId: number) {
+      if (!Number.isInteger(userId)) {
+        this.profileFragment = "";
+        return;
+      }
+      this.loading = true;
+      const response = await fetch(`/user/${userId}/mini/`);
+      this.profileFragment = await response.text();
+      this.loading = false;
+    },
+  }));
+});

subscription/static/subscription/css/subscription.scss

@@ -0,0 +1,28 @@
+#subscription-form form {
+  .form-content.existing-user {
+    max-height: 100%;
+    display: flex;
+    flex: 1 1 auto;
+    flex-direction: row;
+
+    @media screen and (max-width: 700px) {
+      flex-direction: column-reverse;
+    }
+
+    /* Make the form fields take exactly the space they need,
+     * then display the user profile right in the middle of the remaining space. */
+    fieldset {
+      flex: 0 1 auto;
+    }
+
+    #subscription-form-user-mini-profile {
+      display: flex;
+      flex: 1 1 auto;
+      justify-content: center;
+    }
+
+    .user_mini_profile {
+      height: 300px;
+    }
+  }
+}

subscription/templates/subscription/forms/create_existing_user.html

@@ -0,0 +1,14 @@
+{% load static %}
+{% load i18n %}
+
+
+<div x-data="existing_user_subscription_form" class="form-content existing-user">
+  <fieldset>
+    {{ form.as_p }}
+  </fieldset>
+  <div
+    id="subscription-form-user-mini-profile"
+    x-html="profileFragment"
+    :aria-busy="loading"
+  ></div>
+</div>

subscription/templates/subscription/forms/create_new_user.html

@@ -0,0 +1 @@
+{{ form.as_p }}

subscription/templates/subscription/fragments/creation_form.jinja

@@ -5,6 +5,6 @@
   hx-swap="outerHTML"
 >
   {% csrf_token %}
-  {{ form.as_p() }}
+  {{ form }}
   <input type="submit" value="{% trans %}Save{% endtrans %}">
 </form>

subscription/templates/subscription/fragments/creation_success.jinja

@@ -4,18 +4,21 @@
       {% trans user=subscription.member %}Subscription created for {{ user }}{% endtrans %}
     </h3>
     <p>
-
-      {% trans trimmed user=subscription.member.get_short_name(), type=subscription.subscription_type, end=subscription.subscription_end %}
-        {{ user }} received its new {{ type }} subscription.
-        It will be active until {{ end }} included.
+      {% trans trimmed
+      user=subscription.member.get_short_name(),
+      type=subscription.subscription_type,
+      end=subscription.subscription_end
+      %}
+      {{ user }} received its new {{ type }} subscription.
+      It will be active until {{ end }} included.
       {% endtrans %}
     </p>
   </div>
   <div class="alert-aside">
-    <a  class="btn btn-blue" href="{{ subscription.member.get_absolute_url() }}">
+    <a class="btn btn-blue" href="{{ subscription.member.get_absolute_url() }}">
       {% trans %}Go to user profile{% endtrans %}
     </a>
-    <a  class="btn btn-grey" href="{{ url("subscription:subscription") }}">
+    <a class="btn btn-grey" href="{{ url("subscription:subscription") }}">
       {# We don't know if this fragment is displayed after creating a subscription
       for a previously existing user or for a newly created one.
       Thus, we don't know which form should be used to create another subscription

subscription/templates/subscription/subscription.jinja

@@ -13,10 +13,16 @@
    If the aforementioned bug is resolved, you can remove this. #}
 {% block additional_js %}
   <script type="module" defer src="{{ static("bundled/core/components/ajax-select-index.ts") }}"></script>
+  <script
+    type="module"
+    defer
+    src="{{ static("bundled/subscription/creation-form-existing-user-index.ts") }}"
+  ></script>
 {% endblock %}
 {% block additional_css %}
   <link rel="stylesheet" href="{{ static("bundled/core/components/ajax-select-index.css") }}">
   <link rel="stylesheet" href="{{ static("core/components/ajax-select.scss") }}">
+  <link rel="stylesheet" href="{{ static("subscription/css/subscription.scss") }}">
 {% endblock %}
 
 {% macro form_fragment(form_object, post_url) %}
@@ -30,9 +36,11 @@
 {% block content %}
   <h3>{% trans %}New subscription{% endtrans %}</h3>
   <div id="subscription-form" hx-ext="response-targets">
-    {{ tabs([
-    (_("Existing member"), form_fragment(existing_user_form, existing_user_post_url)),
-    (_("New member"), form_fragment(new_user_form, new_user_post_url)),
-    ]) }}
+    {% with title1=_("Existing member"), title2=_("New member") %}
+      {{ tabs([
+      (title1, form_fragment(existing_user_form, existing_user_post_url)),
+      (title2, form_fragment(new_user_form, new_user_post_url)),
+      ]) }}
+    {% endwith %}
   </div>
 {% endblock %}