52 lines
1.3 KiB
Vue
52 lines
1.3 KiB
Vue
<script setup lang="ts">
|
|
// import PasswordInput from '~/components/PasswordInput.vue'
|
|
import { Loader2 } from 'lucide-vue-next'
|
|
|
|
const email = ref('[email protected]')
|
|
const password = ref('password')
|
|
const isLoading = ref(false)
|
|
|
|
function onSubmit(event: Event) {
|
|
event.preventDefault()
|
|
if (!email.value || !password.value) return
|
|
|
|
isLoading.value = true
|
|
|
|
setTimeout(() => {
|
|
if (email.value === '[email protected]' && password.value === 'password') navigateTo('/')
|
|
|
|
isLoading.value = false
|
|
}, 3000)
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<form class="grid gap-6" @submit="onSubmit">
|
|
<div class="grid gap-2">
|
|
<Label for="email"> Email </Label>
|
|
<Input
|
|
id="email"
|
|
v-model="email"
|
|
type="email"
|
|
placeholder="[email protected]"
|
|
:disabled="isLoading"
|
|
auto-capitalize="none"
|
|
auto-complete="email"
|
|
auto-correct="off"
|
|
/>
|
|
</div>
|
|
<div class="grid gap-2">
|
|
<div class="flex items-center">
|
|
<Label for="password"> Password </Label>
|
|
</div>
|
|
<Input id="password" v-model="password" type="password" :disabled="isLoading" />
|
|
</div>
|
|
<Button type="submit" variant="outline" class="w-full" :disabled="isLoading">
|
|
<Loader2 v-if="isLoading" class="mr-2 h-4 w-4 animate-spin" />
|
|
Login
|
|
</Button>
|
|
</form>
|
|
</template>
|
|
|
|
<style scoped></style>
|