<!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>