masks 0.3.1 → 0.4.0

data/app/views/masks/actors/current.html.erb

@@ -52,7 +52,6 @@
     </div>
   </div>
 
-
   <div class="divider text-xs">
     <%= t(".credentials") %>
   </div>
@@ -64,9 +63,8 @@
       <%= t(".password") %>
     </span>
     <a
-      href="<%=  password_path %>"
-      class="btn btn-sm btn-ghost hover:btn-secondary"
-    >
+      href="<%= password_path %>"
+      class="btn btn-sm btn-ghost hover:btn-secondary">
       <%= t(".change") %>
     </a>
   </div>
@@ -83,16 +81,14 @@
     </span>
     <a
       href="<%= one_time_codes_path %>"
-      class="btn btn-sm btn-ghost hover:btn-secondary"
-    >
+      class="btn btn-sm btn-ghost hover:btn-secondary">
       <%= @actor.totp_secret ? t(".manage") : t(".enable") %>
     </a>
   </div>
 
   <% if @actor.factor2? %>
     <div
-      class="alert text-left flex items-center gap-4 <%= @actor.saved_backup_codes? ? 'bg-neutral' : 'bg-base-100' %>"
-    >
+      class="alert text-left flex items-center gap-4 <%= @actor.saved_backup_codes? ? 'bg-neutral' : 'bg-base-100' %>">
       <% if @actor.saved_backup_codes? %>
         <%= lucide_icon("check-circle-2", class: "stroke-success") %>
       <% else %>
@@ -103,16 +99,14 @@
       </span>
       <a
         href="<%= backup_codes_path %>"
-        class="btn btn-sm btn-ghost hover:btn-secondary"
-      >
+        class="btn btn-sm btn-ghost hover:btn-secondary">
         <%= @actor.saved_backup_codes? ? t(".manage") : t(".enable") %>
       </a>
     </div>
   <% end %>
 
     <div
-      class="alert text-left flex items-center gap-4 <%= @actor.keys.any? ? 'bg-neutral' : 'bg-base-100' %>"
-    >
+      class="alert text-left flex items-center gap-4 <%= @actor.keys.any? ? 'bg-neutral' : 'bg-base-100' %>">
       <% if @actor.keys.any? %>
         <%= lucide_icon("check-circle-2", class: "stroke-success") %>
       <% else %>
@@ -123,8 +117,7 @@
       </span>
       <a
         href="<%= keys_path %>"
-        class="btn btn-sm btn-ghost hover:btn-secondary"
-      >
+        class="btn btn-sm btn-ghost hover:btn-secondary">
         <%= @actor.keys.any? ? t(".add_more_key") : t(".add_key") %>
       </a>
     </div>

data/app/views/masks/application/_header.html.erb

@@ -2,12 +2,11 @@
   <div class="flex-1">
     <% if @config.site_url %>
       <a
-        href="<%=@config.site_url%>"
-        class="text-xl flex items-center gap-3 hover:underline"
-      >
+        href="<%= @config.site_url %>"
+        class="text-xl flex items-center gap-3 hover:underline">
         <% if @config.site_logo %>
           <div class="w-7 h-7 overflow-hidden">
-            <img src="<%=@config.site_logo%>"/>
+            <img src="<%= @config.site_logo %>">
           </div>
         <% else %>
           <%= lucide_icon("lock") %>

data/app/views/masks/backup_codes/new.html.erb

@@ -44,25 +44,32 @@
     <%= form_with url: backup_codes_path, method: :post, class: 'w-full'  do |form| %>
       <div class="divider my-2"></div>
       <div class="flex items-center mb-2 gap-4">
-        <%= lucide_icon("shield-check") %>
-        <div class="flex items-center gap-4">
+        <label class="flex gap-3 items-center w-full flex-grow input input-bordered" data-controller="password-visibility">
+          <%= lucide_icon("shield-check") %>
+
           <input
             type="password"
-            name="session[password]"
+            data-password-visibility-target="input"
+            spellcheck="false"
             placeholder="<%= t('.placeholder.password') %>"
-            class="input w-full"
-          />
+            name="session[password]"
+            class="w-full flex-grow">
+
+          <button data-action="password-visibility#toggle" type="button" class="btn btn-sm btn-ghost -mr-2">
+            <span data-password-visibility-target="icon"><%= lucide_icon('eye') %></span>
+            <span data-password-visibility-target="icon" class="hidden"><%= lucide_icon('eye-off') %></span>
+          </button>
+        </label>
           <%= form.submit t(".enable"),
                       name: "backup_codes[enable]",
                       class: "btn btn-secondary",
                       data: {
                         one_time_code_target: "submit",
                       } %>
-        </div>
       </div>
     <% end %>
   <% else %>
-    <div class="alert bg-neutral my-4">
+    <div class="alert bg-neutral my-4 flex items-center gap-4">
       <%= lucide_icon("download", class: "stroke-success") %>
 
       <span>
@@ -74,28 +81,35 @@
 
     <div class="join join-vertical">
       <div class="join-item bg-base-100 flex gap-3 alert">
-        <span class="text-sm">
+        <span class="text-sm text-left">
           <%= t(".reset_codes") %>
         </span>
       </div>
 
       <%= form_with url: backup_codes_path, method: :post, class: 'w-full'  do |form| %>
         <div class="alert join-item flex items-center gap-4">
-          <%= lucide_icon("shield-check") %>
-          <div class="flex items-center gap-4">
+          <label class="flex gap-3 items-center w-full flex-grow input input-bordered" data-controller="password-visibility">
+            <%= lucide_icon("shield-check") %>
+
             <input
               type="password"
-              name="session[password]"
+              data-password-visibility-target="input"
+              spellcheck="false"
               placeholder="<%= t('.placeholder.password') %>"
-              class="input input-sm w-full"
-            />
-            <%= form.submit t(".delete"),
-                        name: "backup_codes[reset]",
-                        class: "btn btn-sm btn-outline hover:btn-error",
-                        data: {
-                          one_time_code_target: "submit",
-                        } %>
-          </div>
+              name="session[password]"
+              class="w-full flex-grow">
+
+            <button data-action="password-visibility#toggle" type="button" class="btn btn-sm btn-ghost -mr-2">
+              <span data-password-visibility-target="icon"><%= lucide_icon('eye') %></span>
+              <span data-password-visibility-target="icon" class="hidden"><%= lucide_icon('eye-off') %></span>
+            </button>
+          </label>
+          <%= form.submit t(".delete"),
+                      name: "backup_codes[reset]",
+                      class: "btn btn-sm btn-outline hover:btn-error",
+                      data: {
+                        one_time_code_target: "submit",
+                      } %>
         </div>
       <% end %>
     </div>

data/app/views/masks/emails/new.html.erb

@@ -37,7 +37,7 @@
               <% elsif email.expired? %>
                 <%= t(".expired_verification") %>
                 <%= form_with url: emails_path, method: :patch do |form| %>
-                  <input type="hidden" name="email[value]" value="<%= email.email %>"/>
+                  <input type="hidden" name="email[value]" value="<%= email.email %>">
                   <button type="submit" class="underline">
                     <%= t(".resend") %>
                   </button>
@@ -48,7 +48,7 @@
             </span>
           </span>
           <%= form_with url: emails_path, method: :delete, class: 'flex items-center gap-4' do |form| %>
-            <input type="hidden" name="email[value]" value="<%= email.email %>"/>
+            <input type="hidden" name="email[value]" value="<%= email.email %>">
             <button type="submit">
               <%= lucide_icon("x", class: "stroke-error") %>
             </button>
@@ -68,7 +68,7 @@
   <% end %>
   <div class=" <%= @emails.empty? ? 'mt-2' : '' %>">
     <%= form_with url: emails_path, method: :post, class: 'pt-2 flex flex-col gap-2', data: { emails_target: 'add' } do |form| %>
-      <label class="flex gap-4 items-center">
+      <label class="flex gap-4 items-center input input-bordered">
         <%= lucide_icon("mail-plus") %>
         <input
           type="text"
@@ -76,20 +76,26 @@
           data-action="emails#updateEmail"
           placeholder="<%= t('.placeholder.email', count: @emails.length) %>"
           name="email[value]"
-          class="input w-full"
-        />
+          class="w-full">
       </label>
       <div class="flex items-center gap-2">
-        <label class="flex gap-4 items-center">
+        <label class="flex gap-3 items-center w-full flex-grow input input-bordered" data-controller="password-visibility">
           <%= lucide_icon("shield-check") %>
+
           <input
             type="password"
             data-emails-target="password"
             data-action="emails#updatePassword"
+            data-password-visibility-target="input"
+            spellcheck="false"
             placeholder="<%= t('.placeholder.password') %>"
             name="session[password]"
-            class="input w-full"
-          />
+            class="w-full flex-grow">
+
+          <button data-action="password-visibility#toggle" type="button" class="btn btn-sm btn-ghost -mr-2">
+            <span data-password-visibility-target="icon"><%= lucide_icon('eye') %></span>
+            <span data-password-visibility-target="icon" class="hidden"><%= lucide_icon('eye-off') %></span>
+          </button>
         </label>
         <%= form.submit t(".submit"),
                     class: "btn btn-info",

data/app/views/masks/keys/new.html.erb

@@ -15,7 +15,7 @@
       <%= lucide_icon('check') %>
       <div>
         <h3 class="font-bold">created "<%= flash[:key]['name'] %>"</h3>
-        <div class="text-xs">keep the secret somewhere safe:<br /><span class="font-mono"><%= flash[:key]['secret'] %></span></div>
+        <div class="text-xs">keep the secret somewhere safe:<br><span class="font-mono"><%= flash[:key]['secret'] %></span></div>
       </div>
     </div>
   <% elsif flash[:notice] %>
@@ -40,20 +40,20 @@
         <%= lucide_icon('key') %>
       </div>
 
-      <input type="text" name="key[name]" placeholder="<%= t('.placeholder.name') %>" class="input input-bordered input-sm w-full" />
+      <input type="text" name="key[name]" placeholder="<%= t('.placeholder.name') %>" class="input input-bordered input-sm w-full">
 
       <button class="w-4 h-4 flex items-center" data-action="keys#toggleSettings">
         <%= lucide_icon('settings-2') %>
       </button>
 
-      <%= form.submit t('.add'), class: 'btn btn-sm'  %>
+      <%= form.submit t('.add'), class: 'btn btn-sm' %>
     </div>
 
     <div class="bg-base-200 join-item p-4 max-h-[260px] overflow-auto <%= @actor.keys.any? ? 'hidden' : '' %>" data-keys-target="settings">
       <div class="font-bold text-sm mb-2">
         secret
       </div>
-      <input type="password" name="key[secret]" placeholder="<%= t('.placeholder.secret') %>" class="input input-bordered input-sm w-full" />
+      <input type="password" name="key[secret]" placeholder="<%= t('.placeholder.secret') %>" class="input input-bordered input-sm w-full">
 
       <% if @actor.scopes.any? %>
         <div class="font-bold text-sm my-4 mb-2">
@@ -63,13 +63,13 @@
           <div class="form-control w-full">
             <label class="cursor-pointer label">
               <span class="label-text font-mono"><%= scope %></span>
-              <input type="checkbox" class="toggle toggle-success toggle-sm" name="key[scopes][]" value="<%= scope %>" />
+              <input type="checkbox" class="toggle toggle-success toggle-sm" name="key[scopes][]" value="<%= scope %>">
             </label>
           </div>
         <% end %>
       <% end %>
     </div>
-  <% end%>
+  <% end %>
 
   <% if @actor.keys.any? %>
     <div class="">
@@ -109,7 +109,7 @@
             </td>
             <td class="whitespace-nowrap">
               <%= form_with(url: keys_path, method: :delete) do |form| %>
-                <input type="hidden" name="id" value="<%= key.id %>" />
+                <input type="hidden" name="id" value="<%= key.id %>">
 
                 <button class="btn btn-circle btn-ghost btn-xs" type="submit">
                   <span class="flex items-center w-4 h-4">

data/app/views/masks/manage/actors/index.html.erb

@@ -1,40 +1,104 @@
-<h1 class="text-sm font-bold mb-4 mt-0 divider">
-  actors
-</h1>
-
-<div class="overflow-x-auto">
-  <table class="table bg-base-100">
-    <!-- head -->
-    <thead>
-      <tr>
-        <th>name</th>
-        <th>last login</th>
-        <th></th>
-      </tr>
-    </thead>
-    <tbody>
-      <% @actors.each do |actor| %>
+<div data-controller="dialog" data-action="click->dialog#backdropClose">
+  <div class="mb-6 flex items-center gap-2">
+    <%= lucide_icon('user', class: 'w-5 h-5') %>
+
+    <h1 class="font-bold flex-grow">
+      actors
+    </h1>
+    <button class="btn btn-sm btn-ghost btn-primary"  data-action="dialog#open">
+      <span class="">
+        <%= lucide_icon('plus-square', class: 'w-5 h-5') %>
+      </span>
+
+      new
+    </button>
+  </div>
+
+  <% if flash[:errors]&.any? %>
+    <div role="alert" class="alert alert-error mb-4 mt-0">
+      <%= lucide_icon('x-circle') %>
+      <div>
+        <h3 class="font-bold">failed to add actor...</h3>
+        <ul class="list-disc pl-4">
+          <% flash[:errors].each do |error| %>
+            <li><%= error %></li>
+          <% end %>
+        </ul>
+      </div>
+    </div>
+  <% end %>
+
+  <dialog class="modal" data-dialog-target="dialog">
+    <div class="modal-box">
+      <form method="dialog">
+        <button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2"><%= lucide_icon('x') %></button>
+      </form>
+
+      <h3 class="mb-4 ml-1 font-bold flex items-center gap-2">
+        <%= lucide_icon('user-plus', size: 16) %>
+        new actor
+      </h3>
+
+      <%= form_with url: manage_actors_path, method: :post do |form| %>
+        <label class="form-control input input-bordered flex flex-row gap-4 items-center flex-grow mb-2">
+          nickname
+
+          <input placeholder="enter a name for the client..." type="text" name="nickname" class="grow" />
+        </label>
+
+        <label class="form-control input input-bordered w-full flex flex-row items-center gap-4 mb-4" data-controller="password-visibility">
+          password
+
+          <input
+            type="password"
+            data-password-visibility-target="input"
+            spellcheck="false"
+            placeholder="enter a password..."
+            name="password"
+            class="flex-grow">
+
+          <button data-action="password-visibility#toggle" type="button" class="btn btn-sm btn-ghost -mr-2">
+            <span data-password-visibility-target="icon"><%= lucide_icon('eye') %></span>
+            <span data-password-visibility-target="icon" class="hidden"><%= lucide_icon('eye-off') %></span>
+          </button>
+        </label>
+
+        <div class="modal-actions">
+          <input type="submit" class="btn btn-sm btn-success" value="save" />
+        </div>
+      <% end %>
+    </div>
+  </dialog>
+
+  <div class="overflow-x-auto">
+    <table class="table bg-base-100">
+      <!-- head -->
+      <thead>
         <tr>
-          <td>
-            <div class="flex items-center gap-3">
-              <div class="avatar">
-                <div class="mask mask-squircle w-6 h-6 p-0.5 bg-neutral box-border">
-                  <%= lucide_icon('user', class: 'w-5 h-5') %>
-                </div>
-              </div>
-              <div class="font-bold"><%= actor.nickname %></div>
-            </div>
-          </td>
-          <td class="text-xs whitespace-nowrap">
-            <%= time_ago_in_words(actor.last_login_at) %> ago
-          </td>
-          <td class="text-right">
-            <a href="<%= actor_path(actor) %>" class="btn btn-ghost btn-xs">manage</a>
-          </td>
+          <th>name</th>
+          <th class="text-right">last login</th>
         </tr>
-      <% end %>
-    </tbody>
-  </table>
-</div>
+      </thead>
+      <tbody>
+        <% @actors.each do |actor| %>
+          <tr data-action="click->table#click" data-controller="table" class="cursor-pointer">
+            <td>
+              <a data-table-target="url" href="<%= manage_actor_path(actor) %>" class="font-bold"><%= actor.nickname %></a>
+            </td>
+            <td class="text-xs whitespace-nowrap text-right">
+              <% if actor.last_login_at %>
+                <%= time_ago_in_words(actor.last_login_at) %> ago
+              <% else %>
+                never logged in
+              <% end %>
+            </td>
+          </tr>
+        <% end %>
+      </tbody>
+    </table>
+  </div>
 
-<%== pagy_nav(@pagy) %>
+  <% if @pagy.pages > 1 %>
+    <%== pagy_nav(@pagy) %>
+  <% end%>
+</div>

data/app/views/masks/manage/{actor → actors}/show.html.erb

@@ -1,18 +1,30 @@
 <div class="flex flex-col gap-1 mb-4">
   <div class="flex items-center gap-2">
-              <div class="avatar">
-                <div class="mask mask-squircle w-6 h-6 p-0.5 bg-neutral box-border">
-                  <%= lucide_icon('user', class: 'w-5 h-5') %>
-                </div>
-              </div>
+    <%= lucide_icon('user', class: 'w-5 h-5') %>
 
     <div class="text-xl font-bold">
       <%= @actor.nickname %>
     </div>
   </div>
+</div>
 
+<% if flash[:info] %>
+  <div role="alert" class="alert alert-info mb-4 mt-0 flex items-center">
+    <%= lucide_icon('info') %>
+    <div>
+      <h3 class="font-bold"><%= flash[:info] %></h3>
+    </div>
+  </div>
+<% end %>
 
-</div>
+<% if flash[:error] %>
+  <div role="alert" class="alert alert-error mb-4 mt-0 flex items-center">
+    <%= lucide_icon('alert-triangle') %>
+    <div>
+      <h3 class="font-bold"><%= flash[:error] %></h3>
+    </div>
+  </div>
+<% end %>
 
 <div class="bg-base-300 flex flex-col gap-4 p-4 rounded-xl mb-4">
   <div class="flex items-center gap-4">
@@ -21,7 +33,7 @@
       <div class="text-sm flex-grow">
         <b class="text-neutral-content">last login</b> <%= time_ago_in_words(@actor.last_login_at) %> ago
       </div>
-      <%= form_with url: actor_path(@actor), method: :patch do |form| %>
+      <%= form_with url: manage_actor_path(@actor), method: :patch do |form| %>
         <input type="submit" class="btn hover:btn-error btn-xs" name="logout" value="logout">
       <% end %>
     <% else %>
@@ -31,7 +43,7 @@
     <% end %>
   </div>
 
-  <div class="flex items-center gap-4">
+  <div class="flex items-center gap-4" data-controller="dialog" data-action="click->dialog#backdropClose">
     <%= lucide_icon('unlock', class: 'w-4 h-4') %>
       <div class="text-sm flex-grow">
     <% if @actor.changed_password_at %>
@@ -41,9 +53,43 @@
     <% end %>
       </div>
 
-    <%= form_with url: actor_path(@actor), method: :patch do |form| %>
-      <input type="submit" class="btn hover:btn-error btn-xs" name="reset_password" value="reset">
-    <% end %>
+    <button data-action="dialog#open" type="button" class="btn hover:btn-error btn-xs">
+      change
+    </button>
+
+    <dialog class="modal" data-dialog-target="dialog">
+      <div class="modal-box">
+        <form method="dialog">
+          <button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2"><%= lucide_icon('x') %></button>
+        </form>
+
+        <h3 class="mb-4 font-bold flex items-center gap-2">
+          <%= lucide_icon('lock-keyhole', size: 16) %>
+          change password
+        </h3>
+
+        <%= form_with url: manage_actor_path(@actor), method: :patch do |form| %>
+          <label class="form-control input input-bordered w-full flex flex-row items-center gap-2 mb-4" data-controller="password-visibility">
+            <input
+              type="password"
+              data-password-visibility-target="input"
+              spellcheck="false"
+              placeholder="enter a new password..."
+              name="change_password"
+              class="flex-grow">
+
+            <button data-action="password-visibility#toggle" type="button" class="btn btn-sm btn-ghost -mr-2">
+              <span data-password-visibility-target="icon"><%= lucide_icon('eye') %></span>
+              <span data-password-visibility-target="icon" class="hidden"><%= lucide_icon('eye-off') %></span>
+            </button>
+          </label>
+
+          <div class="modal-actions">
+            <input type="submit" class="btn btn-sm btn-success" value="change" />
+          </div>
+        <% end %>
+      </div>
+    </dialog>
   </div>
 
   <div class="flex items-center gap-4">
@@ -53,7 +99,7 @@
 
     </div>
     <% if @actor.factor2? %>
-      <%= form_with url: actor_path(@actor), method: :patch do |form| %>
+      <%= form_with url: manage_actor_path(@actor), method: :patch do |form| %>
         <input type="submit" class="btn hover:btn-error btn-xs" name="remove_factor2" value="remove">
       <% end %>
     <% end %>
@@ -81,7 +127,7 @@
             <tr>
               <td class="italic" colspan="2">no emails added...</td>
             </tr>
-        <% end%>
+        <% end %>
       </tbody>
     </table>
   </div>
@@ -98,11 +144,11 @@
       <tbody>
           <tr>
             <td colspan="2">
-                <%= form_with url: actor_path(@actor), method: :patch do |form| %>
+                <%= form_with url: manage_actor_path(@actor), method: :patch do |form| %>
               <div class="flex items-center gap-2">
                   <%= lucide_icon('plus-square', class: 'text-base-300-content') %>
-                  <input type="text" name="add_scope" class="flex-grow input input-sm" placeholder="add a scope..." />
-                  <input type="submit" class="btn btn-sm" value="add" />
+                  <input type="text" name="add_scope" class="flex-grow input input-sm" placeholder="add a scope...">
+                  <input type="submit" class="btn btn-sm" value="add">
               </div>
                  <% end %>
             </td>
@@ -111,7 +157,7 @@
           <tr>
             <td class="font-mono w-full"><%= scope %></td>
             <td class="">
-              <%= form_with url: actor_path(@actor), method: :patch do |form| %>
+              <%= form_with url: manage_actor_path(@actor), method: :patch do |form| %>
                 <input type="hidden" name="remove_scope" value="<%= scope %>">
 
                 <button type="submit" class="btn btn-ghost btn-error hover:btn-outline btn-xs">