118 lines
2.4 KiB
Vue
118 lines
2.4 KiB
Vue
<script setup>
|
||
import { ref } from 'vue'
|
||
import { useRouter } from 'vue-router'
|
||
import { adminApi, session } from '../api'
|
||
import { site } from '../site'
|
||
|
||
const router = useRouter()
|
||
const username = ref('admin')
|
||
const password = ref('')
|
||
const error = ref('')
|
||
const busy = ref(false)
|
||
|
||
async function submit() {
|
||
error.value = ''
|
||
busy.value = true
|
||
try {
|
||
const data = await adminApi.login(username.value, password.value)
|
||
session.user = username.value
|
||
void data
|
||
router.push('/admin')
|
||
} catch (e) {
|
||
error.value = '用户名或密码不对'
|
||
} finally {
|
||
busy.value = false
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<template>
|
||
<div class="page">
|
||
<form class="card" @submit.prevent="submit">
|
||
<p class="eyebrow">后台</p>
|
||
<h1 class="title">登录 {{ site.site_title || 'ONE' }}</h1>
|
||
|
||
<div class="field">
|
||
<label for="u">用户名</label>
|
||
<input id="u" v-model="username" class="input" autocomplete="username" />
|
||
</div>
|
||
|
||
<div class="field">
|
||
<label for="p">密码</label>
|
||
<input
|
||
id="p"
|
||
v-model="password"
|
||
type="password"
|
||
class="input"
|
||
autocomplete="current-password"
|
||
@keyup.enter="submit"
|
||
/>
|
||
</div>
|
||
|
||
<p v-if="error" class="error">{{ error }}</p>
|
||
|
||
<button class="btn btn-primary" type="submit" :disabled="busy || !password">
|
||
{{ busy ? '登录中…' : '登录' }}
|
||
</button>
|
||
|
||
<p class="hint">
|
||
默认账号在服务端环境变量里：<code>ONE_ADMIN_USER</code> / <code>ONE_ADMIN_PASSWORD</code>。
|
||
</p>
|
||
|
||
<RouterLink to="/" class="back">← 回到前台</RouterLink>
|
||
</form>
|
||
</div>
|
||
</template>
|
||
|
||
<style scoped>
|
||
.page {
|
||
min-height: 100vh;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 40px 20px;
|
||
}
|
||
|
||
.card {
|
||
width: 100%;
|
||
max-width: 380px;
|
||
background: var(--card);
|
||
border: 1px solid var(--line);
|
||
border-radius: 4px;
|
||
padding: 28px;
|
||
}
|
||
|
||
.title {
|
||
font-size: 22px;
|
||
margin: 6px 0 22px;
|
||
}
|
||
|
||
.error {
|
||
color: #9a5b45;
|
||
font-size: 13px;
|
||
margin: -6px 0 14px;
|
||
}
|
||
|
||
.hint {
|
||
margin-top: 18px;
|
||
font-size: 12.5px;
|
||
line-height: 1.8;
|
||
color: var(--muted);
|
||
}
|
||
|
||
.hint code {
|
||
font-family: var(--mono);
|
||
font-size: 12px;
|
||
background: var(--paper-sunken);
|
||
padding: 1px 4px;
|
||
border-radius: 3px;
|
||
}
|
||
|
||
.back {
|
||
display: inline-block;
|
||
margin-top: 14px;
|
||
font-size: 13px;
|
||
color: var(--accent);
|
||
}
|
||
</style>
|