Hugging Face's logo

Spaces:
ernestmindres
/
Mailix
Build error

App Files Community
Mailix
File size: 14,658 Bytes 
21f6d0f
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
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
 
<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documentation API - Nexus</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/atom-one-dark.min.css">
    <style>

        body { font-family: 'Inter', sans-serif; }

        .code-block {

            background-color: #1f2937; /* gray-800 */

            border: 1px solid #3b82f6; /* blue-500 */

            padding: 1rem;

            /* Suppression des bords arrondis pour un look carré */

            overflow-x: auto;

            margin-top: 0.75rem;

        }

    </style>
</head>
<body class="bg-gray-900 text-white min-h-screen">
    
    <div class="container mx-auto p-4 sm:p-6 lg:p-8 max-w-6xl">

        <header class="flex flex-col sm:flex-row justify-between items-center py-4 border-b border-blue-500/50 mb-8">
            <a href="/" class="text-4xl font-extrabold text-blue-500 tracking-wider mb-4 sm:mb-0">
                NEXUS
            </a>
            <nav class="flex items-center space-x-4">
                <a href="/tarifs" class="px-4 py-2 text-white hover:text-blue-300 transition duration-200 font-medium">
                    Tarifs
                </a>
                <a href="/a-propos" class="px-4 py-2 text-white hover:text-blue-300 transition duration-200 font-medium">
                    À Propos
                </a>
                {% if is_logged_in %}
                    <a href="/dashboard" class="px-4 py-2 bg-blue-600 hover:bg-blue-700 font-medium transition duration-200">
                        Dashboard
                    </a>
                {% else %}
                    <a href="/connexion" class="px-4 py-2 bg-blue-600 hover:bg-blue-700 font-medium transition duration-200">
                        Connexion
                    </a>
                {% endif %}
            </nav>
        </header>

        <main class="space-y-16">
            
            <section class="text-center p-8 bg-gray-800/50 shadow-lg border border-gray-700">
                <h1 class="text-5xl font-extrabold text-white mb-4 leading-tight">
                    Documentation de l'API Nexus
                </h1>
                <p class="text-xl text-gray-300 max-w-4xl mx-auto">
                    Le guide complet pour intégrer l'authentification et la gestion utilisateur la plus sécurisée du marché dans vos applications, quel que soit votre langage.
                </p>
            </section>

            <section class="space-y-6">
                <h2 class="text-4xl font-extrabold text-blue-500 border-b-2 border-gray-700 pb-3">
                    1. Vue d'Ensemble & Clés API
                </h2>
                <p class="text-gray-300">
                    L'API Nexus est structurée autour d'une ressource unique pour l'authentification. Tous les appels nécessitent votre **Clé API** (`X-API-KEY`) pour l'identification de votre application, et un **Token JWT** pour les actions utilisateur spécifiques.
                </p>

                <div class="grid md:grid-cols-2 gap-6">
                    <div class="p-4 bg-gray-800 border-l-4 border-teal-500 shadow-md">
                        <h3 class="text-xl font-semibold text-teal-400 mb-2">Endpoint de Base :</h3>
                        <p class="font-mono text-sm code-block p-2 border-none">
                            <code class="text-gray-100">https://api.nexus-pro.com/v1/auth</code>
                        </p>
                        <p class="text-xs text-gray-400 mt-2">Ce chemin est la base de toutes les opérations d'authentification.</p>
                    </div>
                    <div class="p-4 bg-gray-800 border-l-4 border-yellow-500 shadow-md">
                        <h3 class="text-xl font-semibold text-yellow-400 mb-2">Clé API (Sécurité) :</h3>
                        <p class="font-mono text-sm code-block p-2 border-none">
                            <code class="text-gray-100">X-API-KEY: VOTRE_CLE_API_SECRETE</code>
                        </p>
                        <p class="text-xs text-gray-400 mt-2">À inclure dans l'entête de chaque requête (sauf mention contraire).</p>
                    </div>
                </div>
            </section>
            
            <section class="space-y-8">
                <h2 class="text-4xl font-extrabold text-blue-500 border-b-2 border-gray-700 pb-3">
                    2. Flux d'Authentification
                </h2>
                
                <h3 class="text-2xl font-semibold text-white border-b border-gray-800 pb-1">
                    2.1 S'inscrire (POST /register)
                </h3>
                <p class="text-gray-300">
                    Crée un nouvel utilisateur. Le système retourne le token JWT si l'inscription est réussie.
                </p>
                <div class="grid md:grid-cols-2 gap-8">
                    <div>
                        <p class="text-lg font-bold text-teal-400 mb-2">cURL (Exemple Rapide)</p>
                        <pre class="code-block"><code class="language-bash">curl -X POST &quot;https://api.nexus-pro.com/v1/auth/register&quot; \
-H &quot;X-API-KEY: VOTRE_CLE_API_SECRETE&quot; \
-H &quot;Content-Type: application/json&quot; \
-d '{
  &quot;email&quot;: &quot;utilisateur@exemple.com&quot;,
  &quot;password&quot;: &quot;motdepassefort123&quot;
}'</code></pre>
                    </div>
                    <div>
                        <p class="text-lg font-bold text-teal-400 mb-2">Python (`requests`)</p>
                        <pre class="code-block"><code class="language-python">import requests
import json
url = "https://api.nexus-pro.com/v1/auth/register"
headers = {
    "X-API-KEY": "VOTRE_CLE_API_SECRETE",
    "Content-Type": "application/json"
}
payload = {"email": "user@example.com", "password": "strongpassword123"}
response = requests.post(url, headers=headers, json=payload)
print(response.json())</code></pre>
                    </div>
                    <div class="md:col-span-2">
                         <p class="text-lg font-bold text-teal-400 mb-2">JavaScript (Fetch)</p>
                        <pre class="code-block"><code class="language-javascript">const url = 'https://api.nexus-pro.com/v1/auth/register';
const response = await fetch(url, {
  method: 'POST',
  headers: {
    'X-API-KEY': 'VOTRE_CLE_API_SECRETE',
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    email: 'user@example.com',
    password: 'strongpassword123'
  })
});
const data = await response.json();
console.log(data);</code></pre>
                    </div>
                </div>

                <h3 class="text-2xl font-semibold text-white border-b border-gray-800 pb-1 pt-6">
                    2.2 Se connecter (POST /login)
                </h3>
                <p class="text-gray-300">
                    Authentifie un utilisateur existant. La réponse contient le **Token JWT** pour les requêtes futures.
                </p>
                <div class="grid md:grid-cols-2 gap-8">
                    <div>
                        <p class="text-lg font-bold text-teal-400 mb-2">cURL</p>
                        <pre class="code-block"><code class="language-bash">curl -X POST &quot;https://api.nexus-pro.com/v1/auth/login&quot; \
-H &quot;X-API-KEY: VOTRE_CLE_API_SECRETE&quot; \
-H &quot;Content-Type: application/json&quot; \
-d '{
  &quot;email&quot;: &quot;utilisateur@exemple.com&quot;,
  &quot;password&quot;: &quot;motdepassefort123&quot;
}'</code></pre>
                    </div>
                    <div>
                        <p class="text-lg font-bold text-teal-400 mb-2">Python (`requests`)</p>
                        <pre class="code-block"><code class="language-python">import requests
url = "https://api.nexus-pro.com/v1/auth/login"
headers = {
    "X-API-KEY": "VOTRE_CLE_API_SECRETE",
    "Content-Type": "application/json"
}
payload = {"email": "user@example.com", "password": "strongpassword123"}
response = requests.post(url, headers=headers, json=payload)
token = response.json().get('jwt_token')
print(f"Token: {token}")</code></pre>
                    </div>
                </div>
            </section>

            <section class="space-y-8">
                <h2 class="text-4xl font-extrabold text-blue-500 border-b-2 border-gray-700 pb-3">
                    3. Gestion des Données Utilisateur (Token Requis)
                </h2>
                <p class="text-gray-300">
                    Toutes les requêtes de cette section doivent inclure l'entête <strong class="text-yellow-400">`Authorization: Bearer VOTRE_TOKEN_JWT`</strong> obtenu lors de la connexion.
                </p>

                <h3 class="text-2xl font-semibold text-white border-b border-gray-800 pb-1">
                    3.1 Récupérer les Informations Utilisateur (GET /user)
                </h3>
                <p class="text-gray-300">
                    Récupère le profil de l'utilisateur associé au Token JWT fourni.
                </p>
                <div class="grid md:grid-cols-2 gap-8">
                    <div>
                        <p class="text-lg font-bold text-teal-400 mb-2">cURL</p>
                        <pre class="code-block"><code class="language-bash">curl -X GET &quot;https://api.nexus-pro.com/v1/auth/user&quot; \
-H &quot;Authorization: Bearer VOTRE_TOKEN_JWT&quot;</code></pre>
                    </div>
                    <div>
                        <p class="text-lg font-bold text-teal-400 mb-2">JavaScript (Fetch)</p>
                        <pre class="code-block"><code class="language-javascript">const url = 'https://api.nexus-pro.com/v1/auth/user';
const userToken = localStorage.getItem('nexus_jwt'); // Exemple de récupération
const response = await fetch(url, {
  method: 'GET',
  headers: { 'Authorization': `Bearer ${userToken}` }
});
const data = await response.json();
console.log(data);</code></pre>
                    </div>
                </div>

                <h3 class="text-2xl font-semibold text-white border-b border-gray-800 pb-1 pt-6">
                    3.2 Mettre à Jour les Informations (PUT /user/update)
                </h3>
                <p class="text-gray-300">
                    Permet de modifier les informations de l'utilisateur (nom, prénom, etc.). Seuls les champs fournis sont mis à jour.
                </p>
                <div class="grid md:grid-cols-2 gap-8">
                    <div>
                        <p class="text-lg font-bold text-teal-400 mb-2">cURL</p>
                        <pre class="code-block"><code class="language-bash">curl -X PUT &quot;https://api.nexus-pro.com/v1/auth/user/update&quot; \
-H &quot;Authorization: Bearer VOTRE_TOKEN_JWT&quot; \
-H &quot;Content-Type: application/json&quot; \
-d '{
  &quot;first_name&quot;: &quot;Jean&quot;,
  &quot;last_name&quot;: &quot;Dupont&quot;
}'</code></pre>
                    </div>
                    <div>
                        <p class="text-lg font-bold text-teal-400 mb-2">Python (`requests`)</p>
                        <pre class="code-block"><code class="language-python">import requests
url = "https://api.nexus-pro.com/v1/auth/user/update"
token = "VOTRE_TOKEN_JWT"
headers = {
    "Authorization": f"Bearer {token}",
    "Content-Type": "application/json"
}
payload = {"first_name": "Jean", "last_name": "Dupont"}
response = requests.put(url, headers=headers, json=payload)
print(response.json())</code></pre>
                    </div>
                </div>
            </section>
            
            <section class="space-y-6">
                <h2 class="text-4xl font-extrabold text-blue-500 border-b-2 border-gray-700 pb-3">
                    4. Logs, Erreurs et Tarification
                </h2>
                <h3 class="text-2xl font-semibold text-white border-b border-gray-800 pb-1">
                    Gestion des Erreurs
                </h3>
                <p class="text-gray-300">
                    Toutes les erreurs API sont retournées avec un code d'état HTTP standard (4xx pour les erreurs clients, 5xx pour les erreurs serveurs). Le corps de la réponse contiendra une description JSON détaillée de l'erreur.
                </p>
                <div class="code-block bg-gray-800/80 p-4 border-l-4 border-red-500 text-sm">
                    <pre><code class="language-json">{
  &quot;error&quot;: true,
  &quot;status_code&quot;: 401,
  &quot;message&quot;: &quot;Token JWT manquant ou invalide. Veuillez vous reconnecter.&quot;
}</code></pre>
                </div>

                <h3 class="text-2xl font-semibold text-white border-b border-gray-800 pb-1 pt-6">
                    Accès aux Logs Détaillés
                </h3>
                <p class="text-gray-300">
                    Les utilisateurs du **Plan Professionnel** et supérieur bénéficient d'un accès à l'endpoint `/api-logs` pour un historique complet des tentatives de connexion, des échecs d'authentification et des activités du compte. Cette fonctionnalité est essentielle pour le monitoring de sécurité.
                </p>
                <div class="mt-4">
                    <a href="/tarifs" class="px-6 py-3 bg-teal-600 text-white text-lg font-bold shadow-md hover:bg-teal-700 transition duration-300">
                        Voir les Détails des Plans
                    </a>
                </div>
            </section>
            
        </main>

        <footer class="mt-12 pt-6 border-t border-gray-700 text-center text-gray-500 text-sm">
            &copy; 2024 Nexus. Documentation API.
        </footer>
    </div>
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/python.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/javascript.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/bash.min.js"></script>
    <script>

        // Active la coloration syntaxique après le chargement du DOM

        hljs.highlightAll();

    </script>
</body>
</html>