refactor(webapp): captcha to component

[Rotzbua]

Refactor redundant captcha code to one component.

Reference

#752

[Rotzbua]

@peterthomassen can you test the captcha on components/ActivateAccountActionHandler.vue ?

[peterthomassen]

Display works fine. Submitting the captcha returns a 400 response with payload

{
    "captcha": {
        "id": [
            "This field is required."
        ],
        "solution": [
            "This field is required."
        ]
    }
}

DOM isn't updated after the 400 response (i.e. spinner moves indefinitely on submission button). Console says:

[Vue warn]: Error in callback for watcher "captcha_error": "TypeError: Cannot read properties of undefined (reading 'getCaptcha')"

found in

---> <ActivateAccountActionHandler> at /usr/src/app/src/components/ActivateAccountActionHandler.vue
       <VForm>
         <VCard>
           <ConfirmationPage> at /usr/src/app/src/views/ConfirmationPage.vue
             <VMain>
               <VApp>
                 <App> at /usr/src/app/src/App.vue
                   <Root>
warn @ chunk-TQVERUCE.js?v=08bf4eec:3674


TypeError: Cannot read properties of undefined (reading 'getCaptcha')
    at VueComponent.captcha_error (ActivateAccountActionHandler.vue:52:1)
    at invokeWithErrorHandling (chunk-TQVERUCE.js?v=08bf4eec:2396:26)
    at Watcher2.run (chunk-TQVERUCE.js?v=08bf4eec:2788:13)
    at flushSchedulerQueue (chunk-TQVERUCE.js?v=08bf4eec:3271:13)
    at Array.<anonymous> (chunk-TQVERUCE.js?v=08bf4eec:2481:12)
    at flushCallbacks (chunk-TQVERUCE.js?v=08bf4eec:2438:14)


[Vue warn]: Error in v-on handler (Promise/async): "TypeError: Spread syntax requires ...iterable[Symbol.iterator] to be a function"

found in

---> <VForm>
       <VCard>
         <ConfirmationPage> at /usr/src/app/src/views/ConfirmationPage.vue
           <VMain>
             <VApp>
               <App> at /usr/src/app/src/App.vue
                 <Root>

[Rotzbua]

Thanks for the feedback. Fixed.

The bug "spinner moves indefinitely on submission button" is in the current live version.

Seems the error handling is broken with the error message if the captcha is invalid.

Webapp error:

TypeError: errors[c] is not iterable
    confirm ConfirmationPage.vue:114
    submit ConfirmationPage.vue:88
    VueJS 4
    submit VForm.ts:140
    VueJS 33

Response:

{"captcha":{"non_field_errors":["CAPTCHA could not be validated. Please obtain a new one and try again."]}}

The error is in the live version and not fixed by this PR.

[peterthomassen]

Would you mind rebasing this? Then I'll take a another look.

[peterthomassen]

The bug "spinner moves indefinitely on submission button" is in the current live version.

Fair, tracked here: #931

[peterthomassen]

Almost ready! Just two strings have been confused.

[peterthomassen]

Those two strings are swapped.

[peterthomassen]

nice