✨Don't change current alert system, but rework jwt display index.html.erb in JwtsController#index, to a more user friendly way.

Author: Eric-Guo

app/assets/javascripts/main.js

@@ -45,6 +45,30 @@ document.addEventListener("turbolinks:load", function() {
     });
   }
 
+  var copyButtons = document.querySelectorAll('[data-copy-target]');
+  if (copyButtons.length) {
+    for (var i = 0; i < copyButtons.length; i++) {
+      copyButtons[i].addEventListener('click', function() {
+        var target = document.getElementById(this.getAttribute('data-copy-target'));
+        if (!target) {
+          return;
+        }
+        target.focus();
+        target.select();
+        if (navigator.clipboard && navigator.clipboard.writeText) {
+          navigator.clipboard.writeText(target.value);
+        } else {
+          document.execCommand('copy');
+        }
+        var copiedText = this.getAttribute('data-copied-text');
+        var label = this.querySelector('span');
+        if (copiedText && label) {
+          label.textContent = copiedText;
+        }
+      });
+    }
+  }
+
   // Login Page Flipbox control
   $('.login-content [data-toggle="flip"]').click(function() {
     $('.login-box').toggleClass('flipped');

app/controllers/jwts_controller.rb

@@ -14,6 +14,7 @@ def create
     jwt = Warden::JWTAuth::TokenEncoder.new.call(payload)
     Rails.logger.debug "jwt: #{jwt}"
     if @user.allowlisted_jwts.create(jti: payload['jti'], aud: payload['aud'], exp: Time.at(payload['exp']))
+      flash[:jwt] = jwt
       redirect_to jwts_path, alert: t('.created', jwt: jwt)
     else
       render :index

app/views/jwts/index.html.erb

@@ -31,6 +31,21 @@
             </div>
             <div><%= submit_tag t(".actions.create"), class: 'btn btn-primary' %></div>
           <% end -%>
+          <% if flash[:jwt].present? %>
+            <div class="alert alert-info mt-3" role="alert">
+              <h4 class="alert-heading"><%= t(".token_title") %></h4>
+              <p><%= t(".token_help") %></p>
+              <div class="form-group">
+                <label for="new-jwt-token"><%= t(".token_label") %></label>
+                <textarea id="new-jwt-token" class="form-control" rows="3" readonly style="font-family: monospace;"><%= flash[:jwt] %></textarea>
+              </div>
+              <p class="mb-0">
+                <button type="button" class="btn btn-secondary icon-btn" data-copy-target="new-jwt-token" data-copied-text="<%= t(".token_copied") %>">
+                  <i class="fa fa-clipboard"></i> <span><%= t(".token_copy") %></span>
+                </button>
+              </p>
+            </div>
+          <% end %>
           <table class="table table-hover table-bordered mt-3">
             <thead>
             <tr>

config/locales/en.yml

@@ -101,6 +101,11 @@ en:
       title: "Management application and its JWT authorization"
       your_jwts_list: "Your JWT authorization list"
       clean_expired_jwts: "Clean expired JWTs"
+      token_title: "New JWT token"
+      token_help: "Copy this token now. It will only be shown once."
+      token_label: "JWT token"
+      token_copy: "Copy token"
+      token_copied: "Copied"
       form:
         aud: "Audience"
         exp_hours: "Expiration hours"

config/locales/zh-CN.yml

@@ -101,6 +101,11 @@ zh-CN:
       title: "管理应用程序及其JWT授权"
       your_jwts_list: "您的JWT授权列表"
       clean_expired_jwts: "清理已经过期的JWT"
+      token_title: "新的JWT令牌"
+      token_help: "请立即复制该令牌，它只会显示一次。"
+      token_label: "JWT 令牌"
+      token_copy: "复制令牌"
+      token_copied: "已复制"
       form:
         aud: "Audience"
         exp_hours: "过期时间(小时)"