gonghao
/
local_alert
Template
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

登录端口添加

This commit is contained in:
龚皓 2024-09-30 15:52:11 +08:00
parent 31ece3ea1f
commit 76dfe72832
1 changed files with 167 additions and 111 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

278
src/html/LoginView.vue
View File

@ -1,148 +1,204 @@
<script lang="ts" setup> <script lang="ts" setup>
import { reactive } from 'vue' import { reactive, ref, onMounted } from 'vue';
import { useRouter } from 'vue-router' import { useRoute, useRouter } from 'vue-router';
import {ElMessage} from 'element-plus' import { BoxApi } from '@/utils/boxApi';
import { Lock, User } from '@element-plus/icons-vue'; import { User, Lock } from '@element-plus/icons-vue';
import { useSuperbox } from '@/utils/Superbox'
import { useSetToken } from '@/utils/misc';
const router = useRouter(); const router = useRouter();
const superbox = useSuperbox(); const route = useRoute();
const loginForm = reactive({ const loginForm = reactive({
username: '', username: '',
password: '' password: '',
address: '',
port: '',
remember: false // 新增 "记住密码" 选项
}); });
const setToken = useSetToken(); const errorMessage = ref('');
const username = ref(localStorage.getItem('username') || '');
const alertToken = ref('');
const cookless = ref(false);
// 创建实例
let apiInstance: BoxApi | null = null;
// 加载页面时检查是否有记住的密码
onMounted(() => {
const savedUsername = localStorage.getItem('username');
const savedPassword = localStorage.getItem('rememberedPassword');
const savedAddress = localStorage.getItem('rememberedAddress');
const savedPort = localStorage.getItem('rememberedPort');
if (savedUsername && savedPassword && savedAddress && savedPort) {
loginForm.username = savedUsername;
loginForm.password = savedPassword;
loginForm.address = savedAddress;
loginForm.port = savedPort;
loginForm.remember = true; // 如果有记住的数据，将复选框设为选中状态
}
});
const onSubmit = async () => { const onSubmit = async () => {
try { try {
const token = await superbox.login(loginForm.username, loginForm.password, false); // 检查服务器地址和端口是否填写
if (token) { if (!loginForm.address || !loginForm.port) {
setToken(token); errorMessage.value = '请输入服务器地址和端口';
router.push('/'); return;
}
} catch (error) {
ElMessage(
{
message: '用户名或密码错误，登录失败',
type: 'error',
duration: 5000
}
);
console.log(error);
} }
// 实例化 SuperboxApi
apiInstance = new BoxApi(loginForm.address, parseInt(loginForm.port));
// 调用 SuperboxApi 的 login 方法，传入 cookless 为 false
const apiToken = await apiInstance.login(loginForm.username, loginForm.password,false);
// 保存 token 到本地存储
localStorage.setItem('alertToken', apiToken);
// 如果勾选了“记住密码”，将用户名、密码、地址和端口存入 localStorage
if (loginForm.remember) {
localStorage.setItem('username', loginForm.username);
localStorage.setItem('rememberedPassword', loginForm.password);
localStorage.setItem('rememberedAddress', loginForm.address);
localStorage.setItem('rememberedPort', loginForm.port);
} else {
// 如果未勾选“记住密码”，清除之前记住的数据
localStorage.removeItem('rememberedPassword');
localStorage.removeItem('rememberedAddress');
localStorage.removeItem('rememberedPort');
}
// 跳转到首页
let redirect = route.query.redirect;
if (Array.isArray(redirect)) {
redirect = redirect[0]; // 如果 redirect 是数组，取第一个元素
}
router.push(redirect || '/'); // 确保 redirect 是字符串或使用默认的 '/'
} catch (error) {
// 捕获错误并显示错误信息
errorMessage.value = '用户名或密码错误，或者连接服务器失败';
}
}; };
const onReset = () => { const onReset = () => {
loginForm.username = ''; loginForm.username = '';
loginForm.password = ''; loginForm.password = '';
loginForm.address = '';
loginForm.port = '';
loginForm.remember = false; // 重置记住密码复选框
errorMessage.value = '';
}; };
</script> </script>
<template> <template>
<div class="main-layout"> <div class="main-layout">
<div class="login-form">
<div class="login-form"> <div class="login-header">
<div class="login-header"> <el-row justify="center">
<el-row justify="center"> <el-image src="/logo.png" fit="contain" />
<el-image src="./logo.png" fit="contain" /> </el-row>
</el-row> </div>
</div> <div class="login-body">
<div class="login-body"> <el-form :model="loginForm" style="max-width: 600px;">
<el-form :model="loginForm" style="max-width: 600px;"> <el-form-item>
<el-input v-model="loginForm.address" placeholder="服务器地址" />
<el-form-item> </el-form-item>
<el-input v-model="loginForm.username" placeholder="用户名" clearable> <el-form-item>
<template #prefix> <el-input v-model="loginForm.port" placeholder="端口" type="number" />
<el-icon class="el-input__icon"> </el-form-item>
<User /> <el-form-item>
</el-icon> <el-input v-model="loginForm.username" placeholder="用户名">
</template> <template #prefix>
</el-input> <el-icon class="el-input__icon">
</el-form-item> <User />
</el-icon>
<el-form-item> </template>
<el-input v-model="loginForm.password" placeholder="密码" type="password" show-password clearable> </el-input>
<template #prefix> </el-form-item>
<el-icon class="el-input__icon"> <el-form-item>
<Lock /> <el-input v-model="loginForm.password" placeholder="密码" type="password">
</el-icon> <template #prefix>
</template> <el-icon class="el-input__icon">
</el-input> <Lock />
</el-form-item> </el-icon>
<el-row justify="end"> </template>
<el-form-item size="small" :gutter="30"> </el-input>
<el-button type="primary" @click="onReset" plain>重置</el-button> </el-form-item>
<el-button type="primary" @click="onSubmit">登录</el-button> <!-- 添加记住密码复选框 -->
</el-form-item> <el-form-item>
</el-row> <el-checkbox v-model="loginForm.remember">记住密码</el-checkbox>
</el-form> </el-form-item>
</div> <el-row justify="end">
<el-form-item size="small" :gutter="30">
<div class="login-footer"> <el-button type="primary" @click="onReset" plain>重置</el-button>
<el-row justify="end"> <el-button type="primary" @click="onSubmit">登录</el-button>
<el-text class="plain-text">Powered by TuringAI</el-text> </el-form-item>
</el-row> </el-row>
</div> <el-row justify="center">
<el-text class="error-message">{{ errorMessage }}</el-text>
</div> </el-row>
</el-form>
</div>
<div class="login-footer">
<el-row justify="end">
<el-text class="plain-text">Powered by TuringAI</el-text>
</el-row>
</div>
</div> </div>
</div>
</template> </template>
<style scoped> <style scoped>
.main-layout { .main-layout {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
background-image: url('./login-bg.jpg'); background-image: url('/login-bg.jpg');
background-size: cover; background-size: cover;
} }
.login-form { .login-form {
min-width: 350px; min-width: 350px;
position: absolute; position: absolute;
top: 50%; top: 50%;
left: 50%; left: 50%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
border-radius: 10px; border-radius: 10px;
background-color: #01111863; background-color: #01111863;
} }
.login-body { .login-body {
padding-top: 30px; padding-top: 30px;
padding-bottom: 5px; padding-bottom: 5px;
padding-left: 30px; padding-left: 30px;
padding-right: 30px; padding-right: 30px;
} }
.login-header { .login-header {
padding-top: 15px; padding-top: 15px;
padding-bottom: 15px; padding-bottom: 15px;
background-color: #01111863; background-color: #01111863;
border-radius: 10px 10px 0px 0px; border-radius: 10px 10px 0px 0px;
} }
.login-footer { .login-footer {
padding-top: 15px; padding-top: 15px;
padding-bottom: 20px; padding-bottom: 20px;
padding-right: 30px; padding-right: 30px;
padding-left: 30px; padding-left: 30px;
background-color: #01111863; background-color: #01111863;
border-radius: 0px 0px 10px 10px; border-radius: 0px 0px 10px 10px;
}
.main-title {
color: #c2c8fd;
} }
.plain-text { .plain-text {
color: #9a9db3; color: #9a9db3;
} }
</style>
.error-message {
color: red;
}
</style>