hl-core 0.0.8-beta.2 → 0.0.8-beta.20

package/components/Pages/Auth.vue

@@ -1,27 +1,88 @@
 <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="$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="$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 class="flex h-full" :class="$libStyles.blueBgLight">
+    <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" />
+      <div class="self-center flex flex-col items-center justify-center base-auth">
+        <v-carousel :show-arrows="false" color="#009C73">
+          <v-carousel-item v-for="(item, index) of carouselItems" :key="index">
+            <img draggable="false" class="mx-auto" :src="item.img" />
+            <div class="flex flex-col items-center justify-center mt-12 mb-8 text-center">
+              <h2 class="text-[22px] font-medium mb-1">{{ item.title }}</h2>
+              <h4 class="text-[16px]">{{ item.subtitle }}</h4>
+            </div>
+          </v-carousel-item>
+        </v-carousel>
+      </div>
+      <base-btn :text="$t('buttons.more')" :disabled="true" class="mb-28"></base-btn>
+    </aside>
+    <section v-if="isLogin" class="w-full lg:w-3/4 flex flex-col justify-center">
+      <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">{{ $t('labels.welcomeHL') }}</h1>
+        <span :class="[$libStyles.greyTextDark]" class="text-[16px]">{{ $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="login"
+          :rules="$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="$rules.required"
+          :loading="authLoading"
+          :placeholder="$t('buttons.password')"
+          :append-inner-icon="showPassword ? 'mdi-eye-outline' : 'mdi-eye-off-outline'"
+          @append="showPassword = !showPassword"
+          :type="showPassword ? ('' as InputTypes) : 'password'"
+          @submitted="submitAuthForm"
+        ></base-rounded-input>
+        <span v-if="$dataStore.isLKA" class="inline-block w-full text-end mb-4" :class="[$libStyles.textSimple, $libStyles.greyTextDark]" @click="isLogin = false">{{
+          $t('labels.resetPassword')
+        }}</span>
+        <base-btn :text="$t('buttons.login')" :disabled="authLoading" :btn="$libStyles.greenBtn" @click="submitAuthForm"></base-btn>
+      </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">{{ $t('labels.resetPassword') }}</h1>
+        <span :class="[$libStyles.greyTextDark]" class="text-[16px]">{{ $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]">
+          <v-tab :ripple="false" value="phone"> {{ $t('form.phoneNumber') }} </v-tab>
+          <v-tab :ripple="false" value="email"> {{ $t('form.email') }} </v-tab>
+        </v-tabs>
+      </div>
+      <v-form ref="vForm" class="w-2/3 lg:w-[25vw] self-center">
+        <base-rounded-input
+          v-if="resetPasswordType === 'phone'"
+          v-model="phone"
+          :maska="$maska.phone"
+          :rules="$rules.required.concat($rules.phoneFormat)"
+          :loading="authLoading"
+          :placeholder="$t('form.phoneNumber')"
+          type="text"
+          @submitted="submitAuthForm"
+        ></base-rounded-input>
+        <base-rounded-input
+          v-if="resetPasswordType === 'email'"
+          v-model="email"
+          :rules="$rules.required.concat($rules.email)"
+          :loading="authLoading"
+          :placeholder="$t('form.email')"
+          type="text"
+          @submitted="submitAuthForm"
+        ></base-rounded-input>
+        <span class="inline-block w-full text-end mb-4" :class="[$libStyles.textSimple, $libStyles.greyTextDark]" @click="isLogin = true">{{ $t('buttons.login') }}</span>
+        <base-btn :text="$t('buttons.reset')" :disabled="authLoading" :btn="$libStyles.greenBtn" @click="submitAuthForm"></base-btn>
+      </v-form>
+    </section>
   </section>
 </template>
 
@@ -33,6 +94,11 @@ export default defineComponent({
     const dataStore = useDataStore();
 
     const vForm = ref<any>(null);
+    const isLogin = ref<boolean>(true);
+    const showPassword = ref<boolean>(false);
+    const phone = ref<string>();
+    const email = ref<string>();
+    const resetPasswordType = ref<string>();
 
     const credentials = {
       production: { login: '', password: '' },
@@ -41,6 +107,24 @@ export default defineComponent({
       vercel: { login: '', password: 'asdqwe123' },
     };
 
+    const carouselItems = [
+      {
+        title: 'Все полисы в один клик!',
+        subtitle: 'Мгновенный доступ к информации о ваших полисах',
+        img: '/left-side-1.png',
+      },
+      {
+        title: 'Все полисы в один клик!',
+        subtitle: 'Мгновенный доступ к информации о ваших полисах',
+        img: '/left-side-1.png',
+      },
+      {
+        title: 'Все полисы в один клик!',
+        subtitle: 'Мгновенный доступ к информации о ваших полисах',
+        img: '/left-side-1.png',
+      },
+    ];
+
     const useEnv = {
       envMode: import.meta.env.VITE_MODE,
       isDev: import.meta.env.VITE_MODE === 'development',
@@ -68,24 +152,57 @@ export default defineComponent({
     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' });
+          if (isLogin.value === true) {
+            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' });
+            }
+          } else {
+            // TODO Reset password
           }
         }
       });
     };
 
     return {
+      // State
       login,
-      password,
       vForm,
+      phone,
+      email,
+      isLogin,
+      password,
       authLoading,
+      showPassword,
+      carouselItems,
+      resetPasswordType,
+
+      // Functions
       submitAuthForm,
     };
   },
 });
 </script>
+
+<style>
+.base-auth .v-carousel__controls {
+  background: white !important;
+}
+.base-reset-password .v-tab__slider {
+  z-index: -1;
+  height: 100% !important;
+  border-radius: 12px;
+}
+.base-reset-password .v-tab {
+  width: 50%;
+  color: #566681;
+  text-transform: unset;
+  font-size: 12px;
+}
+.base-reset-password .v-tab--selected {
+  color: white !important;
+}
+</style>

package/components/Pages/InvoiceInfo.vue

@@ -0,0 +1,30 @@
+<template>
+  <section class="w-full px-[10px] pt-[14px] flex flex-col gap-4" :class="[$libStyles.scrollPage]" v-if="!!invoiceData">
+    <lazy-base-form-section :title="$t('labels.jsonObject')">
+      <template #icon>
+        <v-btn icon="mdi mdi-content-copy !text-[18px]" size="x-small" variant="plain" color="#A0B3D8" @click="$dataStore.copyToClipboard(JSON.stringify(invoiceData))"></v-btn>
+      </template>
+      <lazy-base-json-viewer :data="invoiceData" class="bg-white p-4 rounded"></lazy-base-json-viewer>
+    </lazy-base-form-section>
+    <lazy-base-form-section v-if="invoiceData.paymentLink && invoiceData.status !== 1" :title="$t('labels.epayPage')" class="flex items-center">
+      <div class="w-full lg:w-[70%] bg-white">
+        <iframe :src="invoiceData.paymentLink" frameborder="0" class="w-full h-[70vh]"></iframe>
+      </div>
+    </lazy-base-form-section>
+  </section>
+</template>
+
+<script lang="ts">
+export default defineComponent({
+  setup() {
+    const formStore = useFormStore();
+    const invoiceData = formStore.invoiceData;
+
+    return {
+      // State
+      formStore,
+      invoiceData,
+    };
+  },
+});
+</script>