add newsletter settings

frontend/src/locales/de.json

@@ -19,6 +19,7 @@
     "en": "English"
   },
   "select_language": "Bitte wähle eine Sprache für die App und Newsletter",
+  "newsletter": "Newsletter",
   "decay": {
     "decay": "Vergänglichkeit",
     "decay_since_last_transaction":"Vergänglichkeit seit der letzten Transaktion",
@@ -65,6 +66,7 @@
     "change-password": "Passwort ändern",
     "change-name": "Name ändern",
     "changeLanguage": "Sprache ändern",
+    "changeNewsletter": "Newsletter Status ändern",
     "amount":"Betrag",
     "memo":"Nachricht",
     "message":"Nachricht",

frontend/src/locales/en.json

@@ -65,6 +65,7 @@
     "change-password": "Change password",
     "change-name": "Change name",
     "changeLanguage": "Change language",
+    "changeNewsletter": "Change newsletter status",
     "amount":"Amount",
     "memo":"Message",
     "message":"Message",

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

@@ -0,0 +1,86 @@
+<template>
+  <b-card
+    id="formusernewsletter"
+    class="bg-transparent"
+    style="background-color: #ebebeba3 !important"
+  >
+    <div>
+      <b-row class="mb-4 text-right">
+        <b-col class="text-right">
+          <a @click="showNewsletter ? (showNewsletter = !showNewsletter) : cancelEdit()">
+            <span class="pointer mr-3">{{ $t('form.changeNewsletter') }}</span>
+            <b-icon v-if="showNewsletter" class="pointer ml-3" icon="pencil"></b-icon>
+            <b-icon v-else icon="x-circle" class="pointer ml-3" variant="danger"></b-icon>
+          </a>
+        </b-col>
+      </b-row>
+    </div>
+
+    <div v-if="showNewsletter">
+      <b-row class="mb-3">
+        <b-col class="col-lg-3 col-md-10 col-sm-10 text-md-left text-lg-right">
+          <small>{{ $t('newsletter') }}</small>
+        </b-col>
+        <b-col class="h2 col-md-9 col-sm-10">Aktueller Newsletter Status</b-col>
+      </b-row>
+    </div>
+
+    <div v-else>
+      <div>
+        <b-form @submit.stop.prevent="handleSubmit(onSubmit)">
+          <b-row class="mb-2">
+            <b-col class="col-lg-3 col-md-10 col-sm-10 text-md-left text-lg-right">
+              <small>{{ $t('newsletter') }}</small>
+            </b-col>
+            <b-col class="col-md-9 col-sm-10">
+              Form Newsletter status ändern
+            </b-col>
+          </b-row>
+
+          <b-row class="text-right">
+            <b-col>
+              <div class="text-right">
+                <b-button type="submit" variant="primary" class="mt-4">
+                  {{ $t('form.save') }}
+                </b-button>
+              </div>
+            </b-col>
+          </b-row>
+        </b-form>
+      </div>
+    </div>
+  </b-card>
+</template>
+<script>
+import { updateUserInfos } from '../../../graphql/queries'
+
+export default {
+  name: 'FormUserNewsletter',
+  data() {
+    return {
+      showNewsletter: true,
+      NewsletterStatus: true,
+    }
+  },
+  methods: {
+    cancelEdit() {
+      this.showNewsletter = true
+    },
+    async onSubmit() {
+      this.$apollo
+        .query({
+          query: updateUserInfos,
+          variables: {
+            newsletter: this.$store.state.newsletter, /* exestiert noch nicht im store*/
+          },
+        })
+        .then(() => {
+          this.cancelEdit()
+        })
+        .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-newsletter />
   </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 FormUserNewsletter from './UserProfile/UserCard_Newsletter.vue'
 
 export default {
   components: {
@@ -20,6 +23,7 @@ export default {
     FormUserData,
     FormUserPasswort,
     FormUserLanguage,
+    FormUserNewsletter
   },
   props: {
     balance: { type: Number, default: 0 },