111 lines
4.0 KiB
Vue
111 lines
4.0 KiB
Vue
<template>
|
|
<div v-if="isCheckin">
|
|
<div class="spinner" style="margin: 100px auto; width: 80px; height: 80px;">
|
|
<div class="dot1" />
|
|
<div class="dot2" />
|
|
</div>
|
|
<div class="flex justify-center text-2xl">
|
|
{{ t('message.loading') }} ...
|
|
</div>
|
|
</div>
|
|
<div v-else>
|
|
<section class="page-w bg-gray-400 dark:bg-gray-600 min-h-screen flex justify-center flex-wrap ">
|
|
<figure class="my-auto login w-[calc(100%+1rem)]">
|
|
<div class="max-w-sm mx-auto overflow-hidden shadow-xl dark:bg-gray-900 bg-gray-100 rounded-3xl p-2">
|
|
<div class="flex flex-row justify-center">
|
|
<div class="mt-1.4 ml-2">
|
|
<button class="!outline-none text-gray-800 dark:text-gray-200" @click="toggleDark()">
|
|
<div v-if="isDark" i-carbon-sun />
|
|
<div v-else i-carbon-moon />
|
|
</button>
|
|
</div>
|
|
<div class="order-last flex-shrink-0">
|
|
<MenuLocales :label-mode="localesLabelMode" :include-current="includeCurrLocale" />
|
|
</div>
|
|
<div class="p-1 ml-8 flex flex-shrink-0 justify-center flex-grow bg-transparent">
|
|
<span v-if="use_logo" class="text-lg rounded-full">
|
|
<img v-if="isDark"
|
|
class="m-auto mt-5"
|
|
width="250"
|
|
:src="`${assetsPath}/images/cvgen_b.svg`"
|
|
/>
|
|
<img v-else
|
|
class="m-auto mt-5"
|
|
width="250"
|
|
:src="`${assetsPath}/images/cvgen_w.svg`"
|
|
/>
|
|
</span>
|
|
<h2 v-else class="text-center mb-1 text-lg heading ~info">
|
|
{{ t('login.welcome') }}
|
|
</h2>
|
|
</div>
|
|
</div>
|
|
<div v-if="use_logo" class="-mt-2 flex flex-row justify-center flex-none">
|
|
<span class="mb-1 text-lg ">
|
|
</span>
|
|
</div>
|
|
<div class="p-2">
|
|
<p class="text-center mb-3 text-base support ~info dark:text-gray-100">
|
|
{{ t('login.subtitle') }}
|
|
</p>
|
|
<div class="container">
|
|
<h5 class="text-center subheading mb-4 dark:text-gray-200">
|
|
{{ t('login.end_session') }}
|
|
</h5>
|
|
<div class="messages global">
|
|
</div>
|
|
<div class="alternative-actions border-t border-b flex gap-4 py-2 section justify-center bg-gray-300 dark:bg-gray-600">
|
|
<!-- <a href="auth/registration">Recover password</a> -->
|
|
<h3 class=" ~critical text-xl p-4 dark:text-gray-100">
|
|
{{ t('login.see_you_soon','') }}
|
|
</h3>
|
|
</div>
|
|
<div class="mt-8 flex justify-center">
|
|
<button type="submit"
|
|
class="text-lg flex-grow flex-shrink-0 bg-indigo-500 hover:bg-indigo-700 border-indigo-500 hover:border-indigo-700 text-sm border-4 text-white py-1 px-2 rounded"
|
|
@click.prevent="signIn">
|
|
{{ t('login.signin') }}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</figure>
|
|
</section>
|
|
</div>
|
|
</template>
|
|
<script setup lang="ts">
|
|
import {
|
|
ref,
|
|
onMounted,
|
|
} from 'vue'
|
|
import { useRouter } from 'vue-router'
|
|
import { useI18n } from 'vue-i18n'
|
|
// import { useStore } from 'vuex'
|
|
// import { AppDefsAction } from '~/store/types'
|
|
import MenuLocales from '@/MenuLocales.vue'
|
|
import {LocalesLabelModes} from '~/typs'
|
|
import { isDark, toggleDark } from '~/composables'
|
|
import useState from '~/hooks/useState'
|
|
|
|
const assetsPath = useState().ASSETS_PATH.value
|
|
|
|
const router = useRouter()
|
|
const use_logo = router.currentRoute.value.meta.use_logo
|
|
const t = useI18n().t
|
|
// const store = useStore()
|
|
// const lang = computed(() => store.state.app_lang.lang)
|
|
const includeCurrLocale = true // computed(() => appDefs.value.includeCurrLocale || false)
|
|
|
|
const localesLabelMode = ref(LocalesLabelModes.auto)
|
|
const isCheckin = ref(false)
|
|
const signIn = async() => {
|
|
router.push('/login')
|
|
}
|
|
|
|
onMounted(() => {
|
|
// TODO call backend for logout
|
|
localStorage.removeItem(useState().AUTHKEY.value)
|
|
})
|
|
|
|
</script> |