191 lines
8.8 KiB
HTML
191 lines
8.8 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" data-toggle="modal" data-target="#register">Register</button>
|
||
<div id="alert-pos"></div>
|
||
</form>
|
||
</div>
|
||
</main>
|
||
|
||
<!-- The modal itself -->
|
||
<div class="modal fade" id="register" tabindex="-1" role="dialog" aria-labelledby="base_modal_center_title" aria-modal="true">
|
||
<div class="modal-dialog modal-dialog-centered" role="document">
|
||
<div class="modal-content">
|
||
<div class="container col-md-8">
|
||
<form id="register-form">
|
||
<div class="form-group">
|
||
<h4>Register Form</h4>
|
||
</div>
|
||
<div class="form-group">
|
||
<input type="text" class="form-control input-round" id="r_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="r_password" placeholder="Password" required="">
|
||
</div>
|
||
<div class="form-group form-inline">
|
||
<button type="submit" class="btn btn-success btn-round">Register</button>
|
||
<button type="button" class="btn btn-info btn-round" data-dismiss="modal">Close</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<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>
|
||
$(() => {
|
||
|
||
$('#login-form').on('submit', function(event) {
|
||
event.preventDefault();
|
||
|
||
var username = document.getElementById('username').value;
|
||
var password = document.getElementById('password').value;
|
||
|
||
// 这里仅做简单的输入非空验证，实际应用中需要后端配合进行账号密码验证
|
||
if (!username || !password) {
|
||
alertMessage(
|
||
undefined,
|
||
undefined,
|
||
undefined,
|
||
undefined);
|
||
} else {
|
||
// 假设这里发起一个异步登录请求
|
||
login(username, password);
|
||
}
|
||
});
|
||
|
||
$('#register-form').on('submit', function(event) {
|
||
event.preventDefault();
|
||
|
||
var username = document.getElementById('r_username').value;
|
||
var password = document.getElementById('r_password').value;
|
||
|
||
// 这里仅做简单的输入非空验证，实际应用中需要后端配合进行账号密码验证
|
||
if (!username || !password) {
|
||
alertMessage(
|
||
undefined,
|
||
undefined,
|
||
undefined,
|
||
undefined);
|
||
} else {
|
||
// 假设这里发起一个异步注册请求
|
||
register(username, password);
|
||
}
|
||
});
|
||
})
|
||
|
||
|
||
async function login(username, password) {
|
||
try {
|
||
// 这里应该调用后端API进行登录操作，以下仅为模拟示例
|
||
const wrapper = new FetchWrapper(window.location.origin);
|
||
const search = window.location.search.toString();
|
||
const response = await wrapper.post(`/api/users/login${search}`, {
|
||
username: username,
|
||
password: password
|
||
})
|
||
|
||
if (response.data.code === '0000') {
|
||
// 登录成功，跳转到主页
|
||
document.cookie = `token=${response.data.data.token}; path=/;`;
|
||
// expires=${expirationDate.toUTCString()}; SameSite=Strict; Secure; HttpOnly;
|
||
window.location.href = response.data.data.href;
|
||
} else {
|
||
// 登录失败，给出错误提示
|
||
alertMessage(
|
||
undefined,
|
||
'Login failed.登录失败...',
|
||
`error code:${response.data.code} 请检查用户名和密码是否正确, 或联系管理员添加新账号`,
|
||
'danger');
|
||
}
|
||
} catch (error) {
|
||
console.error('Error fetching:', error);
|
||
}
|
||
}
|
||
|
||
async function register(username, password) {
|
||
try {
|
||
// 这里应该调用后端API进行登录操作，以下仅为模拟示例
|
||
const wrapper = new FetchWrapper(window.location.origin);
|
||
const response = await wrapper.post('/api/users/register', {
|
||
username: username,
|
||
password: password
|
||
})
|
||
|
||
if (response.data.code === '0000') {
|
||
// 登录成功，跳转到主页
|
||
alertMessage(
|
||
undefined,
|
||
'Register success.注册成功...',
|
||
undefined,
|
||
'success');
|
||
|
||
} else {
|
||
// 登录失败，给出错误提示
|
||
alertMessage(
|
||
undefined,
|
||
'register failed.注册失败...',
|
||
`error code:${response.data.code} 请检查用户名和密码是否正确, 或联系管理员添加新账号`,
|
||
'danger');
|
||
}
|
||
} catch (error) {
|
||
console.error('Error fetching:', error);
|
||
} finally {
|
||
$('#register').modal('hide');
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<script>
|
||
// Disable the default closing behavior for the modal
|
||
$('#register').on('show.bs.modal', function (event) {
|
||
$(this).data('bs.modal')._config.backdrop = 'static';
|
||
$(this).data('bs.modal')._config.keyboard = false;
|
||
});
|
||
</script>
|
||
</body>
|
||
</html> |