49 lines
1.7 KiB
Vue
49 lines
1.7 KiB
Vue
<template>
|
|
<section class="flex min-h-screen flex-col justify-center px-5 py-10">
|
|
<div class="mb-8">
|
|
<p class="text-sm font-semibold text-brand-700">Money</p>
|
|
<h1 class="mt-2 text-3xl font-bold tracking-normal text-ink">빠르게 기록하는 개인 가계부</h1>
|
|
<p class="mt-3 text-sm leading-6 text-muted">홈 화면에 설치해서 앱처럼 쓰고, 로그인 상태를 유지할 수 있게 구성했습니다.</p>
|
|
</div>
|
|
|
|
<form class="space-y-4" @submit.prevent="submit">
|
|
<div>
|
|
<label class="label" for="email">이메일</label>
|
|
<input id="email" v-model="email" class="field" type="email" autocomplete="email" required>
|
|
</div>
|
|
<div>
|
|
<label class="label" for="password">비밀번호</label>
|
|
<input id="password" v-model="password" class="field" type="password" autocomplete="current-password" required>
|
|
</div>
|
|
<p v-if="error" class="text-sm font-medium text-red-600">{{ error }}</p>
|
|
<button class="btn-primary w-full" type="submit" :disabled="pending">
|
|
{{ pending ? '확인 중...' : '로그인' }}
|
|
</button>
|
|
</form>
|
|
</section>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
const email = ref('user@example.com')
|
|
const password = ref('money1234')
|
|
const error = ref('')
|
|
const pending = ref(false)
|
|
const session = useState('session')
|
|
|
|
async function submit() {
|
|
pending.value = true
|
|
error.value = ''
|
|
try {
|
|
session.value = await $fetch('/api/auth/login', {
|
|
method: 'POST',
|
|
body: { email: email.value, password: password.value }
|
|
})
|
|
await navigateTo('/')
|
|
} catch {
|
|
error.value = '이메일 또는 비밀번호를 확인해 주세요.'
|
|
} finally {
|
|
pending.value = false
|
|
}
|
|
}
|
|
</script>
|