@chenpu17/tcpmapping 2.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -0,0 +1,207 @@
1
+ <!DOCTYPE html>
2
+ <html lang="zh-CN">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>TCP转发服务器 - 登录</title>
7
+ <style>
8
+ * {
9
+ margin: 0;
10
+ padding: 0;
11
+ box-sizing: border-box;
12
+ }
13
+
14
+ body {
15
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
16
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
17
+ height: 100vh;
18
+ display: flex;
19
+ align-items: center;
20
+ justify-content: center;
21
+ }
22
+
23
+ .login-container {
24
+ background: white;
25
+ padding: 2rem;
26
+ border-radius: 10px;
27
+ box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
28
+ width: 100%;
29
+ max-width: 400px;
30
+ }
31
+
32
+ .login-header {
33
+ text-align: center;
34
+ margin-bottom: 2rem;
35
+ }
36
+
37
+ .login-header h1 {
38
+ color: #333;
39
+ font-size: 24px;
40
+ margin-bottom: 0.5rem;
41
+ }
42
+
43
+ .login-header p {
44
+ color: #666;
45
+ font-size: 14px;
46
+ }
47
+
48
+ .form-group {
49
+ margin-bottom: 1.5rem;
50
+ }
51
+
52
+ .form-group label {
53
+ display: block;
54
+ margin-bottom: 0.5rem;
55
+ color: #333;
56
+ font-weight: 500;
57
+ }
58
+
59
+ .form-group input {
60
+ width: 100%;
61
+ padding: 0.75rem;
62
+ border: 1px solid #ddd;
63
+ border-radius: 5px;
64
+ font-size: 16px;
65
+ transition: border-color 0.3s;
66
+ }
67
+
68
+ .form-group input:focus {
69
+ outline: none;
70
+ border-color: #667eea;
71
+ box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
72
+ }
73
+
74
+ .login-btn {
75
+ width: 100%;
76
+ padding: 0.75rem;
77
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
78
+ color: white;
79
+ border: none;
80
+ border-radius: 5px;
81
+ font-size: 16px;
82
+ font-weight: 600;
83
+ cursor: pointer;
84
+ transition: transform 0.2s;
85
+ }
86
+
87
+ .login-btn:hover {
88
+ transform: translateY(-2px);
89
+ }
90
+
91
+ .login-btn:disabled {
92
+ opacity: 0.6;
93
+ cursor: not-allowed;
94
+ transform: none;
95
+ }
96
+
97
+ .error-message {
98
+ color: #e74c3c;
99
+ font-size: 14px;
100
+ margin-top: 0.5rem;
101
+ display: none;
102
+ }
103
+
104
+ .success-message {
105
+ color: #27ae60;
106
+ font-size: 14px;
107
+ margin-top: 0.5rem;
108
+ display: none;
109
+ }
110
+
111
+ .default-info {
112
+ background: #f8f9fa;
113
+ border: 1px solid #e9ecef;
114
+ border-radius: 5px;
115
+ padding: 1rem;
116
+ margin-top: 1rem;
117
+ font-size: 14px;
118
+ color: #666;
119
+ }
120
+
121
+ .default-info strong {
122
+ color: #333;
123
+ }
124
+ </style>
125
+ </head>
126
+ <body>
127
+ <div class="login-container">
128
+ <div class="login-header">
129
+ <h1>TCP转发服务器</h1>
130
+ <p>管理界面登录</p>
131
+ </div>
132
+
133
+ <form id="loginForm">
134
+ <div class="form-group">
135
+ <label for="username">用户名</label>
136
+ <input type="text" id="username" name="username" required>
137
+ </div>
138
+
139
+ <div class="form-group">
140
+ <label for="password">密码</label>
141
+ <input type="password" id="password" name="password" required>
142
+ </div>
143
+
144
+ <button type="submit" class="login-btn" id="loginBtn">登录</button>
145
+
146
+ <div class="error-message" id="errorMessage"></div>
147
+ <div class="success-message" id="successMessage"></div>
148
+ </form>
149
+
150
+ <div class="default-info">
151
+ <strong>提示:</strong><br>
152
+ 如忘记密码,请运行 <code>npm run reset-password</code> 重置
153
+ </div>
154
+ </div>
155
+
156
+ <script>
157
+ document.getElementById('loginForm').addEventListener('submit', async (e) => {
158
+ e.preventDefault();
159
+
160
+ const loginBtn = document.getElementById('loginBtn');
161
+ const errorMessage = document.getElementById('errorMessage');
162
+ const successMessage = document.getElementById('successMessage');
163
+ const username = document.getElementById('username').value;
164
+ const password = document.getElementById('password').value;
165
+
166
+ // 重置消息
167
+ errorMessage.style.display = 'none';
168
+ successMessage.style.display = 'none';
169
+
170
+ // 禁用按钮
171
+ loginBtn.disabled = true;
172
+ loginBtn.textContent = '登录中...';
173
+
174
+ try {
175
+ const response = await fetch('/api/login', {
176
+ method: 'POST',
177
+ headers: {
178
+ 'Content-Type': 'application/json',
179
+ },
180
+ body: JSON.stringify({ username, password })
181
+ });
182
+
183
+ const data = await response.json();
184
+
185
+ if (data.success) {
186
+ successMessage.textContent = data.message;
187
+ successMessage.style.display = 'block';
188
+
189
+ setTimeout(() => {
190
+ window.location.href = '/dashboard';
191
+ }, 1000);
192
+ } else {
193
+ errorMessage.textContent = data.message;
194
+ errorMessage.style.display = 'block';
195
+ }
196
+ } catch (error) {
197
+ errorMessage.textContent = '登录失败,请检查网络连接';
198
+ errorMessage.style.display = 'block';
199
+ } finally {
200
+ // 恢复按钮
201
+ loginBtn.disabled = false;
202
+ loginBtn.textContent = '登录';
203
+ }
204
+ });
205
+ </script>
206
+ </body>
207
+ </html>