latest updates

.prettierrc

@@ -0,0 +1,4 @@
+{
+  "tabWidth": 2,
+  "useTabs": false
+}

app/assets/stylesheets/application.tailwind.css

@@ -273,15 +273,15 @@ button, input[type=submit] {
 	min-width: min-content;
 }
 
-input[type=text], input[type=email], input[type=number], .input2 {
+input[type=text], input[type=email], input[type=number], .input2, x-selectmenu::part(button) {
 	background-color: #262626 !important;
 	border: 1.5px solid var(--cultured)!important;
 	border-radius: 5px !important;
 	min-width: 350px;
 	color: white;
 }
 
-.admin > input[type=text], input[type=email], input[type=number], .input2 {
+.admin > input[type=text], input[type=email], input[type=number], .input2, x-selectmenu::part(button) {
     background-color: rgba(245, 245, 245, 0.1) !important;
 }
 
@@ -342,3 +342,47 @@ input[type=number]  {
 .card:hover {
     transform: translateY(-1rem);
 }
+
+
+.clipbutton {
+    border-radius: 4px;
+    font-size: 1rem;
+    padding: 0.5rem;
+    background-color: var(--lemon-glacier);
+    color: #262626;
+    transition: ease-in-out 0.25s;
+}
+
+.clipbutton:hover {
+    transform: translateX(-4px);
+}
+
+.clipbutton.shaking {
+    animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
+    transform: translate3d(0, 0, 0);
+    backface-visibility: hidden;
+    perspective: 1000px;
+    animation-fill-mode: forwards;
+}
+
+@keyframes shake {
+    10%, 90% {
+        transform: translate3d(-1px, 0, 0);
+    }
+
+    20%, 80% {
+        transform: translate3d(2px, 0, 0);
+    }
+
+    30%, 50%, 70% {
+        transform: translate3d(-4px, 0, 0);
+    }
+
+    40%, 60% {
+        transform: translate3d(4px, 0, 0);
+    }
+}
+
+[behavior="selected-value"] > .description {
+    display: none;
+}

app/controllers/developers/applications_controller.rb

@@ -13,4 +13,9 @@ def index
   def show
     @application = Doorkeeper::Application.find_by(id: params[:id])
   end
+
+  def add_scope
+    @application = Doorkeeper::Application.find_by(id: params[:id])
+    @application.update!(scopes: Doorkeeper::OAuth::Scopes.from_array([@application.scopes, params[:scope]]))
+  end
 end

app/javascript/application.js

@@ -1,2 +1,3 @@
 import "controllers"
-import "@hotwired/turbo-rails"
+import "@hotwired/turbo-rails"
+

app/javascript/controllers/clipboard_controller.js

@@ -0,0 +1,14 @@
+import { Controller } from "@hotwired/stimulus";
+
+export default class extends Controller {
+  static targets = [ "source", "button" ]
+
+  copy() {
+    navigator.clipboard.writeText(this.sourceTarget.getAttribute("value"))
+    this.buttonTarget.classList.add("shaking");
+
+    setTimeout(() => {
+      this.buttonTarget.classList.remove("shaking");
+    }, 820);
+  }
+}

app/views/developers/applications/show.html.erb

@@ -13,27 +13,74 @@
         </h2>
         <section id="credentials">
           <h2>Credentials</h2>
-          <div class="field">
+          <div class="field" data-controller="clipboard">
             <label for="clientid" id="clientid-label">Client ID</label>
-            <span class="input2" id="clientid" aria-labelledby="clientid-label">
+            <span class="input2" id="clientid" aria-labelledby="clientid-label" data-clipboard-target="source" value="<%= @application.uid %>">
               <%= @application.uid %>
-              <button class="clipbutton">Copy to clipboard</button>
+              <button class="clipbutton" data-action="clipboard#copy" data-clipboard-target="button">Copy to clipboard</button>
             </span>
           </div>
 
-          <div class="field">
+          <div class="field" data-controller="clipboard">
             <label for="clientsecret" id="clientsecret-label">Client Secret</label>
-            <span class="input2" id="clientsecret" aria-labelledby="clientsecret-label">
+            <span class="input2" id="clientsecret" aria-labelledby="clientsecret-label" data-clipboard-target="source" value="<%= @application.secret %>">
               <%= @application.secret %>
-              <button class="clipbutton">Copy to clipboard</button>
+              <button class="clipbutton" data-action="clipboard#copy" data-clipboard-target="button">Copy to clipboard</button>
             </span>
           </div>
-
-          <button>Authorize</button>
         </section>
 
         <section id="scopes">
           <h2>Scopes</h2>
+
+          <div style="display: flex">
+            <%= form_with method: :patch, url: add_scope_developers_application_path(@application.id), id: "add_scope" do |form| %>
+              <label>Add scope:
+              <selectlist name="scope" id="scope" class="combobox" placeholder="Scope">
+                <button  part="button" behavior="button" aria-haspopup="listbox" slot="button" class="input2">
+                  <slot name="selected-value">
+                    <div part="selected-value" behavior="selected-value"></div>
+
+                  </slot>
+                  <slot name="marker">
+                    <svg part="marker" width="20" height="14" viewBox="0 0 20 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+                      <path d="M4 6 L10 12 L 16 6" stroke="currentColor" stroke-width="3" stroke-linejoin="round"></path>
+                    </svg>
+                  </slot>
+                </button>
+
+                <% Doorkeeper.configuration.scopes.each do |s| %>
+                  <option value="<%= s %>" label="<%= s %>">
+                    <p>
+                      <b style="font-size: larger"><%= s %></b>
+                      <br>
+                      <span class="description" style="font-weight: normal"><%= raw t("doorkeeper.scopes.#{s}") %></span>
+                    </p>
+                  </option>
+                <% end %>
+
+              </selectlist>
+              </label>
+
+            <% end %>
+          </div>
+
+          <table class="table table-auto">
+            <thead>
+              <tr>
+                <th>Scope</th>
+                <th>Description<th>
+              </tr>
+            </thead>
+            <tbody>
+              <% @application.scopes.each do |s| %>
+                <tr>
+                  <td><%= s %></td>
+                  <td><%= raw t("doorkeeper.scopes.#{s}") %></td>
+                </tr>
+              <% end %>
+            </tbody>
+          </table>
         </section>
 
         <section id="redirect_urls">
@@ -50,6 +97,8 @@
     </div>
 </div>
 
+<script type="module" src="https://esm.sh/[email protected]/"></script>
+
 <style>
   html {
     scroll-behavior: smooth;
@@ -81,14 +130,7 @@
     display: inline-flex;
     justify-content: space-between;
     align-items: center;
-  }
-
-  .clipbutton {
-    border-radius: 4px;
-    font-size: 1rem;
-    padding: 0.5rem;
-    background-color: var(--lemon-glacier);
-    color: #262626;
+    color: var(--cultured) !important;
   }
 
   .field {
@@ -106,4 +148,85 @@
     font-weight: 400;
     font-size: 1.2rem;
   }
+
+  .table td {
+    padding-top: 0.5rem !important;
+    padding-bottom: 0.5rem !important;
+    font-size: 1.2rem;
+  }
+
+  .table th {
+    font-size: 1.1rem;
+    text-transform: uppercase;
+    font-weight: 300;
+  }
+
+  td > strong {
+    font-weight: normal;
+  }
+
+
+  .combobox button {
+    width: 100%;
+    border-radius: 4px;
+    border: 1px solid #ccc;
+    background: #f6f4f7;
+    padding: 5px;
+    text-align: start;
+    color: black;
+  }
+
+  .combobox[open] button {
+    border-radius: 4px 4px 0 0;
+    border-bottom-color: #f6f4f7;
+  }
+
+  .combobox[open].above button {
+    border-radius: 0 0 4px 4px;
+    border-bottom-color: #ccc;
+    border-top-color: #f6f4f7;
+  }
+
+  .combobox [popover] {
+    box-shadow: none;
+    padding: 5px;
+    margin: -1px 0 0 0;
+    border-radius: 0 0 4px 4px;
+    border: 1px solid #ccc;
+    border-width: 0 1px 1px;
+    background: #f6f4f7;
+    color: black;
+    box-sizing: border-box;
+  }
+
+  .combobox.above [popover] {
+    border-radius: 4px 4px 0 0;
+    border-width: 1px 1px 0;
+  }
+
+  .combobox :is(option, x-option) {
+    padding: 5px;
+  }
+
+  .combobox :is(option, x-option):hover,
+  .combobox :is(option, x-option):focus,
+  .combobox :is(option, x-option).selected {
+    background: #097ff5;
+    color: white;
+    outline: 0;
+  }
+
+  .combobox input[type="search"] {
+    width: 100%;
+    margin-bottom: 5px;
+    padding: 5px;
+    box-sizing: border-box;
+    border: 1px solid #ccc;
+  }
+
+  .combobox .options {
+    max-height: 50vh;
+    overflow-y: auto;
+    overflow-x: hidden;
+  }
 </style>

app/views/layouts/application.html.erb

@@ -5,7 +5,7 @@
     <meta name="viewport" content="width=device-width,initial-scale=1">
     <%= csrf_meta_tags %>
     <%= csp_meta_tag %>
-    <%= stylesheet_link_tag "tailwind", "inter-font", "data-turbo-track": "reload" %>
+    <%= stylesheet_link_tag "application", "inter-font", "data-turbo-track": "reload" %>
     <%= javascript_importmap_tags %>
     <%= javascript_include_tag "application", "data-turbo-track": "reload" %>
     <%= yield :head %>

config/environments/development.rb

@@ -69,12 +69,18 @@
   # config.action_cable.disable_request_forgery_protection = true
 
   # Origin for the WebAuthn RP
-  config.webauthn_origin = "http://localhost:3000"
+  config.webauthn_origin = "https://oblong.underpass.clb.li"
 
   config.action_controller.raise_on_missing_callback_actions = true
 
   # Highlight code that enqueued background job in logs.
   config.active_job.verbose_enqueue_logs = true
 
   config.enable_reloading = true
+
+
+  config.hosts << "oblong.test"
+  config.hosts << "oblong.underpass.clb.li"
+
+  config.assets.compile = true
 end

config/importmap.rb

@@ -7,3 +7,6 @@
 pin "@github/webauthn-json/browser-ponyfill", to: "https://ga.jspm.io/npm:@github/[email protected]/dist/esm/webauthn-json.browser-ponyfill.js"
 pin "url-safe-base64", to: "https://ga.jspm.io/npm:[email protected]/src/index.js"
 pin_all_from "app/javascript"
+pin "selectlist", to: "https://cdn.jsdelivr.net/npm/selectlist-polyfill/src/selectlist.min.js"
+pin "option", to: "https://cdn.jsdelivr.net/npm/selectlist-polyfill/src/option.min.js"
+pin "fzf", to: "https://ga.jspm.io/npm:[email protected]/dist/fzf.es.js"

config/routes.rb

@@ -70,6 +70,10 @@
 
   namespace :developers do
     get "/", to: redirect("developers/applications")
-    resources :applications
+    resources :applications do
+      member do
+        patch "add_scope"
+      end
+    end
   end
 end