From 5980dc6ba51136d64dddedfe87f8fa4289ecbe23 Mon Sep 17 00:00:00 2001
From: Rotzbua <Rotzbua@users.noreply.github.com>
Date: Mon, 22 Jul 2024 14:27:52 +0200
Subject: [PATCH] feat(webapp): create generic captcha field

---
 .../ActivateAccountActionHandler.vue          | 107 ++-----------
 .../src/components/Field/GenericCaptcha.vue   | 149 ++++++++++++++++++
 www/webapp/src/views/ResetPassword.vue        |  93 ++---------
 www/webapp/src/views/SignUp.vue               |  93 ++---------
 4 files changed, 194 insertions(+), 248 deletions(-)
 create mode 100644 www/webapp/src/components/Field/GenericCaptcha.vue

diff --git a/www/webapp/src/components/ActivateAccountActionHandler.vue b/www/webapp/src/components/ActivateAccountActionHandler.vue
index 34d2b7a48..fc483c0f7 100644
--- a/www/webapp/src/components/ActivateAccountActionHandler.vue
+++ b/www/webapp/src/components/ActivateAccountActionHandler.vue
@@ -1,53 +1,11 @@
 <template>
   <div>
     <div class="text-center" v-if="captcha_required && !success">
-      <v-container class="pa-0">
-        <v-row dense align="center" class="text-center">
-          <v-col cols="12" sm="">
-            <v-text-field
-                    v-model="payload.captcha.solution"
-                    label="Type CAPTCHA text here"
-                    :prepend-icon="mdiAccountCheck"
-                    outlined
-                    required
-                    :disabled="working"
-                    :rules="captcha_rules"
-                    :error-messages="captcha_errors"
-                    @change="captcha_errors=[]"
-                    @keypress="captcha_errors=[]"
-                    class="uppercase"
-                    ref="captchaField"
-                    tabindex="3"
-                    :hint="captcha_kind === 'image' ? 'Can\'t see? Hear an audio CAPTCHA instead.' : 'Trouble hearing? Switch to an image CAPTCHA.'"
-            />
-          </v-col>
-          <v-col cols="12" sm="auto">
-            <v-progress-circular
-                  indeterminate
-                  v-if="captchaWorking"
-            ></v-progress-circular>
-            <img
-                  v-if="captcha && !captchaWorking && captcha_kind === 'image'"
-                  :src="'data:image/png;base64,'+captcha.challenge"
-                  alt="Passwords can also be reset by sending an email to our support."
-            />
-            <audio controls
-                  v-if="captcha && !captchaWorking && captcha_kind === 'audio'"
-            >
-              <source :src="'data:audio/wav;base64,'+captcha.challenge" type="audio/wav"/>
-            </audio>
-            <br/>
-            <v-btn-toggle>
-              <v-btn text outlined @click="getCaptcha(true)" :disabled="captchaWorking"><v-icon>{{ mdiRefresh }}</v-icon></v-btn>
-            </v-btn-toggle>
-            &nbsp;
-            <v-btn-toggle v-model="captcha_kind">
-              <v-btn text outlined value="image" aria-label="Switch to Image CAPTCHA" :disabled="captchaWorking"><v-icon>{{ mdiEye }}</v-icon></v-btn>
-              <v-btn text outlined value="audio" aria-label="Switch to Audio CAPTCHA" :disabled="captchaWorking"><v-icon>{{ mdiEarHearing }}</v-icon></v-btn>
-            </v-btn-toggle>
-          </v-col>
-        </v-row>
-      </v-container>
+        <generic-captcha
+            @update="(id, solution) => {setCaptchaPayload(id, solution)}"
+            tabindex="3"
+            ref="captchaField"
+        />
         <v-btn
                 depressed
                 color="primary"
@@ -64,66 +22,35 @@
 </template>
 
 <script>
-  import axios from 'axios';
   import GenericActionHandler from "./GenericActionHandler.vue"
-  import {mdiAccountCheck, mdiEarHearing, mdiEye, mdiRefresh} from "@mdi/js";
-
-  const HTTP = axios.create({
-    baseURL: '/api/v1/',
-    headers: {},
-  });
+  import GenericCaptcha from "@/components/Field/GenericCaptcha.vue";
 
   export default {
     name: 'ActivateAccountActionHandler',
+    components: {GenericCaptcha},
     extends: GenericActionHandler,
     data: () => ({
       auto_submit: true,
-      captchaWorking: false,
       LOCAL_PUBLIC_SUFFIXES: import.meta.env.VITE_APP_LOCAL_PUBLIC_SUFFIXES.split(' '),
-      captcha: null,
-      captcha_required: false,
-
-      mdiAccountCheck: mdiAccountCheck,
-      mdiEarHearing: mdiEarHearing,
-      mdiEye: mdiEye,
-      mdiRefresh: mdiRefresh,
 
       /* captcha field */
-      captchaSolution: '',
-      captcha_rules: [v => !!v || 'Please enter the text displayed in the picture so we are (somewhat) convinced you are human'],
-      captcha_errors: [],
-      captcha_kind: 'image',
+      captcha_required: false,
     }),
-    computed: {
-      captcha_error: function () {
-        return this.error && this.response.data.captcha !== undefined
-      }
-    },
     methods: {
-      async getCaptcha() {
-        this.captchaWorking = true;
-        this.captchaSolution = "";
-        try {
-          this.captcha = (await HTTP.post('captcha/', {kind: this.captcha_kind})).data;
-          this.payload.captcha.id = this.captcha.id;
-          this.$refs.captchaField.focus()
-        } finally {
-          this.captchaWorking = false;
-        }
+      /* captcha field */
+      setCaptchaPayload(id, solution) {
+        this.payload.captcha = {
+          id: id,
+          solution: solution,
+        };
       },
     },
     watch: {
-      captcha_error(value) {
-        if(value) {
+      error(value) {
+        if(value && this.response.data.captcha !== undefined) {
+          // Captcha is required because not verified during the initial registration.
           this.$emit('clearerrors');
           this.captcha_required = true;
-          this.payload.captcha = {};
-          this.getCaptcha();
-        }
-      },
-      captcha_kind: function (oldKind, newKind) {
-        if (oldKind !== newKind) {
-          this.getCaptcha();
         }
       },
       success(value) {
diff --git a/www/webapp/src/components/Field/GenericCaptcha.vue b/www/webapp/src/components/Field/GenericCaptcha.vue
new file mode 100644
index 000000000..dd0483b6a
--- /dev/null
+++ b/www/webapp/src/components/Field/GenericCaptcha.vue
@@ -0,0 +1,149 @@
+<template>
+  <v-row dense align="center" class="text-center">
+    <v-col cols="12" sm="">
+      <v-text-field
+          v-model="inputSolution"
+          :label="l.inputSolution"
+          :hint="kind === 'image' ? l.hintProblemWithImage : l.hintProblemWithAudio"
+          :prepend-icon="mdiAccountCheck"
+          :rules="rules"
+          :error-messages="errors"
+          :tabindex="tabindex"
+          @input="emitChange()"
+          @change="errors=[]"
+          @keydown="errors=[]"
+          outlined
+          required
+          class="uppercase"
+          ref="captchaField"
+      ></v-text-field>
+    </v-col>
+    <v-col cols="12" sm="auto">
+      <v-progress-circular
+          v-if="working"
+          indeterminate
+      ></v-progress-circular>
+      <img
+          v-if="captcha
+          && !working
+          && kind === 'image'"
+          :src="'data:'+mimeImage+';base64,'+captcha.challenge"
+          :alt="l.altImage"
+      >
+      <audio controls
+             v-if="captcha
+             && !working
+             && kind === 'audio'"
+      >
+        <source :src="'data:'+mimeAudio+';base64,'+captcha.challenge" :type="mimeAudio">
+      </audio>
+      <br>
+      <v-btn-toggle>
+        <v-btn text outlined @click="getCaptcha(true)" :aria-label="l.newCaptcha" :disabled="working">
+          <v-icon>{{ mdiRefresh }}</v-icon>
+        </v-btn>
+      </v-btn-toggle>
+      &nbsp;
+      <v-btn-toggle v-model="kind">
+        <v-btn text outlined value="image" :aria-label="l.switchImage" :disabled="working">
+          <v-icon>{{ mdiEye }}</v-icon>
+        </v-btn>
+        <v-btn text outlined value="audio" :aria-label="l.switchAudio" :disabled="working">
+          <v-icon>{{ mdiEarHearing }}</v-icon>
+        </v-btn>
+      </v-btn-toggle>
+    </v-col>
+  </v-row>
+</template>
+
+<script>
+import {mdiAccountCheck, mdiEarHearing, mdiEye, mdiRefresh} from '@mdi/js';
+import axios from 'axios';
+
+const HTTP = axios.create({
+  baseURL: '/api/v1/',
+  headers: {},
+});
+
+export default {
+  name: 'GenericCaptcha',
+  captcha_kind: '',
+  props: {
+    tabindex: {
+      type: String,
+      required: true,
+    },
+  },
+  data: () => ({
+    mdiAccountCheck,
+    mdiEarHearing,
+    mdiEye,
+    mdiRefresh,
+    captcha: null,
+    working: true,
+    inputSolution: '',
+    rules: [v => !!v || 'Please enter the CAPTCHA text so we are (somewhat) convinced you are human.'],
+    errors: [],
+    kind: 'image',
+    mimeAudio: 'audio/wav',
+    mimeImage: 'image/png',
+    l: {
+      altImage: 'Sign up / password reset is also possible by sending an email to our support.',
+      hintProblemWithAudio: 'Trouble hearing? Switch to an image CAPTCHA.',
+      hintProblemWithImage: 'Can\'t see? Hear an audio CAPTCHA instead.',
+      inputSolution: 'Type CAPTCHA text here',
+      newCaptcha: 'Get new CAPTCHA',
+      switchAudio: 'Switch to Audio CAPTCHA',
+      switchImage: 'Switch to Image CAPTCHA',
+    },
+  }),
+  methods: {
+    async getCaptcha(focus = false) {
+      this.working = true;
+      this.inputSolution = '';
+      await HTTP
+          .post('captcha/', {kind: this.kind})
+          .then((res) => {
+            this.captcha = res.data;
+          })
+          .catch((e) => {
+            if(e.response) {
+              this.errors = ['Captcha request: Server error(' + e.response.status.toString() + '): ' + e.response.data.detail];
+            } else if(e.request) {
+              this.errors = ['Captcha request: Could not request from server.'];
+            } else {
+              this.errors = ['Captcha request: Unknown error.'];
+            }
+          })
+      ;
+      if(focus) {
+        this.$refs.captchaField.focus();
+      }
+      this.working = false;
+      this.emitChange();
+    },
+    addError(values) {
+      this.errors.push(values);
+    },
+    captchaID() {
+      return this.captcha.id;
+    },
+    captchaSolution() {
+      return this.inputSolution.toUpperCase();
+    },
+    emitChange() {
+      this.$emit('update', this.captchaID(), this.captchaSolution());
+    }
+  },
+  async mounted() {
+    await this.getCaptcha();
+  },
+  watch: {
+    kind(oldKind, newKind) {
+      if(oldKind !== newKind) {
+        this.getCaptcha(true);
+      }
+    },
+  },
+};
+</script>
diff --git a/www/webapp/src/views/ResetPassword.vue b/www/webapp/src/views/ResetPassword.vue
index cd0f8930d..4cf6c22c4 100644
--- a/www/webapp/src/views/ResetPassword.vue
+++ b/www/webapp/src/views/ResetPassword.vue
@@ -52,53 +52,11 @@
                                     ref="emailField"
                                     tabindex="1"
                             />
-
-                              <v-container class="pa-0">
-                                <v-row dense align="center" class="text-center">
-                                  <v-col cols="12" sm="">
-                                    <v-text-field
-                                            v-model="captchaSolution"
-                                            label="Type CAPTCHA text here"
-                                            :prepend-icon="mdiAccountCheck"
-                                            outlined
-                                            required
-                                            :rules="captcha_rules"
-                                            :error-messages="captcha_errors"
-                                            @change="captcha_errors=[]"
-                                            @keypress="captcha_errors=[]"
-                                            class="uppercase"
-                                            ref="captchaField"
-                                            tabindex="3"
-                                            :hint="captcha_kind === 'image' ? 'Can\'t see? Hear an audio CAPTCHA instead.' : 'Trouble hearing? Switch to an image CAPTCHA.'"
-                                    />
-                                  </v-col>
-                                  <v-col cols="12" sm="auto">
-                                    <v-progress-circular
-                                          indeterminate
-                                          v-if="captchaWorking"
-                                    ></v-progress-circular>
-                                    <img
-                                          v-if="captcha && !captchaWorking && captcha_kind === 'image'"
-                                          :src="'data:image/png;base64,'+captcha.challenge"
-                                          alt="Passwords can also be reset by sending an email to our support."
-                                    />
-                                    <audio controls
-                                          v-if="captcha && !captchaWorking && captcha_kind === 'audio'"
-                                    >
-                                      <source :src="'data:audio/wav;base64,'+captcha.challenge" type="audio/wav"/>
-                                    </audio>
-                                    <br/>
-                                    <v-btn-toggle>
-                                      <v-btn text outlined @click="getCaptcha(true)" :disabled="captchaWorking"><v-icon>{{ mdiRefresh }}</v-icon></v-btn>
-                                    </v-btn-toggle>
-                                    &nbsp;
-                                    <v-btn-toggle v-model="captcha_kind">
-                                      <v-btn text outlined value="image" aria-label="Switch to Image CAPTCHA" :disabled="captchaWorking"><v-icon>{{ mdiEye }}</v-icon></v-btn>
-                                      <v-btn text outlined value="audio" aria-label="Switch to Audio CAPTCHA" :disabled="captchaWorking"><v-icon>{{ mdiEarHearing }}</v-icon></v-btn>
-                                    </v-btn-toggle>
-                                  </v-col>
-                                </v-row>
-                              </v-container>
+                            <generic-captcha
+                                @update="(id, solution) => {captchaID=id; captchaSolution=solution}"
+                                tabindex="3"
+                                ref="captchaField"
+                            />
                         </v-card-text>
                         <v-card-actions class="justify-center">
                             <v-btn
@@ -122,7 +80,8 @@
   import {email_pattern} from '@/validation';
   import {digestError} from '@/utils';
   import ErrorAlert from '@/components/ErrorAlert.vue';
-  import {mdiAccountCheck, mdiEarHearing, mdiEmail, mdiEye, mdiRefresh} from "@mdi/js";
+  import {mdiEmail} from "@mdi/js";
+  import GenericCaptcha from "@/components/Field/GenericCaptcha.vue";
 
   const HTTP = axios.create({
     baseURL: '/api/v1/',
@@ -132,21 +91,16 @@
   export default {
     name: 'ResetPassword',
     components: {
+      GenericCaptcha,
       ErrorAlert,
     },
     data: () => ({
       valid: false,
       working: false,
       done: false,
-      captchaWorking: true,
       errors: [],
-      captcha: null,
 
-      mdiAccountCheck: mdiAccountCheck,
-      mdiEarHearing: mdiEarHearing,
       mdiEmail: mdiEmail,
-      mdiEye: mdiEye,
-      mdiRefresh: mdiRefresh,
 
       /* email field */
       email: '',
@@ -154,31 +108,17 @@
       email_errors: [],
 
       /* captcha field */
+      captchaID: null,
       captchaSolution: '',
-      captcha_rules: [v => !!v || 'Please enter the text displayed in the picture so we are (somewhat) convinced you are human'],
       captcha_errors: [],
-      captcha_kind: 'image',
     }),
     async mounted() {
       if ('email' in this.$route.params && this.$route.params.email !== undefined) {
         this.email = this.$route.params.email;
       }
-      this.getCaptcha();
       this.initialFocus();
     },
     methods: {
-      async getCaptcha(focus = false) {
-        this.captchaWorking = true;
-        this.captchaSolution = "";
-        try {
-          this.captcha = (await HTTP.post('captcha/', {kind: this.captcha_kind})).data;
-          if(focus) {
-            this.$refs.captchaField.focus()
-          }
-        } finally {
-          this.captchaWorking = false;
-        }
-      },
       async initialFocus() {
         return this.$refs.emailField.focus();
       },
@@ -192,18 +132,18 @@
           await HTTP.post('auth/account/reset-password/', {
             email: this.email,
             captcha: {
-              id: this.captcha.id,
+              id: this.captchaID,
               solution: this.captchaSolution,
             },
           });
           this.done = true;
         } catch (ex) {
-          this.getCaptcha(true);
+          await this.$refs.captchaField.getCaptcha(true);
           let errors = await digestError(ex);
           for (const c in errors) {
             if (c === 'captcha') {
-              this.captcha_errors.push(...(errors[c]['non_field_errors'] ?? []));
-              this.captcha_errors.push(...(errors[c]['solution'] ?? []));
+              this.$refs.captchaField.addError(...(errors[c]['non_field_errors'] ?? []));
+              this.$refs.captchaField.addError(...(errors[c]['solution'] ?? []));
             } else {
               this.errors.push(...errors[c]);
             }
@@ -212,13 +152,6 @@
         this.working = false;
       },
     },
-    watch: {
-      captcha_kind: function (oldKind, newKind) {
-        if (oldKind !== newKind) {
-          this.getCaptcha();
-        }
-      },
-    },
   };
 </script>
 
diff --git a/www/webapp/src/views/SignUp.vue b/www/webapp/src/views/SignUp.vue
index c3b26e559..ffd91cb5d 100644
--- a/www/webapp/src/views/SignUp.vue
+++ b/www/webapp/src/views/SignUp.vue
@@ -82,50 +82,11 @@
               />
 
               <v-container class="pa-0">
-                <v-row dense align="center" class="text-center">
-                  <v-col cols="8" sm="">
-                    <v-text-field
-                        v-model="captchaSolution"
-                        label="Type CAPTCHA text here"
-                        :prepend-icon="mdiAccountCheck"
-                        outlined
-                        required
-                        :rules="captcha_rules"
-                        :error-messages="captcha_errors"
-                        @change="captcha_errors=[]"
-                        @keypress="captcha_errors=[]"
-                        class="uppercase"
-                        ref="captchaField"
-                        tabindex="4"
-                        :hint="captcha_kind === 'image' ? 'Can\'t see? Hear an audio CAPTCHA instead.' : 'Trouble hearing? Switch to an image CAPTCHA.'"
-                    />
-                  </v-col>
-                  <v-col cols="12" sm="auto">
-                    <v-progress-circular
-                          indeterminate
-                          v-if="captchaWorking"
-                    ></v-progress-circular>
-                    <img
-                          v-if="captcha && !captchaWorking && captcha_kind === 'image'"
-                          :src="'data:image/png;base64,'+captcha.challenge"
-                          alt="Sign up is also possible by sending an email to our support."
-                    />
-                    <audio controls
-                          v-if="captcha && !captchaWorking && captcha_kind === 'audio'"
-                    >
-                      <source :src="'data:audio/wav;base64,'+captcha.challenge" type="audio/wav"/>
-                    </audio>
-                    <br/>
-                    <v-btn-toggle>
-                      <v-btn text outlined @click="getCaptcha(true)" :disabled="captchaWorking"><v-icon>{{ mdiRefresh }}</v-icon></v-btn>
-                    </v-btn-toggle>
-                    &nbsp;
-                    <v-btn-toggle v-model="captcha_kind">
-                      <v-btn text outlined value="image" aria-label="Switch to Image CAPTCHA" :disabled="captchaWorking"><v-icon>{{ mdiEye }}</v-icon></v-btn>
-                      <v-btn text outlined value="audio" aria-label="Switch to Audio CAPTCHA" :disabled="captchaWorking"><v-icon>{{ mdiEarHearing }}</v-icon></v-btn>
-                    </v-btn-toggle>
-                  </v-col>
-                </v-row>
+                <generic-captcha
+                    @update="(id, solution) => {captchaID=id; captchaSolution=solution}"
+                    tabindex="4"
+                    ref="captchaField"
+                />
               </v-container>
 
               <v-layout class="justify-center">
@@ -182,7 +143,8 @@
   import {domain_pattern, email_pattern} from '@/validation';
   import {digestError} from '@/utils';
   import ErrorAlert from "@/components/ErrorAlert.vue";
-  import {mdiAccountCheck, mdiDns, mdiEarHearing, mdiEmail, mdiEye, mdiRefresh} from "@mdi/js";
+  import {mdiDns, mdiEmail} from "@mdi/js";
+  import GenericCaptcha from "@/components/Field/GenericCaptcha.vue";
 
   const LOCAL_PUBLIC_SUFFIXES = import.meta.env.VITE_APP_LOCAL_PUBLIC_SUFFIXES.split(' ');
 
@@ -195,22 +157,17 @@
   export default {
     name: 'SignUp',
     components: {
+      GenericCaptcha,
       ErrorAlert,
     },
     data: () => ({
       valid: false,
       working: false,
-      captchaWorking: true,
       errors: [],
-      captcha: null,
       LOCAL_PUBLIC_SUFFIXES: LOCAL_PUBLIC_SUFFIXES,
 
-      mdiAccountCheck: mdiAccountCheck,
       mdiDns: mdiDns,
-      mdiEarHearing: mdiEarHearing,
       mdiEmail: mdiEmail,
-      mdiEye: mdiEye,
-      mdiRefresh: mdiRefresh,
 
       /* email field */
       email: '',
@@ -218,10 +175,8 @@
       email_errors: [],
 
       /* captcha field */
+      captchaID: null,
       captchaSolution: '',
-      captcha_rules: [v => !!v || 'Please enter the text displayed in the picture so we are (somewhat) convinced you are human'],
-      captcha_errors: [],
-      captcha_kind: 'image',
 
       /* outreach preference */
       outreach_preference: true,
@@ -241,25 +196,12 @@
       if ('email' in this.$route.params && this.$route.params.email !== undefined) {
         this.email = this.$route.params.email;
       }
-      this.getCaptcha();
-      this.initialFocus();
+      await this.initialFocus();
     },
     created() {
       this.domainType = this.$route.query.domainType || 'custom';
     },
     methods: {
-      async getCaptcha(focus = false) {
-        this.captchaWorking = true;
-        this.captchaSolution = "";
-        try {
-          this.captcha = (await HTTP.post('captcha/', {kind: this.captcha_kind})).data;
-          if(focus) {
-            this.$refs.captchaField.focus()
-          }
-        } finally {
-          this.captchaWorking = false;
-        }
-      },
       async initialFocus() {
         if(this.$route.query.domainType === undefined) {
           return;
@@ -281,22 +223,22 @@
             email: this.email,
             password: null,
             captcha: {
-              id: this.captcha.id,
-              solution: this.captchaSolution.toUpperCase(),
+              id: this.captchaID,
+              solution: this.captchaSolution,
             },
             domain: domain,
             outreach_preference: this.outreach_preference,
           });
           this.$router.push({name: 'welcome', params: domain !== '' ? {domain: domain} : {}});
         } catch (ex) {
-          this.getCaptcha(true);
+          await this.$refs.captchaField.getCaptcha(true);
           let errors = await digestError(ex);
           for (const c in errors) {
             if (c === undefined) {
               this.errors.push(...errors[c]);
             } else if (c === 'captcha') {
-              this.captcha_errors.push(...(errors[c]['non_field_errors'] ?? []));
-              this.captcha_errors.push(...(errors[c]['solution'] ?? []));
+              this.$refs.captchaField.addError(...(errors[c]['non_field_errors'] ?? []));
+              this.$refs.captchaField.addError(...(errors[c]['solution'] ?? []));
             } else if (c === 'domain') {
               this.domain_errors.push(...errors[c]);
             } else if (c === 'email') {
@@ -318,11 +260,6 @@
           this.$refs.domainField.validate();
         })
       },
-      captcha_kind: function (oldKind, newKind) {
-        if (oldKind !== newKind) {
-          this.getCaptcha();
-        }
-      },
     },
   };
 </script>