@opengis/fastify-table 2.4.0 → 2.4.2

package/dist/server/routes/widget/controllers/widget.get.js

@@ -39,49 +39,49 @@ export default async function widgetGet({ pg = pgClients.client, user = {}, para
     }
     const sqls = {
         comment: pg.pk["admin.users"]
-            ? `select communication_id, entity_id, body, subject, c.cdate, c.uid, 
-    ${username} as username, u.login, u.avatar
-    from crm.communications c
-    left join admin.users u on u.uid=c.uid 
+            ? `select communication_id, entity_id, body, subject, c.cdate, c.uid, 
+    ${username} as username, u.login, u.avatar
+    from crm.communications c
+    left join admin.users u on u.uid=c.uid 
     where entity_id=$1 order by cdate desc`
             : "select communication_id, entity_id, body, subject, cdate, uid from crm.communications where entity_id=$1 order by cdate desc",
-        history: `SELECT change_id, entity_id, entity_type, change_type, change_date, a.change_user_id, a.uid, a.cdate, b.json_agg as changes,
-      ${username} as username, u.login, u.avatar
-      FROM log.table_changes a
-      left join admin.users u on a.change_user_id = u.uid
-      left join lateral(
-        select json_agg(row_to_json(q)) from (
-          select change_data_id, entity_key, value_new, value_old from log.table_changes_data
-          where change_id=a.change_id
-        )q
-      )b on 1=1
-      where a.change_type != 'INSERT' and b.json_agg is not null and (entity_id=$1 or entity_id in (
-        select communication_id from crm.communications where entity_id=$1
-        union all select checklist_id from crm.checklists where entity_id=$1
-        union all select file_id from crm.files where entity_id=$1) 
-      )
+        history: `SELECT change_id, entity_id, entity_type, change_type, change_date, a.change_user_id, a.uid, a.cdate, b.json_agg as changes,
+      ${username} as username, u.login, u.avatar
+      FROM log.table_changes a
+      left join admin.users u on a.change_user_id = u.uid
+      left join lateral(
+        select json_agg(row_to_json(q)) from (
+          select change_data_id, entity_key, value_new, value_old from log.table_changes_data
+          where change_id=a.change_id
+        )q
+      )b on 1=1
+      where a.change_type != 'INSERT' and b.json_agg is not null and (entity_id=$1 or entity_id in (
+        select communication_id from crm.communications where entity_id=$1
+        union all select checklist_id from crm.checklists where entity_id=$1
+        union all select file_id from crm.files where entity_id=$1) 
+      )
       order by cdate desc limit 100`,
         checklist: pg.pk["admin.users"]
-            ? `SELECT checklist_id, entity_id, subject, is_done, done_date, c.uid, c.cdate, ${username} as username, u.login, u.avatar
-      FROM crm.checklists c
-      left join admin.users u on u.uid=c.uid
+            ? `SELECT checklist_id, entity_id, subject, is_done, done_date, c.uid, c.cdate, ${username} as username, u.login, u.avatar
+      FROM crm.checklists c
+      left join admin.users u on u.uid=c.uid
       where entity_id=$1 order by cdate desc`
             : "SELECT checklist_id, entity_id, subject, is_done, done_date, uid, cdate FROM crm.checklists where entity_id=$1 order by cdate desc",
         file: pg.pk["admin.users"]
-            ? `SELECT file_id, entity_id, entity_type, file_path, uploaded_name, ext, size, c.uid, c.cdate, file_type, c.ismain, 
-    ${username} as username, u.login, isverified, u.avatar, u.uid as author, file_status 
-    FROM crm.files c 
-    left join admin.users u on u.uid=c.uid
+            ? `SELECT file_id, entity_id, entity_type, file_path, uploaded_name, ext, size, c.uid, c.cdate, file_type, c.ismain, 
+    ${username} as username, u.login, isverified, u.avatar, u.uid as author, file_status 
+    FROM crm.files c 
+    left join admin.users u on u.uid=c.uid
     where entity_id=$1 and file_status<>3 order by cdate desc`
-            : `SELECT file_id, entity_id, entity_type, file_path, uploaded_name, ext, size, uid, cdate, file_type, ismain,
+            : `SELECT file_id, entity_id, entity_type, file_path, uploaded_name, ext, size, uid, cdate, file_type, ismain,
       isverified, uid as author, file_status FROM crm.files c where entity_id=$1 and file_status<>3 order by cdate desc`,
         gallery: pg.pk["admin.users"]
-            ? `SELECT file_id, entity_id, entity_type, file_path, uploaded_name, ext, size, c.uid, c.cdate, file_type, c.ismain,
-    ${username} as username, u.login, u.avatar, isverified, u.avatar, c.uid as author, file_status 
-    FROM crm.files c 
-    left join admin.users u on u.uid=c.uid
+            ? `SELECT file_id, entity_id, entity_type, file_path, uploaded_name, ext, size, c.uid, c.cdate, file_type, c.ismain,
+    ${username} as username, u.login, u.avatar, isverified, u.avatar, c.uid as author, file_status 
+    FROM crm.files c 
+    left join admin.users u on u.uid=c.uid
     where entity_id=$1 and file_status<>3 and ext = any($2) order by cdate desc`
-            : `SELECT file_id, entity_id, entity_type, file_path, uploaded_name, ext, size, c.uid, c.cdate, file_type, ismain,
+            : `SELECT file_id, entity_id, entity_type, file_path, uploaded_name, ext, size, c.uid, c.cdate, file_type, ismain,
       isverified, uid as author, file_status FROM crm.files c where entity_id=$1 and file_status<>3 and ext = any($2) order by cdate desc`,
         reaction: "SELECT count(*), reaction_type FROM crm.reactions c where entity_id=$1 group by reaction_type",
     };
@@ -127,7 +127,7 @@ export default async function widgetGet({ pg = pgClients.client, user = {}, para
     }
     const cdateColumn = columns.find((col) => ["cdate", "created_at"].includes(col.name))?.name;
     const editorDateColumn = columns.find((col) => ["editor_date", "updated_at"].includes(col.name))?.name;
-    const q1 = `select ${username} as author, u.login ${cdateColumn ? `,a.${cdateColumn} as cdate` : ""} ${editorDateColumn ? `,a.${editorDateColumn} as editor_date` : ""} from ${tableName} a 
+    const q1 = `select ${username} as author, u.login ${cdateColumn ? `,a.${cdateColumn} as cdate` : ""} ${editorDateColumn ? `,a.${editorDateColumn} as editor_date` : ""} from ${tableName} a 
   left join admin.users u on a.${authorIdColumn}=u.uid where a.${pk}=$1 limit 1`;
     const data = pg.pk["admin.users"] && pk && tableName
         ? await pg

package/dist/server/routes/widget/controllers/widget.set.js

@@ -68,9 +68,9 @@ export default async function widgetSet(req, reply) {
             uid: user?.uid,
         });
         if (type === "gallery") {
-            await pg.query(`update crm.files set ismain=true 
-      where entity_id=$1 
-      and file_id=$2 
+            await pg.query(`update crm.files set ismain=true 
+      where entity_id=$1 
+      and file_id=$2 
       and (select count(*) = 0 from crm.files where entity_id=$1 and ismain)`, [objectid, rows[0]?.file_id]);
         }
         return {

package/dist/server/templates/page/2factor-recovery.html

@@ -1,102 +1,102 @@
-<!DOCTYPE html>
-<html lang="en" dir="" class="relative min-h-full">
-  <head>
-    <!-- scripts -->
-    <script src="https://cdn.tailwindcss.com"></script>
-  </head>
-  <body class="bg-white dark:bg-neutral-900">
-    <main class="flex min-h-full">    
-
-      <!-- Content -->
-      <div class="grow px-5">
-        <div class="h-full min-h-screen sm:w-[448px] flex flex-col justify-center mx-auto space-y-5">
-
-          {{#if codes}}
-            <div><h1 class="text-xl sm:text-2xl font-semibold text-gray-800 dark:text-neutral-200">Your recovery codes:</h1></div>
-          {{/if}}
-          {{#if recovery}}
-            <div>
-              <a href="/2factor/recovery" class="py-2.5 px-3 w-full inline-flex justify-center items-center gap-x-2 text-sm font-semibold rounded-lg border border-transparent bg-blue-600 text-white hover:bg-blue-700 disabled:opacity-50 disabled:pointer-events-none dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-neutral-600">
-                Send recovery code via E-mail
-              </a>
-                <h1 class="text-xl sm:text-2xl font-semibold text-gray-800 dark:text-neutral-200">Reset 2factor settings via recovery code:</h1>
-            </div>
-          {{/if}}
-
-          <form action="/2factor/recovery" method="post">
-            <div class="space-y-5">
-              <div>
-                <label for="hs-pro-dale" class="block mb-2 text-sm font-medium text-gray-800 dark:text-white">
-                  Code
-                </label>
-
-                {{#if query.recovery}}
-                <input type="text" name="code" id="hs-pro-dale" class="py-2.5 px-3 block w-full border-gray-200 rounded-lg text-sm placeholder:text-gray-400 focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none dark:bg-transparent dark:border-neutral-700 dark:text-neutral-300 dark:placeholder:text-white/60 dark:focus:ring-neutral-600" placeholder="999999">
-                {{^}}
-                
-                <input type="text" name="code"  class="form-input hidden">
-                   <div class="space-y-5">
-                   <div class="my-3 flex gap-x-2" data-hs-pin-input>
-                  <input id="input-1" type="text" class="input-code block w-[38px] h-[38px] text-center border rounded-md focus:outline-blue-600" >
-                  <input id="input-2" type="text" class="input-code block w-[38px] h-[38px] text-center border rounded-md focus:outline-blue-600" >
-                  <input id="input-3" type="text" class="input-code block w-[38px] h-[38px] text-center border rounded-md focus:outline-blue-600" >
-                  <input id="input-4" type="text" class="input-code block w-[38px] h-[38px] text-center border rounded-md focus:outline-blue-600" >
-                  <input id="input-5" type="text" class="input-code block w-[38px] h-[38px] text-center border rounded-md focus:outline-blue-600" >
-                  <input id="input-6" type="text" class="input-code block w-[38px] h-[38px] text-center border rounded-md focus:outline-blue-600" >
-                </div>
-                </div>
-                {{/if}}
-              </div>
-
-              <button type="submit" class="py-2.5 px-3 w-full inline-flex justify-center items-center gap-x-2 text-sm font-semibold rounded-lg border border-transparent bg-blue-600 text-white hover:bg-blue-700 disabled:opacity-50 disabled:pointer-events-none dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-neutral-600">
-                Reset 2factor settings
-              </button>
-            </div>
-          </form>
-
-        </div>
-      </div>
-      <!-- End Content -->
-    </main><script>
-  const inputs = document.querySelectorAll(".input-code");
-  const formInput = document.querySelector(".form-input");
-
-  const inputTextToInput = (event) => {
-    const input = event.target;
-    const value = input.value;
-
-    if (value.length > 1) {
-      input.value = value.slice(-1); 
-    }
-
-    const currentIndex = Array.from(inputs).indexOf(input);
-    if (value && currentIndex < inputs.length - 1) {
-      inputs[currentIndex + 1].focus();
-    }
-
-    const combinedValue = Array.from(inputs)
-      .map((input) => input.value)
-      .join("");
-
-    formInput.value = combinedValue;
-  };
-
-  const handleBackspace = (event) => {
-    const input = event.target;
-
-    if (event.key === "Backspace" && input.value === "") {
-      const currentIndex = Array.from(inputs).indexOf(input);
-      if (currentIndex > 0) {
-        inputs[currentIndex - 1].focus();
-      }
-    }
-  };
-
-  inputs.forEach((input) => {
-    input.addEventListener("input", inputTextToInput);
-    input.addEventListener("keydown", handleBackspace);
-  });
-</script>
-  </body>
-
+<!DOCTYPE html>
+<html lang="en" dir="" class="relative min-h-full">
+  <head>
+    <!-- scripts -->
+    <script src="https://cdn.tailwindcss.com"></script>
+  </head>
+  <body class="bg-white dark:bg-neutral-900">
+    <main class="flex min-h-full">    
+
+      <!-- Content -->
+      <div class="grow px-5">
+        <div class="h-full min-h-screen sm:w-[448px] flex flex-col justify-center mx-auto space-y-5">
+
+          {{#if codes}}
+            <div><h1 class="text-xl sm:text-2xl font-semibold text-gray-800 dark:text-neutral-200">Your recovery codes:</h1></div>
+          {{/if}}
+          {{#if recovery}}
+            <div>
+              <a href="/2factor/recovery" class="py-2.5 px-3 w-full inline-flex justify-center items-center gap-x-2 text-sm font-semibold rounded-lg border border-transparent bg-blue-600 text-white hover:bg-blue-700 disabled:opacity-50 disabled:pointer-events-none dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-neutral-600">
+                Send recovery code via E-mail
+              </a>
+                <h1 class="text-xl sm:text-2xl font-semibold text-gray-800 dark:text-neutral-200">Reset 2factor settings via recovery code:</h1>
+            </div>
+          {{/if}}
+
+          <form action="/2factor/recovery" method="post">
+            <div class="space-y-5">
+              <div>
+                <label for="hs-pro-dale" class="block mb-2 text-sm font-medium text-gray-800 dark:text-white">
+                  Code
+                </label>
+
+                {{#if query.recovery}}
+                <input type="text" name="code" id="hs-pro-dale" class="py-2.5 px-3 block w-full border-gray-200 rounded-lg text-sm placeholder:text-gray-400 focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none dark:bg-transparent dark:border-neutral-700 dark:text-neutral-300 dark:placeholder:text-white/60 dark:focus:ring-neutral-600" placeholder="999999">
+                {{^}}
+                
+                <input type="text" name="code"  class="form-input hidden">
+                   <div class="space-y-5">
+                   <div class="my-3 flex gap-x-2" data-hs-pin-input>
+                  <input id="input-1" type="text" class="input-code block w-[38px] h-[38px] text-center border rounded-md focus:outline-blue-600" >
+                  <input id="input-2" type="text" class="input-code block w-[38px] h-[38px] text-center border rounded-md focus:outline-blue-600" >
+                  <input id="input-3" type="text" class="input-code block w-[38px] h-[38px] text-center border rounded-md focus:outline-blue-600" >
+                  <input id="input-4" type="text" class="input-code block w-[38px] h-[38px] text-center border rounded-md focus:outline-blue-600" >
+                  <input id="input-5" type="text" class="input-code block w-[38px] h-[38px] text-center border rounded-md focus:outline-blue-600" >
+                  <input id="input-6" type="text" class="input-code block w-[38px] h-[38px] text-center border rounded-md focus:outline-blue-600" >
+                </div>
+                </div>
+                {{/if}}
+              </div>
+
+              <button type="submit" class="py-2.5 px-3 w-full inline-flex justify-center items-center gap-x-2 text-sm font-semibold rounded-lg border border-transparent bg-blue-600 text-white hover:bg-blue-700 disabled:opacity-50 disabled:pointer-events-none dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-neutral-600">
+                Reset 2factor settings
+              </button>
+            </div>
+          </form>
+
+        </div>
+      </div>
+      <!-- End Content -->
+    </main><script>
+  const inputs = document.querySelectorAll(".input-code");
+  const formInput = document.querySelector(".form-input");
+
+  const inputTextToInput = (event) => {
+    const input = event.target;
+    const value = input.value;
+
+    if (value.length > 1) {
+      input.value = value.slice(-1); 
+    }
+
+    const currentIndex = Array.from(inputs).indexOf(input);
+    if (value && currentIndex < inputs.length - 1) {
+      inputs[currentIndex + 1].focus();
+    }
+
+    const combinedValue = Array.from(inputs)
+      .map((input) => input.value)
+      .join("");
+
+    formInput.value = combinedValue;
+  };
+
+  const handleBackspace = (event) => {
+    const input = event.target;
+
+    if (event.key === "Backspace" && input.value === "") {
+      const currentIndex = Array.from(inputs).indexOf(input);
+      if (currentIndex > 0) {
+        inputs[currentIndex - 1].focus();
+      }
+    }
+  };
+
+  inputs.forEach((input) => {
+    input.addEventListener("input", inputTextToInput);
+    input.addEventListener("keydown", handleBackspace);
+  });
+</script>
+  </body>
+
 </html>

package/dist/server/templates/page/2factor.html

@@ -1,141 +1,141 @@
-<!DOCTYPE html>
-<html lang="en" dir="" class="relative min-h-full">
-  <head>
-    <!-- scripts -->
-    <script src="https://cdn.tailwindcss.com"></script>
-  </head>
-  <body class="bg-white dark:bg-neutral-900">
-    <main class="flex min-h-full">    
-
-      <!-- Content -->
-      <div class="grow px-5">
-        <div class="h-full min-h-screen sm:w-[448px] flex flex-col justify-center mx-auto space-y-5">
-          {{#if enabled}}
-            <a href="/2factor?recovery=1" class="py-2.5 px-3 w-full inline-flex justify-center items-center gap-x-2 text-sm font-medium rounded-lg border border-gray-200 bg-white text-gray-800 shadow-sm hover:bg-gray-50 disabled:opacity-50 disabled:pointer-events-none focus:outline-none focus:bg-gray-50 dark:bg-neutral-800 dark:border-neutral-700 dark:text-neutral-300 dark:hover:bg-neutral-700 dark:focus:bg-neutral-700">
-              <svg class="flex-shrink-0 size-4" width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
-                <path d="M27.2192 10.9088C27.0336 11.0528 23.7568 12.8992 23.7568 17.0048C23.7568 21.7536 27.9264 23.4336 28.0512 23.4752C28.032 23.5776 27.3888 25.776 25.8528 28.016C24.4832 29.9872 23.0528 31.9552 20.8768 31.9552C18.7008 31.9552 18.1408 30.6912 15.6288 30.6912C13.1808 30.6912 12.3104 31.9968 10.32 31.9968C8.3296 31.9968 6.9408 30.1728 5.344 27.9328C3.4944 25.3024 2 21.216 2 17.3376C2 11.1168 6.0448 7.8176 10.0256 7.8176C12.1408 7.8176 13.904 9.2064 15.232 9.2064C16.496 9.2064 18.4672 7.7344 20.8736 7.7344C21.7856 7.7344 25.0624 7.8176 27.2192 10.9088ZM19.7312 5.1008C20.7264 3.92 21.4304 2.2816 21.4304 0.6432C21.4304 0.416 21.4112 0.1856 21.3696 0C19.7504 0.0608 17.824 1.0784 16.6624 2.4256C15.7504 3.4624 14.8992 5.1008 14.8992 6.7616C14.8992 7.0112 14.9408 7.2608 14.96 7.3408C15.0624 7.36 15.2288 7.3824 15.3952 7.3824C16.848 7.3824 18.6752 6.4096 19.7312 5.1008Z" class="fill-black dark:fill-neutral-200" fill="currentColor"/>
-              </svg>
-              I lost access to my 2factor app
-            </a>
-          {{/if}}
-          <ul>
-              <!-- Step -->
-              <li class="relative ps-12 pb-10 last:pb-0 before:content-[counter(step)] before:absolute before:start-0 before:flex before:items-center before:justify-center before:size-7 before:text-xs before:font-semibold before:text-gray-800 before:rounded-full before:bg-gray-100 dark:before:bg-neutral-700 dark:before:text-neutral-200 last:after:hidden after:absolute after:top-9 after:bottom-2 after:start-3.5 after:w-px after:-translate-x-[0.5px] after:bg-gray-200 dark:after:bg-neutral-700" style="counter-increment: step 1;">
-                <span class="block font-semibold text-sm text-gray-800 dark:text-neutral-200">
-                  Download app
-                </span>
-                <a target="_blank" href="{{coalesce url 'https://play.google.com/store/apps/details?id=com.google.android.apps.authenticator2&pcampaignid=web_share'}}" class="text-[13px] text-gray-500 dark:text-neutral-500">
-                  Download a mobile authentication app.
-                </a>
-              </li>
-              <!-- End Step -->
-
-              {{#if qrCode}}
-                {{#unless enabled}}
-              <!-- Step -->
-              <li class="relative ps-12 pb-10 last:pb-0 before:content-[counter(step)] before:absolute before:start-0 before:flex before:items-center before:justify-center before:size-7 before:text-xs before:font-semibold before:text-gray-800 before:rounded-full before:bg-gray-100 dark:before:bg-neutral-700 dark:before:text-neutral-200 last:after:hidden after:absolute after:top-9 after:bottom-2 after:start-3.5 after:w-px after:-translate-x-[0.5px] after:bg-gray-200 dark:after:bg-neutral-700" style="counter-increment: step 1;">
-                <span class="block font-semibold text-sm text-gray-800 dark:text-neutral-200">
-                  Scan QR Code
-                </span>
-                <p class="text-[13px] text-gray-500 dark:text-neutral-500">
-                  Scan this QR code using a mobile authentication app. This will generate a verification code.
-                </p>
-
-                <div class="mt-3">
-                  <span class="p-1 inline-block border border-gray-300 rounded-lg dark:border-neutral-600">
-                    {{{qrCode}}}
-                  </span>
-                </div>
-                <div class="mt-3">
-                  <span class="p-1 inline-block border border-gray-300 rounded-lg dark:border-neutral-600">
-                    {{secretKey}}
-                  </span>
-                </div>
-              </li>
-              {{/unless}}
-              <!-- End Step -->
-              {{/if}}
-
-              <!-- Step -->
-              <li class="relative ps-12 pb-10 last:pb-0 before:content-[counter(step)] before:absolute before:start-0 before:flex before:items-center before:justify-center before:size-7 before:text-xs before:font-semibold before:text-gray-800 before:rounded-full before:bg-gray-100 dark:before:bg-neutral-700 dark:before:text-neutral-200 last:after:hidden after:absolute after:top-9 after:bottom-2 after:start-3.5 after:w-px after:-translate-x-[0.5px] after:bg-gray-200 dark:after:bg-neutral-700" style="counter-increment: step 1;">
-                <span class="block font-semibold text-sm text-gray-800 dark:text-neutral-200">
-                  Enter Code
-                </span>
-                <p class="text-[13px] text-gray-500 dark:text-neutral-500">
-                  Enter the 2-step verification code from your authenticator app.
-                </p>
-
-                <form action="/2factor/verify" method="post">
-                  <div class="space-y-5">
-                  <div>    
-                  <input type="text" name="code"  class="form-input hidden">
-                   <div class="space-y-5">
-                   <div class="my-3 flex gap-x-2" data-hs-pin-input>
-                  <input id="input-1" type="text" class="input-code block w-[38px] h-[38px] text-center border rounded-md focus:outline-blue-600" >
-                  <input id="input-2" type="text" class="input-code block w-[38px] h-[38px] text-center border rounded-md focus:outline-blue-600" >
-                  <input id="input-3" type="text" class="input-code block w-[38px] h-[38px] text-center border rounded-md focus:outline-blue-600" >
-                  <input id="input-4" type="text" class="input-code block w-[38px] h-[38px] text-center border rounded-md focus:outline-blue-600" >
-                  <input id="input-5" type="text" class="input-code block w-[38px] h-[38px] text-center border rounded-md focus:outline-blue-600" >
-                  <input id="input-6" type="text" class="input-code block w-[38px] h-[38px] text-center border rounded-md focus:outline-blue-600" >
-                </div>
-                </div>
-
-                    <button type="submit" class="py-2.5 px-3 w-full inline-flex justify-center items-center gap-x-2 text-sm font-semibold rounded-lg border border-transparent bg-blue-600 text-white hover:bg-blue-700 disabled:opacity-50 disabled:pointer-events-none dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-neutral-600">
-                      Sign in
-                    </button>
-                  </div>
-                </form>
-              </li>
-              <!-- End Step -->
-            
-          </ul>
-        </div>
-      </div>
-      <!-- End Content -->
-    </main>
-<script>
-  const inputs = document.querySelectorAll(".input-code");
-  const formInput = document.querySelector(".form-input");
-
-  const inputTextToInput = (event) => {
-    const input = event.target;
-    const value = input.value;
-
-    if (value.length > 1) {
-      input.value = value.slice(-1); 
-    }
-
-    const currentIndex = Array.from(inputs).indexOf(input);
-    if (value && currentIndex < inputs.length - 1) {
-      inputs[currentIndex + 1].focus();
-    }
-
-    const combinedValue = Array.from(inputs)
-      .map((input) => input.value)
-      .join("");
-
-    formInput.value = combinedValue;
-  };
-
-  const handleBackspace = (event) => {
-    const input = event.target;
-
-    if (event.key === "Backspace" && input.value === "") {
-      const currentIndex = Array.from(inputs).indexOf(input);
-      if (currentIndex > 0) {
-        inputs[currentIndex - 1].focus();
-      }
-    }
-  };
-
-  inputs.forEach((input) => {
-    input.addEventListener("input", inputTextToInput);
-    input.addEventListener("keydown", handleBackspace);
-  });
-</script>
-
-
-
-  </body>
-
+<!DOCTYPE html>
+<html lang="en" dir="" class="relative min-h-full">
+  <head>
+    <!-- scripts -->
+    <script src="https://cdn.tailwindcss.com"></script>
+  </head>
+  <body class="bg-white dark:bg-neutral-900">
+    <main class="flex min-h-full">    
+
+      <!-- Content -->
+      <div class="grow px-5">
+        <div class="h-full min-h-screen sm:w-[448px] flex flex-col justify-center mx-auto space-y-5">
+          {{#if enabled}}
+            <a href="/2factor?recovery=1" class="py-2.5 px-3 w-full inline-flex justify-center items-center gap-x-2 text-sm font-medium rounded-lg border border-gray-200 bg-white text-gray-800 shadow-sm hover:bg-gray-50 disabled:opacity-50 disabled:pointer-events-none focus:outline-none focus:bg-gray-50 dark:bg-neutral-800 dark:border-neutral-700 dark:text-neutral-300 dark:hover:bg-neutral-700 dark:focus:bg-neutral-700">
+              <svg class="flex-shrink-0 size-4" width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M27.2192 10.9088C27.0336 11.0528 23.7568 12.8992 23.7568 17.0048C23.7568 21.7536 27.9264 23.4336 28.0512 23.4752C28.032 23.5776 27.3888 25.776 25.8528 28.016C24.4832 29.9872 23.0528 31.9552 20.8768 31.9552C18.7008 31.9552 18.1408 30.6912 15.6288 30.6912C13.1808 30.6912 12.3104 31.9968 10.32 31.9968C8.3296 31.9968 6.9408 30.1728 5.344 27.9328C3.4944 25.3024 2 21.216 2 17.3376C2 11.1168 6.0448 7.8176 10.0256 7.8176C12.1408 7.8176 13.904 9.2064 15.232 9.2064C16.496 9.2064 18.4672 7.7344 20.8736 7.7344C21.7856 7.7344 25.0624 7.8176 27.2192 10.9088ZM19.7312 5.1008C20.7264 3.92 21.4304 2.2816 21.4304 0.6432C21.4304 0.416 21.4112 0.1856 21.3696 0C19.7504 0.0608 17.824 1.0784 16.6624 2.4256C15.7504 3.4624 14.8992 5.1008 14.8992 6.7616C14.8992 7.0112 14.9408 7.2608 14.96 7.3408C15.0624 7.36 15.2288 7.3824 15.3952 7.3824C16.848 7.3824 18.6752 6.4096 19.7312 5.1008Z" class="fill-black dark:fill-neutral-200" fill="currentColor"/>
+              </svg>
+              I lost access to my 2factor app
+            </a>
+          {{/if}}
+          <ul>
+              <!-- Step -->
+              <li class="relative ps-12 pb-10 last:pb-0 before:content-[counter(step)] before:absolute before:start-0 before:flex before:items-center before:justify-center before:size-7 before:text-xs before:font-semibold before:text-gray-800 before:rounded-full before:bg-gray-100 dark:before:bg-neutral-700 dark:before:text-neutral-200 last:after:hidden after:absolute after:top-9 after:bottom-2 after:start-3.5 after:w-px after:-translate-x-[0.5px] after:bg-gray-200 dark:after:bg-neutral-700" style="counter-increment: step 1;">
+                <span class="block font-semibold text-sm text-gray-800 dark:text-neutral-200">
+                  Download app
+                </span>
+                <a target="_blank" href="{{coalesce url 'https://play.google.com/store/apps/details?id=com.google.android.apps.authenticator2&pcampaignid=web_share'}}" class="text-[13px] text-gray-500 dark:text-neutral-500">
+                  Download a mobile authentication app.
+                </a>
+              </li>
+              <!-- End Step -->
+
+              {{#if qrCode}}
+                {{#unless enabled}}
+              <!-- Step -->
+              <li class="relative ps-12 pb-10 last:pb-0 before:content-[counter(step)] before:absolute before:start-0 before:flex before:items-center before:justify-center before:size-7 before:text-xs before:font-semibold before:text-gray-800 before:rounded-full before:bg-gray-100 dark:before:bg-neutral-700 dark:before:text-neutral-200 last:after:hidden after:absolute after:top-9 after:bottom-2 after:start-3.5 after:w-px after:-translate-x-[0.5px] after:bg-gray-200 dark:after:bg-neutral-700" style="counter-increment: step 1;">
+                <span class="block font-semibold text-sm text-gray-800 dark:text-neutral-200">
+                  Scan QR Code
+                </span>
+                <p class="text-[13px] text-gray-500 dark:text-neutral-500">
+                  Scan this QR code using a mobile authentication app. This will generate a verification code.
+                </p>
+
+                <div class="mt-3">
+                  <span class="p-1 inline-block border border-gray-300 rounded-lg dark:border-neutral-600">
+                    {{{qrCode}}}
+                  </span>
+                </div>
+                <div class="mt-3">
+                  <span class="p-1 inline-block border border-gray-300 rounded-lg dark:border-neutral-600">
+                    {{secretKey}}
+                  </span>
+                </div>
+              </li>
+              {{/unless}}
+              <!-- End Step -->
+              {{/if}}
+
+              <!-- Step -->
+              <li class="relative ps-12 pb-10 last:pb-0 before:content-[counter(step)] before:absolute before:start-0 before:flex before:items-center before:justify-center before:size-7 before:text-xs before:font-semibold before:text-gray-800 before:rounded-full before:bg-gray-100 dark:before:bg-neutral-700 dark:before:text-neutral-200 last:after:hidden after:absolute after:top-9 after:bottom-2 after:start-3.5 after:w-px after:-translate-x-[0.5px] after:bg-gray-200 dark:after:bg-neutral-700" style="counter-increment: step 1;">
+                <span class="block font-semibold text-sm text-gray-800 dark:text-neutral-200">
+                  Enter Code
+                </span>
+                <p class="text-[13px] text-gray-500 dark:text-neutral-500">
+                  Enter the 2-step verification code from your authenticator app.
+                </p>
+
+                <form action="/2factor/verify" method="post">
+                  <div class="space-y-5">
+                  <div>    
+                  <input type="text" name="code"  class="form-input hidden">
+                   <div class="space-y-5">
+                   <div class="my-3 flex gap-x-2" data-hs-pin-input>
+                  <input id="input-1" type="text" class="input-code block w-[38px] h-[38px] text-center border rounded-md focus:outline-blue-600" >
+                  <input id="input-2" type="text" class="input-code block w-[38px] h-[38px] text-center border rounded-md focus:outline-blue-600" >
+                  <input id="input-3" type="text" class="input-code block w-[38px] h-[38px] text-center border rounded-md focus:outline-blue-600" >
+                  <input id="input-4" type="text" class="input-code block w-[38px] h-[38px] text-center border rounded-md focus:outline-blue-600" >
+                  <input id="input-5" type="text" class="input-code block w-[38px] h-[38px] text-center border rounded-md focus:outline-blue-600" >
+                  <input id="input-6" type="text" class="input-code block w-[38px] h-[38px] text-center border rounded-md focus:outline-blue-600" >
+                </div>
+                </div>
+
+                    <button type="submit" class="py-2.5 px-3 w-full inline-flex justify-center items-center gap-x-2 text-sm font-semibold rounded-lg border border-transparent bg-blue-600 text-white hover:bg-blue-700 disabled:opacity-50 disabled:pointer-events-none dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-neutral-600">
+                      Sign in
+                    </button>
+                  </div>
+                </form>
+              </li>
+              <!-- End Step -->
+            
+          </ul>
+        </div>
+      </div>
+      <!-- End Content -->
+    </main>
+<script>
+  const inputs = document.querySelectorAll(".input-code");
+  const formInput = document.querySelector(".form-input");
+
+  const inputTextToInput = (event) => {
+    const input = event.target;
+    const value = input.value;
+
+    if (value.length > 1) {
+      input.value = value.slice(-1); 
+    }
+
+    const currentIndex = Array.from(inputs).indexOf(input);
+    if (value && currentIndex < inputs.length - 1) {
+      inputs[currentIndex + 1].focus();
+    }
+
+    const combinedValue = Array.from(inputs)
+      .map((input) => input.value)
+      .join("");
+
+    formInput.value = combinedValue;
+  };
+
+  const handleBackspace = (event) => {
+    const input = event.target;
+
+    if (event.key === "Backspace" && input.value === "") {
+      const currentIndex = Array.from(inputs).indexOf(input);
+      if (currentIndex > 0) {
+        inputs[currentIndex - 1].focus();
+      }
+    }
+  };
+
+  inputs.forEach((input) => {
+    input.addEventListener("input", inputTextToInput);
+    input.addEventListener("keydown", handleBackspace);
+  });
+</script>
+
+
+
+  </body>
+
 </html>