登录端口添加
This commit is contained in:
龚皓
parent
31ece3ea1f
commit
76dfe72832
|
|
@ -1,148 +1,204 @@
|
|||
<script lang="ts" setup>
|
||||
import { reactive } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import {ElMessage} from 'element-plus'
|
||||
import { Lock, User } from '@element-plus/icons-vue';
|
||||
|
||||
import { useSuperbox } from '@/utils/Superbox'
|
||||
|
||||
import { useSetToken } from '@/utils/misc';
|
||||
import { reactive, ref, onMounted } from 'vue';
|
||||
import { useRoute, useRouter } from 'vue-router';
|
||||
import { BoxApi } from '@/utils/boxApi';
|
||||
import { User, Lock } from '@element-plus/icons-vue';
|
||||
|
||||
const router = useRouter();
|
||||
const superbox = useSuperbox();
|
||||
const route = useRoute();
|
||||
|
||||
const loginForm = reactive({
|
||||
username: '',
|
||||
password: ''
|
||||
username: '',
|
||||
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 () => {
|
||||
try {
|
||||
const token = await superbox.login(loginForm.username, loginForm.password, false);
|
||||
if (token) {
|
||||
setToken(token);
|
||||
router.push('/');
|
||||
}
|
||||
} catch (error) {
|
||||
ElMessage(
|
||||
{
|
||||
message: '用户名或密码错误，登录失败',
|
||||
type: 'error',
|
||||
duration: 5000
|
||||
}
|
||||
);
|
||||
console.log(error);
|
||||
try {
|
||||
// 检查服务器地址和端口是否填写
|
||||
if (!loginForm.address || !loginForm.port) {
|
||||
errorMessage.value = '请输入服务器地址和端口';
|
||||
return;
|
||||
}
|
||||
|
||||
// 实例化 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 = () => {
|
||||
loginForm.username = '';
|
||||
loginForm.password = '';
|
||||
loginForm.username = '';
|
||||
loginForm.password = '';
|
||||
loginForm.address = '';
|
||||
loginForm.port = '';
|
||||
loginForm.remember = false; // 重置记住密码复选框
|
||||
errorMessage.value = '';
|
||||
};
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<template>
|
||||
<div class="main-layout">
|
||||
|
||||
<div class="login-form">
|
||||
<div class="login-header">
|
||||
<el-row justify="center">
|
||||
<el-image src="./logo.png" fit="contain" />
|
||||
</el-row>
|
||||
</div>
|
||||
<div class="login-body">
|
||||
<el-form :model="loginForm" style="max-width: 600px;">
|
||||
|
||||
<el-form-item>
|
||||
<el-input v-model="loginForm.username" placeholder="用户名" clearable>
|
||||
<template #prefix>
|
||||
<el-icon class="el-input__icon">
|
||||
<User />
|
||||
</el-icon>
|
||||
</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item>
|
||||
<el-input v-model="loginForm.password" placeholder="密码" type="password" show-password clearable>
|
||||
<template #prefix>
|
||||
<el-icon class="el-input__icon">
|
||||
<Lock />
|
||||
</el-icon>
|
||||
</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-row justify="end">
|
||||
<el-form-item size="small" :gutter="30">
|
||||
<el-button type="primary" @click="onReset" plain>重置</el-button>
|
||||
<el-button type="primary" @click="onSubmit">登录</el-button>
|
||||
</el-form-item>
|
||||
</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 class="main-layout">
|
||||
<div class="login-form">
|
||||
<div class="login-header">
|
||||
<el-row justify="center">
|
||||
<el-image src="/logo.png" fit="contain" />
|
||||
</el-row>
|
||||
</div>
|
||||
<div class="login-body">
|
||||
<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.port" placeholder="端口" type="number" />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-input v-model="loginForm.username" placeholder="用户名">
|
||||
<template #prefix>
|
||||
<el-icon class="el-input__icon">
|
||||
<User />
|
||||
</el-icon>
|
||||
</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-input v-model="loginForm.password" placeholder="密码" type="password">
|
||||
<template #prefix>
|
||||
<el-icon class="el-input__icon">
|
||||
<Lock />
|
||||
</el-icon>
|
||||
</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<!-- 添加记住密码复选框 -->
|
||||
<el-form-item>
|
||||
<el-checkbox v-model="loginForm.remember">记住密码</el-checkbox>
|
||||
</el-form-item>
|
||||
<el-row justify="end">
|
||||
<el-form-item size="small" :gutter="30">
|
||||
<el-button type="primary" @click="onReset" plain>重置</el-button>
|
||||
<el-button type="primary" @click="onSubmit">登录</el-button>
|
||||
</el-form-item>
|
||||
</el-row>
|
||||
<el-row justify="center">
|
||||
<el-text class="error-message">{{ errorMessage }}</el-text>
|
||||
</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>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.main-layout {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-image: url('./login-bg.jpg');
|
||||
background-size: cover;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-image: url('/login-bg.jpg');
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.login-form {
|
||||
min-width: 350px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
border-radius: 10px;
|
||||
background-color: #01111863;
|
||||
min-width: 350px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
border-radius: 10px;
|
||||
background-color: #01111863;
|
||||
}
|
||||
|
||||
.login-body {
|
||||
padding-top: 30px;
|
||||
padding-bottom: 5px;
|
||||
padding-left: 30px;
|
||||
padding-right: 30px;
|
||||
padding-top: 30px;
|
||||
padding-bottom: 5px;
|
||||
padding-left: 30px;
|
||||
padding-right: 30px;
|
||||
}
|
||||
|
||||
.login-header {
|
||||
padding-top: 15px;
|
||||
padding-bottom: 15px;
|
||||
background-color: #01111863;
|
||||
border-radius: 10px 10px 0px 0px;
|
||||
padding-top: 15px;
|
||||
padding-bottom: 15px;
|
||||
background-color: #01111863;
|
||||
border-radius: 10px 10px 0px 0px;
|
||||
}
|
||||
|
||||
.login-footer {
|
||||
padding-top: 15px;
|
||||
padding-bottom: 20px;
|
||||
padding-right: 30px;
|
||||
padding-left: 30px;
|
||||
background-color: #01111863;
|
||||
border-radius: 0px 0px 10px 10px;
|
||||
}
|
||||
|
||||
.main-title {
|
||||
color: #c2c8fd;
|
||||
padding-top: 15px;
|
||||
padding-bottom: 20px;
|
||||
padding-right: 30px;
|
||||
padding-left: 30px;
|
||||
background-color: #01111863;
|
||||
border-radius: 0px 0px 10px 10px;
|
||||
}
|
||||
|
||||
.plain-text {
|
||||
color: #9a9db3;
|
||||
color: #9a9db3;
|
||||
}
|
||||
</style>
|
||||
|
||||
.error-message {
|
||||
color: red;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue