Frontend/pages/researchStudies/_studyId/contributors/join.vue

<template>
  <v-container>
    <ui-rug-card-form :form="form">
      <ui-rug-card-title>
        {{
          $t(
            'page.researchStudies.studyId.contributors.join.title'
          )
        }}
      </ui-rug-card-title>

      <v-card-text class="flex-row mb-6 text-center">
        <h1 class="mt-4 mb-4">{{ $t('page.researchStudies.studyId.contributors.join.waiting_message') }}</h1>

        <v-progress-circular
          v-if="joinState == -1"
          indeterminate
          size="48"
          color="primary"
        ></v-progress-circular>

      </v-card-text>
    </ui-rug-card-form>

  </v-container>
</template>

<script>
import { mapActions } from 'vuex'
import Form from '@/lib/form'

export default {
  async asyncData({ store, route ,error }) {
    const studyId = route.params.studyId
    const key = route.query.key

    try {
      await store.dispatch('studies/getJoinStudy', { studyId })

      return {
        studyId,
        key,
        studyData: store.getters['studies/getActiveStudy'],
        formData: {
          studyId,
          key
        },
      }

    } catch(err) {
      // Should this not be fixed in the axios plugin as an interceptor?
      error({
        statusCode: 404,
        message: 'Page could not be found',
      })
    }
  },
  data() {
   // const $t = this.$t.bind(this)

    return {
      joinState: -1,
      formData: {
        studyId: this.studyId,
        key: this.jwtToken
      },
      form: new Form({
        form: 'formData',
        vm: this,
        action: this['studies/joinContributor'],
        schema: {
          type: 'object',
          properties: {
            studyId: {
              type: 'string',
            },
            key: {
              type: 'string',
            },
          },
        },
        onResponse(response) {
          // TODO: Should be a gui/client side translated text
          this.vm.$toast.success( response.data.message )
          this.joinState = 0
          this.vm.$router.push(
            this.vm.localePath(`/researchStudies/${this.vm.$route.params.studyId}`)
          )
        },
      }),
    }
  },

  head() {
    const $t = this.$t.bind(this)
    return {
      title: $t('page.researchStudies.studyId.contributors.join.title'),
    }
  },
  mounted() {
   // TODO: Should it not be possible to post the form with this.form.submit() ??? Can't get the form to auto submit the correct data :(
  },
  methods: {
    ...mapActions(['studies/joinContributor']),
  },
}
</script>