• Chad Woolley's avatar
    Add support for new CAPTCHA modal to issue updates · 24b8ba7b
    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: default avatarLukas Eipert <leipert@gitlab.com>
    24b8ba7b
captcha_modal_axios_interceptor.js 1.17 KB