Unsubscribe

src/views/email/unsubscribe/unsubscribe.ts

@@ -2,7 +2,7 @@ import { serv_constants } from '@store/Modules/serv_constants'
 
 import { tools } from '@store/Modules/tools'
 
-import { defineComponent, ref } from 'vue'
+import { computed, defineComponent, ref } from 'vue'
 import { useI18n } from '@src/boot/i18n'
 import { useUserStore } from '@store/UserStore'
 import { useGlobalStore } from '@store/globalStore'
@@ -11,22 +11,6 @@ import { useRoute } from 'vue-router'
 
 export default defineComponent({
   name: 'Unsubscribe',
-  props: {
-    mystr: {
-      type: String,
-      required: true,
-    },
-    myval: {
-      type: Number,
-      required: true,
-      default: 0,
-    },
-    mybool: {
-      type: Boolean,
-      required: true,
-      default: false,
-    },
-  },
   components: {},
   setup(props, { emit }) {
     const $q = useQuasar()
@@ -36,25 +20,25 @@ export default defineComponent({
 
     const risultato = ref('...')
     const riscode = ref(0)
+    const param = ref(<any>null)
 
-    function disiscritto() {
+    const disiscritto = computed(() => {
       return riscode.value === serv_constants.RIS_UNSUBSCRIBED_OK
-    }
+    })
 
-    function errore() {
+    const errore = computed(() => {
       return riscode.value !== serv_constants.RIS_UNSUBSCRIBED_OK
-    }
+    })
 
-    function email() {
+    const email = computed(() => {
       return $route.query.email
-    }
+    })
 
     function load() {
       // console.log('load')
-      let param
-      param = { em: $route.query.em, mc: $route.query.mc, locale: tools.getLocale() }
-      console.log('idlink = ', param)
-      return userStore.unsubscribe(param)
+      param.value = { em: $route.query.em, mc: $route.query.mc, locale: tools.getLocale() }
+      console.log('idlink = ', param.value)
+      return userStore.unsubscribe(param.value)
         .then((ris: any) => {
           riscode.value = ris.code
           risultato.value = ris.msg
@@ -71,6 +55,7 @@ export default defineComponent({
       errore,
       email,
       risultato,
+      param,
     }
   }
 })

src/views/email/unsubscribe/unsubscribe.vue

@@ -1,48 +1,57 @@
 <template>
-    <q-page padding class="vreg">
-        <div class="q-pa-md q-gutter-sm">
-            <q-banner
-                    rounded
-                    class="bg-primary text-white"
-                    color="primary q-title"
-                    style="text-align: center;">
-                <span class="mybanner">{{ $t('components.authentication.email_verification.title_unsubscribe')}}: {{email()}}</span>
-            </q-banner>
-            <br>
-
-            <transition
-                    enter-active-class="animated fadeIn"
-                    leave-active-class="animated fadeOut"
-                    appear
-
-            >
-
-                <q-banner
-                        rounded
-                        class="bg-warning text-black"
-                        style="text-align: center;"
-                        v-if="errore()"
-                >
-                    <span class="mybanner">{{ risultato}}</span>
-                </q-banner>
-                <q-banner
-                        class="bg-positive text-white"
-                        style="text-align: center;"
-                        rounded
-                        v-if="disiscritto()"
-                >
-                    <span class="mybanner">{{ $t('components.authentication.email_verification.title_unsubscribe_done') }}</span>
-                </q-banner>
-            </transition>
-
+  <q-page v-if="param && param.em" padding class="vreg">
+    <div class="q-pa-md q-gutter-sm">
+      <q-banner
+        rounded
+        class="bg-primary text-white"
+        color="primary q-title"
+        style="text-align: center"
+      >
+        <span class="mybanner"
+          >{{
+            $t(
+              'components.authentication.email_verification.title_unsubscribe'
+            )
+          }}: {{ email }}</span
+        >
+      </q-banner>
+      <br />
 
+      <transition
+        enter-active-class="animated fadeIn"
+        leave-active-class="animated fadeOut"
+        appear
+      >
+        <div>
+          <q-banner
+            rounded
+            class="bg-warning text-black"
+            style="text-align: center"
+            v-if="errore"
+          >
+            <span class="mybanner">{{ risultato }}</span>
+          </q-banner>
+          <q-banner
+            class="bg-positive text-white"
+            style="text-align: center"
+            rounded
+            v-if="disiscritto"
+          >
+            <span class="mybanner">{{
+              $t(
+                'components.authentication.email_verification.title_unsubscribe_done'
+              )
+            }}</span>
+          </q-banner>
         </div>
-    </q-page>
+      </transition>
+    </div>
+  </q-page>
 </template>
 
 <script lang="ts" src="./unsubscribe.ts">
 </script>
 
 <style lang="scss" scoped>
-    @import './unsubscribe.scss';
+@import './unsubscribe.scss';
 </style>