Client/server
5
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

init: 1.0.0

Browse Source
This commit is contained in:
Chang lue Tsen
2025-04-25 12:08:29 +09:00
commit 8addcc584b
1031 changed files with 76472 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
initialize/templates/index.html
+469
View File
@@ -0,0 +1,469 @@
<!DOCTYPE html>
<html lang="en">
<head>
<!-- 头部内容 -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>PPanel - Application Initialization</title>
<!-- 引入 Tailwind CSS -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- Tailwind CSS 配置 -->
<script>
tailwind.config = {
darkMode: ["class"],
theme: {
container: { center: true, padding: "2rem" },
extend: {
colors: {
border: "hsl(var(--border))",
input: "hsl(var(--input))",
ring: "hsl(var(--ring))",
background: "hsl(var(--background))",
foreground: "hsl(var(--foreground))",
primary: { DEFAULT: "hsl(var(--primary))", foreground: "hsl(var(--primary-foreground))" },
destructive: { DEFAULT: "hsl(var(--destructive))", foreground: "hsl(var(--destructive-foreground))" },
},
borderRadius: { lg: "var(--radius)", md: "calc(var(--radius) - 2px)", sm: "calc(var(--radius) - 4px)" },
},
},
}
</script>
<!-- 自定义样式 -->
<style>
:root {
--background: 0 0% 100%;
--foreground: 222.2 84% 4.9%;
--border: 214.3 31.8% 91.4%;
--input: 214.3 31.8% 91.4%;
--ring: 221.2 83.2% 53.3%;
--radius: 0.5rem;
--primary: 221.2 83.2% 53.3%;
--primary-foreground: 210 40% 98%;
--destructive: 346.8 77.2% 49.8%;
--destructive-foreground: 355.7 100% 97.3%;
}
.dark {
--background: 222.2 84% 4.9%;
--foreground: 210 40% 98%;
}
body {
background-color: hsl(var(--background));
color: hsl(var(--foreground));
}
</style>
</head>
<body class="min-h-screen font-sans antialiased">
<div id="appContainer" class="container mx-auto p-4 flex flex-col items-center min-h-screen">
<div class="w-full max-w-2xl space-y-6">
<!-- 设置卡片 -->
<div id="setupCard" class="p-6 space-y-6 bg-white rounded-lg border">
<div class="flex justify-between items-center">
<h1 id="title" class="text-3xl font-bold">Welcome to PPanel Setup</h1>
<button onclick="switchLanguage()" id="langSwitch" class="h-10 px-4 py-2 border rounded-md text-sm font-medium bg-background hover:bg-accent hover:text-accent-foreground">中文</button>
</div>
<p id="description" class="text-gray-600 !mt-0">Let's get your PPanel application up and running. Please provide the necessary information below.</p>
<form id="setupForm" class="space-y-6" onsubmit="handleSubmit(event)">
<!-- 管理员详情 -->
<div class="space-y-4">
<h2 id="adminInfoTitle" class="font-bold text-xl">Administrator Details</h2>
<div class="grid grid-cols-2 gap-4">
<div>
<label for="adminEmail" id="labelAdminEmail" class="text-sm font-medium">Administrator Email</label>
<input type="email" id="adminEmail" name="adminEmail" required class="input-field mt-1 block w-full rounded-md border px-3 py-2" placeholder="Enter administrator email" data-placeholder-en="Enter administrator email" data-placeholder-zh="请输入管理员邮箱" oninput="validateInput(this)">
<span id="adminEmailError" class="text-red-500 text-sm mt-1 hidden">Invalid email address.</span>
</div>
<div>
<label for="adminPassword" id="labelAdminPassword" class="text-sm font-medium">Administrator Password</label>
<input type="password" id="adminPassword" name="adminPassword" required minlength="6" class="input-field mt-1 block w-full rounded-md border px-3 py-2" placeholder="Enter administrator password" data-placeholder-en="Enter administrator password" data-placeholder-zh="请输入管理员密码" oninput="validateInput(this)">
<span id="adminPasswordError" class="text-red-500 text-sm mt-1 hidden">Password must be at least 6 characters.</span>
</div>
</div>
</div>
<!-- MySQL 数据库设置 -->
<div class="space-y-4">
<div class="flex justify-between items-center">
<h2 id="mysqlInfoTitle" class="font-bold text-xl">MySQL Database Setup</h2>
<button type="button" onclick="testConnection('mysql')" id="testMySQLButton" class="h-10 px-4 py-2 border rounded-md text-sm font-medium bg-background hover:bg-accent hover:text-accent-foreground">Test MySQL Connection</button>
</div>
<div class="grid grid-cols-2 gap-4">
<div>
<label for="mysqlHost" id="labelMysqlHost" class="text-sm font-medium">Database Host</label>
<input type="text" id="mysqlHost" name="mysqlHost" required class="input-field mt-1 block w-full rounded-md border px-3 py-2" value="localhost" placeholder="Enter database host" data-placeholder-en="Enter database host" data-placeholder-zh="请输入数据库主机">
<span id="mysqlHostError" class="text-red-500 text-sm mt-1 hidden">Please enter a valid host.</span>
</div>
<div>
<label for="mysqlPort" id="labelMysqlPort" class="text-sm font-medium">Database Port</label>
<input type="number" id="mysqlPort" name="mysqlPort" required min="1" max="65535" class="input-field mt-1 block w-full rounded-md border px-3 py-2" value="3306" placeholder="Enter database port" data-placeholder-en="Enter database port" data-placeholder-zh="请输入数据库端口">
<span id="mysqlPortError" class="text-red-500 text-sm mt-1 hidden">Please enter a valid port number.</span>
</div>
<div>
<label for="mysqlUser" id="labelMysqlUser" class="text-sm font-medium">Database User</label>
<input type="text" id="mysqlUser" name="mysqlUser" required class="input-field mt-1 block w-full rounded-md border px-3 py-2" value="root" placeholder="Enter database user" data-placeholder-en="Enter database user" data-placeholder-zh="请输入数据库用户名">
<span id="mysqlUserError" class="text-red-500 text-sm mt-1 hidden">Please enter a username.</span>
</div>
<div>
<label for="mysqlPassword" id="labelMysqlPassword" class="text-sm font-medium">Database Password</label>
<input type="password" id="mysqlPassword" name="mysqlPassword" class="input-field mt-1 block w-full rounded-md border px-3 py-2" placeholder="Enter database password" data-placeholder-en="Enter database password" data-placeholder-zh="请输入数据库密码">
</div>
<div>
<label for="mysqlDatabase" id="labelMysqlDatabase" class="text-sm font-medium">Database Name</label>
<input type="text" id="mysqlDatabase" name="mysqlDatabase" required class="input-field mt-1 block w-full rounded-md border px-3 py-2" value="ppanel_db" placeholder="Enter database name" data-placeholder-en="Enter database name" data-placeholder-zh="请输入数据库名称">
<span id="mysqlDatabaseError" class="text-red-500 text-sm mt-1 hidden">Please enter a database name.</span>
</div>
</div>
</div>
<!-- Redis 缓存设置 -->
<div class="space-y-4">
<div class="flex justify-between items-center">
<h2 id="redisInfoTitle" class="font-bold text-xl">Redis Cache Setup</h2>
<button type="button" onclick="testConnection('redis')" id="testRedisButton" class="h-10 px-4 py-2 border rounded-md text-sm font-medium bg-background hover:bg-accent hover:text-accent-foreground">Test Redis Connection</button>
</div>
<div class="grid grid-cols-2 gap-4">
<div>
<label for="redisHost" id="labelRedisHost" class="text-sm font-medium">Redis Host</label>
<input type="text" id="redisHost" name="redisHost" required class="input-field mt-1 block w-full rounded-md border px-3 py-2" value="127.0.0.1" placeholder="Enter Redis host" data-placeholder-en="Enter Redis host" data-placeholder-zh="请输入 Redis 主机">
<span id="redisHostError" class="text-red-500 text-sm mt-1 hidden">Please enter a valid host.</span>
</div>
<div>
<label for="redisPort" id="labelRedisPort" class="text-sm font-medium">Redis Port</label>
<input type="number" id="redisPort" name="redisPort" required min="1" max="65535" class="input-field mt-1 block w-full rounded-md border px-3 py-2" value="6379" placeholder="Enter Redis port" data-placeholder-en="Enter Redis port" data-placeholder-zh="请输入 Redis 端口">
<span id="redisPortError" class="text-red-500 text-sm mt-1 hidden">Please enter a valid port number.</span>
</div>
<div>
<label for="redisPassword" id="labelRedisPassword" class="text-sm font-medium">Redis Password</label>
<input type="password" id="redisPassword" name="redisPassword" class="input-field mt-1 block w-full rounded-md border px-3 py-2" placeholder="Enter Redis password (optional)" data-placeholder-en="Enter Redis password (optional)" data-placeholder-zh="请输入 Redis 密码（可选）">
</div>
</div>
</div>
<!-- 提交按钮 -->
<button type="submit" id="submitButton" disabled class="w-full h-10 px-4 py-2 bg-primary text-white rounded-md opacity-50 cursor-not-allowed">Start Initialization</button>
</form>
</div>
</div>
</div>
<!-- 安装中卡片 -->
<div id="installingCard" class="fixed inset-0 flex items-center justify-center bg-white p-6 hidden">
<div class="w-full max-w-md space-y-6 text-center">
<h1 id="installingTitle" class="text-3xl font-bold">Installing...</h1>
<p id="installingMessage">Please wait while we initialize your application.</p>
<div class="flex justify-center">
<svg class="animate-spin h-10 w-10 text-primary" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v8z"></path>
</svg>
</div>
</div>
</div>
<!-- 安装完成卡片 -->
<div id="installationCompleteCard" class="fixed inset-0 flex items-center justify-center bg-white p-6 hidden">
<div class="w-full max-w-md space-y-6 text-center">
<h1 id="installationCompleteTitle" class="text-3xl font-bold">Installation Complete</h1>
<p id="installationCompleteMessage">You can now close this page.</p>
</div>
</div>
<!-- 已初始化页面 -->
<div id="alreadyInitializedCard" class="fixed inset-0 flex items-center justify-center bg-white p-6 hidden">
<div class="w-full max-w-md space-y-6 text-center">
<h1 id="alreadyInitializedTitle" class="text-3xl font-bold">Already Initialized</h1>
<p id="alreadyInitializedMessage">Your PPanel application has already been initialized.</p>
</div>
</div>
<!-- 对话框 -->
<div id="dialog" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden">
<div class="bg-white rounded-lg p-6 w-96">
<h2 id="dialogTitle" class="text-xl font-bold mb-4"></h2>
<p id="dialogMessage" class="mb-4"></p>
<div class="flex justify-end">
<button onclick="closeDialog()" class="h-10 px-4 py-2 bg-primary text-white rounded-md">Close</button>
</div>
</div>
</div>
<!-- JavaScript -->
<script>
let currentLang = 'en';
const translations = {
en: {
// 英文翻译内容
title: 'Welcome to PPanel Setup',
description: "Let's get your PPanel application up and running. Please provide the necessary information below.",
adminInfoTitle: 'Administrator Details',
mysqlInfoTitle: 'MySQL Database Setup',
redisInfoTitle: 'Redis Cache Setup',
adminEmail: 'Administrator Email',
adminPassword: 'Administrator Password',
mysqlHost: 'Database Host',
mysqlPort: 'Database Port',
mysqlUser: 'Database User',
mysqlPassword: 'Database Password',
mysqlDatabase: 'Database Name',
redisHost: 'Redis Host',
redisPort: 'Redis Port',
redisPassword: 'Redis Password',
submit: 'Start Initialization',
switchLang: '中文',
testMySQLConnection: 'Test MySQL Connection',
testRedisConnection: 'Test Redis Connection',
connectionSuccess: 'Connection Successful',
connectionError: 'Connection Failed',
initializationError: 'Initialization Error',
initializationErrorMessage: 'An error occurred during initialization. Please try again.',
installingTitle: 'Installing...',
installingMessage: 'Please wait while we initialize your application.',
installationCompleteTitle: 'Installation Complete',
installationCompleteMessage: 'You can now close this page.',
proceedButton: 'Go to Application',
mysqlConnectionSuccess: 'Successfully connected to the MySQL database.',
mysqlConnectionError: 'Failed to connect to the MySQL database. Please check your settings.',
redisConnectionSuccess: 'Successfully connected to the Redis server.',
redisConnectionError: 'Failed to connect to the Redis server. Please check your settings.',
alreadyInitializedTitle: 'Already Initialized',
alreadyInitializedMessage: 'Your PPanel application has already been initialized.',
invalidEmail: 'Invalid email address.',
invalidPassword: 'Password must be at least 6 characters.',
},
zh: {
// 中文翻译内容
title: '欢迎使用 PPanel 设置向导',
description: '让我们一起启动您的 PPanel 应用程序。请提供以下必要信息。',
adminInfoTitle: '管理员详情',
mysqlInfoTitle: 'MySQL 数据库设置',
redisInfoTitle: 'Redis 缓存设置',
adminEmail: '管理员邮箱',
adminPassword: '管理员密码',
mysqlHost: '数据库主机',
mysqlPort: '数据库端口',
mysqlUser: '数据库用户',
mysqlPassword: '数据库密码',
mysqlDatabase: '数据库名称',
redisHost: 'Redis 主机',
redisPort: 'Redis 端口',
redisPassword: 'Redis 密码',
submit: '开始初始化',
switchLang: 'English',
testMySQLConnection: '测试 MySQL 连接',
testRedisConnection: '测试 Redis 连接',
connectionSuccess: '连接成功',
connectionError: '连接失败',
initializationError: '初始化错误',
initializationErrorMessage: '初始化过程中发生错误。请重试。',
installingTitle: '正在安装...',
installingMessage: '请稍候，我们正在初始化您的应用程序。',
installationCompleteTitle: '安装完成',
installationCompleteMessage: '您现在可以关闭此页面。',
proceedButton: '前往应用程序',
mysqlConnectionSuccess: '成功连接到 MySQL 数据库。',
mysqlConnectionError: '无法连接到 MySQL 数据库。请检查您的设置。',
redisConnectionSuccess: '成功连接到 Redis 服务器。',
redisConnectionError: '无法连接到 Redis 服务器。请检查您的设置。',
alreadyInitializedTitle: '已初始化',
alreadyInitializedMessage: '您的 PPanel 应用程序已被初始化。',
invalidEmail: '无效的邮箱地址。',
invalidPassword: '密码至少需要6个字符。',
}
};
function switchLanguage() {
currentLang = currentLang === 'en' ? 'zh' : 'en';
updateTexts();
}
function updateTexts() {
const t = translations[currentLang];
document.getElementById('title').textContent = t.title;
document.getElementById('description').textContent = t.description;
document.getElementById('adminInfoTitle').textContent = t.adminInfoTitle;
document.getElementById('mysqlInfoTitle').textContent = t.mysqlInfoTitle;
document.getElementById('redisInfoTitle').textContent = t.redisInfoTitle;
document.getElementById('labelAdminEmail').textContent = t.adminEmail;
document.getElementById('labelAdminPassword').textContent = t.adminPassword;
document.getElementById('labelMysqlHost').textContent = t.mysqlHost;
document.getElementById('labelMysqlPort').textContent = t.mysqlPort;
document.getElementById('labelMysqlUser').textContent = t.mysqlUser;
document.getElementById('labelMysqlPassword').textContent = t.mysqlPassword;
document.getElementById('labelMysqlDatabase').textContent = t.mysqlDatabase;
document.getElementById('labelRedisHost').textContent = t.redisHost;
document.getElementById('labelRedisPort').textContent = t.redisPort;
document.getElementById('labelRedisPassword').textContent = t.redisPassword;
document.getElementById('submitButton').textContent = t.submit;
document.getElementById('langSwitch').textContent = t.switchLang;
document.getElementById('testMySQLButton').textContent = t.testMySQLConnection;
document.getElementById('testRedisButton').textContent = t.testRedisConnection;
document.getElementById('installingTitle').textContent = t.installingTitle;
document.getElementById('installingMessage').textContent = t.installingMessage;
document.getElementById('installationCompleteTitle').textContent = t.installationCompleteTitle;
document.getElementById('installationCompleteMessage').textContent = t.installationCompleteMessage;
document.getElementById('alreadyInitializedTitle').textContent = t.alreadyInitializedTitle;
document.getElementById('alreadyInitializedMessage').textContent = t.alreadyInitializedMessage;
// 更新 placeholder 文本
const inputs = document.querySelectorAll('.input-field');
inputs.forEach((input) => {
const placeholder = input.getAttribute(`data-placeholder-${currentLang}`);
if (placeholder) {
input.setAttribute('placeholder', placeholder);
}
});
}
function checkInitialization() {
const isInitialized = false; // 需要从服务器获取实际状态
if (isInitialized) {
document.getElementById('appContainer').classList.add('hidden');
document.getElementById('alreadyInitializedCard').classList.remove('hidden');
}
}
function testConnection(type) {
const t = translations[currentLang];
let data = {};
let url = '';
if (type === 'mysql') {
data = {
host: document.getElementById('mysqlHost').value,
port: document.getElementById('mysqlPort').value,
user: document.getElementById('mysqlUser').value,
password: document.getElementById('mysqlPassword').value,
database: document.getElementById('mysqlDatabase').value,
};
url = '/init/mysql/test';
} else if (type === 'redis') {
data = {
host: document.getElementById('redisHost').value,
port: document.getElementById('redisPort').value,
password: document.getElementById('redisPassword').value,
};
url = '/init/redis/test';
}
fetch(url, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(data),
})
.then(response => response.json())
.then(result => {
console.log(result);
if (result.code === 200 && result.status) {
showDialog(t.connectionSuccess, result.msg || (type === 'mysql' ? t.mysqlConnectionSuccess : t.redisConnectionSuccess));
} else {
showDialog(t.connectionError, result.msg || (type === 'mysql' ? t.mysqlConnectionError : t.redisConnectionError));
}
})
.catch(error => {
console.error('Error:', error);
showDialog(t.connectionError, t.initializationErrorMessage);
});
}
function handleSubmit(event) {
event.preventDefault();
const form = document.getElementById('setupForm');
if (!form.checkValidity()) {
form.reportValidity();
return;
}
const t = translations[currentLang];
const formData = new FormData(form);
const data = Object.fromEntries(formData.entries());
// 显示安装中界面
document.getElementById('setupCard').classList.add('hidden');
document.getElementById('installingCard').classList.remove('hidden');
// 发送初始化请求
fetch('/init/config', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(data),
})
.then(response => response.json())
.then(result => {
document.getElementById('installingCard').classList.add('hidden');
if (result.code === 200 && result.status) {
document.getElementById('installationCompleteCard').classList.remove('hidden');
} else {
showDialog(t.initializationError, result.msg || t.initializationErrorMessage);
document.getElementById('setupCard').classList.remove('hidden');
}
})
.catch(error => {
console.error('Error:', error);
document.getElementById('installingCard').classList.add('hidden');
showDialog(t.initializationError, t.initializationErrorMessage);
document.getElementById('setupCard').classList.remove('hidden');
});
}
function showDialog(title, message) {
document.getElementById('dialogTitle').textContent = title;
document.getElementById('dialogMessage').textContent = message;
document.getElementById('dialog').classList.remove('hidden');
}
function closeDialog() {
document.getElementById('dialog').classList.add('hidden');
}
// 实时表单校验
function validateInput(input) {
const errorSpan = document.getElementById(input.id + 'Error');
if (input.type === 'email') {
// 邮箱格式验证
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (!emailRegex.test(input.value)) {
errorSpan.textContent = translations[currentLang].invalidEmail;
errorSpan.classList.remove('hidden');
input.setCustomValidity(translations[currentLang].invalidEmail);
} else {
input.setCustomValidity('');
errorSpan.classList.add('hidden');
}
} else if (input.validity.valid) {
errorSpan.classList.add('hidden');
input.setCustomValidity('');
} else {
errorSpan.classList.remove('hidden');
}
updateSubmitButtonState();
}
function updateSubmitButtonState() {
const form = document.getElementById('setupForm');
const submitButton = document.getElementById('submitButton');
if (form.checkValidity()) {
submitButton.disabled = false;
submitButton.classList.remove('opacity-50', 'cursor-not-allowed');
} else {
submitButton.disabled = true;
submitButton.classList.add('opacity-50', 'cursor-not-allowed');
}
}
// 添加事件监听器
document.addEventListener('DOMContentLoaded', () => {
const inputs = document.querySelectorAll('.input-field');
inputs.forEach((input) => {
input.addEventListener('input', () => validateInput(input));
});
updateSubmitButtonState();
updateTexts();
checkInitialization();
});
</script>
</body>
</html>