0.3.0

Reviewed-on: #65

README.md

@@ -45,11 +45,6 @@ manual LDIF imports etc. (or provide a staging instance)
 
 * [Tailwind CSS](https://tailwindcss.com/)
 
-**Caveat:** if you only add Tailwind classes/directives to templates or
-helpers, but there's no change in the stylesheet files, then the new directives
-won't be compiled in production. In this case, count up the version comment at
-the top of `app/javascript/stylesheets/application.scss` to trigger compilation.
-
 ### Testing
 
 * [RSpec](https://rspec.info/documentation/)

app/assets/stylesheets/components/base.css

@@ -18,4 +18,12 @@
   h3 {
     @apply text-xl mb-6;
   }
+
+  main section {
+    @apply pt-8 sm:pt-12;
+  }
+
+  main section:first-of-type {
+    @apply pt-0;
+  }
 }

app/assets/stylesheets/components/buttons.css

@@ -1,6 +1,6 @@
 @layer components {
   .btn {
-    @apply font-semibold rounded-md leading-none cursor-pointer
+    @apply font-semibold rounded-md leading-none cursor-pointer text-center
            transition-colors duration-75 focus:outline-none focus:ring-4;
   }
 

app/assets/stylesheets/legacy/_layout.scss

@@ -85,10 +85,6 @@ main {
     }
   }
 
-  section {
-    margin-bottom: 3rem;
-  }
-
   table {
     width: 100%;
 

app/components/main_compact_component.html.erb

@@ -1,5 +1,5 @@
 <main class="w-full max-w-xl mx-auto pb-12 px-4 sm:px-6 lg:px-8">
-  <div class="bg-white rounded-lg shadow px-6 py-12 sm:px-12">
+  <div class="bg-white rounded-lg shadow px-6 sm:px-12 py-8 sm:py-12">
     <%= content %>
   </div>
 </main>

app/components/main_simple_component.html.erb

@@ -1,5 +1,5 @@
-<main class="w-full max-w-6xl mx-auto pb-12 px-4 sm:px-6 lg:px-8">
+<main class="w-full max-w-6xl mx-auto pb-12 px-4 md:px-6 lg:px-8">
-  <div class="bg-white rounded-lg shadow px-6 py-12 sm:px-12">
+  <div class="bg-white rounded-lg shadow px-6 sm:px-12 py-8 sm:py-12">
     <%= content %>
   </div>
 </main>

app/components/main_with_sidenav_component.html.erb

@@ -0,0 +1,15 @@
+<main class="w-full max-w-6xl mx-auto pb-12 px-4 md:px-6 lg:px-8">
+  <div class="bg-white rounded-lg shadow">
+    <div class="divide-y divide-gray-200 lg:grid lg:grid-cols-12 lg:divide-y-0 lg:divide-x">
+      <aside class="py-6 sm:py-8 lg:col-span-3">
+        <nav class="space-y-1">
+          <%= render partial: @sidenav_partial %>
+        </nav>
+      </aside>
+      <div class="lg:col-span-9 px-6 sm:px-12 py-8 sm:pt-10 sm:pb-12">
+        <%= content %>
+      </div>
+    </div>
+  </div>
+</main>
+

app/components/main_with_sidenav_component.rb

@@ -0,0 +1,7 @@
+# frozen_string_literal: true
+
+class MainWithSidenavComponent < ViewComponent::Base
+  def initialize(sidenav_partial:)
+    @sidenav_partial = sidenav_partial
+  end
+end

app/components/sidenav_link_component.html.erb

@@ -0,0 +1,4 @@
+<%= link_to @path, class: @link_class do %>
+  <%= render partial: "icons/#{@icon}", locals: { custom_class: @icon_class } %>
+  <span class="truncate"><%= @name %></span>
+<% end %>

app/components/sidenav_link_component.rb

@@ -0,0 +1,33 @@
+# frozen_string_literal: true
+
+class SidenavLinkComponent < ViewComponent::Base
+  def initialize(name:, path:, icon:, active: false, disabled: false)
+    @name = name
+    @path = path
+    @icon = icon
+    @active = active
+    @disabled = disabled
+    @link_class = class_names_link(path)
+    @icon_class = class_names_icon(path)
+  end
+
+  def class_names_link(path)
+    if @active
+      "bg-teal-50 border-teal-500 text-teal-700 hover:bg-teal-50 hover:text-teal-700 group border-l-4 px-4 py-2 flex items-center text-base font-medium" 
+    elsif @disabled
+      "border-transparent text-gray-400 hover:bg-gray-50 group border-l-4 px-4 py-2 flex items-center text-base font-medium"
+    else
+      "border-transparent text-gray-900 hover:bg-gray-50 hover:text-gray-900 group border-l-4 px-4 py-2 flex items-center text-base font-medium"
+    end
+  end
+
+  def class_names_icon(path)
+    if @active
+      "text-teal-500 group-hover:text-teal-500 flex-shrink-0 -ml-1 mr-3 h-6 w-6"
+    elsif @disabled
+      "text-gray-300 group-hover:text-gray-300 flex-shrink-0 -ml-1 mr-3 h-6 w-6"
+    else
+      "text-gray-400 group-hover:text-gray-500 flex-shrink-0 -ml-1 mr-3 h-6 w-6"
+    end
+  end
+end

app/controllers/lnurlpay_controller.rb

@@ -3,6 +3,7 @@ class LnurlpayController < ApplicationController
 
   MIN_SATS = 100
   MAX_SATS = 1_000_000
+  MAX_COMMENT_CHARS = 100
 
   def index
     render json: {
@@ -12,22 +13,32 @@ class LnurlpayController < ApplicationController
       maxSendable: MAX_SATS * 1000, # msat
       minSendable: MIN_SATS * 1000, # msat
       metadata: metadata(@user.address),
-      commentAllowed: 0
+      commentAllowed: MAX_COMMENT_CHARS
     }
   end
 
   def invoice
     amount = params[:amount].to_i / 1000 # msats
     address = params[:address]
+    comment = params[:comment] || ""
 
     if !valid_amount?(amount)
       render json: { status: "ERROR", reason: "Invalid amount" }
       return
     end
 
+    if !valid_comment?(comment)
+      render json: { status: "ERROR", reason: "Comment too long" }
+      return
+    end
+
+    memo = "Sats for #{address}"
+    memo = "#{memo}: \"#{comment}\"" if comment.present?
+
     payment_request = @user.ln_create_invoice({
       amount: amount, # we create invoices in sats
-      description_hash: Digest::SHA2.hexdigest(metadata(address))
+      memo: memo,
+      description_hash: Digest::SHA2.hexdigest(metadata(address)),
     })
 
     render json: {
@@ -57,4 +68,8 @@ class LnurlpayController < ApplicationController
     amount_in_sats <= MAX_SATS && amount_in_sats >= MIN_SATS
   end
 
+  def valid_comment?(comment)
+    comment.length <= MAX_COMMENT_CHARS
+  end
+
 end

app/services/lndhub.rb

@@ -49,6 +49,7 @@ class Lndhub
   def addinvoice(payload)
     invoice = post "addinvoice", {
       amt: payload[:amount],
+      memo: payload[:memo],
       description_hash: payload[:description_hash]
     }
 

app/views/devise/confirmations/new.html.erb

@@ -14,7 +14,7 @@
     </p>
     <p class="mt-8">
       <%= f.submit "Resend confirmation link",
-                   class: 'btn-md btn-blue w-full md:w-auto' %>
+                   class: 'btn-md btn-blue w-full sm:w-auto' %>
     </p>
   <% end %>
 

app/views/devise/passwords/new.html.erb

@@ -17,7 +17,7 @@
                                 class: "w-full md:w-3/5"%>
     </p>
     <p class="mt-8">
-      <%= f.submit "Send me a reset link", class: 'btn-md btn-blue w-full md:w-auto' %>
+      <%= f.submit "Send me a reset link", class: 'btn-md btn-blue w-full sm:w-auto' %>
     </p>
   <% end %>
 

app/views/devise/sessions/new.html.erb

@@ -15,7 +15,7 @@
                                       class: "w-full md:w-3/5"%>
     </p>
     <p class="mt-8">
-      <%= f.submit "Log in", class: 'btn-md btn-blue w-full md:w-auto' %>
+      <%= f.submit "Log in", class: 'btn-md btn-blue w-full sm:w-auto' %>
     </p>
   <% end %>
 

app/views/donations/index.html.erb

@@ -2,15 +2,12 @@
 
 <%= render MainSimpleComponent.new do %>
   <section>
-    <p>
+    <p class="mb-12">
       Your financial contributions to the development and upkeep of Kosmos
       software and services.
     </p>
-  </section>
-
-  <section>
     <% if @donations.any? %>
-      <ul class="donations list-none">
+      <ul class="list-none">
         <% @donations.each do |donation| %>
           <li class="mb-8 grid gap-y-2 gap-x-8 grid-cols-2 items-center">
             <h3 class="mb-0">
@@ -36,7 +33,7 @@
         <% end %>
       </ul>
     <% else %>
-      <p>
+      <p class="text-gray-500">
         No donations to show.
       </p>
     <% end %>

app/views/icons/_key.html.erb

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-key"><path d="M21 2l-2 2m-7.61 7.61a5.5 5.5 0 1 1-7.778 7.778 5.5 5.5 0 0 1 7.777-7.777zm0 0L15.5 7.5m0 0l3 3L22 7l-3-3m-3.5 3.5L19 4"></path></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-key <%= custom_class %>"><path d="M21 2l-2 2m-7.61 7.61a5.5 5.5 0 1 1-7.778 7.778 5.5 5.5 0 0 1 7.777-7.777zm0 0L15.5 7.5m0 0l3 3L22 7l-3-3m-3.5 3.5L19 4"></path></svg>

app/views/icons/_settings.html.erb

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-settings"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-settings <%= custom_class %>"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>

app/views/icons/_shield.html.erb

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-shield"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-shield <%= custom_class %>"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path></svg>

app/views/invitations/index.html.erb

@@ -6,12 +6,7 @@
       <p>
         Invite your friends to a Kosmos account by sharing an invitation URL with them:
       </p>
-    <% end %>
+      <table class="mt-12">
-  </section>
-
-  <section>
-    <% if @invitations_unused.any? %>
-      <table>
         <thead>
           <tr class="text-left">
             <th>URL</th>

app/views/security/index.html.erb

@@ -1,15 +1,12 @@
-<%= render HeaderComponent.new(title: "Account") %>
+<%= render HeaderComponent.new(title: "Settings") %>
 
-<%= render MainSimpleComponent.new do %>
+<%= render MainWithSidenavComponent.new(sidenav_partial: 'shared/sidenav_settings') do %>
   <section>
-    <h2>Security</h2>
+    <h3>Password</h3>
-  </section>
+    <p class="mb-12">Use the following button to request an email with a password reset link:</p>
-
-  <section>
-    <h3>Password change</h3>
     <p>
       <%= form_with(url: settings_reset_password_path, method: :post) do %>
-        <%= submit_tag("Send me a password reset link", class: 'btn-md btn-gray') %>
+        <%= submit_tag("Send me a password reset link", class: 'btn-md btn-gray w-full sm:w-auto') %>
       <% end %>
     </p>
   </section>

app/views/shared/_main_nav.html.erb

@@ -6,5 +6,5 @@
       class: main_nav_class(@current_section, :contributions) %>
 <%= link_to "Wallet", wallet_path,
       class: main_nav_class(@current_section, :wallet) %>
-<%= link_to "Account", security_path,
+<%= link_to "Settings", security_path,
       class: main_nav_class(@current_section, :security) %>

app/views/shared/_sidenav_settings.html.erb

@@ -0,0 +1,10 @@
+<%= render SidenavLinkComponent.new(
+  name: "Account", path: "#", icon: "settings", disabled: true
+) %>
+<%= render SidenavLinkComponent.new(
+  name: "Password", path: security_path, icon: "key",
+  active: current_page?(security_path)
+) %>
+<%= render SidenavLinkComponent.new(
+  name: "Security", path: "#", icon: "shield", disabled: true
+) %>

app/views/signup/index.html.erb

@@ -10,6 +10,7 @@
     by invitation. Seems like you have good friends!
   </p>
   <p class="mt-12">
-    <%= link_to "Get started", signup_steps_path(1), class: "btn btn-md btn-blue" %>
+    <%= link_to "Get started", signup_steps_path(1),
+          class: "btn-md btn-blue block w-full md:inline-block sm:w-auto" %>
   </p>
 <% end %>

app/views/signup/steps.html.erb

@@ -1,8 +1,8 @@
 <%= render HeaderCompactComponent.new(title: "Signup") %>
 
 <%= render MainCompactComponent.new do %>
-  <% case @step %>
+  <% case @step
-  <% when 1 %>
+     when 1 %>
     <h2>Choose a username</h2>
     <%= form_for @user, :url => signup_validate_url do |f| %>
       <p>
@@ -16,7 +16,8 @@
         <p class="error-msg">Username <%= @validation_error %></p>
       <% end %>
       <p class="mt-12">
-        <%= f.submit "Continue", class: 'btn btn-md btn-blue' %>
+        <%= f.submit "Continue",
+              class: "btn-md btn-blue block w-full md:inline-block sm:w-auto" %>
       </p>
     <% end %>
 
@@ -32,7 +33,8 @@
         <p class="error-msg">Email <%= @validation_error %></p>
       <% end %>
       <p class="mt-12">
-        <%= f.submit "Continue", class: 'btn btn-md btn-blue' %>
+        <%= f.submit "Continue",
+              class: "btn-md btn-blue block w-full md:inline-block sm:w-auto" %>
       </p>
     <% end %>
 
@@ -53,7 +55,8 @@
         and Privacy Policy. Don't worry, they will be excellent!
       </p>
       <p class="mt-8">
-        <%= f.submit "Create account", class: 'btn-md btn-blue' %>
+        <%= f.submit "Create account",
+              class: "btn-md btn-blue block w-full sm:inline-block sm:w-auto" %>
       </p>
     <% end %>
   <% end %>

app/views/wallet/index.html.erb

@@ -42,10 +42,10 @@
       code/URL:
     </p>
     <p class="my-6 text-center md:text-left">
-      <button id="copy-setup-code" class="btn-md btn-blue">Copy setup code/URL</button>
+      <button id="copy-setup-code" class="btn-md btn-blue w-full sm:w-auto">Copy setup code/URL</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">Show setup QR code</button>
+      <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="btn-md btn-blue hidden">Hide 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 @svg %>

package.json

@@ -12,7 +12,7 @@
     "sass": "^1.49.7",
     "tailwindcss": "^3.0.22"
   },
-  "version": "0.2.0",
+  "version": "0.3.0",
   "scripts": {
     "build:css:sass": "sass ./app/assets/stylesheets/legacy.sass.scss ./app/assets/builds/legacy.css --no-source-map --load-path=node_modules",
     "build:css:tailwind": "tailwindcss --postcss -i ./app/assets/stylesheets/application.tailwind.css -o ./app/assets/builds/application.css",