49 lines
2.2 KiB
Vue
49 lines
2.2 KiB
Vue
<template>
|
|
<div class="relative rounded-lg overflow-hidden p-4 ">
|
|
<slot></slot>
|
|
<div class="p-4">
|
|
<div class="flex flex-col items-center space-y-3 mb-4">
|
|
<NuxtImg src="/assets/icons/logo.png" height="44" width="44" type="webp" />
|
|
<h2 class="text-2xl font-bold mt-[0_!important]">
|
|
<span class="text-blue-700">Stok</span>
|
|
<span class="text-yellow-300">In</span>
|
|
</h2>
|
|
</div>
|
|
<div v-if="authSectionIsLoading"
|
|
class="absolute top-0 left-0 right-0 bottom-0 z-30 flex backdrop-brightness-75">
|
|
<div class="flex flex-col w-1/2 m-auto items-center justify-center">
|
|
<LoaderPadlock class="scale-50" />
|
|
<p>Please Wait...</p>
|
|
</div>
|
|
</div>
|
|
<div v-if="authSection === 'login'">
|
|
<AuthLogin @is-loading="e => authSectionIsLoading = e"
|
|
@section:forgot-password="authSection = 'forgot-password'" />
|
|
<div class="mt-4 flex justify-center items-center">
|
|
<span>
|
|
Tidak punya akun?
|
|
</span>
|
|
<NuxtUiButton label="Daftar" variant="link" @click="authSection = 'register'" />
|
|
</div>
|
|
</div>
|
|
<div v-else-if="authSection === 'register'">
|
|
<AuthRegister @is-loading="e => authSectionIsLoading = e" />
|
|
<div class="mt-4 flex justify-center items-center">
|
|
<span>
|
|
Sudah punya akun?
|
|
</span>
|
|
<NuxtUiButton label="Masuk" variant="link" @click="authSection = 'login'" />
|
|
</div>
|
|
</div>
|
|
<div v-else-if="authSection === 'forgot-password'">
|
|
<AuthForgotPassword @is-loading="e => authSectionIsLoading = e" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script lang="ts" setup>
|
|
import { AuthForgotPassword } from '#components';
|
|
|
|
const authSection = useState<'login' | 'register' | 'forgot-password'>('auth-section', () => 'login')
|
|
const authSectionIsLoading = ref<boolean>(false)
|
|
</script> |