From a58ba486046f00c7207b5dde44f4219170b800ee Mon Sep 17 00:00:00 2001
From: MateuszMichalowski
 <79852198+MateuszMichalowski@users.noreply.github.com>
Date: Thu, 31 Oct 2024 18:05:48 +0100
Subject: [PATCH] feat(frontend): fix postmigration fix (#3378)

* feat(frontend): migration fixes

* feat(admin): post migration fixes

* feat(admin): revert docker change

* feat(admin): update tests
---
 .../Federation/CommunityVisualizeItem.vue     | 133 +------------
 .../src/components/input/Coordinates.spec.js  |  44 +++--
 admin/src/components/input/Coordinates.vue    | 175 ++++++++++--------
 admin/src/components/input/EditableGroup.vue  |  15 +-
 .../input/EditableGroupableLabel.spec.js      |  16 +-
 .../input/EditableGroupableLabel.vue          |  20 +-
 docker-compose.yml                            |  26 +--
 .../src/assets/scss/gradido-template.scss     |   6 +-
 .../DecayInformations/CollapseLinksList.vue   |   4 +-
 .../GddSend/TransactionResultSendSuccess.vue  |   4 +-
 frontend/src/components/Menu/Sidebar.vue      |   3 +
 .../MobileSidebar/MobileSidebar.vue           |  18 +-
 .../src/components/SessionLogoutTimeout.vue   |  98 +++++-----
 .../src/components/SkeletonLoaderElement.vue  |  87 +++++++++
 .../UserSettings/UserNewsletter.vue           |   2 +-
 frontend/src/components/skeleton/Overview.vue |  63 +++++--
 frontend/src/layouts/DashboardLayout.vue      |  12 +-
 frontend/src/locales/de.json                  |   3 +-
 frontend/src/locales/en.json                  |   3 +-
 frontend/src/locales/es.json                  |   3 +-
 frontend/src/locales/fr.json                  |   3 +-
 frontend/src/locales/nl.json                  |   3 +-
 frontend/src/locales/tr.json                  |   3 +-
 23 files changed, 386 insertions(+), 358 deletions(-)
 create mode 100644 frontend/src/components/SkeletonLoaderElement.vue

diff --git a/admin/src/components/Federation/CommunityVisualizeItem.vue b/admin/src/components/Federation/CommunityVisualizeItem.vue
index 25847b08c..ed7df4f9b 100644
--- a/admin/src/components/Federation/CommunityVisualizeItem.vue
+++ b/admin/src/components/Federation/CommunityVisualizeItem.vue
@@ -35,7 +35,10 @@
               @reset="resetHomeCommunityEditable"
             >
               <template #view>
-                <label>{{ $t('federation.gmsApiKey') }}&nbsp;{{ gmsApiKey }}</label>
+                <div class="d-flex">
+                  <p style="text-wrap: nowrap">{{ $t('federation.gmsApiKey') }}&nbsp;</p>
+                  <span class="d-block" style="overflow-x: auto">{{ gmsApiKey }}</span>
+                </div>
                 <BFormGroup>
                   {{ $t('federation.coordinates') }}
                   <span v-if="isValidLocation">
@@ -198,131 +201,3 @@ const resetHomeCommunityEditable = () => {
   gmsApiKey.value = originalGmsApiKey.value
 }
 </script>
-
-<!--<script>-->
-<!--import { formatDistanceToNow } from 'date-fns'-->
-<!--import { de, enUS as en, fr, es, nl } from 'date-fns/locale'-->
-<!--import EditableGroup from '@/components/input/EditableGroup'-->
-<!--import FederationVisualizeItem from './FederationVisualizeItem.vue'-->
-<!--import { updateHomeCommunity } from '../../graphql/updateHomeCommunity'-->
-<!--import Coordinates from '../input/Coordinates.vue'-->
-<!--import EditableGroupableLabel from '../input/EditableGroupableLabel.vue'-->
-
-<!--const locales = { en, de, es, fr, nl }-->
-
-<!--export default {-->
-<!--  name: 'CommunityVisualizeItem',-->
-<!--  components: {-->
-<!--    Coordinates,-->
-<!--    EditableGroup,-->
-<!--    FederationVisualizeItem,-->
-<!--    EditableGroupableLabel,-->
-<!--  },-->
-<!--  props: {-->
-<!--    item: { type: Object },-->
-<!--  },-->
-<!--  data() {-->
-<!--    return {-->
-<!--      formatDistanceToNow,-->
-<!--      locale: this.$i18n.locale,-->
-<!--      details: false,-->
-<!--      gmsApiKey: this.item.gmsApiKey,-->
-<!--      location: this.item.location,-->
-<!--      originalGmsApiKey: this.item.gmsApiKey,-->
-<!--      originalLocation: this.item.location,-->
-<!--    }-->
-<!--  },-->
-<!--  computed: {-->
-<!--    verified() {-->
-<!--      if (!this.item.federatedCommunities || this.item.federatedCommunities.length === 0) {-->
-<!--        return false-->
-<!--      }-->
-<!--      return (-->
-<!--        this.item.federatedCommunities.filter(-->
-<!--          (federatedCommunity) =>-->
-<!--            new Date(federatedCommunity.verifiedAt) >= new Date(federatedCommunity.lastAnnouncedAt),-->
-<!--        ).length > 0-->
-<!--      )-->
-<!--    },-->
-<!--    icon() {-->
-<!--      return this.verified ? 'check' : 'x-circle'-->
-<!--    },-->
-<!--    variant() {-->
-<!--      return this.verified ? 'success' : 'danger'-->
-<!--    },-->
-<!--    lastAnnouncedAt() {-->
-<!--      if (!this.item.federatedCommunities || this.item.federatedCommunities.length === 0) return ''-->
-<!--      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],-->
-<!--        })-->
-<!--      }-->
-<!--      return ''-->
-<!--    },-->
-<!--    createdAt() {-->
-<!--      if (this.item.createdAt) {-->
-<!--        return formatDistanceToNow(new Date(this.item.createdAt), {-->
-<!--          includeSecond: true,-->
-<!--          addSuffix: true,-->
-<!--          locale: locales[this.locale],-->
-<!--        })-->
-<!--      }-->
-<!--      return ''-->
-<!--    },-->
-<!--    isLocationChanged() {-->
-<!--      return this.originalLocation !== this.location-->
-<!--    },-->
-<!--    isGMSApiKeyChanged() {-->
-<!--      return this.originalGmsApiKey !== this.gmsApiKey-->
-<!--    },-->
-<!--    isValidLocation() {-->
-<!--      return this.location && this.location.latitude && this.location.longitude-->
-<!--    },-->
-<!--  },-->
-<!--  methods: {-->
-<!--    toggleDetails() {-->
-<!--      this.details = !this.details-->
-<!--    },-->
-<!--    handleUpdateHomeCommunity() {-->
-<!--      this.$apollo-->
-<!--        .mutate({-->
-<!--          mutation: updateHomeCommunity,-->
-<!--          variables: {-->
-<!--            uuid: this.item.uuid,-->
-<!--            gmsApiKey: this.gmsApiKey,-->
-<!--            location: this.location,-->
-<!--          },-->
-<!--        })-->
-<!--        .then(() => {-->
-<!--          if (this.isLocationChanged && this.isGMSApiKeyChanged) {-->
-<!--            this.toastSuccess(this.$t('federation.toast_gmsApiKeyAndLocationUpdated'))-->
-<!--          } else if (this.isGMSApiKeyChanged) {-->
-<!--            this.toastSuccess(this.$t('federation.toast_gmsApiKeyUpdated'))-->
-<!--          } else if (this.isLocationChanged) {-->
-<!--            this.toastSuccess(this.$t('federation.toast_gmsLocationUpdated'))-->
-<!--          }-->
-<!--          this.originalLocation = this.location-->
-<!--          this.originalGmsApiKey = this.gmsApiKey-->
-<!--        })-->
-<!--        .catch((error) => {-->
-<!--          this.toastError(error.message)-->
-<!--        })-->
-<!--    },-->
-<!--    resetHomeCommunityEditable() {-->
-<!--      this.location = this.originalLocation-->
-<!--      this.gmsApiKey = this.originalGmsApiKey-->
-<!--    },-->
-<!--  },-->
-<!--}-->
-<!--</script>-->
diff --git a/admin/src/components/input/Coordinates.spec.js b/admin/src/components/input/Coordinates.spec.js
index dec496a44..9831751d2 100644
--- a/admin/src/components/input/Coordinates.spec.js
+++ b/admin/src/components/input/Coordinates.spec.js
@@ -3,33 +3,43 @@ import { describe, it, expect, beforeEach, vi } from 'vitest'
 import Coordinates from './Coordinates.vue'
 import { BFormGroup, BFormInput } from 'bootstrap-vue-next'
 
-const value = {
+const modelValue = {
   latitude: 56.78,
   longitude: 12.34,
 }
 
+vi.mock('vue-i18n', () => ({
+  useI18n: () => ({
+    t: (key, v) => (key === 'geo-coordinates.format' ? `${v.latitude}, ${v.longitude}` : key),
+  }),
+}))
+
+const mockEditableGroup = {
+  valueChanged: vi.fn(function () {
+    this.isValueChanged = true
+  }),
+  invalidValues: vi.fn(function () {
+    this.isValueChanged = false
+  }),
+}
+
 describe('Coordinates', () => {
   let wrapper
 
   const createWrapper = (props = {}) => {
     return mount(Coordinates, {
       props: {
-        value,
+        modelValue,
         ...props,
       },
       global: {
-        mocks: {
-          $t: vi.fn((t, v) => {
-            if (t === 'geo-coordinates.format') {
-              return `${v.latitude}, ${v.longitude}`
-            }
-            return t
-          }),
-        },
         stubs: {
           BFormGroup,
           BFormInput,
         },
+        provide: {
+          editableGroup: mockEditableGroup,
+        },
       },
     })
   }
@@ -63,19 +73,13 @@ describe('Coordinates', () => {
     const latitudeInput = wrapper.find('#home-community-latitude')
     const longitudeInput = wrapper.find('#home-community-longitude')
 
-    await latitudeInput.setValue(34.56)
+    await latitudeInput.setValue('34.56')
     expect(wrapper.emitted('input')).toBeTruthy()
-    expect(wrapper.emitted('input')[0][0]).toEqual({
-      latitude: 34.56,
-      longitude: 12.34,
-    })
+    expect(wrapper.vm.inputValue.latitude).toBe('34.56')
 
-    await longitudeInput.setValue('78.90')
+    await longitudeInput.setValue('78.9')
     expect(wrapper.emitted('input')).toBeTruthy()
-    expect(wrapper.emitted('input')[1][0]).toEqual({
-      latitude: 34.56,
-      longitude: '78.90',
-    })
+    expect(wrapper.vm.inputValue.longitude).toBe('78.9')
   })
 
   it('splits coordinates correctly when entering in latitudeLongitude input', async () => {
diff --git a/admin/src/components/input/Coordinates.vue b/admin/src/components/input/Coordinates.vue
index a1c83b805..44d1c70bf 100644
--- a/admin/src/components/input/Coordinates.vue
+++ b/admin/src/components/input/Coordinates.vue
@@ -1,14 +1,14 @@
 <template>
-  <div>
+  <div class="mb-4">
     <BFormGroup
-      :label="$t('geo-coordinates.label')"
-      :invalid-feedback="$t('geo-coordinates.both-or-none')"
+      :label="t('geo-coordinates.label')"
+      :invalid-feedback="t('geo-coordinates.both-or-none')"
       :state="isValid"
     >
       <BFormGroup
-        :label="$t('latitude-longitude-smart')"
+        :label="t('latitude-longitude-smart')"
         label-for="home-community-latitude-longitude-smart"
-        :description="$t('geo-coordinates.latitude-longitude-smart.describe')"
+        :description="t('geo-coordinates.latitude-longitude-smart.describe')"
       >
         <BFormInput
           id="home-community-latitude-longitude-smart"
@@ -17,7 +17,7 @@
           @input="splitCoordinates"
         />
       </BFormGroup>
-      <BFormGroup :label="$t('latitude')" label-for="home-community-latitude">
+      <BFormGroup :label="t('latitude')" label-for="home-community-latitude">
         <BFormInput
           id="home-community-latitude"
           v-model="inputValue.latitude"
@@ -25,7 +25,7 @@
           @input="valueUpdated"
         />
       </BFormGroup>
-      <BFormGroup :label="$t('longitude')" label-for="home-community-longitude">
+      <BFormGroup :label="t('longitude')" label-for="home-community-longitude">
         <BFormInput
           id="home-community-longitude"
           v-model="inputValue.longitude"
@@ -37,81 +37,94 @@
   </div>
 </template>
 
-<script>
-export default {
-  name: 'Coordinates',
-  props: {
-    value: {
-      type: Object,
-      default: null,
-    },
+<script setup>
+import { ref, computed, watch, inject } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { BFormGroup, BFormInput } from 'bootstrap-vue-next'
+
+const props = defineProps({
+  modelValue: {
+    type: Object,
+    default: null,
   },
-  emits: ['input'],
-  data() {
-    return {
-      inputValue: this.value,
-      originalValue: this.value,
-      locationString: this.getLatitudeLongitudeString(this.value),
+})
+
+const emit = defineEmits(['update:modelValue'])
+const { t } = useI18n()
+
+const editableGroup = inject('editableGroup')
+
+const inputValue = ref(sanitizeLocation(props.modelValue))
+const originalValue = ref(props.modelValue)
+const locationString = ref(getLatitudeLongitudeString(props.modelValue))
+
+const isValid = computed(() => {
+  return (
+    (!isNaN(parseFloat(inputValue.value.longitude)) &&
+      !isNaN(parseFloat(inputValue.value.latitude))) ||
+    (inputValue.value.longitude === '' && inputValue.value.latitude === '')
+  )
+})
+
+const isChanged = computed(() => {
+  return inputValue.value !== originalValue.value
+})
+
+function splitCoordinates() {
+  const parts = locationString.value.split(',').map((part) => part.trim())
+
+  if (parts.length === 2) {
+    const [lat, lon] = parts
+    if (!isNaN(parseFloat(lon)) && !isNaN(parseFloat(lat))) {
+      inputValue.value.longitude = parseFloat(lon)
+      inputValue.value.latitude = parseFloat(lat)
     }
-  },
-  computed: {
-    isValid() {
-      return (
-        (!isNaN(parseFloat(this.inputValue.longitude)) &&
-          !isNaN(parseFloat(this.inputValue.latitude))) ||
-        (this.inputValue.longitude === '' && this.inputValue.latitude === '')
-      )
-    },
-    isChanged() {
-      return this.inputValue !== this.originalValue
-    },
-  },
-  methods: {
-    splitCoordinates(value) {
-      // default format for geo-coordinates: 'latitude, longitude'
-      const parts = this.locationString.split(',').map((part) => part.trim())
-
-      if (parts.length === 2) {
-        const [lat, lon] = parts
-        if (!isNaN(parseFloat(lon) && !isNaN(parseFloat(lat)))) {
-          this.inputValue.longitude = parseFloat(lon)
-          this.inputValue.latitude = parseFloat(lat)
-        }
-      }
-      this.valueUpdated()
-    },
-    sanitizeLocation(location) {
-      if (!location) return { latitude: '', longitude: '' }
-
-      const parseNumber = (value) => {
-        const number = parseFloat(value)
-        return isNaN(number) ? '' : number
-      }
-
-      return {
-        latitude: parseNumber(location.latitude),
-        longitude: parseNumber(location.longitude),
-      }
-    },
-    getLatitudeLongitudeString({ latitude, longitude } = {}) {
-      return latitude && longitude ? this.$t('geo-coordinates.format', { latitude, longitude }) : ''
-    },
-    valueUpdated() {
-      this.locationString = this.getLatitudeLongitudeString(this.inputValue)
-      this.inputValue = this.sanitizeLocation(this.inputValue)
-
-      if (this.isValid && this.isChanged) {
-        if (this.$parent.valueChanged) {
-          this.$parent.valueChanged()
-        }
-      } else {
-        if (this.$parent.invalidValues) {
-          this.$parent.invalidValues()
-        }
-      }
-
-      this.$emit('input', this.inputValue)
-    },
-  },
+  }
+  valueUpdated()
 }
+
+function sanitizeLocation(location) {
+  if (!location) return { latitude: '', longitude: '' }
+
+  const parseNumber = (value) => {
+    const number = parseFloat(value)
+    return isNaN(number) ? '' : number
+  }
+
+  return {
+    latitude: parseNumber(location.latitude),
+    longitude: parseNumber(location.longitude),
+  }
+}
+
+function getLatitudeLongitudeString(locationData) {
+  return locationData?.latitude && locationData?.longitude
+    ? t('geo-coordinates.format', {
+        latitude: locationData.latitude,
+        longitude: locationData.longitude,
+      })
+    : ''
+}
+
+function valueUpdated() {
+  locationString.value = getLatitudeLongitudeString(inputValue.value)
+  inputValue.value = sanitizeLocation(inputValue.value)
+
+  if (isValid.value && isChanged.value) {
+    editableGroup.valueChanged()
+  } else {
+    editableGroup.invalidValues()
+  }
+
+  emit('update:modelValue', inputValue.value)
+}
+
+watch(
+  () => props.modelValue,
+  (newValue) => {
+    inputValue.value = sanitizeLocation(newValue)
+    originalValue.value = newValue
+    locationString.value = getLatitudeLongitudeString(newValue)
+  },
+)
 </script>
diff --git a/admin/src/components/input/EditableGroup.vue b/admin/src/components/input/EditableGroup.vue
index 37632721d..06d1d7de4 100644
--- a/admin/src/components/input/EditableGroup.vue
+++ b/admin/src/components/input/EditableGroup.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
-    <slot v-if="!isEditing" :is-editing="isEditing" name="view"></slot>
-    <slot v-else :is-editing="isEditing" name="edit" @input="valueChanged"></slot>
+    <slot v-if="!isEditing" :is-editing="isEditing" name="view" />
+    <slot v-else :is-editing="isEditing" name="edit" @update:model-value="valueChanged" />
     <BFormGroup v-if="allowEdit && !isEditing">
       <BButton :variant="variant" @click="enableEdit">
         <IBiPencilFill />
@@ -12,7 +12,7 @@
       <BButton :variant="variant" :disabled="!isValueChanged" class="save-button" @click="save">
         {{ $t('save') }}
       </BButton>
-      <BButton variant="secondary" class="close-button" @click="close">
+      <BButton variant="secondary" class="close-button ms-2" @click="close">
         {{ $t('close') }}
       </BButton>
     </BFormGroup>
@@ -22,6 +22,14 @@
 <script>
 export default {
   name: 'EditableGroup',
+  provide() {
+    return {
+      editableGroup: {
+        valueChanged: this.valueChanged,
+        invalidValues: this.invalidValues,
+      },
+    }
+  },
   props: {
     allowEdit: {
       type: Boolean,
@@ -58,6 +66,7 @@ export default {
     close() {
       this.$emit('reset')
       this.isEditing = false
+      this.isValueChanged = false
     },
   },
 }
diff --git a/admin/src/components/input/EditableGroupableLabel.spec.js b/admin/src/components/input/EditableGroupableLabel.spec.js
index 0e58440c1..81a409bad 100644
--- a/admin/src/components/input/EditableGroupableLabel.spec.js
+++ b/admin/src/components/input/EditableGroupableLabel.spec.js
@@ -3,7 +3,7 @@ import { describe, it, expect, beforeEach, vi } from 'vitest'
 import EditableGroupableLabel from './EditableGroupableLabel.vue'
 import { BFormGroup, BFormInput } from 'bootstrap-vue-next'
 
-const value = 'test label value'
+const modelValue = 'test label value'
 const label = 'Test Label'
 const idName = 'test-id-name'
 
@@ -16,7 +16,7 @@ describe('EditableGroupableLabel', () => {
       components: {
         EditableGroupableLabel,
       },
-      props: ['value', 'label', 'idName'],
+      props: ['modelValue', 'label', 'idName'],
       methods: {
         onInput: vi.fn(),
         ...parentMethods,
@@ -24,7 +24,7 @@ describe('EditableGroupableLabel', () => {
     }
     return mount(Parent, {
       props: {
-        value,
+        modelValue,
         label,
         idName,
         ...props,
@@ -55,7 +55,7 @@ describe('EditableGroupableLabel', () => {
   it('renders BFormInput with correct props', () => {
     const formInput = wrapper.findComponent({ name: 'BFormInput' })
     expect(formInput.props('id')).toBe(idName)
-    expect(formInput.props('modelValue')).toBe(value)
+    expect(formInput.props('modelValue')).toBe(modelValue)
   })
 
   // it('emits input event with the correct value when input changes', async () => {
@@ -76,7 +76,7 @@ describe('EditableGroupableLabel', () => {
 
     const newValue = 'new label value'
     const input = wrapper.findComponent({ name: 'BFormInput' })
-    await input.vm.$emit('input', newValue)
+    await input.vm.$emit('update:model-value', newValue)
 
     expect(valueChangedMock).toHaveBeenCalled()
   })
@@ -86,8 +86,8 @@ describe('EditableGroupableLabel', () => {
     wrapper = createWrapper({}, { invalidValues: invalidValuesMock })
 
     const input = wrapper.findComponent({ name: 'BFormInput' })
-    await input.vm.$emit('input', 'new label value')
-    await input.vm.$emit('input', value)
+    await input.vm.$emit('update:model-value', 'new label value')
+    await input.vm.$emit('update:model-value', modelValue)
 
     expect(invalidValuesMock).toHaveBeenCalled()
   })
@@ -97,7 +97,7 @@ describe('EditableGroupableLabel', () => {
     wrapper = createWrapper({}, { valueChanged: valueChangedMock })
 
     const input = wrapper.findComponent({ name: 'BFormInput' })
-    await input.vm.$emit('input', value)
+    await input.vm.$emit('input', modelValue)
 
     expect(valueChangedMock).not.toHaveBeenCalled()
   })
diff --git a/admin/src/components/input/EditableGroupableLabel.vue b/admin/src/components/input/EditableGroupableLabel.vue
index ca1208180..f0f2a5952 100644
--- a/admin/src/components/input/EditableGroupableLabel.vue
+++ b/admin/src/components/input/EditableGroupableLabel.vue
@@ -1,6 +1,6 @@
 <template>
   <BFormGroup :label="label" :label-for="idName">
-    <BFormInput :id="idName" v-model="inputValue" @input="updateValue" />
+    <BFormInput :id="idName" :model-value="modelValue" @update:model-value="inputValue = $event" />
   </BFormGroup>
 </template>
 
@@ -8,7 +8,7 @@
 export default {
   name: 'EditableGroupableLabel',
   props: {
-    value: {
+    modelValue: {
       type: String,
       required: false,
       default: null,
@@ -22,16 +22,20 @@ export default {
       required: true,
     },
   },
-  emits: ['input'],
+  emits: ['update:model-value'],
   data() {
     return {
-      inputValue: this.value,
-      originalValue: this.value,
+      inputValue: this.modelValue,
+      originalValue: this.modelValue,
     }
   },
+  watch: {
+    inputValue() {
+      this.updateValue()
+    },
+  },
   methods: {
-    updateValue(value) {
-      this.inputValue = value
+    updateValue() {
       if (this.inputValue !== this.originalValue) {
         if (this.$parent.valueChanged) {
           this.$parent.valueChanged()
@@ -41,7 +45,7 @@ export default {
           this.$parent.invalidValues()
         }
       }
-      this.$emit('input', this.inputValue)
+      this.$emit('update:model-value', this.inputValue)
     },
   },
 }
diff --git a/docker-compose.yml b/docker-compose.yml
index 76243a98a..a4d759695 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -1,7 +1,7 @@
 # This file defines the production settings. It is overwritten by docker-compose.override.yml,
 # which defines the development settings. The override.yml is loaded by default. Therefore it
 # is required to explicitly define if you want an production build:
-# > docker-compose -f docker-compose.yml up 
+# > docker-compose -f docker-compose.yml up
 
 services:
 
@@ -67,13 +67,13 @@ services:
     environment:
       - MARIADB_ALLOW_EMPTY_PASSWORD=1
       - MARIADB_USER=root
-    networks: 
+    networks:
       - internal-net
-    ports: 
+    ports:
       - 3306:3306
-    volumes: 
+    volumes:
       - db_vol:/var/lib/mysql
-      
+
   ########################################################
   # BACKEND ##############################################
   ########################################################
@@ -264,12 +264,12 @@ services:
       # Application only envs
     #env_file:
     #  - ./frontend/.env
-    
+
   #########################################################
   ## NGINX ################################################
   #########################################################
   nginx:
-    build: 
+    build:
       context: ./nginx/
     networks:
       - external-net
@@ -277,17 +277,17 @@ services:
     depends_on:
       - frontend
       - backend
-      - admin 
+      - admin
     ports:
       - 80:80
-    volumes: 
-      - ./logs/nginx:/var/log/nginx 
-  
+    volumes:
+      - ./logs/nginx:/var/log/nginx
+
 networks:
   external-net:
   internal-net:
     internal: true
 
 volumes:
-  db_vol: 
-  
+  db_vol:
+
diff --git a/frontend/src/assets/scss/gradido-template.scss b/frontend/src/assets/scss/gradido-template.scss
index 85d2a783c..ca6f8df3a 100644
--- a/frontend/src/assets/scss/gradido-template.scss
+++ b/frontend/src/assets/scss/gradido-template.scss
@@ -189,8 +189,10 @@ a:hover,
 
 // .btn-primary pim {
 .btn-primary {
-  background-color: #5a7b02;
-  border-color: #5e72e4;
+  background-color: #5a7b02 !important;
+  border-color: #5e72e4 !important;
+  border-radius: 25px !important;
+  color: #ffffff !important;
 }
 
 .gradido-font-large {
diff --git a/frontend/src/components/DecayInformations/CollapseLinksList.vue b/frontend/src/components/DecayInformations/CollapseLinksList.vue
index fcd58dbb0..366e13bea 100644
--- a/frontend/src/components/DecayInformations/CollapseLinksList.vue
+++ b/frontend/src/components/DecayInformations/CollapseLinksList.vue
@@ -50,8 +50,8 @@ export default {
     buttonText() {
       const i = this.transactionLinkCount - this.transactionLinks.length
       if (i === 1) return this.$t('link-load', 0)
-      if (i <= this.pageSize) return this.$t('link-load', 1, { n: i })
-      return this.$t('link-load', 2, { n: this.pageSize })
+      if (i <= this.pageSize) return this.$t('link-load', { n: i })
+      return this.$t('link-load-more', { n: this.pageSize })
     },
   },
   methods: {
diff --git a/frontend/src/components/GddSend/TransactionResultSendSuccess.vue b/frontend/src/components/GddSend/TransactionResultSendSuccess.vue
index e70550878..89215d356 100644
--- a/frontend/src/components/GddSend/TransactionResultSendSuccess.vue
+++ b/frontend/src/components/GddSend/TransactionResultSendSuccess.vue
@@ -6,7 +6,9 @@
       {{ $t('form.send_transaction_success') }}
     </div>
     <div class="text-center mt-5">
-      <b-button variant="primary" @click="$emit('on-back')">{{ $t('form.close') }}</b-button>
+      <BButton variant="primary" @click="$emit('on-back')">
+        {{ $t('form.close') }}
+      </BButton>
     </div>
   </div>
 </template>
diff --git a/frontend/src/components/Menu/Sidebar.vue b/frontend/src/components/Menu/Sidebar.vue
index 9fe387e1c..706d0ead5 100644
--- a/frontend/src/components/Menu/Sidebar.vue
+++ b/frontend/src/components/Menu/Sidebar.vue
@@ -107,6 +107,8 @@ const props = defineProps({
   shadow: { type: Boolean, default: true },
 })
 
+const emit = defineEmits(['closeSidebar'])
+
 const route = useRoute()
 const communityLink = ref(null)
 
@@ -134,6 +136,7 @@ watch(
       link.classList.remove('active-route')
       link.classList.remove('router-link-exact-active')
     }
+    emit('closeSidebar')
   },
 )
 </script>
diff --git a/frontend/src/components/MobileSidebar/MobileSidebar.vue b/frontend/src/components/MobileSidebar/MobileSidebar.vue
index d416db5f8..d95ce08cc 100644
--- a/frontend/src/components/MobileSidebar/MobileSidebar.vue
+++ b/frontend/src/components/MobileSidebar/MobileSidebar.vue
@@ -7,24 +7,34 @@
     no-header-close
     horizontal
     skip-animation
+    :model-value="isMobileMenuOpen"
     @update:model-value="isMobileMenuOpen = $event"
   >
     <div class="mobile-sidebar-wrapper py-2">
       <BImg src="img/svg/lines.png" />
-      <sidebar :shadow="false" @admin="emit('admin')" @logout="emit('logout')" />
+      <sidebar
+        :shadow="false"
+        @admin="emit('admin')"
+        @close-sidebar="closeMenu"
+        @logout="emit('logout')"
+      />
     </div>
     <div v-b-toggle.sidebar-mobile class="simple-overlay" />
   </BCollapse>
 </template>
 
 <script setup>
-import { ref, watch } from 'vue'
+import { onUnmounted, ref, watch } from 'vue'
 import { lock, unlock } from 'tua-body-scroll-lock'
 
 const isMobileMenuOpen = ref(false)
 
 const emit = defineEmits(['admin', 'logout'])
 
+const closeMenu = () => {
+  isMobileMenuOpen.value = false
+}
+
 watch(
   () => isMobileMenuOpen.value,
   (newVal) => {
@@ -35,6 +45,10 @@ watch(
     }
   },
 )
+
+onUnmounted(() => {
+  unlock()
+})
 </script>
 
 <style>
diff --git a/frontend/src/components/SessionLogoutTimeout.vue b/frontend/src/components/SessionLogoutTimeout.vue
index d3745fc53..997a2f2d8 100644
--- a/frontend/src/components/SessionLogoutTimeout.vue
+++ b/frontend/src/components/SessionLogoutTimeout.vue
@@ -18,7 +18,7 @@
           </div>
           <div class="p-3 h2 text-warning">
             {{ $t('session.logoutIn') }}
-            <b>{{ tokenExpiresInSeconds }}</b>
+            <b>{{ formatTime(remainingTime) }}</b>
             {{ $t('time.seconds') }}
           </div>
         </BCardText>
@@ -43,91 +43,81 @@
 </template>
 
 <script setup>
-import { ref, computed, onBeforeUnmount, watch } from 'vue'
+import { ref, computed, onBeforeUnmount, watch, onMounted, onUnmounted } from 'vue'
 import { useStore } from 'vuex'
 import { useLazyQuery } from '@vue/apollo-composable'
 import { verifyLogin } from '@/graphql/queries'
 import { useModal } from 'bootstrap-vue-next'
 
 const store = useStore()
-
 const emit = defineEmits(['logout'])
 
 const sessionModalModel = ref(false)
-
-const { show: showModal, hide: hideModal } = useModal('modalSessionTimeOut')
+const { hide: hideModal } = useModal('modalSessionTimeOut')
 
 const { load: verifyLoginQuery, loading, error } = useLazyQuery(verifyLogin)
 
-const timerInterval = ref(null)
+const remainingTime = ref(0)
+let intervalId = null
 
-const now = ref(new Date().getTime())
+const tokenExpirationTime = computed(() => new Date(store.state.tokenTime * 1000))
 
-const tokenExpiresInSeconds = computed(() => {
-  const remainingSecs = Math.floor(
-    (new Date(store.state.tokenTime * 1000).getTime() - now.value) / 1000,
-  )
-  return remainingSecs <= 0 ? 0 : remainingSecs
+const isTokenValid = computed(() => {
+  return remainingTime.value > 0
 })
 
-const updateNow = () => {
-  now.value = new Date().getTime()
+const calculateRemainingTime = () => {
+  const now = new Date()
+  const diff = tokenExpirationTime.value - now
+  remainingTime.value = Math.max(0, Math.floor(diff / 1000))
+  // Show modal if remaining time is 75 seconds or less
+  if (remainingTime.value <= 75) {
+    sessionModalModel.value = true
+  }
+  // Clear interval if time expired
+  if (remainingTime.value <= 0) {
+    clearInterval(intervalId)
+  }
 }
 
-const checkExpiration = () => {
-  if (tokenExpiresInSeconds.value < 75 && timerInterval.value && !sessionModalModel.value) {
-    showModal()
+const formatTime = (seconds) => {
+  if (seconds <= 0) return '00'
+
+  const remainingSeconds = seconds % 60
+  return `${remainingSeconds.toString().padStart(2, '0')}`
+}
+
+onMounted(() => {
+  calculateRemainingTime()
+
+  if (isTokenValid.value) {
+    intervalId = setInterval(calculateRemainingTime, 1000)
   }
-  if (tokenExpiresInSeconds.value === 0) {
-    stopTimer()
+})
+
+onUnmounted(() => {
+  if (intervalId) {
+    clearInterval(intervalId)
+  }
+})
+
+watch(remainingTime, (newTime) => {
+  if (newTime <= 0) {
     emit('logout')
   }
-}
+})
 
 const handleOk = async (bvModalEvent) => {
   bvModalEvent.preventDefault()
   try {
     await verifyLoginQuery()
     if (error.value) {
+      emit('logout')
       throw new Error('Login verification failed')
     }
     hideModal('modalSessionTimeOut')
   } catch {
-    stopTimer()
     emit('logout')
   }
 }
-
-const startTimer = () => {
-  stopTimer()
-  timerInterval.value = setInterval(() => {
-    updateNow()
-    checkExpiration()
-  }, 1000)
-}
-
-const stopTimer = () => {
-  if (timerInterval.value) {
-    clearInterval(timerInterval.value)
-    timerInterval.value = null
-  }
-}
-
-watch(
-  tokenExpiresInSeconds,
-  (newValue) => {
-    if (newValue < 75 && !timerInterval.value) {
-      startTimer()
-    } else if (newValue >= 75 && timerInterval.value) {
-      stopTimer()
-    }
-  },
-  { immediate: true },
-)
-
-onBeforeUnmount(() => {
-  stopTimer()
-})
-
-checkExpiration()
 </script>
diff --git a/frontend/src/components/SkeletonLoaderElement.vue b/frontend/src/components/SkeletonLoaderElement.vue
new file mode 100644
index 000000000..052107464
--- /dev/null
+++ b/frontend/src/components/SkeletonLoaderElement.vue
@@ -0,0 +1,87 @@
+<template>
+  <div
+    class="skeleton-loader my-2"
+    :class="{ 'with-animation': !disableAnimation }"
+    :style="{
+      width: computedWidth,
+      height: computedHeight,
+      borderRadius: computedRadius,
+    }"
+  />
+</template>
+
+<script setup>
+import { computed } from 'vue'
+
+const props = defineProps({
+  width: {
+    type: [String, Number],
+    default: '100%',
+  },
+  height: {
+    type: [String, Number],
+    default: '1rem',
+  },
+  disableAnimation: {
+    type: Boolean,
+    default: false,
+  },
+  fullRadius: {
+    type: Boolean,
+    default: false,
+  },
+  useGradidoRadius: {
+    type: Boolean,
+  },
+})
+
+const computedWidth = computed(() => {
+  if (typeof props.width === 'number') return `${props.width}px`
+  return props.width
+})
+
+const computedHeight = computed(() => {
+  if (typeof props.height === 'number') return `${props.height}px`
+  return props.height
+})
+
+const computedRadius = computed(() => {
+  return props.fullRadius ? '100%' : props.useGradidoRadius ? '26px' : '0'
+})
+</script>
+
+<style scoped>
+.skeleton-loader {
+  background: #e9ecef; /* Bootstrap 5 gray-200 color */
+  border-radius: 0.25rem;
+}
+
+.with-animation {
+  position: relative;
+  overflow: hidden;
+}
+
+.with-animation::after {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  transform: translateX(-100%);
+  background: linear-gradient(
+    90deg,
+    rgba(255, 255, 255, 0) 0%,
+    rgba(255, 255, 255, 0.2) 20%,
+    rgba(255, 255, 255, 0.5) 60%,
+    rgba(255, 255, 255, 0) 100%
+  );
+  animation: shimmer 2s infinite;
+  content: '';
+}
+
+@keyframes shimmer {
+  100% {
+    transform: translateX(100%);
+  }
+}
+</style>
diff --git a/frontend/src/components/UserSettings/UserNewsletter.vue b/frontend/src/components/UserSettings/UserNewsletter.vue
index 322f2e0ed..379528dfe 100644
--- a/frontend/src/components/UserSettings/UserNewsletter.vue
+++ b/frontend/src/components/UserSettings/UserNewsletter.vue
@@ -29,7 +29,7 @@ const { mutate: newsletterSubscribe } = useMutation(subscribeNewsletter)
 const { mutate: newsletterUnsubscribe } = useMutation(unsubscribeNewsletter)
 
 watch(localNewsletterState, async (newValue, oldValue) => {
-  if (newValue !== oldValue) {
+  if (newValue && newValue !== oldValue) {
     await onSubmit()
   }
 })
diff --git a/frontend/src/components/skeleton/Overview.vue b/frontend/src/components/skeleton/Overview.vue
index 76b90b224..882dff659 100644
--- a/frontend/src/components/skeleton/Overview.vue
+++ b/frontend/src/components/skeleton/Overview.vue
@@ -2,18 +2,18 @@
   <div class="skeleton-overview h-100">
     <BRow class="text-center">
       <BCol>
-        <b-skeleton-img no-aspect animation="wave" height="118px"></b-skeleton-img>
-      </BCol>
-      <BCol cols="6">
-        <b-skeleton animation="wave" class="mt-4 pt-5"></b-skeleton>
+        <skeleton-loader-element :height="118" />
       </BCol>
+      <BCol cols="6" />
       <BCol>
         <div class="b-right m-4">
           <BRow>
-            <BCol><b-skeleton type="avatar"></b-skeleton></BCol>
             <BCol>
-              <b-skeleton></b-skeleton>
-              <b-skeleton></b-skeleton>
+              <skeleton-loader-element full-radius :width="61" :height="61" />
+            </BCol>
+            <BCol>
+              <skeleton-loader-element />
+              <skeleton-loader-element />
             </BCol>
           </BRow>
         </div>
@@ -21,28 +21,53 @@
     </BRow>
     <BRow class="text-center mt-5 pt-5">
       <BCol cols="12" lg="">
-        <b-skeleton animation="wave" width="85%"></b-skeleton>
-        <b-skeleton animation="wave" width="55%"></b-skeleton>
-        <b-skeleton animation="wave" width="70%"></b-skeleton>
+        <skeleton-loader-element width="85%" :height="466" use-gradido-radius />
       </BCol>
       <BCol cols="12" lg="6">
-        <b-skeleton animation="wave" width="85%"></b-skeleton>
-        <b-skeleton animation="wave" width="55%"></b-skeleton>
-        <b-skeleton animation="wave" width="70%"></b-skeleton>
-        <b-skeleton animation="wave" width="85%"></b-skeleton>
-        <b-skeleton animation="wave" width="55%"></b-skeleton>
-        <b-skeleton animation="wave" width="70%"></b-skeleton>
+        <BRow class="d-flex justify-content-between">
+          <skeleton-loader-element width="45%" :height="105" use-gradido-radius />
+          <skeleton-loader-element width="45%" :height="105" use-gradido-radius />
+        </BRow>
+        <skeleton-loader-element :height="450" use-gradido-radius />
       </BCol>
       <BCol cols="12" lg="">
-        <b-skeleton animation="wave" width="85%"></b-skeleton>
-        <b-skeleton animation="wave" width="55%"></b-skeleton>
-        <b-skeleton animation="wave" width="70%"></b-skeleton>
+        <skeleton-loader-element width="85%" />
+        <BRow>
+          <BCol style="max-width: min-content">
+            <skeleton-loader-element full-radius :width="61" :height="61" />
+          </BCol>
+          <BCol>
+            <skeleton-loader-element />
+            <skeleton-loader-element />
+          </BCol>
+        </BRow>
+        <BRow>
+          <BCol style="max-width: min-content">
+            <skeleton-loader-element full-radius :width="61" :height="61" />
+          </BCol>
+          <BCol>
+            <skeleton-loader-element />
+            <skeleton-loader-element />
+          </BCol>
+        </BRow>
+        <BRow>
+          <BCol style="max-width: min-content">
+            <skeleton-loader-element full-radius :width="61" :height="61" />
+          </BCol>
+          <BCol>
+            <skeleton-loader-element />
+            <skeleton-loader-element />
+          </BCol>
+        </BRow>
       </BCol>
     </BRow>
   </div>
 </template>
 <script>
+import SkeletonLoaderElement from '@/components/SkeletonLoaderElement.vue'
+
 export default {
   name: 'SkeletonOverview',
+  components: { SkeletonLoaderElement },
 }
 </script>
diff --git a/frontend/src/layouts/DashboardLayout.vue b/frontend/src/layouts/DashboardLayout.vue
index c91431c05..25151cf39 100755
--- a/frontend/src/layouts/DashboardLayout.vue
+++ b/frontend/src/layouts/DashboardLayout.vue
@@ -181,7 +181,7 @@
           <content-footer v-if="!$route.meta.hideFooter" />
         </BCol>
       </BRow>
-      <!--      <session-logout-timeout @logout="logoutUser" ref="sessionModal" />-->
+      <session-logout-timeout @logout="logoutUser" />
     </div>
   </div>
 </template>
@@ -236,12 +236,6 @@ const darkMode = ref(false)
 const skeleton = ref(true)
 const totalUsers = ref(null)
 
-const sessionModal = ref(null)
-
-const testModal = () => {
-  sessionModal.value.showTimeoutModalForTesting()
-}
-
 onMounted(() => {
   updateTransactions({ currentPage: 1, pageSize: 10 })
   getCommunityStatistics()
@@ -255,7 +249,7 @@ const logoutUser = async () => {
     await useLogoutMutation()
     await store.dispatch('logout')
     await router.push('/login')
-  } catch {
+  } catch (err) {
     await store.dispatch('logout')
     if (router.currentRoute.value.path !== '/login') await router.push('/login')
   }
@@ -354,7 +348,7 @@ const setVisible = (bool) => {
 
 @media screen and (width <= 450px) {
   .breadcrumb {
-    padding-top: 60px;
+    padding-top: 55px !important;
   }
 }
 </style>
diff --git a/frontend/src/locales/de.json b/frontend/src/locales/de.json
index 05f73a5ec..06108cf2e 100644
--- a/frontend/src/locales/de.json
+++ b/frontend/src/locales/de.json
@@ -248,7 +248,8 @@
   },
   "h": "h",
   "language": "Sprache",
-  "link-load": "den letzten Link nachladen | die letzten {n} Links nachladen |  weitere {n} Links nachladen",
+  "link-load": "den letzten Link nachladen | die letzten {n} Links nachladen",
+  "link-load-more": "weitere {n} Links nachladen",
   "login": "Anmelden",
   "math": {
     "asterisk": "*",
diff --git a/frontend/src/locales/en.json b/frontend/src/locales/en.json
index c6a717e44..f37a40729 100644
--- a/frontend/src/locales/en.json
+++ b/frontend/src/locales/en.json
@@ -248,7 +248,8 @@
   },
   "h": "h",
   "language": "Language",
-  "link-load": "Load the last link | Load the last {n} links |  Load more {n} links",
+  "link-load": "Load the last link | Load the last {n} links",
+  "link-load-more": "Load more {n} links",
   "login": "Sign in",
   "math": {
     "asterisk": "*",
diff --git a/frontend/src/locales/es.json b/frontend/src/locales/es.json
index a169cada3..d7c6455ea 100644
--- a/frontend/src/locales/es.json
+++ b/frontend/src/locales/es.json
@@ -213,7 +213,8 @@
     "recruited-member": "Miembro invitado"
   },
   "language": "Idioma",
-  "link-load": "recargar el último enlace |recargar los últimos {n} enlaces  | descargar más {n} enlaces",
+  "link-load": "recargar el último enlace | recargar los últimos {n} enlaces",
+  "link-load-more": "descargar más {n} enlaces",
   "login": "iniciar sesión",
   "math": {
     "aprox": "~",
diff --git a/frontend/src/locales/fr.json b/frontend/src/locales/fr.json
index a055cbd4f..cadc3b5d7 100644
--- a/frontend/src/locales/fr.json
+++ b/frontend/src/locales/fr.json
@@ -221,7 +221,8 @@
   },
   "h": "h",
   "language": "Langage",
-  "link-load": "Enregistrer le dernier lien | Enregistrer les derniers {n} liens |  Enregistrer plus de {n} liens",
+  "link-load": "Enregistrer le dernier lien | Enregistrer les derniers {n} liens",
+  "link-load-more": "Enregistrer plus de {n} liens",
   "login": "Connexion",
   "math": {
     "asterisk": "*",
diff --git a/frontend/src/locales/nl.json b/frontend/src/locales/nl.json
index bbbecbe8f..8f427fc71 100644
--- a/frontend/src/locales/nl.json
+++ b/frontend/src/locales/nl.json
@@ -213,7 +213,8 @@
     "recruited-member": "Uitgenodigd lid"
   },
   "language": "Taal",
-  "link-load": "de laatste link herladen | de laatste links herladen |  verdere {n} links herladen",
+  "link-load": "de laatste link herladen | de laatste links herladen",
+  "link-load-more": "verdere {n} links herladen",
   "login": "Aanmelding",
   "math": {
     "aprox": "~",
diff --git a/frontend/src/locales/tr.json b/frontend/src/locales/tr.json
index 948c8228f..e4c6d3385 100644
--- a/frontend/src/locales/tr.json
+++ b/frontend/src/locales/tr.json
@@ -204,7 +204,8 @@
     "recruited-member": "Davetli üye"
   },
   "language": "Dil",
-  "link-load": "Son linki yükle| Son {n} linki yükle |  {n} link daha yükle",
+  "link-load": "Son linki yükle| Son {n} linki yükle",
+  "link-load-more": "{n} link daha yükle",
   "login": "Giriş",
   "math": {
     "aprox": "~",