make astro module scripts view transition aware

src/pages/signup.astro

@@ -155,89 +155,99 @@ const signupDisabledSubMessage = signupSetting[SettingKey.SignupDisabledSubMessa
   import { teamPopupName, teamPopupOpen } from '@app/website/signup/TeamPopup';
   import { registeredPopupState } from '@app/website/signup/RegisteredPopup';
 
-  /* ----- client validation ----- */
-  const rulesCheckbox = document.getElementById('rules')! as HTMLInputElement;
-  const rulesCheckboxRulesLink = rulesCheckbox.nextElementSibling!.querySelector('.link') as HTMLAnchorElement;
+  function setupClientValidation() {
+    const rulesCheckbox = document.getElementById('rules') as HTMLInputElement;
+    const rulesCheckboxRulesLink = rulesCheckbox.nextElementSibling!.querySelector('.link') as HTMLAnchorElement;
 
-  // add popup state subscriber to check when the accepted button is clicked
-  rulesPopupState.subscribe((value) => {
-    if (value == 'accepted') rulesCheckbox.checked = true;
-  });
-
-  // add click handler to open rules popup to rules checkbox
-  rulesCheckbox.addEventListener('click', (e) => {
-    if (!rulesPopupRead.get()) {
-      e.preventDefault();
-      rulesPopupState.set('open');
-    }
-  });
-
-  // add click handler to open rules popup when clicking the rules link in the rules checkbox label
-  rulesCheckboxRulesLink!.addEventListener('click', () => rulesPopupState.set('open'));
-
-  /* ----- signup form ----- */
-  const form = document.getElementById('signup')! as HTMLFormElement;
-
-  // reset form on site (re-)load
-  form.reset();
-
-  async function sendSignup() {
-    const { data, error } = await actions.signup.signup({
-      firstname: form.firstname.value,
-      lastname: form.lastname.value,
-      birthday: form.birthday.value,
-      phone: form.phone.value,
-      username: form.username.value,
-      teamMember: form.teamMember.value,
-      teamName: teamPopupName.get()
+    // add popup state subscriber to check when the accepted button is clicked
+    rulesPopupState.subscribe((value) => {
+      if (value == 'accepted') rulesCheckbox.checked = true;
     });
 
-    // must be done in order to show the team popup again if it's closed or an error occurs
-    teamPopupName.set(null);
-
-    if (error) {
-      if (error.code == 'BAD_REQUEST') {
-        teamPopupOpen.set(true);
-        const close = teamPopupName.listen(() => {
-          close();
-          sendSignup();
-        });
-      } else if (error.code == 'CONFLICT' || error.code == 'FORBIDDEN') {
-        popupState.set({
-          type: 'error',
-          title: 'Fehler',
-          message: error.message
-        });
-      } else {
-        popupState.set({
-          type: 'error',
-          title: 'Fehler',
-          message: error.message
-        });
+    // add click handler to open rules popup to rules checkbox
+    rulesCheckbox.addEventListener('click', (e) => {
+      if (!rulesPopupRead.get()) {
+        e.preventDefault();
+        rulesPopupState.set('open');
       }
-      return;
-    }
-
-    registeredPopupState.set({
-      firstname: form.firstname.value,
-      lastname: form.lastname.value,
-      birthday: form.birthday.value,
-      phone: form.phone.value,
-      username: form.username.value,
-      team: data.team.name,
-      teamMember: form.teamMember.value,
-      teamColor: data.team.color
     });
 
-    const cancel = registeredPopupState.subscribe((value) => {
-      if (value) return;
-      cancel();
-      form.reset();
+    // add click handler to open rules popup when clicking the rules link in the rules checkbox label
+    rulesCheckboxRulesLink!.addEventListener('click', () => rulesPopupState.set('open'));
+  }
+
+  function setupForm() {
+    const form = document.getElementById('signup')! as HTMLFormElement;
+
+    // reset form on site (re-)load
+    form.reset();
+
+    const sendSignup = async () => {
+      const { data, error } = await actions.signup.signup({
+        firstname: form.firstname.value,
+        lastname: form.lastname.value,
+        birthday: form.birthday.value,
+        phone: form.phone.value,
+        username: form.username.value,
+        teamMember: form.teamMember.value,
+        teamName: teamPopupName.get()
+      });
+
+      // must be done in order to show the team popup again if it's closed or an error occurs
+      teamPopupName.set(null);
+
+      if (error) {
+        if (error.code == 'BAD_REQUEST') {
+          teamPopupOpen.set(true);
+          const close = teamPopupName.listen(() => {
+            close();
+            sendSignup();
+          });
+        } else if (error.code == 'CONFLICT' || error.code == 'FORBIDDEN') {
+          popupState.set({
+            type: 'error',
+            title: 'Fehler',
+            message: error.message
+          });
+        } else {
+          popupState.set({
+            type: 'error',
+            title: 'Fehler',
+            message: error.message
+          });
+        }
+        return;
+      }
+
+      registeredPopupState.set({
+        firstname: form.firstname.value,
+        lastname: form.lastname.value,
+        birthday: form.birthday.value,
+        phone: form.phone.value,
+        username: form.username.value,
+        team: data.team.name,
+        teamMember: form.teamMember.value,
+        teamColor: data.team.color
+      });
+
+      const cancel = registeredPopupState.subscribe((value) => {
+        if (value) return;
+        cancel();
+        form.reset();
+      });
+    };
+
+    form.addEventListener('submit', (e) => {
+      e.preventDefault();
+      sendSignup();
     });
   }
 
-  form.addEventListener('submit', (e) => {
-    e.preventDefault();
-    sendSignup();
+  const pathname = document.location.pathname;
+  document.addEventListener('astro:page-load', () => {
+    if (document.location.pathname !== pathname) return;
+
+    setupClientValidation();
+    setupForm();
   });
 </script>