adminforth 1.1.74 → 1.1.75

package/dist/plugins/TwoFactorsAuthPlugin/custom/TwoFactorsConfirmation.vue

@@ -0,0 +1,152 @@
+<template>
+    <div class="relative flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-800"
+      :style="coreStore.config?.loginBackgroundImage ? {
+        'background-image': 'url(' + loadFile(coreStore.config?.loginBackgroundImage) + ')',
+        'background-size': 'cover',
+        'background-position': 'center',
+        'background-blend-mode': 'darken'
+      }: {}"
+      >
+  
+      <div id="authentication-modal" tabindex="-1" class=" overflow-y-auto overflow-x-hidden z-50 min-w-[00px] justify-center items-center md:inset-0 h-[calc(100%-1rem)] max-h-full">
+        <div class="relative p-4 w-full max-w-md max-h-full">
+            <!-- Modal content -->
+            <div class="relative bg-white rounded-lg shadow dark:bg-gray-700 dark:shadow-black text-gray-500" >
+                <div class="p-8 w-full max-w-md max-h-full" >
+                    <div class="m-3" >Please enter your authenticator code </div>
+                    
+                    <form class="max-w-sm mx-auto mt-6 flex flex-col items-center ">
+                        <div class="flex mb-2 space-x-2 rtl:space-x-reverse  ">
+                            <div>
+                                <label for="code-1" class="sr-only">First code</label>
+                                <input type="text" maxlength="1" data-focus-input-init data-focus-input-next="code-2" id="code-1" class="block w-9 h-9 py-3 text-sm font-extrabold text-center text-gray-900 bg-white border border-gray-300 rounded-lg focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500" required />
+                            </div>
+                            <div>
+                                <label for="code-2" class="sr-only">Second code</label>
+                                <input type="text" maxlength="1" data-focus-input-init data-focus-input-prev="code-1" data-focus-input-next="code-3" id="code-2" class="block w-9 h-9 py-3 text-sm font-extrabold text-center text-gray-900 bg-white border border-gray-300 rounded-lg focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500" required />
+                            </div>
+                            <div>
+                                <label for="code-3" class="sr-only">Third code</label>
+                                <input type="text" maxlength="1" data-focus-input-init data-focus-input-prev="code-2" data-focus-input-next="code-4" id="code-3" class="block w-9 h-9 py-3 text-sm font-extrabold text-center text-gray-900 bg-white border border-gray-300 rounded-lg focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500" required />
+                            </div>
+                            <div>
+                                <label for="code-4" class="sr-only">Fourth code</label>
+                                <input type="text" maxlength="1" data-focus-input-init data-focus-input-prev="code-3" data-focus-input-next="code-5" id="code-4" class="block w-9 h-9 py-3 text-sm font-extrabold text-center text-gray-900 bg-white border border-gray-300 rounded-lg focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500" required />
+                            </div>
+                            <div>
+                                <label for="code-5" class="sr-only">Fifth code</label>
+                                <input type="text" maxlength="1" data-focus-input-init data-focus-input-prev="code-4" data-focus-input-next="code-6" id="code-5" class="block w-9 h-9 py-3 text-sm font-extrabold text-center text-gray-900 bg-white border border-gray-300 rounded-lg focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500" required />
+                            </div>
+                            <div>
+                                <label for="code-6" class="sr-only">Sixth code</label>
+                                <input type="text" maxlength="1" data-focus-input-init data-focus-input-prev="code-5" id="code-6" class="block w-9 h-9 py-3 text-sm font-extrabold text-center text-gray-900 bg-white border border-gray-300 rounded-lg focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500" required />
+                            </div>
+                        </div>
+                        <p id="helper-text-explanation" class="mt-2 text-sm text-gray-500 dark:text-gray-400"></p>
+                    </form> 
+                    <button @click="()=>{router.push('./login')}" class="flex items-center justify-center gap-1 w-full text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
+>Cancel</button>   
+                </div>
+            </div>
+        </div>
+    </div>
+      
+      </div>
+       
+  
+  </template>
+  
+  
+  <script setup>
+  
+  import { onMounted, ref, watchEffect,computed } from 'vue';
+  import { useCoreStore } from '@/stores/core';
+  import { useUserStore } from '@/stores/user';
+  import { IconEyeSolid, IconEyeSlashSolid } from '@iconify-prerendered/vue-flowbite';
+  import { callAdminForthApi, loadFile } from '@/utils';
+  import { useRouter } from 'vue-router';
+  import { initFlowbite } from 'flowbite'
+  import { showErrorTost } from '@/composables/useFrontendApi';
+  
+  
+  
+  
+  const router = useRouter();
+  const inProgress = ref(false);
+  
+  const coreStore = useCoreStore();
+  const user = useUserStore();
+  
+  // use this simple function to automatically focus on the next input
+  
+  
+  
+  const showPw = ref(false);
+  
+  const error = ref(null);
+  const totp = ref({});
+  const totpJWT = ref(null);
+ 
+    
+  function parseJwt(token) {
+    // Split the token into its parts
+    const base64Url = token.split('.')[1];
+    
+    // Base64-decode the payload
+    const base64 = base64Url.replace(/-/g, '+').replace(/_/g, '/');
+    const jsonPayload = decodeURIComponent(atob(base64).split('').map(function(c) {
+      return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
+    }).join(''));
+    
+    // Parse the JSON payload
+    return JSON.parse(jsonPayload);
+  }  
+  
+  onMounted(async () => {
+    coreStore.getPublicConfig()
+   
+    function focusNextInput(el, prevId, nextId) {
+      if (el.value.length === 0) {
+          if (prevId) {
+              document.getElementById(prevId).focus();
+          }
+      } else {
+          if (nextId) {
+              document.getElementById(nextId).focus();
+          } else {
+            sendCode()
+          }
+      }
+    }
+  
+    document.querySelectorAll('[data-focus-input-init]').forEach(function(element) {
+        element.addEventListener('keyup', function() {
+            const prevId = this.getAttribute('data-focus-input-prev');
+            const nextId = this.getAttribute('data-focus-input-next');
+            focusNextInput(this, prevId, nextId);
+        });
+    });
+  
+  
+  
+  });
+  
+  async function sendCode () {
+    inProgress.value = true;
+    const code = document.getElementById('code-1').value + document.getElementById('code-2').value + document.getElementById('code-3').value + document.getElementById('code-4').value + document.getElementById('code-5').value + document.getElementById('code-6').value;
+    const resp = await callAdminForthApi({
+      method: 'POST',
+      path: '/plugin/twofa/confirmSetup',
+      body: {
+        code: code,
+        secret: null,
+      }
+    })
+    if (resp.allowedLogin){
+        router.push('/');
+      } else {
+        showErrorTost('Invalid code');
+      }
+    }
+  </script>
+  

package/dist/plugins/TwoFactorsAuthPlugin/custom/TwoFactorsSetup.vue

@@ -0,0 +1,188 @@
+<template>
+  <div class="relative flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-800"
+    :style="coreStore.config?.loginBackgroundImage ? {
+      'background-image': 'url(' + loadFile(coreStore.config?.loginBackgroundImage) + ')',
+      'background-size': 'cover',
+      'background-position': 'center',
+      'background-blend-mode': 'darken'
+    }: {}"
+    >
+
+    <div id="authentication-modal" tabindex="-1" class=" overflow-y-auto overflow-x-hidden z-50 min-w-[00px] justify-center items-center md:inset-0 h-[calc(100%-1rem)] max-h-full">
+      <div class="relative p-4 w-full max-w-md max-h-full">
+          <!-- Modal content -->
+          <div class="relative bg-white rounded-lg shadow dark:bg-gray-700 dark:shadow-black text-gray-500" >
+              <div class="p-8 w-full max-w-md max-h-full" >
+                  <div class="m-3" >Scan this QR code with your authenticator app or open by <a class="text-blue-600" :href="totpUri">click</a></div>
+                  <div class="flex justify-center m-3" >
+                      <img :src="totpQrCode" alt="QR code" />
+                  </div>
+                  <div class="m-3 ">
+                      <div class="m-1">Or copy this code to app manually:</div>
+                      <div class="w-full max-w-[46rem]">
+                          <div class="relative">
+                              <label for="npm-install-copy-text" class="sr-only">Label</label>
+                              <input id="npm-install-copy-text" type="text" class="col-span-10 bg-gray-50 border border-gray-300 text-gray-500 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full px-2.5 py-4 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-gray-400 dark:focus:ring-blue-500 dark:focus:border-blue-500" :value="totp.newSecret" disabled readonly>
+                              <button data-copy-to-clipboard-target="npm-install-copy-text" class="absolute end-2.5 top-1/2 -translate-y-1/2 text-gray-900 dark:text-gray-400 hover:bg-gray-100 dark:bg-gray-800 dark:border-gray-600 dark:hover:bg-gray-700 rounded-lg py-2 px-2.5 inline-flex items-center justify-center bg-white border-gray-200 border">
+                                  <span id="default-message" class="inline-flex items-center">
+                                      <svg class="w-3 h-3 me-1.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 18 20">
+                                          <path d="M16 1h-3.278A1.992 1.992 0 0 0 11 0H7a1.993 1.993 0 0 0-1.722 1H2a2 2 0 0 0-2 2v15a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V3a2 2 0 0 0-2-2Zm-3 14H5a1 1 0 0 1 0-2h8a1 1 0 0 1 0 2Zm0-4H5a1 1 0 0 1 0-2h8a1 1 0 1 1 0 2Zm0-5H5a1 1 0 0 1 0-2h2V2h4v2h2a1 1 0 1 1 0 2Z"/>
+                                      </svg>
+                                      <span class="text-xs font-semibold">Copy</span>
+                                  </span>
+                                  <span id="success-message" class="hidden inline-flex items-center">
+                                      <svg class="w-3 h-3 text-blue-700 dark:text-blue-500 me-1.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 12">
+                                          <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5.917 5.724 10.5 15 1.5"/>
+                                      </svg>
+                                      <span class="text-xs font-semibold text-blue-700 dark:text-blue-500">Copied</span>   
+                                  </span>
+                              </button>
+                          </div>
+                      </div>
+                  </div>
+                  <form class="max-w-sm mx-auto mt-6 flex flex-col items-center ">
+                      <div class="flex mb-2 space-x-2 rtl:space-x-reverse  ">
+                          <div>
+                              <label for="code-1" class="sr-only">First code</label>
+                              <input type="text" maxlength="1" data-focus-input-init data-focus-input-next="code-2" id="code-1" class="block w-9 h-9 py-3 text-sm font-extrabold text-center text-gray-900 bg-white border border-gray-300 rounded-lg focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500" required />
+                          </div>
+                          <div>
+                              <label for="code-2" class="sr-only">Second code</label>
+                              <input type="text" maxlength="1" data-focus-input-init data-focus-input-prev="code-1" data-focus-input-next="code-3" id="code-2" class="block w-9 h-9 py-3 text-sm font-extrabold text-center text-gray-900 bg-white border border-gray-300 rounded-lg focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500" required />
+                          </div>
+                          <div>
+                              <label for="code-3" class="sr-only">Third code</label>
+                              <input type="text" maxlength="1" data-focus-input-init data-focus-input-prev="code-2" data-focus-input-next="code-4" id="code-3" class="block w-9 h-9 py-3 text-sm font-extrabold text-center text-gray-900 bg-white border border-gray-300 rounded-lg focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500" required />
+                          </div>
+                          <div>
+                              <label for="code-4" class="sr-only">Fourth code</label>
+                              <input type="text" maxlength="1" data-focus-input-init data-focus-input-prev="code-3" data-focus-input-next="code-5" id="code-4" class="block w-9 h-9 py-3 text-sm font-extrabold text-center text-gray-900 bg-white border border-gray-300 rounded-lg focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500" required />
+                          </div>
+                          <div>
+                              <label for="code-5" class="sr-only">Fifth code</label>
+                              <input type="text" maxlength="1" data-focus-input-init data-focus-input-prev="code-4" data-focus-input-next="code-6" id="code-5" class="block w-9 h-9 py-3 text-sm font-extrabold text-center text-gray-900 bg-white border border-gray-300 rounded-lg focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500" required />
+                          </div>
+                          <div>
+                              <label for="code-6" class="sr-only">Sixth code</label>
+                              <input type="text" maxlength="1" data-focus-input-init data-focus-input-prev="code-5" id="code-6" class="block w-9 h-9 py-3 text-sm font-extrabold text-center text-gray-900 bg-white border border-gray-300 rounded-lg focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500" required />
+                          </div>
+                      </div>
+                      <p id="helper-text-explanation" class="mt-2 text-sm text-gray-500 dark:text-gray-400"></p>
+                  </form> 
+                  <button @click="()=>{router.push('./login')}" class="flex items-center justify-center gap-1 w-full text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">Cancel</button>      
+              </div>
+          </div>
+      </div>
+  </div>
+    
+    </div>
+     
+
+</template>
+
+
+<script setup>
+
+import { onMounted, ref, watchEffect,computed } from 'vue';
+import { useCoreStore } from '@/stores/core';
+import { useUserStore } from '@/stores/user';
+import { IconEyeSolid, IconEyeSlashSolid } from '@iconify-prerendered/vue-flowbite';
+import { callAdminForthApi, loadFile } from '@/utils';
+import { useRouter } from 'vue-router';
+import { initFlowbite } from 'flowbite'
+import { showErrorTost } from '@/composables/useFrontendApi';
+
+
+
+
+const router = useRouter();
+const inProgress = ref(false);
+
+const coreStore = useCoreStore();
+const user = useUserStore();
+
+// use this simple function to automatically focus on the next input
+
+
+
+const showPw = ref(false);
+
+const error = ref(null);
+const totp = ref({});
+const totpJWT = ref(null);
+const totpUri = computed(() => {
+  if (totp.value) {
+    return `otpauth://totp/${totp.value.issuer}:${totp.value.userName}?secret=${totp.value.newSecret}&issuer=${totp.value.issuer}`;
+  }});
+const totpQrCode = computed(() => {
+  if (totpUri.value) {
+    return `https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=${encodeURIComponent(totpUri.value)}`;
+  }});
+  
+function parseJwt(token) {
+  // Split the token into its parts
+  const base64Url = token.split('.')[1];
+  
+  // Base64-decode the payload
+  const base64 = base64Url.replace(/-/g, '+').replace(/_/g, '/');
+  const jsonPayload = decodeURIComponent(atob(base64).split('').map(function(c) {
+    return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
+  }).join(''));
+  
+  // Parse the JSON payload
+  return JSON.parse(jsonPayload);
+}  
+
+onMounted(async () => {
+  coreStore.getPublicConfig()
+  const resp = await callAdminForthApi({
+    path: '/plugin/twofa/initSetup',
+    method: 'POST',});
+  if (resp && resp.totpJWT){
+    totpJWT.value = resp.totpJWT;
+  } 
+  function focusNextInput(el, prevId, nextId) {
+    if (el.value.length === 0) {
+        if (prevId) {
+            document.getElementById(prevId).focus();
+        }
+    } else {
+        if (nextId) {
+            document.getElementById(nextId).focus();
+        } else {
+          sendCode()
+        }
+    }
+  }
+
+  document.querySelectorAll('[data-focus-input-init]').forEach(function(element) {
+      element.addEventListener('keyup', function() {
+          const prevId = this.getAttribute('data-focus-input-prev');
+          const nextId = this.getAttribute('data-focus-input-next');
+          focusNextInput(this, prevId, nextId);
+      });
+  });
+
+  totp.value=parseJwt(totpJWT.value);
+
+
+});
+
+async function sendCode () {
+  inProgress.value = true;
+  const code = document.getElementById('code-1').value + document.getElementById('code-2').value + document.getElementById('code-3').value + document.getElementById('code-4').value + document.getElementById('code-5').value + document.getElementById('code-6').value;
+  const resp = await callAdminForthApi({
+    method: 'POST',
+    path: '/plugin/twofa/confirmSetup',
+    body: {
+      code: code,
+      secret: totp.value.newSecret,
+    }
+  })
+  if (resp.allowedLogin){
+      router.push('/');
+    } else {
+      showErrorTost('Invalid code');
+    }
+  }
+</script>

package/dist/plugins/TwoFactorsAuthPlugin/index.js

@@ -0,0 +1,150 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import AdminForthPlugin from "../base.js";
+import twofactor from 'node-2fa';
+import AdminForthAuth from "../../auth.js";
+export default class TwoFactorsAuthPlugin extends AdminForthPlugin {
+    constructor(options) {
+        super(options, import.meta.url);
+        this.options = options;
+    }
+    modifyResourceConfig(adminforth, resourceConfig) {
+        super.modifyResourceConfig(adminforth, resourceConfig);
+        this.adminforth = adminforth;
+        this.adminForthAuth = new AdminForthAuth(adminforth);
+        const customPages = this.adminforth.config.customization.customPages;
+        customPages.push({
+            path: '/confirm2fa',
+            component: { file: this.componentPath('TwoFactorsConfirmation.vue'), meta: { customLayout: true } }
+        });
+        customPages.push({
+            path: '/setup2fa',
+            component: { file: this.componentPath('TwoFactorsSetup.vue'), meta: { title: 'Setup 2FA', customLayout: true } }
+        });
+        this.activate(resourceConfig, adminforth);
+    }
+    activate(resourceConfig, adminforth) {
+        if (!this.options.twoFaSecretFieldName) {
+            throw new Error('twoFaSecretFieldName is required');
+        }
+        if (typeof this.options.twoFaSecretFieldName !== 'string') {
+            throw new Error('twoFaSecretFieldName must be a string');
+        }
+        this.authResource = resourceConfig;
+        if (!this.authResource.columns.some((col) => col.name === this.options.twoFaSecretFieldName)) {
+            throw new Error(`Column ${this.options.twoFaSecretFieldName} not found in ${this.authResource.label}`);
+        }
+        const beforeLoginConfirmation = this.adminforth.config.auth;
+        if (!beforeLoginConfirmation.beforeLoginConfirmation) {
+            beforeLoginConfirmation.beforeLoginConfirmation = [];
+        }
+        beforeLoginConfirmation.beforeLoginConfirmation.push((_a) => __awaiter(this, [_a], void 0, function* ({ adminUser }) {
+            if (adminUser.isRoot) {
+                return { body: { loginAllowed: true }, ok: true };
+            }
+            const secret = adminUser.dbUser[this.options.twoFaSecretFieldName];
+            const userName = adminUser.dbUser[adminforth.config.auth.usernameField];
+            const brandName = adminforth.config.customization.brandName;
+            const authResource = adminforth.config.resources.find((res) => res.resourceId === adminforth.config.auth.resourceId);
+            const authPk = authResource.columns.find((col) => col.primaryKey).name;
+            const userPk = adminUser.dbUser[authPk];
+            let newSecret = null;
+            if (!secret) {
+                const tempSecret = twofactor.generateSecret({ name: brandName, account: userName });
+                newSecret = tempSecret.secret;
+            }
+            else {
+                return {
+                    body: {
+                        loginAllowed: false,
+                        redirectTo: '/confirm2fa',
+                        setCookie: [{
+                                name: 'totpTemporaryJWT',
+                                value: this.adminforth.auth.issueJWT({ userName, issuer: brandName, pk: userPk }, 'tempTotp'),
+                                expiry: '1h',
+                                httpOnly: true
+                            },]
+                    },
+                    ok: true
+                };
+            }
+            const totpTemporaryJWT = this.adminforth.auth.issueJWT({ userName, newSecret, issuer: brandName, pk: userPk }, 'tempTotp');
+            return {
+                body: {
+                    loginAllowed: false,
+                    redirectTo: secret ? '/confirm2fa' : '/setup2fa',
+                    setCookie: [{
+                            name: 'totpTemporaryJWT',
+                            value: totpTemporaryJWT,
+                            expiry: '1h',
+                            httpOnly: true
+                        },]
+                },
+                ok: true
+            };
+        }));
+    }
+    setupEndpoints(server) {
+        server.endpoint({
+            method: 'POST',
+            path: `/plugin/twofa/initSetup`,
+            noAuth: true,
+            handler: (server) => __awaiter(this, void 0, void 0, function* () {
+                const toReturn = { totpJWT: null, status: 'ok', };
+                const totpTemporaryJWT = server.cookies['adminforth_totpTemporaryJWT'];
+                if (totpTemporaryJWT) {
+                    toReturn.totpJWT = totpTemporaryJWT;
+                }
+                return toReturn;
+            })
+        });
+        server.endpoint({
+            method: 'POST',
+            path: `/plugin/twofa/confirmSetup`,
+            noAuth: true,
+            handler: (_a) => __awaiter(this, [_a], void 0, function* ({ body, adminUser, response, cookies }) {
+                const totpTemporaryJWT = cookies['adminforth_totpTemporaryJWT'];
+                const decoded = yield this.adminforth.auth.verify(totpTemporaryJWT, 'tempTotp');
+                if (!decoded) {
+                    return { status: 'error', message: 'Invalid token' };
+                }
+                if (decoded.newSecret) {
+                    const verified = twofactor.verifyToken(decoded.newSecret, body.code);
+                    if (verified) {
+                        this.connectors = this.adminforth.connectors;
+                        const connector = this.connectors[this.authResource.dataSource];
+                        yield connector.updateRecord({ resource: this.authResource, recordId: decoded.pk, newValues: { [this.options.twoFaSecretFieldName]: decoded.newSecret } });
+                        this.adminForthAuth.removeCustomCookie({ response, name: 'totpTemporaryJWT' });
+                        this.adminForthAuth.setAuthCookie({ response, username: decoded.userName, pk: decoded.pk });
+                        return { status: 'ok', allowedLogin: true };
+                    }
+                    else {
+                        return { error: 'Wrong or expired OTP code' };
+                    }
+                }
+                else {
+                    // user already has secret, get it
+                    this.connectors = this.adminforth.connectors;
+                    const connector = this.connectors[this.authResource.dataSource];
+                    const user = yield connector.getRecordByPrimaryKey(this.authResource, decoded.pk);
+                    const verified = twofactor.verifyToken(user[this.options.twoFaSecretFieldName], body.code);
+                    if (verified) {
+                        this.adminForthAuth.removeCustomCookie({ response, name: 'totpTemporaryJWT' });
+                        this.adminForthAuth.setAuthCookie({ response, username: decoded.userName, pk: decoded.pk });
+                        return { status: 'ok', allowedLogin: true };
+                    }
+                    else {
+                        return { error: 'Wrong or expired OTP code' };
+                    }
+                }
+            })
+        });
+    }
+}

package/dist/plugins/TwoFactorsAuthPlugin/types.js

@@ -0,0 +1 @@
+export {};

package/dist/spa/index.html

@@ -17,7 +17,7 @@
 
   </head>
   <body class=" ">
-    <div id="app" class="min-h-screen bg-html-bg dark:bg-gray-800"></div>
+    <div id="app" class="min-h-screen bg-lightHtml dark:bg-darkHtml"></div>
     <script type="module" src="/src/main.ts"></script>
   </body>
 </html>

package/dist/spa/package-lock.json

@@ -19,6 +19,7 @@
         "unhead": "^1.9.12",
         "uuid": "^10.0.0",
         "vue": "^3.4.21",
+        "vue-diff": "^1.2.4",
         "vue-router": "^4.3.0",
         "vue-slider-component": "^4.1.0-beta.7"
       },
@@ -1902,6 +1903,11 @@
       "integrity": "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==",
       "dev": true
     },
+    "node_modules/diff-match-patch": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/diff-match-patch/-/diff-match-patch-1.0.5.tgz",
+      "integrity": "sha512-IayShXAgj/QMXgB0IWmKx+rOPuGMhqm5w6jvFxmVenXKIzRqTAAsbBPT3kWQeGANj3jGgvcvv4yK6SxqYmikgw=="
+    },
     "node_modules/dir-glob": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz",
@@ -2526,6 +2532,14 @@
         "he": "bin/he"
       }
     },
+    "node_modules/highlight.js": {
+      "version": "11.9.0",
+      "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-11.9.0.tgz",
+      "integrity": "sha512-fJ7cW7fQGCYAkgv4CPfwFHrfd/cLS4Hau96JuJ+ZTOWhjnhoeN1ub1tFmALm/+lW5z4WCAuAV9bm05AP0mS6Gw==",
+      "engines": {
+        "node": ">=12.0.0"
+      }
+    },
     "node_modules/hookable": {
       "version": "5.5.3",
       "resolved": "https://registry.npmjs.org/hookable/-/hookable-5.5.3.tgz",
@@ -4120,6 +4134,103 @@
         }
       }
     },
+    "node_modules/vue-diff": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/vue-diff/-/vue-diff-1.2.4.tgz",
+      "integrity": "sha512-9z+0uPHigi/DdE3Zhdg1zR3VkiBaDN4czjWa/Zznvizn4znckVqz20p1KytaWq5NJtJ7UnkqRbuWsaCuC1ZHaA==",
+      "dependencies": {
+        "@vueuse/core": "^8.3.1",
+        "diff-match-patch": "^1.0.5",
+        "highlight.js": "^11.5.1"
+      }
+    },
+    "node_modules/vue-diff/node_modules/@types/web-bluetooth": {
+      "version": "0.0.14",
+      "resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.14.tgz",
+      "integrity": "sha512-5d2RhCard1nQUC3aHcq/gHzWYO6K0WJmAbjO7mQJgCQKtZpgXxv1rOM6O/dBDhDYYVutk1sciOgNSe+5YyfM8A=="
+    },
+    "node_modules/vue-diff/node_modules/@vueuse/core": {
+      "version": "8.9.4",
+      "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-8.9.4.tgz",
+      "integrity": "sha512-B/Mdj9TK1peFyWaPof+Zf/mP9XuGAngaJZBwPaXBvU3aCTZlx3ltlrFFFyMV4iGBwsjSCeUCgZrtkEj9dS2Y3Q==",
+      "dependencies": {
+        "@types/web-bluetooth": "^0.0.14",
+        "@vueuse/metadata": "8.9.4",
+        "@vueuse/shared": "8.9.4",
+        "vue-demi": "*"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.1.0",
+        "vue": "^2.6.0 || ^3.2.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        },
+        "vue": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/vue-diff/node_modules/@vueuse/metadata": {
+      "version": "8.9.4",
+      "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-8.9.4.tgz",
+      "integrity": "sha512-IwSfzH80bnJMzqhaapqJl9JRIiyQU0zsRGEgnxN6jhq7992cPUJIRfV+JHRIZXjYqbwt07E1gTEp0R0zPJ1aqw==",
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/vue-diff/node_modules/@vueuse/shared": {
+      "version": "8.9.4",
+      "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-8.9.4.tgz",
+      "integrity": "sha512-wt+T30c4K6dGRMVqPddexEVLa28YwxW5OFIPmzUHICjphfAuBFTTdDoyqREZNDOFJZ44ARH1WWQNCUK8koJ+Ag==",
+      "dependencies": {
+        "vue-demi": "*"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.1.0",
+        "vue": "^2.6.0 || ^3.2.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        },
+        "vue": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/vue-diff/node_modules/vue-demi": {
+      "version": "0.14.8",
+      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.8.tgz",
+      "integrity": "sha512-Uuqnk9YE9SsWeReYqK2alDI5YzciATE0r2SkA6iMAtuXvNTMNACJLJEXNXaEy94ECuBe4Sk6RzRU80kjdbIo1Q==",
+      "hasInstallScript": true,
+      "bin": {
+        "vue-demi-fix": "bin/vue-demi-fix.js",
+        "vue-demi-switch": "bin/vue-demi-switch.js"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.0.0-rc.1",
+        "vue": "^3.0.0-0 || ^2.6.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/vue-eslint-parser": {
       "version": "9.4.2",
       "resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-9.4.2.tgz",

package/dist/spa/package.json

@@ -23,6 +23,7 @@
     "unhead": "^1.9.12",
     "uuid": "^10.0.0",
     "vue": "^3.4.21",
+    "vue-diff": "^1.2.4",
     "vue-router": "^4.3.0",
     "vue-slider-component": "^4.1.0-beta.7"
   },