Merge pull request #4301 from Ocelot-Social-Community/invite-button

feat: 🍰 Invite Button

backend/.env.template

@@ -17,6 +17,7 @@ PRIVATE_KEY_PASSPHRASE="a7dsf78sadg87ad87sfagsadg78"
 SENTRY_DSN_BACKEND=
 COMMIT=
 PUBLIC_REGISTRATION=false
+INVITE_REGISTRATION=true
 
 AWS_ACCESS_KEY_ID=
 AWS_SECRET_ACCESS_KEY=

backend/src/config/index.js

@@ -82,7 +82,8 @@ const options = {
   SUPPORT_URL: links.SUPPORT,
   APPLICATION_NAME: metadata.APPLICATION_NAME,
   ORGANIZATION_URL: links.ORGANIZATION,
-  PUBLIC_REGISTRATION: env.PUBLIC_REGISTRATION === 'true',
+  PUBLIC_REGISTRATION: env.PUBLIC_REGISTRATION === 'true' || false,
+  INVITE_REGISTRATION: env.INVITE_REGISTRATION !== 'false', // default = true
 }
 
 // Check if all required configs are present

backend/src/middleware/permissionsMiddleware.js

@@ -87,7 +87,7 @@ const noEmailFilter = rule({
   return !('email' in args)
 })
 
-const publicRegistration = rule()(() => !!CONFIG.PUBLIC_REGISTRATION)
+const publicRegistration = rule()(() => CONFIG.PUBLIC_REGISTRATION)
 
 // Permissions
 export default shield(
@@ -123,6 +123,7 @@ export default shield(
       isValidInviteCode: allow,
       queryLocations: isAuthenticated,
       availableRoles: isAdmin,
+      getInviteCode: isAuthenticated, // and inviteRegistration
     },
     Mutation: {
       '*': deny,

backend/src/schema/resolvers/inviteCodes.js

@@ -12,6 +12,52 @@ const uniqueInviteCode = async (session, code) => {
 
 export default {
   Query: {
+    getInviteCode: async (_parent, args, context, _resolveInfo) => {
+      const {
+        user: { id: userId },
+      } = context
+      const session = context.driver.session()
+      const readTxResultPromise = session.readTransaction(async (txc) => {
+        const result = await txc.run(
+          `MATCH (user:User {id: $userId})-[:GENERATED]->(ic:InviteCode)
+           WHERE ic.expiresAt IS NULL
+           OR datetime(ic.expiresAt) >=  datetime()
+           RETURN properties(ic) AS inviteCodes`,
+          {
+            userId,
+          },
+        )
+        return result.records.map((record) => record.get('inviteCodes'))
+      })
+      try {
+        const inviteCode = await readTxResultPromise
+        if (inviteCode && inviteCode.length > 0) return inviteCode[0]
+        let code = generateInviteCode()
+        while (!(await uniqueInviteCode(session, code))) {
+          code = generateInviteCode()
+        }
+        const writeTxResultPromise = session.writeTransaction(async (txc) => {
+          const result = await txc.run(
+            `MATCH (user:User {id: $userId})
+             MERGE (user)-[:GENERATED]->(ic:InviteCode { code: $code })
+             ON CREATE SET
+             ic.createdAt = toString(datetime()),
+             ic.expiresAt = $expiresAt
+             RETURN ic AS inviteCode`,
+            {
+              userId,
+              code,
+              expiresAt: null,
+            },
+          )
+          return result.records.map((record) => record.get('inviteCode').properties)
+        })
+        const txResult = await writeTxResultPromise
+        return txResult[0]
+      } finally {
+        session.close()
+      }
+    },
     MyInviteCodes: async (_parent, args, context, _resolveInfo) => {
       const {
         user: { id: userId },

backend/src/schema/types/type/InviteCode.gql

@@ -14,4 +14,5 @@ type Mutation {
 type Query {
   MyInviteCodes: [InviteCode]
   isValidInviteCode(code: ID!): Boolean
+  getInviteCode: InviteCode
 }

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/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

@@ -0,0 +1,113 @@
+<template>
+  <dropdown class="invite-button" offset="8" :placement="placement">
+    <template #default="{ toggleMenu }">
+      <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">
+          <p class="description">{{ $t('invite-codes.your-code') }}</p>
+          <base-card class="code-card" wideContent>
+            <base-button
+              v-if="canCopy"
+              class="invite-code"
+              icon="copy"
+              ghost
+              @click="copyInviteLink"
+            >
+              <ds-text bold>
+                {{ $t('invite-codes.copy-code') }}
+                {{ inviteCode.code }}
+              </ds-text>
+            </base-button>
+          </base-card>
+        </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'
+import BaseCard from '../_new/generic/BaseCard/BaseCard.vue'
+
+export default {
+  components: {
+    Dropdown,
+    BaseCard,
+  },
+  props: {
+    placement: { type: String, default: 'top-end' },
+  },
+  data() {
+    return {
+      inviteCode: null,
+      canCopy: false,
+    }
+  },
+  created() {
+    this.canCopy = !!navigator.clipboard
+  },
+  computed: {
+    inviteLink() {
+      return (
+        'https://' +
+        window.location.hostname +
+        '/registration?method=invite-code&inviteCode=' +
+        this.inviteCode.code
+      )
+    },
+  },
+  methods: {
+    async copyInviteLink() {
+      await navigator.clipboard.writeText(this.inviteLink)
+      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" scope>
+.invite-button {
+  color: $color-secondary;
+}
+
+.invite-button-menu-popover {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  .description {
+    margin-top: $space-x-small;
+    margin-bottom: $space-x-small;
+  }
+  .code-card {
+    margin-bottom: $space-x-small;
+  }
+}
+
+.invite-code {
+  left: 50%;
+}
+</style>

webapp/components/PageFooter/PageFooter.vue

@@ -31,7 +31,7 @@
 import links from '~/constants/links.js'
 export default {
   data() {
-    return { links, version: `v${process.env.release}` }
+    return { links, version: `v${this.$env.VERSION}` }
   },
 }
 </script>

webapp/config/index.js

@@ -12,7 +12,6 @@ const environment = {
   PRODUCTION: process.env.NODE_ENV === 'production' || false,
   NUXT_BUILD: process.env.NUXT_BUILD || '.nuxt',
   STYLEGUIDE_DEV: process.env.STYLEGUIDE_DEV || false,
-  RELEASE: process.env.release,
 }
 
 const server = {
@@ -29,6 +28,8 @@ const sentry = {
 const options = {
   VERSION: process.env.VERSION || pkg.version,
   DESCRIPTION: process.env.DESCRIPTION || pkg.description,
+  PUBLIC_REGISTRATION: process.env.PUBLIC_REGISTRATION === 'true' || false,
+  INVITE_REGISTRATION: process.env.INVITE_REGISTRATION !== 'false', // default = 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,11 @@
                   <client-only>
                     <notification-menu placement="top" />
                   </client-only>
+                  <div v-if="inviteRegistration">
+                    <client-only>
+                      <invite-button placement="top" />
+                    </client-only>
+                  </div>
                   <client-only>
                     <avatar-menu placement="top" />
                   </client-only>
@@ -84,6 +89,7 @@ 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: {
@@ -95,12 +101,14 @@ export default {
     AvatarMenu,
     FilterMenu,
     PageFooter,
+    InviteButton,
   },
   mixins: [seo],
   data() {
     return {
       mobileSearchVisible: false,
       toggleMobileMenu: false,
+      inviteRegistration: this.$env.INVITE_REGISTRATION === true, // for 'false' in .env INVITE_REGISTRATION is of type undefined and not(!) boolean false, because of internal handling,
     }
   },
   computed: {

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": "Code:",
+    "copy-success": "Einladungscode erfolgreich in die Zwischenablage kopiert",
+    "not-available": "Du hast keinen Einladungscode zur Verfügung!",
+    "your-code": "Kopiere deinen Einladungscode in die Ablage:"
+  },
   "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": "Code:",
+    "copy-success": "Invite code copied to clipboard",
+    "not-available": "You have no valid invite code available!",
+    "your-code": "Copy your invite code to the clipboard:"
+  },
   "login": {
     "email": "Your E-mail",
     "failure": "Incorrect email address or password.",

webapp/nuxt.config.js

@@ -27,7 +27,7 @@ export default {
   },
 
   env: {
-    release: CONFIG.VERSION,
+    ...CONFIG,
     // pages which do NOT require a login
     publicPages: [
       'login',

webapp/pages/registration/signup.vue

@@ -22,7 +22,7 @@ export default {
   },
   asyncData({ app }) {
     return {
-      publicRegistration: app.$env.PUBLIC_REGISTRATION === 'true',
+      publicRegistration: app.$env.PUBLIC_REGISTRATION,
     }
   },
   methods: {

webapp/plugins/vue-filters.js

@@ -33,6 +33,18 @@ export default ({ app = {} }) => {
       }
       return trunc(value, length).html
     },
+    truncateStr: (value = '', length = -1) => {
+      if (!value || typeof value !== 'string' || value.length <= 0) {
+        return ''
+      }
+      if (length <= 0) {
+        return value
+      }
+      if (length < value.length) {
+        return value.substring(0, length) + '…'
+      }
+      return value
+    },
     list: (value, glue = ', ', truncate = 0) => {
       if (!Array.isArray(value) || !value.length) {
         return ''