@adminforth/two-factors-auth 1.1.0 → 1.1.2-next.1

package/.woodpecker/release.yml

@@ -22,9 +22,8 @@ steps:
     image: node:20
     when:
       - event: push
-    volumes:
-      - /var/run/docker.sock:/var/run/docker.sock
     commands:
+      - apt update && apt install -y rsync
       - export $(cat /woodpecker/deploy.vault.env | xargs)
       - npm clean-install
       - /bin/bash ./.woodpecker/buildRelease.sh

package/build.log

@@ -1,4 +1,14 @@
 
 > @adminforth/two-factors-auth@1.0.33 build
-> tsc
+> tsc && rsync -av --exclude 'node_modules' custom dist/
 
+sending incremental file list
+custom/
+custom/TwoFactorsConfirmation.vue
+custom/TwoFactorsSetup.vue
+custom/package-lock.json
+custom/package.json
+custom/tsconfig.json
+
+sent 26,025 bytes  received 115 bytes  52,280.00 bytes/sec
+total size is 25,596  speedup is 0.98

package/custom/TwoFactorsConfirmation.vue

@@ -20,6 +20,7 @@
                         input-classes="bg-gray-50 text-center flex justify-center otp-input  border leading-none border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-10 h-10 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
                         :conditionalClass="['one', 'two', 'three', 'four', 'five', 'six']"
                         inputType="number"
+                        inputmode="numeric"
                         :num-inputs="6"
                         v-model:value="bindValue"
                         :should-auto-focus="true"

package/custom/TwoFactorsSetup.vue

@@ -39,6 +39,7 @@
                       input-classes="bg-gray-50 text-center flex justify-center otp-input  border leading-none border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-10 h-10 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" 
                       :conditionalClass="['one', 'two', 'three', 'four', 'five', 'six']"
                       inputType="number"
+                      inputmode="numeric"
                       :num-inputs="6"
                       :should-auto-focus="true"
                       :should-focus-order="true"

package/dist/custom/TwoFactorsConfirmation.vue

@@ -0,0 +1,176 @@
+<template>
+    <div class="relative flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-800"
+      :style="(coreStore.config?.loginBackgroundImage && coreStore.config?.loginBackgroundPosition === 'over') ? {
+        '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">{{$t('Please enter your authenticator code')}} </div>
+                    <div class="my-4 flex justify-center items-center">
+                      <v-otp-input
+                        ref="code"
+                        input-classes="bg-gray-50 text-center flex justify-center otp-input  border leading-none border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-10 h-10 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+                        :conditionalClass="['one', 'two', 'three', 'four', 'five', 'six']"
+                        inputType="number"
+                        inputmode="numeric"
+                        :num-inputs="6"
+                        v-model:value="bindValue"
+                        :should-auto-focus="true"
+                        :should-focus-order="true"
+                        @on-complete="handleOnComplete"
+                      />
+                    </div>
+                    <!-- <Vue2FACodeInput v-model="code"/> -->
+                    <LinkButton to="/login" class="w-full">{{$t('Back to login')}}</LinkButton>
+                </div>
+            </div>
+        </div>
+    </div>
+      
+      </div>
+       
+  
+  </template>
+  
+  
+  <script setup>
+  
+  import { onMounted, onBeforeUnmount, ref, watchEffect,computed,watch } 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 { showErrorTost } from '@/composables/useFrontendApi';
+  import { LinkButton } from '@/afcl';
+  import Vue2FACodeInput from '@loltech/vue3-2fa-code-input';
+  import VOtpInput from "vue3-otp-input";
+
+  const code = ref(null);
+
+  const handleOnComplete = (value) => {
+    sendCode(value);
+  };
+
+  const fillInput = (value) => {
+    code.value?.fillInput(value);
+  };
+
+  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();
+    window.addEventListener('paste', handlePaste);
+  });
+
+  onBeforeUnmount(() => {
+    window.removeEventListener('paste', handlePaste);
+  });
+  
+  async function sendCode (value) {
+    inProgress.value = true;
+    const resp = await callAdminForthApi({
+      method: 'POST',
+      path: '/plugin/twofa/confirmSetup',
+      body: {
+        code: value,
+        secret: null,
+      }
+    })
+    if (resp.allowedLogin){
+      await user.finishLogin();
+    } else {
+      showErrorTost('Invalid code');
+    }
+  }
+
+  // watch(code, async (nv)=>{
+  //   if (nv){
+  //     sendCode();
+  //   }
+  // })
+
+  function handlePaste(event) {
+    event.preventDefault();
+    if (event.target.classList.contains('otp-input')) {
+      return;
+    }
+    const pastedText = event.clipboardData?.getData('text') || '';
+    if (pastedText.length === 6) { 
+      code.value?.fillInput(pastedText);
+    }
+  }
+  </script>
+
+  <style lang='scss'>
+    .vue3-2fa-code-input {
+      display: flex;
+      justify-content: center;
+      gap: 1rem;
+      margin-bottom: 1rem;
+    }
+    .otp-input {
+      margin: 0 5px;
+    }
+    .vue3-2fa-code-input-box {
+        &[type='text'] {
+          @apply  w-10 h-10 text-center text-xl border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500;
+        
+        }
+        
+    }
+
+    /**
+     * This particular piece of code makes the last input have a gap in the middle.
+     */
+     .spaced-code-input {
+        & .vue3-2fa-code-input-box {
+            &:nth-child(3) {
+                @apply mr-4;
+            }
+
+            &:nth-child(4) {
+                @apply ml-4;
+            }
+        }
+    }  
+  </style>
+  

package/dist/custom/TwoFactorsSetup.vue

@@ -0,0 +1,208 @@
+<template>
+  <div class="relative flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-800"
+    :style="coreStore.config?.loginBackgroundImage && coreStore.config?.loginBackgroundPosition === 'over' ? {
+      '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" >{{$t('Scan this QR code with your authenticator app or open by')}} <a class="text-blue-600" :href="totpUri">{{$t('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">{{$t('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">{{$t('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 pr-12" :value="totp.newSecret" readonly>
+                              <button @click="onCopyClick" 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-4" 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>
+                              </button>
+                          </div>
+                      </div>
+                  </div>
+                  <div class="my-4 flex justify-center items-center">
+                    <v-otp-input
+                      ref="code"
+                      input-classes="bg-gray-50 text-center flex justify-center otp-input  border leading-none border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-10 h-10 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" 
+                      :conditionalClass="['one', 'two', 'three', 'four', 'five', 'six']"
+                      inputType="number"
+                      inputmode="numeric"
+                      :num-inputs="6"
+                      :should-auto-focus="true"
+                      :should-focus-order="true"
+                      @on-complete="handleOnComplete"
+                    />
+                  </div>
+                  <!-- <Vue2FACodeInput v-model="code" autofocus /> -->
+                   <div class="flex flex-row gap-2.5">
+                  <LinkButton to="/login" class="w-full">
+                    {{$t('Back to login')}}
+                  </LinkButton>
+                  <Button v-if="skipAllowed" @click="handleSkip" class="w-full">
+                    {{$t('Skip for now')}}
+                  </Button>
+                </div>
+              </div>
+          </div>
+      </div>
+  </div>
+</div>
+     
+
+</template>
+
+
+<script setup lang="ts">
+
+import { onMounted, onBeforeUnmount,  ref, watchEffect,computed,watch } 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 { showErrorTost } from '@/composables/useFrontendApi';
+import { Button, LinkButton } from '@/afcl';
+import Vue2FACodeInput from '@loltech/vue3-2fa-code-input';
+import VOtpInput from "vue3-otp-input";
+import adminforth from '@/adminforth';
+
+
+const code = ref(null);
+const handleOnComplete = (value) => {
+  sendCode(value);
+};
+
+const router = useRouter();
+const inProgress = ref(false);
+
+const coreStore = useCoreStore();
+const user = useUserStore();
+
+const skipAllowed = ref(false);
+
+// 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);
+} 
+
+function onCopyClick(){
+  navigator.clipboard.writeText(totp.value.newSecret);
+  adminforth.alert({message: 'Copied to clipboard', variant: 'success'})
+}
+
+onMounted(async () => {
+  coreStore.getPublicConfig()
+  const resp = await callAdminForthApi({
+    path: '/plugin/twofa/initSetup',
+    method: 'POST',});
+  if (resp && resp.totpJWT){
+    totpJWT.value = resp.totpJWT;
+  } 
+  
+  totp.value=parseJwt(totpJWT.value);
+  
+  const allowSkipResp = await callAdminForthApi({
+    path: '/plugin/twofa/skip-allow',
+    method: 'GET',
+  });
+
+  if (allowSkipResp?.skipAllowed){
+    skipAllowed.value = true;
+  }
+
+  window.addEventListener('paste', handlePaste);
+});
+
+onBeforeUnmount(() => {
+  window.removeEventListener('paste', handlePaste);
+});
+
+async function sendCode (value) {
+  inProgress.value = true;
+
+  
+  const resp = await callAdminForthApi({
+    method: 'POST',
+    path: '/plugin/twofa/confirmSetup',
+    body: {
+      code: value,
+      secret: totp.value.newSecret,
+    }
+  })
+  if (resp.allowedLogin){
+    await user.finishLogin()
+  } else {
+    showErrorTost('Invalid code');
+  }
+}
+
+
+function handlePaste(event) {
+  event.preventDefault();
+  if (event.target.classList.contains('otp-input')) {
+    return;
+  }
+  const pastedText = event.clipboardData?.getData('text') || '';
+  if (pastedText.length === 6) { 
+    code.value?.fillInput(pastedText);
+  }
+}
+
+const handleSkip = async () => {
+  const resp = await callAdminForthApi({
+    method: 'POST',
+    path: '/plugin/twofa/confirmSetup',
+    body: {
+      skip: true,
+    }
+  });
+  if (resp.allowedLogin){
+    await user.finishLogin()
+  } else {
+    showErrorTost('Something went wrong');
+  }
+}
+</script>
+<style>
+.otp-input {
+  margin: 0 5px;
+}
+</style>

package/dist/custom/package-lock.json

@@ -0,0 +1,301 @@
+{
+  "name": "custom",
+  "version": "1.0.0",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "custom",
+      "version": "1.0.0",
+      "license": "ISC",
+      "dependencies": {
+        "@loltech/vue3-2fa-code-input": "^1.1.0",
+        "vue3-otp-input": "^0.5.21"
+      }
+    },
+    "node_modules/@babel/helper-string-parser": {
+      "version": "7.25.9",
+      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.25.9.tgz",
+      "integrity": "sha512-4A/SCr/2KLd5jrtOMFzaKjVtAei3+2r/NChoBNoZ3EyP/+GlhoaEGoWOZUmFmoITP7zOJyHIMm+DYRd8o3PvHA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-validator-identifier": {
+      "version": "7.25.9",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.25.9.tgz",
+      "integrity": "sha512-Ed61U6XJc3CVRfkERJWDz4dJwKe7iLmmJsbOGu9wSloNSFttHV0I8g6UAgb7qnK5ly5bGLPd4oXZlxCdANBOWQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/parser": {
+      "version": "7.25.9",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.25.9.tgz",
+      "integrity": "sha512-aI3jjAAO1fh7vY/pBGsn1i9LDbRP43+asrRlkPuTXW5yHXtd1NgTEMudbBoDDxrf1daEEfPJqR+JBMakzrR4Dg==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/types": "^7.25.9"
+      },
+      "bin": {
+        "parser": "bin/babel-parser.js"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@babel/types": {
+      "version": "7.25.9",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.25.9.tgz",
+      "integrity": "sha512-OwS2CM5KocvQ/k7dFJa8i5bNGJP0hXWfVCfDkqRFP1IreH1JDC7wG6eCYCi0+McbfT8OR/kNqsI0UU0xP9H6PQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-string-parser": "^7.25.9",
+        "@babel/helper-validator-identifier": "^7.25.9"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@jridgewell/sourcemap-codec": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.0.tgz",
+      "integrity": "sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ==",
+      "license": "MIT"
+    },
+    "node_modules/@loltech/vue3-2fa-code-input": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@loltech/vue3-2fa-code-input/-/vue3-2fa-code-input-1.1.0.tgz",
+      "integrity": "sha512-styyoQjsARSeVf6E5qMvYIVkLRrwYtfL8xDl5W+g9wKF8qlr2XGU2gi9maEg0X4Us41kJryXBzfRMUcv5tKIBA=="
+    },
+    "node_modules/@vue/compiler-core": {
+      "version": "3.5.12",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.5.12.tgz",
+      "integrity": "sha512-ISyBTRMmMYagUxhcpyEH0hpXRd/KqDU4ymofPgl2XAkY9ZhQ+h0ovEZJIiPop13UmR/54oA2cgMDjgroRelaEw==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/parser": "^7.25.3",
+        "@vue/shared": "3.5.12",
+        "entities": "^4.5.0",
+        "estree-walker": "^2.0.2",
+        "source-map-js": "^1.2.0"
+      }
+    },
+    "node_modules/@vue/compiler-dom": {
+      "version": "3.5.12",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.5.12.tgz",
+      "integrity": "sha512-9G6PbJ03uwxLHKQ3P42cMTi85lDRvGLB2rSGOiQqtXELat6uI4n8cNz9yjfVHRPIu+MsK6TE418Giruvgptckg==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/compiler-core": "3.5.12",
+        "@vue/shared": "3.5.12"
+      }
+    },
+    "node_modules/@vue/compiler-sfc": {
+      "version": "3.5.12",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.5.12.tgz",
+      "integrity": "sha512-2k973OGo2JuAa5+ZlekuQJtitI5CgLMOwgl94BzMCsKZCX/xiqzJYzapl4opFogKHqwJk34vfsaKpfEhd1k5nw==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/parser": "^7.25.3",
+        "@vue/compiler-core": "3.5.12",
+        "@vue/compiler-dom": "3.5.12",
+        "@vue/compiler-ssr": "3.5.12",
+        "@vue/shared": "3.5.12",
+        "estree-walker": "^2.0.2",
+        "magic-string": "^0.30.11",
+        "postcss": "^8.4.47",
+        "source-map-js": "^1.2.0"
+      }
+    },
+    "node_modules/@vue/compiler-ssr": {
+      "version": "3.5.12",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.5.12.tgz",
+      "integrity": "sha512-eLwc7v6bfGBSM7wZOGPmRavSWzNFF6+PdRhE+VFJhNCgHiF8AM7ccoqcv5kBXA2eWUfigD7byekvf/JsOfKvPA==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/compiler-dom": "3.5.12",
+        "@vue/shared": "3.5.12"
+      }
+    },
+    "node_modules/@vue/reactivity": {
+      "version": "3.5.12",
+      "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.5.12.tgz",
+      "integrity": "sha512-UzaN3Da7xnJXdz4Okb/BGbAaomRHc3RdoWqTzlvd9+WBR5m3J39J1fGcHes7U3za0ruYn/iYy/a1euhMEHvTAg==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/shared": "3.5.12"
+      }
+    },
+    "node_modules/@vue/runtime-core": {
+      "version": "3.5.12",
+      "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.5.12.tgz",
+      "integrity": "sha512-hrMUYV6tpocr3TL3Ad8DqxOdpDe4zuQY4HPY3X/VRh+L2myQO8MFXPAMarIOSGNu0bFAjh1yBkMPXZBqCk62Uw==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/reactivity": "3.5.12",
+        "@vue/shared": "3.5.12"
+      }
+    },
+    "node_modules/@vue/runtime-dom": {
+      "version": "3.5.12",
+      "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.5.12.tgz",
+      "integrity": "sha512-q8VFxR9A2MRfBr6/55Q3umyoN7ya836FzRXajPB6/Vvuv0zOPL+qltd9rIMzG/DbRLAIlREmnLsplEF/kotXKA==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/reactivity": "3.5.12",
+        "@vue/runtime-core": "3.5.12",
+        "@vue/shared": "3.5.12",
+        "csstype": "^3.1.3"
+      }
+    },
+    "node_modules/@vue/server-renderer": {
+      "version": "3.5.12",
+      "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.5.12.tgz",
+      "integrity": "sha512-I3QoeDDeEPZm8yR28JtY+rk880Oqmj43hreIBVTicisFTx/Dl7JpG72g/X7YF8hnQD3IFhkky5i2bPonwrTVPg==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/compiler-ssr": "3.5.12",
+        "@vue/shared": "3.5.12"
+      },
+      "peerDependencies": {
+        "vue": "3.5.12"
+      }
+    },
+    "node_modules/@vue/shared": {
+      "version": "3.5.12",
+      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.5.12.tgz",
+      "integrity": "sha512-L2RPSAwUFbgZH20etwrXyVyCBu9OxRSi8T/38QsvnkJyvq2LufW2lDCOzm7t/U9C1mkhJGWYfCuFBCmIuNivrg==",
+      "license": "MIT"
+    },
+    "node_modules/csstype": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
+      "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
+      "license": "MIT"
+    },
+    "node_modules/entities": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
+      "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=0.12"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
+      }
+    },
+    "node_modules/estree-walker": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
+      "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==",
+      "license": "MIT"
+    },
+    "node_modules/magic-string": {
+      "version": "0.30.12",
+      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.12.tgz",
+      "integrity": "sha512-Ea8I3sQMVXr8JhN4z+H/d8zwo+tYDgHE9+5G4Wnrwhs0gaK9fXTKx0Tw5Xwsd/bCPTTZNRAdpyzvoeORe9LYpw==",
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/sourcemap-codec": "^1.5.0"
+      }
+    },
+    "node_modules/nanoid": {
+      "version": "3.3.7",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz",
+      "integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "bin": {
+        "nanoid": "bin/nanoid.cjs"
+      },
+      "engines": {
+        "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
+      }
+    },
+    "node_modules/picocolors": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
+      "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
+      "license": "ISC"
+    },
+    "node_modules/postcss": {
+      "version": "8.4.47",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.47.tgz",
+      "integrity": "sha512-56rxCq7G/XfB4EkXq9Egn5GCqugWvDFjafDOThIdMBsI15iqPqR5r15TfSr1YPYeEI19YeaXMCbY6u88Y76GLQ==",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/postcss"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "nanoid": "^3.3.7",
+        "picocolors": "^1.1.0",
+        "source-map-js": "^1.2.1"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      }
+    },
+    "node_modules/source-map-js": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
+      "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/vue": {
+      "version": "3.5.12",
+      "resolved": "https://registry.npmjs.org/vue/-/vue-3.5.12.tgz",
+      "integrity": "sha512-CLVZtXtn2ItBIi/zHZ0Sg1Xkb7+PU32bJJ8Bmy7ts3jxXTcbfsEfBivFYYWz1Hur+lalqGAh65Coin0r+HRUfg==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/compiler-dom": "3.5.12",
+        "@vue/compiler-sfc": "3.5.12",
+        "@vue/runtime-dom": "3.5.12",
+        "@vue/server-renderer": "3.5.12",
+        "@vue/shared": "3.5.12"
+      },
+      "peerDependencies": {
+        "typescript": "*"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/vue3-otp-input": {
+      "version": "0.5.21",
+      "resolved": "https://registry.npmjs.org/vue3-otp-input/-/vue3-otp-input-0.5.21.tgz",
+      "integrity": "sha512-dRxmGJqXlU+U5dCijNCyY7ird49+pyfeQspSTqvIp2Xs+VByIluNlTOjgHrftzSdeVZggtx+Ojb8uKiRLaob4Q==",
+      "license": "MIT",
+      "dependencies": {
+        "vue": "^3.4.27"
+      },
+      "peerDependencies": {
+        "vue": "^3.0.*"
+      }
+    }
+  }
+}

package/dist/custom/package.json

@@ -0,0 +1,16 @@
+{
+  "name": "custom",
+  "version": "1.0.0",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "description": "",
+  "dependencies": {
+    "@loltech/vue3-2fa-code-input": "^1.1.0",
+    "vue3-otp-input": "^0.5.21"
+  }
+}

package/dist/custom/tsconfig.json

@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".", // This should point to your project root
+    "paths": {
+      "@/*": [
+        // "node_modules/adminforth/dist/spa/src/*"
+        "../../../spa/src/*"
+      ],
+      "*": [
+        // "node_modules/adminforth/dist/spa/node_modules/*"
+        "../../../spa/node_modules/*"
+      ],
+      "@@/*": [
+        // "node_modules/adminforth/dist/spa/src/*"
+        "."
+      ]
+    }
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adminforth/two-factors-auth",
-  "version": "1.1.0",
+  "version": "1.1.2-next.1",
   "description": "AdminForth plugin for two factors authentication",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -11,7 +11,7 @@
   "type": "module",
   "scripts": {
     "prepare": "npm link adminforth",
-    "build": "tsc"
+    "build": "tsc && rsync -av --exclude 'node_modules' custom dist/"
   },
   "keywords": [
     "adminforth",