Initial commit: AIFO official portal web.
Add static site, shared layout, and Node dev server with standard .gitignore. Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
@@ -0,0 +1,414 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="description" content="Probably the most complete UI kit out there. Multiple functionalities and controls added, extended color palette and beautiful typography, designed as its own extended version of Bootstrap at the highest level of quality. ">
|
||||
<meta name="author" content="Webpixels">
|
||||
<title>Forgot password Page</title>
|
||||
<link type="text/css" href="../assets/vendor/icon/iconfont.css" rel="stylesheet">
|
||||
<link type="text/css" href="../assets/css/style.css" rel="stylesheet">
|
||||
<link type="text/css" href="../assets/css/theme.css" rel="stylesheet">
|
||||
<link type="text/css" href="../assets/css/index.css" rel="stylesheet">
|
||||
<link type="text/css" href="../assets/css/password.css" rel="stylesheet">
|
||||
|
||||
</head>
|
||||
<body class="aifo-bg-primary">
|
||||
|
||||
|
||||
|
||||
|
||||
<main class="auth-page " id="forgot-password">
|
||||
<!-- banner start -->
|
||||
|
||||
|
||||
<div class="auth-container">
|
||||
<div class="auth-card">
|
||||
<div class="logo-container">
|
||||
<a href="../index.html">
|
||||
<img src="../assets/images/brand/logo_1.svg" alt="" />
|
||||
</a>
|
||||
</div>
|
||||
<h1 class="auth-title" id="pageTitle">Forgot your password?</h1>
|
||||
<p class="auth-description" id="pageDescription">Enter your email address below, and we'll send you instructions to reset it.</p>
|
||||
<form id="forgotPasswordForm" novalidate>
|
||||
<div class="form-group"><label class="form-label" id="emailLabel">Email Address</label> <input type="email" class="form-control" id="emailInput" placeholder="Enter your email" required>
|
||||
<div class="invalid-feedback" id="emailError">
|
||||
Please enter a valid email address
|
||||
</div>
|
||||
</div><button type="submit" class="btn btn-primary" id="submitBtn"> <span id="submitText">Send reset instructions</span> </button>
|
||||
</form>
|
||||
<p class="signup-prompt"><span id="signupText">Not a member?</span>
|
||||
<a href="#" class="signup-link" id="signupLink" target="_blank" rel="noopener noreferrer">Create an account</a>
|
||||
</p>
|
||||
<a href="#" class="back-link" id="backLink" target="_blank" rel="noopener noreferrer">
|
||||
<span class="back-icon">
|
||||
<svg width="10" height="10" viewbox="0 0 10 10" fill="none"><path d="M6 1L2 5L6 9" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
|
||||
</svg>
|
||||
</span>
|
||||
<span id="backText">Back to Login</span>
|
||||
</a>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</main>
|
||||
|
||||
|
||||
<!-- Core -->
|
||||
<script src="../assets/vendor/jquery/jquery-3.7.1.min.js"></script>
|
||||
<script src="../assets/vendor/popper/popper.min.js"></script>
|
||||
<script src="../assets/js/bootstrap/bootstrap.min.js"></script>
|
||||
<!-- FontAwesome 5 -->
|
||||
<script src="../assets/vendor/fontawesome/js/fontawesome-all.min.js" defer></script>
|
||||
<!-- Page plugins -->
|
||||
<script src="../assets/vendor/bootstrap-select/js/bootstrap-select.min.js"></script>
|
||||
<script src="../assets/vendor/bootstrap-tagsinput/bootstrap-tagsinput.min.js"></script>
|
||||
<script src="../assets/vendor/input-mask/input-mask.min.js"></script>
|
||||
<script src="../assets/vendor/nouislider/js/nouislider.min.js"></script>
|
||||
<script src="../assets/vendor/textarea-autosize/textarea-autosize.min.js"></script>
|
||||
<!-- Theme JS -->
|
||||
<script src="../assets/js/theme.js"></script>
|
||||
<!-- Top code bar behavior -->
|
||||
|
||||
</body>
|
||||
<script>
|
||||
// ====================== 配置管理 ======================
|
||||
const defaultConfig = {
|
||||
page_title: "Forgot your password?",
|
||||
page_description: "Enter your email address below, and we'll send you instructions to reset it.",
|
||||
email_label: "Email Address",
|
||||
email_placeholder: "Enter your email",
|
||||
submit_button_text: "Send reset instructions",
|
||||
signup_text: "Not a member?",
|
||||
signup_link_text: "Create an account",
|
||||
back_link_text: "Back to Login",
|
||||
primary_color: "#F98715",
|
||||
text_color: "#F9F9F9",
|
||||
background_color: "#0a0a0a",
|
||||
card_background: "rgba(20,20,20,0.92)",
|
||||
secondary_text_color: "rgba(249,249,249,0.72)"
|
||||
};
|
||||
|
||||
// ====================== AJAX函数 ======================
|
||||
function processPasswordReset(email, nonce) {
|
||||
return new Promise((resolve, reject) => {
|
||||
// 这里是测试用的模拟数据，实际使用时需要替换为真实的AJAX调用
|
||||
// 实际URL应该是：url: '<?php echo admin_url('admin-ajax.php'); ?>',
|
||||
|
||||
console.log('发送AJAX请求:', { email, nonce });
|
||||
|
||||
// 模拟AJAX延迟
|
||||
setTimeout(() => {
|
||||
// 测试数据 - 模拟不同类型的用户响应
|
||||
const testUsers = {
|
||||
'admin@aifo.com': {
|
||||
success: true,
|
||||
data: {
|
||||
message: 'Administrator password reset instructions sent. Security notifications have been logged.',
|
||||
user_data: {
|
||||
user_id: 1,
|
||||
email: 'admin@aifo.com',
|
||||
display_name: 'Admin User',
|
||||
user_type: 'admin',
|
||||
account_since: 'Jan 2023',
|
||||
is_affiliate: false,
|
||||
is_admin: true,
|
||||
is_premium: false
|
||||
},
|
||||
timestamp: new Date().toISOString()
|
||||
}
|
||||
},
|
||||
'affiliate@aifo.com': {
|
||||
success: true,
|
||||
data: {
|
||||
message: 'Password reset instructions have been sent to your affiliate email. Check your inbox for special affiliate support.',
|
||||
user_data: {
|
||||
user_id: 2,
|
||||
email: 'affiliate@aifo.com',
|
||||
display_name: 'Affiliate Partner',
|
||||
user_type: 'affiliate',
|
||||
account_since: 'Mar 2023',
|
||||
is_affiliate: true,
|
||||
is_admin: false,
|
||||
is_premium: false,
|
||||
affiliate_code: 'AFF12345',
|
||||
affiliate_tier: 'Gold',
|
||||
affiliate_commission: '15%'
|
||||
},
|
||||
timestamp: new Date().toISOString()
|
||||
}
|
||||
},
|
||||
'premium@aifo.com': {
|
||||
success: true,
|
||||
data: {
|
||||
message: 'Premium member reset instructions sent. Priority support is available if needed.',
|
||||
user_data: {
|
||||
user_id: 3,
|
||||
email: 'premium@aifo.com',
|
||||
display_name: 'Premium Member',
|
||||
user_type: 'premium',
|
||||
account_since: 'Jun 2023',
|
||||
is_affiliate: false,
|
||||
is_admin: false,
|
||||
is_premium: true,
|
||||
premium_expiry: 'Dec 2024'
|
||||
},
|
||||
timestamp: new Date().toISOString()
|
||||
}
|
||||
},
|
||||
'user@example.com': {
|
||||
success: true,
|
||||
data: {
|
||||
message: 'Password reset instructions have been sent to your email. Please check your inbox.',
|
||||
user_data: {
|
||||
user_id: 4,
|
||||
email: 'user@example.com',
|
||||
display_name: 'Regular User',
|
||||
user_type: 'regular',
|
||||
account_since: 'Aug 2023',
|
||||
is_affiliate: false,
|
||||
is_admin: false,
|
||||
is_premium: false
|
||||
},
|
||||
timestamp: new Date().toISOString()
|
||||
}
|
||||
},
|
||||
'notfound@example.com': {
|
||||
success: false,
|
||||
data: 'No account found with this email address'
|
||||
},
|
||||
'error@example.com': {
|
||||
success: false,
|
||||
data: 'Server error. Please try again later.'
|
||||
}
|
||||
};
|
||||
|
||||
const response = testUsers[email] || testUsers['user@example.com'];
|
||||
|
||||
if (response.success) {
|
||||
resolve(response.data);
|
||||
} else {
|
||||
reject(response.data);
|
||||
}
|
||||
}, 1500); // 模拟1.5秒网络延迟
|
||||
});
|
||||
}
|
||||
|
||||
// ====================== 工具函数 ======================
|
||||
function showMessage(type, message, duration = 4000) {
|
||||
const alertClass = type === 'success' ? 'alert-success' : 'alert-danger';
|
||||
const bgColor = type === 'success' ? 'rgba(76, 175, 80, 0.15)' : 'rgba(220, 53, 69, 0.15)';
|
||||
const borderColor = type === 'success' ? 'rgba(76, 175, 80, 0.3)' : 'rgba(220, 53, 69, 0.3)';
|
||||
const textColor = type === 'success' ? '#81c784' : '#e57373';
|
||||
|
||||
const $message = $('<div class="alert ' + alertClass + ' mt-3" role="alert" style="background: ' + bgColor + '; border: 1px solid ' + borderColor + '; color: ' + textColor + '; border-radius: 8px;">' + message + '</div>');
|
||||
|
||||
$('#forgotPasswordForm').after($message);
|
||||
|
||||
setTimeout(function() {
|
||||
$message.fadeOut(400, function() {
|
||||
$(this).remove();
|
||||
});
|
||||
}, duration);
|
||||
}
|
||||
|
||||
function showUserTypeInfo(userData) {
|
||||
let typeText = '';
|
||||
let typeColor = '';
|
||||
let iconHtml = '';
|
||||
let detailsHtml = '';
|
||||
|
||||
// 根据用户类型设置不同的样式和内容
|
||||
switch(userData.user_type) {
|
||||
case 'affiliate':
|
||||
typeText = 'Affiliate User';
|
||||
typeColor = '#28a745';
|
||||
iconHtml = '<span style="background:' + typeColor + '; width:100%; height:100%; border-radius:50%; display:block;"></span>';
|
||||
|
||||
detailsHtml = '<div class="mt-1">';
|
||||
if (userData.affiliate_code) {
|
||||
detailsHtml += '<div>Code: ' + userData.affiliate_code + '</div>';
|
||||
}
|
||||
if (userData.affiliate_tier) {
|
||||
detailsHtml += '<div>Tier: ' + userData.affiliate_tier + '</div>';
|
||||
}
|
||||
if (userData.affiliate_commission) {
|
||||
detailsHtml += '<div>Commission: ' + userData.affiliate_commission + '</div>';
|
||||
}
|
||||
detailsHtml += '<div class="text-success">✓ Special affiliate instructions sent</div>';
|
||||
detailsHtml += '</div>';
|
||||
break;
|
||||
|
||||
case 'admin':
|
||||
typeText = 'Administrator';
|
||||
typeColor = '#dc3545';
|
||||
iconHtml = '<span style="background:' + typeColor + '; width:100%; height:100%; border-radius:50%; display:block;"></span>';
|
||||
detailsHtml = '<div class="mt-1 text-danger">Administrative security protocols applied</div>';
|
||||
break;
|
||||
|
||||
case 'premium':
|
||||
typeText = 'Premium User';
|
||||
typeColor = '#ffc107';
|
||||
iconHtml = '<span style="background:' + typeColor + '; width:100%; height:100%; border-radius:50%; display:block;"></span>';
|
||||
detailsHtml = '<div class="mt-1 text-warning">Premium member support activated</div>';
|
||||
if (userData.premium_expiry) {
|
||||
detailsHtml += '<div>Expires: ' + userData.premium_expiry + '</div>';
|
||||
}
|
||||
break;
|
||||
|
||||
default:
|
||||
typeText = 'Regular User';
|
||||
typeColor = '#6c757d';
|
||||
iconHtml = '<span style="background:' + typeColor + '; width:100%; height:100%; border-radius:50%; display:block;"></span>';
|
||||
detailsHtml = '<div class="mt-1">Standard reset instructions sent</div>';
|
||||
}
|
||||
|
||||
// 添加注册时间
|
||||
if (userData.account_since) {
|
||||
detailsHtml += '<div class="mt-1">Member since ' + userData.account_since + '</div>';
|
||||
}
|
||||
|
||||
// 更新显示
|
||||
$('#userTypeIcon').html(iconHtml);
|
||||
$('#userTypeDisplay').html('<span style="color:' + typeColor + '">' + typeText + '</span>');
|
||||
$('#userDetails').html(detailsHtml);
|
||||
$('#userInfo').fadeIn();
|
||||
}
|
||||
|
||||
// ====================== 主逻辑 ======================
|
||||
$(document).ready(function() {
|
||||
// 初始化配置
|
||||
if (window.elementSdk) {
|
||||
window.elementSdk.init({
|
||||
defaultConfig: defaultConfig,
|
||||
onConfigChange: onConfigChange,
|
||||
mapToCapabilities: (config) => ({
|
||||
recolorables: [
|
||||
{
|
||||
get: () => config.primary_color || defaultConfig.primary_color,
|
||||
set: (value) => {
|
||||
config.primary_color = value;
|
||||
window.elementSdk.setConfig({ primary_color: value });
|
||||
}
|
||||
}
|
||||
]
|
||||
})
|
||||
});
|
||||
}
|
||||
|
||||
// 配置更新函数
|
||||
function onConfigChange(config) {
|
||||
const title = config.page_title || defaultConfig.page_title;
|
||||
const description = config.page_description || defaultConfig.page_description;
|
||||
const emailLabel = config.email_label || defaultConfig.email_label;
|
||||
const emailPlaceholder = config.email_placeholder || defaultConfig.email_placeholder;
|
||||
const submitText = config.submit_button_text || defaultConfig.submit_button_text;
|
||||
const signupText = config.signup_text || defaultConfig.signup_text;
|
||||
const signupLinkText = config.signup_link_text || defaultConfig.signup_link_text;
|
||||
const backText = config.back_link_text || defaultConfig.back_link_text;
|
||||
|
||||
document.getElementById('pageTitle').textContent = title;
|
||||
document.getElementById('pageDescription').textContent = description;
|
||||
document.getElementById('emailLabel').textContent = emailLabel;
|
||||
document.getElementById('emailInput').placeholder = emailPlaceholder;
|
||||
document.getElementById('submitText').textContent = submitText;
|
||||
document.getElementById('signupText').textContent = signupText;
|
||||
document.getElementById('signupLink').textContent = signupLinkText;
|
||||
document.getElementById('backText').textContent = backText;
|
||||
|
||||
const primaryColor = config.primary_color || defaultConfig.primary_color;
|
||||
document.querySelector('.btn-primary').style.background = primaryColor;
|
||||
document.querySelector('.signup-link').style.color = primaryColor;
|
||||
document.querySelector('.back-icon').style.background = primaryColor;
|
||||
}
|
||||
|
||||
// 初始化配置
|
||||
onConfigChange(defaultConfig);
|
||||
|
||||
// 表单提交处理
|
||||
$('#forgotPasswordForm').on('submit', async function(e) {
|
||||
e.preventDefault();
|
||||
|
||||
const email = $('#emailInput').val().trim();
|
||||
const nonce = $('#nonce').val();
|
||||
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
|
||||
|
||||
// 清除之前的错误状态
|
||||
$('#emailError').removeClass('show');
|
||||
$('#emailInput').removeClass('is-invalid');
|
||||
$('#userInfo').hide();
|
||||
|
||||
// 验证邮箱格式
|
||||
if (!email || !emailRegex.test(email)) {
|
||||
$('#emailInput').addClass('is-invalid');
|
||||
$('#emailError').addClass('show');
|
||||
return;
|
||||
}
|
||||
|
||||
// 禁用提交按钮并显示加载状态
|
||||
const $submitBtn = $('#submitBtn');
|
||||
const $submitText = $('#submitText');
|
||||
const originalText = $submitText.text();
|
||||
|
||||
$submitBtn.prop('disabled', true);
|
||||
$submitText.html('<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> Processing...');
|
||||
|
||||
try {
|
||||
// 单次AJAX请求：检查用户并发送重置邮件
|
||||
const result = await processPasswordReset(email, nonce);
|
||||
|
||||
// 显示用户类型信息
|
||||
if (result.user_data) {
|
||||
showUserTypeInfo(result.user_data);
|
||||
}
|
||||
|
||||
// 显示成功消息
|
||||
showMessage('success', result.message || 'Reset instructions sent! Please check your email.');
|
||||
|
||||
// 清空表单
|
||||
$('#emailInput').val('');
|
||||
|
||||
} catch (error) {
|
||||
// 显示错误消息
|
||||
showMessage('error', error || 'An error occurred. Please try again.');
|
||||
} finally {
|
||||
// 恢复按钮状态
|
||||
$submitBtn.prop('disabled', false);
|
||||
$submitText.text(originalText);
|
||||
}
|
||||
});
|
||||
|
||||
// 邮箱输入时清除错误状态
|
||||
$('#emailInput').on('input', function() {
|
||||
if ($(this).hasClass('is-invalid')) {
|
||||
$(this).removeClass('is-invalid');
|
||||
$('#emailError').removeClass('show');
|
||||
}
|
||||
$('#userInfo').hide();
|
||||
});
|
||||
|
||||
// 测试链接点击事件
|
||||
$('#signupLink').on('click', function(e) {
|
||||
e.preventDefault();
|
||||
alert('Create account link clicked');
|
||||
});
|
||||
|
||||
$('#backLink').on('click', function(e) {
|
||||
e.preventDefault();
|
||||
alert('Back to login link clicked');
|
||||
});
|
||||
|
||||
// 添加测试提示
|
||||
console.log('🔍 测试提示：尝试使用以下测试邮箱：');
|
||||
console.log('• admin@aifo.com - 管理员用户');
|
||||
console.log('• affiliate@aifo.com - Affiliate用户');
|
||||
console.log('• premium@aifo.com - Premium用户');
|
||||
console.log('• user@example.com - 普通用户');
|
||||
console.log('• notfound@example.com - 用户不存在');
|
||||
console.log('• error@example.com - 服务器错误');
|
||||
});
|
||||
</script>
|
||||
</html>
|
||||
Reference in New Issue
Block a user