Merge branch 'master' into humhub_options

backend/.env.dist

@@ -68,5 +68,7 @@ FEDERATION_XCOM_SENDCOINS_ENABLED=false
 # GMS
 # GMS_ACTIVE=true
 # Coordinates of Illuminz test instance
-#GMS_URL=http://54.176.169.179:3071
-GMS_URL=http://localhost:4044/
+#GMS_API_URL=http://54.176.169.179:3071
+GMS_API_URL=http://localhost:4044/
+GMS_DASHBOARD_URL=http://localhost:8080/
+

backend/.env.template

@@ -66,4 +66,7 @@ FEDERATION_XCOM_SENDCOINS_ENABLED=$FEDERATION_XCOM_SENDCOINS_ENABLED
 
 # GMS
 GMS_ACTIVE=$GMS_ACTIVE
-GMS_URL=$GMS_URL
+GMS_API_URL=$GMS_API_URL
+GMS_DASHBOARD_URL=$GMS_DASHBOARD_URL
+GMS_WEBHOOK_SECRET=$GMS_WEBHOOK_SECRET
+GMS_CREATE_USER_THROW_ERRORS=$GMS_CREATE_USER_THROW_ERRORS

backend/src/apis/gms/GmsClient.ts

@@ -7,12 +7,13 @@ import axios from 'axios'
 import { CONFIG } from '@/config'
 import { LogError } from '@/server/LogError'
 import { backendLogger as logger } from '@/server/logger'
+import { ensureUrlEndsWithSlash } from '@/util/utilities'
 
 import { GmsUser } from './model/GmsUser'
 
 /*
 export async function communityList(): Promise<GmsCommunity[] | string | undefined> {
-  const baseUrl = CONFIG.GMS_URL.endsWith('/') ? CONFIG.GMS_URL : CONFIG.GMS_URL.concat('/')
+  const baseUrl = ensureUrlEndsWithSlash(CONFIG.GMS_URL)
   const service = 'community/list?page=1&perPage=20'
   const config = {
     headers: {
@@ -44,7 +45,7 @@ export async function communityList(): Promise<GmsCommunity[] | string | undefin
 }
 
 export async function userList(): Promise<GmsUser[] | string | undefined> {
-  const baseUrl = CONFIG.GMS_URL.endsWith('/') ? CONFIG.GMS_URL : CONFIG.GMS_URL.concat('/')
+  const baseUrl = ensureUrlEndsWithSlash(CONFIG.GMS_URL)
   const service = 'community-user/list?page=1&perPage=20'
   const config = {
     headers: {
@@ -80,7 +81,7 @@ export async function userList(): Promise<GmsUser[] | string | undefined> {
 }
 
 export async function userByUuid(uuid: string): Promise<GmsUser[] | string | undefined> {
-  const baseUrl = CONFIG.GMS_URL.endsWith('/') ? CONFIG.GMS_URL : CONFIG.GMS_URL.concat('/')
+  const baseUrl = ensureUrlEndsWithSlash(CONFIG.GMS_URL)
   const service = 'community-user/list?page=1&perPage=20'
   const config = {
     headers: {
@@ -118,7 +119,7 @@ export async function userByUuid(uuid: string): Promise<GmsUser[] | string | und
 
 export async function createGmsUser(apiKey: string, user: GmsUser): Promise<boolean> {
   if (CONFIG.GMS_ACTIVE) {
-    const baseUrl = CONFIG.GMS_URL.endsWith('/') ? CONFIG.GMS_URL : CONFIG.GMS_URL.concat('/')
+    const baseUrl = ensureUrlEndsWithSlash(CONFIG.GMS_API_URL)
     const service = 'community-user'
     const config = {
       headers: {
@@ -152,7 +153,7 @@ export async function createGmsUser(apiKey: string, user: GmsUser): Promise<bool
 
 export async function updateGmsUser(apiKey: string, user: GmsUser): Promise<boolean> {
   if (CONFIG.GMS_ACTIVE) {
-    const baseUrl = CONFIG.GMS_URL.endsWith('/') ? CONFIG.GMS_URL : CONFIG.GMS_URL.concat('/')
+    const baseUrl = ensureUrlEndsWithSlash(CONFIG.GMS_API_URL)
     const service = 'community-user'
     const config = {
       headers: {
@@ -189,7 +190,7 @@ export async function verifyAuthToken(
   communityUuid: string,
   token: string,
 ): Promise<string> {
-  const baseUrl = CONFIG.GMS_URL.endsWith('/') ? CONFIG.GMS_URL : CONFIG.GMS_URL.concat('/')
+  const baseUrl = ensureUrlEndsWithSlash(CONFIG.GMS_API_URL)
   const service = 'verify-auth-token?token='.concat(token).concat('&uuid=').concat(communityUuid)
   const config = {
     headers: {

backend/src/config/index.ts

@@ -19,7 +19,7 @@ const constants = {
   LOG_LEVEL: process.env.LOG_LEVEL ?? 'info',
   CONFIG_VERSION: {
     DEFAULT: 'DEFAULT',
-    EXPECTED: 'v22.2024-03-14',
+    EXPECTED: 'v23.2024-04-04',
     CURRENT: '',
   },
 }
@@ -145,7 +145,8 @@ const gms = {
   GMS_ACTIVE: process.env.GMS_ACTIVE === 'true' || false,
   GMS_CREATE_USER_THROW_ERRORS: process.env.GMS_CREATE_USER_THROW_ERRORS === 'true' || false,
   // koordinates of Illuminz-instance of GMS
-  GMS_URL: process.env.GMS_HOST ?? 'http://localhost:4044/',
+  GMS_API_URL: process.env.GMS_API_URL ?? 'http://localhost:4044/',
+  GMS_DASHBOARD_URL: process.env.GMS_DASHBOARD_URL ?? 'http://localhost:8080/',
   // used as secret postfix attached at the gms community-auth-url endpoint ('/hook/gms/' + 'secret')
   GMS_WEBHOOK_SECRET: process.env.GMS_WEBHOOK_SECRET ?? 'secret',
 }

backend/src/federation/authenticateCommunities.ts

@@ -6,6 +6,7 @@ import { CONFIG } from '@/config'
 // eslint-disable-next-line camelcase
 import { AuthenticationClient as V1_0_AuthenticationClient } from '@/federation/client/1_0/AuthenticationClient'
 import { backendLogger as logger } from '@/server/logger'
+import { ensureUrlEndsWithSlash } from '@/util/utilities'
 
 import { OpenConnectionArgs } from './client/1_0/model/OpenConnectionArgs'
 import { AuthenticationClientFactory } from './client/AuthenticationClientFactory'
@@ -39,9 +40,7 @@ export async function startCommunityAuthentication(
         const args = new OpenConnectionArgs()
         args.publicKey = homeCom.publicKey.toString('hex')
         // TODO encrypt url with foreignCom.publicKey and sign it with homeCom.privateKey
-        args.url = homeFedCom.endPoint.endsWith('/')
-          ? homeFedCom.endPoint
-          : homeFedCom.endPoint + '/' + homeFedCom.apiVersion
+        args.url = ensureUrlEndsWithSlash(homeFedCom.endPoint).concat(homeFedCom.apiVersion)
         logger.debug(
           'Authentication: before client.openConnection() args:',
           homeCom.publicKey.toString('hex'),

backend/src/federation/client/1_0/AuthenticationClient.ts

@@ -2,6 +2,7 @@ import { FederatedCommunity as DbFederatedCommunity } from '@entity/FederatedCom
 import { GraphQLClient } from 'graphql-request'
 
 import { backendLogger as logger } from '@/server/logger'
+import { ensureUrlEndsWithSlash } from '@/util/utilities'
 
 import { OpenConnectionArgs } from './model/OpenConnectionArgs'
 import { openConnection } from './query/openConnection'
@@ -13,9 +14,7 @@ export class AuthenticationClient {
 
   constructor(dbCom: DbFederatedCommunity) {
     this.dbCom = dbCom
-    this.endpoint = `${dbCom.endPoint.endsWith('/') ? dbCom.endPoint : dbCom.endPoint + '/'}${
-      dbCom.apiVersion
-    }/`
+    this.endpoint = ensureUrlEndsWithSlash(dbCom.endPoint).concat(dbCom.apiVersion).concat('/')
     this.client = new GraphQLClient(this.endpoint, {
       method: 'POST',
       jsonSerializer: {

backend/src/federation/client/1_0/FederationClient.ts

@@ -4,6 +4,7 @@ import { GraphQLClient } from 'graphql-request'
 import { getPublicCommunityInfo } from '@/federation/client/1_0/query/getPublicCommunityInfo'
 import { getPublicKey } from '@/federation/client/1_0/query/getPublicKey'
 import { backendLogger as logger } from '@/server/logger'
+import { ensureUrlEndsWithSlash } from '@/util/utilities'
 
 import { PublicCommunityInfoLoggingView } from './logging/PublicCommunityInfoLogging.view'
 import { GetPublicKeyResult } from './model/GetPublicKeyResult'
@@ -16,9 +17,7 @@ export class FederationClient {
 
   constructor(dbCom: DbFederatedCommunity) {
     this.dbCom = dbCom
-    this.endpoint = `${dbCom.endPoint.endsWith('/') ? dbCom.endPoint : dbCom.endPoint + '/'}${
-      dbCom.apiVersion
-    }/`
+    this.endpoint = ensureUrlEndsWithSlash(dbCom.endPoint).concat(dbCom.apiVersion).concat('/')
     this.client = new GraphQLClient(this.endpoint, {
       method: 'GET',
       jsonSerializer: {

backend/src/federation/client/1_0/SendCoinsClient.ts

@@ -3,6 +3,7 @@ import { GraphQLClient } from 'graphql-request'
 
 import { LogError } from '@/server/LogError'
 import { backendLogger as logger } from '@/server/logger'
+import { ensureUrlEndsWithSlash } from '@/util/utilities'
 
 import { SendCoinsArgsLoggingView } from './logging/SendCoinsArgsLogging.view'
 import { SendCoinsResultLoggingView } from './logging/SendCoinsResultLogging.view'
@@ -20,9 +21,7 @@ export class SendCoinsClient {
 
   constructor(dbCom: DbFederatedCommunity) {
     this.dbCom = dbCom
-    this.endpoint = `${dbCom.endPoint.endsWith('/') ? dbCom.endPoint : dbCom.endPoint + '/'}${
-      dbCom.apiVersion
-    }/`
+    this.endpoint = ensureUrlEndsWithSlash(dbCom.endPoint).concat(dbCom.apiVersion).concat('/')
     this.client = new GraphQLClient(this.endpoint, {
       method: 'POST',
       jsonSerializer: {

backend/src/federation/client/FederationClientFactory.ts

@@ -5,6 +5,7 @@ import { FederationClient as V1_0_FederationClient } from '@/federation/client/1
 // eslint-disable-next-line camelcase
 import { FederationClient as V1_1_FederationClient } from '@/federation/client/1_1/FederationClient'
 import { ApiVersionType } from '@/federation/enum/apiVersionType'
+import { ensureUrlEndsWithSlash } from '@/util/utilities'
 
 // eslint-disable-next-line camelcase
 type FederationClient = V1_0_FederationClient | V1_1_FederationClient
@@ -47,10 +48,7 @@ export class FederationClientFactory {
     const instance = FederationClientFactory.instanceArray.find(
       (instance) => instance.id === dbCom.id,
     )
-    // TODO: found a way to prevent double code with FederationClient::constructor
-    const endpoint = `${dbCom.endPoint.endsWith('/') ? dbCom.endPoint : dbCom.endPoint + '/'}${
-      dbCom.apiVersion
-    }/`
+    const endpoint = ensureUrlEndsWithSlash(dbCom.endPoint).concat(dbCom.apiVersion)
     // check if endpoint is still the same and not changed meanwhile
     if (instance && instance.client.getEndpoint() === endpoint) {
       return instance.client

backend/src/graphql/model/FederatedCommunity.ts

@@ -1,6 +1,8 @@
 import { FederatedCommunity as DbFederatedCommunity } from '@entity/FederatedCommunity'
 import { ObjectType, Field, Int } from 'type-graphql'
 
+import { ensureUrlEndsWithSlash } from '@/util/utilities'
+
 @ObjectType()
 export class FederatedCommunity {
   constructor(dbCom: DbFederatedCommunity) {
@@ -8,7 +10,7 @@ export class FederatedCommunity {
     this.foreign = dbCom.foreign
     this.publicKey = dbCom.publicKey.toString('hex')
     this.apiVersion = dbCom.apiVersion
-    this.endPoint = dbCom.endPoint.endsWith('/') ? dbCom.endPoint : dbCom.endPoint + '/'
+    this.endPoint = ensureUrlEndsWithSlash(dbCom.endPoint)
     this.lastAnnouncedAt = dbCom.lastAnnouncedAt
     this.verifiedAt = dbCom.verifiedAt
     this.lastErrorAt = dbCom.lastErrorAt

backend/src/graphql/resolver/util/authenticateGmsUserPlayground.ts

@@ -4,13 +4,16 @@ import { verifyAuthToken } from '@/apis/gms/GmsClient'
 import { CONFIG } from '@/config'
 import { GmsUserAuthenticationResult } from '@/graphql/model/GmsUserAuthenticationResult'
 import { backendLogger as logger } from '@/server/logger'
+import { ensureUrlEndsWithSlash } from '@/util/utilities'
 
 export async function authenticateGmsUserPlayground(
   token: string,
   dbUser: DbUser,
 ): Promise<GmsUserAuthenticationResult> {
   const result = new GmsUserAuthenticationResult()
-  result.url = CONFIG.GMS_URL.concat('/playground')
+  const dashboardUrl = ensureUrlEndsWithSlash(CONFIG.GMS_DASHBOARD_URL)
+
+  result.url = dashboardUrl.concat('playground')
   result.token = await verifyAuthToken(dbUser.communityUuid, token)
   logger.info('GmsUserAuthenticationResult:', result)
   return result

backend/src/util/utilities.ts

@@ -29,3 +29,7 @@ export function resetInterface<T extends Record<string, any>>(obj: T): T {
   }
   return obj
 }
+
+export const ensureUrlEndsWithSlash = (url: string): string => {
+  return url.endsWith('/') ? url : url.concat('/')
+}

deployment/bare_metal/.env.dist

@@ -122,8 +122,11 @@ WEBHOOK_ELOPAGE_SECRET=secret
 # GMS
 GMS_ACTIVE=false
 # Coordinates of Illuminz test instance
-#GMS_URL=http://54.176.169.179:3071
-GMS_URL=http://localhost:4044/
+#GMS_API_URL=http://54.176.169.179:3071
+GMS_API_URL=http://localhost:4044/
+GMS_DASHBOARD_URL=http://localhost:8080/
+GMS_WEBHOOK_SECRET=secret
+GMS_CREATE_USER_THROW_ERRORS=false
 
 # HUMHUB
 HUMHUB_ACTIVE=false

frontend/src/components/Menu/Sidebar.spec.js

@@ -34,7 +34,7 @@ describe('Sidebar', () => {
 
     describe('the genaral section', () => {
       it('has six nav-items', () => {
-        expect(wrapper.findAll('ul').at(0).findAll('.nav-item')).toHaveLength(6)
+        expect(wrapper.findAll('ul').at(0).findAll('.nav-item')).toHaveLength(7)
       })
 
       it('has nav-item "navigation.overview" in navbar', () => {
@@ -60,6 +60,10 @@ describe('Sidebar', () => {
       it('has nav-item "navigation.info" in navbar', () => {
         expect(wrapper.findAll('.nav-item').at(5).text()).toContain('navigation.info')
       })
+
+      it('has nav-item "usersearch" in navbar', () => {
+        expect(wrapper.findAll('.nav-item').at(6).text()).toContain('navigation.usersearch')
+      })
     })
 
     describe('the specific section', () => {

frontend/src/components/Menu/Sidebar.vue

@@ -28,10 +28,14 @@
             <b-icon icon="layers" aria-hidden="true"></b-icon>
             <span class="ml-2">{{ $t('GDT') }}</span>
           </b-nav-item>
-          <b-nav-item to="/information" active-class="activeRoute">
+          <b-nav-item to="/information" class="mb-3" active-class="activeRoute">
             <b-img src="/img/svg/info.svg" height="20" class="svg-icon" />
             <span class="ml-2">{{ $t('navigation.info') }}</span>
           </b-nav-item>
+          <b-nav-item to="/usersearch" active-class="activeRoute">
+            <b-img src="/img/loupe.png" height="20" />
+            <span class="ml-2">{{ $t('navigation.usersearch') }}</span>
+          </b-nav-item>
         </b-nav>
         <hr class="m-3" />
         <b-nav vertical class="w-100">

frontend/src/graphql/queries.js

@@ -19,6 +19,14 @@ export const verifyLogin = gql`
     }
   }
 `
+export const authenticateGmsUserSearch = gql`
+  query {
+    authenticateGmsUserSearch {
+      url
+      token
+    }
+  }
+`
 
 export const transactionsQuery = gql`
   query($currentPage: Int = 1, $pageSize: Int = 25, $order: Order = DESC) {

frontend/src/locales/de.json

@@ -269,7 +269,8 @@
     "send": "Senden",
     "settings": "Einstellung",
     "support": "Support",
-    "transactions": "Transaktionen"
+    "transactions": "Transaktionen",
+    "usersearch": "Nutzersuche"
   },
   "openHours": "Offene Stunden",
   "pageTitle": {
@@ -279,7 +280,8 @@
     "overview": "Willkommen {name}",
     "send": "Sende Gradidos",
     "settings": "Einstellungen",
-    "transactions": "Deine Transaktionen"
+    "transactions": "Deine Transaktionen",
+    "usersearch": "Geografische Nutzersuche"
   },
   "qrCode": "QR Code",
   "send_gdd": "GDD versenden",
@@ -422,6 +424,11 @@
   "transaction-link": {
     "send_you": "sendet dir"
   },
+  "usersearch": {
+    "headline": "Geografische Nutzersuche",
+    "text": "Ganz gleich zu welcher Community du gehörst, mit dem Geo Matching System findest du Mitglieder aller Communities auf einer Landkarte. Du kannst nach  Angeboten und Bedürfnissen filtern und dir die Nutzer anzeigen lassen, die zu Dir passen.\n\nMit dem Button wird ein neues Browser-Fenster geöffnet, in dem dir die Nutzer in deinem Umfeld auf einer Karte angezeigt werden.",
+    "button": "Starte die Nutzersuche..."
+  },
   "via_link": "über einen Link",
   "welcome": "Willkommen in der Gemeinschaft"
 }

frontend/src/locales/en.json

@@ -269,7 +269,8 @@
     "send": "Send",
     "settings": "Settings",
     "support": "Support",
-    "transactions": "Transactions"
+    "transactions": "Transactions",
+    "usersearch": "Geographical User Search"
   },
   "openHours": "Open Hours",
   "pageTitle": {
@@ -279,7 +280,8 @@
     "overview": "Welcome {name}",
     "send": "Send Gradidos",
     "settings": "Settings",
-    "transactions": "Your transactions"
+    "transactions": "Your transactions",
+    "usersearch": "Geographical User Search"
   },
   "qrCode": "QR Code",
   "send_gdd": "Send GDD",
@@ -422,6 +424,11 @@
   "transaction-link": {
     "send_you": "wants to send you"
   },
+  "usersearch": {
+    "headline": "Geographical User Search",
+    "text": "No matter which community you belong to, with the Geo Matching System you can find members of all communities on a map. You can filter according to offers and needs and display the users that match you.\n\nThe button opens a new browser window in which the users in your area are displayed on a map.",
+    "button": "Start user search... "
+  },
   "via_link": "via Link",
   "welcome": "Welcome to the community"
 }

frontend/src/locales/es.json

@@ -242,7 +242,19 @@
     "profile": "Mi Perfil",
     "send": "Enviar",
     "support": "Soporte",
-    "transactions": "Transacciones"
+    "transactions": "Transacciones",
+    "usersearch": "Buscar usuarios"
+  },
+  "openHours": "Open Hours",
+  "pageTitle": {
+    "community": "Create Gradido",
+    "gdt": "Tu GDT Transacciones",
+    "information": "{community}",
+    "overview": "Welcome {name}",
+    "send": "Enviar Gradidos",
+    "settings": "Soporte",
+    "transactions": "Tu Transacciones",
+    "usersearch": "Búsqueda geográfica de usuarios"
   },
   "qrCode": "Código QR",
   "send_gdd": "Enviar GDD",
@@ -334,6 +346,11 @@
   "transaction-link": {
     "send_you": "te envía"
   },
+  "usersearch": {
+    "headline": "Búsqueda geográfica de usuarios",
+    "text": "No importa a qué comunidad pertenezcas, con el Geo Matching System puedes encontrar miembros de todas las comunidades en un mapa. Puedes filtrar según ofertas y requisitos y visualizar los usuarios que coinciden con tu perfil.\n\nEl botón abre una nueva ventana del navegador en la que se muestran en un mapa los usuarios de tu zona.",
+    "button": "Iniciar la búsqueda de usuarios..."
+  },
   "via_link": "atraves de un enlace",
   "welcome": "Bienvenido a la comunidad."
 }

frontend/src/locales/fr.json

@@ -250,7 +250,8 @@
     "send": "Envoyer",
     "settings": "Configuration",
     "support": "Aide",
-    "transactions": "Transactions"
+    "transactions": "Transactions",
+    "usersearch": "Recherche d'utilisateurs"
   },
   "openHours": "Heures ouverte",
   "pageTitle": {
@@ -260,7 +261,8 @@
     "overview": "Bienvenue {name}",
     "send": "Envoyé Gradidos",
     "settings": "Configuration",
-    "transactions": "Vos transactions"
+    "transactions": "Vos transactions",
+    "usersearch": "Recherche géographique d'utilisateurs"
   },
   "qrCode": "QR Code",
   "send_gdd": "Envoyer GDD",
@@ -352,6 +354,11 @@
   "transaction-link": {
     "send_you": "veut vous envoyer"
   },
+  "usersearch": {
+    "headline": "Recherche géographique d'utilisateurs",
+    "text": "Quelle que soit la communauté à laquelle tu appartiens, le système de géo-matching te permet de trouver des membres de toutes les communautés sur une carte géographique. Tu peux filtrer selon les offres et les besoins et afficher les utilisateurs qui te correspondent.\n\nEn cliquant sur le bouton, une nouvelle fenêtre de navigateur s'ouvre et t'affiche les utilisateurs de ton entourage sur une carte.",
+    "button": "Commence la recherche d'utilisateurs..."
+  },
   "via_link": "par lien",
   "welcome": "Bienvenu dans la communauté"
 }

frontend/src/locales/nl.json

@@ -242,7 +242,19 @@
     "profile": "Mijn profiel",
     "send": "Sturen",
     "support": "Support",
-    "transactions": "Transacties"
+    "transactions": "Transacties",
+    "usersearch": "Gebruiker zoeken"
+  },
+  "openHours": "Open Hours",
+  "pageTitle": {
+    "community": "Create Gradido",
+    "gdt": "Your GDT transactions",
+    "information": "{community}",
+    "overview": "Welcome {name}",
+    "send": "Send Gradidos",
+    "settings": "Settings",
+    "transactions": "Your transactions",
+    "usersearch": "Geografisch zoeken naar gebruikers"
   },
   "qrCode": "QR Code",
   "send_gdd": "GDD sturen",
@@ -334,6 +346,11 @@
   "transaction-link": {
     "send_you": "stuurt jou"
   },
+  "usersearch": {
+    "headline": "Geografisch zoeken naar gebruikers",
+    "text": "Het maakt niet uit tot welke community je behoort, met het Geo Matching System kun je leden van alle communities vinden op een kaart. Je kunt filteren op aanbiedingen en vereisten en de gebruikers weergeven die aan je profiel voldoen.\n\nDe knop opent een nieuw browservenster waarin de gebruikers in je omgeving op een kaart worden weergegeven.",
+    "button": "Start het zoeken naar gebruikers..."
+  },
   "via_link": "via een link",
   "welcome": "Welkom in de gemeenschap"
 }

frontend/src/pages/UserSearch.spec.js

@@ -0,0 +1,73 @@
+import { mount } from '@vue/test-utils'
+import UserSearch from './UserSearch'
+import { toastErrorSpy } from '../../test/testSetup'
+import { authenticateGmsUserSearch } from '@/graphql/queries'
+
+const localVue = global.localVue
+
+window.scrollTo = jest.fn()
+
+const apolloQueryMock = jest
+  .fn()
+  .mockResolvedValueOnce({
+    data: {
+      authenticateGmsUserSearch: {
+        gmsUri: 'http://localhost:8080/playground?not initialized',
+      },
+    },
+  })
+  .mockResolvedValue('default')
+
+describe('UserSearch', () => {
+  let wrapper
+
+  const mocks = {
+    $t: jest.fn((t) => t),
+    $n: jest.fn(),
+    $i18n: {
+      locale: 'en',
+    },
+    $apollo: {
+      query: apolloQueryMock,
+    },
+  }
+
+  const Wrapper = () => {
+    return mount(UserSearch, {
+      localVue,
+      mocks,
+    })
+  }
+
+  describe('mount', () => {
+    beforeEach(() => {
+      wrapper = Wrapper()
+    })
+
+    it('renders the usersearch page', () => {
+      expect(wrapper.find('div.usersearch').exists()).toBeTruthy()
+    })
+
+    it('calls authenticateGmsUserSearch', () => {
+      expect(apolloQueryMock).toBeCalledWith(
+        expect.objectContaining({
+          query: authenticateGmsUserSearch,
+        }),
+      )
+    })
+
+    describe('error apolloQueryMock', () => {
+      beforeEach(async () => {
+        jest.clearAllMocks()
+        apolloQueryMock.mockRejectedValue({
+          message: 'uups',
+        })
+        wrapper = Wrapper()
+      })
+
+      it('toasts an error message', () => {
+        expect(toastErrorSpy).toBeCalledWith('authenticateGmsUserSearch failed!')
+      })
+    })
+  })
+})

frontend/src/pages/UserSearch.vue

@@ -0,0 +1,56 @@
+<template>
+  <div class="usersearch">
+    <b-container class="bg-white appBoxShadow gradido-border-radius p-4 mt--3">
+      <div class="h3">{{ $t('usersearch.headline') }}</div>
+      <div class="my-4 text-small">
+        <span
+          v-for="(line, lineNumber) of $t('usersearch.text').split('\n')"
+          v-bind:key="lineNumber"
+        >
+          {{ line }}
+          <br />
+        </span>
+      </div>
+      <b-row class="my-5">
+        <b-col cols="12">
+          <div class="text-lg-right">
+            <b-button variant="gradido" :href="this.gmsUri" target="_blank">
+              {{ $t('usersearch.button') }}
+            </b-button>
+          </div>
+        </b-col>
+      </b-row>
+    </b-container>
+  </div>
+</template>
+<script>
+import { authenticateGmsUserSearch } from '@/graphql/queries'
+export default {
+  name: 'UserSearch',
+  data() {
+    return {
+      gmsUri: 'not initialized',
+    }
+  },
+  methods: {
+    async authenticateGmsUserPlayground() {
+      this.$apollo
+        .query({
+          query: authenticateGmsUserSearch,
+        })
+        .then(async (result) => {
+          this.gmsUri =
+            result.data.authenticateGmsUserSearch.url +
+            '?accesstoken=' +
+            result.data.authenticateGmsUserSearch.token
+        })
+        .catch(() => {
+          this.toastError('authenticateGmsUserSearch failed!')
+        })
+    },
+  },
+  created() {
+    this.authenticateGmsUserPlayground()
+  },
+}
+</script>

frontend/src/routes/router.test.js

@@ -49,8 +49,8 @@ describe('router', () => {
         expect(routes.find((r) => r.path === '/').redirect()).toEqual({ path: '/login' })
       })
 
-      it('has 19 routes defined', () => {
-        expect(routes).toHaveLength(19)
+      it('has 20 routes defined', () => {
+        expect(routes).toHaveLength(20)
       })
 
       describe('overview', () => {
@@ -142,6 +142,17 @@ describe('router', () => {
         })
       })
 
+      describe('usersearch', () => {
+        it('requires authorization', () => {
+          expect(routes.find((r) => r.path === '/usersearch').meta.requiresAuth).toBeTruthy()
+        })
+
+        it('loads the "UserSearch" page', async () => {
+          const component = await routes.find((r) => r.path === '/usersearch').component()
+          expect(component.default.name).toBe('UserSearch')
+        })
+      })
+
       describe('gdt', () => {
         it('requires authorization', () => {
           expect(routes.find((r) => r.path === '/gdt').meta.requiresAuth).toBeTruthy()

frontend/src/routes/routes.js

@@ -80,6 +80,14 @@ const routes = [
       pageTitle: 'information',
     },
   },
+  {
+    path: '/usersearch',
+    component: () => import('@/pages/UserSearch'),
+    meta: {
+      requiresAuth: true,
+      pageTitle: 'usersearch',
+    },
+  },
   // {
   //   path: '/storys',
   //   component: () => import('@/pages/TopStorys'),