hl-core 0.0.7-beta.9 → 0.0.8

package/components/Layout/SettingsPanel.vue

@@ -1,59 +1,29 @@
 <template>
   <base-drawer :panel-title="$dataStore.menu.title" which-panel="settings">
     <base-panel-item>
-      <v-btn
-        size="x-small"
-        icon="mdi-minus"
-        color="#A0B3D8"
-        class="text-white"
-        variant="flat"
-      ></v-btn>
+      <v-btn size="x-small" icon="mdi-minus" color="#A0B3D8" class="text-white" variant="flat" @click="handleFontSize('decrease')"></v-btn>
       Шрифт
-      <v-btn
-        size="x-small"
-        icon="mdi-plus"
-        color="#A0B3D8"
-        class="text-white"
-        variant="flat"
-      ></v-btn>
+      <v-btn size="x-small" icon="mdi-plus" color="#A0B3D8" class="text-white" variant="flat" @click="handleFontSize('increase')"></v-btn>
     </base-panel-item>
     <base-panel-item>
-      <v-text-field
-        v-model="$dataStore.user.fullName"
-        :readonly="true"
-        hide-details
-        variant="plain"
-        :label="$dataStore.user.roles?.join(', ')"
-      ></v-text-field>
+      <v-text-field v-model="$dataStore.user.fullName" :readonly="true" hide-details variant="plain" :label="$dataStore.user.roles?.join(', ')"></v-text-field>
       <i class="mdi mdi-account-outline text-2xl text-[#A0B3D8]"></i
     ></base-panel-item>
     <base-panel-item
-      v-for="panelItem of dataStore.settings.items"
-      :key="panelItem.title"
+      v-for="panelItem of dataStore.settings.items.filter(i => (typeof i.show === 'boolean' ? i.show : true))"
+      :key="panelItem.title!"
       class="cursor-pointer"
       @click="panelItem.action ? panelItem.action() : null"
     >
       {{ panelItem.title }}
-      <i
-        v-if="panelItem.icon"
-        class="mdi text-xl text-[#A0B3D8]"
-        :class="[panelItem.icon]"
-      ></i>
+      <i v-if="panelItem.icon" class="mdi text-xl text-[#A0B3D8]" :class="[panelItem.icon]"></i>
     </base-panel-item>
     <base-panel-item @click="dialog = true" class="cursor-pointer">
       Выход
       <i class="mdi mdi-logout text-xl text-[#A0B3D8]"></i>
     </base-panel-item>
 
-    <base-dialog
-      v-model="dialog"
-      :title="$t('dialog.exit')"
-      :subtitle="$t('dialog.dataWillClear')"
-      actions="default"
-      @yes="logoutUser"
-      @no="dialog = false"
-    >
-    </base-dialog
+    <base-dialog v-model="dialog" :title="$t('dialog.exit')" :subtitle="$t('dialog.dataWillClear')" actions="default" @yes="logoutUser" @no="dialog = false"> </base-dialog
   ></base-drawer>
 </template>
 
@@ -61,6 +31,16 @@
 const dialog = ref(false);
 const dataStore = useDataStore();
 
+const handleFontSize = (action: 'increase' | 'decrease') => {
+  if (action === 'increase' && dataStore.fontSize < 24) dataStore.fontSize += 2;
+  if (action === 'decrease' && dataStore.fontSize > 14) dataStore.fontSize -= 2;
+  if (dataStore.isEFO) {
+    dataStore.sendToChild(constants.postActions.font, dataStore.fontSize);
+  } else {
+    dataStore.sendToParent(constants.postActions.font, dataStore.fontSize);
+  }
+};
+
 const logoutUser = async () => {
   dialog.value = false;
   await dataStore.logoutUser();

package/components/List/ListEmpty.vue

@@ -0,0 +1,22 @@
+<template>
+  <div class="border-[1px] rounded-lg h-[80px] mx-[10px] mt-[14px] flex place-content-center" :class="[$libStyles.blueBgLight, $libStyles.textTitle]">
+    <div class="flex justify-center items-center font-medium gap-2 opacity-40">
+      {{ text }}
+      <i class="text-2xl mdi" :class="[icon ? icon : 'mdi-database-off-outline']"></i>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+export default defineComponent({
+  props: {
+    text: {
+      type: String,
+      default: 'Отсутствуют данные',
+    },
+    icon: {
+      type: String,
+    },
+  },
+});
+</script>

package/components/Menu/MenuNav.vue

@@ -1,5 +1,5 @@
 <template>
-  <aside class="w-full lg:w-1/4 bg-white flex flex-col border-r-2">
+  <aside class="w-full lg:w-1/4 bg-white flex flex-col border-r-2 relative">
     <base-header
       class="justify-center"
       :title="title"
@@ -12,21 +12,15 @@
       @onMore="$emit('onMore')"
     ></base-header>
     <slot key="slot-content" name="content"></slot>
-    <section key="main" class="px-2 pt-[14px] flex flex-col gap-[10px]">
+    <section key="main" :class="[$libStyles.flexColNav]">
       <slot name="start"></slot>
-      <transition enter-active-class="animate__animated animate__fadeIn">
-        <div
-          v-if="$dataStore.menuItems && $dataStore.menuItems.length"
-          class="flex flex-col gap-[10px]"
-        >
-          <div v-for="(item, index) of $dataStore.menuItems" :key="index">
+      <base-fade-transition>
+        <div v-if="$dataStore.menuItems && $dataStore.menuItems.length" class="flex flex-col gap-[10px]">
+          <div v-for="(item, index) of $dataStore.menuItems.filter(i => (typeof i.show === 'boolean' ? i.show : true))" :key="index">
             <base-menu-nav-item
               :menu-item="item"
-              :selected="
-                !!selected.title &&
-                !!item.title &&
-                selected.title === item.title
-              "
+              :selected="!!selected.title && !!item.title && selected.title === item.title"
+              :disabled="typeof item.disabled === 'boolean' ? item.disabled : false"
               @click.left="pickItem(item)"
               @click.middle="openTab(item)"
             >
@@ -34,8 +28,17 @@
             <hr v-if="item.hasLine" class="mt-[10px]" />
           </div>
         </div>
-      </transition>
+      </base-fade-transition>
       <slot name="end"></slot>
+      <slot name="actions"></slot>
+      <base-fade-transition>
+        <div v-if="$dataStore.buttons && $dataStore.buttons.length" class="flex flex-col gap-[10px] justify-self-end absolute bottom-5 lg:bottom-[30%] w-full pr-4">
+          <div v-for="(item, index) of $dataStore.buttons" :key="index">
+            <transition enter-active-class="animate__animated animate__fadeIn animate__faster" leave-active-class="animate__animated animate__fadeOut animate__faster">
+              <base-btn v-if="'show' in item ? item.show : true" :text="item.title!" :btn="item.color" :disabled="item.disabled" @click="item.action"> </base-btn>
+            </transition>
+          </div></div
+      ></base-fade-transition>
     </section>
   </aside>
 </template>
@@ -75,22 +78,21 @@ export default defineComponent({
       default: 'mdi-cog-outline',
     },
   },
-  emits: ['update:modelValue', 'onLink', 'onBack', 'onMore', 'clicked'],
+  emits: ['onLink', 'onBack', 'onMore', 'clicked'],
   setup(props, { emit }) {
     const dataStore = useDataStore();
     const router = useRouter();
 
-    const pickItem = (item: MenuItem) => {
-      if (item.title !== dataStore.menu.selectedItem.title) {
-        emit('update:modelValue', item);
+    const pickItem = async (item: MenuItem) => {
+      if (item.title !== dataStore.menu.selectedItem.title && (typeof item.disabled === 'boolean' ? !item.disabled : true)) {
         if (typeof item.link === 'object') {
           if (item.link && 'name' in item.link) {
-            router.push(item.link as RouteLocationNormalized);
+            await router.push(item.link as RouteLocationNormalized);
           } else {
             dataStore.showToaster('warning', 'Отсутствует ссылка для перехода');
           }
         } else {
-          item.link ? emit('onLink', item) : emit('clicked', item);
+          emit('onLink', item);
         }
       }
     };

package/components/Menu/MenuNavItem.vue

@@ -5,17 +5,13 @@
       selected ? $libStyles.whiteText : $libStyles.blackText,
       $libStyles.rounded,
       $libStyles.textSimple,
+      disabled ? 'cursor-not-allowed opacity-50' : '',
     ]"
     class="h-[60px] flex items-center justify-between hover:bg-[#A0B3D8] hover:!text-white pl-4 cursor-pointer transition-all"
   >
     <span>{{ menuItem.title }}</span>
     <i v-if="menuItem.icon" class="mdi text-xl pr-4" :class="[menuItem.icon]"></i>
-    <v-tooltip
-      v-if="menuItem.description"
-      activator="parent"
-      location="bottom"
-      >{{ menuItem.description }}</v-tooltip
-    >
+    <v-tooltip v-if="menuItem.description" activator="parent" location="bottom">{{ menuItem.description }}</v-tooltip>
   </div>
 </template>
 
@@ -32,6 +28,10 @@ export default defineComponent({
       type: Boolean,
       default: false,
     },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
   },
 });
 </script>

package/components/Pages/Anketa.vue

@@ -0,0 +1,333 @@
+<template>
+  <base-fade-transition>
+    <section v-if="firstQuestionList && firstQuestionList.length && !firstPanel && !secondPanel" class="flex flex-col">
+      <section :class="[$libStyles.blueBgLight, $libStyles.rounded]" class="mx-[10px] my-[14px] p-4 flex flex-col gap-4">
+        <base-form-toggle v-model="answerToAll" :title="$t('questionnaireType.answerAllNo')" :disabled="formStore.isDisabled[whichSurvey] || !$dataStore.isTask()" :has-border="false" @clicked="handleToggler"></base-form-toggle>
+      </section>
+      <v-form ref="vForm" class="max-h-[70vh] overflow-y-scroll" @submit="submitForm">
+        <section
+          v-if="firstQuestionList.filter(i => i.first.definedAnswers === 'N').length"
+          :class="[$libStyles.blueBgLight, $libStyles.rounded]"
+          class="mx-[10px] p-4 flex flex-col gap-4"
+        >
+          <base-form-input
+            v-for="(question, index) in firstQuestionList.filter(i => i.first.definedAnswers === 'N')"
+            :key="index"
+            v-model="question.first.answerText"
+            :label="question.first.name"
+            :maska="$maska.threeDigit"
+            :readonly="formStore.isDisabled[whichSurvey] || !$dataStore.isTask()"
+            :rules="$rules.required"
+          ></base-form-input>
+        </section>
+        <section
+          v-if="firstQuestionList.filter(i => i.first.definedAnswers === 'Y').length"
+          :class="[$libStyles.blueBgLight, $libStyles.rounded]"
+          class="mx-[10px] mt-[14px] p-4 flex flex-col gap-4"
+        >
+          <base-form-text-section v-for="(question, index) in firstQuestionList.filter(i => i.first.definedAnswers === 'Y')" :key="index">
+            <base-fade-transition>
+              <div
+                v-if="question.first.answerName === 'Да' && secondQuestionList"
+                :class="[$libStyles.greenBg, $libStyles.whiteText, $libStyles.textSimple]"
+                class="rounded-t-lg pl-6 py-1 cursor-pointer"
+                @click="openFirstPanel(question)"
+              >
+                {{ $t('questionnaireType.pleaseAnswer').replace('{text}', `${secondQuestionList.length}`) }}
+              </div>
+            </base-fade-transition>
+            <span :class="[$libStyles.textTitle]" class="border-b-[1px] border-b-[#F3F6FC] p-6 flex items-center justify-between">
+              {{ question.first.name }}
+              <base-fade-transition>
+                <i v-if="question.first.answerName === 'Да' && secondQuestionList" class="mdi mdi-chevron-right text-2xl cursor-pointer" @click="openFirstPanel(question)"></i>
+              </base-fade-transition>
+            </span>
+            <div class="flex items-center justify-start gap-5 px-4 pt-4" :class="[$libStyles.textSimple]">
+              <v-radio-group
+                v-model="question.first.answerName"
+                class="anketa-radio"
+                :true-icon="`mdi-radiobox-marked ${$libStyles.greenText}`"
+                false-icon="mdi-radiobox-blank text-[#636363]"
+                :rules="$rules.required"
+                :readonly="formStore.isDisabled[whichSurvey] || !$dataStore.isTask()"
+                inline
+              >
+                <v-radio label="Да" value="Да"></v-radio>
+                <v-radio label="Нет" value="Нет"></v-radio>
+              </v-radio-group>
+            </div>
+          </base-form-text-section>
+        </section>
+      </v-form>
+      <base-btn class="my-[14px] self-center" :loading="isButtonLoading" :disabled="formStore.isDisabled[whichSurvey]" @click="submitForm" :text="$t('buttons.save')"></base-btn>
+    </section>
+    <section
+      ref="firstPanelSection"
+      v-if="secondQuestionList && secondQuestionList.length && firstPanel"
+      class="flex flex-col px-[10px] py-[14px]"
+      :class="[$libStyles.scrollPage]"
+    >
+      <v-btn
+        icon="mdi mdi-close"
+        variant="text"
+        size="large"
+        @click="
+          firstPanel = false;
+          secondPanel = false;
+        "
+      ></v-btn>
+      <section v-if="currentQuestion" :class="[$libStyles.blueBgLight, $libStyles.rounded]" class="mx-[10px] my-[14px] p-4 flex flex-col gap-4">
+        <base-form-text-section v-for="question in currentQuestion.second" :title="question.name" :key="question.name">
+          <base-form-input
+            v-if="question.definedAnswers === 'N'"
+            v-model="question.answerText"
+            class="border-t-[1px] border-t-[#F3F6FC]"
+            placeholder="Введите текст"
+          ></base-form-input>
+          <span v-else class="flex items-center justify-between p-4 cursor-pointer" :class="[$libStyles.textTitle, $libStyles.greenText]" @click="openSecondPanel(question)">
+            {{ question.answerName ? question.answerName : 'Выбрать вариант ответа' }}
+            <i class="mdi mdi-chevron-right text-[28px]"></i>
+          </span>
+        </base-form-text-section>
+      </section>
+    </section>
+  </base-fade-transition>
+  <Teleport v-if="secondPanel" to="#panel-actions">
+    <div :class="[$libStyles.scrollPage]" class="flex flex-col items-center">
+      <base-rounded-input v-model="searchQuery" :label="$t('labels.search')" class="w-full p-2" :hide-details="true"></base-rounded-input>
+      <div v-if="$dataStore.questionRefs && $dataStore.questionRefs.length && isPanelLoading === false" class="w-full flex flex-col gap-2 p-2">
+        <base-panel-select-item
+          v-for="(item, index) of $dataStore.questionRefs.filter(i => i.nameRu && (i.nameRu as string).match(new RegExp(searchQuery, 'i')))"
+          :key="index"
+          :text="`${item.nameRu}`"
+          :selected="currentSecond!.answerId === item.ids"
+          @click="closeSecondPanel(item)"
+        ></base-panel-select-item>
+      </div>
+      <base-loader v-if="isPanelLoading" class="absolute mt-10" :size="50"></base-loader>
+    </div>
+  </Teleport>
+  <base-scroll-buttons @up="scrollForm('up')" @down="scrollForm('down')" />
+</template>
+
+<script lang="ts">
+import { Value } from '@/composables/classes';
+
+export default defineComponent({
+  setup() {
+    const route = useRoute();
+    const router = useRouter();
+    const formStore = useFormStore();
+    const dataStore = useDataStore();
+    const vForm = ref<any>();
+    const firstPanelSection = ref<any>();
+    const isButtonLoading = ref<boolean>(false);
+    const answerToAll = ref<boolean>(false);
+    const firstPanel = ref<boolean>(false);
+    const secondPanel = ref<boolean>(false);
+    const surveyType = ref<'health' | 'critical'>('tab' in route.query && route.query.tab === 'criticalBase' ? 'critical' : 'health');
+    const whichSurvey = computed(() => (surveyType.value === 'health' ? 'surveyByHealthBase' : 'surveyByCriticalBase'));
+    const firstQuestionList = ref<AnketaBody[]>();
+    const secondQuestionList = ref<AnketaSecond[]>([]);
+    const currentQuestion = ref<AnketaBody>();
+    const currentSecond = ref<AnketaSecond>();
+    const isPanelLoading = ref<boolean>(false);
+    const searchQuery = ref<string>('');
+
+    const scrollForm = (direction: 'up' | 'down') => {
+      const scrollObject = { top: direction === 'up' ? 0 : screen.height * 10, behavior: 'smooth' };
+      if (firstPanel.value) {
+        firstPanelSection.value.scrollTo(scrollObject);
+      } else {
+        vForm.value.scrollTo(scrollObject);
+      }
+    };
+
+    const submitForm = async () => {
+      await vForm.value.validate().then(async (v: { valid: Boolean; errors: any }) => {
+        if (v.valid) {
+          isButtonLoading.value = true;
+          formStore[whichSurvey.value]!.body.forEach((survey: AnketaBody) => {
+            if (survey.first.answerText === 'Нет') {
+              survey.second = [];
+            }
+          });
+          formStore[whichSurvey.value]!.type = surveyType.value;
+          const anketaToken = await dataStore.setSurvey(formStore[whichSurvey.value]);
+          formStore[whichSurvey.value]!.id = anketaToken;
+          isButtonLoading.value = false;
+        } else {
+          const errors = document.querySelector('.v-input--error');
+          if (errors) {
+            const errorText = errors.querySelector('.v-label.v-field-label');
+            if (errorText) {
+              dataStore.showToaster('error', dataStore.t('toaster.errorFormField').replace('{text}', errorText.innerHTML?.replace(/[-<>!//.]/g, '')));
+            } else {
+              const errorFieldText = errors.parentElement?.parentElement?.children[0].innerHTML;
+              if (errorFieldText) {
+                dataStore.showToaster('error', dataStore.t('toaster.errorFormField').replace('{text}', errorFieldText));
+              }
+            }
+            errors.scrollIntoView({
+              behavior: 'smooth',
+              block: 'center',
+              inline: 'nearest',
+            });
+          }
+        }
+      });
+    };
+
+    const openFirstPanel = async (question: AnketaBody) => {
+      currentQuestion.value = question;
+      formStore[whichSurvey.value]!.body.forEach((question_object: AnketaBody) => {
+        if ((question_object.first.id === question.first.id && question_object.second && !question_object.second.length) || question_object.second == null) {
+          question_object.second = JSON.parse(JSON.stringify(formStore[surveyType.value === 'health' ? 'surveyByHealthSecond' : 'surveyByCriticalSecond']));
+        }
+      });
+      firstPanel.value = true;
+      secondPanel.value = false;
+    };
+
+    const openSecondPanel = async (question: AnketaSecond) => {
+      dataStore.questionRefs = [];
+      currentSecond.value = question;
+      isPanelLoading.value = true;
+      await dataStore.getQuestionRefs(question.id);
+      secondPanel.value = true;
+      dataStore.panelAction = null;
+      dataStore.panel.open = true;
+      dataStore.panel.title = question.name;
+      isPanelLoading.value = false;
+    };
+
+    const closeSecondPanel = (selectedAnswer: Value) => {
+      if (selectedAnswer.ids && currentSecond.value) {
+        currentSecond.value.answerId = selectedAnswer.ids as string;
+        currentSecond.value.answerName = selectedAnswer.nameRu as string;
+      }
+      secondPanel.value = false;
+      dataStore.panelAction = null;
+      dataStore.panel.open = false;
+      dataStore.questionRefs = [];
+    };
+
+    const getDefinedAnswerId = async (id: string, value: any, index: number) => {
+      // @ts-ignore
+      await dataStore.definedAnswers(id, whichSurvey.value, value, index);
+    };
+
+    const handleToggler = async () => {
+      if (firstQuestionList.value) {
+        if (answerToAll.value) {
+          firstQuestionList.value.forEach((question: AnketaBody, index: number) => {
+            if (question.first.answerType === 'T') {
+              firstQuestionList.value![index].first.answerName = 'Нет' as AnswerName;
+            }
+          });
+          for (const question of firstQuestionList.value) {
+            const index = firstQuestionList.value.indexOf(question);
+            await getDefinedAnswerId(question.first.id, 'Нет', index);
+          }
+        } else {
+          firstQuestionList.value.forEach((question: AnketaBody, index: number) => {
+            if (question.first.answerType === 'T') {
+              firstQuestionList.value![index].first.answerName = null;
+            }
+          });
+        }
+      }
+    };
+
+    const onInit = async () => {
+      if (route.params.taskId === '0' || formStore.applicationData.processInstanceId === 0) {
+        await router.push({ name: 'taskId', params: route.params });
+        return;
+      }
+      await dataStore.getQuestionList(
+        surveyType.value,
+        formStore.applicationData.processInstanceId,
+        formStore.applicationData.insuredApp[0].id,
+        whichSurvey.value,
+        surveyType.value === 'health' ? 'surveyByHealthSecond' : 'surveyByCriticalSecond',
+      );
+      firstQuestionList.value = formStore[whichSurvey.value]!.body;
+      secondQuestionList.value = formStore[surveyType.value === 'health' ? 'surveyByHealthSecond' : 'surveyByCriticalSecond']!;
+      formStore[whichSurvey.value]!.type = surveyType.value;
+      const negativeAnswer = firstQuestionList.value.every(i => i.first.answerName === 'Нет');
+      if (negativeAnswer) {
+        answerToAll.value = true;
+      }
+      await Promise.allSettled(
+        firstQuestionList.value.map(async (question: any) => {
+          await dataStore.definedAnswers(question.first.id, whichSurvey.value);
+        }),
+      );
+      if (formStore.isDisabled.surveyByHealthBase) {
+        dataStore.showToaster('error', dataStore.t('toaster.viewErrorText'));
+      }
+    };
+
+    onMounted(async () => {
+      await onInit();
+    });
+
+    watch(
+      () => dataStore.panel.open,
+      () => {
+        if (dataStore.panel.open === false) {
+          secondPanel.value = false;
+          dataStore.panelAction = null;
+        }
+      },
+      { immediate: true },
+    );
+
+    watch(
+      () => firstQuestionList.value,
+      value => {
+        if (value) {
+          const hasPositiveAnswer = value.some(i => i.first.definedAnswers === 'Y' && i.first.answerName !== 'Нет');
+          answerToAll.value = !hasPositiveAnswer;
+        }
+      },
+      {
+        deep: true,
+      },
+    );
+
+    return {
+      // State
+      vForm,
+      formStore,
+      answerToAll,
+      firstQuestionList,
+      secondQuestionList,
+      whichSurvey,
+      isButtonLoading,
+      firstPanel,
+      secondPanel,
+      currentQuestion,
+      currentSecond,
+      isPanelLoading,
+      searchQuery,
+      firstPanelSection,
+
+      // Functions
+      submitForm,
+      getDefinedAnswerId,
+      scrollForm,
+      handleToggler,
+      openFirstPanel,
+      openSecondPanel,
+      closeSecondPanel,
+    };
+  },
+});
+</script>
+
+<style>
+.anketa-radio .v-selection-control-group {
+  gap: 40px;
+}
+</style>

package/components/Pages/Auth.vue

@@ -0,0 +1,91 @@
+<template>
+  <section class="flex flex-col justify-evenly">
+    <img draggable="false" class="w-2/3 lg:w-[25vw] self-center" src="~/assets/auth-logo.svg" />
+    <v-form ref="vForm" class="w-2/3 lg:w-[35vw] self-center">
+      <base-rounded-input
+        class="mb-1"
+        v-model="login"
+        :rules="$dataStore.rules.required"
+        :loading="authLoading"
+        :placeholder="$t('buttons.userLogin')"
+        type="text"
+        @submitted="submitAuthForm"
+      ></base-rounded-input>
+      <base-rounded-input
+        class="mb-1"
+        v-model="password"
+        :rules="$dataStore.rules.required"
+        :loading="authLoading"
+        :placeholder="$t('buttons.password')"
+        type="password"
+        @submitted="submitAuthForm"
+      ></base-rounded-input>
+      <base-btn :text="$t('buttons.login')" :disabled="authLoading" :btn="$libStyles.greenBtn" @click="submitAuthForm"></base-btn>
+    </v-form>
+  </section>
+</template>
+
+<script lang="ts">
+export default defineComponent({
+  setup() {
+    const route = useRoute();
+    const router = useRouter();
+    const dataStore = useDataStore();
+
+    const vForm = ref<any>(null);
+
+    const credentials = {
+      production: { login: '', password: '' },
+      test: { login: '', password: '' },
+      development: { login: 'manager', password: 'asdqwe123' },
+      vercel: { login: '', password: 'asdqwe123' },
+    };
+
+    const useEnv = {
+      envMode: import.meta.env.VITE_MODE,
+      isDev: import.meta.env.VITE_MODE === 'development',
+      isTest: import.meta.env.VITE_MODE === 'test',
+      isVercel: import.meta.env.VITE_MODE === 'vercel',
+      isProduction: import.meta.env.VITE_MODE === 'production',
+    };
+
+    const login = ref<string>(credentials[useEnv.envMode as keyof typeof credentials].login);
+    const password = ref<string>(credentials[useEnv.envMode as keyof typeof credentials].password);
+
+    const numAttempts = ref(0);
+
+    const authLoading = ref(false);
+
+    onMounted(() => {
+      if (route.query && route.query.error) {
+        const authError = route.query.error;
+        if (authError === '401') {
+          dataStore.showToaster('error', dataStore.t('toaster.tokenExpire'), 3000);
+        }
+      }
+    });
+
+    const submitAuthForm = async () => {
+      await vForm.value.validate().then(async (v: { valid: Boolean; errors: any }) => {
+        if (v.valid) {
+          authLoading.value = true;
+          await dataStore.loginUser(login.value, password.value, numAttempts.value);
+          numAttempts.value++;
+          authLoading.value = false;
+          if (!!dataStore.user.id) {
+            router.push({ name: 'index' });
+          }
+        }
+      });
+    };
+
+    return {
+      login,
+      password,
+      vForm,
+      authLoading,
+      submitAuthForm,
+    };
+  },
+});
+</script>