Untitled

<template>
  <div class="registration-form">

    <header><app-logo /></header>

    <o-steps class="content center" v-model="step" vertical>

      <o-step-item value="loading">
        <loading-spinner />
      </o-step-item>

      <o-step-item value="invitation" @active="on_invitation_active()">
        <h2 class="title">You need an invitation <br />to join.</h2>
        <o-input
          v-model="key_input_value"
          placeholder="Enter your invitation code"
        ></o-input>
      </o-step-item>

      <o-step-item value="registration">
        <registration-form />
      </o-step-item>

    </o-steps>

  </div>
</template>

<script>
export default {
  data(): () => { step: "loading" },
  methods: {
    on_invitation_active() {
      // new feature here
    },
  },
  mounted() {
    this.$nextTick(async () => {
      try {
        await main_api(`/app-setting?label=INVITATION_ONLY`);
        this.step = "invitation"
      } catch (error) {
        this.step = "registration"
      }
    });
  },