basic invite button in frontend

webapp/assets/_new/icons/svgs/copy.svg

@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>copy</title>
+<path d="M4 4h16v3h-2v-1h-12v16h5v2h-7v-20zM12 8h16v20h-16v-20zM14 10v16h12v-16h-12z"></path>
+</svg>

webapp/components/InviteButton/InviteButton.vue

@@ -1,17 +1,83 @@
 <template>
-  <dropdown class="avatar-menu" offset="8" :placement="placement">
+  <dropdown class="invite-button" offset="8" :placement="placement">
     <template #default="{ toggleMenu }">
-      XXX
+      <base-button icon="user-plus" circle ghost @click.prevent="toggleMenu" />
+    </template>
+    <template #popover>
+      <div class="invite-button-menu-popover">
+        <div v-if="inviteCode && inviteCode.code">
+          <ds-text align="center">{{ $t('invite-codes.your-code') }}</ds-text>
+          <ds-text bold>
+            {{ inviteCode.code }}
+            <base-button
+              v-if="canCopy"
+              icon="copy"
+              ghost
+              size="small"
+              @click="copyInviteCode"
+            ></base-button>
+          </ds-text>
+        </div>
+        <div v-else>
+          <ds-text>{{ $t('invite-codes.not-available') }}</ds-text>
+        </div>
+      </div>
     </template>
   </dropdown>
 </template>
 
 <script>
 import Dropdown from '~/components/Dropdown'
+import gql from 'graphql-tag'
 
 export default {
   components: {
     Dropdown,
   },
+  props: {
+    placement: { type: String, default: 'top-end' },
+  },
+  data() {
+    return {
+      inviteCode: null,
+      canCopy: false,
+    }
+  },
+  created() {
+    this.canCopy = !!navigator.clipboard
+  },
+  methods: {
+    async copyInviteCode() {
+      await navigator.clipboard.writeText(this.inviteCode.code)
+      this.$toast.success(this.$t('invite-codes.copy-success'))
+    },
+  },
+  apollo: {
+    inviteCode: {
+      query() {
+        return gql`
+          query {
+            getInviteCode {
+              code
+            }
+          }
+        `
+      },
+      variables() {},
+      update({ getInviteCode }) {
+        return getInviteCode
+      },
+    },
+  },
 }
 </script>
+
+<style lang="scss">
+.invite-button {
+  color: $color-secondary;
+}
+
+.invite-button-menu-popover {
+  text-align: center;
+}
+</style>

webapp/config/index.js

@@ -29,8 +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',
+  PUBLIC_REGISTRATION: process.env.PUBLIC_REGISTRATION,
+  INVITE_REGISTRATION: process.env.INVITE_REGISTRATION,
   // 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,10 +50,11 @@
                   <client-only>
                     <notification-menu placement="top" />
                   </client-only>
-                  XXX {{ showInviteButton }}
-                  <client-only v-if="showInviteButton">
+                  <div v-if="inviteRegistration">
+                    <client-only>
                       <invite-button placement="top" />
                     </client-only>
+                  </div>
                   <client-only>
                     <avatar-menu placement="top" />
                   </client-only>
@@ -107,11 +108,7 @@
     return {
       mobileSearchVisible: false,
       toggleMobileMenu: false,
-     }
-   },
-   asyncData({ app }) {
-     return {
-       inviteRegistration: app.$env.INVITE_REGISTRATION,
+      inviteRegistration: this.$env.inviteRegistration,
     }
   },
   computed: {
@@ -122,9 +119,6 @@
       const [firstRoute] = this.$route.matched
       return firstRoute && firstRoute.name === 'index'
     },
-     showInviteButton() {
-       return this.inviteRegistration
-     },
   },
   methods: {
     toggleMobileMenuView() {

webapp/locales/de.json

@@ -336,6 +336,12 @@
     "change-filter-settings": "Verändere die Filter-Einstellungen, um mehr Ergebnisse zu erhalten.",
     "no-results": "Keine Beiträge gefunden."
   },
+  "invite-codes": {
+    "copy-code": "Einladungscode in die Zwischenablage kopieren",
+    "copy-success": "Einladungscode erfolgreich in die Zwischenablage kopiert",
+    "not-available": "Du hast keinen Einladungscode zur Verfügung!",
+    "your-code": "Das ist dein Einladungscode:"
+  },
   "login": {
     "email": "Deine E-Mail",
     "failure": "Fehlerhafte E-Mail-Adresse oder Passwort.",

webapp/locales/en.json

@@ -336,6 +336,12 @@
     "change-filter-settings": "Change your filter settings to get more results.",
     "no-results": "No contributions found."
   },
+  "invite-codes": {
+    "copy-code": "Copy invite code to clipboard",
+    "copy-success": "Invite code copied to clipboard",
+    "not-available": "You have no valid invite code available!",
+    "your-code": "This is your invite code:"
+  },
   "login": {
     "email": "Your E-mail",
     "failure": "Incorrect email address or password.",

webapp/nuxt.config.js

@@ -28,6 +28,8 @@ export default {
 
   env: {
     release: CONFIG.VERSION,
+    publicRegistration: String(CONFIG.PUBLIC_REGISTRATION) === 'true',
+    inviteRegistration: String(CONFIG.INVITE_REGISTRATION) === 'true',
     // pages which do NOT require a login
     publicPages: [
       'login',