134 lines
6.0 KiB
HTML
134 lines
6.0 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>修改账户</title>
|
|
<link rel="stylesheet" href="{{ url_for('static', filename='css/modify.css') }}">
|
|
<script src="https://cdn.bootcss.com/blueimp-md5/2.12.0/js/md5.min.js"></script>
|
|
<script>
|
|
window.onload = function() {
|
|
{% with messages = get_flashed_messages() %}
|
|
{% if messages %}
|
|
var message = "";
|
|
{% for msg in messages %}
|
|
message += "{{ msg }}\n";
|
|
{% endfor %}
|
|
alert(message);
|
|
{% endif %}
|
|
{% endwith %}
|
|
};
|
|
</script>
|
|
</head>
|
|
|
|
<body>
|
|
<header>
|
|
<div class="header-content">
|
|
<a href="{{ url_for('index') }}" class="btn-back">返回主页</a>
|
|
<h1>KJF航班订票</h1>
|
|
<div class="header-spacer"></div>
|
|
</div>
|
|
</header>
|
|
<main>
|
|
<div class="content">
|
|
<h2>修改账户信息</h2>
|
|
<form action="#" method="post" id="modify-form">
|
|
<div class="tab">
|
|
<button type="button" class="tablinks active" onclick="openTab(event, 'deleteAccount')">删除账户</button>
|
|
<button type="button" class="tablinks" onclick="openTab(event, 'modifyPassword')">修改密码</button>
|
|
<button type="button" class="tablinks" onclick="openTab(event, 'modifyPhone')">修改手机号</button>
|
|
<button type="button" class="tablinks" onclick="openTab(event, 'modifyUsername')">修改用户名</button>
|
|
</div>
|
|
<input type="hidden" id="modifyType" name="modifyType" value="删除账户">
|
|
<div class="form-group">
|
|
<div>登陆密码：</div>
|
|
<input type="password" id="password" placeholder="请输入您的密码" required>
|
|
<input id="encryptedPassword" name="encryptedPassword" type="hidden">
|
|
</div>
|
|
<div id="deleteAccount" class="tabcontent">
|
|
<p>删除账户将无法恢复，请确认。</p>
|
|
</div>
|
|
<div id="modifyPassword" class="tabcontent" style="display:none">
|
|
<div class="form-group">
|
|
<div>新密码：</div>
|
|
<input type="password" id="newPassword" placeholder="6-20位字母、数字或符号">
|
|
<input id="encryptedNewPassword" name="encryptedNewPassword" type="hidden">
|
|
</div>
|
|
<div class="form-group">
|
|
<div>确认密码：</div>
|
|
<input type="password" id="confirmPassword" placeholder="再次输入您的新密码">
|
|
</div>
|
|
</div>
|
|
<div id="modifyPhone" class="tabcontent" style="display:none">
|
|
<p>原手机号为：{{ current_user_phone }}</p>
|
|
<div class="form-group">
|
|
<div>新手机号：</div>
|
|
<input type="text" id="mobileNo" name="mobileNo" value title="手机号码" aria-label="手机号码" maxlength="11" placeholder="11位手机号">
|
|
</div>
|
|
</div>
|
|
<div id="modifyUsername" class="tabcontent" style="display:none">
|
|
<p>原用户名为：{{ current_username }}</p>
|
|
<div class="form-group">
|
|
<div>新用户名：</div>
|
|
<input type="text" id="username" name="username" placeholder="请输入新的用户名">
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<button type="submit" onclick="return submitForm()">确认</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</main>
|
|
<footer>
|
|
<p>© 2024 KJF航班订票. 保留所有权利。</p>
|
|
</footer>
|
|
|
|
<script src="{{ url_for('static', filename='js/checkInfo.js') }}"></script>
|
|
<script src="{{ url_for('static', filename='js/modify.js') }}"></script>
|
|
<script>
|
|
function submitForm() {
|
|
document.getElementById('encryptedPassword').value = md5(
|
|
document.getElementById('password').value
|
|
);
|
|
|
|
let modifyType = document.querySelector('.tablinks.active').textContent;
|
|
document.getElementById('modifyType').value = modifyType;
|
|
|
|
if (modifyType === '删除账户') {
|
|
return true;
|
|
} else if (modifyType === '修改密码') {
|
|
document.getElementById('encryptedNewPassword').value = md5(
|
|
document.getElementById('newPassword').value
|
|
);
|
|
return checkInfo.checkNewPassword();
|
|
} else if (modifyType === '修改手机号') {
|
|
return checkInfo.checkMobileNo();
|
|
} else if (modifyType === '修改用户名') {
|
|
return true;
|
|
}
|
|
}
|
|
|
|
function openTab(evt, tabName) {
|
|
var i, tabcontent, tablinks;
|
|
tabcontent = document.getElementsByClassName("tabcontent");
|
|
for (i = 0; i < tabcontent.length; i++) {
|
|
tabcontent[i].style.display = "none";
|
|
}
|
|
tablinks = document.getElementsByClassName("tablinks");
|
|
for (i = 0; i < tablinks.length; i++) {
|
|
tablinks[i].className = tablinks[i].className.replace(" active", "");
|
|
}
|
|
document.getElementById(tabName).style.display = "block";
|
|
evt.currentTarget.className += " active";
|
|
}
|
|
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
let activeTab = document.querySelector('.tablinks.active');
|
|
if (activeTab) {
|
|
openTab({currentTarget: activeTab}, activeTab.getAttribute('onclick').split("'")[1]);
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|