setting up invite button

webapp/components/InviteButton/InviteButton.vue

@@ -0,0 +1,17 @@
+<template>
+  <dropdown class="avatar-menu" offset="8" :placement="placement">
+    <template #default="{ toggleMenu }">
+      XXX
+    </template>
+  </dropdown>
+</template>
+
+<script>
+ import Dropdown from '~/components/Dropdown'
+
+ export default {
+   components: {
+     Dropdown,
+   },
+}
+</script>

webapp/config/index.js

@@ -29,6 +29,8 @@ const sentry = {
 const options = {
   VERSION: process.env.VERSION || pkg.version,
   DESCRIPTION: process.env.DESCRIPTION || pkg.description,
+  PUBLIC_REGISTRATION: process.env.PUBLIC_REGISTRATION === 'true',
+  INVITE_REGISTRATION: process.env.INVITE_REGISTRATION === 'true',
   // Cookies
   COOKIE_EXPIRE_TIME: process.env.COOKIE_EXPIRE_TIME || 730, // Two years by default
   COOKIE_HTTPS_ONLY: process.env.COOKIE_HTTPS_ONLY || process.env.NODE_ENV === 'production', // ensure true in production if not set explicitly

webapp/layouts/default.vue

@@ -50,6 +50,10 @@
                   <client-only>
                     <notification-menu placement="top" />
                   </client-only>
+                  XXX {{ showInviteButton }}
+                  <client-only v-if="showInviteButton">
+                    <invite-button placement="top" />
+                  </client-only>
                   <client-only>
                     <avatar-menu placement="top" />
                   </client-only>
@@ -74,18 +78,19 @@
 </template>
 
 <script>
-import Logo from '~/components/Logo/Logo'
+ import Logo from '~/components/Logo/Logo'
-import { mapGetters } from 'vuex'
+ import { mapGetters } from 'vuex'
-import LocaleSwitch from '~/components/LocaleSwitch/LocaleSwitch'
+ import LocaleSwitch from '~/components/LocaleSwitch/LocaleSwitch'
-import SearchField from '~/components/features/SearchField/SearchField.vue'
+ import SearchField from '~/components/features/SearchField/SearchField.vue'
-import Modal from '~/components/Modal'
+ import Modal from '~/components/Modal'
-import NotificationMenu from '~/components/NotificationMenu/NotificationMenu'
+ import NotificationMenu from '~/components/NotificationMenu/NotificationMenu'
-import seo from '~/mixins/seo'
+ import seo from '~/mixins/seo'
-import FilterMenu from '~/components/FilterMenu/FilterMenu.vue'
+ import FilterMenu from '~/components/FilterMenu/FilterMenu.vue'
-import PageFooter from '~/components/PageFooter/PageFooter'
+ import PageFooter from '~/components/PageFooter/PageFooter'
-import AvatarMenu from '~/components/AvatarMenu/AvatarMenu'
+ import AvatarMenu from '~/components/AvatarMenu/AvatarMenu'
+ import InviteButton from '~/components/InviteButton/InviteButton'
 
-export default {
+ export default {
    components: {
      Logo,
      LocaleSwitch,
@@ -95,6 +100,7 @@ export default {
      AvatarMenu,
      FilterMenu,
      PageFooter,
+     InviteButton,
    },
    mixins: [seo],
    data() {
@@ -103,6 +109,11 @@ export default {
        toggleMobileMenu: false,
      }
    },
+   asyncData({ app }) {
+     return {
+       inviteRegistration: app.$env.INVITE_REGISTRATION,
+     }
+   },
    computed: {
      ...mapGetters({
        isLoggedIn: 'auth/isLoggedIn',
@@ -111,53 +122,56 @@ export default {
        const [firstRoute] = this.$route.matched
        return firstRoute && firstRoute.name === 'index'
      },
+     showInviteButton() {
+       return this.inviteRegistration
+     },
    },
    methods: {
      toggleMobileMenuView() {
        this.toggleMobileMenu = !this.toggleMobileMenu
      },
    },
-}
+ }
 </script>
 
 <style lang="scss">
-.topbar-locale-switch {
+ .topbar-locale-switch {
    display: flex;
    margin-right: $space-xx-small;
    align-self: center;
    display: inline-flex;
-}
+ }
-.main-container {
+ .main-container {
    padding-top: 6rem;
    padding-bottom: 5rem;
-}
+ }
 
-.main-navigation-flex {
+ .main-navigation-flex {
    align-items: center;
-}
+ }
 
-.main-navigation {
+ .main-navigation {
    a {
      color: $text-color-soft;
    }
-}
+ }
-.main-navigation-right {
+ .main-navigation-right {
    display: flex;
    justify-content: flex-end;
-}
+ }
-.main-navigation-right .desktop-view {
+ .main-navigation-right .desktop-view {
    float: right;
-}
+ }
-.ds-flex-item.mobile-hamburger-menu {
+ .ds-flex-item.mobile-hamburger-menu {
    margin-left: auto;
    text-align: right;
-}
+ }
-@media only screen and (min-width: 730px) {
+ @media only screen and (min-width: 730px) {
    .mobile-hamburger-menu {
      display: none;
    }
-}
+ }
-@media only screen and (max-width: 730px) {
+ @media only screen and (max-width: 730px) {
    #nav-search-box,
    .main-navigation-right {
      margin: 10px 0px;
@@ -165,5 +179,5 @@ export default {
    .hide-mobile-menu {
      display: none;
    }
-}
+ }
 </style>