95 lines
4.7 KiB
HTML
95 lines
4.7 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
|
||
<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no' name='viewport'/>
|
||
<!-- Fonts -->
|
||
<!-- <link href="https://fonts.googleapis.com/css?family=Nunito:300,300i,400,600,700" rel="stylesheet"> -->
|
||
<!-- <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous"> -->
|
||
<!-- <link href="./css/anchor/fonts_all.css" rel="stylesheet"/> -->
|
||
<!-- CSS -->
|
||
<link href="/css/anchor/main.css" rel="stylesheet"/>
|
||
<link href="/css/anchor/vendor/aos.css" rel="stylesheet"/>
|
||
|
||
<title>Login</title>
|
||
<link rel="icon" href="/pic/ico/Home.png">
|
||
</head>
|
||
<body>
|
||
<!-- <div class="include" src="/html/base/base_modal.html"></div> -->
|
||
<div class="include" src="/html/base/base_nav.html"></div>
|
||
|
||
<main class="container pb-5 pt-5">
|
||
<!-- <div id="linking-cards" class="row"></div> -->
|
||
<div class="container col-md-5">
|
||
<form id="login-form">
|
||
<div class="form-group">
|
||
<input type="text" class="form-control input-round" id="username" placeholder="Enter Username" required="">
|
||
<small id="usernameHelp" class="form-text text-muted">We'll never share your username and password with anyone else.</small>
|
||
</div>
|
||
<div class="form-group">
|
||
<input type="password" class="form-control input-round" id="password" placeholder="Password" required="">
|
||
</div>
|
||
<div class="form-group form-check">
|
||
<input type="checkbox" class="form-check-input" id="exampleCheck1">
|
||
<label class="form-check-label" for="exampleCheck1">Check me out</label>
|
||
</div>
|
||
<button type="submit" class="btn btn-success btn-round">Login</button>
|
||
<button type="button" class="btn btn-success btn-round disabled">Register</button>
|
||
<p class="message"></p>
|
||
</form>
|
||
</div>
|
||
</main>
|
||
|
||
<div class="include" src="/html/base/base_footer.html"></div>
|
||
|
||
<!-- Javascript -->
|
||
<script src="/js/anchor/vendor/jquery.min.js" type="text/javascript"></script>
|
||
<script src="/js/anchor/vendor/popper.min.js" type="text/javascript"></script>
|
||
<script src="/js/anchor/vendor/bootstrap.min.js" type="text/javascript"></script>
|
||
<script src="/js/anchor/functions.js" type="text/javascript"></script>
|
||
<script src="/js/base_script.js" type="text/javascript" charset="utf-8"></script>
|
||
<script src="/fetch-wrapper.js" type="text/javascript" charset="utf-8"></script>
|
||
<script>
|
||
document.getElementById('login-form').addEventListener('submit', function(event) {
|
||
event.preventDefault();
|
||
|
||
var username = document.getElementById('username').value;
|
||
var password = document.getElementById('password').value;
|
||
|
||
// 这里仅做简单的输入非空验证，实际应用中需要后端配合进行账号密码验证
|
||
if (!username || !password) {
|
||
document.querySelector('.message').textContent = 'Both username and password are required.';
|
||
} else {
|
||
document.querySelector('.message').textContent = '';
|
||
// 假设这里发起一个异步登录请求
|
||
login(username, password);
|
||
}
|
||
});
|
||
|
||
async function login(username, password) {
|
||
try {
|
||
// 这里应该调用后端API进行登录操作，以下仅为模拟示例
|
||
const wrapper = new FetchWrapper(window.location.origin);
|
||
const response = await wrapper.post('/api/users/login', {
|
||
username: username,
|
||
password: password
|
||
})
|
||
|
||
if (response.data.code === '0000') {
|
||
// 登录成功，跳转到主页
|
||
document.cookie = `token=${response.data.data};`;
|
||
window.location.href = '/users';
|
||
} else {
|
||
// 登录失败，给出错误提示
|
||
document.querySelector('.message').textContent =
|
||
'Login failed.登录失败...' + response.data.code +
|
||
'请检查用户名和密码是否正确, 或联系管理员添加新账号';
|
||
}
|
||
} catch (error) {
|
||
console.error('Error fetching:', error);
|
||
}
|
||
}
|
||
</script>
|
||
</body>
|
||
</html> |