web-agent-bridge 1.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.
- package/LICENSE +21 -0
- package/README.ar.md +446 -0
- package/README.md +544 -0
- package/bin/cli.js +80 -0
- package/bin/wab.js +80 -0
- package/examples/bidi-agent.js +119 -0
- package/examples/puppeteer-agent.js +108 -0
- package/examples/vision-agent.js +159 -0
- package/package.json +67 -0
- package/public/css/styles.css +1235 -0
- package/public/dashboard.html +566 -0
- package/public/docs.html +582 -0
- package/public/index.html +306 -0
- package/public/login.html +81 -0
- package/public/register.html +94 -0
- package/script/ai-agent-bridge.js +1282 -0
- package/sdk/README.md +55 -0
- package/sdk/index.js +167 -0
- package/sdk/package.json +14 -0
- package/server/index.js +105 -0
- package/server/middleware/auth.js +44 -0
- package/server/models/adapters/index.js +33 -0
- package/server/models/adapters/mysql.js +183 -0
- package/server/models/adapters/postgresql.js +172 -0
- package/server/models/adapters/sqlite.js +7 -0
- package/server/models/db.js +205 -0
- package/server/routes/api.js +121 -0
- package/server/routes/auth.js +51 -0
- package/server/routes/license.js +51 -0
- package/server/ws.js +81 -0
|
@@ -0,0 +1,306 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en" dir="ltr">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
+
<title>Web Agent Bridge — AI Agent Middleware for the Web</title>
|
|
7
|
+
<meta name="description" content="Open-source middleware that bridges AI agents and websites. Standardized commands, permissions, and analytics for intelligent automation.">
|
|
8
|
+
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
9
|
+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
10
|
+
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
|
|
11
|
+
<link rel="stylesheet" href="/css/styles.css">
|
|
12
|
+
</head>
|
|
13
|
+
<body>
|
|
14
|
+
|
|
15
|
+
<!-- ═══════════ NAVBAR ═══════════ -->
|
|
16
|
+
<nav class="navbar" id="navbar">
|
|
17
|
+
<div class="container">
|
|
18
|
+
<a href="/" class="navbar-brand">
|
|
19
|
+
<div class="brand-icon">⚡</div>
|
|
20
|
+
<span>WAB</span>
|
|
21
|
+
</a>
|
|
22
|
+
<ul class="navbar-links">
|
|
23
|
+
<li><a href="#features">Features</a></li>
|
|
24
|
+
<li><a href="#how-it-works">How It Works</a></li>
|
|
25
|
+
<li><a href="#pricing">Pricing</a></li>
|
|
26
|
+
<li><a href="/docs">Docs</a></li>
|
|
27
|
+
</ul>
|
|
28
|
+
<div class="navbar-actions">
|
|
29
|
+
<a href="/login" class="btn btn-ghost">Sign In</a>
|
|
30
|
+
<a href="/register" class="btn btn-primary btn-sm">Get Started</a>
|
|
31
|
+
</div>
|
|
32
|
+
<button class="mobile-menu-btn" onclick="document.querySelector('.navbar-links').classList.toggle('active')">☰</button>
|
|
33
|
+
</div>
|
|
34
|
+
</nav>
|
|
35
|
+
|
|
36
|
+
<!-- ═══════════ HERO ═══════════ -->
|
|
37
|
+
<section class="hero">
|
|
38
|
+
<div class="container">
|
|
39
|
+
<div class="hero-content fade-in">
|
|
40
|
+
<div class="hero-badge">
|
|
41
|
+
🚀 Open Source · v1.0.0
|
|
42
|
+
</div>
|
|
43
|
+
<h1>
|
|
44
|
+
Bridge the Gap Between<br>
|
|
45
|
+
<span class="gradient-text">AI Agents</span> & <span class="gradient-text-accent">Websites</span>
|
|
46
|
+
</h1>
|
|
47
|
+
<p>
|
|
48
|
+
An open-source middleware script that gives AI agents a standardized command interface
|
|
49
|
+
to interact with any website — with permissions, rate limiting, and full control for site owners.
|
|
50
|
+
</p>
|
|
51
|
+
<div class="hero-actions">
|
|
52
|
+
<a href="/register" class="btn btn-primary btn-lg">Start Free</a>
|
|
53
|
+
<a href="/docs" class="btn btn-secondary btn-lg">Read the Docs</a>
|
|
54
|
+
</div>
|
|
55
|
+
|
|
56
|
+
<div class="hero-code fade-in fade-in-delay-2">
|
|
57
|
+
<code>
|
|
58
|
+
<span class="comment">// Add the bridge to your website</span><br>
|
|
59
|
+
<<span class="keyword">script</span>><br>
|
|
60
|
+
window.<span class="property">AIBridgeConfig</span> = {<br>
|
|
61
|
+
<span class="property">licenseKey</span>: <span class="string">"WAB-XXXXX-XXXXX"</span>,<br>
|
|
62
|
+
<span class="property">agentPermissions</span>: { <span class="property">click</span>: <span class="boolean">true</span>, <span class="property">fillForms</span>: <span class="boolean">true</span> }<br>
|
|
63
|
+
};<br>
|
|
64
|
+
</<span class="keyword">script</span>><br>
|
|
65
|
+
<<span class="keyword">script</span> <span class="property">src</span>=<span class="string">"/script/ai-agent-bridge.js"</span>></<span class="keyword">script</span>>
|
|
66
|
+
</code>
|
|
67
|
+
</div>
|
|
68
|
+
</div>
|
|
69
|
+
</div>
|
|
70
|
+
</section>
|
|
71
|
+
|
|
72
|
+
<!-- ═══════════ FEATURES ═══════════ -->
|
|
73
|
+
<section class="section" id="features">
|
|
74
|
+
<div class="container">
|
|
75
|
+
<div class="section-header">
|
|
76
|
+
<span class="label">Features</span>
|
|
77
|
+
<h2>Everything AI Agents Need</h2>
|
|
78
|
+
<p>A complete interface layer that makes websites AI-ready with security and control built in.</p>
|
|
79
|
+
</div>
|
|
80
|
+
|
|
81
|
+
<div class="grid-3">
|
|
82
|
+
<div class="card fade-in">
|
|
83
|
+
<div class="card-icon blue">🎯</div>
|
|
84
|
+
<h3>Auto-Discovery</h3>
|
|
85
|
+
<p>Automatically detects buttons, forms, and navigation elements — generating precise CSS selectors and action descriptions for AI agents.</p>
|
|
86
|
+
</div>
|
|
87
|
+
<div class="card fade-in fade-in-delay-1">
|
|
88
|
+
<div class="card-icon purple">🔐</div>
|
|
89
|
+
<h3>Permission System</h3>
|
|
90
|
+
<p>Granular control over what AI agents can do. Enable clicking, form filling, API access, and more — each toggled independently.</p>
|
|
91
|
+
</div>
|
|
92
|
+
<div class="card fade-in fade-in-delay-2">
|
|
93
|
+
<div class="card-icon cyan">⚡</div>
|
|
94
|
+
<h3>Standardized Commands</h3>
|
|
95
|
+
<p>Unified <code>window.AICommands</code> interface that any AI agent can read and execute — no more DOM guessing.</p>
|
|
96
|
+
</div>
|
|
97
|
+
<div class="card fade-in fade-in-delay-1">
|
|
98
|
+
<div class="card-icon green">🛡️</div>
|
|
99
|
+
<h3>Rate Limiting</h3>
|
|
100
|
+
<p>Built-in rate limiting prevents abuse. Configure max calls per minute to protect your site from aggressive automation.</p>
|
|
101
|
+
</div>
|
|
102
|
+
<div class="card fade-in fade-in-delay-2">
|
|
103
|
+
<div class="card-icon orange">📊</div>
|
|
104
|
+
<h3>Analytics Dashboard</h3>
|
|
105
|
+
<p>Track how AI agents interact with your site. See which actions are used most, success rates, and usage patterns.</p>
|
|
106
|
+
</div>
|
|
107
|
+
<div class="card fade-in fade-in-delay-3">
|
|
108
|
+
<div class="card-icon pink">🔌</div>
|
|
109
|
+
<h3>Custom Actions</h3>
|
|
110
|
+
<p>Register your own actions with custom handlers. Create complex workflows that AI agents can trigger with a single command.</p>
|
|
111
|
+
</div>
|
|
112
|
+
</div>
|
|
113
|
+
</div>
|
|
114
|
+
</section>
|
|
115
|
+
|
|
116
|
+
<!-- ═══════════ HOW IT WORKS ═══════════ -->
|
|
117
|
+
<section class="section" id="how-it-works" style="background: var(--bg-secondary);">
|
|
118
|
+
<div class="container">
|
|
119
|
+
<div class="section-header">
|
|
120
|
+
<span class="label">How It Works</span>
|
|
121
|
+
<h2>Three Steps to AI-Ready</h2>
|
|
122
|
+
<p>Get your website ready for AI agents in minutes, not days.</p>
|
|
123
|
+
</div>
|
|
124
|
+
|
|
125
|
+
<div class="grid-3">
|
|
126
|
+
<div class="card" style="text-align:center;">
|
|
127
|
+
<div style="font-size:2.5rem; margin-bottom:16px;">1️⃣</div>
|
|
128
|
+
<h3>Add the Script</h3>
|
|
129
|
+
<p>Include the bridge script in your HTML with your configuration. Set permissions, restrictions, and your license key.</p>
|
|
130
|
+
</div>
|
|
131
|
+
<div class="card" style="text-align:center;">
|
|
132
|
+
<div style="font-size:2.5rem; margin-bottom:16px;">2️⃣</div>
|
|
133
|
+
<h3>Configure Permissions</h3>
|
|
134
|
+
<p>Use the dashboard to fine-tune which actions AI agents can perform. Block sensitive areas and set rate limits.</p>
|
|
135
|
+
</div>
|
|
136
|
+
<div class="card" style="text-align:center;">
|
|
137
|
+
<div style="font-size:2.5rem; margin-bottom:16px;">3️⃣</div>
|
|
138
|
+
<h3>AI Agents Connect</h3>
|
|
139
|
+
<p>AI agents read <code>window.AICommands</code>, discover available actions, and execute them precisely — no DOM scraping needed.</p>
|
|
140
|
+
</div>
|
|
141
|
+
</div>
|
|
142
|
+
|
|
143
|
+
<div style="margin-top:48px;">
|
|
144
|
+
<div class="code-block">
|
|
145
|
+
<div class="code-header">
|
|
146
|
+
<div class="code-dots"><span></span><span></span><span></span></div>
|
|
147
|
+
<span class="code-lang">JavaScript — AI Agent Side</span>
|
|
148
|
+
</div>
|
|
149
|
+
<div class="code-body">
|
|
150
|
+
<pre><span class="cm">// AI Agent reads available commands</span>
|
|
151
|
+
<span class="kw">const</span> bridge = window.<span class="prop">AICommands</span>;
|
|
152
|
+
|
|
153
|
+
<span class="cm">// Discover all available actions</span>
|
|
154
|
+
<span class="kw">const</span> actions = bridge.<span class="fn">getActions</span>();
|
|
155
|
+
console.<span class="fn">log</span>(actions);
|
|
156
|
+
<span class="cm">// → [{ name: "signup", trigger: "click", ... }, ...]</span>
|
|
157
|
+
|
|
158
|
+
<span class="cm">// Execute a form fill action</span>
|
|
159
|
+
<span class="kw">const</span> result = <span class="kw">await</span> bridge.<span class="fn">execute</span>(<span class="str">"fill_contact_form"</span>, {
|
|
160
|
+
<span class="prop">name</span>: <span class="str">"John Doe"</span>,
|
|
161
|
+
<span class="prop">email</span>: <span class="str">"john@example.com"</span>,
|
|
162
|
+
<span class="prop">message</span>: <span class="str">"Hello from AI!"</span>
|
|
163
|
+
});
|
|
164
|
+
|
|
165
|
+
<span class="cm">// Wait for dynamic content</span>
|
|
166
|
+
<span class="kw">await</span> bridge.<span class="fn">waitForElement</span>(<span class="str">".success-message"</span>);</pre>
|
|
167
|
+
</div>
|
|
168
|
+
</div>
|
|
169
|
+
</div>
|
|
170
|
+
</div>
|
|
171
|
+
</section>
|
|
172
|
+
|
|
173
|
+
<!-- ═══════════ PRICING ═══════════ -->
|
|
174
|
+
<section class="section" id="pricing">
|
|
175
|
+
<div class="container">
|
|
176
|
+
<div class="section-header">
|
|
177
|
+
<span class="label">Pricing</span>
|
|
178
|
+
<h2>Simple, Transparent Pricing</h2>
|
|
179
|
+
<p>Start free, upgrade when you need advanced features. Open source forever.</p>
|
|
180
|
+
</div>
|
|
181
|
+
|
|
182
|
+
<div class="grid-3">
|
|
183
|
+
<div class="pricing-card">
|
|
184
|
+
<div class="pricing-tier">Free</div>
|
|
185
|
+
<div class="pricing-price">$0 <span>/mo</span></div>
|
|
186
|
+
<div class="pricing-desc">Perfect for personal projects and experimentation.</div>
|
|
187
|
+
<ul class="pricing-features">
|
|
188
|
+
<li>Auto-discovery of actions</li>
|
|
189
|
+
<li>Click & scroll permissions</li>
|
|
190
|
+
<li>Rate limiting (60/min)</li>
|
|
191
|
+
<li>Basic logging</li>
|
|
192
|
+
<li>1 site</li>
|
|
193
|
+
<li class="disabled">Form filling</li>
|
|
194
|
+
<li class="disabled">API access</li>
|
|
195
|
+
<li class="disabled">Analytics dashboard</li>
|
|
196
|
+
</ul>
|
|
197
|
+
<a href="/register" class="btn btn-secondary" style="width:100%;">Get Started Free</a>
|
|
198
|
+
</div>
|
|
199
|
+
|
|
200
|
+
<div class="pricing-card featured">
|
|
201
|
+
<div class="pricing-tier">Pro</div>
|
|
202
|
+
<div class="pricing-price">$29 <span>/mo</span></div>
|
|
203
|
+
<div class="pricing-desc">For businesses that want full AI agent integration.</div>
|
|
204
|
+
<ul class="pricing-features">
|
|
205
|
+
<li>Everything in Free</li>
|
|
206
|
+
<li>Form filling & submission</li>
|
|
207
|
+
<li>Internal API access</li>
|
|
208
|
+
<li>Advanced analytics</li>
|
|
209
|
+
<li>Up to 10 sites</li>
|
|
210
|
+
<li>Automated login support</li>
|
|
211
|
+
<li>Data extraction</li>
|
|
212
|
+
<li>Priority support</li>
|
|
213
|
+
</ul>
|
|
214
|
+
<a href="/register" class="btn btn-primary" style="width:100%;">Start Pro Trial</a>
|
|
215
|
+
</div>
|
|
216
|
+
|
|
217
|
+
<div class="pricing-card">
|
|
218
|
+
<div class="pricing-tier">Enterprise</div>
|
|
219
|
+
<div class="pricing-price">Custom</div>
|
|
220
|
+
<div class="pricing-desc">Custom solutions for large-scale deployments.</div>
|
|
221
|
+
<ul class="pricing-features">
|
|
222
|
+
<li>Everything in Pro</li>
|
|
223
|
+
<li>Unlimited sites</li>
|
|
224
|
+
<li>Custom rate limits</li>
|
|
225
|
+
<li>Webhook integrations</li>
|
|
226
|
+
<li>SSO / SAML</li>
|
|
227
|
+
<li>Dedicated support</li>
|
|
228
|
+
<li>SLA guarantee</li>
|
|
229
|
+
<li>Custom development</li>
|
|
230
|
+
</ul>
|
|
231
|
+
<a href="mailto:sales@webagentbridge.com" class="btn btn-secondary" style="width:100%;">Contact Sales</a>
|
|
232
|
+
</div>
|
|
233
|
+
</div>
|
|
234
|
+
</div>
|
|
235
|
+
</section>
|
|
236
|
+
|
|
237
|
+
<!-- ═══════════ CTA ═══════════ -->
|
|
238
|
+
<section class="section" style="background: var(--bg-secondary); text-align:center;">
|
|
239
|
+
<div class="container">
|
|
240
|
+
<h2 style="margin-bottom:16px;">Ready to Make Your Site <span class="gradient-text">AI-Ready</span>?</h2>
|
|
241
|
+
<p style="color:var(--text-secondary); max-width:540px; margin:0 auto 32px; font-size:1.1rem;">
|
|
242
|
+
Join the open-source movement that's bridging the gap between AI agents and the web.
|
|
243
|
+
</p>
|
|
244
|
+
<div style="display:flex; gap:16px; justify-content:center; flex-wrap:wrap;">
|
|
245
|
+
<a href="/register" class="btn btn-primary btn-lg">Create Free Account</a>
|
|
246
|
+
<a href="/docs" class="btn btn-secondary btn-lg">View Documentation</a>
|
|
247
|
+
</div>
|
|
248
|
+
</div>
|
|
249
|
+
</section>
|
|
250
|
+
|
|
251
|
+
<!-- ═══════════ FOOTER ═══════════ -->
|
|
252
|
+
<footer class="footer">
|
|
253
|
+
<div class="container">
|
|
254
|
+
<div class="footer-grid">
|
|
255
|
+
<div class="footer-brand">
|
|
256
|
+
<a href="/" class="navbar-brand">
|
|
257
|
+
<div class="brand-icon">⚡</div>
|
|
258
|
+
<span>Web Agent Bridge</span>
|
|
259
|
+
</a>
|
|
260
|
+
<p>Open-source middleware for AI agent and website interaction. Built for the future of intelligent automation.</p>
|
|
261
|
+
</div>
|
|
262
|
+
<div class="footer-col">
|
|
263
|
+
<h4>Product</h4>
|
|
264
|
+
<ul>
|
|
265
|
+
<li><a href="#features">Features</a></li>
|
|
266
|
+
<li><a href="#pricing">Pricing</a></li>
|
|
267
|
+
<li><a href="/docs">Documentation</a></li>
|
|
268
|
+
<li><a href="/dashboard">Dashboard</a></li>
|
|
269
|
+
</ul>
|
|
270
|
+
</div>
|
|
271
|
+
<div class="footer-col">
|
|
272
|
+
<h4>Developers</h4>
|
|
273
|
+
<ul>
|
|
274
|
+
<li><a href="/docs#quick-start">Quick Start</a></li>
|
|
275
|
+
<li><a href="/docs#api-reference">API Reference</a></li>
|
|
276
|
+
<li><a href="/docs#examples">Examples</a></li>
|
|
277
|
+
<li><a href="#">GitHub</a></li>
|
|
278
|
+
</ul>
|
|
279
|
+
</div>
|
|
280
|
+
<div class="footer-col">
|
|
281
|
+
<h4>Company</h4>
|
|
282
|
+
<ul>
|
|
283
|
+
<li><a href="#">About</a></li>
|
|
284
|
+
<li><a href="#">Blog</a></li>
|
|
285
|
+
<li><a href="#">Contact</a></li>
|
|
286
|
+
<li><a href="#">Privacy Policy</a></li>
|
|
287
|
+
</ul>
|
|
288
|
+
</div>
|
|
289
|
+
</div>
|
|
290
|
+
<div class="footer-bottom">
|
|
291
|
+
<span>© 2026 Web Agent Bridge. MIT License.</span>
|
|
292
|
+
<span>Built with care for the AI-powered web</span>
|
|
293
|
+
</div>
|
|
294
|
+
</div>
|
|
295
|
+
</footer>
|
|
296
|
+
|
|
297
|
+
<script>
|
|
298
|
+
const navbar = document.getElementById('navbar');
|
|
299
|
+
window.addEventListener('scroll', () => {
|
|
300
|
+
navbar.style.background = window.scrollY > 50
|
|
301
|
+
? 'rgba(10, 14, 26, 0.95)'
|
|
302
|
+
: 'rgba(10, 14, 26, 0.8)';
|
|
303
|
+
});
|
|
304
|
+
</script>
|
|
305
|
+
</body>
|
|
306
|
+
</html>
|
|
@@ -0,0 +1,81 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
+
<title>Sign In — Web Agent Bridge</title>
|
|
7
|
+
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
8
|
+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
9
|
+
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
|
|
10
|
+
<link rel="stylesheet" href="/css/styles.css">
|
|
11
|
+
</head>
|
|
12
|
+
<body>
|
|
13
|
+
<div class="auth-page">
|
|
14
|
+
<div class="auth-card fade-in">
|
|
15
|
+
<div style="text-align:center; margin-bottom:32px;">
|
|
16
|
+
<a href="/" class="navbar-brand" style="justify-content:center;">
|
|
17
|
+
<div class="brand-icon">⚡</div>
|
|
18
|
+
<span>WAB</span>
|
|
19
|
+
</a>
|
|
20
|
+
</div>
|
|
21
|
+
<h1 style="text-align:center;">Welcome back</h1>
|
|
22
|
+
<p class="subtitle" style="text-align:center;">Sign in to your account</p>
|
|
23
|
+
|
|
24
|
+
<div class="alert alert-error" id="errorAlert"></div>
|
|
25
|
+
|
|
26
|
+
<form id="loginForm">
|
|
27
|
+
<div class="form-group">
|
|
28
|
+
<label for="email">Email</label>
|
|
29
|
+
<input type="email" id="email" class="form-input" placeholder="you@example.com" required>
|
|
30
|
+
</div>
|
|
31
|
+
<div class="form-group">
|
|
32
|
+
<label for="password">Password</label>
|
|
33
|
+
<input type="password" id="password" class="form-input" placeholder="Your password" required>
|
|
34
|
+
</div>
|
|
35
|
+
<button type="submit" class="btn btn-primary btn-lg">Sign In</button>
|
|
36
|
+
</form>
|
|
37
|
+
|
|
38
|
+
<div class="auth-footer">
|
|
39
|
+
Don't have an account? <a href="/register">Create one</a>
|
|
40
|
+
</div>
|
|
41
|
+
</div>
|
|
42
|
+
</div>
|
|
43
|
+
|
|
44
|
+
<script>
|
|
45
|
+
if (localStorage.getItem('wab_token')) {
|
|
46
|
+
window.location.href = '/dashboard';
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
document.getElementById('loginForm').addEventListener('submit', async (e) => {
|
|
50
|
+
e.preventDefault();
|
|
51
|
+
const errorEl = document.getElementById('errorAlert');
|
|
52
|
+
errorEl.style.display = 'none';
|
|
53
|
+
|
|
54
|
+
const email = document.getElementById('email').value;
|
|
55
|
+
const password = document.getElementById('password').value;
|
|
56
|
+
|
|
57
|
+
try {
|
|
58
|
+
const res = await fetch('/api/auth/login', {
|
|
59
|
+
method: 'POST',
|
|
60
|
+
headers: { 'Content-Type': 'application/json' },
|
|
61
|
+
body: JSON.stringify({ email, password })
|
|
62
|
+
});
|
|
63
|
+
const data = await res.json();
|
|
64
|
+
|
|
65
|
+
if (!res.ok) {
|
|
66
|
+
errorEl.textContent = data.error || 'Login failed';
|
|
67
|
+
errorEl.style.display = 'block';
|
|
68
|
+
return;
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
localStorage.setItem('wab_token', data.token);
|
|
72
|
+
localStorage.setItem('wab_user', JSON.stringify(data.user));
|
|
73
|
+
window.location.href = '/dashboard';
|
|
74
|
+
} catch (err) {
|
|
75
|
+
errorEl.textContent = 'Connection error. Please try again.';
|
|
76
|
+
errorEl.style.display = 'block';
|
|
77
|
+
}
|
|
78
|
+
});
|
|
79
|
+
</script>
|
|
80
|
+
</body>
|
|
81
|
+
</html>
|
|
@@ -0,0 +1,94 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
+
<title>Create Account — Web Agent Bridge</title>
|
|
7
|
+
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
8
|
+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
9
|
+
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
|
|
10
|
+
<link rel="stylesheet" href="/css/styles.css">
|
|
11
|
+
</head>
|
|
12
|
+
<body>
|
|
13
|
+
<div class="auth-page">
|
|
14
|
+
<div class="auth-card fade-in">
|
|
15
|
+
<div style="text-align:center; margin-bottom:32px;">
|
|
16
|
+
<a href="/" class="navbar-brand" style="justify-content:center;">
|
|
17
|
+
<div class="brand-icon">⚡</div>
|
|
18
|
+
<span>WAB</span>
|
|
19
|
+
</a>
|
|
20
|
+
</div>
|
|
21
|
+
<h1 style="text-align:center;">Create account</h1>
|
|
22
|
+
<p class="subtitle" style="text-align:center;">Get started with Web Agent Bridge</p>
|
|
23
|
+
|
|
24
|
+
<div class="alert alert-error" id="errorAlert"></div>
|
|
25
|
+
<div class="alert alert-success" id="successAlert"></div>
|
|
26
|
+
|
|
27
|
+
<form id="registerForm">
|
|
28
|
+
<div class="form-group">
|
|
29
|
+
<label for="name">Full Name</label>
|
|
30
|
+
<input type="text" id="name" class="form-input" placeholder="John Doe" required>
|
|
31
|
+
</div>
|
|
32
|
+
<div class="form-group">
|
|
33
|
+
<label for="email">Email</label>
|
|
34
|
+
<input type="email" id="email" class="form-input" placeholder="you@example.com" required>
|
|
35
|
+
</div>
|
|
36
|
+
<div class="form-group">
|
|
37
|
+
<label for="company">Company <span style="color:var(--text-muted);">(optional)</span></label>
|
|
38
|
+
<input type="text" id="company" class="form-input" placeholder="Your company">
|
|
39
|
+
</div>
|
|
40
|
+
<div class="form-group">
|
|
41
|
+
<label for="password">Password</label>
|
|
42
|
+
<input type="password" id="password" class="form-input" placeholder="Min 8 characters" required minlength="8">
|
|
43
|
+
</div>
|
|
44
|
+
<button type="submit" class="btn btn-primary btn-lg">Create Account</button>
|
|
45
|
+
</form>
|
|
46
|
+
|
|
47
|
+
<div class="auth-footer">
|
|
48
|
+
Already have an account? <a href="/login">Sign in</a>
|
|
49
|
+
</div>
|
|
50
|
+
</div>
|
|
51
|
+
</div>
|
|
52
|
+
|
|
53
|
+
<script>
|
|
54
|
+
if (localStorage.getItem('wab_token')) {
|
|
55
|
+
window.location.href = '/dashboard';
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
document.getElementById('registerForm').addEventListener('submit', async (e) => {
|
|
59
|
+
e.preventDefault();
|
|
60
|
+
const errorEl = document.getElementById('errorAlert');
|
|
61
|
+
const successEl = document.getElementById('successAlert');
|
|
62
|
+
errorEl.style.display = 'none';
|
|
63
|
+
successEl.style.display = 'none';
|
|
64
|
+
|
|
65
|
+
const name = document.getElementById('name').value;
|
|
66
|
+
const email = document.getElementById('email').value;
|
|
67
|
+
const company = document.getElementById('company').value;
|
|
68
|
+
const password = document.getElementById('password').value;
|
|
69
|
+
|
|
70
|
+
try {
|
|
71
|
+
const res = await fetch('/api/auth/register', {
|
|
72
|
+
method: 'POST',
|
|
73
|
+
headers: { 'Content-Type': 'application/json' },
|
|
74
|
+
body: JSON.stringify({ name, email, company, password })
|
|
75
|
+
});
|
|
76
|
+
const data = await res.json();
|
|
77
|
+
|
|
78
|
+
if (!res.ok) {
|
|
79
|
+
errorEl.textContent = data.error || 'Registration failed';
|
|
80
|
+
errorEl.style.display = 'block';
|
|
81
|
+
return;
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
localStorage.setItem('wab_token', data.token);
|
|
85
|
+
localStorage.setItem('wab_user', JSON.stringify(data.user));
|
|
86
|
+
window.location.href = '/dashboard';
|
|
87
|
+
} catch (err) {
|
|
88
|
+
errorEl.textContent = 'Connection error. Please try again.';
|
|
89
|
+
errorEl.style.display = 'block';
|
|
90
|
+
}
|
|
91
|
+
});
|
|
92
|
+
</script>
|
|
93
|
+
</body>
|
|
94
|
+
</html>
|