From 0037e05bce9b8371fcac44a88d5d1ded321a52a8 Mon Sep 17 00:00:00 2001
From: Bailetti Tommaso <tommaso.bailetti@nethesis.it>
Date: Thu, 7 Nov 2024 12:14:13 +0100
Subject: [PATCH] feat(controller): added 2fa auth (#426)

---
 .../controller/ControllerAppLogin.vue         | 201 +++++++++++-------
 .../controller/users/UsersTable.vue           |  17 ++
 .../standalone/StandaloneAppLogin.vue         |   2 +-
 .../account/two_fa/TwoFactorAuth.vue          |   6 +-
 .../two_fa/ConfigureTwoFaDrawer.vue           |   8 +-
 .../account => }/two_fa/RevokeTwoFaModal.vue  |  12 +-
 src/i18n/en/translation.json                  |   5 +-
 src/lib/standalone/twoFa.ts                   |  70 ------
 src/lib/twoFa.ts                              |  74 +++++++
 src/stores/controller/accounts.ts             |   1 +
 src/stores/controller/controllerLogin.ts      |  54 +++--
 src/views/controller/AccountView.vue          |  11 +
 src/views/controller/UsersView.vue            |   8 +-
 13 files changed, 290 insertions(+), 179 deletions(-)
 rename src/components/{standalone/account => }/two_fa/ConfigureTwoFaDrawer.vue (93%)
 rename src/components/{standalone/account => }/two_fa/RevokeTwoFaModal.vue (91%)
 delete mode 100644 src/lib/standalone/twoFa.ts
 create mode 100644 src/lib/twoFa.ts

diff --git a/src/components/controller/ControllerAppLogin.vue b/src/components/controller/ControllerAppLogin.vue
index 1e39f30b0..7ff4f790f 100644
--- a/src/components/controller/ControllerAppLogin.vue
+++ b/src/components/controller/ControllerAppLogin.vue
@@ -5,34 +5,36 @@
 
 <script setup lang="ts">
 import {
-  NeLink,
-  NeHeading,
-  NeInlineNotification,
-  NeButton,
-  NeTextInput,
   getAxiosErrorMessage,
-  focusElement,
-  deleteFromStorage,
   getStringFromStorage,
-  saveToStorage
+  NeButton,
+  NeHeading,
+  NeInlineNotification,
+  NeLink,
+  NeTextInput
 } from '@nethesis/vue-components'
 import { useLoginStore } from '@/stores/controller/controllerLogin'
-import { onMounted, ref } from 'vue'
+import { onMounted, ref, useTemplateRef } from 'vue'
 import { useI18n } from 'vue-i18n'
-import { getProductName, getCompanyName, getPrivacyPolicyUrl } from '@/lib/config'
-import { validateRequired } from '@/lib/validation'
+import { getCompanyName, getPrivacyPolicyUrl, getProductName } from '@/lib/config'
+import { MessageBag, validateRequired, validateSixDigitCode } from '@/lib/validation'
+import { getControllerRoutePrefix } from '@/lib/router'
+import router from '@/router'
+import { ValidationError } from '@/lib/standalone/ubus'
 
-let username = ref('')
-let usernameRef = ref()
-let password = ref('')
-let passwordRef = ref()
-let rememberMe = ref(false)
+const username = ref('')
+const password = ref('')
+const twoFaOtp = ref('')
+const formRefs = {
+  username: useTemplateRef<HTMLInputElement>('username-ref'),
+  password: useTemplateRef<HTMLInputElement>('password-ref'),
+  twoFaOtp: useTemplateRef<HTMLInputElement>('two-fa-otp-ref')
+}
+const rememberMe = ref(false)
+const validationErrors = ref(new MessageBag())
+const error = ref<Error>()
 
-let error = ref({
-  username: '',
-  password: '',
-  login: ''
-})
+const loading = ref(false)
 
 const loginStore = useLoginStore()
 const { t } = useI18n()
@@ -44,80 +46,89 @@ onMounted(() => {
   if (usernameFromStorage) {
     rememberMe.value = true
     username.value = usernameFromStorage
-    focusElement(passwordRef)
+    formRefs.password.value?.focus()
   } else {
-    focusElement(usernameRef)
+    formRefs.username.value?.focus()
   }
 })
 
 async function login() {
-  error.value.username = ''
-  error.value.password = ''
-  error.value.login = ''
-
-  const isValidationOk = validate()
-
-  if (!isValidationOk) {
+  loading.value = true
+  error.value = undefined
+  if (isFormInvalid()) {
+    loading.value = false
     return
   }
 
   try {
-    await loginStore.login(username.value, password.value)
-
-    // set or remove username to/from local storage
-    if (rememberMe.value) {
-      saveToStorage('controllerUsername', username.value)
-    } else {
-      deleteFromStorage('controllerUsername')
+    await loginStore.login(username.value, password.value, rememberMe.value)
+    if (!loginStore.twoFaActive) {
+      await router.push(`${getControllerRoutePrefix()}/`)
     }
   } catch (err: any) {
-    console.error('login error', err)
-
     if (err?.response?.status == 401) {
-      error.value.login = 'login.incorrect_username_or_password'
-      focusElement(passwordRef)
+      error.value = new Error('login.incorrect_username_or_password')
+      formRefs.password.value?.focus()
     } else {
-      error.value.login = getAxiosErrorMessage(err)
+      error.value = new Error(getAxiosErrorMessage(err))
     }
+  } finally {
+    loading.value = false
   }
 }
 
-function validate() {
-  error.value.username = ''
-  error.value.password = ''
-  error.value.login = ''
-  let isValidationOk = true
-
-  // username
-
-  {
-    // check required
-    let { valid, errMessage } = validateRequired(username.value)
-    if (!valid) {
-      error.value.username = errMessage as string
-
-      if (isValidationOk) {
-        isValidationOk = false
-        focusElement(usernameRef)
-      }
+async function verifyTwoFa() {
+  loading.value = true
+  error.value = undefined
+  if (isFormInvalid()) {
+    loading.value = false
+    return
+  }
+  try {
+    await loginStore.verifyTwoFaToken(username.value, twoFaOtp.value)
+    await router.push(`${getControllerRoutePrefix()}/`)
+  } catch (err: any) {
+    if (err instanceof ValidationError) {
+      validationErrors.value = err.errorBag
+      formRefs.twoFaOtp.value?.focus()
+    } else {
+      error.value = new Error(getAxiosErrorMessage(err))
     }
+  } finally {
+    loading.value = false
   }
+}
 
-  // password
-
-  {
-    // check required
-    let { valid, errMessage } = validateRequired(password.value)
-    if (!valid) {
-      error.value.password = errMessage as string
-
-      if (isValidationOk) {
-        isValidationOk = false
-        focusElement(passwordRef)
+function isFormInvalid() {
+  validationErrors.value.clear()
+  if (loginStore.twoFaActive) {
+    {
+      // otp
+      let { valid, errMessage } = validateSixDigitCode(twoFaOtp.value)
+      if (!valid) {
+        validationErrors.value.set('otp', errMessage as string)
+        formRefs.twoFaOtp.value?.focus()
+      }
+    }
+  } else {
+    {
+      // username
+      let { valid, errMessage } = validateRequired(username.value)
+      if (!valid) {
+        validationErrors.value.set('username', errMessage as string)
+        formRefs.username.value?.focus()
+      }
+    }
+    {
+      // password
+      let { valid, errMessage } = validateRequired(password.value)
+      if (!valid) {
+        validationErrors.value.set('password', errMessage as string)
+        formRefs.password.value?.focus()
       }
     }
   }
-  return isValidationOk
+  return validationErrors.value.size > 0
 }
 </script>
 
@@ -148,29 +159,59 @@ function validate() {
               {{ t('login.privacy_policy') }}
             </NeLink>
           </div>
-          <form class="space-y-6" @submit.prevent>
+          <form v-if="loginStore.twoFaActive" class="space-y-6">
+            <NeInlineNotification
+              v-if="error"
+              :description="t(error.message)"
+              :title="t('login.cannot_login')"
+              kind="error"
+            />
+            <NeTextInput
+              ref="two-fa-otp-ref"
+              v-model.trim="twoFaOtp"
+              :disabled="loading"
+              :invalidMessage="t(validationErrors.getFirstI18nKeyFor('otp'))"
+              :label="t('standalone.two_fa.otp')"
+              :loading="loading"
+            />
+            <NeButton
+              :disabled="loading"
+              :loading="loading"
+              class="w-full"
+              kind="primary"
+              size="lg"
+              type="submit"
+              @click.prevent="verifyTwoFa"
+              >{{ t('standalone.two_fa.verify_code') }}
+            </NeButton>
+          </form>
+          <form v-else class="space-y-6" @submit.prevent>
             <NeInlineNotification
-              v-if="error.login"
+              v-if="error"
               kind="error"
               :title="t('login.cannot_login')"
-              :description="t(error.login)"
+              :description="t(error.message)"
             />
             <NeTextInput
               :label="t('login.username')"
               v-model.trim="username"
-              :invalidMessage="t(error.username)"
+              ref="username-ref"
+              :disabled="loading"
+              :invalidMessage="t(validationErrors.getFirstI18nKeyFor('username'))"
               autocomplete="username"
-              ref="usernameRef"
+              :loading="loading"
             />
             <NeTextInput
               :label="t('login.password')"
               v-model="password"
               isPassword
+              ref="password-ref"
+              :disabled="loading"
               :showPasswordLabel="t('ne_text_input.show_password')"
               :hidePasswordLabel="t('ne_text_input.hide_password')"
-              :invalidMessage="t(error.password)"
+              :invalidMessage="t(validationErrors.getFirstI18nKeyFor('password'))"
               autocomplete="current-password"
-              ref="passwordRef"
+              :loading="loading"
             />
             <div class="flex items-center justify-between">
               <div class="flex items-center">
@@ -200,6 +241,8 @@ function validate() {
                 kind="primary"
                 size="lg"
                 @click.prevent="login"
+                :disabled="loading"
+                :loading="loading"
                 type="submit"
                 class="w-full"
                 >{{ t('login.sign_in') }}</NeButton
diff --git a/src/components/controller/users/UsersTable.vue b/src/components/controller/users/UsersTable.vue
index 189a108ec..46e4916f0 100644
--- a/src/components/controller/users/UsersTable.vue
+++ b/src/components/controller/users/UsersTable.vue
@@ -20,6 +20,8 @@ import { NeButton } from '@nethesis/vue-components'
 import { type ControllerAccount } from '@/stores/controller/accounts'
 import { useLoginStore } from '@/stores/controller/controllerLogin'
 import { ref } from 'vue'
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
+import { faCheck, faCircleCheck, faCircleXmark } from '@fortawesome/free-solid-svg-icons'
 
 const props = defineProps<{
   users: ControllerAccount[]
@@ -63,6 +65,9 @@ function getDropdownItems(item: ControllerAccount) {
       <NeTableHeadCell>
         {{ t('controller.users.display_name') }}
       </NeTableHeadCell>
+      <NeTableHeadCell>
+        {{ t('controller.users.two_fa_status') }}
+      </NeTableHeadCell>
       <NeTableHeadCell>
         <!-- no header for actions -->
       </NeTableHeadCell>
@@ -75,6 +80,18 @@ function getDropdownItems(item: ControllerAccount) {
         <NeTableCell :data-label="t('controller.users.display_name')">
           {{ item.display_name }}
         </NeTableCell>
+        <NeTableCell :data-label="t('controller.users.two_fa_status')">
+          <span class="flex items-center gap-2">
+            <template v-if="item.two_fa">
+              <FontAwesomeIcon :icon="faCircleCheck" class="text-green-700 dark:text-green-500" />
+              <span>{{ t('controller.users.two_fa_enabled') }}</span>
+            </template>
+            <template v-else>
+              <FontAwesomeIcon :icon="faCircleXmark" />
+              <span>{{ t('controller.users.two_fa_disabled') }}</span>
+            </template>
+          </span>
+        </NeTableCell>
         <NeTableCell :data-label="t('common.actions')">
           <div class="align-center -ml-2.5 flex gap-2 md:ml-0 md:justify-end">
             <NeButton kind="tertiary" @click="emit('edit', item)">
diff --git a/src/components/standalone/StandaloneAppLogin.vue b/src/components/standalone/StandaloneAppLogin.vue
index a719df768..f719377ed 100644
--- a/src/components/standalone/StandaloneAppLogin.vue
+++ b/src/components/standalone/StandaloneAppLogin.vue
@@ -22,7 +22,7 @@ import { MessageBag, validateRequired, validateSixDigitCode } from '@/lib/valida
 import { useI18n } from 'vue-i18n'
 import { getProductName, getCompanyName, getPrivacyPolicyUrl } from '@/lib/config'
 import { jwtDecode } from 'jwt-decode'
-import { verifyTwoFaOtp } from '@/lib/standalone/twoFa'
+import { verifyTwoFaOtp } from '@/lib/twoFa'
 import { ValidationError } from '@/lib/standalone/ubus'
 
 let username = ref('')
diff --git a/src/components/standalone/account/two_fa/TwoFactorAuth.vue b/src/components/standalone/account/two_fa/TwoFactorAuth.vue
index 759e373b9..f12d58414 100644
--- a/src/components/standalone/account/two_fa/TwoFactorAuth.vue
+++ b/src/components/standalone/account/two_fa/TwoFactorAuth.vue
@@ -6,7 +6,7 @@
 <script setup lang="ts">
 import { useI18n } from 'vue-i18n'
 import { computed, onMounted, ref } from 'vue'
-import { getTwoFaStatus } from '@/lib/standalone/twoFa'
+import { getTwoFaStatus } from '@/lib/twoFa'
 import {
   NeInlineNotification,
   NeSkeleton,
@@ -18,8 +18,8 @@ import {
   getAxiosErrorMessage,
   NeTextArea
 } from '@nethesis/vue-components'
-import ConfigureTwoFaDrawer from './ConfigureTwoFaDrawer.vue'
-import RevokeTwoFaModal from './RevokeTwoFaModal.vue'
+import ConfigureTwoFaDrawer from '@/components/two_fa/ConfigureTwoFaDrawer.vue'
+import RevokeTwoFaModal from '@/components/two_fa/RevokeTwoFaModal.vue'
 import { useLoginStore } from '@/stores/standalone/standaloneLogin'
 
 const { t } = useI18n()
diff --git a/src/components/standalone/account/two_fa/ConfigureTwoFaDrawer.vue b/src/components/two_fa/ConfigureTwoFaDrawer.vue
similarity index 93%
rename from src/components/standalone/account/two_fa/ConfigureTwoFaDrawer.vue
rename to src/components/two_fa/ConfigureTwoFaDrawer.vue
index 7f13b4b72..1b4ed5dfd 100644
--- a/src/components/standalone/account/two_fa/ConfigureTwoFaDrawer.vue
+++ b/src/components/two_fa/ConfigureTwoFaDrawer.vue
@@ -16,11 +16,13 @@ import {
 import { ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { MessageBag, validateSixDigitCode } from '@/lib/validation'
-import { getTwoFaQrCode, verifyTwoFaOtp } from '@/lib/standalone/twoFa'
+import { getTwoFaQrCode, verifyTwoFaOtp } from '@/lib/twoFa'
 import QRCodeVue3 from 'qrcode-vue3'
 import { ValidationError } from '@/lib/standalone/ubus'
-import { useLoginStore } from '@/stores/standalone/standaloneLogin'
+import { useLoginStore as useStandaloneLoginStore } from '@/stores/standalone/standaloneLogin'
+import { useLoginStore as useControllerLoginStore } from '@/stores/controller/controllerLogin'
 import { useNotificationsStore } from '@/stores/notifications'
+import { isStandaloneMode } from '@/lib/config'
 
 const props = defineProps({
   isShown: { type: Boolean, default: false }
@@ -116,7 +118,7 @@ async function verifyOtp() {
     return
   }
   loading.value.verifyOtp = true
-  const loginStore = useLoginStore()
+  const loginStore = isStandaloneMode() ? useStandaloneLoginStore() : useControllerLoginStore()
 
   try {
     await verifyTwoFaOtp(loginStore.username, loginStore.token, otp.value)
diff --git a/src/components/standalone/account/two_fa/RevokeTwoFaModal.vue b/src/components/two_fa/RevokeTwoFaModal.vue
similarity index 91%
rename from src/components/standalone/account/two_fa/RevokeTwoFaModal.vue
rename to src/components/two_fa/RevokeTwoFaModal.vue
index 85b1daff8..469ef98a9 100644
--- a/src/components/standalone/account/two_fa/RevokeTwoFaModal.vue
+++ b/src/components/two_fa/RevokeTwoFaModal.vue
@@ -4,18 +4,20 @@
 -->
 
 <script setup lang="ts">
-import { revokeTwoFa, verifyTwoFaOtp } from '@/lib/standalone/twoFa'
+import { revokeTwoFa, verifyTwoFaOtp } from '@/lib/twoFa'
 import { ValidationError } from '@/lib/standalone/ubus'
 import { MessageBag, validateSixDigitCode } from '@/lib/validation'
 import { useNotificationsStore } from '@/stores/notifications'
-import { useLoginStore } from '@/stores/standalone/standaloneLogin'
+import { useLoginStore as useStandaloneLoginStore } from '@/stores/standalone/standaloneLogin'
+import { useLoginStore as useControllerLoginStore } from '@/stores/controller/controllerLogin'
 import {
-  NeInlineNotification,
   focusElement,
   getAxiosErrorMessage,
+  NeInlineNotification,
+  NeModal,
   NeTextInput
 } from '@nethesis/vue-components'
-import { NeModal } from '@nethesis/vue-components'
+import { isStandaloneMode } from '@/lib/config'
 import { ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 
@@ -28,7 +30,7 @@ const props = defineProps({
 const emit = defineEmits(['close', 'reloadData'])
 
 const { t } = useI18n()
-const loginStore = useLoginStore()
+const loginStore = isStandaloneMode() ? useStandaloneLoginStore() : useControllerLoginStore()
 const notificationsStore = useNotificationsStore()
 const otp = ref('')
 const otpRef = ref()
diff --git a/src/i18n/en/translation.json b/src/i18n/en/translation.json
index 1918fcc51..2b0bc3c62 100644
--- a/src/i18n/en/translation.json
+++ b/src/i18n/en/translation.json
@@ -2288,7 +2288,10 @@
       "user_added": "User added",
       "user_edited": "User edited",
       "unchanged": "Unchanged",
-      "edit_user": "Edit user"
+      "edit_user": "Edit user",
+      "two_fa_status": "2FA status",
+      "two_fa_enabled": "Enabled",
+      "two_fa_disabled": "Disabled"
     }
   },
   "notifications": {
diff --git a/src/lib/standalone/twoFa.ts b/src/lib/standalone/twoFa.ts
deleted file mode 100644
index 26aa6d585..000000000
--- a/src/lib/standalone/twoFa.ts
+++ /dev/null
@@ -1,70 +0,0 @@
-//  Copyright (C) 2024 Nethesis S.r.l.
-//  SPDX-License-Identifier: GPL-3.0-or-later
-
-import axios from 'axios'
-import { getStandaloneApiEndpoint } from '../config'
-import { useLoginStore } from '@/stores/standalone/standaloneLogin'
-import { getValidationErrorsFromAxiosError } from '../validation'
-import { ValidationError } from './ubus'
-
-export async function getTwoFaStatus() {
-  const loginStore = useLoginStore()
-  const res = await axios.get(`${getStandaloneApiEndpoint()}/2fa`, {
-    headers: {
-      Authorization: `Bearer ${loginStore.token}`
-    }
-  })
-  return res.data
-}
-
-export async function getTwoFaQrCode() {
-  const loginStore = useLoginStore()
-  const res = await axios.get(`${getStandaloneApiEndpoint()}/2fa/qr-code`, {
-    headers: {
-      Authorization: `Bearer ${loginStore.token}`
-    }
-  })
-  return res.data
-}
-
-export async function verifyTwoFaOtp(username: string, token: string, otp: string) {
-  try {
-    const res = await axios.post(`${getStandaloneApiEndpoint()}/2fa/otp-verify`, {
-      otp,
-      username,
-      token
-    })
-    return res.data
-  } catch (err: any) {
-    const errorBag = getValidationErrorsFromAxiosError(err)
-
-    if (errorBag.size) {
-      throw new ValidationError(err.response.data.message, errorBag)
-    } else {
-      // rethrow the error as-is
-      throw err
-    }
-  }
-}
-
-export async function revokeTwoFa() {
-  const loginStore = useLoginStore()
-
-  try {
-    const res = await axios.delete(`${getStandaloneApiEndpoint()}/2fa`, {
-      headers: {
-        Authorization: `Bearer ${loginStore.token}`
-      }
-    })
-    return res.data
-  } catch (err: any) {
-    const errorBag = getValidationErrorsFromAxiosError(err)
-
-    if (errorBag.size) {
-      throw new ValidationError(err.response.data.message, errorBag)
-    } else {
-      // rethrow the error as-is
-      throw err
-    }
-  }
-}
diff --git a/src/lib/twoFa.ts b/src/lib/twoFa.ts
new file mode 100644
index 000000000..7cde7b82f
--- /dev/null
+++ b/src/lib/twoFa.ts
@@ -0,0 +1,74 @@
+//  Copyright (C) 2024 Nethesis S.r.l.
+//  SPDX-License-Identifier: GPL-3.0-or-later
+
+import axios from 'axios'
+import { getControllerApiEndpoint, getStandaloneApiEndpoint, isStandaloneMode } from '@/lib/config'
+import { useLoginStore as useStandaloneLoginStore } from '@/stores/standalone/standaloneLogin'
+import { useLoginStore as useControllerLoginStore } from '@/stores/controller/controllerLogin'
+import { getValidationErrorsFromAxiosError } from '@/lib/validation'
+import { ValidationError } from '@/lib/standalone/ubus'
+
+export async function getTwoFaStatus() {
+  const loginStore = isStandaloneMode() ? useStandaloneLoginStore() : useControllerLoginStore()
+  const endpoint = isStandaloneMode() ? getStandaloneApiEndpoint() : getControllerApiEndpoint()
+  const res = await axios.get(`${endpoint}/2fa`, {
+    headers: {
+      Authorization: `Bearer ${loginStore.token}`
+    }
+  })
+  return res.data
+}
+
+export async function getTwoFaQrCode() {
+  const loginStore = isStandaloneMode() ? useStandaloneLoginStore() : useControllerLoginStore()
+  const endpoint = isStandaloneMode() ? getStandaloneApiEndpoint() : getControllerApiEndpoint()
+  const res = await axios.get(`${endpoint}/2fa/qr-code`, {
+    headers: {
+      Authorization: `Bearer ${loginStore.token}`
+    }
+  })
+  return res.data
+}
+
+export async function verifyTwoFaOtp(username: string, token: string, otp: string) {
+  const endpoint = isStandaloneMode() ? getStandaloneApiEndpoint() : getControllerApiEndpoint()
+  try {
+    const res = await axios.post(`${endpoint}/2fa/otp-verify`, {
+      otp,
+      username,
+      token
+    })
+    return res.data
+  } catch (err: any) {
+    const errorBag = getValidationErrorsFromAxiosError(err)
+
+    if (errorBag.size) {
+      throw new ValidationError(err.response.data.message, errorBag)
+    } else {
+      // rethrow the error as-is
+      throw err
+    }
+  }
+}
+
+export async function revokeTwoFa() {
+  const loginStore = isStandaloneMode() ? useStandaloneLoginStore() : useControllerLoginStore()
+  const endpoint = isStandaloneMode() ? getStandaloneApiEndpoint() : getControllerApiEndpoint()
+  try {
+    const res = await axios.delete(`${endpoint}/2fa`, {
+      headers: {
+        Authorization: `Bearer ${loginStore.token}`
+      }
+    })
+    return res.data
+  } catch (err: any) {
+    const errorBag = getValidationErrorsFromAxiosError(err)
+
+    if (errorBag.size) {
+      throw new ValidationError(err.response.data.message, errorBag)
+    } else {
+      // rethrow the error as-is
+      throw err
+    }
+  }
+}
diff --git a/src/stores/controller/accounts.ts b/src/stores/controller/accounts.ts
index 60cd1f43f..306039589 100644
--- a/src/stores/controller/accounts.ts
+++ b/src/stores/controller/accounts.ts
@@ -12,6 +12,7 @@ export type ControllerAccount = {
   password: string
   display_name: string
   created: string
+  two_fa: boolean
 }
 
 /*
diff --git a/src/stores/controller/controllerLogin.ts b/src/stores/controller/controllerLogin.ts
index 77c867276..b6388c92e 100644
--- a/src/stores/controller/controllerLogin.ts
+++ b/src/stores/controller/controllerLogin.ts
@@ -6,10 +6,16 @@ import { defineStore } from 'pinia'
 import { isEmpty } from 'lodash-es'
 import { getJsonFromStorage, deleteFromStorage, saveToStorage } from '@nethesis/vue-components'
 import axios from 'axios'
-import { getControllerApiEndpoint } from '../../lib/config'
+import { getControllerApiEndpoint } from '@/lib/config'
 import { useRouter } from 'vue-router'
 import { getControllerRoutePrefix } from '@/lib/router'
 import { useThemeStore } from '../theme'
+import { jwtDecode } from 'jwt-decode'
+import { verifyTwoFaOtp } from '@/lib/twoFa'
+
+type JwtToken = {
+  '2fa': boolean
+}
 
 export const TOKEN_REFRESH_INTERVAL = 1000 * 60 * 30 // half an hour
 
@@ -28,6 +34,14 @@ export const useLoginStore = defineStore('controllerLogin', () => {
   })
   const isAdmin = computed(() => role.value === 'admin')
 
+  const twoFaActive = computed((): boolean => {
+    try {
+      return jwtDecode<JwtToken>(token.value)['2fa']
+    } catch (e) {
+      return false
+    }
+  })
+
   const loadUserFromStorage = () => {
     const loginInfo = getJsonFromStorage('controllerLoginInfo')
 
@@ -39,27 +53,39 @@ export const useLoginStore = defineStore('controllerLogin', () => {
     }
   }
 
-  const login = async (user: string, password: string) => {
+  const login = async (user: string, password: string, rememberMe = false) => {
     const res = await axios.post(`${getControllerApiEndpoint()}/login`, {
       username: user,
       password
     })
-    const jwtToken = res.data.token
-    tokenRefreshedTime.value = new Date().getTime()
 
-    const loginInfo = {
-      username: user,
-      token: jwtToken,
-      tokenRefreshedTime: tokenRefreshedTime.value
+    // set or remove username to/from local storage
+    if (rememberMe) {
+      saveToStorage('controllerUsername', username.value)
+    } else {
+      deleteFromStorage('controllerUsername')
     }
-    saveToStorage('controllerLoginInfo', loginInfo)
+
+    token.value = res.data.token
+    tokenRefreshedTime.value = new Date().getTime()
+    if (!twoFaActive.value) {
+      username.value = user
+      role.value = JSON.parse(atob(token.value.split('.')[1])).role
+    }
+  }
+
+  async function verifyTwoFaToken(user: string, otp: string) {
+    await verifyTwoFaOtp(user, token.value, otp)
     username.value = user
-    token.value = jwtToken
-    role.value = JSON.parse(atob(jwtToken.split('.')[1])).role
+    role.value = JSON.parse(atob(token.value.split('.')[1])).role
+    saveToStorage('controllerLoginInfo', {
+      username: username.value,
+      token: token.value,
+      tokenRefreshedTime: tokenRefreshedTime.value
+    })
     const themeStore = useThemeStore()
     themeStore.loadTheme()
     isSessionExpired.value = false
-    router.push(`${getControllerRoutePrefix()}/`)
   }
 
   const logout = async () => {
@@ -121,6 +147,8 @@ export const useLoginStore = defineStore('controllerLogin', () => {
     login,
     logout,
     refreshToken,
-    isAdmin
+    isAdmin,
+    twoFaActive,
+    verifyTwoFaToken
   }
 })
diff --git a/src/views/controller/AccountView.vue b/src/views/controller/AccountView.vue
index 909bc1921..719a2e4b9 100644
--- a/src/views/controller/AccountView.vue
+++ b/src/views/controller/AccountView.vue
@@ -20,6 +20,7 @@ import GenerateSSHKeyPairDrawer from '@/components/controller/account_settings/G
 import DeleteSSHKeyModal from '@/components/controller/account_settings/DeleteSSHKeyModal.vue'
 import { useNotificationsStore } from '@/stores/notifications'
 import ChangeLangCombobox from '@/components/ChangeLangCombobox.vue'
+import TwoFactorAuth from '@/components/standalone/account/two_fa/TwoFactorAuth.vue'
 
 const { t } = useI18n()
 
@@ -97,6 +98,16 @@ onMounted(() => {
         }}</NeButton></template
       >
     </FormLayout>
+    <hr />
+    <FormLayout>
+      <template #title>
+        {{ t('standalone.two_fa.title') }}
+      </template>
+      <template #description>
+        {{ t('standalone.two_fa.description') }}
+      </template>
+      <TwoFactorAuth />
+    </FormLayout>
   </div>
   <ChangePasswordDrawer
     :is-shown="showChangePasswordDrawer"
diff --git a/src/views/controller/UsersView.vue b/src/views/controller/UsersView.vue
index 588af1192..a42d8cad7 100644
--- a/src/views/controller/UsersView.vue
+++ b/src/views/controller/UsersView.vue
@@ -4,14 +4,14 @@
 -->
 
 <script setup lang="ts">
-import { useAccountsStore, type ControllerAccount } from '@/stores/controller/accounts'
+import { type ControllerAccount, useAccountsStore } from '@/stores/controller/accounts'
 import {
-  NeHeading,
   NeButton,
+  NeEmptyState,
+  NeHeading,
   NeInlineNotification,
   NeSkeleton,
-  NeTextInput,
-  NeEmptyState
+  NeTextInput
 } from '@nethesis/vue-components'
 import { computed, onMounted, ref } from 'vue'
 import { useI18n } from 'vue-i18n'