148 lines
3.5 KiB
Vue
148 lines
3.5 KiB
Vue
<script setup>
|
|
import { onMounted, ref, watch } from 'vue'
|
|
import { useRoute, useRouter } from 'vue-router'
|
|
import { useAuthStore } from '../stores/auth'
|
|
import { api } from '../lib/api'
|
|
import { useToast } from '../composables/useToast'
|
|
|
|
const router = useRouter()
|
|
const route = useRoute()
|
|
const auth = useAuthStore()
|
|
const toast = useToast()
|
|
|
|
const email = ref('')
|
|
const password = ref('')
|
|
const mode = ref('login')
|
|
const error = ref('')
|
|
const hasUsers = ref(true)
|
|
|
|
watch(error, (message) => {
|
|
if (!message) return
|
|
toast.error(message)
|
|
error.value = ''
|
|
})
|
|
|
|
onMounted(async () => {
|
|
try {
|
|
const meta = await api.authMeta()
|
|
hasUsers.value = !!meta.hasUsers
|
|
} catch (e) {
|
|
hasUsers.value = true
|
|
}
|
|
})
|
|
|
|
async function submit() {
|
|
error.value = ''
|
|
try {
|
|
if (mode.value === 'signup') await auth.signup(email.value, password.value)
|
|
else await auth.login(email.value, password.value)
|
|
router.push(typeof route.query.redirect === 'string' ? route.query.redirect : '/me')
|
|
} catch (e) {
|
|
error.value = '로그인/회원가입에 실패했어요.'
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<section class="wrap">
|
|
<form class="card" @submit.prevent="submit">
|
|
<div class="tabs">
|
|
<button type="button" class="tab" :class="{ 'tab--active': mode === 'login' }" @click="mode = 'login'">
|
|
로그인
|
|
</button>
|
|
<button type="button" class="tab" :class="{ 'tab--active': mode === 'signup' }" @click="mode = 'signup'">
|
|
회원가입
|
|
</button>
|
|
</div>
|
|
<label class="label">이메일</label>
|
|
<input v-model="email" class="input" placeholder="you@example.com" autocomplete="email" />
|
|
|
|
<label class="label">비밀번호</label>
|
|
<input
|
|
v-model="password"
|
|
class="input"
|
|
type="password"
|
|
placeholder="********"
|
|
autocomplete="current-password"
|
|
/>
|
|
|
|
<button class="btn" type="submit">{{ mode === 'signup' ? '회원가입' : '로그인' }}</button>
|
|
|
|
<div v-if="!hasUsers" class="hint">첫 회원가입 계정은 자동으로 admin 권한이 부여됩니다(개발용).</div>
|
|
</form>
|
|
</section>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.wrap {
|
|
min-height: calc(100vh - 74px);
|
|
display: grid;
|
|
place-items: center;
|
|
padding: 14px 2px;
|
|
}
|
|
.card {
|
|
max-width: 420px;
|
|
width: min(420px, 92vw);
|
|
border: 1px solid rgba(255, 255, 255, 0.12);
|
|
background: rgba(255, 255, 255, 0.04);
|
|
border-radius: 16px;
|
|
padding: 14px;
|
|
box-sizing: border-box;
|
|
}
|
|
.tabs {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 8px;
|
|
margin-bottom: 10px;
|
|
}
|
|
.tab {
|
|
padding: 10px 12px;
|
|
border-radius: 12px;
|
|
border: 1px solid rgba(255, 255, 255, 0.12);
|
|
background: rgba(0, 0, 0, 0.12);
|
|
color: rgba(255, 255, 255, 0.9);
|
|
font-weight: 800;
|
|
cursor: pointer;
|
|
}
|
|
.tab--active {
|
|
background: rgba(96, 165, 250, 0.18);
|
|
border-color: rgba(255, 255, 255, 0.16);
|
|
}
|
|
.label {
|
|
display: block;
|
|
font-size: 13px;
|
|
opacity: 0.78;
|
|
margin-top: 10px;
|
|
margin-bottom: 6px;
|
|
}
|
|
.input {
|
|
width: 100%;
|
|
padding: 10px 12px;
|
|
border-radius: 12px;
|
|
border: 1px solid rgba(255, 255, 255, 0.12);
|
|
background: rgba(0, 0, 0, 0.18);
|
|
color: rgba(255, 255, 255, 0.92);
|
|
outline: none;
|
|
box-sizing: border-box;
|
|
}
|
|
.btn {
|
|
margin-top: 12px;
|
|
width: 100%;
|
|
padding: 10px 12px;
|
|
border-radius: 12px;
|
|
border: 1px solid rgba(255, 255, 255, 0.14);
|
|
background: rgba(96, 165, 250, 0.2);
|
|
color: rgba(255, 255, 255, 0.92);
|
|
cursor: pointer;
|
|
font-weight: 800;
|
|
}
|
|
.btn:hover {
|
|
background: rgba(96, 165, 250, 0.26);
|
|
}
|
|
.hint {
|
|
margin-top: 10px;
|
|
opacity: 0.72;
|
|
font-size: 13px;
|
|
}
|
|
</style>
|