frontend: fix captcha in forms

SafeHavenMaps · Jun 21, 2024 · 8bbcb74 · 8bbcb74
1 parent a00695b
commit 8bbcb74
Show file tree

Hide file tree

Showing 3 changed files with 84 additions and 66 deletions.
diff --git a/frontend/components/viewer/CommentAddForm.vue b/frontend/components/viewer/CommentAddForm.vue
@@ -54,55 +54,57 @@
       </span>
     </form>
     <form
-      v-for="page in Array.from({ length: page_count }, (_, i) => i+1)"
+      v-for="page in Array.from({ length: page_count+1 }, (_, i) => i+1)"
       :key="`Page ${page}`"
       class="flex grow flex-col gap-4 max-w-[30rem]"
       @submit.prevent="() => page == page_count ? onSave() : curr_page+=1"
     >
       <div
-        v-if="!showCaptcha && curr_page == page"
+        v-if="curr_page == page"
         class="flex grow flex-col gap-4 max-w-[30rem]"
       >
-        <FormDynamicField
-          v-for="field in commentFieldsSortedByPage(page)"
-          :key="field.key"
-          v-model:fieldContent="(editedComment!.data as EntityOrCommentData)[field.key]"
-          :form-field="(field as FormField)"
-          @is-valid="isValid => commentFieldValid[field.key]= isValid"
-        />
-
-        <span
-          class="flex gap-1 justify-end"
-        >
-          <Button
-            label="Précédent"
-            outlined
-            @click="curr_page -= 1"
-          />
-          <Button
-            :label="page == page_count ? 'Sauvegarder' : 'Suivant'"
-            type="submit"
-            :outlined="page != page_count"
-            :loading="processingRequest"
-            :disabled="processingRequest || !isCommentPageValid(page)"
+        <template v-if="page < page_count + 1">
+          <FormDynamicField
+            v-for="field in commentFieldsSortedByPage(page)"
+            :key="field.key"
+            v-model:fieldContent="(editedComment!.data as EntityOrCommentData)[field.key]"
+            :form-field="(field as FormField)"
+            @is-valid="isValid => commentFieldValid[field.key]= isValid"
           />
-        </span>
-      </div>
-      <div
-        v-if="showCaptcha"
-        class="flex flex-col justify-center items-center "
-      >
-        <div class="text-center font-bold">
-          Une petite seconde, on doit vérifier que vous n'êtes pas un robot...
-        </div>
 
-        <div class="m-3">
-          <vue-hcaptcha
-            :sitekey="state.hCaptchaSiteKey"
-            @verify="hCaptchaVerify"
-            @expired="hCaptchaExpired"
-            @error="hCaptchaError"
-          />
+          <span
+            class="flex gap-1 justify-end"
+          >
+            <Button
+              label="Précédent"
+              outlined
+              @click="curr_page -= 1"
+            />
+            <Button
+              :label="page == page_count ? 'Sauvegarder' : 'Suivant'"
+              type="submit"
+              :outlined="page != page_count"
+              :loading="processingRequest"
+              :disabled="processingRequest || !isCommentPageValid(page)"
+            />
+          </span>
+        </template>
+        <div
+          v-else
+          class="flex flex-col justify-center items-center "
+        >
+          <div class="text-center font-bold">
+            Une petite seconde, on doit vérifier que vous n'êtes pas un robot...
+          </div>
+
+          <div class="m-3">
+            <vue-hcaptcha
+              :sitekey="state.hCaptchaSiteKey"
+              @verify="hCaptchaVerify"
+              @expired="hCaptchaExpired"
+              @error="hCaptchaError"
+            />
+          </div>
         </div>
       </div>
     </form>
@@ -155,6 +157,13 @@ watch(
   },
 )
 
+watch(
+  () => formVisible.value,
+  (__, _) => {
+    curr_page.value = Math.min(curr_page.value, page_count.value)
+  },
+)
+
 function commentFieldsSortedByPage(page: number) {
   return props.family.comment_form.fields
     .filter(field => field.form_page === page)
@@ -167,7 +176,6 @@ function isCommentPageValid(page: number) {
   }
   return commentFieldsSortedByPage(page).every(field => commentFieldValid.value[field.key])
 }
-const showCaptcha = ref(false)
 
 function hCaptchaVerify(token: string) {
   realOnSave(token)
@@ -192,8 +200,8 @@ function hCaptchaError() {
 }
 
 async function onSave() {
-  if (state.hasSafeMode) {
-    showCaptcha.value = true
+  if (state.hasSafeModeEnabled) {
+    curr_page.value += 1
   }
   else {
     await realOnSave(null)

diff --git a/frontend/components/viewer/EntityAddForm.vue b/frontend/components/viewer/EntityAddForm.vue
@@ -63,7 +63,7 @@
 
     <!-- Comment Form Pages -->
     <form
-      v-for="page in Array.from({ length: commentPageCount+1 }, (_, i) => i)"
+      v-for="page in Array.from({ length: commentPageCount+2 }, (_, i) => i)"
       :key="`CommentPage${page}`"
       class="flex grow flex-col gap-4 max-w-[30rem]"
       @submit.prevent="curr_page < (entityPageCount + commentPageCount + 1) ? curr_page += 1 : onSave()"
@@ -86,7 +86,7 @@
             text-length="editor"
           />
         </template>
-        <template v-else>
+        <template v-else-if="page < (commentPageCount + 1)">
           <FormDynamicField
             v-for="field in commentFieldsSortedByPage(page)"
             :key="field.key"
@@ -96,7 +96,10 @@
           />
         </template>
 
-        <span class="flex gap-1 justify-end">
+        <span
+          v-if="page < (commentPageCount + 1)"
+          class="flex gap-1 justify-end"
+        >
           <Button
             label="Précédent"
             outlined
@@ -110,22 +113,22 @@
             :disabled="processingRequest || !isCommentPageValid(page)"
           />
         </span>
-      </div>
-      <div
-        v-if="showCaptcha"
-        class="flex flex-col justify-center items-center "
-      >
-        <div class="text-center font-bold">
-          Une petite seconde, on doit vérifier que vous n'êtes pas un robot...
-        </div>
+        <div
+          v-if="page == (commentPageCount + 1)"
+          class="flex flex-col justify-center items-center "
+        >
+          <div class="text-center font-bold">
+            Une petite seconde, on doit vérifier que vous n'êtes pas un robot...
+          </div>
 
-        <div class="m-3">
-          <vue-hcaptcha
-            :sitekey="state.hCaptchaSiteKey"
-            @verify="hCaptchaVerify"
-            @expired="hCaptchaExpired"
-            @error="hCaptchaError"
-          />
+          <div class="m-3">
+            <vue-hcaptcha
+              :sitekey="state.hCaptchaSiteKey"
+              @verify="hCaptchaVerify"
+              @expired="hCaptchaExpired"
+              @error="hCaptchaError"
+            />
+          </div>
         </div>
       </div>
     </form>
@@ -194,6 +197,7 @@ const commentFieldValid = ref(
 )
 
 function reset_refs() {
+  console.log('hein pq fail le captcha switch la famille')
   editedEntity.value = {
     category_id: '',
     data: {},
@@ -225,8 +229,14 @@ watch(
   },
 )
 
+watch(
+  () => formVisible.value,
+  (__, _) => {
+    curr_page.value = Math.min(curr_page.value, entityPageCount.value + commentPageCount.value + 1)
+  },
+)
+
 const processingRequest = ref(false)
-const showCaptcha = ref(false)
 const toast = useToast()
 
 function entityFieldsSortedByPage(page: number) {
@@ -278,8 +288,8 @@ function hCaptchaError() {
 }
 
 async function onSave() {
-  if (state.hasSafeMode) {
-    showCaptcha.value = true
+  if (state.hasSafeModeEnabled) {
+    curr_page.value += 1
   }
   else {
     await realOnSave(null)

diff --git a/frontend/lib/viewer-state.ts b/frontend/lib/viewer-state.ts
@@ -112,8 +112,8 @@ export class AppState {
     return this.initConfig?.status === 'ok'
   }
 
-  get hasSafeMode() {
-    return !!this.initConfig?.safe_mode
+  get hasSafeModeEnabled() {
+    return !!this.initConfig?.safe_mode.enabled
   }
 
   get safeMode() {