feat: add ui element for secrets in superadmin (#11000)

- add secret type for installation_config in the super admin console
- hide tokens by default on the UI

Before
----
<img width="891" alt="image"
src="https://github.com/user-attachments/assets/1c51b3bb-47f9-49bf-bb0d-75b84d8d2eeb"
/>


After
----
<img width="958" alt="image"
src="https://github.com/user-attachments/assets/b7eca1ff-1cc0-4259-9977-6109eb38ad64"
/>

---------

Co-authored-by: Shivam Mishra <scm.mymail@gmail.com>

app/assets/stylesheets/administrate/components/_buttons.scss

@@ -1,8 +1,8 @@
-button,
+button:not(.reset-base),
-input[type="button"],
+input[type='button']:not(.reset-base),
-input[type="reset"],
+input[type='reset']:not(.reset-base),
-input[type="submit"],
+input[type='submit']:not(.reset-base),
-.button {
+.button:not(.reset-base) {
   appearance: none;
   background-color: $color-woot;
   border: 0;

app/views/super_admin/app_configs/show.html.erb

@@ -1,11 +1,19 @@
 <% content_for(:title) do %>
   Configure Settings - <%= @config.titleize %>
 <% end %>
+
 <header class="main-content__header" role="banner">
   <h1 class="main-content__page-title" id="page-title">
     <%= content_for(:title) %>
   </h1>
 </header>
+
+<style>
+.eye-icon.eye-hide path {
+  d: path('M3 3l18 18M10.5 10.677a2 2 0 002.823 2.823M7.362 7.561C5.68 8.74 4.279 10.42 3 12c1.889 2.991 5.282 6 9 6 1.55 0 3.043-.523 4.395-1.35M12 6c4.008 0 6.701 3.009 9 6a15.66 15.66 0 01-1.078 1.5');
+}
+</style>
+
 <section class="main-content__body">
   <%= form_with url: super_admin_app_config_url(config: @config) , method: :post do |form| %>
     <% @allowed_configs.each do |key| %>
@@ -27,6 +35,24 @@
                 wrap: 'off',
                 class: "mt-2 border font-mono text-xs border-slate-100 p-1 rounded-md overflow-scroll"
             %>
+          <% elsif @installation_configs[key]&.dig('type') == 'secret' %>
+            <div class="relative">
+              <%= form.password_field "app_config[#{key}]",
+                  id: "app_config_#{key}",
+                  value: @app_config[key],
+                  class: "mt-2 border border-slate-100 p-1.5 pr-8 rounded-md w-full"
+              %>
+              <button
+                type="button"
+                class="absolute reset-base !bg-white top-1/2 !outline-0 !text-n-slate-11 -translate-y-1/2 right-2 p-1 hover:!bg-n-slate-5 rounded-sm toggle-password"
+                data-target="app_config_<%= key %>"
+              >
+                <svg class="eye-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+                  <path d="M12 5C5.63636 5 2 12 2 12C2 12 5.63636 19 12 19C18.3636 19 22 12 22 12C22 12 18.3636 5 12 5Z"/>
+                  <path d="M12 15C13.6569 15 15 13.6569 15 12C15 10.3431 13.6569 9 12 9C10.3431 9 9 10.3431 9 12C9 13.6569 10.3431 15 12 15Z"/>
+                </svg>
+              </button>
+            </div>
           <% else %>
             <%= form.text_field "app_config[#{key}]", value: @app_config[key] %>
           <% end %>
@@ -43,3 +69,26 @@
     </div>
   <% end %>
 </section>
+
+<% content_for :javascript do %>
+  <script>
+  document.addEventListener('DOMContentLoaded', () => {
+    document.querySelectorAll('.toggle-password').forEach(button => {
+      button.addEventListener('click', () => {
+        const targetId = button.dataset.target;
+        const input = document.getElementById(targetId);
+        const type = input.type === 'password' ? 'text' : 'password';
+        input.type = type;
+
+        // Toggle icon
+        const svg = button.querySelector('.eye-icon');
+        if (type === 'password') {
+          svg.classList.remove('eye-hide')
+        } else {
+          svg.classList.add('eye-hide')
+        }
+      });
+    });
+  });
+  </script>
+<% end %>

config/installation_config.yml

@@ -103,13 +103,16 @@
   display_title: 'Facebook Verify Token'
   description: 'The verify token used for Facebook Messenger Webhook'
   locked: false
+  type: secret
 - name: FB_APP_SECRET
   display_title: 'Facebook App Secret'
   locked: false
+  type: secret
 - name: IG_VERIFY_TOKEN
   display_title: 'Instagram Verify Token'
   description: 'The verify token used for Instagram Webhook'
   locked: false
+  type: secret
 - name: FACEBOOK_API_VERSION
   display_title: 'Facebook API Version'
   description: 'Configure this if you want to use a different Facebook API version. Make sure its prefixed with `v`'
@@ -131,6 +134,7 @@
 - name: AZURE_APP_SECRET
   display_title: 'Azure App Secret'
   locked: false
+  type: secret
 # End of Microsoft Email Channel Config
 
 # MARK: Captain Config
@@ -138,6 +142,7 @@
   display_title: 'OpenAI API Key'
   description: 'The API key used to authenticate requests to OpenAI services for Captain AI.'
   locked: false
+  type: secret
 - name: CAPTAIN_OPEN_AI_MODEL
   display_title: 'OpenAI Model'
   description: 'The OpenAI model configured for use in Captain AI. Default: gpt-4o-mini'
@@ -146,6 +151,7 @@
   display_title: 'FireCrawl API Key (optional)'
   description: 'The FireCrawl API key for the Captain AI service'
   locked: false
+  type: secret
 - name: CAPTAIN_CLOUD_PLAN_LIMITS
   display_title: 'Captain Cloud Plan Limits'
   description: 'The limits for the Captain AI service for different plans'
@@ -160,11 +166,13 @@
   display_title: 'Inbox Token'
   description: 'The Chatwoot Inbox Token for Contact Support in Cloud'
   locked: false
+  type: secret
 - name: CHATWOOT_INBOX_HMAC_KEY
   value:
   display_title: 'Inbox HMAC Key'
   description: 'The Chatwoot Inbox HMAC Key for Contact Support in Cloud'
   locked: false
+  type: secret
 - name: CHATWOOT_CLOUD_PLANS
   display_title: 'Cloud Plans'
   value:
@@ -180,10 +188,12 @@
   value:
   display_title: 'Analytics Token'
   description: 'The June.so analytics token for Chatwoot cloud'
+  type: secret
 - name: CLEARBIT_API_KEY
   value:
   display_title: 'Clearbit API Key'
   description: 'This API key is used for onboarding the users, to pre-fill account data.'
+  type: secret
 - name: DASHBOARD_SCRIPTS
   value:
   display_title: 'Dashboard Scripts'
@@ -206,12 +216,14 @@
 - name: CHATWOOT_SUPPORT_WEBSITE_TOKEN
   value:
   description: 'The Chatwoot website token, used to identify the Chatwoot inbox and display the "Contact Support" option on the billing page'
+  type: secret
 - name: CHATWOOT_SUPPORT_SCRIPT_URL
   value:
   description: 'The Chatwoot script base URL, to display the "Contact Support" option on the billing page'
 - name: CHATWOOT_SUPPORT_IDENTIFIER_HASH
   value:
   description: 'The Chatwoot identifier hash, to validate the contact in the live chat window.'
+  type: secret
 - name: ACCOUNT_SECURITY_NOTIFICATION_WEBHOOK_URL
   display_title: Webhook URL to post security analysis
   value:
@@ -245,6 +257,7 @@
   display_title: 'Firebase Credentials'
   value:
   locked: false
+  type: secret
   description: 'Contents on your firebase credentials json file'
 ## ------ End of Configs added for FCM v1 notifications ------ ##
 
@@ -259,4 +272,5 @@
   value:
   locked: false
   description: 'Linear client secret'
+  type: secret
 ## ------ End of Configs added for Linear ------ ##