add back user profiles on subscription form

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;
+    }
+  }
+}