app animated background turned on & off

frontend/src/App.vue

@@ -1,7 +1,7 @@
 <template>
   <div id="app" class="font-sans text-gray-800">
     <div class="">
-      <particles-bg type="custom" :config="config" :bg="true" />
+      <particles-bg v-if="$store.state.coinanimation" type="custom" :config="config" :bg="true" />
       <component :is="$route.meta.requiresAuth ? 'DashboardLayout' : 'AuthLayoutGDD'" />
     </div>
   </div>

frontend/src/locales/de.json

@@ -42,6 +42,12 @@
     "toCommunity":"An die Gemeinschaft",
     "noDecay": "Keine Vergänglichkeit"
   },
+  "setting": {
+    "coinanimation": "animierter Hintergrund (Gradido Coins)",
+    "changeCoinanimation": "animierten Hintergrund ändern",
+    "coinanimationTrue": "animierten Hintergrund angestellt.",
+    "coinanimationFalse": "animierten Hintergrund abgestellt."
+  },
   "form": {
     "cancel": "Abbrechen",
     "reset": "Zurücksetzen",

frontend/src/locales/en.json

@@ -42,6 +42,12 @@
     "toCommunity":"To the community",
     "noDecay": "No Decay"
   },
+  "setting": {
+    "coinanimation": "animated background (Gradido Coins)",
+    "changeCoinanimation": "change animated background",
+    "coinanimationTrue": "animated background turned on",
+    "coinanimationFalse": "animated background turned off."
+  },
   "form": {
     "cancel":"Cancel",
     "reset": "Reset",

frontend/src/store/store.js

@@ -62,6 +62,7 @@ export const store = new Vuex.Store({
     username: '',
     description: '',
     token: null,
+    coinanimation: true,
   },
   getters: {},
   // Syncronous mutation of the state

frontend/src/views/Pages/UserProfile/UserCard.vue

@@ -1,7 +1,11 @@
 <template>
   <b-card class="bg-transparent">
     <div class="w-100 text-center">
-      <vue-qrcode :value="$store.state.email" type="image/png"></vue-qrcode>
+      <vue-qrcode
+        v-if="$store.state.email"
+        :value="$store.state.email"
+        type="image/png"
+      ></vue-qrcode>
     </div>
 
     <div class="card-profile-stats d-flex justify-content-center mt-md-5">

frontend/src/views/Pages/UserProfile/UserCard_CoinAnimation.spec.js

@@ -0,0 +1,49 @@
+import { mount } from '@vue/test-utils'
+import UserCardCoinAnimation from './UserCard_CoinAnimation'
+
+const localVue = global.localVue
+
+const mockAPIcall = jest.fn()
+
+const toastErrorMock = jest.fn()
+const toastSuccessMock = jest.fn()
+const storeCommitMock = jest.fn()
+
+describe('UserCard_CoinAnimation', () => {
+  let wrapper
+
+  const mocks = {
+    $t: jest.fn((t) => t),
+    $store: {
+      state: {
+        language: 'de',
+      },
+      commit: storeCommitMock,
+    },
+    $toasted: {
+      success: toastSuccessMock,
+      error: toastErrorMock,
+    },
+    $apollo: {
+      query: mockAPIcall,
+    },
+  }
+
+  const Wrapper = () => {
+    return mount(UserCardCoinAnimation, { localVue, mocks })
+  }
+
+  describe('mount', () => {
+    beforeEach(() => {
+      wrapper = Wrapper()
+    })
+
+    it('renders the component', () => {
+      expect(wrapper.find('div#formusercoinanimation').exists()).toBeTruthy()
+    })
+
+    it('has an edit BFormCheckbox switch', () => {
+      expect(wrapper.find('.Test-BFormCheckbox').exists()).toBeTruthy()
+    })
+  })
+})

frontend/src/views/Pages/UserProfile/UserCard_CoinAnimation.vue

@@ -0,0 +1,66 @@
+<template>
+  <b-card
+    id="formusercoinanimation"
+    class="bg-transparent"
+    style="background-color: #ebebeba3 !important"
+  >
+    <div>
+      <b-row class="mb-3">
+        <b-col class="mb-2 col-12">
+          <small>
+            <b>{{ $t('setting.coinanimation') }}</b>
+          </small>
+        </b-col>
+        <b-col class="col-12">
+          <b-form-checkbox
+            class="Test-BFormCheckbox"
+            v-model="CoinAnimationStatus"
+            name="check-button"
+            switch
+          >
+            {{
+              CoinAnimationStatus
+                ? $t('setting.coinanimationTrue')
+                : $t('setting.coinanimationFalse')
+            }}
+          </b-form-checkbox>
+        </b-col>
+      </b-row>
+    </div>
+  </b-card>
+</template>
+<script>
+import { updateUserInfos } from '../../../graphql/queries'
+export default {
+  name: 'FormUserCoinAnimation',
+  data() {
+    return {
+      CoinAnimationStatus: true,
+    }
+  },
+  created() {
+    this.CoinAnimationStatus = this.$store.state.coinanimation /* exestiert noch nicht im store */
+  },
+  methods: {
+    async onSubmit() {
+      this.$apollo
+        .query({
+          query: updateUserInfos,
+          variables: {
+            coinanimation: this.$store.state.coinanimation /* exestiert noch nicht im store */,
+          },
+        })
+        .then(() => {
+          this.$toasted.success(
+            this.NewsletterStatus
+              ? this.$t('setting.coinanimationTrue')
+              : this.$t('setting.coinanimationFalse'),
+          )
+        })
+        .catch((error) => {
+          this.$toasted.error(error.message)
+        })
+    },
+  },
+}
+</script>

frontend/src/views/Pages/UserProfileOverview.vue

@@ -6,6 +6,8 @@
     <form-user-passwort />
     <hr />
     <form-user-language />
+    <hr />
+    <form-user-coin-animation />
   </div>
 </template>
 <script>
@@ -13,6 +15,7 @@ import UserCard from './UserProfile/UserCard.vue'
 import FormUserData from './UserProfile/UserCard_FormUserData.vue'
 import FormUserPasswort from './UserProfile/UserCard_FormUserPasswort.vue'
 import FormUserLanguage from './UserProfile/UserCard_Language.vue'
+import FormUserCoinAnimation from './UserProfile/UserCard_CoinAnimation.vue'
 
 export default {
   components: {
@@ -20,6 +23,7 @@ export default {
     FormUserData,
     FormUserPasswort,
     FormUserLanguage,
+    FormUserCoinAnimation,
   },
   props: {
     balance: { type: Number, default: 0 },