@saooti/octopus-sdk 33.0.4 → 33.0.5

package/README.md

@@ -691,3 +691,4 @@ See [Configuration Reference](https://cli.vuejs.org/config/).
 
  * 33.0.3 SpeechToText player octopus
  * 33.0.4 Image webp
+ * 33.0.5 Change recaptcha

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@saooti/octopus-sdk",
-  "version": "33.0.4",
+  "version": "33.0.5",
   "private": false,
   "description": "Javascript SDK for using octopus",
   "author": "Saooti",
@@ -37,7 +37,7 @@
     "vue": "^3.2.37",
     "vue-i18n": "^9.2.0-beta.40",
     "vue-multiselect": "^3.0.0-alpha.2",
-    "vue-recaptcha-v3": "^2.0.1",
+    "vue-recaptcha": "^2.0.3",
     "vue-router": "^4.1.2",
     "vue3-lazyload": "^0.2.5-beta",
     "vue3-swatches": "^1.0.10",

package/src/components/display/comments/AddCommentModal.vue

@@ -45,11 +45,20 @@
           >
             {{ $t('Close') }}
           </button>
+          <vue-recaptcha
+            ref="invisibleRecaptcha"
+            :load-recaptcha-script="true"
+            @verify="handleSuccess"
+            @expired="handleError"
+            size="invisible"
+            sitekey="6LfyP_4ZAAAAAPODj8nov2LvosIwcX0GYeBSungh"
+          >
+          </vue-recaptcha>
           <button
             v-if="!sending"
             class="btn btn-primary m-1"
             :disabled="0 === countName || !validName"
-            @click="validateName"
+            @click="submit"
           >
             {{ $t('Validate') }}
           </button>
@@ -63,9 +72,13 @@
 import Constants from '../../../../public/config';
 import { state } from '../../../store/paramStore';
 import api from '@/api/initialize';
-import { defineComponent } from 'vue'
+import { VueRecaptcha } from 'vue-recaptcha';
+import { defineComponent } from 'vue';
 export default defineComponent({
   name: 'AddCommentModal',
+  components:{
+    VueRecaptcha
+  },
 
   props: {},
   emits: ['close','validate'],
@@ -74,8 +87,8 @@ export default defineComponent({
     return {
       name: '' as string,
       sending: false as boolean,
-      needVerify: true as boolean,
       sendError: false as boolean,
+      isVerify: false as boolean,
       maxName : Constants.MAX_COMMENT_NAME as number
     };
   },
@@ -97,34 +110,26 @@ export default defineComponent({
     },
   },
 
-  mounted() {
-    this.displayCaptcha('block');
+  created() {
     this.initAuthenticatedName();
   },
-  unmounted() {
-    this.displayCaptcha('none');
-  },
   methods: {
     initAuthenticatedName():void{
       if (!state.generalParameters.authenticated) { return; }
       this.name = (`${this.$store.state.profile.firstname||''} ${this.$store.state.profile.lastname||''}`).trim();
-      this.needVerify = false;
+      this.isVerify = true;
+    },
+    async handleSuccess(token: string) {
+      this.isVerify = await api.checkToken(token);
+      this.sendComment();
     },
-    displayCaptcha(displayStyle: string): void{
-      const captcha = document.getElementsByClassName('grecaptcha-badge')[0];
-      if (!captcha) {return;}
-      (captcha as HTMLElement).style.display = displayStyle;
+    handleError() {
+      this.isVerify = false;
+      this.sendError = true;
     },
-    async validateName(): Promise<void> {
-      if (this.needVerify && this.isCaptchaTest) {
-        try {
-          await this.$recaptchaLoaded()
-          const token = await this.$recaptcha('login');
-          this.sendError = !await api.checkToken(token);
-        } catch {
-          this.sendError = true;
-        }
-        if(this.sendError){return;}
+    async submit(): Promise<void> {
+      if (!this.isVerify && !this.isCaptchaTest) {
+        return (this.$refs.invisibleRecaptcha as InstanceType<typeof VueRecaptcha>).execute();
       }
       this.sendComment();
     },

package/src/main.ts

@@ -1,5 +1,4 @@
 import { createApp } from 'vue';
-import { VueReCaptcha } from 'vue-recaptcha-v3';
 import VueLazyLoad from 'vue3-lazyload';
 import App from './App.vue';
 import {setupI18n} from './i18n';
@@ -57,5 +56,4 @@ createApp(App)
 .use(store)
 .use(router)
 .use(VueLazyLoad)
-.use(VueReCaptcha, { siteKey: '6LfyP_4ZAAAAAPODj8nov2LvosIwcX0GYeBSungh' })
 .mount('#app');