@inputdev/sdk 1.0.1 → 1.0.3
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/README.md +378 -457
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -1,457 +1,378 @@
|
|
|
1
|
-
# InputDev SDK
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
-
|
|
14
|
-
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
```
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
<
|
|
134
|
-
|
|
135
|
-
//
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
**
|
|
278
|
-
-
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
//
|
|
345
|
-
|
|
346
|
-
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
|
|
353
|
-
|
|
354
|
-
|
|
355
|
-
|
|
356
|
-
|
|
357
|
-
|
|
358
|
-
|
|
359
|
-
```
|
|
360
|
-
|
|
361
|
-
|
|
362
|
-
|
|
363
|
-
|
|
364
|
-
|
|
365
|
-
|
|
366
|
-
|
|
367
|
-
|
|
368
|
-
|
|
369
|
-
|
|
370
|
-
|
|
371
|
-
|
|
372
|
-
|
|
373
|
-
|
|
374
|
-
|
|
375
|
-
|
|
376
|
-
|
|
377
|
-
|
|
378
|
-
|
|
379
|
-
</div>
|
|
380
|
-
|
|
381
|
-
<button type="submit">Envoyer</button>
|
|
382
|
-
</form>
|
|
383
|
-
|
|
384
|
-
<script src="https://cdn.inputdev.dev/latest.js"></script>
|
|
385
|
-
```
|
|
386
|
-
|
|
387
|
-
### Formulaire avec validation personnalisée
|
|
388
|
-
```javascript
|
|
389
|
-
document.addEventListener('inputdev:success', (event) => {
|
|
390
|
-
// Rediriger après succès
|
|
391
|
-
window.location.href = '/merci.html';
|
|
392
|
-
});
|
|
393
|
-
|
|
394
|
-
document.addEventListener('inputdev:error', (event) => {
|
|
395
|
-
// Afficher une notification personnalisée
|
|
396
|
-
showNotification('Erreur: ' + event.detail.error.message, 'error');
|
|
397
|
-
});
|
|
398
|
-
```
|
|
399
|
-
|
|
400
|
-
### Intégration React
|
|
401
|
-
```jsx
|
|
402
|
-
import { dev } from "@inputdev/sdk";
|
|
403
|
-
|
|
404
|
-
function ContactForm() {
|
|
405
|
-
const [formData, setFormData] = useState({
|
|
406
|
-
email: '',
|
|
407
|
-
message: ''
|
|
408
|
-
});
|
|
409
|
-
const [loading, setLoading] = useState(false);
|
|
410
|
-
|
|
411
|
-
const handleSubmit = async (e) => {
|
|
412
|
-
e.preventDefault();
|
|
413
|
-
setLoading(true);
|
|
414
|
-
|
|
415
|
-
try {
|
|
416
|
-
await dev.submit("grts_VotreCleApi", formData);
|
|
417
|
-
alert('Message envoyé avec succès!');
|
|
418
|
-
setFormData({ email: '', message: '' });
|
|
419
|
-
} catch (error) {
|
|
420
|
-
alert('Erreur: ' + error.message);
|
|
421
|
-
} finally {
|
|
422
|
-
setLoading(false);
|
|
423
|
-
}
|
|
424
|
-
};
|
|
425
|
-
|
|
426
|
-
return (
|
|
427
|
-
<form onSubmit={handleSubmit}>
|
|
428
|
-
<input
|
|
429
|
-
type="email"
|
|
430
|
-
value={formData.email}
|
|
431
|
-
onChange={(e) => setFormData({...formData, email: e.target.value})}
|
|
432
|
-
placeholder="Votre email"
|
|
433
|
-
required
|
|
434
|
-
/>
|
|
435
|
-
<textarea
|
|
436
|
-
value={formData.message}
|
|
437
|
-
onChange={(e) => setFormData({...formData, message: e.target.value})}
|
|
438
|
-
placeholder="Votre message"
|
|
439
|
-
required
|
|
440
|
-
/>
|
|
441
|
-
<button type="submit" disabled={loading}>
|
|
442
|
-
{loading ? 'Envoi...' : 'Envoyer'}
|
|
443
|
-
</button>
|
|
444
|
-
</form>
|
|
445
|
-
);
|
|
446
|
-
}
|
|
447
|
-
```
|
|
448
|
-
|
|
449
|
-
## Support
|
|
450
|
-
|
|
451
|
-
- 📖 Documentation complète : [docs.inputdev.dev](https://docs.inputdev.dev)
|
|
452
|
-
- 🐛 Rapports de bugs : [GitHub Issues](https://github.com/inputdev/sdk/issues)
|
|
453
|
-
- 💬 Communauté : [Discord](https://discord.gg/inputdev)
|
|
454
|
-
|
|
455
|
-
## Licence
|
|
456
|
-
|
|
457
|
-
MIT License - voir le fichier LICENSE pour les détails.
|
|
1
|
+
# InputDev SDK Documentation �
|
|
2
|
+
|
|
3
|
+
> **Le backend de formulaires le plus simple et professionnel pour les développeurs modernes.**
|
|
4
|
+
|
|
5
|
+
[](https://inputdev.dev)
|
|
6
|
+
[](LICENSE)
|
|
7
|
+
[](https://inputdev.pages.dev/documentation)
|
|
8
|
+
|
|
9
|
+
---
|
|
10
|
+
|
|
11
|
+
## 📖 Table des matières
|
|
12
|
+
|
|
13
|
+
- [Introduction](#-introduction)
|
|
14
|
+
- [Quick Start](#-quick-start-démarrage-rapide)
|
|
15
|
+
- [Comment ça fonctionne](#-comment-ça-fonctionne)
|
|
16
|
+
- [Installation](#-installation)
|
|
17
|
+
- [Utilisation JavaScript](#-utilisation-javascript-pour-frameworks)
|
|
18
|
+
- [SDK JavaScript Avancé](#-sdk-javascript-avancé)
|
|
19
|
+
- [Validation Email](#-validation-email)
|
|
20
|
+
- [Événements](#-événements)
|
|
21
|
+
- [Codes d'erreur](#-codes-derreur)
|
|
22
|
+
- [Sécurité](#-sécurité)
|
|
23
|
+
- [Mode Silence](#-mode-silence)
|
|
24
|
+
- [Limites](#-limites)
|
|
25
|
+
- [Bonnes pratiques](#-bonnes-pratiques)
|
|
26
|
+
- [Exemple complet](#-exemple-complet-réel)
|
|
27
|
+
|
|
28
|
+
---
|
|
29
|
+
|
|
30
|
+
## 🚀 Introduction
|
|
31
|
+
|
|
32
|
+
InputDev permet de transformer un simple formulaire en système de collecte de données sécurisé et professionnel.
|
|
33
|
+
|
|
34
|
+
### ✨ Avantages principaux
|
|
35
|
+
|
|
36
|
+
- **Aucune configuration serveur nécessaire** - Déployez en minutes
|
|
37
|
+
- **Aucune dépendance externe** - SDK ultra-léger et autonome
|
|
38
|
+
- **Installation en moins de 1 minute** - Intégration instantanée
|
|
39
|
+
- **Validation automatique** - Emails et champs intégrés
|
|
40
|
+
- **Sécurité de niveau entreprise** - HTTPS, CORS, anti-spam
|
|
41
|
+
|
|
42
|
+
---
|
|
43
|
+
|
|
44
|
+
## ⚡ Quick Start (Démarrage rapide)
|
|
45
|
+
|
|
46
|
+
### Étape 1 — Ajouter le script
|
|
47
|
+
|
|
48
|
+
#### Via CDN (recommandé)
|
|
49
|
+
|
|
50
|
+
```html
|
|
51
|
+
<script src="https://cdn.inputdev.com/sdk/latest/inputdev.min.js"></script>
|
|
52
|
+
```
|
|
53
|
+
|
|
54
|
+
#### Via NPM
|
|
55
|
+
|
|
56
|
+
```bash
|
|
57
|
+
npm install @inputdev/sdk
|
|
58
|
+
import InputDev from "@inputdev/sdk";
|
|
59
|
+
```
|
|
60
|
+
|
|
61
|
+
### Étape 2 — Ajouter votre clé API
|
|
62
|
+
|
|
63
|
+
```html
|
|
64
|
+
<form data-inputdev="grts_VotreCleApiDeCeSite">
|
|
65
|
+
<input type="text" name="name" required />
|
|
66
|
+
<input type="email" name="email" required />
|
|
67
|
+
<button type="submit">Envoyer</button>
|
|
68
|
+
</form>
|
|
69
|
+
```
|
|
70
|
+
|
|
71
|
+
> 🎉 **C'est terminé !** Le formulaire est maintenant connecté à InputDev.
|
|
72
|
+
|
|
73
|
+
---
|
|
74
|
+
|
|
75
|
+
## 🔧 Comment ça fonctionne
|
|
76
|
+
|
|
77
|
+
1. **Navigateur** - L'utilisateur soumet le formulaire
|
|
78
|
+
2. **InputDev API** - Les données sont validées et envoyées en HTTPS
|
|
79
|
+
3. **Stockage sécurisé** - Elles sont enregistrées dans votre tableau de bord
|
|
80
|
+
|
|
81
|
+
---
|
|
82
|
+
|
|
83
|
+
## 📦 Installation
|
|
84
|
+
|
|
85
|
+
### Via CDN (recommandé)
|
|
86
|
+
|
|
87
|
+
```html
|
|
88
|
+
<script src="https://cdn.inputdev.com/sdk/latest/inputdev.min.js"></script>
|
|
89
|
+
```
|
|
90
|
+
|
|
91
|
+
### Via NPM
|
|
92
|
+
|
|
93
|
+
```bash
|
|
94
|
+
npm install @inputdev/sdk
|
|
95
|
+
import InputDev from "@inputdev/sdk";
|
|
96
|
+
```
|
|
97
|
+
|
|
98
|
+
---
|
|
99
|
+
|
|
100
|
+
## 💻 Utilisation JavaScript (Pour Frameworks)
|
|
101
|
+
|
|
102
|
+
Idéal pour les frameworks JavaScript (React, Vue, Angular, etc.) où vous contrôlez déjà les données du formulaire :
|
|
103
|
+
|
|
104
|
+
```javascript
|
|
105
|
+
const sdk = new InputDev();
|
|
106
|
+
|
|
107
|
+
await sdk.submit("grts_VotreCleApiDeCeSite", {
|
|
108
|
+
name: "John",
|
|
109
|
+
email: "john@email.com",
|
|
110
|
+
plan: "premium"
|
|
111
|
+
});
|
|
112
|
+
```
|
|
113
|
+
|
|
114
|
+
### Paramètres
|
|
115
|
+
|
|
116
|
+
| Paramètre | Type | Obligatoire | Description |
|
|
117
|
+
|-----------|------|-------------|-------------|
|
|
118
|
+
| `apiKey` | string | Oui | Clé publique fournie par InputDev |
|
|
119
|
+
| `data` | object | Oui | Données à envoyer |
|
|
120
|
+
|
|
121
|
+
---
|
|
122
|
+
|
|
123
|
+
## 🚀 SDK JavaScript Avancé
|
|
124
|
+
|
|
125
|
+
Pour le HTML classique avec un contrôle total des champs et une gestion personnalisée :
|
|
126
|
+
|
|
127
|
+
```html
|
|
128
|
+
<form id="contact-form">
|
|
129
|
+
<!-- ... vos champs ici ... -->
|
|
130
|
+
<button type="button" onclick="submitFormulaire()">Envoyer</button>
|
|
131
|
+
</form>
|
|
132
|
+
|
|
133
|
+
<script src="https://unpkg.com/@inputdev/sdk@latest/inputdev-sdk.prod.js"></script>
|
|
134
|
+
<script>
|
|
135
|
+
// Fonction réutilisable, contrôle total des champs
|
|
136
|
+
function submitFormulaire() {
|
|
137
|
+
const dev = new InputDevSDK();
|
|
138
|
+
const data = {
|
|
139
|
+
email: "exemple@test.com",
|
|
140
|
+
message: "Message par défaut",
|
|
141
|
+
telephone: "+22990000000",
|
|
142
|
+
plan: "free"
|
|
143
|
+
};
|
|
144
|
+
dev.submit("grts_VotreCleApiDeCeSite", data); // SDK gère erreurs et succès automatiquement
|
|
145
|
+
}
|
|
146
|
+
</script>
|
|
147
|
+
```
|
|
148
|
+
|
|
149
|
+
### Avantages du SDK avancé
|
|
150
|
+
|
|
151
|
+
- **Contrôle total des données** - Gérez chaque champ manuellement
|
|
152
|
+
- **Validation personnalisée** - Appliquez vos règles métier
|
|
153
|
+
- **Gestion d'erreurs avancée** - Messages d'erreur sur mesure
|
|
154
|
+
- **Performance optimisée** - Envoi asynchrone et optimisé
|
|
155
|
+
|
|
156
|
+
---
|
|
157
|
+
|
|
158
|
+
## 📧 Validation Email
|
|
159
|
+
|
|
160
|
+
InputDev valide automatiquement les adresses email pour garantir la qualité des données collectées. La validation fonctionne en deux temps : affichage des messages et blocage de la soumission si nécessaire.
|
|
161
|
+
|
|
162
|
+
### Comment ça fonctionne ?
|
|
163
|
+
|
|
164
|
+
Le SDK détecte automatiquement tous les champs contenant "email" dans leur nom et applique une validation en temps réel.
|
|
165
|
+
|
|
166
|
+
#### Messages dans la console (pour le débogage)
|
|
167
|
+
|
|
168
|
+
```
|
|
169
|
+
📧 VALIDATION EMAIL
|
|
170
|
+
⚠️ Erreurs trouvées:
|
|
171
|
+
• L'email "email" est invalide: test@invalid
|
|
172
|
+
💡 Corrigez les emails avant de soumettre à nouveau
|
|
173
|
+
```
|
|
174
|
+
|
|
175
|
+
#### Messages sous le formulaire (pour l'expérience utilisateur)
|
|
176
|
+
|
|
177
|
+
```html
|
|
178
|
+
<div class="inputdev-email-error-message" data-inputdev-error-for="email">
|
|
179
|
+
<span style="text-decoration: underline; font-weight: bold;">InputDev SDK</span> :
|
|
180
|
+
<span style="font-weight: bold;">Veuillez entrer une adresse email valide</span>
|
|
181
|
+
</div>
|
|
182
|
+
```
|
|
183
|
+
|
|
184
|
+
### Processus de validation
|
|
185
|
+
|
|
186
|
+
1. **Détection** : Le SDK identifie les champs avec "email" dans le nom (insensible à la casse)
|
|
187
|
+
2. **Validation en temps réel** : Vérification lors de la perte de focus (blur event)
|
|
188
|
+
3. **Feedback visuel** : Bordure rouge et message d'erreur sous le champ
|
|
189
|
+
4. **Blocage de soumission** : Empêche l'envoi si un email est invalide
|
|
190
|
+
5. **Nettoyage automatique** : Supprime l'erreur quand l'utilisateur corrige
|
|
191
|
+
|
|
192
|
+
### Exemple de validation
|
|
193
|
+
|
|
194
|
+
```html
|
|
195
|
+
<form data-inputdev="grts_VotreCleApiDeCeSite">
|
|
196
|
+
<input type="text" name="name" placeholder="Nom" required>
|
|
197
|
+
|
|
198
|
+
<!-- Sera validé automatiquement -->
|
|
199
|
+
<input type="email" name="email" placeholder="Email" required>
|
|
200
|
+
|
|
201
|
+
<!-- Aussi validé (contient "email") -->
|
|
202
|
+
<input type="email" name="email_confirmation" placeholder="Confirmer l'email">
|
|
203
|
+
|
|
204
|
+
<button type="submit">Envoyer</button>
|
|
205
|
+
</form>
|
|
206
|
+
```
|
|
207
|
+
|
|
208
|
+
### Types de validation
|
|
209
|
+
|
|
210
|
+
#### ✅ Emails valides
|
|
211
|
+
- user@domain.com
|
|
212
|
+
- test.email+tag@example.co.uk
|
|
213
|
+
- user123@sub.domain.org
|
|
214
|
+
|
|
215
|
+
#### ❌ Emails invalides
|
|
216
|
+
- email@
|
|
217
|
+
- user.domain.com
|
|
218
|
+
- user@domain
|
|
219
|
+
|
|
220
|
+
### Styles appliqués automatiquement
|
|
221
|
+
|
|
222
|
+
```css
|
|
223
|
+
.inputdev-email-error {
|
|
224
|
+
border: 2px solid #ef4444 !important;
|
|
225
|
+
box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1) !important;
|
|
226
|
+
outline: none !important;
|
|
227
|
+
}
|
|
228
|
+
|
|
229
|
+
.inputdev-email-error-message {
|
|
230
|
+
color: #ef4444;
|
|
231
|
+
font-size: 12px;
|
|
232
|
+
margin-top: 4px;
|
|
233
|
+
display: block;
|
|
234
|
+
}
|
|
235
|
+
```
|
|
236
|
+
|
|
237
|
+
> ⚠️ **Important** : Si un email est invalide, la soumission du formulaire est complètement bloquée. L'utilisateur doit corriger l'email avant de pouvoir envoyer le formulaire.
|
|
238
|
+
|
|
239
|
+
> 💡 **Astuce** : La validation fonctionne en mode normal et en mode silence. En mode silence, seul le message sous le formulaire s'affiche (pas de logs console).
|
|
240
|
+
|
|
241
|
+
---
|
|
242
|
+
|
|
243
|
+
## 📡 Événements
|
|
244
|
+
|
|
245
|
+
Vous pouvez écouter les événements globaux pour personnaliser l'expérience utilisateur :
|
|
246
|
+
|
|
247
|
+
```javascript
|
|
248
|
+
document.addEventListener("inputdev:success", (event) => {
|
|
249
|
+
console.log("Succès :", event.detail);
|
|
250
|
+
// Rediriger, afficher un message, etc.
|
|
251
|
+
});
|
|
252
|
+
|
|
253
|
+
document.addEventListener("inputdev:error", (event) => {
|
|
254
|
+
console.error("Erreur :", event.detail);
|
|
255
|
+
// Afficher une notification, logger l'erreur, etc.
|
|
256
|
+
});
|
|
257
|
+
```
|
|
258
|
+
|
|
259
|
+
---
|
|
260
|
+
|
|
261
|
+
## � Codes d'erreur
|
|
262
|
+
|
|
263
|
+
| Code | Signification | Solution |
|
|
264
|
+
|------|---------------|----------|
|
|
265
|
+
| `API_001` | Clé API invalide | Vérifiez votre clé |
|
|
266
|
+
| `DOM_001` | Domaine non autorisé | Ajoutez le domaine autorisé |
|
|
267
|
+
| `QUO_001` | Quota dépassé | Passez à un plan supérieur |
|
|
268
|
+
| `NET_001` | Erreur réseau | Vérifiez la connexion |
|
|
269
|
+
| `VAL_001` | Validation échouée | Vérifiez les champs |
|
|
270
|
+
|
|
271
|
+
---
|
|
272
|
+
|
|
273
|
+
## 🔐 Sécurité
|
|
274
|
+
|
|
275
|
+
- **Requêtes envoyées en HTTPS** - Chiffrement de bout en bout
|
|
276
|
+
- **Validation côté client et serveur** - Double couche de sécurité
|
|
277
|
+
- **Domaine autorisé configurable** - Protection contre l'usage non autorisé
|
|
278
|
+
- **Anti-spam intégré** - Protection automatique
|
|
279
|
+
|
|
280
|
+
> ℹ️ **Sécurité** : La clé API est publique et conçue pour rester dans le frontend. Elle est sécurisée par validation de domaine et quotas automatiques.
|
|
281
|
+
|
|
282
|
+
---
|
|
283
|
+
|
|
284
|
+
## � Mode Silence
|
|
285
|
+
|
|
286
|
+
Pour désactiver les logs en production :
|
|
287
|
+
|
|
288
|
+
```html
|
|
289
|
+
<form data-inputdev-silence="grts_VotreCleApiDeCeSite">
|
|
290
|
+
```
|
|
291
|
+
|
|
292
|
+
---
|
|
293
|
+
|
|
294
|
+
## 📊 Limites
|
|
295
|
+
|
|
296
|
+
- **Nombre de soumissions par mois** - Dépend du plan choisi
|
|
297
|
+
- **Nombre maximum de formulaires** - Variable selon le plan
|
|
298
|
+
- **Nombre de sites/clés actives** - Une clé, un site
|
|
299
|
+
- **SSL obligatoire** - HTTPS requis pour la sécurité
|
|
300
|
+
- **Domaines autorisés** - Configurable par clé
|
|
301
|
+
|
|
302
|
+
---
|
|
303
|
+
|
|
304
|
+
## ⭐ Bonnes pratiques
|
|
305
|
+
|
|
306
|
+
- ✅ Toujours utiliser HTTPS
|
|
307
|
+
- ✅ Toujours définir des champs name
|
|
308
|
+
- ✅ Toujours gérer les événements erreur
|
|
309
|
+
- ✅ Surveiller votre quota
|
|
310
|
+
- ✅ Tester en environnement de développement
|
|
311
|
+
|
|
312
|
+
---
|
|
313
|
+
|
|
314
|
+
## 📋 Exemple complet réel
|
|
315
|
+
|
|
316
|
+
```html
|
|
317
|
+
<!DOCTYPE html>
|
|
318
|
+
<html>
|
|
319
|
+
<head>
|
|
320
|
+
<script src="https://cdn.inputdev.com/sdk/latest/inputdev.min.js"></script>
|
|
321
|
+
</head>
|
|
322
|
+
<body>
|
|
323
|
+
|
|
324
|
+
<form data-inputdev="grts_VotreCleApiDeCeSite">
|
|
325
|
+
<div class="form-group">
|
|
326
|
+
<label for="name">Nom complet</label>
|
|
327
|
+
<input type="text" id="name" name="name" required>
|
|
328
|
+
</div>
|
|
329
|
+
|
|
330
|
+
<div class="form-group">
|
|
331
|
+
<label for="email">Email</label>
|
|
332
|
+
<input type="email" id="email" name="email" required>
|
|
333
|
+
</div>
|
|
334
|
+
|
|
335
|
+
<div class="form-group">
|
|
336
|
+
<label for="message">Message</label>
|
|
337
|
+
<textarea id="message" name="message" required></textarea>
|
|
338
|
+
</div>
|
|
339
|
+
|
|
340
|
+
<button type="submit">Envoyer</button>
|
|
341
|
+
</form>
|
|
342
|
+
|
|
343
|
+
<script>
|
|
344
|
+
// Écouter les événements pour une meilleure UX
|
|
345
|
+
document.addEventListener('inputdev:success', (event) => {
|
|
346
|
+
alert('Message envoyé avec succès !');
|
|
347
|
+
// Réinitialiser le formulaire
|
|
348
|
+
document.querySelector('form').reset();
|
|
349
|
+
});
|
|
350
|
+
|
|
351
|
+
document.addEventListener('inputdev:error', (event) => {
|
|
352
|
+
console.error('Erreur lors de l\'envoi :', event.detail);
|
|
353
|
+
alert('Une erreur est survenue. Veuillez réessayer.');
|
|
354
|
+
});
|
|
355
|
+
</script>
|
|
356
|
+
|
|
357
|
+
</body>
|
|
358
|
+
</html>
|
|
359
|
+
```
|
|
360
|
+
|
|
361
|
+
---
|
|
362
|
+
|
|
363
|
+
## � Support & Liens
|
|
364
|
+
|
|
365
|
+
- 📖 **Documentation Complète** : [docs.inputdev.dev](https://inputdev.pages.dev/documentation)
|
|
366
|
+
- 💬 **Discord** : [Rejoindre la communauté]
|
|
367
|
+
- 🐛 **Issues** : [Signaler un bug]
|
|
368
|
+
|
|
369
|
+
|
|
370
|
+
---
|
|
371
|
+
|
|
372
|
+
## 📄 Licence
|
|
373
|
+
|
|
374
|
+
MIT License - voir le fichier [LICENSE](LICENSE) pour plus de détails.
|
|
375
|
+
|
|
376
|
+
---
|
|
377
|
+
|
|
378
|
+
<p align="center">Made with ❤️ by <b>InputDev Team</b></p>
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@inputdev/sdk",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.3",
|
|
4
4
|
"description": "Backend de formulaires sans code - SDK JavaScript",
|
|
5
5
|
"main": "inputdev-sdk.prod.js",
|
|
6
6
|
"types": "inputdev-sdk.d.ts",
|
|
@@ -31,7 +31,7 @@
|
|
|
31
31
|
"bugs": {
|
|
32
32
|
"url": "https://github.com/inputdev/sdk/issues"
|
|
33
33
|
},
|
|
34
|
-
"homepage": "https://inputdev.dev",
|
|
34
|
+
"homepage": "https://inputdev.pages.dev",
|
|
35
35
|
"files": [
|
|
36
36
|
"inputdev-sdk.prod.js",
|
|
37
37
|
"inputdev-sdk.d.ts",
|