Merge pull request #5100 from manyfold3d/obfuscated-secrets

Obfuscate OAuth client secret on screen (with reveal and copy options)

app/assets/stylesheets/application.scss

@@ -47,3 +47,11 @@ p.notice:empty {
 #navbar>ul.navbar-nav>li>a.nav-link {
 	color: var(--bs-navbar-hover-color) !important;
 }
+
+span.obfuscated {
+	-webkit-text-security: disc;
+}
+
+span.deobfuscated {
+	-webkit-text-security: none;
+}

app/components/copy_button.rb

@@ -9,7 +9,7 @@ class Components::CopyButton < Components::Base
   end
 
   def view_template
-    a href: "#", class: "link-secondary", data: {controller: "copy-text", action: "click->copy-text#copy:prevent", copy_text_text_value: @text} do
+    button class: "btn btn-secondary", data: {controller: "copy-text", action: "click->copy-text#copy:prevent", copy_text_text_value: @text} do
       Icon icon: "clipboard-plus", label: @label
     end
   end

app/components/copyable_text.rb

@@ -0,0 +1,27 @@
+class Components::CopyableText < Components::Base
+  def initialize(text:, label: nil, obfuscated: false)
+    @text = text
+    @label = label
+    @obfuscated = obfuscated
+  end
+
+  def before_template
+    @label ||= t("components.copy_button.copy")
+  end
+
+  def view_template
+    div(data: {controller: "obfuscated-text"}) do
+      span(class: @obfuscated ? "obfuscated" : nil) { @text }
+      whitespace
+      if @obfuscated
+        button class: "btn btn-sm btn-outline-secondary", title: t("components.copyable_text.reveal"), data: {action: "click->obfuscated-text#toggle:prevent"} do
+          Icon icon: "eye"
+        end
+      end
+      whitespace
+      button class: "btn btn-sm btn-outline-secondary", title: @label, data: {controller: "copy-text", action: "click->copy-text#copy:prevent", copy_text_text_value: @text} do
+        Icon icon: "clipboard-plus"
+      end
+    end
+  end
+end

app/javascript/controllers/index.ts

@@ -11,6 +11,7 @@ import CocoonedController from './cocooned_controller'
 import CopyTextController from './copy_text_controller'
 import EditableController from './editable_controller'
 import I18nController from './i18n_controller'
+import ObfuscatedTextController from './obfuscated_text_controller'
 import RendererController from './renderer_controller'
 import SearchableSelectController from './searchable_select_controller'
 import StorageServiceController from './storage_service_controller'
@@ -27,6 +28,7 @@ application.register('cocooned', CocoonedController)
 application.register('copy-text', CopyTextController)
 application.register('editable', EditableController)
 application.register('i18n', I18nController)
+application.register('obfuscated-text', ObfuscatedTextController)
 application.register('renderer', RendererController)
 application.register('searchable-select', SearchableSelectController)
 application.register('storage-service', StorageServiceController)

app/javascript/controllers/obfuscated_text_controller.ts

@@ -0,0 +1,15 @@
+import { Controller } from '@hotwired/stimulus'
+
+// Connects to data-controller="obfuscated-text"
+export default class extends Controller {
+  toggle (): void {
+    const hidden = this.element.querySelectorAll('.obfuscated')
+    const shown = this.element.querySelectorAll('.deobfuscated')
+    hidden.forEach((element: HTMLElement) => {
+      element.classList.replace('obfuscated', 'deobfuscated')
+    })
+    shown.forEach((element: HTMLElement) => {
+      element.classList.replace('deobfuscated', 'obfuscated')
+    })
+  }
+}

app/views/collections/show.html.erb

@@ -19,8 +19,7 @@
               <small class="text-secondary"><%= link_to @collection.federails_actor.at_address, @collection.federails_actor.profile_url, target: "new" %></small>
             <% elsif SiteSettings.federation_enabled? %>
               <small class="text-secondary">
-                <%= @collection.federails_actor.short_at_address %>
-                <%= CopyButton(text: @collection.federails_actor.at_address, label: t("general.copy_fediverse_handle")) %>
+                <%= CopyableText(text: @collection.federails_actor.at_address, label: t("general.copy_fediverse_handle")) %>
               </small>
             <% end %>
           </p>

app/views/creators/show.html.erb

@@ -25,8 +25,7 @@
                 <small class="text-secondary"><%= link_to @creator.federails_actor.at_address, @creator.federails_actor.profile_url, target: "new" %></small>
               <% elsif SiteSettings.federation_enabled? %>
                 <small class="text-secondary">
-                  <%= @creator.federails_actor.short_at_address %>
-                  <%= CopyButton(text: @creator.federails_actor.at_address, label: t("general.copy_fediverse_handle")) %>
+                  <%= CopyableText(text: @creator.federails_actor.at_address, label: t("general.copy_fediverse_handle")) %>
                 </small>
               <% end %>
             </p>

app/views/devise/registrations/edit.html.erb

@@ -15,8 +15,7 @@
             <% if SiteSettings.federation_enabled? %>
               <div class="col-auto col-form-label"><%= t("settings.users.index.fediverse_address") %></div>
               <div class="col col-form-label">
-                <code><%= resource.federails_actor.at_address %></code>
-                <%= CopyButton(text: resource.federails_actor.at_address, label: t("general.copy_fediverse_handle")) %>
+                <%= CopyableText(text: resource.federails_actor.at_address, label: t("general.copy_fediverse_handle")) %>
               </div>
             <% end %>
           </div>

app/views/doorkeeper_applications/show.html.erb

@@ -8,11 +8,11 @@
   </tr>
   <tr>
     <td><%= Doorkeeper::Application.human_attribute_name :uid %></td>
-    <td><code><%= @application.uid %></code></td>
+    <td><%= CopyableText text: @application.uid %></td>
   </tr>
   <tr>
     <td><%= Doorkeeper::Application.human_attribute_name :secret %></td>
-    <td><code><%= @application.secret %></code></td>
+    <td><%= CopyableText text: @application.secret, obfuscated: true %></td>
   </tr>
   <tr>
     <td><%= Doorkeeper::Application.human_attribute_name :confidential %></td>

app/views/home/_federation.html.erb

@@ -19,8 +19,7 @@
           <div class="row">
             <div class="col col-auto"><%= t(".creator_handle") %></div>
             <div class="col">
-              <code><%= current_user.creators.local.first.federails_actor.at_address %></code>
-              <%= CopyButton text: current_user.creators.local.first.federails_actor.at_address, label: t("general.copy_fediverse_handle") %>
+              <%= CopyableText text: current_user.creators.local.first.federails_actor.at_address, label: t("general.copy_fediverse_handle") %>
             </div>
           </div>
         </div>
@@ -33,8 +32,7 @@
         <div class="row">
           <div class="col col-auto"><%= t(".account_handle") %></div>
           <div class="col">
-            <code><%= current_user.federails_actor.at_address %></code>
-            <%= CopyButton text: current_user.federails_actor.at_address, label: t("general.copy_fediverse_handle") %>
+            <%= CopyableText text: current_user.federails_actor.at_address, label: t("general.copy_fediverse_handle") %>
           </div>
         </div>
       </div>

app/views/models/show.html.erb

@@ -91,8 +91,7 @@
                   <small><%= link_to @model.federails_actor.at_address, @model.federails_actor.profile_url, target: "new" %></small>
                 <% else %>
                   <small>
-                    <%= @model.federails_actor.short_at_address %>
-                    <%= CopyButton(text: @model.federails_actor.at_address, label: t("general.copy_fediverse_handle")) %>
+                    <%= CopyableText(text: @model.federails_actor.at_address, label: t("general.copy_fediverse_handle")) %>
                   </small>
                 <% end %>
               </div>

config/locales/cs.yml

@@ -359,6 +359,8 @@ cs:
       help:
     copy_button:
       copy:
+    copyable_text:
+      reveal:
     display_user_quota:
       request_increase:
     download_button:

config/locales/de.yml

@@ -359,6 +359,8 @@ de:
       help: datenschutzfreundlicher Spamschutz durch ALTCHA
     copy_button:
       copy: In die Zwischenablage kopieren
+    copyable_text:
+      reveal:
     display_user_quota:
       request_increase: Um eine Quotenerhöhung zu beantragen, wende dich an deinen Website-Administrator.
     download_button:

config/locales/en.yml

@@ -359,6 +359,8 @@ en:
       help: privacy-friendly spam protection by ALTCHA
     copy_button:
       copy: Copy to Clipboard
+    copyable_text:
+      reveal: Reveal
     display_user_quota:
       request_increase: To request a quota increase, contact your site administrator.
     download_button:

config/locales/es.yml

@@ -359,6 +359,8 @@ es:
       help: protección antispam mediante ALTCHA
     copy_button:
       copy: Copiar al portapapeles
+    copyable_text:
+      reveal:
     display_user_quota:
       request_increase: Para solicitar un aumento de cuota, póngase en contacto con el administrador de su sitio.
     download_button:

config/locales/fr.yml

@@ -359,6 +359,8 @@ fr:
       help:
     copy_button:
       copy: Copier dans le presse-papiers
+    copyable_text:
+      reveal:
     display_user_quota:
       request_increase:
     download_button:

config/locales/ja.yml

@@ -359,6 +359,8 @@ ja:
       help:
     copy_button:
       copy:
+    copyable_text:
+      reveal:
     display_user_quota:
       request_increase:
     download_button:

config/locales/nl.yml

@@ -359,6 +359,8 @@ nl:
       help:
     copy_button:
       copy:
+    copyable_text:
+      reveal:
     display_user_quota:
       request_increase:
     download_button:

config/locales/pl.yml

@@ -359,6 +359,8 @@ pl:
       help:
     copy_button:
       copy: Kopiuj do schowka
+    copyable_text:
+      reveal:
     display_user_quota:
       request_increase:
     download_button:

config/locales/pt.yml

@@ -359,6 +359,8 @@ pt:
       help:
     copy_button:
       copy:
+    copyable_text:
+      reveal:
     display_user_quota:
       request_increase:
     download_button:

config/locales/ru.yml

@@ -359,6 +359,8 @@ ru:
       help:
     copy_button:
       copy:
+    copyable_text:
+      reveal:
     display_user_quota:
       request_increase:
     download_button:

config/locales/zh-CN.yml

@@ -359,6 +359,8 @@ zh-CN:
       help:
     copy_button:
       copy: 复制到剪贴板
+    copyable_text:
+      reveal:
     display_user_quota:
       request_increase: 如需增加配额，请联系管理员。
     download_button: