Implement registration with slider, first step

webapp/.env.template

@@ -1,5 +1,6 @@
 SENTRY_DSN_WEBAPP=
 COMMIT=
 PUBLIC_REGISTRATION=false
+INVITE_REGISTRATION=true
 WEBSOCKETS_URI=ws://localhost:3000/api/graphql
 GRAPHQL_URI=http://localhost:4000/

webapp/components/Registration/RegistrationSlider.vue

@@ -1,5 +1,5 @@
 <template>
-  <section class="login-form">
+  <section class="registration-form">
     <base-card>
       <template #imageColumn>
         <a :href="links.ORGANIZATION" :title="$t('login.moreInfo', metadata)" target="_blank">

webapp/nuxt.config.js

@@ -35,9 +35,10 @@ export default {
       'password-reset-request',
       'password-reset-enter-nonce',
       'password-reset-change-password',
-      'registration-signup',
+      // 'registration-signup',
-      'registration-enter-nonce',
+      // 'registration-enter-nonce',
-      'registration-create-user-account',
+      // 'registration-create-user-account',
+      'registration',
       'pages-slug',
       'terms-and-conditions',
       'code-of-conduct',

webapp/pages/registration.vue

@@ -1,45 +1,61 @@
 <template>
-  <ds-container width="small">
+  <section class="registration-form">
     <base-card>
-      <template #imageColumn>
+      <registration-slider
-        <a :href="links.ORGANIZATION" :title="$t('login.moreInfo', metadata)" target="_blank">
+        v-if="registrationType"
-          <img class="image" alt="Sign up" src="/img/custom/sign-up.svg" />
+        :registrationType="registrationType"
-        </a>
+        :overwriteSliderData="overwriteSliderData"
-      </template>
+      />
-      <nuxt-child />
+      <ds-space v-else centered>
+        <hc-empty icon="events" :message="$t('components.registration.signup.unavailable')" />
+        <nuxt-link to="/login">{{ $t('site.back-to-login') }}</nuxt-link>
+      </ds-space>
       <template #topMenu>
         <locale-switch offset="5" />
       </template>
     </base-card>
-  </ds-container>
+  </section>
 </template>
 
 <script>
-import links from '~/constants/links.js'
+import HcEmpty from '~/components/Empty/Empty'
-import metadata from '~/constants/metadata.js'
 import LocaleSwitch from '~/components/LocaleSwitch/LocaleSwitch'
+import RegistrationSlider from '~/components/Registration/RegistrationSlider'
 
 export default {
+  name: 'Registration',
   components: {
+    HcEmpty,
     LocaleSwitch,
+    RegistrationSlider,
   },
-  layout: 'no-header',
   data() {
+    const { method = null, email = null, inviteCode = null, nonce = null } = this.$route.query
     return {
-      metadata,
+      method,
-      links,
+      overwriteSliderData: {
+        collectedInputData: {
+          inviteCode,
+          email,
+          emailSend: !!email,
+          nonce,
+        },
+      },
     }
   },
-  asyncData({ store, redirect }) {
+  asyncData({ app }) {
-    if (store.getters['auth/isLoggedIn']) {
+    return {
-      redirect('/')
+      publicRegistration: app.$env.PUBLIC_REGISTRATION === 'true',
+      inviteRegistration: app.$env.INVITE_REGISTRATION === 'true',
     }
   },
+  computed: {
+    registrationType() {
+      if (this.method && ['invite-code', 'invite-mail'].includes(this.method)) {
+        return this.method
+      }
+      return this.publicRegistration ? 'public-registration' : false
+    },
+  },
 }
 </script>
-
-<style lang="scss">
-.image {
-  width: 100%;
-}
-</style>