update admin details for home community

admin/src/components/Federation/FederationVisualizeItem.vue

@@ -1,24 +1,55 @@
 <template>
   <div class="federation-visualize-item">
-    <b-row>
+    <b-row @click="toggleDetails">
       <b-col cols="1"><b-icon :icon="icon" :variant="variant" class="mr-4"></b-icon></b-col>
       <b-col>
-        <div>{{ item.url }}</div>
+        <div>
+          <a :href="item.url" target="_blank">{{ item.url }}</a>
+        </div>
         <small>{{ `${item.publicKey.substring(0, 26)}…` }}</small>
       </b-col>
+      <b-col v-b-tooltip="item.description">{{ item.name }}</b-col>
       <b-col cols="2">{{ lastAnnouncedAt }}</b-col>
       <b-col cols="2">{{ createdAt }}</b-col>
     </b-row>
+    <b-row v-if="details">
+      <b-col colspan="5">
+        <b-list-group>
+          <b-list-group-item v-if="item.communityUuid">
+            {{ $t('federation.communityUuid') }}&nbsp;{{ item.communityUuid }}
+          </b-list-group-item>
+          <b-list-group-item v-if="item.authenticatedAt">
+            {{ $t('federation.authenticatedAt') }}&nbsp;{{ item.authenticatedAt }}
+          </b-list-group-item>
+          <b-list-group-item>
+            {{ $t('federation.publicKey') }}&nbsp;{{ item.publicKey }}
+          </b-list-group-item>
+          <b-list-group-item v-if="!item.foreign">
+            {{ $t('federation.gmsApiKey') }}&nbsp;
+            <editable-label
+              :value="item.gmsApiKey"
+              :allowEdit="$store.state.moderator.roles.includes('ADMIN')"
+              @save="handleSaveGsmApiKey"
+            />
+          </b-list-group-item>
+        </b-list-group>
+      </b-col>
+    </b-row>
   </div>
 </template>
 <script>
 import { formatDistanceToNow } from 'date-fns'
 import { de, enUS as en, fr, es, nl } from 'date-fns/locale'
+import EditableLabel from '@/components/input/EditableLabel'
+import { updateHomeCommunity } from '../../graphql/updateHomeCommunity'
 
 const locales = { en, de, es, fr, nl }
 
 export default {
   name: 'FederationVisualizeItem',
+  components: {
+    EditableLabel,
+  },
   props: {
     item: { type: Object },
   },
@@ -26,11 +57,17 @@ export default {
     return {
       formatDistanceToNow,
       locale: this.$i18n.locale,
+      details: false,
     }
   },
   computed: {
     verified() {
-      return new Date(this.item.verifiedAt) >= new Date(this.item.lastAnnouncedAt)
+      return (
+        this.item.federatedCommunities.filter(
+          (federatedCommunity) =>
+            new Date(federatedCommunity.verifiedAt) >= new Date(federatedCommunity.lastAnnouncedAt),
+        ).length > 0
+      )
     },
     icon() {
       return this.verified ? 'check' : 'x-circle'
@@ -39,8 +76,17 @@ export default {
       return this.verified ? 'success' : 'danger'
     },
     lastAnnouncedAt() {
-      if (this.item.lastAnnouncedAt) {
-        return formatDistanceToNow(new Date(this.item.lastAnnouncedAt), {
+      const minDate = new Date(0)
+      const lastAnnouncedAt = this.item.federatedCommunities.reduce(
+        (lastAnnouncedAt, federateCommunity) => {
+          if (!federateCommunity.lastAnnouncedAt) return lastAnnouncedAt
+          const date = new Date(federateCommunity.lastAnnouncedAt)
+          return date > lastAnnouncedAt ? date : lastAnnouncedAt
+        },
+        minDate,
+      )
+      if (lastAnnouncedAt !== minDate) {
+        return formatDistanceToNow(lastAnnouncedAt, {
           includeSecond: true,
           addSuffix: true,
           locale: locales[this.locale],
@@ -59,5 +105,26 @@ export default {
       return ''
     },
   },
+  methods: {
+    toggleDetails() {
+      this.details = !this.details
+    },
+    handleSaveGsmApiKey(gmsApiKey) {
+      this.$apollo
+        .mutate({
+          mutation: updateHomeCommunity,
+          variables: {
+            uuid: this.item.communityUuid,
+            gmsApiKey: gmsApiKey,
+          },
+        })
+        .then(() => {
+          this.toastSuccess(this.$t('federation.toast_gmsApiKeyUpdated'))
+        })
+        .catch((error) => {
+          this.toastError(error.message)
+        })
+    },
+  },
 }
 </script>

admin/src/components/input/EditableLabel.vue

@@ -0,0 +1,64 @@
+<template>
+  <div>
+    <b-form-group>
+      <label v-if="!editing">{{ value }}</label>
+      <b-form-input v-else v-model="inputValue" :placeholder="placeholder" />
+    </b-form-group>
+    <b-button
+      v-if="allowEdit"
+      @click="toggleEdit"
+      :disabled="!isValueChanged && editing"
+      :variant="variant"
+    >
+      <b-icon v-if="!editing" icon="pencil-fill" tooltip="$t('edit')"></b-icon>
+      <b-icon v-else icon="check" tooltip="$t('save')"></b-icon>
+    </b-button>
+  </div>
+</template>
+
+<script>
+export default {
+  // Code written from chatGPT 3.5
+  name: 'EditableLabel',
+  props: {
+    value: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    allowEdit: {
+      type: Boolean,
+      default: false,
+    },
+    placeholder: {
+      type: String,
+      required: false,
+      default: '',
+    },
+  },
+  data() {
+    return {
+      editing: false,
+      inputValue: this.value,
+      originalValue: this.value,
+    }
+  },
+  computed: {
+    variant() {
+      return this.editing ? 'success' : 'prime'
+    },
+    isValueChanged() {
+      return this.inputValue !== this.originalValue
+    },
+  },
+  methods: {
+    toggleEdit() {
+      if (this.editing) {
+        this.$emit('save', this.inputValue)
+        this.originalValue = this.inputValue
+      }
+      this.editing = !this.editing
+    },
+  },
+}
+</script>

admin/src/graphql/updateHomeCommunity.js

@@ -0,0 +1,7 @@
+import gql from 'graphql-tag'
+
+export const updateHomeCommunity = gql`
+  mutation ($uuid: String!, $gmsApiKey: String!) {
+    updateHomeCommunity(uuid: $uuid, gmsApiKey: $gmsApiKey)
+  }
+`

admin/src/locales/de.json

@@ -69,13 +69,20 @@
   "deleted_user": "Alle gelöschten Nutzer",
   "deny": "Ablehnen",
   "e_mail": "E-Mail",
+  "edit": "Bearbeiten",
   "enabled": "aktiviert",
   "error": "Fehler",
   "expired": "abgelaufen",
   "federation": {
+    "authenticatedAt": "Verifiziert am:",
+    "communityUuid": "Community UUID:",
     "createdAt": "Erstellt am",
+    "gmsApiKey": "GMS API Key:",
+    "toast_gmsApiKeyUpdated": "Der GMS Api Key wurde erfolgreich aktualisiert!",
     "gradidoInstances": "Gradido Instanzen",
     "lastAnnouncedAt": "letzte Bekanntgabe",
+    "name": "Name",
+    "publicKey": "PublicKey:",
     "url": "Url",
     "verified": "Verifiziert"
   },

admin/src/locales/en.json

@@ -69,13 +69,20 @@
   "deleted_user": "All deleted user",
   "deny": "Reject",
   "e_mail": "E-mail",
+  "edit": "Edit",
   "enabled": "enabled",
   "error": "Error",
   "expired": "expired",
   "federation": {
+    "authenticatedAt": "verified at:",
+    "communityUuid": "Community UUID:",
     "createdAt": "Created At ",
+    "gmsApiKey": "GMS API Key:",
+    "toast_gmsApiKeyUpdated": "The GMS Api Key has been successfully updated!",
     "gradidoInstances": "Gradido Instances",
     "lastAnnouncedAt": "Last Announced",
+    "name": "Name",
+    "publicKey": "PublicKey:",
     "url": "Url",
     "verified": "Verified"
   },

admin/src/pages/FederationVisualize.vue

@@ -16,12 +16,13 @@
       <b-row>
         <b-col cols="1" class="ml-1">{{ $t('federation.verified') }}</b-col>
         <b-col class="ml-3">{{ $t('federation.url') }}</b-col>
+        <b-col class="ml-3">{{ $t('federation.name') }}</b-col>
         <b-col cols="2">{{ $t('federation.lastAnnouncedAt') }}</b-col>
         <b-col cols="2">{{ $t('federation.createdAt') }}</b-col>
       </b-row>
       <b-list-group-item
         v-for="item in communities"
-        :key="item.id"
+        :key="item.publicKey"
         :variant="!item.foreign ? 'primary' : 'warning'"
       >
         <federation-visualize-item :item="item" />

backend/src/graphql/model/Community.ts

@@ -2,29 +2,43 @@ import { Community as DbCommunity } from '@entity/Community'
 import { FederatedCommunity as DbFederatedCommunity } from '@entity/FederatedCommunity'
 import { ObjectType, Field, Int } from 'type-graphql'
 
+import { backendLogger as logger } from '@/server/logger'
+
 import { FederatedCommunity } from './FederatedCommunity'
 
 @ObjectType()
 export class Community {
   constructor(dbCom: DbCommunity) {
-    this.id = dbCom.id
-    this.foreign = dbCom.foreign
+    if (dbCom.federatedCommunities && dbCom.federatedCommunities.length > 0) {
+      const federatedCommunity = dbCom.federatedCommunities[0]
+      this.foreign = federatedCommunity.foreign
+      const url = new URL(federatedCommunity.endPoint)
+      // use only the host part
+      this.url = url.protocol + '//' + url.host
+      this.publicKey = federatedCommunity.publicKey.toString('hex')
+      this.federatedCommunities = dbCom.federatedCommunities.map(
+        (federatedCom: DbFederatedCommunity) => new FederatedCommunity(federatedCom),
+      )
+    }
+    this.id = dbCom.id ?? 0
+    if (dbCom.foreign !== undefined) {
+      this.foreign = dbCom.foreign
+    }
     this.name = dbCom.name
     this.description = dbCom.description
     this.gmsApiKey = dbCom.gmsApiKey
-    this.url = dbCom.url
-    this.publicKey = dbCom.publicKey.toString('hex')
+    if (dbCom.url) {
+      this.url = dbCom.url
+    }
+    if (dbCom.publicKey && dbCom.publicKey.length === 32) {
+      this.publicKey = dbCom.publicKey.toString('hex')
+    }
     this.communityUuid = dbCom.communityUuid
     this.creationDate = dbCom.creationDate
     this.createdAt = dbCom.createdAt
     this.updatedAt = dbCom.updatedAt
     this.uuid = dbCom.communityUuid
     this.authenticatedAt = dbCom.authenticatedAt
-    if (dbCom.federatedCommunities) {
-      this.federatedCommunities = dbCom.federatedCommunities.map(
-        (federatedCom: DbFederatedCommunity) => new FederatedCommunity(federatedCom),
-      )
-    }
   }
 
   @Field(() => Int)