Merge pull request #666 from webitel/feature/add-2fa

feature: add 2fa[WTEL-3405]

package.json

@@ -29,6 +29,7 @@
     "jszip-utils": "^0.1.0",
     "monaco-editor": "^0.44.0",
     "path": "^0.12.7",
+    "qrcode.vue": "^3.4.1",
     "query-string": "^7.1.1",
     "sortablejs": "^1.10.2",
     "vue": "^3.2.47",

src/app/locale/en/en.js

@@ -207,6 +207,9 @@ export default {
         tokenPopupSave: 'Save as TXT',
         userIp: 'User IP',
         userId: 'User ID',
+        download: 'Download',
+        regenerate: 'Regenerate',
+        askingAlert: 'Are you sure you want to regenerate the code? The user won’t be able to log in',
       },
       license: {
         customers: 'Customers',

src/app/locale/ru/ru.js

@@ -207,6 +207,9 @@ export default {
         tokenPopupSave: 'Сохранить  в формате TXT',
         userIp: 'IP пользователя',
         userId: 'ID пользователя',
+        download: 'Скачать',
+        regenerate: 'Перегенерировать',
+        askingAlert: 'Вы уверены, что хотите перегенерировать QR-код? Пользователь потеряет возможность войти в систему',
       },
       license: {
         customers: 'Пользователи',

src/app/locale/ua/ua.js

@@ -207,6 +207,9 @@ export default {
         tokenPopupSave: 'Зберегти у форматі TXT',
         userIp: 'IP користувача',
         userId: 'ID користувача',
+        download: 'Завантажити',
+        regenerate: 'Перегенерувати',
+        askingAlert: 'Ви впевнені, що хочете перегенерувати QR-код? Користувач втратить можливість зайти в систему',
       },
       license: {
         customers: 'Користувачі',

src/modules/directory/modules/users/api/users-2fa.js

@@ -0,0 +1,21 @@
+import applyTransform, { notify } from '@webitel/ui-sdk/src/api/transformers/index.js';
+import instance from '../../../../../app/api/instance';
+
+const generateUrl = async ({ id }) => {
+  const url = `users/${id}/2fa`;
+
+  try {
+    const response = await instance.post(url,{});
+    return applyTransform(response.data, []);
+  } catch (err) {
+    throw applyTransform(err, [
+      notify,
+    ]);
+  }
+};
+
+const Users2faAPI = {
+  generate: generateUrl,
+};
+
+export default Users2faAPI;

src/modules/directory/modules/users/components/_internals/qrcode-two-factor-auth.vue

@@ -0,0 +1,122 @@
+<template>
+  <div class="qrcode-two-factor-auth">
+
+    <wt-popup
+      v-if="isConfirmationPopup"
+      @close="closeConfirmationPopup"
+    >
+
+      <template v-slot:title>
+        {{ $t('reusable.warning') }}
+      </template>
+
+      <template v-slot:main>
+        {{ $t('objects.directory.users.askingAlert') }}
+      </template>
+
+      <template v-slot:actions>
+        <wt-button
+          color="secondary"
+          @click="closeConfirmationPopup"
+        >
+          {{ $t('vocabulary.no') }}
+        </wt-button>
+
+        <wt-button
+          color="error"
+          @click="regenerateUrl"
+        >
+          {{ $t('vocabulary.yes') }}
+        </wt-button>
+      </template>
+    </wt-popup>
+
+    <div
+      ref="qrcodeContainer"
+      class="qrcode-two-factor-auth__canvas"
+    >
+      <qrcode-vue
+        ref="qrcode"
+        :value="props.url"
+        level="H"
+      />
+    </div>
+
+    <div class="qrcode-two-factor-auth__wrapper">
+      <wt-button
+        color="secondary"
+        @click="download"
+      >
+        {{ $t('objects.directory.users.download') }}
+      </wt-button>
+
+      <wt-button
+        color="error"
+        @click="openConfirmationPopup"
+      >
+        {{ $t('objects.directory.users.regenerate') }}
+      </wt-button>
+    </div>
+
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import { useStore } from 'vuex';
+import QrcodeVue from 'qrcode.vue';
+
+const props = defineProps({
+  namespace: {
+    type: String,
+  },
+  url: {
+    type: String,
+    required: true,
+  },
+});
+
+const store = useStore();
+
+const qrcodeContainer = ref();
+const isConfirmationPopup = ref(false);
+
+function download() {
+  const canvas = qrcodeContainer.value.querySelector('canvas');
+  const link = document.createElement('a');
+  link.download = 'qr-code.png';
+  link.href = canvas.toDataURL('image/png');
+  link.click();
+}
+
+async function regenerateUrl() {
+  await store.dispatch(`${props.namespace}/REGENERATE_2FA_URL`);
+  closeConfirmationPopup();
+}
+
+function openConfirmationPopup() {
+  isConfirmationPopup.value = true;
+}
+
+function closeConfirmationPopup() {
+  isConfirmationPopup.value = false;
+}
+</script>
+
+<style lang="scss" scoped>
+.qrcode-two-factor-auth {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--spacing-sm);
+
+  &__wrapper {
+    display: flex;
+    gap: var(--spacing-sm);
+  }
+
+  &__canvas {
+    box-shadow: var(--elevation-5);
+  }
+}
+</style>

src/modules/directory/modules/users/components/opened-user-general.vue

@@ -15,11 +15,9 @@
 
       <wt-input
         :disabled="disableUserInput"
-        :label="$t('objects.directory.users.login')"
-        :v="v.itemInstance.username"
-        :value="itemInstance.username"
-        required
-        @input="setItemProp({ prop: 'username', value: $event })"
+        :label="$t('objects.email')"
+        :value="itemInstance.email"
+        @input="setItemProp({ prop: 'email', value: $event })"
       />
 
       <password-input
@@ -32,30 +30,46 @@
 
       <wt-input
         :disabled="disableUserInput"
-        :label="$t('objects.directory.users.extensions')"
-        :value="itemInstance.extension"
-        @input="setItemProp({ prop: 'extension', value: $event })"
+        :label="$t('objects.directory.users.login')"
+        :v="v.itemInstance.username"
+        :value="itemInstance.username"
+        required
+        @input="setItemProp({ prop: 'username', value: $event })"
+      />
+
+      <qrcode
+        v-if="isDisplayQRCode"
+        :namespace="namespace"
+        :url="itemInstance.totpUrl"
       />
 
       <wt-input
         :disabled="disableUserInput"
-        :label="$t('objects.email')"
-        :value="itemInstance.email"
-        @input="setItemProp({ prop: 'email', value: $event })"
+        :label="$t('objects.directory.users.extensions')"
+        :value="itemInstance.extension"
+        @input="setItemProp({ prop: 'extension', value: $event })"
       />
+
     </div>
   </section>
 </template>
 
 <script>
+import { mapGetters } from 'vuex';
 import PasswordInput from '../../../../../app/components/utils/generate-password-input.vue';
 import openedTabComponentMixin
   from '../../../../../app/mixins/objectPagesMixins/openedObjectTabMixin/openedTabComponentMixin';
+import Qrcode from './_internals/qrcode-two-factor-auth.vue';
 
 export default {
   name: 'OpenedUserGeneral',
-  components: { PasswordInput },
+  components: { PasswordInput, Qrcode },
   mixins: [openedTabComponentMixin],
+  computed: {
+    ...mapGetters('directory/users', {
+      isDisplayQRCode: 'IS_DISPLAY_QR_CODE',
+    }),
+  },
 };
 </script>
 

src/modules/directory/modules/users/store/users.js

@@ -3,6 +3,7 @@ import ObjectStoreModule
 import PermissionsStoreModule
   from '../../../../../app/store/BaseStoreModules/StoreModules/PermissionsStoreModule/PermissionsStoreModule';
 import UsersAPI from '../api/users';
+import Users2faAPI from '../api/users-2fa.js';
 import logs from '../modules/logs/store/logs';
 import tokens from '../modules/tokens/store/usersTokens';
 import headers from './_internals/headers';
@@ -23,9 +24,20 @@ const resettableState = {
       note: '',
     },
     variables: [],
+    totpUrl: '',
   },
 };
 
+const getters = {
+  IS_DISPLAY_QR_CODE: (
+    state,
+    getters,
+    rootState,
+    rootGetters,
+  ) => rootGetters['userinfo/IS_CHANGE_USER_PASSWORD_ALLOW'] &&
+    !!state.itemInstance.totpUrl,
+};
+
 const actions = {
   ADD_VARIABLE_PAIR: (context) => {
     const pair = { key: '', value: '' };
@@ -55,6 +67,14 @@ const actions = {
     context.commit('RESET_ITEM_STATE');
     context.dispatch('directory/users/tokens/RESET_STATE', {}, { root: true });
   },
+  REGENERATE_2FA_URL: async (context) => {
+    try {
+      await Users2faAPI.generate({ id: context.state.itemId });
+      await context.dispatch('LOAD_ITEM');
+    } catch (err) {
+      throw err;
+    }
+  },
 };
 
 const mutations = {
@@ -78,6 +98,6 @@ const users = new ObjectStoreModule({ resettableState, headers })
 .attachAPIModule(UsersAPI)
 .generateAPIActions()
 .setChildModules({ tokens, logs, permissions })
-.getModule({ actions, mutations });
+.getModule({ getters, actions, mutations });
 
 export default users;

src/modules/userinfo/store/userinfo.js

@@ -24,6 +24,8 @@ const getters = {
     }
     return accumulator;
   }, []),
+
+  IS_CHANGE_USER_PASSWORD_ALLOW: (state) => !!state.permissions['change_user_password'],
 };
 
 const actions = {