Merge pull request 'Add modal component, QR codes for invite links' (#140) from feature/139-qr_codes into master

Reviewed-on: #140

app/assets/stylesheets/application.tailwind.css

@@ -2,6 +2,7 @@
 @import "tailwindcss/components";
 @import "tailwindcss/utilities";
 
+@import "components/animations";
 @import "components/base";
 @import "components/buttons";
 @import "components/dashboard_services";

app/assets/stylesheets/components/animations.css

@@ -0,0 +1,16 @@
+@keyframes scaleIn {
+  from {
+    transform: scale(0.5);
+    opacity: 0;
+  }
+  to {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+
+.animate-scale-in {
+  animation-name: scaleIn;
+  animation-duration: 0.15s;
+  animation-timing-function: cubic-bezier(0.2, 0, 0.13, 1);
+}

app/assets/stylesheets/components/buttons.css

@@ -14,12 +14,12 @@
     @apply py-1 px-2 text-sm;
   }
 
-  .btn-outline {
-    @apply border-2 border-gray-100 hover:bg-gray-100;
+  .btn-icon {
+    @apply py-2 px-3;
   }
 
-  .btn-icon {
-    @apply px-3;
+  .btn-outline {
+    @apply py-2 border-2 border-gray-100 hover:bg-gray-100;
   }
 
   .btn-gray {

app/components/modal_component.html.erb

@@ -0,0 +1,15 @@
+<div data-modal-target="container"
+     data-action="click->modal#closeBackground keyup@window->modal#closeWithKeyboard"
+     class="hidden animate-scale-in fixed inset-0 overflow-y-auto flex items-center justify-center"
+     style="z-index: 9999;">
+  <div class="max-h-screen w-auto max-w-lg relative">
+    <div class="m-1 bg-white rounded shadow">
+      <div class="p-8">
+        <%= content %>
+        <div class="flex justify-end items-center flex-wrap mt-6">
+          <button class="btn-md btn-blue" data-action="click->modal#close">Close</button>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

app/components/modal_component.rb

@@ -0,0 +1,2 @@
+class ModalComponent < ViewComponent::Base
+end

app/components/qr_code_modal_component.html.erb

@@ -0,0 +1,6 @@
+<%= render ModalComponent.new do %>
+  <% if @descripton.present? %>
+    <p class="mb-6"><%= @description %></p>
+  <% end %>
+  <p><%= raw @qr_code_svg %></p>
+<% end %>

app/components/qr_code_modal_component.rb

@@ -0,0 +1,24 @@
+require "rqrcode"
+
+class QrCodeModalComponent < ViewComponent::Base
+  def initialize(qr_content:, description: nil)
+    @description = description
+    @qr_code_svg = qr_code_svg(qr_content)
+  end
+
+  private
+
+  def qr_code_svg(content)
+    qr_code = RQRCode::QRCode.new(content)
+    qr_code.as_svg(
+      color: "000",
+      shape_rendering: "crispEdges",
+      module_size: 6,
+      standalone: true,
+      use_path: true,
+      svg_attributes: {
+        class: 'inline-block'
+      }
+    )
+  end
+end

app/controllers/services/lightning_controller.rb

@@ -8,8 +8,7 @@ class Services::LightningController < ApplicationController
   before_action :fetch_balance
 
   def index
-    @wallet_url = "lndhub://#{current_user.ln_account}:#{current_user.ln_password}@#{ENV['LNDHUB_PUBLIC_URL']}"
-    initialize_lndhub_qr_code
+    @wallet_setup_url = "lndhub://#{current_user.ln_account}:#{current_user.ln_password}@#{ENV['LNDHUB_PUBLIC_URL']}"
   end
 
   def transactions
@@ -56,20 +55,6 @@ class Services::LightningController < ApplicationController
 
   private
 
-  def initialize_lndhub_qr_code
-    qr_code = RQRCode::QRCode.new(@wallet_url)
-    @lndhub_qr_svg = qr_code.as_svg(
-      color: "000",
-      shape_rendering: "crispEdges",
-      module_size: 6,
-      standalone: true,
-      use_path: true,
-      svg_attributes: {
-        class: 'inline-block'
-      }
-    )
-  end
-
   def authenticate_with_lndhub(options={})
     if session[:ln_auth_token].present? && !options[:force_reauth]
       @ln_auth_token = session[:ln_auth_token]

app/javascript/controllers/application.js

@@ -1,7 +1,10 @@
 import { Application } from "@hotwired/stimulus"
+import { Modal } from "tailwindcss-stimulus-components"
 
 const application = Application.start()
 
+application.register('modal', Modal)
+
 // Configure Stimulus development experience
 application.debug = false
 window.Stimulus   = application

app/views/admin/settings/services/_discourse.html.erb

@@ -30,14 +30,14 @@
       <input type="text" class="grow" disabled="disabled"
              value="https://<%= Setting.accounts_domain %>/discourse/connect"
              data-clipboard-target="source" />
-      <button class="btn-md btn-icon btn-blue shrink-0"
+      <button class="btn-md btn-icon btn-outline shrink-0"
               data-clipboard-target="trigger" data-action="clipboard#copy"
               title="Copy to clipboard">
         <span class="content-initial">
-          <%= render partial: "icons/copy", locals: { custom_class: "text-white h-4 w-4 inline" } %>
+          <%= render partial: "icons/copy", locals: { custom_class: "text-blue-600 h-4 w-4 inline" } %>
         </span>
         <span class="content-active hidden">
-          <%= render partial: "icons/check", locals: { custom_class: "text-white h-4 w-4 inline" } %>
+          <%= render partial: "icons/check", locals: { custom_class: "text-blue-600 h-4 w-4 inline" } %>
         </span>
       </button>
     </li>

app/views/icons/_qr_code.html.erb

@@ -0,0 +1,11 @@
+<svg class="icon-qr-code <%= custom_class %>" fill="currentColor" width="90" height="90" version="1.1" viewBox="0 0 90 90" xmlns="http://www.w3.org/2000/svg">
+  <path id="path2" d="m22.014 22.612c0-2.5389 2.0586-4.5976 4.5976-4.5976h9.1937c2.539 0 4.5976 2.0587 4.5976 4.5976v6.1937c0 2.539-2.0586 4.5976-4.5976 4.5976h-9.1937c-2.539 0-4.5976-2.0586-4.5976-4.5976z"/>
+  <path id="path4" d="m22.014 61.598c0-2.539 2.0586-4.5976 4.5976-4.5976h9.1937c2.539 0 4.5976 2.0586 4.5976 4.5976v6.1937c0 2.539-2.0586 4.5976-4.5976 4.5976h-9.1937c-2.539 0-4.5976-2.0586-4.5976-4.5976z"/>
+  <path id="path6" d="m50 22.612c0-2.5389 2.0586-4.5976 4.5976-4.5976h9.1937c2.539 0 4.5976 2.0587 4.5976 4.5976v6.1937c0 2.539-2.0586 4.5976-4.5976 4.5976h-9.1937c-2.539 0-4.5976-2.0586-4.5976-4.5976z"/>
+  <path id="path8" d="m50 61.598c0-2.539 2.0586-4.5976 4.5976-4.5976h9.1937c2.539 0 4.5976 2.0586 4.5976 4.5976v6.1937c0 2.539-2.0586 4.5976-4.5976 4.5976h-9.1937c-2.539 0-4.5976-2.0586-4.5976-4.5976z"/>
+  <path id="path10" d="m8.85 45c0-1.7397 1.4103-3.15 3.15-3.15h66.5c1.7397 0 3.15 1.4103 3.15 3.15s-1.4103 3.15-3.15 3.15h-66.5c-1.7397 0-3.15-1.4103-3.15-3.15z" clip-rule="evenodd" fill-rule="evenodd"/>
+  <path id="path12" d="m11.566 0c-6.3876 0-11.566 5.1782-11.566 11.566v14.627c0 1.7713 1.4359 3.2073 3.2072 3.2073s3.2072-1.436 3.2072-3.2073v-14.627c0-2.845 2.3064-5.1514 5.1514-5.1514h14.627c1.7713 0 3.2073-1.4359 3.2073-3.2072s-1.436-3.2072-3.2073-3.2072z" clip-rule="evenodd" fill-rule="evenodd"/>
+  <path id="path14" d="m11.566 90c-6.3876 0-11.566-5.1782-11.566-11.566v-14.628c0-1.7713 1.4359-3.2072 3.2072-3.2072s3.2072 1.4359 3.2072 3.2072v14.628c0 2.845 2.3064 5.1513 5.1514 5.1513h14.627c1.7713 0 3.2073 1.436 3.2073 3.2073 0 1.7712-1.436 3.2072-3.2073 3.2072z" clip-rule="evenodd" fill-rule="evenodd"/>
+  <path id="path16" d="m78.434 0c6.3876 0 11.566 5.1782 11.566 11.566v14.627c0 1.7713-1.4359 3.2073-3.2072 3.2073s-3.2072-1.436-3.2072-3.2073v-14.627c0-2.845-2.3064-5.1514-5.1514-5.1514h-14.627c-1.7713 0-3.2073-1.4359-3.2073-3.2072s1.436-3.2072 3.2073-3.2072z" clip-rule="evenodd" fill-rule="evenodd"/>
+  <path id="path18" d="m78.434 90c6.3876 0 11.566-5.1782 11.566-11.566v-14.628c0-1.7713-1.4359-3.2072-3.2072-3.2072s-3.2072 1.4359-3.2072 3.2072v14.628c0 2.845-2.3064 5.1513-5.1514 5.1513h-14.627c-1.7713 0-3.2073 1.436-3.2073 3.2073 0 1.7712 1.436 3.2072 3.2073 3.2072z" clip-rule="evenodd" fill-rule="evenodd"/>
+</svg>

app/views/invitations/index.html.erb

@@ -8,20 +8,25 @@
       </p>
       <ul class="md:w-3/4">
         <% @invitations_unused.each do |invitation| %>
-          <li class="font-mono mb-2 flex gap-1" data-controller="clipboard">
-            <input type="text" disabled class="relative grow"
+          <li class="mb-3 flex gap-1" data-controller="clipboard modal">
+            <input type="text" disabled class="relative grow font-mono"
                    value="<%= invitation_url(invitation.token) %>"
                    data-clipboard-target="source" />
-            <button id="copy-user-address" class="btn-md btn-icon btn-blue shrink-0 w-auto"
+            <button class="btn-md btn-icon btn-outline shrink-0 w-auto"
                     data-clipboard-target="trigger" data-action="clipboard#copy"
                     title="Copy to clipboard">
               <span class="content-initial">
-                <%= render partial: "icons/copy", locals: { custom_class: "text-white h-4 w-4 inline" } %>
+                <%= render partial: "icons/copy", locals: { custom_class: "text-blue-600 h-4 w-4 inline" } %>
               </span>
               <span class="content-active hidden">
-                <%= render partial: "icons/check", locals: { custom_class: "text-white h-4 w-4 inline" } %>
+                <%= render partial: "icons/check", locals: { custom_class: "text-blue-600 h-4 w-4 inline" } %>
               </span>
             </button>
+            <button class="btn-md btn-icon btn-outline shrink-0 w-auto"
+                    data-action="click->modal#open" title="Show QR code">
+                <%= render partial: "icons/qr_code", locals: { custom_class: "text-blue-600 h-4 w-4 inline" } %>
+            </button>
+            <%= render QrCodeModalComponent.new(qr_content: invitation_url(invitation.token)) %>
           </li>
         <% end %>
       </ul>

app/views/services/lightning/index.html.erb

@@ -16,20 +16,20 @@
       <input type="text" id="user_address" class="grow"
              value=<%= current_user.address %> disabled="disabled"
              data-clipboard-target="source" />
-      <button id="copy-user-address" class="btn-md btn-icon btn-blue shrink-0"
+      <button id="copy-user-address" class="btn-md btn-icon btn-outline shrink-0"
               data-clipboard-target="trigger" data-action="clipboard#copy"
               title="Copy to clipboard">
         <span class="content-initial">
-          <%= render partial: "icons/copy", locals: { custom_class: "text-white h-4 w-4 inline" } %>
+          <%= render partial: "icons/copy", locals: { custom_class: "text-blue-600 h-4 w-4 inline" } %>
         </span>
         <span class="content-active hidden">
-          <%= render partial: "icons/check", locals: { custom_class: "text-white h-4 w-4 inline" } %>
+          <%= render partial: "icons/check", locals: { custom_class: "text-blue-600 h-4 w-4 inline" } %>
         </span>
       </button>
     </p>
   </section>
 
-  <section>
+  <section data-controller="modal">
     <h3>Wallet Apps</h3>
     <p>
       You can connect various wallet apps to your Kosmos account. This allows
@@ -40,19 +40,16 @@
     </p>
     <p data-controller="clipboard" class="my-6 text-center md:text-left">
       <input type="text" disabled class="hidden" aria-hidden=true
-             value="<%= @wallet_url%>" data-clipboard-target="source" />
+             value="<%= @wallet_setup_url %>" data-clipboard-target="source" />
       <button id="copy-setup-code" class="btn-md btn-blue w-full sm:w-auto"
               data-action="clipboard#copy" data-clipboard-target="trigger">
         <span class="content-initial">Copy setup code/URL</span>
         <span class="content-active hidden">Copied ✔</span>
       </button>
       <span class="mx-2 my-2 md:my-0 block md:inline">or</span>
-      <button id="show-setup-code" class="btn-md btn-blue w-full sm:w-auto">Show setup QR code</button>
-      <button id="hide-setup-code" class="hidden btn-md btn-blue w-full sm:w-auto">Hide setup QR code</button>
-    </p>
-    <p id="setup-code" class="hidden my-10 w-full text-center">
-      <%= raw @lndhub_qr_svg %>
+      <button data-action="click->modal#open" class="btn-md btn-blue w-full sm:w-auto">Show setup QR code</button>
     </p>
+    <%= render QrCodeModalComponent.new(qr_content: @wallet_setup_url) %>
   </section>
 
   <section>
@@ -119,27 +116,3 @@
     </p>
   </section>
 <% end %>
-
-<script type="text/javascript">
-  (function () {
-    const buttonShow = document.querySelector('#show-setup-code');
-    const buttonHide = document.querySelector('#hide-setup-code');
-    const setupCode = document.querySelector('#setup-code');
-
-    buttonShow.addEventListener('click', function(ev) {
-      ev.preventDefault();
-      setupCode.classList.remove('hidden');
-      buttonHide.classList.remove('hidden');
-      buttonShow.classList.add('hidden');
-      setupCode.scrollIntoView({behavior: "smooth", block: "nearest"});
-    });
-
-    buttonHide.addEventListener('click', function(ev) {
-      ev.preventDefault();
-      const el = document.querySelector('#setup-code');
-      setupCode.classList.add('hidden');
-      buttonHide.classList.add('hidden');
-      buttonShow.classList.remove('hidden');
-    });
-  })();
-</script>

app/views/settings/_account.html.erb

@@ -13,13 +13,13 @@
             'settings--account--email-target': 'emailField'
           }, required: true %>
       <button type="button" id="edit-email"
-              class="btn-md btn-icon btn-blue shrink-0 hidden initial-visible"
+              class="btn-md btn-icon btn-outline shrink-0 hidden initial-visible"
               data-settings--account--email-target="editEmailButton"
               data-action="settings--account--email#editEmail"
               title="Edit email address">
         <span class="">
           <%= render partial: "icons/edit-3", locals: {
-                custom_class: "text-white h-4 w-4 inline" } %>
+                custom_class: "text-blue-600 h-4 w-4 inline" } %>
         </span>
       </button>
     </p>

app/views/settings/_profile.html.erb

@@ -7,14 +7,14 @@
     <input type="text" id="user_address" class="grow"
            value=<%= @user.address %> disabled="disabled"
            data-clipboard-target="source" />
-    <button id="copy-user-address" class="btn-md btn-icon btn-blue shrink-0"
+    <button id="copy-user-address" class="btn-md btn-icon btn-outline shrink-0"
             data-clipboard-target="trigger" data-action="clipboard#copy"
             title="Copy to clipboard">
       <span class="content-initial">
-        <%= render partial: "icons/copy", locals: { custom_class: "text-white h-4 w-4 inline" } %>
+        <%= render partial: "icons/copy", locals: { custom_class: "text-blue-600  h-4 w-4 inline" } %>
       </span>
       <span class="content-active hidden">
-        <%= render partial: "icons/check", locals: { custom_class: "text-white h-4 w-4 inline" } %>
+        <%= render partial: "icons/check", locals: { custom_class: "text-blue-600  h-4 w-4 inline" } %>
       </span>
     </button>
   </p>

config/importmap.rb

@@ -6,3 +6,4 @@ pin "@hotwired/stimulus", to: "stimulus.min.js", preload: true
 pin "@hotwired/stimulus-loading", to: "stimulus-loading.js", preload: true
 pin_all_from "app/javascript/controllers", under: "controllers"
 pin "bech32" # @2.0.0
+pin "tailwindcss-stimulus-components" # @3.0.4

tailwind.config.js

@@ -5,7 +5,8 @@ module.exports = {
     './app/components/**/*.rb',
     './app/views/**/*.html.erb',
     './app/helpers/**/*.rb',
-    './app/javascript/**/*.js'
+    './app/javascript/**/*.js',
+    './vendor/javascript/tailwindcss-stimulus-components.js'
   ],
   safelist: [
     'bg-gray-100', 'text-gray-800',

vendor/javascript/tailwindcss-stimulus-components.js

@@ -0,0 +1,2 @@
+import{Controller as t}from"@hotwired/stimulus";class s extends t{initialize(){this.hide()}connect(){setTimeout((()=>{this.show()}),this.showDelayValue),this.hasDismissAfterValue&&setTimeout((()=>{this.close()}),this.dismissAfterValue)}close(){this.hide(),setTimeout((()=>{this.element.remove()}),this.removeDelayValue)}show(){this.element.classList.add(...this.showClasses),this.element.classList.remove(...this.hideClasses)}hide(){this.element.classList.add(...this.hideClasses),this.element.classList.remove(...this.showClasses)}}s.values={dismissAfter:Number,showDelay:{type:Number,default:200},removeDelay:{type:Number,default:1100}},s.classes=["show","hide"];class e extends t{connect(){this.timeout=null,this.duration=this.data.get("duration")||1e3}save(){clearTimeout(this.timeout),this.timeout=setTimeout((()=>{this.statusTarget.textContent="Saving...",Rails.fire(this.formTarget,"submit")}),this.duration)}success(){this.setStatus("Saved!")}error(){this.setStatus("Unable to save!")}setStatus(t){this.statusTarget.textContent=t,this.timeout=setTimeout((()=>{this.statusTarget.textContent=""}),2e3)}}e.targets=["form","status"];class i extends t{constructor(...t){super(...t),this._onMenuButtonKeydown=t=>{switch(t.keyCode){case 13:case 32:t.preventDefault(),this.toggle()}}}connect(){this.toggleClass=this.data.get("class")||"hidden",this.visibleClass=this.data.get("visibleClass")||null,this.invisibleClass=this.data.get("invisibleClass")||null,this.activeClass=this.data.get("activeClass")||null,this.enteringClass=this.data.get("enteringClass")||null,this.leavingClass=this.data.get("leavingClass")||null,this.hasButtonTarget&&this.buttonTarget.addEventListener("keydown",this._onMenuButtonKeydown),this.element.setAttribute("aria-haspopup","true")}disconnect(){this.hasButtonTarget&&this.buttonTarget.removeEventListener("keydown",this._onMenuButtonKeydown)}toggle(){this.openValue=!this.openValue}openValueChanged(){this.openValue?this._show():this._hide()}_show(t){setTimeout((()=>{this.menuTarget.classList.remove(this.toggleClass),this.element.setAttribute("aria-expanded","true"),this._enteringClassList[0].forEach((t=>{this.menuTarget.classList.add(t)}).bind(this)),this._activeClassList[0].forEach((t=>{this.activeTarget.classList.add(t)})),this._invisibleClassList[0].forEach((t=>this.menuTarget.classList.remove(t))),this._visibleClassList[0].forEach((t=>{this.menuTarget.classList.add(t)})),setTimeout((()=>{this._enteringClassList[0].forEach((t=>this.menuTarget.classList.remove(t)))}).bind(this),this.enterTimeout[0]),"function"==typeof t&&t()}).bind(this))}_hide(t){setTimeout((()=>{this.element.setAttribute("aria-expanded","false"),this._invisibleClassList[0].forEach((t=>this.menuTarget.classList.add(t))),this._visibleClassList[0].forEach((t=>this.menuTarget.classList.remove(t))),this._activeClassList[0].forEach((t=>this.activeTarget.classList.remove(t))),this._leavingClassList[0].forEach((t=>this.menuTarget.classList.add(t))),setTimeout((()=>{this._leavingClassList[0].forEach((t=>this.menuTarget.classList.remove(t))),"function"==typeof t&&t(),this.menuTarget.classList.add(this.toggleClass)}).bind(this),this.leaveTimeout[0])}).bind(this))}show(){this.openValue=!0}hide(t){!1===this.element.contains(t.target)&&this.openValue&&(this.openValue=!1)}get activeTarget(){return this.data.has("activeTarget")?document.querySelector(this.data.get("activeTarget")):this.element}get _activeClassList(){return this.activeClass?this.activeClass.split(",").map((t=>t.split(" "))):[[],[]]}get _visibleClassList(){return this.visibleClass?this.visibleClass.split(",").map((t=>t.split(" "))):[[],[]]}get _invisibleClassList(){return this.invisibleClass?this.invisibleClass.split(",").map((t=>t.split(" "))):[[],[]]}get _enteringClassList(){return this.enteringClass?this.enteringClass.split(",").map((t=>t.split(" "))):[[],[]]}get _leavingClassList(){return this.leavingClass?this.leavingClass.split(",").map((t=>t.split(" "))):[[],[]]}get enterTimeout(){return(this.data.get("enterTimeout")||"0,0").split(",").map((t=>parseInt(t)))}get leaveTimeout(){return(this.data.get("leaveTimeout")||"0,0").split(",").map((t=>parseInt(t)))}}i.targets=["menu","button"],i.values={open:Boolean};class a extends t{connect(){this.toggleClass=this.data.get("class")||"hidden",this.backgroundId=this.data.get("backgroundId")||"modal-background",this.backgroundHtml=this.data.get("backgroundHtml")||this._backgroundHTML(),this.allowBackgroundClose="true"===(this.data.get("allowBackgroundClose")||"true"),this.preventDefaultActionOpening="true"===(this.data.get("preventDefaultActionOpening")||"true"),this.preventDefaultActionClosing="true"===(this.data.get("preventDefaultActionClosing")||"true")}disconnect(){this.close()}open(t){this.preventDefaultActionOpening&&t.preventDefault(),t.target.blur&&t.target.blur(),this.lockScroll(),this.containerTarget.classList.remove(this.toggleClass),this.data.get("disable-backdrop")||(document.body.insertAdjacentHTML("beforeend",this.backgroundHtml),Line truncated
+