96 lines
2.5 KiB
Vue
96 lines
2.5 KiB
Vue
<script setup lang="ts">
|
||
import { login } from "./api"
|
||
import { loginModal, toggleLogin, toggleSignup } from "./composables/modal"
|
||
import { useUserStore } from "./store/user"
|
||
import type { FormRules } from "naive-ui"
|
||
|
||
const userStore = useUserStore()
|
||
const loginRef = ref()
|
||
const [isLoading, toggleLoading] = useToggle()
|
||
const msg = ref("")
|
||
const form = reactive({
|
||
username: "",
|
||
password: "",
|
||
})
|
||
const rules: FormRules = {
|
||
username: [{ required: true, message: "用户名必填", trigger: "blur" }],
|
||
password: [
|
||
{ required: true, message: "密码必填", trigger: "blur" },
|
||
{ min: 6, max: 20, message: "长度在 6 到 20 位之间", trigger: "input" },
|
||
],
|
||
}
|
||
|
||
async function submit() {
|
||
loginRef.value!.validate(async (errors: FormRules | undefined) => {
|
||
if (!errors) {
|
||
try {
|
||
msg.value = ""
|
||
toggleLoading(true)
|
||
await login(form)
|
||
} catch (err: any) {
|
||
if (err.data === "Your account has been disabled") {
|
||
msg.value = "此账号已被封禁"
|
||
} else if (err.data === "Invalid username or password") {
|
||
msg.value = "用户名或密码不正确"
|
||
} else {
|
||
msg.value = "无法登录"
|
||
}
|
||
} finally {
|
||
toggleLoading(false)
|
||
}
|
||
if (!msg.value) {
|
||
toggleLogin(false)
|
||
userStore.getMyProfile()
|
||
}
|
||
}
|
||
})
|
||
}
|
||
|
||
function goSignup() {
|
||
toggleLogin(false)
|
||
toggleSignup(true)
|
||
}
|
||
</script>
|
||
|
||
<template>
|
||
<n-modal
|
||
:mask-closable="false"
|
||
v-model:show="loginModal"
|
||
preset="card"
|
||
title="登录"
|
||
style="width: 400px"
|
||
:auto-focus="false"
|
||
>
|
||
<n-form ref="loginRef" :model="form" :rules="rules" show-require-mark>
|
||
<n-form-item label="用户名" path="username">
|
||
<n-input
|
||
v-model:value="form.username"
|
||
autofocus
|
||
clearable
|
||
name="login username"
|
||
/>
|
||
</n-form-item>
|
||
<n-form-item label="密码" path="password">
|
||
<n-input
|
||
v-model:value="form.password"
|
||
clearable
|
||
type="password"
|
||
name="login password"
|
||
@change="submit"
|
||
/>
|
||
</n-form-item>
|
||
<n-alert v-if="msg" type="error" :show-icon="false"> {{ msg }}</n-alert>
|
||
<n-form-item>
|
||
<n-space>
|
||
<n-button type="primary" :loading="isLoading" @click="submit">
|
||
登录
|
||
</n-button>
|
||
<n-button @click="goSignup">没有账号？立即注册</n-button>
|
||
</n-space>
|
||
</n-form-item>
|
||
</n-form>
|
||
</n-modal>
|
||
</template>
|
||
|
||
<style scoped></style>
|