@adminforth/two-factors-auth 1.0.0

package/.woodpecker/buildRelease.sh

@@ -0,0 +1,13 @@
+
+#!/bin/bash
+
+# write npm run output both to console and to build.log
+npm run build 2>&1 | tee build.log
+build_status=${PIPESTATUS[0]}
+
+# if exist status from the npm run build is not 0
+# then exit with the status code from the npm run build
+if [ $build_status -ne 0 ]; then
+  echo "Build failed. Exiting with status code $build_status"
+  exit $build_status
+fi

package/.woodpecker/buildSlackNotify.sh

@@ -0,0 +1,44 @@
+#!/bin/sh
+
+set -x
+
+COMMIT_SHORT_SHA=$(echo $CI_COMMIT_SHA | cut -c1-8)
+
+
+if [ "$CI_STEP_STATUS" = "success" ]; then
+  MESSAGE="Did a build without issues on \`$CI_REPO_NAME/$CI_COMMIT_BRANCH\`. Commit: _${CI_COMMIT_MESSAGE}_ (<$CI_COMMIT_URL|$COMMIT_SHORT_SHA>)"
+
+  curl  -s -X POST -H "Content-Type: application/json" -d '{
+    "username": "'"$CI_COMMIT_AUTHOR"'",
+    "icon_url": "'"$CI_COMMIT_AUTHOR_AVATAR"'",
+    "attachments": [
+      {
+          "mrkdwn_in": ["text", "pretext"],
+          "color": "#36a64f",
+          "text": "'"$MESSAGE"'"
+      }
+    ]
+  }' "$DEVELOPERS_SLACK_WEBHOOK"
+  exit 0
+fi
+export BUILD_LOG=$(cat ./build.log)
+
+BUILD_LOG=$(echo $BUILD_LOG | sed 's/"/\\"/g')
+
+MESSAGE="Broke \`$CI_REPO_NAME/$CI_COMMIT_BRANCH\` with commit _${CI_COMMIT_MESSAGE}_ (<$CI_COMMIT_URL|$COMMIT_SHORT_SHA>)"
+CODE_BLOCK="\`\`\`$BUILD_LOG\n\`\`\`"
+
+echo "Sending slack message to developers $MESSAGE"
+# Send the message
+curl -sS -X POST -H "Content-Type: application/json" -d '{
+  "username": "'"$CI_COMMIT_AUTHOR"'",
+  "icon_url": "'"$CI_COMMIT_AUTHOR_AVATAR"'",
+  "attachments": [
+    {
+        "mrkdwn_in": ["text", "pretext"],
+        "color": "#8A1C12",
+        "text": "'"$CODE_BLOCK"'",
+        "pretext": "'"$MESSAGE"'"
+    }
+  ]
+}' "$DEVELOPERS_SLACK_WEBHOOK" 2>&1

package/.woodpecker/release.yml

@@ -0,0 +1,43 @@
+clone:
+  git:
+    image: woodpeckerci/plugin-git
+    settings:
+      partial: false
+      depth: 5
+
+steps:
+  init-secrets:
+    when:
+      - event: push
+    image: infisical/cli
+    environment:
+      INFISICAL_TOKEN:
+        from_secret: VAULT_TOKEN
+    commands:
+      - infisical export --domain https://vault.devforth.io/api --format=dotenv-export --env="prod" > /woodpecker/deploy.vault.env
+    secrets:
+      - VAULT_TOKEN
+
+  release:
+    image: node:20
+    when:
+      - event: push
+    volumes:
+      - /var/run/docker.sock:/var/run/docker.sock
+    commands:
+      - export $(cat /woodpecker/deploy.vault.env | xargs)
+      - npm clean-install
+      - /bin/bash ./.woodpecker/buildRelease.sh
+      - npm audit signatures
+      - npx semantic-release
+
+  slack-on-failure:
+    when:
+      - event: push
+        status: [failure, success]
+      - event: push
+    image: curlimages/curl
+    commands:
+      - export $(cat /woodpecker/deploy.vault.env | xargs)
+      - /bin/sh ./.woodpecker/buildSlackNotify.sh
+

package/CHANGELOG.md

@@ -0,0 +1,5 @@
+
+# Changelog
+
+The complete changelog is available on the [GitHub Releases page](https://github.com/devforth/adminforth-two-factors-auth/releases).
+

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Devforth.io
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/build.log

@@ -0,0 +1,4 @@
+
+> @adminforth/two-factors-auth@1.0.33 build
+> tsc
+

package/custom/TwoFactorsConfirmation.vue

@@ -0,0 +1,175 @@
+<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"
+                        :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/custom/TwoFactorsSetup.vue

@@ -0,0 +1,207 @@
+<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"
+                      :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>