Merge branch 'master' of https://github.com/Ocelot-Social-Community/Ocelot-Social into 4092-implement-new-registration

backend/src/jwt/encode.js

@@ -5,7 +5,7 @@ import CONFIG from './../config'
 export default function encode(user) {
   const { id, name, slug } = user
   const token = jwt.sign({ id, name, slug }, CONFIG.JWT_SECRET, {
-    expiresIn: '1d',
+    expiresIn: '2y',
     issuer: CONFIG.GRAPHQL_URI,
     audience: CONFIG.CLIENT_URI,
     subject: user.id.toString(),

backend/src/middleware/permissionsMiddleware.js

@@ -88,7 +88,7 @@ const noEmailFilter = rule({
   return !('email' in args)
 })
 
-const publicRegistration = rule()(() => !!CONFIG.PUBLIC_REGISTRATION)
+const publicRegistration = rule()(() => CONFIG.PUBLIC_REGISTRATION)
 
 const inviteRegistration = rule()(async (_parent, args, { user, driver }) => {
   if (!CONFIG.INVITE_REGISTRATION) return false
@@ -132,6 +132,7 @@ export default shield(
       VerifyNonce: allow,
       queryLocations: isAuthenticated,
       availableRoles: isAdmin,
+      getInviteCode: isAuthenticated, // and inviteRegistration
     },
     Mutation: {
       '*': deny,

backend/src/schema/resolvers/inviteCodes.js

@@ -13,6 +13,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/resolvers/users/location.spec.js

@@ -114,10 +114,22 @@ describe('Location Service', () => {
     const result = await query({ query: queryLocations, variables })
     expect(result.data.queryLocations).toEqual([
       { id: 'place.14094307404564380', place_name: 'Berlin, Germany' },
-      { id: 'place.15095411613564380', place_name: 'Berlin, Maryland, United States' },
-      { id: 'place.5225018734564380', place_name: 'Berlin, Connecticut, United States' },
-      { id: 'place.16922023226564380', place_name: 'Berlin, New Jersey, United States' },
-      { id: 'place.4035845612564380', place_name: 'Berlin Township, New Jersey, United States' },
+      {
+        id: expect.stringMatching(/^place\.[0-9]+$/),
+        place_name: 'Berlin, Maryland, United States',
+      },
+      {
+        id: expect.stringMatching(/^place\.[0-9]+$/),
+        place_name: 'Berlin, Connecticut, United States',
+      },
+      {
+        id: expect.stringMatching(/^place\.[0-9]+$/),
+        place_name: 'Berlin, New Jersey, United States',
+      },
+      {
+        id: expect.stringMatching(/^place\.[0-9]+$/),
+        place_name: 'Berlin Township, New Jersey, United States',
+      },
     ])
   })
 
@@ -128,11 +140,23 @@ describe('Location Service', () => {
     }
     const result = await query({ query: queryLocations, variables })
     expect(result.data.queryLocations).toEqual([
-      { id: 'place.14094307404564380', place_name: 'Berlin, Deutschland' },
-      { id: 'place.15095411613564380', place_name: 'Berlin, Maryland, Vereinigte Staaten' },
-      { id: 'place.16922023226564380', place_name: 'Berlin, New Jersey, Vereinigte Staaten' },
-      { id: 'place.10735893248465990', place_name: 'Berlin Heights, Ohio, Vereinigte Staaten' },
-      { id: 'place.1165756679564380', place_name: 'Berlin, Massachusetts, Vereinigte Staaten' },
+      { id: expect.stringMatching(/^place\.[0-9]+$/), place_name: 'Berlin, Deutschland' },
+      {
+        id: expect.stringMatching(/^place\.[0-9]+$/),
+        place_name: 'Berlin, Maryland, Vereinigte Staaten',
+      },
+      {
+        id: expect.stringMatching(/^place\.[0-9]+$/),
+        place_name: 'Berlin, New Jersey, Vereinigte Staaten',
+      },
+      {
+        id: expect.stringMatching(/^place\.[0-9]+$/),
+        place_name: 'Berlin Heights, Ohio, Vereinigte Staaten',
+      },
+      {
+        id: expect.stringMatching(/^place\.[0-9]+$/),
+        place_name: 'Berlin, Massachusetts, Vereinigte Staaten',
+      },
     ])
   })
 

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

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

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/Editor/Editor.spec.js

@@ -99,6 +99,37 @@ describe('Editor.vue', () => {
         })
       })
 
+      it('suggestion list returns results prefixed by query', () => {
+        const manyUsersList = []
+        for (let i = 0; i < 10; i++) {
+          manyUsersList.push({ id: `user${i}` })
+          manyUsersList.push({ id: `admin${i}` })
+          manyUsersList.push({ id: `moderator${i}` })
+        }
+        propsData.users = manyUsersList
+        wrapper = Wrapper()
+        const suggestionList = wrapper.vm.editor.extensions.options.mention.onFilter(
+          propsData.users,
+          'moderator',
+        )
+        expect(suggestionList).toHaveLength(10)
+        for (var i = 0; i < suggestionList.length; i++) {
+          expect(suggestionList[i].id).toMatch(/^moderator.*/)
+        }
+      })
+
+      it('exact match appears at the top of suggestion list', () => {
+        const manyUsersList = []
+        for (let i = 0; i < 25; i++) {
+          manyUsersList.push({ id: `user${i}` })
+        }
+        propsData.users = manyUsersList
+        wrapper = Wrapper()
+        expect(
+          wrapper.vm.editor.extensions.options.mention.onFilter(propsData.users, 'user7')[0].id,
+        ).toMatch('user7')
+      })
+
       it('sets the Hashtag items to the hashtags', () => {
         propsData.hashtags = [
           {

webapp/components/Editor/Editor.vue

@@ -185,6 +185,9 @@ export default {
           if (this.suggestionType === HASHTAG && this.query !== '') {
             this.selectItem({ id: this.query })
           }
+          if (this.suggestionType === MENTION && item) {
+            this.selectItem(item)
+          }
           return true
 
         default:
@@ -199,9 +202,14 @@ export default {
 
       const filteredList = items.filter((item) => {
         const itemString = item.slug || item.id
-        return itemString.toLowerCase().includes(query.toLowerCase())
+        return itemString.toLowerCase().startsWith(query.toLowerCase())
       })
-      return filteredList.slice(0, 15)
+      const sortedList = filteredList.sort((itemA, itemB) => {
+        const aString = itemA.slug || itemA.id
+        const bString = itemB.slug || itemB.id
+        return aString.length - bString.length
+      })
+      return sortedList.slice(0, 15)
     },
     sanitizeQuery(query) {
       if (this.suggestionType === HASHTAG) {

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 = {

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

@@ -354,6 +354,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

@@ -354,6 +354,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/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 ''