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

@@ -40,9 +40,9 @@
               <div
                 class="main-navigation-right"
                 :class="{
-                  'desktop-view': !toggleMobileMenu,
+                       'desktop-view': !toggleMobileMenu,
-                  'hide-mobile-menu': !toggleMobileMenu,
+                       'hide-mobile-menu': !toggleMobileMenu,
-                }"
+                       }"
                 style="flex-basis: auto"
               >
                 <locale-switch class="topbar-locale-switch" placement="top" offset="8" />
@@ -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,96 +78,106 @@
 </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: {
+   components: {
-    Logo,
+     Logo,
-    LocaleSwitch,
+     LocaleSwitch,
-    SearchField,
+     SearchField,
-    Modal,
+     Modal,
-    NotificationMenu,
+     NotificationMenu,
-    AvatarMenu,
+     AvatarMenu,
-    FilterMenu,
+     FilterMenu,
-    PageFooter,
+     PageFooter,
-  },
+     InviteButton,
-  mixins: [seo],
+   },
-  data() {
+   mixins: [seo],
-    return {
+   data() {
-      mobileSearchVisible: false,
+     return {
-      toggleMobileMenu: false,
+       mobileSearchVisible: false,
-    }
+       toggleMobileMenu: false,
-  },
+     }
-  computed: {
+   },
-    ...mapGetters({
+   asyncData({ app }) {
-      isLoggedIn: 'auth/isLoggedIn',
+     return {
-    }),
+       inviteRegistration: app.$env.INVITE_REGISTRATION,
-    showFilterMenuDropdown() {
+     }
-      const [firstRoute] = this.$route.matched
+   },
-      return firstRoute && firstRoute.name === 'index'
+   computed: {
-    },
+     ...mapGetters({
-  },
+       isLoggedIn: 'auth/isLoggedIn',
-  methods: {
+     }),
-    toggleMobileMenuView() {
+     showFilterMenuDropdown() {
-      this.toggleMobileMenu = !this.toggleMobileMenu
+       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;
+   display: flex;
-  margin-right: $space-xx-small;
+   margin-right: $space-xx-small;
-  align-self: center;
+   align-self: center;
-  display: inline-flex;
+   display: inline-flex;
-}
+ }
-.main-container {
+ .main-container {
-  padding-top: 6rem;
+   padding-top: 6rem;
-  padding-bottom: 5rem;
+   padding-bottom: 5rem;
-}
+ }
 
-.main-navigation-flex {
+ .main-navigation-flex {
-  align-items: center;
+   align-items: center;
-}
+ }
 
-.main-navigation {
+ .main-navigation {
-  a {
+   a {
-    color: $text-color-soft;
+     color: $text-color-soft;
-  }
+   }
-}
+ }
-.main-navigation-right {
+ .main-navigation-right {
-  display: flex;
+   display: flex;
-  justify-content: flex-end;
+   justify-content: flex-end;
-}
+ }
-.main-navigation-right .desktop-view {
+ .main-navigation-right .desktop-view {
-  float: right;
+   float: right;
-}
+ }
-.ds-flex-item.mobile-hamburger-menu {
+ .ds-flex-item.mobile-hamburger-menu {
-  margin-left: auto;
+   margin-left: auto;
-  text-align: right;
+   text-align: right;
-}
+ }
-@media only screen and (min-width: 730px) {
+ @media only screen and (min-width: 730px) {
-  .mobile-hamburger-menu {
+   .mobile-hamburger-menu {
-    display: none;
+     display: none;
-  }
+   }
-}
+ }
-@media only screen and (max-width: 730px) {
+ @media only screen and (max-width: 730px) {
-  #nav-search-box,
+   #nav-search-box,
-  .main-navigation-right {
+   .main-navigation-right {
-    margin: 10px 0px;
+     margin: 10px 0px;
-  }
+   }
-  .hide-mobile-menu {
+   .hide-mobile-menu {
-    display: none;
+     display: none;
-  }
+   }
-}
+ }
 </style>