Fix invitation related step behavior

aleksis/core/frontend/components/account/AccountRegistrationForm.vue

@@ -29,6 +29,58 @@ import PersonDetailsCard from "../person/PersonDetailsCard.vue";
         </v-card-actions>
       </v-card>
     </div>
+    <div v-else-if="checkPermission('core.invite_enabled') && !invitationCodeEntered">
+      <v-card>
+        <v-card-title>
+          {{ $t("accounts.signup.form.steps.invitation.title") }}
+        </v-card-title>
+        <v-card-text>
+          <v-alert v-if="invitationCodeAutofilled" type="info" outlined class="mb-4">{{
+            $t("accounts.signup.form.steps.invitation.autofilled")
+          }}</v-alert>
+          <div class="mb-4">
+            <v-form v-model="invitationCodeValidationStatus">
+              <div :aria-required="invitationCodeRequired">
+                <v-text-field
+                  outlined
+                  v-model="data.invitationCode"
+                  :label="
+                    $t(
+                      'accounts.signup.form.steps.invitation.fields.invitation_code.label',
+                    )
+                  "
+                  :hint="
+                    $t(
+                      'accounts.signup.form.steps.invitation.fields.invitation_code.help_text',
+                    )
+                  "
+                  persistent-hint
+                  required
+                  :rules="
+                    invitationCodeRequired
+                      ? $rules().required.build()
+                      : []
+                  "
+                ></v-text-field>
+              </div>
+            </v-form>
+          </div>
+          <v-alert v-if="invitationCodeInvalid" type="error" outlined class="mb-4">{{
+            $t("accounts.signup.form.steps.invitation.not_valid")
+          }}</v-alert>
+        </v-card-text>
+        <v-card-actions>
+          <v-spacer />
+          <primary-action-button
+            @click="checkInvitationCode"
+            :i18n-key="invitationNextI18nKey"
+            :disabled="
+              !invitationCodeValidationStatus
+            "
+          />
+        </v-card-actions>
+      </v-card>
+    </div>
     <div v-else>
       <v-alert type="info" dense outlined class="mb-4">
         <v-row align="center" no-gutters>
@@ -62,55 +114,6 @@ import PersonDetailsCard from "../person/PersonDetailsCard.vue";
           </template>
         </v-stepper-header>
         <v-stepper-items>
-          <v-stepper-content
-            v-if="isStepEnabled('invitation')"
-            :step="getStepIndex('invitation')"
-          >
-            <h2 class="text-h6 mb-4">{{ $t(getStepTitleKey("invitation")) }}</h2>
-            <v-alert v-if="invitationCodeAutofilled" type="info" outlined class="mb-4">{{
-              $t("accounts.signup.form.steps.invitation.autofilled")
-            }}</v-alert>
-            <div class="mb-4">
-              <v-form v-model="validationStatuses['invitation']">
-                <div :aria-required="invitationCodeRequired">
-                  <v-text-field
-                    outlined
-                    v-model="data.invitationCode"
-                    :label="
-                      $t(
-                        'accounts.signup.form.steps.invitation.fields.invitation_code.label',
-                      )
-                    "
-                    :hint="
-                      $t(
-                        'accounts.signup.form.steps.invitation.fields.invitation_code.help_text',
-                      )
-                    "
-                    persistent-hint
-                    required
-                    :rules="
-                      invitationCodeRequired
-                        ? $rules().required.build()
-                        : []
-                    "
-                  ></v-text-field>
-                </div>
-              </v-form>
-              <v-alert v-if="invitationCodeInvalid" type="error" outlined class="mt-4">{{
-                $t("accounts.signup.form.steps.invitation.not_valid")
-              }}</v-alert>
-            </div>
-            <v-divider class="mb-4" />
-            <control-row
-              :step="step"
-              @set-step="checkInvitationCode"
-              :next-i18n-key="invitationNextI18nKey"
-              :next-disabled="
-                !validationStatuses['invitation']
-              "
-            />
-          </v-stepper-content>
-
           <v-stepper-content
             v-if="isStepEnabled('email')"
             :step="getStepIndex('email')"
@@ -619,6 +622,14 @@ export default {
           code: this.data.invitationCode,
         };
       },
+      result({ data, loading, networkStatus }) {
+        if (data?.personInvitationByCode?.valid) {
+          this.invitation = data.personInvitationByCode;
+          this.invitationCodeEntered = true;
+        } else {
+          this.invitationCodeInvalid = true;
+        }
+      },
       skip: true,
     },
   },
@@ -628,18 +639,14 @@ export default {
       this.step = step;
       this.valid = false;
     },
-    checkInvitationCode(step) {
+    checkInvitationCode() {
       this.invitationCodeInvalid = false;
-      this.$apollo.queries.personInvitationByCode.skip = false;
-      this.$apollo.queries.personInvitationByCode.options.result = ({ data, loading, networkStatus }) => {
-        if (data?.personInvitationByCode?.valid) {
-          this.invitation = data.personInvitationByCode;
-          this.setStep(step);
-        } else {
-          this.invitationCodeInvalid = true;
-        }
-      };
-      this.$apollo.queries.personInvitationByCode.refetch();
+      if (this.data.invitationCode) {
+        this.$apollo.queries.personInvitationByCode.skip = false;
+        this.$apollo.queries.personInvitationByCode.refetch();
+      } else {
+        this.invitationCodeEntered = true;
+      }
     },
     accountRegistrationDone({ data }) {
       if (data.sendAccountRegistration.ok) {
@@ -755,14 +762,6 @@ export default {
     },
     steps() {
       return [
-        ...(this.checkPermission("core.invite_enabled")
-          ? [
-              {
-                name: "invitation",
-                titleKey: "accounts.signup.form.steps.invitation.title",
-              },
-            ]
-          : []),
         ...(this.collectionSteps.some(
           (s) => s.key === "postbuero-mail-address-form-step",
         ) && !this.invitation?.hasEmail
@@ -820,6 +819,8 @@ export default {
     return {
       validationStatuses: {},
       invitation: null,
+      invitationCodeEntered: false,
+      invitationCodeValidationStatus: false,
       invitationCodeInvalid: false,
       invitationCodeAutofilled: false,
       accountRegistrationSent: false,