masks 0.2.0

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

@@ -0,0 +1,127 @@
+<div data-controller="keys">
+  <div class="flex items-center gap-4 mb-4">
+    <div class="flex flex-col">
+      <h3 class="font-bold">
+        <%= t(".heading") %>
+      </h3>
+      <span class="text-xs">
+        <%= t(".added") %>
+      </span>
+    </div>
+  </div>
+
+  <% if flash[:key] %>
+    <div role="alert" class="alert alert-success shadow-lg mb-4 flex items-center gap-4 text-left">
+      <%= 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>
+    </div>
+  <% elsif flash[:notice] %>
+    <div class="alert alert-info shadow-lg mb-4 flex items-center gap-4 text-left">
+      <%= lucide_icon('info') %>
+      <span>
+        <%= flash[:notice] %>
+      </span>
+    </div>
+  <% elsif flash[:error] %>
+      <div class="alert alert-error shadow-lg mb-4 flex items-center gap-2 text-left">
+        <%= lucide_icon('x-circle') %>
+        <span>
+          <%= flash[:error] %>
+        </span>
+      </div>
+  <% end %>
+
+  <%= form_with(url: keys_path, method: :post, class: 'join join-vertical w-full') do |form| %>
+    <div class="p-4 bg-base-100 join-item rounded-xl flex gap-3 items-center max-w-full">
+      <div class="w-4 h-4 flex items-center">
+        <%= lucide_icon('key') %>
+      </div>
+
+      <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'  %>
+    </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" />
+
+      <% if @actor.scopes.any? %>
+        <div class="font-bold text-sm my-4 mb-2">
+          scopes
+        </div>
+        <% @actor.scopes.each do |scope| %>
+          <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 %>" />
+            </label>
+          </div>
+        <% end %>
+      <% end %>
+    </div>
+  <% end%>
+
+  <% if @actor.keys.any? %>
+    <div class="">
+      <table class="table">
+        <tbody>
+        <% @actor.keys.latest.each do |key| %>
+          <tr>
+            <td>
+              <div class="dropdown dropdown-start mr-1">
+                <div tabindex="0" role="button flex items-center gap-1">
+                  <span class="inline-block underline decoration-wavy truncate md:max-w-full max-w-[150px] cursor-help"><%= key.name %></span>
+
+                  <% if key.scopes&.any? %>
+                    <span class="inline-block text-xs">(<%= key.scopes.length %>)</span>
+                  <% end %>
+                </div>
+                <div tabindex="0" class="card compact dropdown-content z-[1] shadow bg-base-100 rounded-box">
+                  <div tabindex="0" class="card-body">
+                    <% if key.scopes&.any? %>
+                      <p class="font-bold text-sm mb-2">scopes</p>
+
+                      <ul class="text-left">
+                        <% key.scopes.each do |scope| %>
+                          <li class="font-mono"><%= scope %></li>
+                        <% end %>
+                      </ul>
+                      <div class="divider my-0"></div>
+                    <% end %>
+
+                    <h2 class="whitespace-nowrap card-title font-normal italic text-sm">created <%= time_ago_in_words(key.created_at) %> ago</h2>
+                  </div>
+                </div>
+              </div>
+            </td>
+            <td class="w-full whitespace-nowrap">
+              <span class="text-xs"><%= time_ago_in_words(key.created_at) %> ago</span>
+            </td>
+            <td class="whitespace-nowrap">
+              <%= form_with(url: keys_path, method: :delete) do |form| %>
+                <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">
+                    <%= lucide_icon('trash-2') %>
+                  </span>
+                </button>
+              <% end %>
+            </td>
+          </tr>
+        <% end %>
+        </tbody>
+      </table>
+    </div>
+  <% end %>
+</div>

data/app/views/masks/manage/actor/show.html.erb

@@ -0,0 +1,126 @@
+<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>
+
+    <div class="text-xl font-bold">
+      <%= @actor.nickname %>
+    </div>
+  </div>
+
+
+</div>
+
+<div class="bg-base-300 flex flex-col gap-4 p-4 rounded-xl mb-4">
+  <div class="flex items-center gap-4">
+    <%= lucide_icon('log-in', class: 'w-4 h-4') %>
+    <% if @actor.last_login_at %>
+      <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| %>
+        <input type="submit" class="btn hover:btn-error btn-xs" name="logout" value="logout">
+      <% end %>
+    <% else %>
+      <div class="text-sm">
+        never logged in
+      </div>
+    <% end %>
+  </div>
+
+  <div class="flex items-center gap-4">
+    <%= lucide_icon('unlock', class: 'w-4 h-4') %>
+      <div class="text-sm flex-grow">
+    <% if @actor.changed_password_at %>
+        <b class="text-neutral-content">password</b> changed <%= time_ago_in_words(@actor.changed_password_at) %> ago
+    <% else %>
+        <b class="text-neutral-content">password</b> never changed
+    <% 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 %>
+  </div>
+
+  <div class="flex items-center gap-4">
+    <%= lucide_icon('key-square', class: 'w-4 h-4') %>
+    <div class="text-sm flex-grow">
+      <b class="text-neutral-content">secondary</b> credentials <span class="italic <%= @actor.factor2? ? 'text-success' : "text-error" %>"><%= @actor.factor2? ? 'enabled' : 'disabled' %></span>
+
+    </div>
+    <% if @actor.factor2? %>
+      <%= form_with url: actor_path(@actor), method: :patch do |form| %>
+        <input type="submit" class="btn hover:btn-error btn-xs" name="remove_factor2" value="remove">
+      <% end %>
+    <% end %>
+  </div>
+</div>
+
+<div class="mb-4">
+  <div class="overflow-x-auto max-h-96 rounded-xl">
+    <table class="table table-pin-rows bg-base-300">
+      <thead>
+        <tr class="">
+          <th class="py-2 w-full">emails</th>
+          <th class="py-2"><%= @actor.emails.any? ? 'verified?' : '' %></th>
+        </tr>
+      </thead>
+      <tbody>
+        <% if @actor.emails.any? %>
+          <% @actor.emails.each do |email| %>
+            <tr>
+              <td class="w-full whitespace-nowrap"><%= email.email %></td>
+              <td class=""><%= lucide_icon(email.verified? ? 'check' : 'x', class: 'w-4 h-4') %></td>
+            </tr>
+          <% end %>
+        <% else %>
+            <tr>
+              <td class="italic" colspan="2">no emails added...</td>
+            </tr>
+        <% end%>
+      </tbody>
+    </table>
+  </div>
+</div>
+
+  <div class="overflow-x-auto max-h-96 rounded-xl">
+    <table class="table table-pin-rows bg-base-300">
+      <thead>
+        <tr class="">
+          <th class="py-2 w-full">scopes</th>
+          <th class="py-2"></th>
+        </tr>
+      </thead>
+      <tbody>
+          <tr>
+            <td colspan="2">
+                <%= form_with url: 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" />
+              </div>
+                 <% end %>
+            </td>
+          </tr>
+        <% @actor.scopes.each do |scope| %>
+          <tr>
+            <td class="font-mono w-full"><%= scope %></td>
+            <td class="">
+              <%= form_with url: 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">
+                  <%= lucide_icon('x', class: 'w-4 h-4') %>
+                </button>
+              <% end %>
+            </td>
+          </tr>
+        <% end %>
+      </tbody>
+    </table>
+  </div>

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

@@ -0,0 +1,40 @@
+<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| %>
+        <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>
+        </tr>
+      <% end %>
+    </tbody>
+  </table>
+</div>
+
+<%== pagy_nav(@pagy) %>

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

@@ -0,0 +1,150 @@
+<div data-controller="one_time_code">
+  <div class="flex items-center gap-4">
+    <div class="flex flex-col">
+      <h3 class="font-bold">
+        <%= t(".heading") %>
+      </h3>
+      <span class="text-xs">
+        <%= t(".tfa") %>
+        —
+        <span class="italic">
+          <%= @actor.totp_secret ? t(".enabled") : t(".disabled") %>
+        </span>
+      </span>
+    </div>
+  </div>
+
+  <% if !@actor.totp_secret %>
+    <div class='divider my-2 mb-4'></div>
+    <div class="">
+      <div class="">
+        <div class="flex gap-4">
+          <div class="w-[125px] h-[125px] rounded-md overflow-hidden">
+            <%= totp_svg(@actor.totp_uri, module_size: 2.35, fill: "fff", offset: 5) %>
+          </div>
+          <div class="max-w-[175px] space-y-3 mb-2">
+            <div>
+              <%= t(".enable_qr") %>
+            </div>
+            <div class="text-sm">
+              <%= t(".enable_manual") %>
+            </div>
+          </div>
+        </div>
+
+        <div class="text-sm flex items-center gap-3 mt-3">
+          <span class="font-bold text-xs">
+            <%= t(".secret") %>
+          </span>
+          <span class="flex-grow">
+            <input
+              class="input input-xs w-full"
+              name="secret"
+              value="<%= @actor.random_totp_secret %>"
+            />
+          </span>
+        </div>
+        <div class='divider mt-3 mb-2 text-xs'></div>
+      </div>
+      <div class="mb-4 flex items-center">
+        next, enter your password and the one-time code shown in your
+        authenticator app.
+      </div>
+
+      <% if flash[:errors]&.any? %>
+        <div role="alert" class="alert mb-2">
+          <div class="flex items-center gap-4">
+            <%= lucide_icon("x", class: "stroke-error") %>
+            <span><%= flash[:errors][0] %></span>
+          </div>
+        </div>
+      <% end %>
+
+      <%= form_with url: one_time_code_path, method: :post, class: 'pt-2 flex flex-col gap-2', data: { one_time_code_target: 'add' } do |form| %>
+        <input
+          type="hidden"
+          name="one_time_code[secret]"
+          value="<%= @actor.random_totp_secret %>"
+        />
+        <label class="flex gap-3 items-center">
+          <%= lucide_icon("shield-check") %>
+          <input
+            type="password"
+            data-one-time-password-target="password"
+            data-action="one_time_code#updatePassword"
+            placeholder="<%= t('.placeholder.password') %>"
+            name="session[password]"
+            class="input w-full"
+          />
+        </label>
+        <div class="flex items-center gap-2">
+          <label class="flex gap-3 items-center">
+            <%= lucide_icon("key-square") %>
+            <input
+              type="password"
+              data-one-time-password-target="code"
+              data-action="one_time_code#updateCode"
+              placeholder="<%= t('.placeholder.otp') %>"
+              name="one_time_code[code]"
+              class="input w-full"
+            />
+          </label>
+          <%= form.submit t(".submit"),
+                      class: "btn btn-secondary",
+                      data: {
+                        one_time_code_target: "submit",
+                      } %>
+        </div>
+      <% end %>
+    </div>
+  <% else %>
+    <div class="join join-vertical">
+      <div class="join-item alert bg-neutral mt-4">
+        <%= lucide_icon("check", class: "stroke-success") %>
+        <h3>
+          after login you will be asked to enter a one-time code, a backup
+          code, or use a different secondary credential.
+        </h3>
+      </div>
+      <div
+        class="join-item card bg-base-100 pt-2 pb-3 px-4 w-full text-right"
+        role="alert"
+      >
+        <a href="<%= backup_codes_path %>" class="text-sm underline">
+          <%= t(@actor.should_save_backup_codes? ? ".backup_codes" : ".reset_codes") %>
+        </a>
+      </div>
+    </div>
+
+    <div class='divider my-4 text-xs'><%= t(".delete_div") %></div>
+
+    <%= form_with url: one_time_code_path, method: :delete, class: '', data: { one_time_code_target: 'add' } do |form| %>
+      <input
+        type="hidden"
+        name="one_time_code[secret]"
+        value="<%= @actor.random_totp_secret %>"
+      />
+
+      <div class="alert py-2">
+        <%= lucide_icon("shield-check") %>
+        <label class="flex gap-3 items-center flex-grow">
+          <input
+            type="password"
+            data-one-time-password-target="password"
+            data-action="one_time_code#updatePassword"
+            placeholder="<%= t('.placeholder.delete') %>"
+            name="session[password]"
+            class="input input-sm input-bordered w-full"
+          />
+        </label>
+        <div>
+          <%= form.submit t(".delete"),
+                      class: "btn hover:btn-error btn-outline btn-sm",
+                      data: {
+                        one_time_code_target: "submit",
+                      } %>
+        </div>
+      </div>
+    <% end %>
+  <% end %>
+</div>

data/app/views/masks/passwords/edit.html.erb

@@ -0,0 +1,58 @@
+<div class="space-y-3">
+  <div class="flex flex-col">
+    <span class="font-bold">
+      your password
+    </span>
+    <span class="text-xs">
+      last changed
+      <% if @actor.changed_password_at %>
+        <%= time_ago_in_words(@actor.changed_password_at) %>
+        ago
+      <% else %>
+        <span class="italic">
+          never
+        </span>
+      <% end %>
+    </span>
+  </div>
+  <% if flash[:errors]&.any? %>
+    <div role="alert" class="alert mb-2">
+      <div class="flex items-center gap-4">
+        <%= lucide_icon("x", class: "stroke-error") %>
+        <span><%= flash[:errors][0] %></span>
+      </div>
+    </div>
+  <% end %>
+
+  <%= form_with url: password_path, method: :post, class: 'pt-2 flex flex-col gap-2', data: { password_target: 'add' } do |form| %>
+    <label class="flex gap-3 items-center">
+      <%= lucide_icon("shield-plus") %>
+      <input
+        type="password"
+        data-password-target="code"
+        data-action="password#updateChanged"
+        placeholder="<%= t('.placeholder.change') %>"
+        name="password[change]"
+        class="input w-full"
+      />
+    </label>
+    <div class="flex items-center gap-2">
+      <label class="flex gap-3 items-center">
+        <%= lucide_icon("shield-check") %>
+        <input
+          type="password"
+          data-password-target="password"
+          data-action="password#updatePassword"
+          placeholder="<%= t('.placeholder.password') %>"
+          name="session[password]"
+          class="input w-full"
+        />
+      </label>
+      <%= form.submit t(".submit"),
+                  class: "btn btn-secondary",
+                  data: {
+                    password_target: "submit",
+                  } %>
+    </div>
+  <% end %>
+</div>

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

@@ -0,0 +1,71 @@
+<div data-controller="recover">
+  <% if flash[:recovery] %>
+    <div role="alert" class="alert alert-success shadow-lg mb-4 flex items-center gap-4 text-left">
+      <%= lucide_icon('check') %>
+      <div>
+        <h3 class="font-bold"><%= t('.submitted.heading') %></h3>
+        <div class="text-xs"><%= t('.submitted.description') %></div>
+      </div>
+    </div>
+  <% else %>
+  <div role="alert" class="alert mb-4 text-left">
+    <div class="flex flex-col">
+      <div class="flex items-center gap-4">
+        <%= lucide_icon("shield-question", class: "stroke-info") %>
+        <span class="flex-grow"><%= t(".heading") %></span>
+        <div class="dropdown dropdown-bottom dropdown-end">
+          <div tabindex="0" role="button" class="btn btn-xs text-sm -mr-2"><%= t(".help_button") %></div>
+          <div
+            tabindex="0"
+            class="
+              dropdown-content z-[1] mt-4 card card-compact w-[275px] px-2 pb-2 shadow bg-info
+              text-info-content
+            "
+          >
+            <div class="card-body">
+              <h4 class="card-title"><%= t(".help_title") %></h4>
+              <span><%= t(".help_body") %></span>
+              <% if t('.support_url', default: false) %>
+                <span class="italic">
+                  <%= t(".help_more") %>
+                  <a class="not-italic underline" href="<%= t('.support_url') %>"><%= t(".help_contact") %></a>
+                </span>
+              <% end %>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="divider my-1 -mr-4"></div>
+      <div class="text-sm -mr-2">
+        <%= t(".subheading") %>
+      </div>
+    </div>
+  </div>
+  <% end %>
+  <%= form_with url: recover_path, method: :post do |form| %>
+    <div class="flex flex-col gap-4">
+      <label class="form-control w-full">
+        <input
+          type="text"
+          data-recover-target="input"
+          data-action="recover#updateInput"
+          placeholder="<%= t('.placeholder') %>"
+          name="recover[value]"
+          class="input input-bordered w-full"
+        />
+      </label>
+      <div class="flex items-center gap-4">
+        <%= form.submit t(".submit"),
+                    class: "btn btn-active btn-info",
+                    data: {
+                      recover_target: "submit",
+                    },
+                    disabled: true %>
+        <div class="text-xs opacity-60">
+          or
+          <a href="<%= Masks.configuration.site_links[:login] %>" class="underline"><%= t(".back") %></a>
+        </div>
+      </div>
+    </div>
+  <% end %>
+</div>

data/app/views/masks/recoveries/password.html.erb

@@ -0,0 +1,64 @@
+<% if @recovery %>
+  <div data-controller="recover-password">
+    <div role="alert" class="alert mb-4">
+      <div class="flex flex-col">
+        <div class="flex items-center gap-4">
+          <%= lucide_icon("rotate-cw", class: "stroke-warning") %>
+          <span class="flex-grow font-bold"><%= t(".heading") %></span>
+        </div>
+        <div class="divider my-1 -mr-4"></div>
+        <div class="text-sm -mr-4">
+          <%= t(".subheading") %>
+        </div>
+      </div>
+    </div>
+    <% if flash[:errors]&.any? %>
+      <div role="alert" class="alert alert-error mb-4">
+        <%= lucide_icon("x") %>
+        <%= flash[:errors][0] %>
+      </div>
+    <% end %>
+
+    <%= form_with url: recover_password_path, method: :post do |form| %>
+      <div class="flex flex-col gap-4">
+        <div class="flex items-center gap-4">
+          <input type="hidden" name="token" value="<%= @recovery.token %>"/>
+          <input
+            type="text"
+            data-recover-password-target="password"
+            data-action="recover-password#updatePassword"
+            placeholder="<%= t('.placeholder') %>"
+            name="recover[password]"
+            class="input input-bordered w-full"
+          />
+          <%= form.submit t(".submit"),
+                      class: "btn btn-warning btn-info",
+                      data: {
+                        recover_password_target: "submit",
+                      } %>
+        </div>
+      </div>
+    <% end %>
+  </div>
+<% else %>
+  <div role="alert" class="alert mb-4">
+    <div class="flex flex-col">
+      <div class="flex items-center gap-4">
+        <%= lucide_icon(
+          flash[:reset] ? "rotate-cw" : "x",
+          class: flash[:reset] ? "stroke-success" : "stroke-error",
+        ) %>
+        <span class="flex-grow font-bold"><%= flash[:reset] ? t(".heading_success") : t(".heading_expired") %></span>
+      </div>
+      <div class="divider my-1 -mr-4"></div>
+      <div class="text-sm -mr-4">
+        <%= flash[:reset] ? t(".subheading_success") : t(".subheading_expired") %>
+      </div>
+      <% if flash[:reset] %>
+        <div class="text-sm -mr-4 mt-3">
+          <a href="<%= Masks.configuration.site_links[:login] %>" class="underline"><%= t(".login") %></a>
+        </div>
+      <% end %>
+    </div>
+  </div>
+<% end %>