Webhook UI Shows Green Instead of Red

[dhia-gharsallaoui]

Preflight checklist

• [X] I could not find a solution in the existing issues, docs, nor discussions.
• [X] I agree to follow this project's Code of Conduct.
• [X] I have read and am following this repository's Contribution Guidelines.
• [X] I have joined the Ory Community Slack.
• [x] I am signed up to the Ory Security Patch Newsletter.

Ory Network Project

No response

Describe your problem

Hello,

I am developing a blocking webhook to prevent users from changing their usernames. The webhook is functioning correctly, but there's an issue with the UI. Instead of showing the error state in red, it's displaying as green.

Below is the webhook response payload and a screenshot:

{
  "messages": [
    {
      "instance_ptr": "#/traits/username",
      "messages": [
        {
          "id": 1337,
          "text": "This field is read-only.",
          "type": "conflict"
        }
      ]
    }
  ]
}

Thank you !

Describe your ideal solution

The ideal solution would be for the UI to display the blocking webhook response in red, indicating an error or conflict. This would provide a clear visual cue to users that they cannot change their username, aligning with standard UX practices where red typically signifies an error or warning.

Workarounds or alternatives

An alternative could be to keep the UI display as green, indicating success, despite the conflict message. However, this approach is not ideal from a user experience perspective, as it could mislead users into thinking that their action was successful, which could lead to confusion.

Version

0.15.0

Additional Context

Kratos version: v1.2.0