boursecu_user/src/views/login/index.vue

<template>
  <div class="login-page-root">
    <!-- Desktop: premium split-panel -->
    <DesktopAuthShell v-show="isDesktop">
      <div class="dauth-card">
        <header v-if="!loginPage.enterType" class="dauth-card__header">
          <p class="dauth-card__eyebrow">حساب کاربری</p>
          <h2 class="dauth-card__title">ورود</h2>
          <p class="dauth-card__subtitle">برای ادامه، روش ورود خود را انتخاب کنید</p>
        </header>
        <header v-else class="dauth-card__header">
          <p class="dauth-card__eyebrow">حساب جدید</p>
          <h2 class="dauth-card__title">ثبت نام</h2>
          <p class="dauth-card__subtitle">اطلاعات خود را برای ایجاد حساب وارد کنید</p>
        </header>

        <Login v-if="!loginPage.enterType" variant="desktop" @register="loginPage.setEnterType" />
        <Register v-else variant="desktop" @register="loginPage.setEnterType" />
      </div>
    </DesktopAuthShell>

    <!-- Mobile: original layout -->
    <div v-show="!isDesktop" class="login-page flex flex-col items-center">
      <template v-if="!isBoursecu">
        <div class="fixed top-0 right-0 left-0 h-1/3 w-screen flex">
          <img :src="img_topGradiant" alt="" class="absolute z-10 w-screen h-full object-cover" />
          <img :src="img_pattern" alt="" class="absolute w-screen h-full object-none" />
        </div>
        <div class="fixed bottom-0 right-0 left-0 h-1/3 w-screen">
          <img :src="img_bottomGradiant" alt="" class="absolute z-10 w-screen h-full object-cover" />
          <img :src="img_pattern" alt="" class="absolute w-screen h-full object-none" />
        </div>
      </template>
      <div class="login-page__content z-1000 w-full p-5">
        <Login v-if="!loginPage.enterType" @register="loginPage.setEnterType" />
        <Register v-else @register="loginPage.setEnterType" />
      </div>

      <div v-if="isGaroosi" class="login-page__enamad z-1000">
        <a
          referrerpolicy="origin"
          target="_blank"
          href="https://trustseal.enamad.ir/?id=710578&Code=DdltBYWJgvc7LJs9eM46SEliXRRU0kSW"
        >
          <img
            referrerpolicy="origin"
            src="https://trustseal.enamad.ir/logo.aspx?id=710578&Code=DdltBYWJgvc7LJs9eM46SEliXRRU0kSW"
            alt="enamad"
            style="cursor: pointer"
            code="DdltBYWJgvc7LJs9eM46SEliXRRU0kSW"
          >
        </a>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { computed } from 'vue'
import { useLoginPage } from './composables/useLoginPage'
import { useDesktopBreakpoint } from '@/layouts/composables/useAppLayout'
import { isBoursecuProject } from '@/utils/config'
import { useConfigStore } from '@/store/configStore'
import Login from './components/Login.vue'
import Register from './components/Register.vue'
import DesktopAuthShell from './desktop/components/DesktopAuthShell.vue'
import img_topGradiant from './assets/img/gr_top_white.svg'
import img_bottomGradiant from './assets/img/gr_bottom_white.svg'
import img_pattern from './assets/img/pattern.svg'

const isDesktop = useDesktopBreakpoint()
const isBoursecu = isBoursecuProject()
const loginPage = useLoginPage()
const config = useConfigStore()
const isGaroosi = computed(() => config.config?.name === 'garoosi')
</script>

<style scoped>
.login-page-root {
  width: 100%;
  min-height: 100vh;
}

.login-page {
  min-height: calc(100vh - var(--app-credit-footer-offset, 28px));
}

.login-page__content {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.login-page__enamad {
  display: flex;
  justify-content: center;
  padding: 0 20px 16px;
  margin-top: auto;
}

.login-page__enamad img {
  max-width: 96px;
  height: auto;
}
</style>