sure/app/views/settings/securities/show.html.erb

<%= content_for :page_title, t(".page_title") %>

<%= settings_section title: t(".mfa_title"), subtitle: t(".mfa_description") do %>
  <div class="space-y-4">
    <div class="p-3 shadow-border-xs bg-container rounded-lg md:flex md:justify-between md:items-center">
      <div class="flex items-center gap-3">
        <div class="w-9 h-9 rounded-full bg-gray-25 flex justify-center items-center">
          <%= icon "shield-check" %>
        </div>

        <div class="text-sm space-y-1">
          <% if Current.user.otp_required? %>
            <p class="text-primary">Two-factor authentication is <span class="font-medium text-green-600">enabled</span></p>
            <p class="text-secondary">Your account is protected with an additional layer of security.</p>
          <% else %>
            <p class="text-primary">Two-factor authentication is <span class="font-medium text-red-600">disabled</span></p>
            <p class="text-secondary">Enable 2FA to add an extra layer of security to your account.</p>
          <% end %>
        </div>
      </div>

      <div class="mt-4 md:mt-0">
        <% if Current.user.otp_required? %>
          <%= render DS::Button.new(
            text: t(".disable_mfa"),
            variant: "secondary",
            href: disable_mfa_path,
            method: :delete,
            confirm: CustomConfirm.new(
              title: t(".disable_mfa_confirm"),
              body: t(".disable_mfa_confirm"),
              btn_text: t(".disable_mfa"),
              destructive: true
            )
          ) %>
        <% else %>
          <%= render DS::Link.new(
            text: t(".enable_mfa"),
            variant: "primary",
            href: new_mfa_path
          ) %>
        <% end %>
      </div>
    </div>
  </div>
<% end %>

<% if @oidc_identities.any? || AuthConfig.sso_providers.any? %>
  <%= settings_section title: t(".sso_title"), subtitle: t(".sso_subtitle") do %>
    <% if @oidc_identities.any? %>
      <div class="space-y-2">
        <% @oidc_identities.each do |identity| %>
          <div class="flex items-center justify-between bg-container p-4 shadow-border-xs rounded-lg">
            <div class="flex items-center gap-3">
              <div class="w-9 h-9 shrink-0 bg-surface rounded-full flex items-center justify-center">
                <% icon_name = identity.provider_config&.dig(:icon).presence || "key" %>
                <%= icon icon_name, class: "w-5 h-5 text-secondary" %>
              </div>
              <div>
                <p class="font-medium text-primary"><%= identity.provider_config&.dig(:label) || identity.provider.titleize %></p>
                <p class="text-sm text-secondary"><%= identity.info&.dig("email") || t(".sso_no_email") %></p>
                <p class="text-xs text-secondary">
                  <%= t(".sso_last_used") %>:
                  <%= identity.last_authenticated_at&.to_fs(:short) || t(".sso_never") %>
                </p>
              </div>
            </div>
            <% if @oidc_identities.count > 1 || Current.user.password_digest.present? %>
              <%= render DS::Button.new(
                text: t(".sso_disconnect"),
                variant: "outline",
                size: "sm",
                href: settings_sso_identity_path(identity),
                method: :delete,
                confirm: CustomConfirm.new(
                  title: t(".sso_confirm_title"),
                  body: t(".sso_confirm_body", provider: identity.provider_config&.dig(:label) || identity.provider.titleize),
                  btn_text: t(".sso_confirm_button"),
                  destructive: true
                )
              ) %>
            <% end %>
          </div>
        <% end %>
      </div>
      <% if @oidc_identities.count == 1 && Current.user.password_digest.blank? %>
        <div class="mt-4 p-3 bg-amber-50 border border-amber-200 rounded-lg">
          <div class="flex items-start gap-2">
            <%= icon "alert-triangle", class: "w-5 h-5 text-amber-600 shrink-0 mt-0.5" %>
            <p class="text-sm text-amber-800"><%= t(".sso_warning_message") %></p>
          </div>
        </div>
      <% end %>
    <% else %>
      <div class="text-center py-6">
        <%= icon "link", class: "w-12 h-12 mx-auto text-secondary mb-3" %>
        <p class="text-secondary"><%= t(".sso_no_identities") %></p>
        <p class="text-sm text-secondary mt-2"><%= t(".sso_connect_hint") %></p>
      </div>
    <% end %>
  <% end %>
<% end %>