[Bug]: Admin UI - Manage User - Email Verified Icon Not Showing

[Aaron-Ritter]

What happened?

In Firefox and Safari the email verified icon is not showing up in the admin UI when managing a user.

When hovering over the empty icon space, it shows that the user’s email is actually verified. And this is valid confirming it with the source of the user. In addition, Chrome is displaying the email verified icon.

{
  "active" : true,
  "connectorId" : "e3306678-a53a-4964-9040-1c96f36dda72",
  "data" : { },
  "email" : "gilfoyle@example.com",
  "encryptionScheme" : "salted-pbkdf2-hmac-sha256",
  "factor" : 24000,
  "id" : "2b868d53-d7f5-41c5-8a89-dcd294a93e94",
  "identities" : [ {
    "insertInstant" : 1770213533943,
    "lastUpdateInstant" : 1770213533943,
    "primary" : true,
    "type" : "email",
    "value" : "gilfoyle@example.com",
    "verified" : true,
    "verifiedInstant" : 1770213530776,
    "verifiedReason" : "Completed"
  } ],
  "insertInstant" : 1770213533943,
  "lastLoginInstant" : 1770213533954,
  "lastUpdateInstant" : 1770213533943,
  "memberships" : [ ],
  "passwordChangeRequired" : false,
  "passwordLastUpdateInstant" : 1770213533948,
  "preferredLanguages" : [ ],
  "registrations" : [ {
    "applicationId" : "e9fdb985-9173-4e01-9d73-ac2d60d1dc8e",
    "data" : { },
    "id" : "4341e3a4-28e4-45a1-bd06-ec135d58770e",
    "insertInstant" : 1770213533954,
    "lastLoginInstant" : 1770213533954,
    "lastUpdateInstant" : 1770213533954,
    "preferredLanguages" : [ ],
    "roles" : [ ],
    "tokens" : { },
    "usernameStatus" : "ACTIVE",
    "verified" : true,
    "verifiedInstant" : 1770213533954
  } ],
  "tenantId" : "d7d09513-a3f5-401c-9685-34ab6c552453",
  "twoFactor" : {
    "methods" : [ ],
    "recoveryCodes" : [ ]
  },
  "usernameStatus" : "ACTIVE",
  "verified" : true,
  "verifiedInstant" : 1770213530776
}

Firefox and Safari do not support loading external SVGs with (xlink:)href without specifying an id.
See “Reference an external document’s root element by omitting the fragment.” in Browser compatibility:
https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/use#browser_compatibility

It is correct in other places like the sidebar icons:

<use xlink:href="/assets/icons/sidebar-navigation.svg#users"></use>

Which displays the element with the id “users” from the /assets/icons/sidebar-navigation.svg  file.

While this wouldn’t work in this case either:

<use xlink:href="/assets/icons/sidebar-navigation.svg"></use>

Even the root SVG element must be referenced with an id (in Safari and Firefox)

To find all svg missing the id you can run the following command in your browser console:

[...document.querySelectorAll('use')].map(s => s.getAttribute('xlink:href') ?? s.getAttribute('href')).filter(s => s.endsWith('.svg'))

Which should you provide the following result while you are staying in the manage user screen:

Version

1.62.1

Affects Versions

No response

Alternatives / Workarounds

No response