add BFormCheckbox switch for edit, fix test for BFormCheckbox switch

frontend/src/locales/de.json

@@ -44,7 +44,9 @@
   },
   "setting": {
     "newsletter": "Newsletter",
-    "changeNewsletter": "Newsletter Status ändern"
+    "changeNewsletter": "Newsletter Status ändern",
+    "newsletterTrue": "Du bist im Newslettersystem von Gradido eingetraten und erhällst regelmäsig Neuigkeiten und Informationen.",
+    "newsletterFalse": "Du bist aus Newslettersystem von Gradido ausgetragen."
   },
   "form": {
     "cancel": "Abbrechen",

frontend/src/locales/en.json

@@ -42,6 +42,12 @@
     "toCommunity":"To the community",
     "noDecay": "No Decay"
   },
+  "setting": {
+    "newsletter": "Newsletter",
+    "changeNewsletter": "Newsletter status change",
+    "newsletterTrue": "You have joined the Gradido newsletter system and receive news and information regularly.",
+    "newsletterFalse": "You are unsubscribed from Gradido's newsletter system."
+  },
   "form": {
     "cancel":"Cancel",
     "reset": "Reset",
@@ -65,7 +71,6 @@
     "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.spec.js

@@ -42,8 +42,8 @@ describe('UserCard_Newsletter', () => {
       expect(wrapper.find('div#formusernewsletter').exists()).toBeTruthy()
     })
 
-    it('has an edit icon', () => {
+    it('has an edit BFormCheckbox switch', () => {
-      expect(wrapper.find('svg.bi-pencil').exists()).toBeTruthy()
+      expect(wrapper.find('.Test-BFormCheckbox').exists()).toBeTruthy()
     })
   })
 })

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

@@ -7,11 +7,16 @@
     <div>
       <b-row class="mb-4 text-right">
         <b-col class="text-right">
-          <a @click="showNewsletter ? (showNewsletter = !showNewsletter) : cancelEdit()">
+          <div>
-            <span class="pointer mr-3">{{ $t('setting.changeNewsletter') }}</span>
+            <b-form-checkbox
-            <b-icon v-if="showNewsletter" class="pointer ml-3" icon="pencil"></b-icon>
+              class="text-right Test-BFormCheckbox"
-            <b-icon v-else icon="x-circle" class="pointer ml-3" variant="danger"></b-icon>
+              v-model="NewsletterStatus"
-          </a>
+              name="check-button"
+              switch
+            >
+              {{ $t('setting.changeNewsletter') }}
+            </b-form-checkbox>
+          </div>
         </b-col>
       </b-row>
     </div>
@@ -21,32 +26,11 @@
         <b-col class="col-lg-3 col-md-10 col-sm-10 text-md-left text-lg-right">
           <small>{{ $t('setting.newsletter') }}</small>
         </b-col>
-        <b-col class="h2 col-md-9 col-sm-10">Aktueller Newsletter Status</b-col>
+        <b-col class="h2 col-md-9 col-sm-10">
+          {{ NewsletterStatus ? $t('setting.newsletterTrue') : $t('setting.newsletterFalse') }}
+        </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('setting.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>
@@ -61,9 +45,6 @@ export default {
     }
   },
   methods: {
-    cancelEdit() {
-      this.showNewsletter = true
-    },
     async onSubmit() {
       this.$apollo
         .query({
@@ -73,7 +54,11 @@ export default {
           },
         })
         .then(() => {
-          this.cancelEdit()
+          this.$toasted.success(
+            this.NewsletterStatus
+              ? this.$t('setting.newsletterTrue')
+              : this.$t('setting.newsletterFalse'),
+          )
         })
         .catch((error) => {
           this.$toasted.error(error.message)