renjue
8eacbb2b3e
CI / docker (push) Successful in 3m7s
Co-authored-by: Cursor <cursoragent@cursor.com>
73 lines
2.0 KiB
Vue
73 lines
2.0 KiB
Vue
<script setup lang="ts">
|
|
import { ref } from 'vue'
|
|
import { useI18n } from 'vue-i18n'
|
|
import { useRouter } from 'vue-router'
|
|
import axios from 'axios'
|
|
import { ElMessage } from 'element-plus'
|
|
import { useAuthStore } from '@/stores/auth'
|
|
import AtlasLogo from '@/components/AtlasLogo.vue'
|
|
|
|
const { t } = useI18n()
|
|
const router = useRouter()
|
|
const auth = useAuthStore()
|
|
const password = ref('')
|
|
const loading = ref(false)
|
|
|
|
async function submit() {
|
|
loading.value = true
|
|
try {
|
|
await auth.login(password.value)
|
|
router.push('/admin')
|
|
} catch (err) {
|
|
if (axios.isAxiosError(err) && err.response?.status === 429) {
|
|
const retryAfter = Number(err.response.data?.retry_after) || 900
|
|
ElMessage.error(t('login.locked', { minutes: Math.max(1, Math.ceil(retryAfter / 60)) }))
|
|
} else {
|
|
ElMessage.error(t('login.wrongPassword'))
|
|
}
|
|
} finally {
|
|
loading.value = false
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="login-page">
|
|
<div class="login-wrap">
|
|
<div class="login-brand-icon">
|
|
<AtlasLogo :size="48" />
|
|
</div>
|
|
<h1 class="page-title">Atlas</h1>
|
|
<p class="page-desc">{{ t('login.subtitle') }}</p>
|
|
<div class="login-card app-card">
|
|
<h3 class="app-card__title">{{ t('login.title') }}</h3>
|
|
<el-form size="large" @submit.prevent="submit">
|
|
<el-form-item :label="t('login.password')">
|
|
<el-input
|
|
v-model="password"
|
|
type="password"
|
|
show-password
|
|
:placeholder="t('login.passwordPlaceholder')"
|
|
/>
|
|
</el-form-item>
|
|
<el-button type="primary" native-type="submit" :loading="loading" class="w-full">
|
|
{{ t('login.submit') }}
|
|
</el-button>
|
|
</el-form>
|
|
<p class="form-hint">{{ t('login.hint') }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.login-brand-icon {
|
|
display: inline-flex;
|
|
margin-bottom: var(--space-4);
|
|
}
|
|
.login-brand-icon :deep(.atlas-logo) {
|
|
width: 48px;
|
|
height: 48px;
|
|
}
|
|
</style>
|