change Overview-Page to Cards with Circles and UserSearch (first try)

frontend/src/components/Overview/CardCircles.vue

@@ -0,0 +1,93 @@
+<template>
+  <div class="card-circles">
+  <BContainer class="bg-white app-box-shadow gradido-border-radius p-4 mt--3">
+    <div class="h3">{{ $t('card-circles.headline') }}</div>
+    <div v-if="humhubAllowed" class="my-4 text-small">
+      <span v-for="(line, lineNumber) of $t('card-circles.allowed.text').split('\n')" :key="lineNumber">
+        {{ line }}
+        <br />
+      </span>
+    </div>
+    <div v-else class="my-4 text-small">
+      <span v-for="(line, lineNumber) of $t('card-circles.not-allowed.text').split('\n')" :key="lineNumber">
+        {{ line }}
+        <br />
+      </span>
+    </div>
+    <BRow class="my-5">
+      <BCol cols="12">
+        <div class="text-lg-end">
+          <BButton
+            v-if="humhubAllowed"
+            :href="humhubUri"
+            variant="gradido"
+            :disabled="enableButton === false"
+            target="_blank"
+          >
+            {{ $t('card-circles.allowed.button') }}
+          </BButton>
+          <RouterLink v-else to="/settings/extern">
+            <BButton variant="gradido">
+              {{ $t('card-circles.not-allowed.button') }}
+            </BButton>
+          </RouterLink>
+        </div>
+      </BCol>
+    </BRow>
+  </BContainer>
+  </div>
+</template>
+<script setup>
+import { ref, computed, onMounted } from 'vue'
+import { useQuery } from '@vue/apollo-composable'
+import { useStore } from 'vuex'
+import { authenticateHumhubAutoLogin } from '@/graphql/queries'
+
+const store = useStore()
+
+const enableButton = ref(false)
+const humhubUri = ref('')
+
+const humhubAllowed = computed(() => store.state.humhubAllowed)
+
+const {
+  refetch: refetchAuthenticateHumhub,
+  onResult,
+  onError,
+} = useQuery(authenticateHumhubAutoLogin, null, {
+  fetchPolicy: 'network-only',
+  enabled: true,
+})
+
+onResult(({ data }) => {
+  if (data) {
+    humhubUri.value = data.authenticateHumhubAutoLogin
+    enableButton.value = true
+  }
+})
+
+onError(() => {
+  enableButton.value = true
+  humhubUri.value = ''
+  store.commit('humhubAllowed', false)
+})
+
+const handleAuthenticateHumhubAutoLogin = async () => {
+  enableButton.value = false
+  humhubUri.value = null
+  await refetchAuthenticateHumhub()
+}
+
+onMounted(() => {
+  handleAuthenticateHumhubAutoLogin()
+})
+</script>
+<style scoped>
+.card {
+  background-attachment: absolute;
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: 350px 350px;
+  background-image: url('/img/svg/Gradido_Blaetter_Mainpage.svg') !important;
+}
+</style>

frontend/src/components/Overview/CardUserSearch.vue

@@ -0,0 +1,55 @@
+<template>
+  <div class="card-user-search">
+    <BContainer class="bg-white app-box-shadow gradido-border-radius p-4 mt--3">
+      <div class="h3">{{ $t('card-user-search.headline') }}</div>
+      <div v-if="gmsAllowed" class="my-4 text-small">
+        <span v-for="(line, lineNumber) of $t('card-user-search.allowed.text').split('\n')" :key="lineNumber">
+          {{ line }}
+          <br />
+        </span>
+      </div>
+      <div v-else class="my-4 text-small">
+        <span v-for="(line, lineNumber) of $t('card-user-search.not-allowed.text').split('\n')" :key="lineNumber">
+          {{ line }}
+          <br />
+        </span>
+      </div>
+      <BRow class="my-5">
+        <BCol cols="12">
+          <div class="text-lg-end">
+            <BButton v-if="gmsAllowed" variant="gradido" :href="gmsUri" target="_blank">
+              {{ $t('card-user-search.allowed.button') }}
+            </BButton>
+            <RouterLink v-else to="/settings/extern">
+              <BButton variant="gradido">
+                {{ $t('card-user-search.not-allowed.button') }}
+              </BButton>
+            </RouterLink>
+          </div>
+        </BCol>
+      </BRow>
+    </BContainer>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { useQuery } from '@vue/apollo-composable'
+import { useAppToast } from '@/composables/useToast'
+import { authenticateGmsUserSearch } from '@/graphql/queries'
+
+const { toastError } = useAppToast()
+
+const gmsUri = ref('not initialized')
+const gmsAllowed = computed(() => store.state.userLocation !== null)
+
+
+onResult(({ data }) => {
+  const { onResult, result, loading, onError } = useQuery(authenticateGmsUserSearch)
+  gmsUri.value = `${data.authenticateGmsUserSearch.url}?accesstoken=${data.authenticateGmsUserSearch.token}`
+})
+
+onError(() => {
+  toastError('authenticateGmsUserSearch failed!')
+})
+</script>

frontend/src/locales/de.json

@@ -30,6 +30,28 @@
     }
   },
   "back": "Zurück",
+  "card-circles": {
+    "headline": "Gemeinsam unterstützen wir einander –  achtsam in Kreiskultur.",
+    "allowed": {
+      "text": "Mit Klick auf den Button öffnest Du die Kooperationsplattform in einem neuen Browser-Fenster.",
+      "button": "Kreise starten..."
+    },
+    "not-allowed": {
+      "text": "Du hast Kreise noch nicht konfiguriert! Öffne zuerst die Kreise-Konfiguration.",
+      "button": "Konfiguration starten..."
+    }
+  },
+  "card-user-search": {
+    "headline": "Geografische Nutzersuche",
+    "allowed": {
+      "text": "Mit dem Geo-Matching-System findest du Mitglieder aller Communities auf einer Landkarte.\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": "Öffne Nutzersuche..."
+    },
+    "not-allowed": {
+      "text": "Du möchtest die Standorte anderer Mitglieder sehen? Dann musst du selbst erst deinen Standort festlegen.",
+      "button": "Standort festlegen..."
+    }
+  },
   "circles": {
     "headline": "Gemeinsam unterstützen wir einander –  achtsam in Kreiskultur.",
     "text": "Mit Klick auf den Button öffnest Du die Kooperationsplattform in einem neuen Browser-Fenster.",

frontend/src/pages/Overview.vue

@@ -1,15 +1,24 @@
 <template>
   <div class="overview">
-    <community-news />
+    <BRow>
+      <BCol>
+        <card-circles />
+      </BCol>
+      <BCol>
+        <card-user-search />
+      </BCol>
+    </BRow>
   </div>
 </template>
 <script>
-import CommunityNews from '@/components/Overview/CommunityNews'
+// import CommunityNews from '@/components/Overview/CommunityNews'
-
+import CardCircles from '@/components/Overview/CardCircles'
+import CardUserSearch from '@/components/Overview/CardUserSearch'
 export default {
   name: 'Overview',
   components: {
-    CommunityNews,
+    CardCircles,
+    CardUserSearch,
   },
 }
 </script>