hl-core 0.0.9-beta.1 → 0.0.9-beta.11

package/components/Input/Monthpicker.vue

@@ -0,0 +1,33 @@
+<template>
+  <vue-date-picker
+    :model-value="modelValue"
+    :clearable="false"
+    :disabled="disabled"
+    :reaonly="readonly"
+    month-picker
+    locale="ru"
+    format="MM.yyyy"
+    :close-on-scroll="true"
+    cancel-text="Отменить"
+    select-text="Выбрать"
+    @update:modelValue="$emit('update:modelValue', $event)"
+  />
+</template>
+
+<script lang="ts">
+export default defineComponent({
+  props: {
+    modelValue: {
+      required: false,
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    readonly: {
+      type: Boolean,
+      default: false,
+    },
+  },
+});
+</script>

package/components/Input/RoundedEmptyField.vue

@@ -0,0 +1,5 @@
+<template>
+  <div class="min-w-[250px] h-[50px] border-[1px] border-[#dadada] bg-[#FFF] pl-4 flex cursor-pointer opacity-[87%]" :class="[$styles.textSimple, $styles.rounded]">
+    <slot></slot>
+  </div>
+</template>

package/components/Input/RoundedSelect.vue

@@ -7,6 +7,8 @@
     :placeholder="placeholder"
     :label="label"
     :variant="variant"
+    :density="(density as any)"
+    :menu-icon="menuIcon"
     :clear-icon="clearIcon"
     :color="color"
     :hint="hint"
@@ -78,10 +80,18 @@ export default defineComponent({
       type: String as PropType<InputVariants>,
       default: 'solo',
     },
+    density: {
+      type: String,
+      default: 'compact',
+    },
     color: {
       type: String,
       default: '#009c73',
     },
+    menuIcon: {
+      type: String,
+      default: 'mdi-chevron-down',
+    },
     clearIcon: {
       type: String,
       default: 'mdi-close',
@@ -122,6 +132,9 @@ export default defineComponent({
   border: none !important;
   outline: none !important;
 }
+.rounded-select.v-input {
+  flex: unset !important;
+}
 .rounded-select .v-label.v-field-label {
   top: 20px;
 }

package/components/Layout/Drawer.vue

@@ -12,7 +12,7 @@
     <div v-if="$dataStore.panelAction === null" class="flex flex-col" id="panel-actions">
       <slot></slot>
     </div>
-    <base-panel-handler v-else />
+    <base-panel-handler v-else @task="$emit('task', $event)" />
     <slot name="panel"></slot>
   </v-navigation-drawer>
 </template>
@@ -30,6 +30,7 @@ export default defineComponent({
       default: 'panel',
     },
   },
+  emits: ['task'],
   setup(props) {
     const dataStore = useDataStore();
 

package/components/Layout/Header.vue

@@ -1,5 +1,5 @@
 <template>
-  <header class="relative w-full h-[70px] text-center font-medium align-middle flex items-center border-b-[1px]" :class="[$libStyles.blueBgLight, $libStyles.textSimple]">
+  <header class="relative w-full h-[70px] text-center font-medium align-middle flex items-center border-b-[1px]" :class="[$styles.blueBgLight, $styles.textSimple]">
     <i v-if="hasBack" @click="$emit('onBack')" class="absolute left-5 mdi text-xl cursor-pointer transition-all" :class="[backIcon, backIconAnim]"></i>
     <span class="mx-10">{{ title }}</span>
     <i

package/components/Layout/SettingsPanel.vue

@@ -9,11 +9,11 @@
       <v-text-field v-model="$dataStore.user.fullName" :readonly="true" hide-details variant="plain" :label="$dataStore.user.roles?.join(', ')" />
       <i class="mdi mdi-account-outline text-2xl text-[#A0B3D8]"></i
     ></base-panel-item>
-    <base-panel-item v-if="$dataStore.isEFO && !isProduction" @click="changeBridge('lka')" class="cursor-pointer">
+    <base-panel-item v-if="$dataStore.isEFO && !isProduction && $dataStore.accessToken" @click="changeBridge('lka', $dataStore.accessToken)" class="cursor-pointer">
       {{ $dataStore.t('labels.lkaLong') }}
       <i class="mdi mdi-chevron-right text-2xl text-[#A0B3D8]"></i
     ></base-panel-item>
-    <base-panel-item v-if="$dataStore.isLKA" @click="changeBridge('efo')" class="cursor-pointer">
+    <base-panel-item v-if="$dataStore.isLKA && $dataStore.accessToken" @click="changeBridge('efo', $dataStore.accessToken)" class="cursor-pointer">
       {{ $dataStore.t('labels.efoLong') }}
       <i class="mdi mdi-web text-2xl text-[#A0B3D8]"></i
     ></base-panel-item>
@@ -30,7 +30,7 @@
       {{ $dataStore.t('historyStatementsAndStatuses') }}
       <i class="mdi mdi-history text-xl text-[#A0B3D8]"></i>
     </base-panel-item>
-    <base-panel-item @click="dialogSignOut = true" class="cursor-pointer" :class="[$libStyles.redText]">
+    <base-panel-item @click="dialogSignOut = true" class="cursor-pointer" :class="[$styles.redText]">
       {{ $dataStore.t('buttons.logout') }}
       <i class="mdi mdi-logout text-xl"></i>
     </base-panel-item>
@@ -49,6 +49,8 @@
 </template>
 
 <script lang="ts" setup>
+import { changeBridge } from '#imports';
+
 import pkg from '../../package.json';
 const dialogSignOut = ref(false);
 const dataStore = useDataStore();
@@ -77,10 +79,4 @@ const hasHistory = computed(() => {
 const openHistory = async () => {
   dataStore.sendToParent(constants.postActions.toStatementHistory, dataStore.isBridge ? '' : dataStore.product);
 };
-
-const changeBridge = async (toBridge: 'efo' | 'lka') => {
-  const bridgeUrl = import.meta.env[`VITE_${toBridge.toUpperCase()}_URL`] as string;
-  if (!bridgeUrl) return;
-  window.open(`${bridgeUrl}/#/Token?token=${dataStore.accessToken}`, '_blank');
-};
 </script>

package/components/List/ListEmpty.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="border-[1px] rounded-lg h-[80px] mx-[10px] mt-[14px] flex place-content-center" :class="[$libStyles.blueBgLight, $libStyles.textTitle]">
+  <div class="border-[1px] rounded-lg h-[80px] mx-[10px] mt-[14px] flex place-content-center" :class="[$styles.blueBgLight, $styles.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>

package/components/Menu/MenuHover.vue

@@ -2,7 +2,7 @@
   <v-menu v-if="items.length" :activator="activator" location="bottom center" :offset="top" transition="scale-transition">
     <base-form-text-section class="p-4 border-[1px] flex flex-col gap-3 elevation-3 w-[250px]">
       <div v-for="item of items.filter(i => $dataStore.filters.show(i))" :key="item.id">
-        <base-menu-nav-item :class="[$libStyles.textSimple]" :menu-item="item" @click="$emit(item.id)" />
+        <base-menu-nav-item :class="[$styles.textSimple]" :menu-item="item" @click="$emit(item.id)" />
       </div>
     </base-form-text-section>
   </v-menu>

package/components/Menu/MenuNav.vue

@@ -12,7 +12,7 @@
       @onMore="$emit('onMore')"
     />
     <slot key="slot-content" name="content"></slot>
-    <section key="main" :class="[$libStyles.flexColNav]">
+    <section key="main" :class="[$styles.flexColNav]">
       <slot name="start"></slot>
       <base-fade-transition>
         <div v-if="$dataStore.menuItems && $dataStore.menuItems.length" class="flex flex-col gap-[10px]">

package/components/Menu/MenuNavItem.vue

@@ -1,10 +1,10 @@
 <template>
   <div
     :class="[
-      selected ? $libStyles.blueBg : $libStyles.blueBgLight,
-      selected ? $libStyles.whiteText : $libStyles.blackText,
-      $libStyles.rounded,
-      $libStyles.textSimple,
+      selected ? $styles.blueBg : $styles.blueBgLight,
+      selected ? $styles.whiteText : $styles.blackText,
+      $styles.rounded,
+      $styles.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 group"

package/components/Pages/Anketa.vue

@@ -1,7 +1,7 @@
 <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">
+      <section :class="[$styles.blueBgLight, $styles.rounded]" class="mx-[10px] my-[14px] p-4 flex flex-col gap-4">
         <base-form-toggle
           v-model="answerToAll"
           :title="$dataStore.t('questionnaireType.answerAllNo')"
@@ -13,7 +13,7 @@
       <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="[$styles.blueBgLight, $styles.rounded]"
           class="mx-[10px] p-4 flex flex-col gap-4"
         >
           <base-form-input
@@ -28,35 +28,35 @@
         </section>
         <section
           v-if="firstQuestionList.filter(i => i.first.definedAnswers === 'Y').length"
-          :class="[$libStyles.blueBgLight, $libStyles.rounded]"
+          :class="[$styles.blueBgLight, $styles.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]"
+                v-if="question.first.answerName === 'Да' && question.second"
+                :class="[$styles.greenBg, $styles.whiteText, $styles.textSimple]"
                 class="rounded-t-lg pl-6 py-1 cursor-pointer"
                 @click="openFirstPanel(question)"
               >
-                {{ $dataStore.t('questionnaireType.pleaseAnswer', { text: secondQuestionList.length }) }}
+                {{ $dataStore.t('questionnaireType.pleaseAnswer', { text: question.second.length }) }}
               </div>
             </base-fade-transition>
-            <span :class="[$libStyles.textTitle]" class="border-b-[1px] border-b-[#F3F6FC] p-6 flex items-center justify-between">
+            <span :class="[$styles.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 && secondQuestionList.length"
+                  v-if="question.first.answerName === 'Да' && question.second && question.second.length"
                   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]">
+            <div class="flex items-center justify-start gap-5 px-4 pt-4" :class="[$styles.textSimple]">
               <v-radio-group
                 v-model="question.first.answerName"
                 class="anketa-radio"
-                :true-icon="`mdi-radiobox-marked ${$libStyles.greenText}`"
+                :true-icon="`mdi-radiobox-marked ${$styles.greenText}`"
                 false-icon="mdi-radiobox-blank text-[#636363]"
                 :rules="$rules.required"
                 :readonly="formStore.isDisabled[whichSurvey] || !$dataStore.isTask()"
@@ -78,39 +78,43 @@
       />
     </section>
     <v-btn
-      v-if="secondQuestionList && secondQuestionList.length && firstPanel"
+      v-if="currentQuestion && currentQuestion.second && currentQuestion.second.length && firstPanel"
       icon="mdi mdi-close"
       class="ml-3 !absolute z-10"
-      @click="
-        firstPanel = false;
-        secondPanel = false;
-      "
+      @click="submitSecondaryForm"
     />
-    <section
-      ref="firstPanelSection"
-      v-if="secondQuestionList && secondQuestionList.length && firstPanel"
-      class="flex flex-col px-[10px] pb-[14px]"
-      :class="[$libStyles.scrollPage]"
-    >
-      <section v-if="currentQuestion" :class="[$libStyles.blueBgLight, $libStyles.rounded]" class="mx-[10px] mt-[14px] p-4 flex flex-col gap-4">
+    <section ref="firstPanelSection" v-if="currentQuestion && currentQuestion.second && firstPanel" class="flex flex-col px-[10px] pb-[14px]" :class="[$styles.scrollPage]">
+      <v-form
+        v-if="currentQuestion"
+        :class="[$styles.blueBgLight, $styles.rounded]"
+        class="mx-[10px] mt-[14px] p-4 flex flex-col gap-4"
+        ref="vSecondaryForm"
+        @submit="submitSecondaryForm"
+      >
         <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="Введите текст"
+            :placeholder="$dataStore.t('labels.inputText')"
             :readonly="formStore.isDisabled[whichSurvey] || !$dataStore.isTask()"
+            :rules="isSecondRequired ? $rules.required : []"
           />
-          <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-panel-input
+            v-else
+            :class="[$styles.textTitle, $styles.greenText]"
+            :value="question.answerName ? question.answerName : 'Выбрать вариант ответа'"
+            :readonly="formStore.isDisabled[whichSurvey] || !$dataStore.isTask()"
+            :clearable="false"
+            :error-messages="isSecondRequired ? (question.answerName ? [] : ['Выбрать вариант ответа']) : []"
+            @click="openSecondPanel(question)"
+          ></base-panel-input>
         </base-form-text-section>
-      </section>
+      </v-form>
     </section>
   </base-fade-transition>
   <Teleport v-if="secondPanel" to="#panel-actions">
-    <div :class="[$libStyles.scrollPage]" class="flex flex-col items-center">
+    <div :class="[$styles.scrollPage]" class="flex flex-col items-center">
       <base-rounded-input v-model="searchQuery" :label="$dataStore.t('labels.search')" class="w-full p-2" :hide-details="true" />
       <div v-if="$dataStore.questionRefs && $dataStore.questionRefs.length && isPanelLoading === false" class="w-full flex flex-col gap-2 p-2">
         <base-panel-select-item
@@ -137,6 +141,7 @@ export default defineComponent({
     const formStore = useFormStore();
     const dataStore = useDataStore();
     const vForm = ref<any>();
+    const vSecondaryForm = ref<any>();
     const firstPanelSection = ref<any>();
     const isButtonLoading = ref<boolean>(false);
     const answerToAll = ref<boolean>(false);
@@ -153,13 +158,13 @@ export default defineComponent({
         : 'surveyByCriticalBasePolicyholder',
     );
     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 whichMember = computed(() => ('member' in route.query && !!route.query.member ? (route.query.member as 'insured' | 'policyholder') : 'insured'));
+    const isSecondRequired = computed(() => dataStore.controls.isSecondAnketaRequired);
     const scrollForm = (direction: 'up' | 'down') => {
       const scrollObject = { top: direction === 'up' ? 0 : screen.height * 10, behavior: 'smooth' };
       if (firstPanel.value) {
@@ -173,11 +178,25 @@ export default defineComponent({
       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 = [];
-            }
-          });
+          const isValid = dataStore.validateAnketa(whichSurvey.value);
+          if (!isValid) {
+            isButtonLoading.value = false;
+            return false;
+          }
+          if (formStore[whichSurvey.value] && formStore[whichSurvey.value]?.body) {
+            formStore[whichSurvey.value]?.body.forEach(question => {
+              if (question.first.definedAnswers === 'Y' && question.first.answerName?.match(new RegExp('Нет', 'i')) && question.second && question.second.length) {
+                question.second.forEach(second => {
+                  if (second.definedAnswers === 'N') {
+                    second.answerText = null;
+                  } else {
+                    second.answerId = null;
+                    second.answerName = null;
+                  }
+                });
+              }
+            });
+          }
           formStore[whichSurvey.value]!.type = surveyType.value;
           const anketaToken = await dataStore.setSurvey(formStore[whichSurvey.value]!);
           if (typeof anketaToken === 'string') {
@@ -206,13 +225,36 @@ export default defineComponent({
       });
     };
 
-    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']));
+    const submitSecondaryForm = async () => {
+      await vSecondaryForm.value.validate().then(async (v: { valid: Boolean; errors: any }) => {
+        if (v.valid) {
+          if (isSecondRequired.value && currentQuestion.value && currentQuestion.value.second) {
+            const hasError = currentQuestion.value.second.find(second => (second.definedAnswers === 'N' ? !second.answerText : !second.answerName));
+            if (hasError) {
+              dataStore.showToaster('error', dataStore.t('toaster.emptySecondAnketa', { text: hasError.name }), 5000);
+              return false;
+            }
+          }
+          firstPanel.value = false;
+          secondPanel.value = false;
+        } else {
+          const errors = document.querySelector('.v-input--error');
+          if (errors) {
+            const errorText = errors.parentElement?.children[0].innerHTML;
+            if (errorText) {
+              dataStore.showToaster('error', dataStore.t('toaster.errorFormField', { text: errorText?.replace(/[-<>!//.]/g, '') }));
+            }
+            errors.scrollIntoView({
+              behavior: 'smooth',
+              block: 'center',
+              inline: 'nearest',
+            });
+          }
         }
       });
+    };
+    const openFirstPanel = async (question: AnketaBody) => {
+      currentQuestion.value = question;
       firstPanel.value = true;
       secondPanel.value = false;
     };
@@ -241,7 +283,6 @@ export default defineComponent({
     };
 
     const getDefinedAnswerId = async (id: string, value: any, index: number) => {
-      // @ts-ignore
       await dataStore.definedAnswers(id, whichSurvey.value, value, index);
     };
 
@@ -277,18 +318,16 @@ export default defineComponent({
         formStore.applicationData.processInstanceId,
         whichMember.value === 'insured' ? formStore.applicationData.insuredApp[0].id : formStore.applicationData.clientApp.id,
         whichSurvey.value,
-        surveyType.value === 'health' ? 'surveyByHealthSecond' : 'surveyByCriticalSecond',
         whichMember.value,
       );
       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) => {
+        firstQuestionList.value.map(async question => {
           await dataStore.definedAnswers(question.first.id, whichSurvey.value);
         }),
       );
@@ -325,10 +364,10 @@ export default defineComponent({
     return {
       // State
       vForm,
+      vSecondaryForm,
       formStore,
       answerToAll,
       firstQuestionList,
-      secondQuestionList,
       whichSurvey,
       isButtonLoading,
       firstPanel,
@@ -338,9 +377,11 @@ export default defineComponent({
       isPanelLoading,
       searchQuery,
       firstPanelSection,
+      isSecondRequired,
 
       // Functions
       submitForm,
+      submitSecondaryForm,
       getDefinedAnswerId,
       scrollForm,
       handleToggler,

package/components/Pages/Auth.vue

@@ -1,5 +1,5 @@
 <template>
-  <section class="flex h-full" :class="$libStyles.blueBgLight">
+  <section class="flex h-full" :class="$styles.blueBgLight">
     <!-- @vue-ignore -->
     <aside :class="{ '!hidden': !$display().lgAndUp.value }" class="w-full lg:w-1/4 bg-white flex flex-col justify-between border-r-2 relative px-8">
       <img draggable="false" class="w-[50%] mt-8" src="~/assets/auth-logo.svg" />
@@ -21,7 +21,7 @@
       <img :class="{ '!block': !$display().lgAndUp.value }" draggable="false" class="hidden w-2/4 sm:w-1/3 mb-10 self-center" src="~/assets/auth-logo.svg" />
       <div class="flex flex-col items-center mb-8 text-center">
         <h1 class="text-[28px] font-medium mb-1">{{ $dataStore.t('labels.welcomeHL') }}</h1>
-        <span :class="[$libStyles.greyTextDark]" class="text-[16px]">{{ $dataStore.t('labels.needAuth') }}</span>
+        <span :class="[$styles.greyTextDark]" class="text-[16px]">{{ $dataStore.t('labels.needAuth') }}</span>
       </div>
       <v-form ref="vForm" class="w-2/3 lg:w-[25vw] self-center">
         <base-rounded-input class="mb-1" v-model.trim="login" :rules="$rules.required" :loading="authLoading" :placeholder="$dataStore.t('buttons.userLogin')" type="text" />
@@ -35,19 +35,19 @@
           @append="showPassword = !showPassword"
           :type="showPassword ? ('' as InputTypes) : 'password'"
         />
-        <span v-if="$dataStore.isLKA" class="inline-block w-full text-end mb-4" :class="[$libStyles.textSimple, $libStyles.greyTextDark]" @click="isLogin = false">{{
+        <span v-if="$dataStore.isLKA" class="inline-block w-full text-end mb-4" :class="[$styles.textSimple, $styles.greyTextDark]" @click="isLogin = false">{{
           $dataStore.t('labels.resetPassword')
         }}</span>
-        <base-btn :text="$dataStore.t('buttons.login')" :disabled="authLoading" :btn="$libStyles.greenBtn" @click="submitAuthForm" />
+        <base-btn :text="$dataStore.t('buttons.login')" :disabled="authLoading" :btn="$styles.greenBtn" @click="submitAuthForm" />
       </v-form>
     </section>
     <section v-if="isLogin === false" class="w-full lg:w-3/4 flex flex-col justify-center items-center">
       <div class="flex flex-col items-center mb-4">
         <h1 class="text-[28px] font-medium mb-1">{{ $dataStore.t('labels.resetPassword') }}</h1>
-        <span :class="[$libStyles.greyTextDark]" class="text-[16px]">{{ $dataStore.t('labels.resetType') }}</span>
+        <span :class="[$styles.greyTextDark]" class="text-[16px]">{{ $dataStore.t('labels.resetType') }}</span>
       </div>
-      <div class="p-[2px] mb-8 rounded-[12px] border-[1px] w-2/3 lg:w-[25vw]" :class="[$libStyles.whiteBg]">
-        <v-tabs v-model="resetPasswordType" density="compact" slider-color="#009c73" class="w-full base-reset-password rounded-[12px]" :class="[$libStyles.whiteBg]">
+      <div class="p-[2px] mb-8 rounded-[12px] border-[1px] w-2/3 lg:w-[25vw]" :class="[$styles.whiteBg]">
+        <v-tabs v-model="resetPasswordType" density="compact" slider-color="#009c73" class="w-full base-reset-password rounded-[12px]" :class="[$styles.whiteBg]">
           <v-tab :ripple="false" value="phone"> {{ $dataStore.t('form.phoneNumber') }} </v-tab>
           <v-tab :ripple="false" value="email"> {{ $dataStore.t('form.email') }} </v-tab>
         </v-tabs>
@@ -70,8 +70,8 @@
           :placeholder="$dataStore.t('form.email')"
           type="text"
         />
-        <span class="inline-block w-full text-end mb-4" :class="[$libStyles.textSimple, $libStyles.greyTextDark]" @click="isLogin = true">{{ $dataStore.t('buttons.login') }}</span>
-        <base-btn :text="$dataStore.t('buttons.reset')" :disabled="authLoading" :btn="$libStyles.greenBtn" @click="submitAuthForm" />
+        <span class="inline-block w-full text-end mb-4" :class="[$styles.textSimple, $styles.greyTextDark]" @click="isLogin = true">{{ $dataStore.t('buttons.login') }}</span>
+        <base-btn :text="$dataStore.t('buttons.reset')" :disabled="authLoading" :btn="$styles.greenBtn" @click="submitAuthForm" />
       </v-form>
     </section>
   </section>