show gradido id instead of email beneath avatar

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

@@ -5,6 +5,8 @@ import { createStore } from 'vuex'
 import Navbar from './Navbar.vue'
 import { BImg, BNavbar, BNavbarBrand, BNavbarNav } from 'bootstrap-vue-next'
 import AppAvatar from '@/components/AppAvatar.vue'
+import { createI18n } from 'vue-i18n'
+import CONFIG from '@/config'
 
 // Mock vue-avatar
 vi.mock('vue-avatar', () => ({
@@ -17,6 +19,16 @@ vi.mock('vue-avatar', () => ({
   },
 }))
 
+const i18n = createI18n({
+  legacy: false,
+  locale: 'en',
+  messages: {
+    en: {
+      'copied-to-clipboard': 'copied-to-clipboard',
+    },
+  },
+})
+
 const createVuexStore = (state = {}) =>
   createStore({
     state: () => ({
@@ -24,6 +36,7 @@ const createVuexStore = (state = {}) =>
       lastName: 'User',
       gradidoID: 'current-user-id',
       email: 'test@example.com',
+      username: 'username',
       ...state,
     }),
   })
@@ -41,7 +54,10 @@ describe('Navbar', () => {
     store = createVuexStore(storeState)
     return mount(Navbar, {
       global: {
-        plugins: [store, router],
+        plugins: [store, router, i18n],
+        stubs: {
+          IBiClipboard: true,
+        },
         mocks: {
           $t: (msg) => msg,
         },
@@ -89,7 +105,9 @@ describe('Navbar', () => {
     })
 
     it('has the email address', () => {
-      expect(wrapper.find('div[data-test="navbar-item-email"]').text()).toBe('test@example.com')
+      expect(wrapper.find('div[data-test="navbar-item-gradido-id"]').text()).toBe(
+        `${CONFIG.COMMUNITY_NAME}/username`,
+      )
     })
   })
 })

frontend/src/components/Menu/Navbar.vue

@@ -17,9 +17,9 @@
         <BImg class="sheet-img position-absolute zindex-1" :src="sheet"></BImg>
 
         <BNavbarNav class="ms-auto" right>
-          <router-link to="/settings">
-            <div class="d-flex align-items-center">
-              <div class="me-3">
+          <div class="align-items-center">
+            <router-link to="/settings">
+              <div class="d-flex me-3">
                 <app-avatar
                   class="vue3-avatar"
                   :name="username.username"
@@ -31,10 +31,19 @@
               </div>
               <div>
                 <div data-test="navbar-item-username">{{ username.username }}</div>
-                <div data-test="navbar-item-email">{{ $store.state.email }}</div>
               </div>
+            </router-link>
+            <div class="small navbar-like-link" data-test="navbar-item-gradido-id">
+              {{ gradidoId }}
+              <a
+                class="copy-clipboard-button"
+                :title="$t('copy-to-clipboard')"
+                @click="copyToClipboard(gradidoId)"
+              >
+                <IBiClipboard></IBiClipboard>
+              </a>
             </div>
-          </router-link>
+          </div>
         </BNavbarNav>
       </BNavbar>
       <!-- <div class="alert-box">
@@ -47,11 +56,20 @@
 </template>
 
 <script>
+import CONFIG from '@/config'
+import { useAppToast } from '@/composables/useToast'
+
 export default {
   name: 'Navbar',
   props: {
     balance: { type: Number, required: true },
   },
+  setup() {
+    const toast = useAppToast()
+    return {
+      toast,
+    }
+  },
   data() {
     return {
       logo: '/img/brand/gradido-logo.png',
@@ -65,6 +83,18 @@ export default {
         initials: `${this.$store.state.firstName[0]}${this.$store.state.lastName[0]}`,
       }
     },
+    gradidoId() {
+      const name = this.$store.state.username
+        ? this.$store.state.username
+        : this.$store.state.gradidoId
+      return `${CONFIG.COMMUNITY_NAME}/${name}`
+    },
+  },
+  methods: {
+    copyToClipboard(content) {
+      navigator.clipboard.writeText(content)
+      this.toast.toastSuccess(this.$t('gradidoid-copied-to-clipboard'))
+    },
   },
 }
 </script>
@@ -83,6 +113,10 @@ export default {
   font-size: 2.25rem;
 }
 
+.navbar-like-link {
+  color: rgba(var(--bs-link-color-rgb));
+}
+
 button.navbar-toggler > span.navbar-toggler-icon {
   background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(4, 112, 6, 1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
 }

frontend/src/locales/de.json

@@ -302,6 +302,7 @@
     "raise": "Erhöhung",
     "recruited-member": "Eingeladenes Mitglied"
   },
+  "gradidoid-copied-to-clipboard": "Gradido ID wurde in die Zwischenablage kopiert.",
   "h": "h",
   "info": "Information",
   "language": "Sprache",

frontend/src/locales/en.json

@@ -302,6 +302,7 @@
     "raise": "Increase",
     "recruited-member": "Invited member"
   },
+  "gradidoid-copied-to-clipboard": "Gradido ID copied to clipboard.",
   "h": "h",
   "info": "Information",
   "language": "Language",

frontend/src/locales/es.json

@@ -251,6 +251,7 @@
     "raise": "Aumento",
     "recruited-member": "Miembro invitado"
   },
+  "gradidoid-copied-to-clipboard": "Gradido ID copiado al portapapeles.",
   "info": "Información",
   "language": "Idioma",
   "link-load": "recargar el último enlace | recargar los últimos {n} enlaces",

frontend/src/locales/fr.json

@@ -192,9 +192,7 @@
       "gddCreationTime": "Le champ {_field_} doit comprendre un nombre entre {min} et {max} avec un maximum de une décimale.",
       "gddSendAmount": "Le champ {_field_} doit comprendre un nombre entre {min} et {max} avec un maximum de deux chiffres après la virgule",
       "identifier": {
-        "communityIsReachable": "Communauté non joignable!",
-        "communityIsReachable.communityNotFound": "Communauté non trouvée!",
-        "communityIsReachable.communityNotReachable": "Communauté non joignable!",
+        "communityIsReachable": "Communauté non trouvée ou non joignable!",
         "required": "Le destinataire est un champ obligatoire.",
         "typeError": "Le destinataire doit être un email, un nom d'utilisateur ou un Gradido ID."
       },
@@ -260,6 +258,7 @@
     "raise": "Augmentation",
     "recruited-member": "Membre invité"
   },
+  "gradidoid-copied-to-clipboard": "Gradido ID copié dans le presse-papier.",
   "h": "h",
   "info": "Information",
   "language": "Langage",

frontend/src/locales/nl.json

@@ -251,6 +251,7 @@
     "raise": "Verhoging",
     "recruited-member": "Uitgenodigd lid"
   },
+  "gradidoid-copied-to-clipboard": "Gradido ID gekopieerd naar klembord.",
   "info": "Informatie",
   "language": "Taal",
   "link-load": "de laatste link herladen | de laatste links herladen",

frontend/vite.config.mjs

@@ -125,7 +125,7 @@ export default defineConfig(async ({ command }) => {
         GRAPHQL_URI: CONFIG.GRAPHQL_URI, // null,
         ADMIN_AUTH_PATH: CONFIG.ADMIN_AUTH_PATH ?? null, // it is the only env without exported default
         ADMIN_AUTH_URL: CONFIG.ADMIN_AUTH_URL, // null,
-        COMMUNITY_NAME: null,
+        COMMUNITY_NAME: CONFIG.COMMUNITY_NAME,
         COMMUNITY_REGISTER_PATH: null,
         COMMUNITY_REGISTER_URL: null,
         COMMUNITY_DESCRIPTION: null,