From e6dc3f42cedaf9953d737cf30cf7ed317b634be7 Mon Sep 17 00:00:00 2001
From: Moriz Wahl <moriz.wahl@gmx.de>
Date: Tue, 16 Mar 2021 10:36:07 +0100
Subject: [PATCH] setting up invite button

---
 .../components/InviteButton/InviteButton.vue  |  17 ++
 webapp/config/index.js                        |   2 +
 webapp/layouts/default.vue                    | 192 ++++++++++--------
 3 files changed, 122 insertions(+), 89 deletions(-)
 create mode 100644 webapp/components/InviteButton/InviteButton.vue

diff --git a/webapp/components/InviteButton/InviteButton.vue b/webapp/components/InviteButton/InviteButton.vue
new file mode 100644
index 000000000..57c60c8e4
--- /dev/null
+++ b/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>
diff --git a/webapp/config/index.js b/webapp/config/index.js
index fd564f350..678239729 100644
--- a/webapp/config/index.js
+++ b/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
diff --git a/webapp/layouts/default.vue b/webapp/layouts/default.vue
index 0bf98967e..e666d5e44 100644
--- a/webapp/layouts/default.vue
+++ b/webapp/layouts/default.vue
@@ -40,9 +40,9 @@
               <div
                 class="main-navigation-right"
                 :class="{
-                  'desktop-view': !toggleMobileMenu,
-                  'hide-mobile-menu': !toggleMobileMenu,
-                }"
+                       'desktop-view': !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 { mapGetters } from 'vuex'
-import LocaleSwitch from '~/components/LocaleSwitch/LocaleSwitch'
-import SearchField from '~/components/features/SearchField/SearchField.vue'
-import Modal from '~/components/Modal'
-import NotificationMenu from '~/components/NotificationMenu/NotificationMenu'
-import seo from '~/mixins/seo'
-import FilterMenu from '~/components/FilterMenu/FilterMenu.vue'
-import PageFooter from '~/components/PageFooter/PageFooter'
-import AvatarMenu from '~/components/AvatarMenu/AvatarMenu'
+ import Logo from '~/components/Logo/Logo'
+ import { mapGetters } from 'vuex'
+ import LocaleSwitch from '~/components/LocaleSwitch/LocaleSwitch'
+ import SearchField from '~/components/features/SearchField/SearchField.vue'
+ import Modal from '~/components/Modal'
+ import NotificationMenu from '~/components/NotificationMenu/NotificationMenu'
+ import seo from '~/mixins/seo'
+ import FilterMenu from '~/components/FilterMenu/FilterMenu.vue'
+ import PageFooter from '~/components/PageFooter/PageFooter'
+ import AvatarMenu from '~/components/AvatarMenu/AvatarMenu'
+ import InviteButton from '~/components/InviteButton/InviteButton'
 
-export default {
-  components: {
-    Logo,
-    LocaleSwitch,
-    SearchField,
-    Modal,
-    NotificationMenu,
-    AvatarMenu,
-    FilterMenu,
-    PageFooter,
-  },
-  mixins: [seo],
-  data() {
-    return {
-      mobileSearchVisible: false,
-      toggleMobileMenu: false,
-    }
-  },
-  computed: {
-    ...mapGetters({
-      isLoggedIn: 'auth/isLoggedIn',
-    }),
-    showFilterMenuDropdown() {
-      const [firstRoute] = this.$route.matched
-      return firstRoute && firstRoute.name === 'index'
-    },
-  },
-  methods: {
-    toggleMobileMenuView() {
-      this.toggleMobileMenu = !this.toggleMobileMenu
-    },
-  },
-}
+ export default {
+   components: {
+     Logo,
+     LocaleSwitch,
+     SearchField,
+     Modal,
+     NotificationMenu,
+     AvatarMenu,
+     FilterMenu,
+     PageFooter,
+     InviteButton,
+   },
+   mixins: [seo],
+   data() {
+     return {
+       mobileSearchVisible: false,
+       toggleMobileMenu: false,
+     }
+   },
+   asyncData({ app }) {
+     return {
+       inviteRegistration: app.$env.INVITE_REGISTRATION,
+     }
+   },
+   computed: {
+     ...mapGetters({
+       isLoggedIn: 'auth/isLoggedIn',
+     }),
+     showFilterMenuDropdown() {
+       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 {
-  display: flex;
-  margin-right: $space-xx-small;
-  align-self: center;
-  display: inline-flex;
-}
-.main-container {
-  padding-top: 6rem;
-  padding-bottom: 5rem;
-}
+ .topbar-locale-switch {
+   display: flex;
+   margin-right: $space-xx-small;
+   align-self: center;
+   display: inline-flex;
+ }
+ .main-container {
+   padding-top: 6rem;
+   padding-bottom: 5rem;
+ }
 
-.main-navigation-flex {
-  align-items: center;
-}
+ .main-navigation-flex {
+   align-items: center;
+ }
 
-.main-navigation {
-  a {
-    color: $text-color-soft;
-  }
-}
-.main-navigation-right {
-  display: flex;
-  justify-content: flex-end;
-}
-.main-navigation-right .desktop-view {
-  float: right;
-}
-.ds-flex-item.mobile-hamburger-menu {
-  margin-left: auto;
-  text-align: right;
-}
-@media only screen and (min-width: 730px) {
-  .mobile-hamburger-menu {
-    display: none;
-  }
-}
-@media only screen and (max-width: 730px) {
-  #nav-search-box,
-  .main-navigation-right {
-    margin: 10px 0px;
-  }
-  .hide-mobile-menu {
-    display: none;
-  }
-}
+ .main-navigation {
+   a {
+     color: $text-color-soft;
+   }
+ }
+ .main-navigation-right {
+   display: flex;
+   justify-content: flex-end;
+ }
+ .main-navigation-right .desktop-view {
+   float: right;
+ }
+ .ds-flex-item.mobile-hamburger-menu {
+   margin-left: auto;
+   text-align: right;
+ }
+ @media only screen and (min-width: 730px) {
+   .mobile-hamburger-menu {
+     display: none;
+   }
+ }
+ @media only screen and (max-width: 730px) {
+   #nav-search-box,
+   .main-navigation-right {
+     margin: 10px 0px;
+   }
+   .hide-mobile-menu {
+     display: none;
+   }
+ }
 </style>