Skip to content
代码片段 群组 项目
提交 24b8ba7b 编辑于 作者: Chad Woolley's avatar Chad Woolley 提交者: Lukas Eipert
浏览文件

Add support for new CAPTCHA modal to issue updates


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>
上级 c19699f1
No related branches found
No related tags found
无相关合并请求
显示
359 个添加89 个删除
加载中
0% 加载中 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册