-
Chad Woolley authored
Switch to new modern captcha modal which uses Pajamas modal and handles all CAPTCHA rendering on the client. This introduces new, more decoupled approach of using axios interceptors to handle captcha modal hooks. The backend now returns a 409 CONFLICT with a spam_log_id and captcha_site_key. On the frontend side we, the aforementioned interceptor detects this error, opens a modal asking the user to solve the captcha. If the captcha is solved successfully, it re-issues the request, attaching the captchaResponse. If it isn't solved, it will throw an `UnresolvedCaptchaError` instead. The application can choose to gracefully handle this error, or treat it as any other axios request error. For now the interceptors only support PATCH, POST and PUT. Future iterations might want to switch to using HTTP headers instead, which would mean we could extend the approach to the other HTTP methods as well. In this commit we are converting the issue update captcha to use this methodology. Before using an axios interceptor we needed to track the state of the captcha in the application and the logic looked something like this: ```mermaid sequenceDiagram participant U as User participant V as Vue Application participant G as GitLab API U->>V: Save issue V->>G: Request G--xV: Response with Error and Captcha Data V->>U: Please solve Captcha U->>V: Captcha Solution V->>G: Resend Request with solved Captcha Data G-->>V: Response with Success ``` Now we are doing this: ```mermaid sequenceDiagram participant U as User participant V as Vue Application participant A as Axios Interceptor participant G as GitLab API U->>V: Save issue V->>G: Request G--xA: Response with Error and Captcha Data A->>U: Please solve Captcha U->>A: Captcha Solution A->>G: Resend Request with solved Captcha Data G-->>A: Response with Success A-->>V: Response with Success ``` This way we have decoupled the Captcha handling from our Vue Application. For all the Vue Application knows, it is just a request that takes a bit longer than usual. This has the benefit that adding captcha support to new Vue endpoints is as easy as: ```js registerCaptchaModalInterceptor(axios); ``` Co-authored-by: Lukas Eipert <leipert@gitlab.com>
24b8ba7b