strapi-plugin-magic-link-v5 5.5.8 → 6.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.
Files changed (58) hide show
  1. package/CHANGELOG.md +740 -0
  2. package/README.md +662 -928
  3. package/dist/admin/LicenseGuard-BgLA9go3.mjs +495 -0
  4. package/dist/admin/LicenseGuard-ewCjpc17.js +513 -0
  5. package/dist/admin/de-B1FNErPH.mjs +673 -0
  6. package/dist/admin/de-e75OECdq.js +673 -0
  7. package/dist/admin/en-CABKGbxH.js +673 -0
  8. package/dist/admin/en-HqDOFBCc.mjs +673 -0
  9. package/dist/admin/es-DpWl0Fax.js +673 -0
  10. package/dist/admin/es-jb94jqPR.mjs +673 -0
  11. package/dist/admin/fr-BQhLPvYw.js +673 -0
  12. package/dist/admin/fr-BseH1wrr.mjs +673 -0
  13. package/dist/admin/index-6ot9j1cN.js +5268 -0
  14. package/dist/admin/index-B390rccl.js +622 -0
  15. package/dist/admin/index-BPGKtruf.mjs +5266 -0
  16. package/dist/admin/index-BaTIQtnA.js +3869 -0
  17. package/dist/admin/index-CmG-93yx.js +141 -0
  18. package/dist/admin/index-DXe_ge4v.mjs +620 -0
  19. package/dist/admin/index-Dv5PVT1E.mjs +3867 -0
  20. package/dist/admin/index-k240ls6p.mjs +142 -0
  21. package/dist/admin/index.js +3 -3
  22. package/dist/admin/index.mjs +1 -2
  23. package/dist/admin/pt-CPkaveti.js +673 -0
  24. package/dist/admin/pt-DhlSCJn2.mjs +673 -0
  25. package/dist/admin/useUnsavedChangesGuard-BVZ4Mg4E.js +225 -0
  26. package/dist/admin/useUnsavedChangesGuard-QnkiZTLP.mjs +224 -0
  27. package/dist/server/i18n/de.json +32 -1
  28. package/dist/server/i18n/en.json +32 -1
  29. package/dist/server/i18n/es.json +32 -1
  30. package/dist/server/i18n/fr.json +32 -1
  31. package/dist/server/i18n/pt.json +32 -1
  32. package/dist/server/index.js +7092 -5979
  33. package/dist/server/index.mjs +7114 -5979
  34. package/package.json +42 -41
  35. package/strapi-admin.js +3 -1
  36. package/strapi-server.js +3 -2
  37. package/dist/_chunks/LicenseGuard-CiyjFnrw.js +0 -54
  38. package/dist/_chunks/LicenseGuard-DJ5fq2UZ.mjs +0 -55
  39. package/dist/_chunks/de-BSOk5suQ.js +0 -454
  40. package/dist/_chunks/de-CwhYs3O3.mjs +0 -454
  41. package/dist/_chunks/en-DnvSpXvu.js +0 -454
  42. package/dist/_chunks/en-gXXgGDV1.mjs +0 -454
  43. package/dist/_chunks/es-B-tnwByt.js +0 -407
  44. package/dist/_chunks/es-DG5gW3RZ.mjs +0 -407
  45. package/dist/_chunks/fr-BKo8t7Fx.js +0 -407
  46. package/dist/_chunks/fr-BQn1OHOR.mjs +0 -407
  47. package/dist/_chunks/index-01GHNxSr.js +0 -307
  48. package/dist/_chunks/index-B9Ch8Jpe.mjs +0 -5066
  49. package/dist/_chunks/index-Bj-erY7g.mjs +0 -143
  50. package/dist/_chunks/index-CGxbhJfg.js +0 -142
  51. package/dist/_chunks/index-DF3Edydl.mjs +0 -330
  52. package/dist/_chunks/index-Dufv-daf.mjs +0 -305
  53. package/dist/_chunks/index-I72rBTkL.js +0 -332
  54. package/dist/_chunks/index-SCxv154G.mjs +0 -2904
  55. package/dist/_chunks/index-XYWLmmEs.js +0 -5068
  56. package/dist/_chunks/index-zzoovbM0.js +0 -2906
  57. package/dist/_chunks/pt-CjEkXBAz.js +0 -407
  58. package/dist/_chunks/pt-trziAOzT.mjs +0 -407
@@ -1,2904 +0,0 @@
1
- import { jsx, jsxs, Fragment } from "react/jsx-runtime";
2
- import { useState, useMemo, useCallback, useEffect } from "react";
3
- import styled, { keyframes } from "styled-components";
4
- import { useIntl } from "react-intl";
5
- import { Box, Typography, Flex, Button, Accordion, SingleSelect, SingleSelectOption, Grid, Switch, NumberInput, TextInput, Divider, Textarea, Badge } from "@strapi/design-system";
6
- import { Check, Cog, Lightning, Shield, Mail, CheckCircle, Code, Link, Lock, Key } from "@strapi/icons";
7
- import { useNotification, useFetchClient } from "@strapi/strapi/admin";
8
- import { g as getTrad } from "./index-Bj-erY7g.mjs";
9
- import { u as usePluginLanguage, L as LicenseGuard, a as LanguageProvider } from "./LicenseGuard-DJ5fq2UZ.mjs";
10
- const EMAIL_TEMPLATES = {
11
- modern: {
12
- name: "Modern Gradient",
13
- preview: "Modern design with gradient header",
14
- html: `<!DOCTYPE html>
15
- <html lang="en">
16
- <head>
17
- <meta charset="UTF-8">
18
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
19
- <title>Magic Link Login</title>
20
- </head>
21
- <body style="margin: 0; padding: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;">
22
- <table width="100%" cellpadding="0" cellspacing="0" style="background-color: #f7fafc; padding: 40px 20px;">
23
- <tr>
24
- <td align="center">
25
- <table width="600" cellpadding="0" cellspacing="0" style="background-color: #ffffff; border-radius: 16px; overflow: hidden; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.07);">
26
- <!-- Header with Gradient -->
27
- <tr>
28
- <td style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); padding: 40px 30px; text-align: center;">
29
- <h1 style="color: #ffffff; margin: 0; font-size: 28px; font-weight: 700; display: flex; align-items: center; justify-content: center; gap: 8px;">
30
- <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="display: inline-block; vertical-align: middle;"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect><path d="M7 11V7a5 5 0 0 1 10 0v4"></path></svg>
31
- Magic Link Login
32
- </h1>
33
- <p style="color: rgba(255, 255, 255, 0.9); margin: 10px 0 0; font-size: 16px;">
34
- Secure passwordless authentication
35
- </p>
36
- </td>
37
- </tr>
38
-
39
- <!-- Content -->
40
- <tr>
41
- <td style="padding: 40px 30px;">
42
- <h2 style="color: #2d3748; margin: 0 0 20px; font-size: 22px; font-weight: 600;">
43
- Click to login
44
- </h2>
45
- <p style="color: #4a5568; line-height: 1.6; margin: 0 0 30px; font-size: 16px;">
46
- We received a login request for your account. Click the button below to securely sign in.
47
- </p>
48
-
49
- <!-- Button -->
50
- <table width="100%" cellpadding="0" cellspacing="0">
51
- <tr>
52
- <td align="center" style="padding: 20px 0;">
53
- <a href="<%= URL %>?loginToken=<%= CODE %>"
54
- style="display: inline-block; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: #ffffff; padding: 16px 48px; border-radius: 12px; text-decoration: none; font-weight: 600; font-size: 16px; box-shadow: 0 4px 14px rgba(102, 126, 234, 0.4);">
55
- Sign In Securely
56
- </a>
57
- </td>
58
- </tr>
59
- </table>
60
-
61
- <p style="color: #718096; line-height: 1.6; margin: 30px 0 0; font-size: 14px;">
62
- Or copy and paste this link into your browser:<br>
63
- <a href="<%= URL %>?loginToken=<%= CODE %>" style="color: #667eea; word-break: break-all;"><%= URL %>?loginToken=<%= CODE %></a>
64
- </p>
65
- </td>
66
- </tr>
67
-
68
- <!-- Footer -->
69
- <tr>
70
- <td style="background-color: #f7fafc; padding: 30px; text-align: center; border-top: 1px solid #e2e8f0;">
71
- <p style="color: #718096; margin: 0 0 10px; font-size: 13px; display: flex; align-items: center; justify-content: center; gap: 6px;">
72
- <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="display: inline-block; vertical-align: middle;"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></svg>
73
- This link expires in <%= EXPIRY_TEXT %>
74
- </p>
75
- <p style="color: #a0aec0; margin: 0; font-size: 12px;">
76
- If you didn't request this, you can safely ignore this email.
77
- </p>
78
- </td>
79
- </tr>
80
- </table>
81
- </td>
82
- </tr>
83
- </table>
84
- </body>
85
- </html>`,
86
- text: `Magic Link Login
87
-
88
- Click to login:
89
- <%= URL %>?loginToken=<%= CODE %>
90
-
91
- This link expires in <%= EXPIRY_TEXT %>.
92
-
93
- If you didn't request this, you can safely ignore this email.`
94
- },
95
- minimal: {
96
- name: "Clean Minimal",
97
- preview: "Simple and elegant design",
98
- html: `<!DOCTYPE html>
99
- <html lang="en">
100
- <head>
101
- <meta charset="UTF-8">
102
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
103
- <title>Your Magic Link</title>
104
- </head>
105
- <body style="margin: 0; padding: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;">
106
- <table width="100%" cellpadding="0" cellspacing="0" style="background-color: #ffffff; padding: 60px 20px;">
107
- <tr>
108
- <td align="center">
109
- <table width="500" cellpadding="0" cellspacing="0">
110
- <tr>
111
- <td style="text-align: center; padding-bottom: 40px;">
112
- <div style="width: 64px; height: 64px; background: #0EA5E9; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;">
113
- <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path></svg>
114
- </div>
115
- </td>
116
- </tr>
117
- <tr>
118
- <td style="text-align: center;">
119
- <h1 style="color: #111827; margin: 0 0 16px; font-size: 32px; font-weight: 700;">
120
- Your Magic Link
121
- </h1>
122
- <p style="color: #6B7280; line-height: 1.6; margin: 0 0 40px; font-size: 16px;">
123
- Click the button below to sign in to your account
124
- </p>
125
-
126
- <a href="<%= URL %>?loginToken=<%= CODE %>"
127
- style="display: inline-block; background-color: #0EA5E9; color: #ffffff; padding: 16px 40px; border-radius: 8px; text-decoration: none; font-weight: 600; font-size: 16px;">
128
- Sign In
129
- </a>
130
-
131
- <p style="color: #9CA3AF; margin: 40px 0 0; font-size: 14px;">
132
- Link expires in 1 hour
133
- </p>
134
- </td>
135
- </tr>
136
- </table>
137
- </td>
138
- </tr>
139
- </table>
140
- </body>
141
- </html>`,
142
- text: `Your Magic Link
143
-
144
- Click to sign in:
145
- <%= URL %>?loginToken=<%= CODE %>
146
-
147
- Link expires in <%= EXPIRY_TEXT %>.`
148
- },
149
- professional: {
150
- name: "Professional Blue",
151
- preview: "Corporate and trustworthy",
152
- html: `<!DOCTYPE html>
153
- <html lang="en">
154
- <head>
155
- <meta charset="UTF-8">
156
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
157
- <title>Secure Login Request</title>
158
- </head>
159
- <body style="margin: 0; padding: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background-color: #F3F4F6;">
160
- <table width="100%" cellpadding="0" cellspacing="0" style="padding: 40px 20px;">
161
- <tr>
162
- <td align="center">
163
- <table width="600" cellpadding="0" cellspacing="0" style="background-color: #ffffff; border-radius: 8px; overflow: hidden;">
164
- <!-- Logo/Brand Area -->
165
- <tr>
166
- <td style="background-color: #1E40AF; padding: 30px; text-align: center;">
167
- <h1 style="color: #ffffff; margin: 0; font-size: 24px; font-weight: 600; letter-spacing: 0.5px;">
168
- SECURE ACCESS
169
- </h1>
170
- </td>
171
- </tr>
172
-
173
- <!-- Content -->
174
- <tr>
175
- <td style="padding: 40px 40px 30px;">
176
- <p style="color: #111827; margin: 0 0 20px; font-size: 16px; font-weight: 600;">
177
- Hello,
178
- </p>
179
- <p style="color: #4B5563; line-height: 1.6; margin: 0 0 30px; font-size: 15px;">
180
- You have requested secure access to your account. Please click the button below to proceed with authentication.
181
- </p>
182
-
183
- <!-- Button Container -->
184
- <table width="100%" cellpadding="0" cellspacing="0" style="margin: 0 0 30px;">
185
- <tr>
186
- <td align="center" style="padding: 10px 0;">
187
- <a href="<%= URL %>?loginToken=<%= CODE %>"
188
- style="display: inline-block; background-color: #1E40AF; color: #ffffff; padding: 14px 32px; border-radius: 6px; text-decoration: none; font-weight: 600; font-size: 15px;">
189
- Verify & Sign In
190
- </a>
191
- </td>
192
- </tr>
193
- </table>
194
-
195
- <!-- Security Info Box -->
196
- <table width="100%" cellpadding="0" cellspacing="0" style="background-color: #EFF6FF; border-left: 4px solid #3B82F6; padding: 16px; margin: 0 0 20px;">
197
- <tr>
198
- <td>
199
- <p style="color: #1E40AF; margin: 0; font-size: 13px; line-height: 1.5;">
200
- <strong>🔒 Security Notice:</strong><br>
201
- This link will expire in 60 minutes. For your security, do not share this link with anyone.
202
- </p>
203
- </td>
204
- </tr>
205
- </table>
206
-
207
- <p style="color: #6B7280; line-height: 1.6; margin: 0; font-size: 13px;">
208
- If you did not request this authentication, please disregard this email or contact support if you have concerns.
209
- </p>
210
- </td>
211
- </tr>
212
-
213
- <!-- Footer -->
214
- <tr>
215
- <td style="background-color: #F9FAFB; padding: 20px 40px; border-top: 1px solid #E5E7EB;">
216
- <p style="color: #9CA3AF; margin: 0; font-size: 12px; text-align: center;">
217
- This is an automated message. Please do not reply to this email.
218
- </p>
219
- </td>
220
- </tr>
221
- </table>
222
- </td>
223
- </tr>
224
- </table>
225
- </body>
226
- </html>`,
227
- text: `SECURE ACCESS
228
-
229
- Hello,
230
-
231
- You have requested secure access to your account.
232
-
233
- Click to verify and sign in:
234
- <%= URL %>?loginToken=<%= CODE %>
235
-
236
- Security Notice:
237
- This link will expire in <%= EXPIRY_TEXT %>. Do not share this link.
238
-
239
- If you did not request this, please disregard this email.`
240
- },
241
- dark: {
242
- name: "Dark Mode",
243
- preview: "Modern dark theme",
244
- html: `<!DOCTYPE html>
245
- <html lang="en">
246
- <head>
247
- <meta charset="UTF-8">
248
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
249
- <title>Magic Link</title>
250
- </head>
251
- <body style="margin: 0; padding: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;">
252
- <table width="100%" cellpadding="0" cellspacing="0" style="background-color: #0F172A; padding: 40px 20px;">
253
- <tr>
254
- <td align="center">
255
- <table width="600" cellpadding="0" cellspacing="0" style="background-color: #1E293B; border-radius: 16px; overflow: hidden; border: 1px solid #334155;">
256
- <!-- Header -->
257
- <tr>
258
- <td style="padding: 40px 30px; text-align: center; background: linear-gradient(135deg, #312E81 0%, #1E293B 100%);">
259
- <h1 style="color: #E0E7FF; margin: 0; font-size: 28px; font-weight: 700; display: flex; align-items: center; justify-content: center; gap: 8px;">
260
- <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="display: inline-block; vertical-align: middle;"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
261
- Magic Link
262
- </h1>
263
- <p style="color: #A5B4FC; margin: 10px 0 0; font-size: 16px;">
264
- Passwordless Authentication
265
- </p>
266
- </td>
267
- </tr>
268
-
269
- <!-- Content -->
270
- <tr>
271
- <td style="padding: 40px 30px;">
272
- <p style="color: #E2E8F0; line-height: 1.6; margin: 0 0 24px; font-size: 16px;">
273
- Hey there! 👋
274
- </p>
275
- <p style="color: #CBD5E1; line-height: 1.6; margin: 0 0 32px; font-size: 15px;">
276
- Click the magic button below to access your account. No passwords, no hassle.
277
- </p>
278
-
279
- <!-- Button -->
280
- <table width="100%" cellpadding="0" cellspacing="0">
281
- <tr>
282
- <td align="center" style="padding: 20px 0;">
283
- <a href="<%= URL %>?loginToken=<%= CODE %>"
284
- style="display: inline-flex; align-items: center; gap: 8px; background: linear-gradient(135deg, #6366F1 0%, #8B5CF6 100%); color: #ffffff; padding: 16px 48px; border-radius: 12px; text-decoration: none; font-weight: 600; font-size: 16px; box-shadow: 0 4px 20px rgba(99, 102, 241, 0.4);">
285
- <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2v20M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"></path></svg>
286
- Launch Access
287
- </a>
288
- </td>
289
- </tr>
290
- </table>
291
-
292
- <p style="color: #94A3B8; line-height: 1.6; margin: 32px 0 0; font-size: 13px; text-align: center;">
293
- Or paste this URL in your browser:<br>
294
- <span style="color: #818CF8; word-break: break-all;"><%= URL %>?loginToken=<%= CODE %></span>
295
- </p>
296
- </td>
297
- </tr>
298
-
299
- <!-- Footer -->
300
- <tr>
301
- <td style="background-color: #0F172A; padding: 24px 30px; text-align: center; border-top: 1px solid #334155;">
302
- <p style="color: #64748B; margin: 0 0 8px; font-size: 13px;">
303
- ⏰ Expires in 1 hour
304
- </p>
305
- <p style="color: #475569; margin: 0; font-size: 12px;">
306
- Didn't request this? Just ignore this email.
307
- </p>
308
- </td>
309
- </tr>
310
- </table>
311
- </td>
312
- </tr>
313
- </table>
314
- </body>
315
- </html>`,
316
- text: `Magic Link
317
-
318
- Hey there!
319
-
320
- Click the link below to access your account:
321
- <%= URL %>?loginToken=<%= CODE %>
322
-
323
- Expires in <%= EXPIRY_TEXT %>.
324
-
325
- Didn't request this? Just ignore this email.`
326
- },
327
- playful: {
328
- name: "Playful & Fun",
329
- preview: "Colorful and engaging",
330
- html: `<!DOCTYPE html>
331
- <html lang="en">
332
- <head>
333
- <meta charset="UTF-8">
334
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
335
- <title>Your Magic Link is Ready!</title>
336
- </head>
337
- <body style="margin: 0; padding: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;">
338
- <table width="100%" cellpadding="0" cellspacing="0" style="background: linear-gradient(135deg, #FEF3C7 0%, #FED7AA 50%, #FECACA 100%); padding: 40px 20px;">
339
- <tr>
340
- <td align="center">
341
- <table width="600" cellpadding="0" cellspacing="0" style="background-color: #ffffff; border-radius: 24px; overflow: hidden; box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);">
342
- <!-- Fun Header -->
343
- <tr>
344
- <td style="padding: 40px 30px 30px; text-align: center;">
345
- <div style="margin-bottom: 16px; display: inline-block;">
346
- <svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="#DC2626" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>
347
- </div>
348
- <h1 style="color: #DC2626; margin: 0; font-size: 32px; font-weight: 800;">
349
- Your Magic Link is Ready!
350
- </h1>
351
- <p style="color: #F59E0B; margin: 12px 0 0; font-size: 18px; font-weight: 600; display: flex; align-items: center; justify-content: center; gap: 6px;">
352
- Let's get you signed in
353
- <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="display: inline-block; vertical-align: middle;"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
354
- </p>
355
- </td>
356
- </tr>
357
-
358
- <!-- Content -->
359
- <tr>
360
- <td style="padding: 20px 40px 40px;">
361
- <p style="color: #374151; line-height: 1.7; margin: 0 0 30px; font-size: 16px; text-align: center;">
362
- Hey friend! We've prepared something special for you. Click the shiny button below to access your account!
363
- </p>
364
-
365
- <!-- Colorful Button -->
366
- <table width="100%" cellpadding="0" cellspacing="0">
367
- <tr>
368
- <td align="center" style="padding: 10px 0 30px;">
369
- <a href="<%= URL %>?loginToken=<%= CODE %>"
370
- style="display: inline-flex; align-items: center; gap: 8px; background: linear-gradient(135deg, #F59E0B 0%, #DC2626 100%); color: #ffffff; padding: 18px 54px; border-radius: 16px; text-decoration: none; font-weight: 700; font-size: 18px; box-shadow: 0 8px 16px rgba(245, 158, 11, 0.4); text-transform: uppercase; letter-spacing: 0.5px;">
371
- <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><polyline points="8 12 12 16 16 12"></polyline><line x1="12" y1="8" x2="12" y2="16"></line></svg>
372
- Click Here!
373
- </a>
374
- </td>
375
- </tr>
376
- </table>
377
-
378
- <!-- Fun Fact Box -->
379
- <table width="100%" cellpadding="0" cellspacing="0" style="background: linear-gradient(135deg, #DBEAFE 0%, #E0E7FF 100%); border-radius: 12px; padding: 20px; margin: 20px 0;">
380
- <tr>
381
- <td style="text-align: center;">
382
- <p style="color: #1E40AF; margin: 0; font-size: 14px; font-weight: 600; display: flex; align-items: center; justify-content: center; gap: 6px;">
383
- <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="display: inline-block; vertical-align: middle;"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="16" x2="12" y2="12"></line><line x1="12" y1="8" x2="12.01" y2="8"></line></svg>
384
- Pro Tip: Save this email for quick access later!
385
- </p>
386
- </td>
387
- </tr>
388
- </table>
389
-
390
- <p style="color: #6B7280; line-height: 1.6; margin: 20px 0 0; font-size: 13px; text-align: center;">
391
- Can't click? Copy & paste: <span style="color: #F59E0B; word-break: break-all;"><%= URL %>?loginToken=<%= CODE %></span>
392
- </p>
393
- </td>
394
- </tr>
395
-
396
- <!-- Footer -->
397
- <tr>
398
- <td style="background: linear-gradient(135deg, #FEF3C7 0%, #FECACA 100%); padding: 24px; text-align: center;">
399
- <p style="color: #B91C1C; margin: 0 0 8px; font-size: 14px; font-weight: 600; display: flex; align-items: center; justify-content: center; gap: 6px;">
400
- <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="display: inline-block; vertical-align: middle;"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></svg>
401
- Hurry! Link expires in <%= EXPIRY_TEXT %>
402
- </p>
403
- <p style="color: #DC2626; margin: 0; font-size: 12px;">
404
- Not you? No worries, just delete this email!
405
- </p>
406
- </td>
407
- </tr>
408
- </table>
409
- </td>
410
- </tr>
411
- </table>
412
- </body>
413
- </html>`,
414
- text: `Your Magic Link is Ready!
415
-
416
- Let's get you signed in!
417
-
418
- Click here:
419
- <%= URL %>?loginToken=<%= CODE %>
420
-
421
- Pro Tip: Save this email for quick access later!
422
-
423
- Hurry! Link expires in <%= EXPIRY_TEXT %>.
424
-
425
- Not you? No worries, just delete this email!`
426
- }
427
- };
428
- const getTemplateList = () => {
429
- return Object.entries(EMAIL_TEMPLATES).map(([key, template]) => ({
430
- value: key,
431
- label: template.name,
432
- preview: template.preview
433
- }));
434
- };
435
- const getTemplate = (key) => {
436
- return EMAIL_TEMPLATES[key] || EMAIL_TEMPLATES.modern;
437
- };
438
- const theme = {
439
- shadows: { sm: "0 1px 3px rgba(0,0,0,0.1)" },
440
- borderRadius: { md: "8px", lg: "12px" }
441
- };
442
- const fadeIn = keyframes`
443
- from { opacity: 0; transform: translateY(10px); }
444
- to { opacity: 1; transform: translateY(0); }
445
- `;
446
- const PlaceholderGrid = styled(Box)`
447
- display: grid;
448
- grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
449
- gap: 12px;
450
- `;
451
- const PlaceholderTile = styled(Box)`
452
- border-radius: 8px;
453
- border: 1px solid rgba(14, 165, 233, 0.3);
454
- background: rgba(14, 165, 233, 0.04);
455
- padding: 14px;
456
- cursor: pointer;
457
- display: flex;
458
- flex-direction: column;
459
- min-height: 120px;
460
- transition: all 0.15s ease;
461
-
462
- &:hover {
463
- transform: translateY(-2px);
464
- box-shadow: 0 6px 16px rgba(2, 132, 199, 0.15);
465
- border-color: rgba(14, 165, 233, 0.6);
466
- }
467
-
468
- &:active {
469
- transform: translateY(0);
470
- }
471
- `;
472
- keyframes`
473
- 0% { background-position: -200% 0; }
474
- 100% { background-position: 200% 0; }
475
- `;
476
- const Container = styled(Box)`
477
- animation: ${fadeIn} 0.5s;
478
- max-width: 1400px;
479
- margin: 0 auto;
480
- `;
481
- const ToggleCard = styled(Box)`
482
- background: ${(props) => props.$active ? "rgba(22, 163, 74, 0.08)" : "rgba(128, 128, 128, 0.06)"};
483
- border-radius: ${theme.borderRadius.md};
484
- padding: 20px;
485
- transition: all 0.2s ease;
486
- border: 2px solid ${(props) => props.$active ? "rgba(22, 163, 74, 0.4)" : "rgba(128, 128, 128, 0.2)"};
487
- box-shadow: ${(props) => props.$active ? "0 4px 12px rgba(34, 197, 94, 0.15)" : "0 1px 3px rgba(0, 0, 0, 0.1)"};
488
- position: relative;
489
- user-select: none;
490
- cursor: pointer;
491
-
492
- &:hover {
493
- transform: translateY(-2px);
494
- box-shadow: ${(props) => props.$active ? "0 6px 16px rgba(34, 197, 94, 0.25)" : "0 3px 8px rgba(128, 128, 128, 0.2)"};
495
- border-color: ${(props) => props.$active ? "rgba(22, 163, 74, 0.6)" : "rgba(128, 128, 128, 0.4)"};
496
- }
497
-
498
- &:active {
499
- transform: translateY(0px);
500
- box-shadow: ${(props) => props.$active ? "0 2px 6px rgba(34, 197, 94, 0.15)" : "0 1px 2px rgba(0, 0, 0, 0.1)"};
501
- }
502
-
503
- ${(props) => props.$active && `
504
- &::before {
505
- content: '${props.$statusLabel || ""}';
506
- position: absolute;
507
- top: 8px;
508
- right: 8px;
509
- background: #16A34A;
510
- color: white;
511
- padding: 2px 8px;
512
- border-radius: 4px;
513
- font-size: 10px;
514
- font-weight: bold;
515
- }
516
- `}
517
-
518
- ${(props) => !props.$active && `
519
- &::before {
520
- content: '${props.$statusLabel || ""}';
521
- position: absolute;
522
- top: 8px;
523
- right: 8px;
524
- background: rgba(128, 128, 128, 0.5);
525
- color: white;
526
- padding: 2px 8px;
527
- border-radius: 4px;
528
- font-size: 10px;
529
- font-weight: bold;
530
- }
531
- `}
532
- `;
533
- const GreenToggle = styled.div`
534
- ${(props) => props.$isActive && `
535
- button[role="switch"] {
536
- background-color: #16A34A !important;
537
- border-color: #16A34A !important;
538
-
539
- &:hover {
540
- background-color: #15803D !important;
541
- border-color: #15803D !important;
542
- }
543
-
544
- &:focus {
545
- background-color: #16A34A !important;
546
- border-color: #16A34A !important;
547
- box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.2) !important;
548
- }
549
- }
550
-
551
- /* Toggle handle */
552
- button[role="switch"] > span {
553
- background-color: white !important;
554
- }
555
- `}
556
-
557
- ${(props) => !props.$isActive && `
558
- button[role="switch"] {
559
- background-color: rgba(128, 128, 128, 0.3);
560
-
561
- &:hover {
562
- background-color: rgba(128, 128, 128, 0.4);
563
- }
564
- }
565
- `}
566
- `;
567
- const StickySaveBar = styled(Box)`
568
- position: sticky;
569
- top: 0;
570
- z-index: 10;
571
- border-bottom: 1px solid rgba(128, 128, 128, 0.2);
572
- box-shadow: ${theme.shadows.sm};
573
- `;
574
- const IconWrapper = styled.div`
575
- width: 48px;
576
- height: 48px;
577
- border-radius: 12px;
578
- display: flex;
579
- align-items: center;
580
- justify-content: center;
581
- margin-bottom: 12px;
582
- background: ${(props) => props.$bgColor || "rgba(2, 132, 199, 0.12)"};
583
-
584
- svg {
585
- width: 24px;
586
- height: 24px;
587
- color: ${(props) => props.$iconColor || "var(--colors-primary600, #0284C7)"};
588
- }
589
- `;
590
- const SettingsModern = () => {
591
- const { formatMessage } = useIntl();
592
- const { toggleNotification } = useNotification();
593
- const { get, put } = useFetchClient();
594
- const { language, changeLanguage } = usePluginLanguage();
595
- const [isLoading, setIsLoading] = useState(false);
596
- const [isSaving, setIsSaving] = useState(false);
597
- const [settings, setSettings] = useState({
598
- enabled: true,
599
- createUserIfNotExists: true,
600
- expire_period: 3600,
601
- confirmationUrl: "",
602
- from_name: "",
603
- from_email: "",
604
- response_email: "",
605
- token_length: 32,
606
- stays_valid: false,
607
- object: "",
608
- message_html: "",
609
- message_text: "",
610
- max_login_attempts: 5,
611
- context_whitelist: [],
612
- context_blacklist: ["password", "secret", "apiKey", "token"],
613
- login_path: "/magic-link/login",
614
- user_creation_strategy: "email",
615
- verify_email: false,
616
- welcome_email: false,
617
- use_jwt_token: true,
618
- jwt_token_expires_in: "30d",
619
- callback_url: "",
620
- allow_magic_links_on_public_registration: false,
621
- store_login_info: true,
622
- ui_language: "en",
623
- rate_limit_enabled: true,
624
- rate_limit_max_attempts: 5,
625
- rate_limit_window_minutes: 15,
626
- use_email_designer: false,
627
- email_designer_template_id: "",
628
- use_magic_mail: false,
629
- // OTP Settings
630
- otp_enabled: false,
631
- otp_type: "email",
632
- otp_length: 6,
633
- otp_expiry: 300,
634
- otp_max_attempts: 3,
635
- otp_resend_cooldown: 60,
636
- // MFA Settings
637
- mfa_mode: "disabled",
638
- mfa_require_totp: false,
639
- totp_as_primary_auth: false,
640
- // TOTP Settings
641
- totp_issuer: "Magic Link",
642
- totp_algorithm: "SHA1",
643
- totp_digits: 6,
644
- totp_period: 30,
645
- // WhatsApp Settings
646
- whatsapp_enabled: false,
647
- whatsapp_debug: false,
648
- whatsapp_app_name: "Magic Link",
649
- whatsapp_message_template: `*{{appName}} Login*
650
-
651
- Klicke auf den Link um dich einzuloggen:
652
-
653
- {{link}}
654
-
655
- Dieser Link ist {{expiry}} gültig.
656
-
657
- _Falls du diesen Link nicht angefordert hast, ignoriere diese Nachricht._`,
658
- // Frontend URL Settings
659
- frontend_url: "",
660
- frontend_login_path: "/auth/magic-link"
661
- });
662
- const [rateLimitStats, setRateLimitStats] = useState(null);
663
- const [emailDesignerInstalled, setEmailDesignerInstalled] = useState(false);
664
- const [magicMailInstalled, setMagicMailInstalled] = useState(false);
665
- const [emailProviderConfigured, setEmailProviderConfigured] = useState(false);
666
- const [emailProviderName, setEmailProviderName] = useState(null);
667
- const [otpCodes, setOtpCodes] = useState([]);
668
- const [selectedEmailTemplate, setSelectedEmailTemplate] = useState(null);
669
- const [textEditorHeight, setTextEditorHeight] = useState(300);
670
- const [licenseInfo, setLicenseInfo] = useState(null);
671
- const [magicMailTemplates, setMagicMailTemplates] = useState([]);
672
- const [emailTemplates, setEmailTemplates] = useState([]);
673
- const placeholderList = useMemo(() => [
674
- {
675
- code: formatMessage({ id: getTrad("settings.email.placeholders.url") }),
676
- desc: formatMessage({ id: getTrad("settings.email.placeholders.url.description") }),
677
- example: formatMessage({ id: getTrad("settings.email.placeholders.url.example") })
678
- },
679
- {
680
- code: formatMessage({ id: getTrad("settings.email.placeholders.code") }),
681
- desc: formatMessage({ id: getTrad("settings.email.placeholders.code.description") }),
682
- example: formatMessage({ id: getTrad("settings.email.placeholders.code.example") })
683
- },
684
- {
685
- code: formatMessage({ id: getTrad("settings.email.placeholders.expiry") }),
686
- desc: formatMessage({ id: getTrad("settings.email.placeholders.expiry.description") }),
687
- example: formatMessage({ id: getTrad("settings.email.placeholders.expiry.example") })
688
- },
689
- {
690
- code: formatMessage({ id: getTrad("settings.email.placeholders.link") }),
691
- desc: formatMessage({ id: getTrad("settings.email.placeholders.link.description") }),
692
- example: formatMessage({ id: getTrad("settings.email.placeholders.link.example") })
693
- },
694
- {
695
- code: formatMessage({ id: getTrad("settings.email.placeholders.username") }),
696
- desc: formatMessage({ id: getTrad("settings.email.placeholders.username.description") }),
697
- example: formatMessage({ id: getTrad("settings.email.placeholders.username.example") })
698
- },
699
- {
700
- code: formatMessage({ id: getTrad("settings.email.placeholders.email") }),
701
- desc: formatMessage({ id: getTrad("settings.email.placeholders.email.description") }),
702
- example: formatMessage({ id: getTrad("settings.email.placeholders.email.example") })
703
- }
704
- ], [formatMessage]);
705
- const [selectedTemplateKey, setSelectedTemplateKey] = useState(null);
706
- const loadSettings = useCallback(async () => {
707
- setIsLoading(true);
708
- try {
709
- const res = await get("/magic-link/settings");
710
- console.log("🔍 Settings Response:", res.data);
711
- const settingsData = res.data.settings || res.data.data || res.data;
712
- setSettings((prev) => ({ ...prev, ...settingsData }));
713
- if (res.data.emailDesignerInstalled !== void 0) {
714
- setEmailDesignerInstalled(res.data.emailDesignerInstalled);
715
- console.log("📧 Email Designer:", res.data.emailDesignerInstalled);
716
- }
717
- if (res.data.magicMailInstalled !== void 0) {
718
- setMagicMailInstalled(res.data.magicMailInstalled);
719
- console.log("📬 MagicMail:", res.data.magicMailInstalled);
720
- }
721
- if (res.data.emailProviderConfigured !== void 0) {
722
- setEmailProviderConfigured(res.data.emailProviderConfigured);
723
- console.log("✉️ Email Provider Configured:", res.data.emailProviderConfigured);
724
- }
725
- if (res.data.emailProviderName !== void 0) {
726
- setEmailProviderName(res.data.emailProviderName);
727
- console.log("📮 Email Provider Name:", res.data.emailProviderName);
728
- }
729
- try {
730
- const statsRes = await get("/magic-link/rate-limit/stats");
731
- if (statsRes?.data?.data) {
732
- setRateLimitStats(statsRes.data.data);
733
- }
734
- } catch (error) {
735
- console.error("Error loading rate limit stats:", error);
736
- }
737
- try {
738
- const licenseRes = await get("/magic-link/license/status");
739
- if (licenseRes?.data) {
740
- const licenseData = licenseRes.data.data || {};
741
- const enrichedLicenseInfo = {
742
- ...licenseData,
743
- tier: "enterprise",
744
- valid: licenseRes.data.valid !== false,
745
- hasKey: licenseRes.data.hasKey === true
746
- };
747
- setLicenseInfo(enrichedLicenseInfo);
748
- }
749
- } catch (error) {
750
- console.error("Error loading license info:", error);
751
- setLicenseInfo({ tier: "enterprise", valid: true, hasKey: false });
752
- }
753
- } catch (error) {
754
- if (error.name !== "AbortError") {
755
- console.error("Error loading settings:", error);
756
- toggleNotification({
757
- type: "warning",
758
- message: formatMessage({ id: getTrad("settings.load.error") })
759
- });
760
- }
761
- } finally {
762
- setIsLoading(false);
763
- }
764
- }, [get, toggleNotification, formatMessage]);
765
- useEffect(() => {
766
- const fetchEmailTemplates = async () => {
767
- if (!emailDesignerInstalled) return;
768
- try {
769
- const response = await get("/email-designer-5/templates");
770
- const payload = response?.data;
771
- const templates = Array.isArray(payload) ? payload : payload?.data || payload?.templates || [];
772
- setEmailTemplates(templates);
773
- console.log(`✅ Email Designer templates loaded: ${templates.length}`);
774
- } catch (error) {
775
- console.error("❌ Error fetching email templates:", error);
776
- setEmailTemplates([]);
777
- }
778
- };
779
- fetchEmailTemplates();
780
- }, [emailDesignerInstalled, get]);
781
- useEffect(() => {
782
- const fetchMagicMailTemplates = async () => {
783
- if (magicMailInstalled) {
784
- try {
785
- const response = await get("/magic-mail/designer/templates");
786
- const payload = response?.data;
787
- const templates = Array.isArray(payload) ? payload : payload?.data || payload?.templates || [];
788
- setMagicMailTemplates(templates);
789
- console.log(`✅ MagicMail templates loaded: ${templates.length}`);
790
- } catch (error) {
791
- console.error("❌ Error fetching MagicMail templates:", error);
792
- setMagicMailTemplates([]);
793
- }
794
- }
795
- };
796
- fetchMagicMailTemplates();
797
- }, [magicMailInstalled, get]);
798
- useEffect(() => {
799
- loadSettings();
800
- }, []);
801
- useEffect(() => {
802
- const templateEntry = getTemplateList().find(({ value }) => {
803
- const tpl = getTemplate(value);
804
- return tpl.html === settings.message_html && tpl.text === settings.message_text;
805
- });
806
- if (templateEntry && templateEntry.value !== selectedTemplateKey) {
807
- setSelectedTemplateKey(templateEntry.value);
808
- }
809
- }, [settings.message_html, settings.message_text, selectedTemplateKey]);
810
- const handleSave = async (e) => {
811
- e.preventDefault();
812
- setIsSaving(true);
813
- try {
814
- const toSave = { ...settings, ui_language: language };
815
- if (typeof toSave.context_whitelist === "string") {
816
- toSave.context_whitelist = toSave.context_whitelist.split(",").map((s) => s.trim()).filter(Boolean);
817
- }
818
- if (typeof toSave.context_blacklist === "string") {
819
- toSave.context_blacklist = toSave.context_blacklist.split(",").map((s) => s.trim()).filter(Boolean);
820
- }
821
- await put("/magic-link/settings", toSave);
822
- toggleNotification({
823
- type: "success",
824
- message: formatMessage({ id: getTrad("settings.save.success") })
825
- });
826
- } catch (error) {
827
- if (error.name !== "AbortError") {
828
- console.error("Error saving settings:", error);
829
- toggleNotification({
830
- type: "danger",
831
- message: formatMessage({ id: getTrad("settings.save.error") })
832
- });
833
- }
834
- } finally {
835
- setIsSaving(false);
836
- }
837
- };
838
- const updateSetting = (key, value) => {
839
- setSettings({ ...settings, [key]: value });
840
- };
841
- const handleLanguageChange = (newLang) => {
842
- changeLanguage(newLang);
843
- };
844
- const handleRateLimitCleanup = async () => {
845
- try {
846
- await get("/magic-link/rate-limit/cleanup");
847
- toggleNotification({
848
- type: "success",
849
- message: formatMessage({ id: getTrad("settings.rateLimit.cleanupSuccess") })
850
- });
851
- loadSettings();
852
- } catch (error) {
853
- toggleNotification({
854
- type: "danger",
855
- message: formatMessage({ id: getTrad("settings.rateLimit.cleanupError") })
856
- });
857
- }
858
- };
859
- const handleRateLimitReset = async () => {
860
- if (window.confirm(formatMessage({ id: getTrad("settings.rateLimit.resetConfirm") }))) {
861
- try {
862
- await get("/magic-link/rate-limit/reset");
863
- toggleNotification({
864
- type: "success",
865
- message: formatMessage({ id: getTrad("settings.rateLimit.resetSuccess") })
866
- });
867
- loadSettings();
868
- } catch (error) {
869
- toggleNotification({
870
- type: "danger",
871
- message: formatMessage({ id: getTrad("settings.rateLimit.resetError") })
872
- });
873
- }
874
- }
875
- };
876
- if (isLoading) {
877
- return /* @__PURE__ */ jsx(Box, { padding: 8, children: /* @__PURE__ */ jsx(Typography, { children: formatMessage({ id: getTrad("settings.load.loading") }) }) });
878
- }
879
- const statusActive = formatMessage({ id: getTrad("status.active") });
880
- const statusInactive = formatMessage({ id: getTrad("status.inactive") });
881
- return /* @__PURE__ */ jsxs(Container, { as: "form", onSubmit: handleSave, children: [
882
- /* @__PURE__ */ jsx(StickySaveBar, { background: "neutral0", paddingTop: 5, paddingBottom: 5, paddingLeft: 6, paddingRight: 6, children: /* @__PURE__ */ jsxs(Flex, { justifyContent: "space-between", alignItems: "center", children: [
883
- /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: 1, alignItems: "flex-start", children: [
884
- /* @__PURE__ */ jsx(Typography, { variant: "alpha", fontWeight: "bold", textColor: "neutral800", tag: "h1", style: { fontSize: "24px" }, children: formatMessage({ id: getTrad("settings.page.title") }) }),
885
- /* @__PURE__ */ jsx(Typography, { variant: "epsilon", textColor: "neutral600", tag: "p", children: formatMessage({ id: getTrad("settings.page.subtitle") }) })
886
- ] }),
887
- /* @__PURE__ */ jsx(
888
- Button,
889
- {
890
- type: "submit",
891
- loading: isSaving,
892
- startIcon: /* @__PURE__ */ jsx(Check, {}),
893
- disabled: isSaving,
894
- size: "L",
895
- style: {
896
- background: "linear-gradient(135deg, #667eea 0%, #764ba2 100%)",
897
- color: "white",
898
- fontWeight: "600",
899
- padding: "12px 24px",
900
- border: "none",
901
- boxShadow: "0 4px 12px rgba(102, 126, 234, 0.4)",
902
- transition: "all 0.3s cubic-bezier(0.4, 0, 0.2, 1)"
903
- },
904
- onMouseEnter: (e) => {
905
- if (!isSaving) {
906
- e.currentTarget.style.transform = "translateY(-2px)";
907
- e.currentTarget.style.boxShadow = "0 8px 20px rgba(102, 126, 234, 0.5)";
908
- }
909
- },
910
- onMouseLeave: (e) => {
911
- e.currentTarget.style.transform = "translateY(0)";
912
- e.currentTarget.style.boxShadow = "0 4px 12px rgba(102, 126, 234, 0.4)";
913
- },
914
- children: isSaving ? formatMessage({ id: getTrad("settings.save.saving") }) : formatMessage({ id: getTrad("settings.save.button") })
915
- }
916
- )
917
- ] }) }),
918
- /* @__PURE__ */ jsxs(Box, { paddingTop: 6, paddingLeft: 6, paddingRight: 6, paddingBottom: 10, children: [
919
- /* @__PURE__ */ jsx(
920
- Box,
921
- {
922
- padding: 5,
923
- style: { borderRadius: theme.borderRadius.lg, border: "2px solid rgba(2, 132, 199, 0.3)", marginBottom: "24px", background: "rgba(2, 132, 199, 0.06)" },
924
- children: /* @__PURE__ */ jsxs(Flex, { gap: 3, alignItems: "flex-start", children: [
925
- /* @__PURE__ */ jsx(
926
- Box,
927
- {
928
- style: {
929
- width: "40px",
930
- height: "40px",
931
- borderRadius: "50%",
932
- background: "var(--colors-primary600, #0284C7)",
933
- display: "flex",
934
- alignItems: "center",
935
- justifyContent: "center",
936
- flexShrink: 0
937
- },
938
- children: /* @__PURE__ */ jsx(Cog, { style: { width: "20px", height: "20px", color: "white" } })
939
- }
940
- ),
941
- /* @__PURE__ */ jsxs(Box, { children: [
942
- /* @__PURE__ */ jsx(Typography, { variant: "pi", fontWeight: "bold", textColor: "neutral800", style: { fontSize: "14px", marginBottom: "4px", display: "block" }, children: formatMessage({ id: getTrad("settings.info.header") }) }),
943
- /* @__PURE__ */ jsxs(Typography, { variant: "pi", textColor: "neutral600", style: { lineHeight: "1.6", fontSize: "13px" }, children: [
944
- "• ",
945
- formatMessage({ id: getTrad("settings.info.line1") }),
946
- /* @__PURE__ */ jsx("br", {}),
947
- "• ",
948
- formatMessage({ id: getTrad("settings.info.line2") }),
949
- /* @__PURE__ */ jsx("br", {}),
950
- "• ",
951
- formatMessage({ id: getTrad("settings.info.line3") }),
952
- /* @__PURE__ */ jsx("br", {}),
953
- "• ",
954
- formatMessage({ id: getTrad("settings.info.line4") })
955
- ] })
956
- ] })
957
- ] })
958
- }
959
- ),
960
- /* @__PURE__ */ jsxs(Accordion.Root, { type: "multiple", defaultValue: ["general", "auth", "email", "mfa"], children: [
961
- /* @__PURE__ */ jsxs(Accordion.Item, { value: "general", children: [
962
- /* @__PURE__ */ jsx(Accordion.Header, { children: /* @__PURE__ */ jsx(
963
- Accordion.Trigger,
964
- {
965
- icon: Cog,
966
- description: formatMessage({ id: getTrad("settings.section.general.description") }),
967
- children: formatMessage({ id: getTrad("settings.section.general") })
968
- }
969
- ) }),
970
- /* @__PURE__ */ jsx(Accordion.Content, { children: /* @__PURE__ */ jsxs(Box, { padding: 6, children: [
971
- /* @__PURE__ */ jsx(Box, { background: "neutral50", padding: 4, style: { borderRadius: theme.borderRadius.md, border: "2px solid rgba(128, 128, 128, 0.2)", marginBottom: "24px" }, children: /* @__PURE__ */ jsxs(Flex, { gap: 4, alignItems: "center", children: [
972
- /* @__PURE__ */ jsx(Typography, { variant: "pi", fontWeight: "bold", style: { minWidth: "150px" }, children: formatMessage({ id: getTrad("settings.language.label") }) }),
973
- /* @__PURE__ */ jsx(Box, { style: { width: "200px" }, children: /* @__PURE__ */ jsxs(
974
- SingleSelect,
975
- {
976
- value: language,
977
- onChange: handleLanguageChange,
978
- size: "S",
979
- children: [
980
- /* @__PURE__ */ jsx(SingleSelectOption, { value: "en", children: formatMessage({ id: getTrad("settings.language.en") }) }),
981
- /* @__PURE__ */ jsx(SingleSelectOption, { value: "de", children: formatMessage({ id: getTrad("settings.language.de") }) }),
982
- /* @__PURE__ */ jsx(SingleSelectOption, { value: "fr", children: formatMessage({ id: getTrad("settings.language.fr") }) }),
983
- /* @__PURE__ */ jsx(SingleSelectOption, { value: "es", children: formatMessage({ id: getTrad("settings.language.es") }) }),
984
- /* @__PURE__ */ jsx(SingleSelectOption, { value: "pt", children: formatMessage({ id: getTrad("settings.language.pt") }) })
985
- ]
986
- }
987
- ) }),
988
- /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral600", style: { fontSize: "11px", flex: 1 }, children: formatMessage({ id: getTrad("settings.language.hint") }) })
989
- ] }) }),
990
- /* @__PURE__ */ jsxs(Box, { background: "neutral100", padding: 5, style: { borderRadius: theme.borderRadius.md, marginBottom: "24px" }, children: [
991
- /* @__PURE__ */ jsx(Typography, { variant: "sigma", fontWeight: "bold", style: { marginBottom: "8px", display: "block", textAlign: "center", color: "var(--colors-neutral700)" }, children: formatMessage({ id: getTrad("settings.features.title") }) }),
992
- /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral600", style: { marginBottom: "20px", display: "block", textAlign: "center", fontSize: "12px" }, children: formatMessage({ id: getTrad("settings.features.subtitle") }) }),
993
- /* @__PURE__ */ jsxs(Grid.Root, { gap: 4, children: [
994
- /* @__PURE__ */ jsx(Grid.Item, { col: 4, s: 6, xs: 12, children: /* @__PURE__ */ jsx(ToggleCard, { $active: settings.enabled, $statusLabel: settings.enabled ? statusActive : statusInactive, children: /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: 3, children: [
995
- /* @__PURE__ */ jsx(Flex, { justifyContent: "center", alignItems: "center", style: { marginBottom: "8px" }, children: /* @__PURE__ */ jsx(
996
- Switch,
997
- {
998
- checked: settings.enabled,
999
- onCheckedChange: (checked) => updateSetting("enabled", checked)
1000
- }
1001
- ) }),
1002
- /* @__PURE__ */ jsxs(Box, { children: [
1003
- /* @__PURE__ */ jsx(Typography, { variant: "pi", fontWeight: "bold", style: { fontSize: "14px", marginBottom: "6px", display: "block", textAlign: "center" }, children: formatMessage({ id: getTrad("settings.feature.enabled.title") }) }),
1004
- /* @__PURE__ */ jsx(Typography, { variant: "omega", textColor: "neutral600", style: { fontSize: "12px", lineHeight: "1.4", textAlign: "center" }, children: formatMessage({ id: getTrad("settings.feature.enabled.description") }) })
1005
- ] })
1006
- ] }) }) }),
1007
- /* @__PURE__ */ jsx(Grid.Item, { col: 4, s: 6, xs: 12, children: /* @__PURE__ */ jsx(ToggleCard, { $active: settings.createUserIfNotExists, $statusLabel: settings.createUserIfNotExists ? statusActive : statusInactive, children: /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: 3, children: [
1008
- /* @__PURE__ */ jsx(Flex, { justifyContent: "center", alignItems: "center", style: { marginBottom: "8px" }, children: /* @__PURE__ */ jsx(
1009
- Switch,
1010
- {
1011
- checked: settings.createUserIfNotExists,
1012
- onCheckedChange: (checked) => updateSetting("createUserIfNotExists", checked)
1013
- }
1014
- ) }),
1015
- /* @__PURE__ */ jsxs(Box, { children: [
1016
- /* @__PURE__ */ jsx(Typography, { variant: "pi", fontWeight: "bold", style: { fontSize: "14px", marginBottom: "6px", display: "block", textAlign: "center" }, children: formatMessage({ id: getTrad("settings.feature.createUser.title") }) }),
1017
- /* @__PURE__ */ jsx(Typography, { variant: "omega", textColor: "neutral600", style: { fontSize: "12px", lineHeight: "1.4", textAlign: "center" }, children: formatMessage({ id: getTrad("settings.feature.createUser.description") }) })
1018
- ] })
1019
- ] }) }) }),
1020
- /* @__PURE__ */ jsx(Grid.Item, { col: 4, s: 6, xs: 12, children: /* @__PURE__ */ jsx(ToggleCard, { $active: settings.stays_valid, $statusLabel: settings.stays_valid ? statusActive : statusInactive, children: /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: 3, children: [
1021
- /* @__PURE__ */ jsx(Flex, { justifyContent: "center", alignItems: "center", style: { marginBottom: "8px" }, children: /* @__PURE__ */ jsx(
1022
- Switch,
1023
- {
1024
- checked: settings.stays_valid,
1025
- onCheckedChange: (checked) => updateSetting("stays_valid", checked)
1026
- }
1027
- ) }),
1028
- /* @__PURE__ */ jsxs(Box, { children: [
1029
- /* @__PURE__ */ jsx(Typography, { variant: "pi", fontWeight: "bold", style: { fontSize: "14px", marginBottom: "6px", display: "block", textAlign: "center" }, children: formatMessage({ id: getTrad("settings.feature.staysValid.title") }) }),
1030
- /* @__PURE__ */ jsx(Typography, { variant: "omega", textColor: "neutral600", style: { fontSize: "12px", lineHeight: "1.4", textAlign: "center" }, children: formatMessage({ id: getTrad("settings.feature.staysValid.description") }) })
1031
- ] })
1032
- ] }) }) })
1033
- ] })
1034
- ] }),
1035
- /* @__PURE__ */ jsx(Typography, { variant: "sigma", fontWeight: "bold", style: { marginBottom: "16px", display: "block", color: "var(--colors-neutral700)" }, children: formatMessage({ id: getTrad("settings.time.title") }) }),
1036
- /* @__PURE__ */ jsxs(Grid.Root, { gap: 6, style: { marginBottom: "32px" }, children: [
1037
- /* @__PURE__ */ jsx(Grid.Item, { col: 6, s: 12, children: /* @__PURE__ */ jsxs(Box, { children: [
1038
- /* @__PURE__ */ jsx(Typography, { variant: "pi", fontWeight: "bold", style: { marginBottom: "8px", display: "block" }, children: formatMessage({ id: getTrad("settings.expire.label") }) }),
1039
- /* @__PURE__ */ jsx(
1040
- NumberInput,
1041
- {
1042
- hint: formatMessage({ id: getTrad("settings.expire.hint") }),
1043
- value: settings.expire_period,
1044
- onValueChange: (val) => updateSetting("expire_period", val),
1045
- placeholder: formatMessage({ id: getTrad("settings.expire.placeholder") })
1046
- }
1047
- ),
1048
- /* @__PURE__ */ jsx(Box, { padding: 2, background: "primary50", style: { borderRadius: "4px", marginTop: "8px" }, children: /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "primary700", style: { fontSize: "11px" }, children: formatMessage({ id: getTrad("settings.expire.recommendation") }) }) })
1049
- ] }) }),
1050
- /* @__PURE__ */ jsx(Grid.Item, { col: 6, s: 12, children: /* @__PURE__ */ jsxs(Box, { children: [
1051
- /* @__PURE__ */ jsx(Typography, { variant: "pi", fontWeight: "bold", style: { marginBottom: "8px", display: "block" }, children: formatMessage({ id: getTrad("settings.tokenLength.label") }) }),
1052
- /* @__PURE__ */ jsx(
1053
- NumberInput,
1054
- {
1055
- hint: formatMessage({ id: getTrad("settings.tokenLength.hint") }),
1056
- value: settings.token_length,
1057
- onValueChange: (val) => updateSetting("token_length", val),
1058
- placeholder: formatMessage({ id: getTrad("settings.tokenLength.placeholder") })
1059
- }
1060
- ),
1061
- /* @__PURE__ */ jsx(Box, { padding: 2, background: "success50", style: { borderRadius: "4px", marginTop: "8px" }, children: /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "success700", style: { fontSize: "11px" }, children: formatMessage({ id: getTrad("settings.tokenLength.recommendation") }, { length: settings.token_length }) }) })
1062
- ] }) })
1063
- ] }),
1064
- /* @__PURE__ */ jsx(Typography, { variant: "sigma", fontWeight: "bold", style: { marginBottom: "16px", display: "block", color: "var(--colors-neutral700)" }, children: formatMessage({ id: getTrad("settings.security.title") }) }),
1065
- /* @__PURE__ */ jsx(Grid.Root, { gap: 6, style: { marginBottom: "32px" }, children: /* @__PURE__ */ jsx(Grid.Item, { col: 12, children: /* @__PURE__ */ jsxs(Box, { children: [
1066
- /* @__PURE__ */ jsx(Typography, { variant: "pi", fontWeight: "bold", style: { marginBottom: "8px", display: "block" }, children: formatMessage({ id: getTrad("settings.maxAttempts.label") }) }),
1067
- /* @__PURE__ */ jsx(
1068
- NumberInput,
1069
- {
1070
- hint: formatMessage({ id: getTrad("settings.maxAttempts.hint") }),
1071
- value: settings.max_login_attempts,
1072
- onValueChange: (val) => updateSetting("max_login_attempts", val),
1073
- placeholder: formatMessage({ id: getTrad("settings.maxAttempts.placeholder") })
1074
- }
1075
- ),
1076
- /* @__PURE__ */ jsx(Box, { padding: 2, background: "warning50", style: { borderRadius: "4px", marginTop: "8px" }, children: /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "warning700", style: { fontSize: "11px" }, children: formatMessage({ id: getTrad("settings.maxAttempts.warning") }) }) })
1077
- ] }) }) }),
1078
- /* @__PURE__ */ jsx(Typography, { variant: "sigma", fontWeight: "bold", style: { marginBottom: "16px", display: "block", color: "var(--colors-neutral700)" }, children: formatMessage({ id: getTrad("settings.context.title") }) }),
1079
- /* @__PURE__ */ jsxs(Grid.Root, { gap: 6, style: { marginBottom: "32px" }, children: [
1080
- /* @__PURE__ */ jsx(Grid.Item, { col: 6, s: 12, children: /* @__PURE__ */ jsxs(Box, { children: [
1081
- /* @__PURE__ */ jsx(Typography, { variant: "pi", fontWeight: "bold", style: { marginBottom: "8px", display: "block" }, children: formatMessage({ id: getTrad("settings.context.whitelist.label") }) }),
1082
- /* @__PURE__ */ jsx(
1083
- TextInput,
1084
- {
1085
- hint: formatMessage({ id: getTrad("settings.context.whitelist.hint") }),
1086
- value: typeof settings.context_whitelist === "string" ? settings.context_whitelist : (settings.context_whitelist || []).join(", "),
1087
- onChange: (e) => {
1088
- updateSetting("context_whitelist", e.target.value);
1089
- },
1090
- onBlur: (e) => {
1091
- const value = typeof settings.context_whitelist === "string" ? settings.context_whitelist : "";
1092
- const list = value ? value.split(",").map((s) => s.trim()).filter(Boolean) : [];
1093
- updateSetting("context_whitelist", list);
1094
- },
1095
- placeholder: formatMessage({ id: getTrad("settings.context.whitelist.placeholder") })
1096
- }
1097
- ),
1098
- /* @__PURE__ */ jsx(Box, { padding: 2, background: "primary50", style: { borderRadius: "4px", marginTop: "8px" }, children: /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "primary700", style: { fontSize: "11px" }, children: formatMessage({ id: getTrad("settings.context.whitelist.info") }) }) })
1099
- ] }) }),
1100
- /* @__PURE__ */ jsx(Grid.Item, { col: 6, s: 12, children: /* @__PURE__ */ jsxs(Box, { children: [
1101
- /* @__PURE__ */ jsx(Typography, { variant: "pi", fontWeight: "bold", style: { marginBottom: "8px", display: "block" }, children: formatMessage({ id: getTrad("settings.context.blacklist.label") }) }),
1102
- /* @__PURE__ */ jsx(
1103
- TextInput,
1104
- {
1105
- hint: formatMessage({ id: getTrad("settings.context.blacklist.hint") }),
1106
- value: typeof settings.context_blacklist === "string" ? settings.context_blacklist : (settings.context_blacklist || []).join(", "),
1107
- onChange: (e) => {
1108
- updateSetting("context_blacklist", e.target.value);
1109
- },
1110
- onBlur: (e) => {
1111
- const value = typeof settings.context_blacklist === "string" ? settings.context_blacklist : "";
1112
- const list = value ? value.split(",").map((s) => s.trim()).filter(Boolean) : [];
1113
- updateSetting("context_blacklist", list);
1114
- },
1115
- placeholder: formatMessage({ id: getTrad("settings.context.blacklist.placeholder") })
1116
- }
1117
- ),
1118
- /* @__PURE__ */ jsx(Box, { padding: 2, background: "danger50", style: { borderRadius: "4px", marginTop: "8px" }, children: /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "danger700", style: { fontSize: "11px" }, children: formatMessage({ id: getTrad("settings.context.blacklist.info") }) }) })
1119
- ] }) })
1120
- ] }),
1121
- /* @__PURE__ */ jsx(Typography, { variant: "sigma", fontWeight: "bold", style: { marginBottom: "16px", display: "block", color: "var(--colors-neutral700)" }, children: formatMessage({ id: getTrad("settings.api.title") }) }),
1122
- /* @__PURE__ */ jsxs(Grid.Root, { gap: 6, children: [
1123
- /* @__PURE__ */ jsx(Grid.Item, { col: 12, children: /* @__PURE__ */ jsxs(Box, { children: [
1124
- /* @__PURE__ */ jsx(Typography, { variant: "pi", fontWeight: "bold", style: { marginBottom: "8px", display: "block" }, children: formatMessage({ id: getTrad("settings.loginPath.label") }) }),
1125
- /* @__PURE__ */ jsx(
1126
- TextInput,
1127
- {
1128
- hint: formatMessage({ id: getTrad("settings.loginPath.hint") }),
1129
- value: settings.login_path,
1130
- onChange: (e) => updateSetting("login_path", e.target.value),
1131
- placeholder: formatMessage({ id: getTrad("settings.loginPath.placeholder") })
1132
- }
1133
- ),
1134
- /* @__PURE__ */ jsx(Box, { padding: 2, background: "neutral100", style: { borderRadius: "4px", marginTop: "8px", border: "1px solid rgba(128, 128, 128, 0.2)" }, children: /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral700", style: { fontSize: "11px", fontFamily: "monospace" }, children: formatMessage({ id: getTrad("settings.loginPath.fullPath") }, { path: settings.login_path }) }) })
1135
- ] }) }),
1136
- /* @__PURE__ */ jsx(Grid.Item, { col: 12, children: /* @__PURE__ */ jsxs(Box, { children: [
1137
- /* @__PURE__ */ jsx(Typography, { variant: "pi", fontWeight: "bold", style: { marginBottom: "8px", display: "block" }, children: formatMessage({ id: getTrad("settings.confirmationUrl.label") }) }),
1138
- /* @__PURE__ */ jsx(
1139
- TextInput,
1140
- {
1141
- hint: formatMessage({ id: getTrad("settings.confirmationUrl.hint") }),
1142
- value: settings.confirmationUrl,
1143
- onChange: (e) => updateSetting("confirmationUrl", e.target.value),
1144
- placeholder: formatMessage({ id: getTrad("settings.confirmationUrl.placeholder") })
1145
- }
1146
- ),
1147
- /* @__PURE__ */ jsx(Box, { padding: 2, background: "primary50", style: { borderRadius: "4px", marginTop: "8px" }, children: /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "primary700", style: { fontSize: "11px" }, children: formatMessage({ id: getTrad("settings.confirmationUrl.example") }, { url: settings.confirmationUrl || "https://yourapp.com" }) }) })
1148
- ] }) }),
1149
- /* @__PURE__ */ jsx(Grid.Item, { col: 12, children: /* @__PURE__ */ jsxs(Box, { children: [
1150
- /* @__PURE__ */ jsx(Typography, { variant: "pi", fontWeight: "bold", style: { marginBottom: "8px", display: "block" }, children: formatMessage({ id: getTrad("settings.callbackUrl.label") }) }),
1151
- /* @__PURE__ */ jsx(
1152
- TextInput,
1153
- {
1154
- hint: formatMessage({ id: getTrad("settings.callbackUrl.hint") }),
1155
- value: settings.callback_url,
1156
- onChange: (e) => updateSetting("callback_url", e.target.value),
1157
- placeholder: formatMessage({ id: getTrad("settings.callbackUrl.placeholder") })
1158
- }
1159
- ),
1160
- /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral600", style: { fontSize: "11px", marginTop: "8px" }, children: formatMessage({ id: getTrad("settings.callbackUrl.note") }) })
1161
- ] }) }),
1162
- /* @__PURE__ */ jsxs(Grid.Item, { col: 12, children: [
1163
- /* @__PURE__ */ jsx(Divider, { style: { margin: "16px 0" } }),
1164
- /* @__PURE__ */ jsx(Typography, { variant: "delta", fontWeight: "bold", style: { marginBottom: "16px", display: "block" }, children: "Frontend URL (for SPA/Mobile Apps)" })
1165
- ] }),
1166
- /* @__PURE__ */ jsx(Grid.Item, { col: 6, s: 12, children: /* @__PURE__ */ jsxs(Box, { children: [
1167
- /* @__PURE__ */ jsx(Typography, { variant: "pi", fontWeight: "bold", style: { marginBottom: "8px", display: "block" }, children: "Frontend Base URL" }),
1168
- /* @__PURE__ */ jsx(
1169
- TextInput,
1170
- {
1171
- value: settings.frontend_url || "",
1172
- onChange: (e) => updateSetting("frontend_url", e.target.value),
1173
- placeholder: "https://myapp.com"
1174
- }
1175
- ),
1176
- /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral600", style: { fontSize: "11px", marginTop: "8px" }, children: "Base URL deiner Frontend-App (React, Vue, etc.). Wenn leer, wird confirmationUrl verwendet." })
1177
- ] }) }),
1178
- /* @__PURE__ */ jsx(Grid.Item, { col: 6, s: 12, children: /* @__PURE__ */ jsxs(Box, { children: [
1179
- /* @__PURE__ */ jsx(Typography, { variant: "pi", fontWeight: "bold", style: { marginBottom: "8px", display: "block" }, children: "Login Path" }),
1180
- /* @__PURE__ */ jsx(
1181
- TextInput,
1182
- {
1183
- value: settings.frontend_login_path || "/auth/magic-link",
1184
- onChange: (e) => updateSetting("frontend_login_path", e.target.value),
1185
- placeholder: "/auth/magic-link"
1186
- }
1187
- ),
1188
- /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral600", style: { fontSize: "11px", marginTop: "8px" }, children: "Pfad der an die Frontend URL angehaengt wird." })
1189
- ] }) }),
1190
- /* @__PURE__ */ jsx(Grid.Item, { col: 12, children: /* @__PURE__ */ jsxs(Box, { padding: 3, background: "primary50", style: { borderRadius: "8px", marginTop: "8px" }, children: [
1191
- /* @__PURE__ */ jsx(Typography, { variant: "pi", fontWeight: "bold", style: { display: "block", marginBottom: "4px" }, children: "Resultierende Magic Link URL:" }),
1192
- /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "primary700", style: { fontFamily: "monospace", fontSize: "12px" }, children: settings.frontend_url ? `${settings.frontend_url.replace(/\/$/, "")}${settings.frontend_login_path || "/auth/magic-link"}?loginToken=ABC123` : `${settings.confirmationUrl || "http://localhost:1337/api/magic-link/login"}?loginToken=ABC123` })
1193
- ] }) })
1194
- ] })
1195
- ] }) })
1196
- ] }),
1197
- /* @__PURE__ */ jsxs(Accordion.Item, { value: "whatsapp", children: [
1198
- /* @__PURE__ */ jsx(Accordion.Header, { children: /* @__PURE__ */ jsx(
1199
- Accordion.Trigger,
1200
- {
1201
- icon: Lightning,
1202
- description: "WhatsApp-Nachricht anpassen und Delivery konfigurieren",
1203
- children: "WhatsApp Einstellungen"
1204
- }
1205
- ) }),
1206
- /* @__PURE__ */ jsx(Accordion.Content, { children: /* @__PURE__ */ jsx(Box, { padding: 6, children: /* @__PURE__ */ jsxs(Grid.Root, { gap: 4, children: [
1207
- /* @__PURE__ */ jsx(Grid.Item, { col: 12, children: /* @__PURE__ */ jsx(Box, { background: "success50", padding: 4, style: { borderRadius: "8px", border: "2px solid rgba(34, 197, 94, 0.4)", marginBottom: "16px" }, children: /* @__PURE__ */ jsxs(Flex, { gap: 3, alignItems: "flex-start", children: [
1208
- /* @__PURE__ */ jsx(Lightning, { style: { color: "#22C55E", width: "24px", height: "24px", flexShrink: 0, marginTop: "2px" } }),
1209
- /* @__PURE__ */ jsxs(Box, { children: [
1210
- /* @__PURE__ */ jsx(Typography, { variant: "delta", fontWeight: "bold", style: { display: "block", marginBottom: "4px" }, children: "WhatsApp Magic Link Delivery" }),
1211
- /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral600", children: "Sende Magic Links kostenlos via WhatsApp anstatt per Email. Die Nachricht kann hier angepasst werden." })
1212
- ] })
1213
- ] }) }) }),
1214
- /* @__PURE__ */ jsx(Grid.Item, { col: 6, s: 12, children: /* @__PURE__ */ jsxs(Box, { children: [
1215
- /* @__PURE__ */ jsx(Typography, { variant: "pi", fontWeight: "bold", style: { marginBottom: "8px", display: "block" }, children: "App Name (in WhatsApp Nachricht)" }),
1216
- /* @__PURE__ */ jsx(
1217
- TextInput,
1218
- {
1219
- value: settings.whatsapp_app_name || "Magic Link",
1220
- onChange: (e) => updateSetting("whatsapp_app_name", e.target.value),
1221
- placeholder: "Magic Link"
1222
- }
1223
- ),
1224
- /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral600", style: { fontSize: "11px", marginTop: "8px" }, children: "Wird in der WhatsApp-Nachricht als App-Name angezeigt." })
1225
- ] }) }),
1226
- /* @__PURE__ */ jsx(Grid.Item, { col: 6, s: 12, children: /* @__PURE__ */ jsx(Flex, { direction: "column", gap: 3, children: /* @__PURE__ */ jsx(ToggleCard, { $active: settings.whatsapp_debug, $statusLabel: settings.whatsapp_debug ? "DEBUG" : "OFF", onClick: () => updateSetting("whatsapp_debug", !settings.whatsapp_debug), children: /* @__PURE__ */ jsxs(Flex, { gap: 3, alignItems: "center", children: [
1227
- /* @__PURE__ */ jsx(GreenToggle, { $isActive: settings.whatsapp_debug, children: /* @__PURE__ */ jsx(Switch, { checked: settings.whatsapp_debug, onCheckedChange: (checked) => updateSetting("whatsapp_debug", checked) }) }),
1228
- /* @__PURE__ */ jsxs(Box, { children: [
1229
- /* @__PURE__ */ jsx(Typography, { variant: "omega", fontWeight: "bold", children: "Debug Mode" }),
1230
- /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral600", style: { fontSize: "11px" }, children: "Aktiviert ausfuehrliche WhatsApp-Logs" })
1231
- ] })
1232
- ] }) }) }) }),
1233
- /* @__PURE__ */ jsx(Grid.Item, { col: 12, children: /* @__PURE__ */ jsxs(Box, { children: [
1234
- /* @__PURE__ */ jsx(Typography, { variant: "pi", fontWeight: "bold", style: { marginBottom: "8px", display: "block" }, children: "WhatsApp Nachricht Template" }),
1235
- /* @__PURE__ */ jsx(
1236
- Textarea,
1237
- {
1238
- value: settings.whatsapp_message_template || "",
1239
- onChange: (e) => updateSetting("whatsapp_message_template", e.target.value),
1240
- style: { minHeight: "200px", fontFamily: "monospace", fontSize: "13px" }
1241
- }
1242
- ),
1243
- /* @__PURE__ */ jsxs(Box, { padding: 3, background: "neutral100", style: { borderRadius: "8px", marginTop: "12px" }, children: [
1244
- /* @__PURE__ */ jsx(Typography, { variant: "pi", fontWeight: "bold", style: { display: "block", marginBottom: "8px" }, children: "Verfuegbare Platzhalter:" }),
1245
- /* @__PURE__ */ jsxs(Flex, { gap: 2, wrap: "wrap", children: [
1246
- /* @__PURE__ */ jsx(Badge, { backgroundColor: "primary100", textColor: "primary700", children: "{{appName}}" }),
1247
- /* @__PURE__ */ jsx(Badge, { backgroundColor: "primary100", textColor: "primary700", children: "{{link}}" }),
1248
- /* @__PURE__ */ jsx(Badge, { backgroundColor: "primary100", textColor: "primary700", children: "{{expiry}}" })
1249
- ] }),
1250
- /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral600", style: { fontSize: "11px", marginTop: "8px", display: "block" }, children: "*text* = Fett, _text_ = Kursiv (WhatsApp Formatierung)" })
1251
- ] })
1252
- ] }) }),
1253
- /* @__PURE__ */ jsx(Grid.Item, { col: 12, children: /* @__PURE__ */ jsxs(Box, { padding: 4, background: "neutral50", style: { borderRadius: "8px", border: "1px solid rgba(128, 128, 128, 0.2)" }, children: [
1254
- /* @__PURE__ */ jsx(Typography, { variant: "pi", fontWeight: "bold", style: { display: "block", marginBottom: "8px" }, children: "Vorschau:" }),
1255
- /* @__PURE__ */ jsx(Box, { padding: 3, background: "neutral0", style: { borderRadius: "8px", whiteSpace: "pre-wrap", fontFamily: "system-ui", fontSize: "14px", lineHeight: "1.5", border: "1px solid rgba(128, 128, 128, 0.2)" }, children: (settings.whatsapp_message_template || "").replace(/\{\{appName\}\}/g, settings.whatsapp_app_name || "Magic Link").replace(/\{\{link\}\}/g, settings.frontend_url ? `${settings.frontend_url.replace(/\/$/, "")}${settings.frontend_login_path || "/auth/magic-link"}?loginToken=ABC123` : `${settings.confirmationUrl || "http://localhost:1337"}?loginToken=ABC123`).replace(/\{\{expiry\}\}/g, "1 Stunde") })
1256
- ] }) })
1257
- ] }) }) })
1258
- ] }),
1259
- /* @__PURE__ */ jsxs(Accordion.Item, { value: "auth", children: [
1260
- /* @__PURE__ */ jsx(Accordion.Header, { children: /* @__PURE__ */ jsx(
1261
- Accordion.Trigger,
1262
- {
1263
- icon: Shield,
1264
- description: formatMessage({ id: getTrad("settings.section.auth.description") }),
1265
- children: formatMessage({ id: getTrad("settings.section.auth") })
1266
- }
1267
- ) }),
1268
- /* @__PURE__ */ jsx(Accordion.Content, { children: /* @__PURE__ */ jsxs(Box, { padding: 6, children: [
1269
- /* @__PURE__ */ jsxs(Box, { background: "neutral100", padding: 5, style: { borderRadius: theme.borderRadius.md, marginBottom: "24px" }, children: [
1270
- /* @__PURE__ */ jsx(Typography, { variant: "sigma", fontWeight: "bold", style: { marginBottom: "8px", display: "block", textAlign: "center", color: "var(--colors-neutral700)" }, children: formatMessage({ id: getTrad("settings.auth.options.title") }) }),
1271
- /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral600", style: { marginBottom: "20px", display: "block", textAlign: "center", fontSize: "12px" }, children: formatMessage({ id: getTrad("settings.auth.options.subtitle") }) }),
1272
- /* @__PURE__ */ jsxs(Grid.Root, { gap: 4, children: [
1273
- /* @__PURE__ */ jsx(Grid.Item, { col: 3, s: 6, xs: 12, children: /* @__PURE__ */ jsx(ToggleCard, { $active: settings.verify_email, $statusLabel: settings.verify_email ? statusActive : statusInactive, children: /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: 3, children: [
1274
- /* @__PURE__ */ jsx(Flex, { justifyContent: "center", alignItems: "center", style: { marginBottom: "8px" }, children: /* @__PURE__ */ jsx(
1275
- Switch,
1276
- {
1277
- checked: settings.verify_email,
1278
- onCheckedChange: (checked) => updateSetting("verify_email", checked),
1279
- size: "L"
1280
- }
1281
- ) }),
1282
- /* @__PURE__ */ jsxs(Box, { children: [
1283
- /* @__PURE__ */ jsx(Typography, { variant: "pi", fontWeight: "bold", style: { fontSize: "14px", marginBottom: "6px", display: "block", textAlign: "center" }, children: formatMessage({ id: getTrad("settings.auth.verifyEmail.title") }) }),
1284
- /* @__PURE__ */ jsx(Typography, { variant: "omega", textColor: "neutral600", style: { fontSize: "12px", lineHeight: "1.4", textAlign: "center" }, children: formatMessage({ id: getTrad("settings.auth.verifyEmail.description") }) })
1285
- ] })
1286
- ] }) }) }),
1287
- /* @__PURE__ */ jsx(Grid.Item, { col: 3, s: 6, xs: 12, children: /* @__PURE__ */ jsx(ToggleCard, { $active: settings.welcome_email, $statusLabel: settings.welcome_email ? statusActive : statusInactive, children: /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: 3, children: [
1288
- /* @__PURE__ */ jsx(Flex, { justifyContent: "center", alignItems: "center", style: { marginBottom: "8px" }, children: /* @__PURE__ */ jsx(
1289
- Switch,
1290
- {
1291
- checked: settings.welcome_email,
1292
- onCheckedChange: (checked) => updateSetting("welcome_email", checked),
1293
- size: "L"
1294
- }
1295
- ) }),
1296
- /* @__PURE__ */ jsxs(Box, { children: [
1297
- /* @__PURE__ */ jsx(Typography, { variant: "pi", fontWeight: "bold", style: { fontSize: "14px", marginBottom: "6px", display: "block", textAlign: "center" }, children: formatMessage({ id: getTrad("settings.auth.welcomeEmail.title") }) }),
1298
- /* @__PURE__ */ jsx(Typography, { variant: "omega", textColor: "neutral600", style: { fontSize: "12px", lineHeight: "1.4", textAlign: "center" }, children: formatMessage({ id: getTrad("settings.auth.welcomeEmail.description") }) })
1299
- ] })
1300
- ] }) }) }),
1301
- /* @__PURE__ */ jsx(Grid.Item, { col: 3, s: 6, xs: 12, children: /* @__PURE__ */ jsx(ToggleCard, { $active: settings.use_jwt_token, $statusLabel: settings.use_jwt_token ? statusActive : statusInactive, children: /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: 3, children: [
1302
- /* @__PURE__ */ jsx(Flex, { justifyContent: "center", alignItems: "center", style: { marginBottom: "8px" }, children: /* @__PURE__ */ jsx(
1303
- Switch,
1304
- {
1305
- checked: settings.use_jwt_token,
1306
- onCheckedChange: (checked) => updateSetting("use_jwt_token", checked),
1307
- size: "L"
1308
- }
1309
- ) }),
1310
- /* @__PURE__ */ jsxs(Box, { children: [
1311
- /* @__PURE__ */ jsx(Typography, { variant: "pi", fontWeight: "bold", style: { fontSize: "14px", marginBottom: "6px", display: "block", textAlign: "center" }, children: formatMessage({ id: getTrad("settings.auth.useJwt.title") }) }),
1312
- /* @__PURE__ */ jsx(Typography, { variant: "omega", textColor: "neutral600", style: { fontSize: "12px", lineHeight: "1.4", textAlign: "center" }, children: formatMessage({ id: getTrad("settings.auth.useJwt.description") }) })
1313
- ] })
1314
- ] }) }) }),
1315
- /* @__PURE__ */ jsx(Grid.Item, { col: 3, s: 6, xs: 12, children: /* @__PURE__ */ jsx(ToggleCard, { $active: settings.store_login_info, $statusLabel: settings.store_login_info ? statusActive : statusInactive, children: /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: 3, children: [
1316
- /* @__PURE__ */ jsx(Flex, { justifyContent: "center", alignItems: "center", style: { marginBottom: "8px" }, children: /* @__PURE__ */ jsx(
1317
- Switch,
1318
- {
1319
- checked: settings.store_login_info,
1320
- onCheckedChange: (checked) => updateSetting("store_login_info", checked),
1321
- size: "L"
1322
- }
1323
- ) }),
1324
- /* @__PURE__ */ jsxs(Box, { children: [
1325
- /* @__PURE__ */ jsx(Typography, { variant: "pi", fontWeight: "bold", style: { fontSize: "14px", marginBottom: "6px", display: "block", textAlign: "center" }, children: formatMessage({ id: getTrad("settings.auth.storeLoginInfo.title") }) }),
1326
- /* @__PURE__ */ jsx(Typography, { variant: "omega", textColor: "neutral600", style: { fontSize: "12px", lineHeight: "1.4", textAlign: "center" }, children: formatMessage({ id: getTrad("settings.auth.storeLoginInfo.description") }) })
1327
- ] })
1328
- ] }) }) })
1329
- ] })
1330
- ] }),
1331
- /* @__PURE__ */ jsx(Typography, { variant: "sigma", fontWeight: "bold", style: { marginBottom: "16px", display: "block", color: "var(--colors-neutral700)" }, children: formatMessage({ id: getTrad("settings.auth.management.title") }) }),
1332
- /* @__PURE__ */ jsxs(Grid.Root, { gap: 6, children: [
1333
- /* @__PURE__ */ jsx(Grid.Item, { col: 12, children: /* @__PURE__ */ jsxs(Box, { children: [
1334
- /* @__PURE__ */ jsx(Typography, { variant: "pi", fontWeight: "bold", style: { marginBottom: "8px", display: "block" }, children: formatMessage({ id: getTrad("settings.auth.strategy.label") }) }),
1335
- /* @__PURE__ */ jsxs(
1336
- SingleSelect,
1337
- {
1338
- value: settings.user_creation_strategy,
1339
- onChange: (val) => updateSetting("user_creation_strategy", val),
1340
- children: [
1341
- /* @__PURE__ */ jsx(SingleSelectOption, { value: "email", children: formatMessage({ id: getTrad("settings.auth.strategy.email") }) }),
1342
- /* @__PURE__ */ jsx(SingleSelectOption, { value: "emailUsername", children: formatMessage({ id: getTrad("settings.auth.strategy.emailUsername") }) }),
1343
- /* @__PURE__ */ jsx(SingleSelectOption, { value: "manual", children: formatMessage({ id: getTrad("settings.auth.strategy.manual") }) })
1344
- ]
1345
- }
1346
- ),
1347
- /* @__PURE__ */ jsx(Box, { padding: 2, background: "neutral100", style: { borderRadius: "4px", marginTop: "8px", border: "1px solid rgba(128, 128, 128, 0.2)" }, children: /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral700", style: { fontSize: "11px" }, children: formatMessage({ id: getTrad("settings.auth.strategy.current") }, {
1348
- strategy: settings.user_creation_strategy === "email" ? formatMessage({ id: getTrad("settings.auth.strategy.email") }) : settings.user_creation_strategy === "emailUsername" ? formatMessage({ id: getTrad("settings.auth.strategy.emailUsername") }) : formatMessage({ id: getTrad("settings.auth.strategy.manual") })
1349
- }) }) })
1350
- ] }) }),
1351
- /* @__PURE__ */ jsx(Grid.Item, { col: 12, children: /* @__PURE__ */ jsxs(Box, { children: [
1352
- /* @__PURE__ */ jsx(Typography, { variant: "pi", fontWeight: "bold", style: { marginBottom: "8px", display: "block" }, children: formatMessage({ id: getTrad("settings.auth.jwtExpiration.label") }) }),
1353
- /* @__PURE__ */ jsx(
1354
- TextInput,
1355
- {
1356
- hint: formatMessage({ id: getTrad("settings.auth.jwtExpiration.hint") }),
1357
- value: settings.jwt_token_expires_in,
1358
- onChange: (e) => updateSetting("jwt_token_expires_in", e.target.value),
1359
- placeholder: formatMessage({ id: getTrad("settings.auth.jwtExpiration.placeholder") })
1360
- }
1361
- ),
1362
- /* @__PURE__ */ jsx(Box, { padding: 2, background: "success50", style: { borderRadius: "4px", marginTop: "8px" }, children: /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "success700", style: { fontSize: "11px" }, children: formatMessage({ id: getTrad("settings.auth.jwtExpiration.examples") }) }) })
1363
- ] }) })
1364
- ] })
1365
- ] }) })
1366
- ] }),
1367
- /* @__PURE__ */ jsxs(Accordion.Item, { value: "email", children: [
1368
- /* @__PURE__ */ jsx(Accordion.Header, { children: /* @__PURE__ */ jsx(
1369
- Accordion.Trigger,
1370
- {
1371
- icon: Mail,
1372
- description: formatMessage({ id: getTrad("settings.section.email.description") }),
1373
- children: formatMessage({ id: getTrad("settings.section.email") })
1374
- }
1375
- ) }),
1376
- /* @__PURE__ */ jsx(Accordion.Content, { children: /* @__PURE__ */ jsxs(Box, { padding: 6, children: [
1377
- !emailProviderConfigured && !magicMailInstalled && /* @__PURE__ */ jsx(
1378
- Box,
1379
- {
1380
- background: "danger100",
1381
- padding: 5,
1382
- style: {
1383
- borderRadius: theme.borderRadius.md,
1384
- marginBottom: "32px",
1385
- border: "2px solid rgba(239, 68, 68, 0.4)",
1386
- boxShadow: "0 4px 12px rgba(220, 38, 38, 0.15)"
1387
- },
1388
- children: /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: 3, children: [
1389
- /* @__PURE__ */ jsxs(Flex, { alignItems: "center", gap: 2, children: [
1390
- /* @__PURE__ */ jsx(Mail, { style: { color: "var(--colors-danger600, #DC2626)", width: "24px", height: "24px" } }),
1391
- /* @__PURE__ */ jsx(Typography, { variant: "delta", fontWeight: "bold", style: { color: "var(--colors-danger600, #B91C1C)" }, children: "⚠️ No Email Provider Configured" })
1392
- ] }),
1393
- /* @__PURE__ */ jsxs(Typography, { variant: "pi", style: { fontSize: "13px", color: "var(--colors-danger600, #B91C1C)", lineHeight: "1.6" }, children: [
1394
- /* @__PURE__ */ jsx("strong", { children: "Magic Link cannot send emails!" }),
1395
- " You need to configure an email provider for the plugin to work."
1396
- ] }),
1397
- /* @__PURE__ */ jsx(Divider, { style: { backgroundColor: "rgba(220, 38, 38, 0.3)" } }),
1398
- /* @__PURE__ */ jsx(Typography, { variant: "pi", fontWeight: "semiBold", style: { fontSize: "13px", color: "var(--colors-danger600, #991B1B)", marginBottom: "8px" }, children: "📋 Choose one of these options:" }),
1399
- /* @__PURE__ */ jsxs(Box, { paddingLeft: 3, children: [
1400
- /* @__PURE__ */ jsxs(Typography, { variant: "pi", style: { fontSize: "12px", color: "var(--colors-danger600, #B91C1C)", lineHeight: "1.8" }, children: [
1401
- /* @__PURE__ */ jsx("strong", { children: "1. Install Nodemailer (Recommended)" }),
1402
- /* @__PURE__ */ jsx("br", {}),
1403
- /* @__PURE__ */ jsx("code", { style: {
1404
- backgroundColor: "rgba(255,255,255,0.8)",
1405
- padding: "2px 6px",
1406
- borderRadius: "4px",
1407
- fontFamily: "monospace",
1408
- fontSize: "11px"
1409
- }, children: "npm install @strapi/provider-email-nodemailer" }),
1410
- /* @__PURE__ */ jsx("br", {}),
1411
- "Then configure in ",
1412
- /* @__PURE__ */ jsx("code", { children: "config/plugins.js" })
1413
- ] }),
1414
- /* @__PURE__ */ jsxs(Typography, { variant: "pi", style: { fontSize: "12px", color: "var(--colors-danger600, #B91C1C)", lineHeight: "1.8", marginTop: "12px", display: "block" }, children: [
1415
- /* @__PURE__ */ jsx("strong", { children: "2. Install MagicMail Plugin" }),
1416
- /* @__PURE__ */ jsx("br", {}),
1417
- "Advanced email routing with OAuth2, multi-account support, and analytics"
1418
- ] }),
1419
- /* @__PURE__ */ jsxs(Typography, { variant: "pi", style: { fontSize: "12px", color: "var(--colors-danger600, #B91C1C)", lineHeight: "1.8", marginTop: "12px", display: "block" }, children: [
1420
- /* @__PURE__ */ jsx("strong", { children: "3. Use other providers" }),
1421
- /* @__PURE__ */ jsx("br", {}),
1422
- "SendGrid, Mailgun, Amazon SES, or any Strapi email provider"
1423
- ] })
1424
- ] })
1425
- ] })
1426
- }
1427
- ),
1428
- (emailProviderConfigured || magicMailInstalled) && /* @__PURE__ */ jsx(
1429
- Box,
1430
- {
1431
- background: "success100",
1432
- padding: 4,
1433
- style: { borderRadius: theme.borderRadius.md, marginBottom: "24px", border: "2px solid rgba(34, 197, 94, 0.4)" },
1434
- children: /* @__PURE__ */ jsxs(Flex, { alignItems: "center", gap: 2, children: [
1435
- /* @__PURE__ */ jsx(Check, { style: { color: "var(--colors-success600, #16A34A)" } }),
1436
- /* @__PURE__ */ jsx(Typography, { variant: "pi", fontWeight: "semiBold", style: { color: "var(--colors-success600, #15803D)" }, children: magicMailInstalled ? "✅ Email Provider: MagicMail (Advanced Routing)" : `✅ Email Provider: ${emailProviderName || "Configured"}` })
1437
- ] })
1438
- }
1439
- ),
1440
- /* @__PURE__ */ jsx(Typography, { variant: "sigma", fontWeight: "bold", style: { marginBottom: "8px", display: "block", color: "var(--colors-neutral700)" }, children: formatMessage({ id: getTrad("settings.email.sender.title") }) }),
1441
- /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral600", style: { marginBottom: "20px", display: "block", fontSize: "12px" }, children: formatMessage({ id: getTrad("settings.email.sender.subtitle") }) }),
1442
- /* @__PURE__ */ jsxs(Grid.Root, { gap: 6, style: { marginBottom: "32px" }, children: [
1443
- /* @__PURE__ */ jsx(Grid.Item, { col: 4, s: 12, children: /* @__PURE__ */ jsxs(Box, { children: [
1444
- /* @__PURE__ */ jsx(Typography, { variant: "pi", fontWeight: "bold", style: { marginBottom: "8px", display: "block" }, children: formatMessage({ id: getTrad("settings.email.fromName.label") }) }),
1445
- /* @__PURE__ */ jsx(
1446
- TextInput,
1447
- {
1448
- hint: formatMessage({ id: getTrad("settings.email.fromName.hint") }),
1449
- value: settings.from_name,
1450
- onChange: (e) => updateSetting("from_name", e.target.value),
1451
- placeholder: formatMessage({ id: getTrad("settings.email.fromName.placeholder") })
1452
- }
1453
- ),
1454
- /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral600", style: { fontSize: "11px", marginTop: "6px" }, children: formatMessage({ id: getTrad("settings.email.fromName.example") }) })
1455
- ] }) }),
1456
- /* @__PURE__ */ jsx(Grid.Item, { col: 4, s: 12, children: /* @__PURE__ */ jsxs(Box, { children: [
1457
- /* @__PURE__ */ jsx(Typography, { variant: "pi", fontWeight: "bold", style: { marginBottom: "8px", display: "block" }, children: formatMessage({ id: getTrad("settings.email.fromEmail.label") }) }),
1458
- /* @__PURE__ */ jsx(
1459
- TextInput,
1460
- {
1461
- type: "email",
1462
- hint: formatMessage({ id: getTrad("settings.email.fromEmail.hint") }),
1463
- value: settings.from_email,
1464
- onChange: (e) => updateSetting("from_email", e.target.value),
1465
- placeholder: formatMessage({ id: getTrad("settings.email.fromEmail.placeholder") })
1466
- }
1467
- ),
1468
- /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral600", style: { fontSize: "11px", marginTop: "6px" }, children: formatMessage({ id: getTrad("settings.email.fromEmail.note") }) })
1469
- ] }) }),
1470
- /* @__PURE__ */ jsx(Grid.Item, { col: 4, s: 12, children: /* @__PURE__ */ jsxs(Box, { children: [
1471
- /* @__PURE__ */ jsx(Typography, { variant: "pi", fontWeight: "bold", style: { marginBottom: "8px", display: "block" }, children: formatMessage({ id: getTrad("settings.email.responseEmail.label") }) }),
1472
- /* @__PURE__ */ jsx(
1473
- TextInput,
1474
- {
1475
- type: "email",
1476
- hint: formatMessage({ id: getTrad("settings.email.responseEmail.hint") }),
1477
- value: settings.response_email,
1478
- onChange: (e) => updateSetting("response_email", e.target.value),
1479
- placeholder: formatMessage({ id: getTrad("settings.email.responseEmail.placeholder") })
1480
- }
1481
- ),
1482
- /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral600", style: { fontSize: "11px", marginTop: "6px" }, children: formatMessage({ id: getTrad("settings.email.responseEmail.note") }) })
1483
- ] }) }),
1484
- /* @__PURE__ */ jsx(Grid.Item, { col: 12, children: /* @__PURE__ */ jsxs(Box, { children: [
1485
- /* @__PURE__ */ jsx(Typography, { variant: "pi", fontWeight: "bold", style: { marginBottom: "8px", display: "block" }, children: formatMessage({ id: getTrad("settings.email.subject.label") }) }),
1486
- /* @__PURE__ */ jsx(
1487
- TextInput,
1488
- {
1489
- hint: formatMessage({ id: getTrad("settings.email.subject.hint") }),
1490
- value: settings.object,
1491
- onChange: (e) => updateSetting("object", e.target.value),
1492
- placeholder: formatMessage({ id: getTrad("settings.email.subject.placeholder") })
1493
- }
1494
- ),
1495
- /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral600", style: { fontSize: "11px", marginTop: "6px" }, children: formatMessage({ id: getTrad("settings.email.subject.note") }) })
1496
- ] }) })
1497
- ] }),
1498
- emailDesignerInstalled && /* @__PURE__ */ jsxs(Fragment, { children: [
1499
- /* @__PURE__ */ jsx(Divider, { style: { marginBottom: "24px" } }),
1500
- /* @__PURE__ */ jsxs(
1501
- Box,
1502
- {
1503
- padding: 5,
1504
- style: {
1505
- borderRadius: theme.borderRadius.lg,
1506
- border: "2px solid rgba(16, 185, 129, 0.4)",
1507
- marginBottom: "24px",
1508
- background: "rgba(16, 185, 129, 0.06)"
1509
- },
1510
- children: [
1511
- /* @__PURE__ */ jsxs(Flex, { alignItems: "center", gap: 3, style: { marginBottom: "12px" }, children: [
1512
- /* @__PURE__ */ jsx(Check, { width: "24px", height: "24px", style: { color: "#10b981" } }),
1513
- /* @__PURE__ */ jsx(Typography, { variant: "delta", fontWeight: "bold", textColor: "success600", children: "Email Designer Integration" }),
1514
- /* @__PURE__ */ jsx(Badge, { style: { backgroundColor: "#10b981", color: "white" }, children: "Active" })
1515
- ] }),
1516
- /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "success600", style: { fontSize: "13px" }, children: "Use your beautiful Email Designer 5 templates for Magic Link emails!" })
1517
- ]
1518
- }
1519
- ),
1520
- /* @__PURE__ */ jsx(
1521
- Box,
1522
- {
1523
- background: "neutral0",
1524
- padding: 5,
1525
- style: {
1526
- borderRadius: theme.borderRadius.lg,
1527
- border: "2px solid rgba(128, 128, 128, 0.2)",
1528
- marginBottom: "24px"
1529
- },
1530
- children: /* @__PURE__ */ jsxs(Grid.Root, { gap: 6, children: [
1531
- /* @__PURE__ */ jsxs(Grid.Item, { col: 12, children: [
1532
- /* @__PURE__ */ jsxs(Flex, { alignItems: "center", gap: 3, style: { marginBottom: "8px" }, children: [
1533
- /* @__PURE__ */ jsx(Typography, { variant: "pi", fontWeight: "bold", style: { fontSize: "15px" }, children: "Use Email Designer Template" }),
1534
- /* @__PURE__ */ jsx(GreenToggle, { $isActive: settings.use_email_designer || false, children: /* @__PURE__ */ jsx(
1535
- Switch,
1536
- {
1537
- checked: settings.use_email_designer || false,
1538
- onCheckedChange: (checked) => updateSetting("use_email_designer", checked)
1539
- }
1540
- ) })
1541
- ] }),
1542
- /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral600", style: { fontSize: "12px" }, children: "Enable to use a professionally designed template from Email Designer 5" })
1543
- ] }),
1544
- settings.use_email_designer && /* @__PURE__ */ jsxs(Grid.Item, { col: 12, children: [
1545
- /* @__PURE__ */ jsx(Divider, { style: { marginBottom: "16px", marginTop: "8px" } }),
1546
- /* @__PURE__ */ jsx(Typography, { variant: "pi", fontWeight: "bold", style: { marginBottom: "12px", display: "block", fontSize: "14px" }, children: "📋 Select Your Template" }),
1547
- /* @__PURE__ */ jsx(
1548
- Box,
1549
- {
1550
- padding: 4,
1551
- background: "primary50",
1552
- style: {
1553
- borderRadius: "8px",
1554
- border: "2px solid rgba(14, 165, 233, 0.3)",
1555
- marginBottom: "16px"
1556
- },
1557
- children: /* @__PURE__ */ jsx(
1558
- SingleSelect,
1559
- {
1560
- value: settings.email_designer_template_id,
1561
- onChange: (value) => {
1562
- updateSetting("email_designer_template_id", value);
1563
- toggleNotification({
1564
- type: "success",
1565
- message: "✅ Email Designer template selected!"
1566
- });
1567
- },
1568
- placeholder: "Choose a template from Email Designer...",
1569
- size: "L",
1570
- children: emailTemplates.map((template) => /* @__PURE__ */ jsxs(SingleSelectOption, { value: template.id.toString(), children: [
1571
- "📄 ",
1572
- template.name || template.subject || `Template #${template.id}`
1573
- ] }, template.id))
1574
- }
1575
- )
1576
- }
1577
- ),
1578
- emailTemplates.length > 0 ? /* @__PURE__ */ jsx(
1579
- Box,
1580
- {
1581
- background: "success100",
1582
- padding: 3,
1583
- style: { borderRadius: "6px", border: "1px solid rgba(34, 197, 94, 0.4)" },
1584
- children: /* @__PURE__ */ jsxs(Typography, { variant: "pi", style: { fontSize: "12px", color: "var(--colors-success600, #15803D)" }, children: [
1585
- "✨ ",
1586
- emailTemplates.length,
1587
- " template",
1588
- emailTemplates.length !== 1 ? "s" : "",
1589
- " available"
1590
- ] })
1591
- }
1592
- ) : /* @__PURE__ */ jsx(
1593
- Box,
1594
- {
1595
- background: "warning100",
1596
- padding: 3,
1597
- style: { borderRadius: "6px", border: "1px solid rgba(234, 179, 8, 0.4)" },
1598
- children: /* @__PURE__ */ jsx(Typography, { variant: "pi", style: { fontSize: "12px", color: "var(--colors-warning600, #A16207)" }, children: "⚠️ No templates found. Create one in Email Designer 5 first!" })
1599
- }
1600
- )
1601
- ] })
1602
- ] })
1603
- }
1604
- ),
1605
- /* @__PURE__ */ jsx(
1606
- Box,
1607
- {
1608
- background: "warning100",
1609
- padding: 3,
1610
- style: { borderRadius: theme.borderRadius.md, marginBottom: "24px", border: "1px solid rgba(234, 179, 8, 0.4)" },
1611
- children: /* @__PURE__ */ jsx(Typography, { variant: "pi", style: { fontSize: "12px", color: "var(--colors-warning600, #A16207)" }, children: formatMessage({ id: getTrad("settings.email.designer.variables") }) })
1612
- }
1613
- )
1614
- ] }),
1615
- magicMailInstalled && /* @__PURE__ */ jsxs(Fragment, { children: [
1616
- /* @__PURE__ */ jsx(Divider, { style: { marginBottom: "24px" } }),
1617
- /* @__PURE__ */ jsxs(
1618
- Box,
1619
- {
1620
- padding: 6,
1621
- style: {
1622
- borderRadius: "16px",
1623
- border: "none",
1624
- marginBottom: "24px",
1625
- background: "linear-gradient(135deg, #7C3AED 0%, #5B21B6 100%)",
1626
- boxShadow: "0 10px 25px rgba(124, 58, 237, 0.3)"
1627
- },
1628
- children: [
1629
- /* @__PURE__ */ jsxs(Flex, { alignItems: "center", gap: 3, style: { marginBottom: "12px" }, children: [
1630
- /* @__PURE__ */ jsx("div", { style: {
1631
- background: "rgba(255, 255, 255, 0.2)",
1632
- padding: "10px",
1633
- borderRadius: "12px",
1634
- display: "flex",
1635
- alignItems: "center",
1636
- justifyContent: "center"
1637
- }, children: /* @__PURE__ */ jsx(Mail, { width: "24px", height: "24px", style: { color: "white" } }) }),
1638
- /* @__PURE__ */ jsx(Typography, { variant: "delta", fontWeight: "bold", style: { color: "white", fontSize: "20px" }, children: "MagicMail Integration" }),
1639
- /* @__PURE__ */ jsx(
1640
- Box,
1641
- {
1642
- style: {
1643
- backgroundColor: "rgba(255, 255, 255, 0.2)",
1644
- color: "#FFFFFF",
1645
- border: "1px solid rgba(255, 255, 255, 0.5)",
1646
- borderRadius: "999px",
1647
- padding: "4px 14px",
1648
- fontSize: "11px",
1649
- fontWeight: 700,
1650
- textTransform: "uppercase",
1651
- letterSpacing: "0.8px"
1652
- },
1653
- children: "Active"
1654
- }
1655
- )
1656
- ] }),
1657
- /* @__PURE__ */ jsx(Typography, { variant: "pi", style: { color: "rgba(255, 255, 255, 0.9)", fontSize: "14px", lineHeight: "1.6" }, children: "Advanced email routing with OAuth2 accounts, automatic failover, and comprehensive analytics" })
1658
- ]
1659
- }
1660
- ),
1661
- /* @__PURE__ */ jsx(
1662
- Box,
1663
- {
1664
- background: "neutral0",
1665
- padding: 5,
1666
- style: {
1667
- borderRadius: theme.borderRadius.lg,
1668
- border: "2px solid rgba(128, 128, 128, 0.2)",
1669
- marginBottom: "24px"
1670
- },
1671
- children: /* @__PURE__ */ jsxs(Grid.Root, { gap: 6, children: [
1672
- /* @__PURE__ */ jsx(Grid.Item, { col: 12, children: /* @__PURE__ */ jsxs(Flex, { alignItems: "center", gap: 3, style: { marginBottom: "8px" }, children: [
1673
- /* @__PURE__ */ jsx(Typography, { variant: "pi", fontWeight: "bold", style: { fontSize: "15px" }, children: "Use MagicMail for Sending" }),
1674
- /* @__PURE__ */ jsx(GreenToggle, { $isActive: settings.use_magic_mail || false, children: /* @__PURE__ */ jsx(
1675
- Switch,
1676
- {
1677
- checked: settings.use_magic_mail || false,
1678
- onCheckedChange: (checked) => updateSetting("use_magic_mail", checked)
1679
- }
1680
- ) })
1681
- ] }) }),
1682
- settings.use_magic_mail && /* @__PURE__ */ jsxs(Grid.Item, { col: 12, children: [
1683
- /* @__PURE__ */ jsx(Divider, { style: { marginBottom: "20px", marginTop: "16px" } }),
1684
- /* @__PURE__ */ jsxs(
1685
- Box,
1686
- {
1687
- padding: 5,
1688
- style: {
1689
- borderRadius: "12px",
1690
- border: "2px solid rgba(139, 92, 246, 0.3)",
1691
- background: "rgba(124, 58, 237, 0.06)",
1692
- marginBottom: "16px"
1693
- },
1694
- children: [
1695
- /* @__PURE__ */ jsxs(Flex, { alignItems: "center", gap: 2, style: { marginBottom: "16px" }, children: [
1696
- /* @__PURE__ */ jsx("div", { style: {
1697
- background: "linear-gradient(135deg, #7C3AED 0%, #5B21B6 100%)",
1698
- padding: "8px",
1699
- borderRadius: "8px",
1700
- display: "flex",
1701
- alignItems: "center",
1702
- justifyContent: "center"
1703
- }, children: /* @__PURE__ */ jsx(Mail, { width: "16px", height: "16px", style: { color: "white" } }) }),
1704
- /* @__PURE__ */ jsx(Typography, { variant: "pi", fontWeight: "bold", style: { fontSize: "15px", color: "var(--colors-neutral800, #5B21B6)" }, children: "Select Email Template" })
1705
- ] }),
1706
- /* @__PURE__ */ jsx(
1707
- SingleSelect,
1708
- {
1709
- value: settings.magic_mail_template_id,
1710
- onChange: (value) => {
1711
- updateSetting("magic_mail_template_id", value);
1712
- const selectedTemplate = magicMailTemplates.find((t) => t.id.toString() === value);
1713
- toggleNotification({
1714
- type: "success",
1715
- message: `✅ Template "${selectedTemplate?.name || "Selected"}" is now active!`
1716
- });
1717
- },
1718
- placeholder: "🔍 Choose a template from MagicMail...",
1719
- size: "L",
1720
- children: magicMailTemplates.map((template) => /* @__PURE__ */ jsxs(SingleSelectOption, { value: template.id.toString(), children: [
1721
- "📧 ",
1722
- template.name || template.subject || `Template #${template.id}`
1723
- ] }, template.id))
1724
- }
1725
- ),
1726
- /* @__PURE__ */ jsx(Typography, { variant: "omega", textColor: "neutral500", style: { fontSize: "12px", marginTop: "12px", display: "block" }, children: "💡 Templates are managed in your MagicMail settings" })
1727
- ]
1728
- }
1729
- )
1730
- ] })
1731
- ] })
1732
- }
1733
- ),
1734
- /* @__PURE__ */ jsx(
1735
- Box,
1736
- {
1737
- background: "warning100",
1738
- padding: 3,
1739
- style: { borderRadius: theme.borderRadius.md, marginBottom: "24px", border: "1px solid rgba(234, 179, 8, 0.4)" },
1740
- children: /* @__PURE__ */ jsxs(Flex, { gap: 2, alignItems: "flex-start", children: [
1741
- /* @__PURE__ */ jsx(CheckCircle, { width: "14px", height: "14px", style: { color: "var(--colors-warning600, #A16207)", flexShrink: 0, marginTop: "2px" } }),
1742
- /* @__PURE__ */ jsxs(Typography, { variant: "pi", style: { fontSize: "12px", color: "var(--colors-warning600, #A16207)" }, children: [
1743
- /* @__PURE__ */ jsx("strong", { children: "Tip:" }),
1744
- " MagicMail will use your configured email accounts and routing rules. Make sure you have at least one active account configured in MagicMail settings."
1745
- ] })
1746
- ] })
1747
- }
1748
- )
1749
- ] }),
1750
- /* @__PURE__ */ jsx(Divider, { style: { marginBottom: "24px" } }),
1751
- /* @__PURE__ */ jsxs(Typography, { variant: "sigma", fontWeight: "bold", style: { marginBottom: "8px", display: "block", color: "var(--colors-neutral700)" }, children: [
1752
- formatMessage({ id: getTrad("settings.email.templates.title") }),
1753
- emailDesignerInstalled && settings.use_email_designer && /* @__PURE__ */ jsx(Badge, { style: { marginLeft: "8px", backgroundColor: "rgba(128, 128, 128, 0.3)" }, children: formatMessage({ id: getTrad("settings.email.designer.fallbackBadge") }) })
1754
- ] }),
1755
- /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral600", style: { marginBottom: "20px", display: "block", fontSize: "12px" }, children: emailDesignerInstalled && settings.use_email_designer ? formatMessage({ id: getTrad("settings.email.designer.fallbackDescription") }) : formatMessage({ id: getTrad("settings.email.templates.subtitle") }) }),
1756
- /* @__PURE__ */ jsxs(
1757
- Box,
1758
- {
1759
- background: "primary100",
1760
- padding: 3,
1761
- style: { borderRadius: theme.borderRadius.md, marginBottom: "16px", border: "2px solid rgba(14, 165, 233, 0.3)" },
1762
- children: [
1763
- /* @__PURE__ */ jsxs(Flex, { justifyContent: "space-between", alignItems: "center", style: { marginBottom: "12px" }, children: [
1764
- /* @__PURE__ */ jsxs(Typography, { variant: "pi", fontWeight: "bold", style: { color: "var(--colors-primary600, #075985)", fontSize: "13px" }, children: [
1765
- "📋 ",
1766
- formatMessage({ id: getTrad("settings.email.placeholders.title") })
1767
- ] }),
1768
- /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral600", style: { fontSize: "11px" }, children: formatMessage({ id: getTrad("settings.email.placeholders.clickToCopy") }) })
1769
- ] }),
1770
- /* @__PURE__ */ jsx(PlaceholderGrid, { children: placeholderList.map((placeholder) => /* @__PURE__ */ jsxs(
1771
- PlaceholderTile,
1772
- {
1773
- onClick: () => {
1774
- navigator.clipboard.writeText(placeholder.code);
1775
- toggleNotification({
1776
- type: "success",
1777
- message: formatMessage({ id: getTrad("settings.email.placeholders.copied") }, { placeholder: placeholder.code })
1778
- });
1779
- },
1780
- children: [
1781
- /* @__PURE__ */ jsxs(Flex, { alignItems: "center", justifyContent: "space-between", style: { marginBottom: "6px" }, children: [
1782
- /* @__PURE__ */ jsx(Typography, { variant: "pi", style: {
1783
- fontFamily: "monospace",
1784
- fontSize: "13px",
1785
- color: "var(--colors-primary600, #075985)",
1786
- fontWeight: "bold",
1787
- wordBreak: "break-all"
1788
- }, children: placeholder.code }),
1789
- /* @__PURE__ */ jsx(Badge, { size: "S", style: { backgroundColor: "#0EA5E9", color: "white" }, children: formatMessage({ id: getTrad("settings.email.placeholders.copyLabel") }) })
1790
- ] }),
1791
- /* @__PURE__ */ jsx(Typography, { variant: "omega", textColor: "neutral600", style: { fontSize: "11px", lineHeight: "1.4", flexGrow: 1 }, children: placeholder.desc }),
1792
- /* @__PURE__ */ jsx(Typography, { variant: "omega", style: { fontSize: "9px", color: "#999", fontFamily: "monospace", marginTop: "6px" }, children: placeholder.example })
1793
- ]
1794
- },
1795
- placeholder.code
1796
- )) })
1797
- ]
1798
- }
1799
- ),
1800
- !settings.use_magic_mail && /* @__PURE__ */ jsxs(Fragment, { children: [
1801
- /* @__PURE__ */ jsxs(
1802
- Box,
1803
- {
1804
- background: "neutral0",
1805
- padding: 5,
1806
- style: { borderRadius: theme.borderRadius.lg, border: "2px solid rgba(14, 165, 233, 0.4)", marginBottom: "24px", background: "rgba(14, 165, 233, 0.06)" },
1807
- children: [
1808
- /* @__PURE__ */ jsxs(Flex, { alignItems: "center", gap: 2, style: { marginBottom: "12px" }, children: [
1809
- /* @__PURE__ */ jsx(Mail, { width: "20px", height: "20px", style: { color: "#0EA5E9" } }),
1810
- /* @__PURE__ */ jsx(Typography, { variant: "delta", fontWeight: "bold", style: { color: "var(--colors-primary600, #0369A1)" }, children: "Email Template Gallery" }),
1811
- /* @__PURE__ */ jsx(Badge, { style: { backgroundColor: "#0EA5E9", color: "white" }, children: "New" })
1812
- ] }),
1813
- /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral600", style: { marginBottom: "16px", fontSize: "13px" }, children: "Choose from our professionally designed templates. Click to instantly load a beautiful template!" }),
1814
- /* @__PURE__ */ jsx(
1815
- Box,
1816
- {
1817
- style: {
1818
- display: "grid",
1819
- gridTemplateColumns: "repeat(auto-fit, minmax(190px, 1fr))",
1820
- gap: "12px"
1821
- },
1822
- children: getTemplateList().map((template) => {
1823
- const isActive = selectedTemplateKey === template.value;
1824
- return /* @__PURE__ */ jsxs(
1825
- Box,
1826
- {
1827
- role: "button",
1828
- tabIndex: 0,
1829
- background: "neutral0",
1830
- style: {
1831
- borderRadius: "10px",
1832
- border: `2px solid ${isActive ? "rgba(2, 132, 199, 0.6)" : "rgba(128, 128, 128, 0.2)"}`,
1833
- cursor: "pointer",
1834
- transition: "all 0.2s",
1835
- padding: "16px",
1836
- minHeight: "110px",
1837
- boxShadow: isActive ? "0 8px 20px rgba(2, 132, 199, 0.25)" : "0 2px 6px rgba(15, 23, 42, 0.08)",
1838
- background: isActive ? "rgba(14, 165, 233, 0.08)" : "rgba(128, 128, 128, 0.04)",
1839
- outline: "none",
1840
- display: "flex",
1841
- flexDirection: "column",
1842
- justifyContent: "space-between"
1843
- },
1844
- onClick: () => {
1845
- const selectedTemplate = getTemplate(template.value);
1846
- setSelectedTemplateKey(template.value);
1847
- setSettings((prev) => ({
1848
- ...prev,
1849
- message_html: selectedTemplate.html,
1850
- message_text: selectedTemplate.text
1851
- }));
1852
- toggleNotification({
1853
- type: "success",
1854
- message: `✨ Template "${template.label}" loaded!`
1855
- });
1856
- },
1857
- onKeyDown: (e) => {
1858
- if (e.key === "Enter" || e.key === " ") {
1859
- e.preventDefault();
1860
- const selectedTemplate = getTemplate(template.value);
1861
- setSelectedTemplateKey(template.value);
1862
- setSettings((prev) => ({
1863
- ...prev,
1864
- message_html: selectedTemplate.html,
1865
- message_text: selectedTemplate.text
1866
- }));
1867
- toggleNotification({
1868
- type: "success",
1869
- message: `✨ Template "${template.label}" loaded!`
1870
- });
1871
- }
1872
- },
1873
- children: [
1874
- /* @__PURE__ */ jsx(
1875
- Typography,
1876
- {
1877
- variant: "pi",
1878
- fontWeight: "bold",
1879
- style: {
1880
- marginBottom: "6px",
1881
- display: "block",
1882
- fontSize: "14px",
1883
- color: isActive ? "#0F172A" : "#111827"
1884
- },
1885
- children: template.label
1886
- }
1887
- ),
1888
- /* @__PURE__ */ jsx(
1889
- Typography,
1890
- {
1891
- variant: "omega",
1892
- textColor: "neutral600",
1893
- style: { fontSize: "12px", lineHeight: "1.4" },
1894
- children: template.preview
1895
- }
1896
- )
1897
- ]
1898
- },
1899
- template.value
1900
- );
1901
- })
1902
- }
1903
- )
1904
- ]
1905
- }
1906
- ),
1907
- /* @__PURE__ */ jsxs(Grid.Root, { gap: 8, children: [
1908
- /* @__PURE__ */ jsx(Grid.Item, { col: 12, children: /* @__PURE__ */ jsxs(
1909
- Box,
1910
- {
1911
- background: "neutral0",
1912
- padding: 6,
1913
- style: { borderRadius: theme.borderRadius.lg, border: "2px solid rgba(128, 128, 128, 0.2)", width: "100%" },
1914
- children: [
1915
- /* @__PURE__ */ jsxs(Flex, { justifyContent: "space-between", alignItems: "center", style: { marginBottom: "16px" }, children: [
1916
- /* @__PURE__ */ jsxs(Flex, { alignItems: "center", gap: 2, children: [
1917
- /* @__PURE__ */ jsx(Typography, { variant: "delta", fontWeight: "bold", style: { fontSize: "18px" }, children: formatMessage({ id: getTrad("settings.email.html.title") }) }),
1918
- /* @__PURE__ */ jsx(Badge, { variant: "success", children: formatMessage({ id: getTrad("settings.email.html.badge") }) })
1919
- ] }),
1920
- /* @__PURE__ */ jsx(
1921
- Button,
1922
- {
1923
- variant: "tertiary",
1924
- size: "S",
1925
- onClick: () => {
1926
- const defaultTemplate = `<!DOCTYPE html>
1927
- <html>
1928
- <head>
1929
- <meta charset="utf-8">
1930
- </head>
1931
- <body style="font-family: Arial, sans-serif; padding: 20px;">
1932
- <h2>Magic Link Login</h2>
1933
- <p>${formatMessage({ id: getTrad("settings.email.placeholders.url.description") })}</p>
1934
- <p><a href="<%= URL %>?loginToken=<%= CODE %>">${language === "de" ? "Jetzt anmelden" : "Sign in now"}</a></p>
1935
- <p style="color: #666; font-size: 14px;">${language === "de" ? "Der Link läuft in 1 Stunde ab." : "The link expires in 1 hour."}</p>
1936
- </body>
1937
- </html>`;
1938
- updateSetting("message_html", defaultTemplate);
1939
- toggleNotification({ type: "success", message: formatMessage({ id: getTrad("settings.email.html.defaultLoaded") }) });
1940
- },
1941
- children: formatMessage({ id: getTrad("settings.email.html.loadDefault") })
1942
- }
1943
- )
1944
- ] }),
1945
- /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral600", style: { marginBottom: "16px", display: "block", fontSize: "14px" }, children: formatMessage({ id: getTrad("settings.email.html.description") }) }),
1946
- /* @__PURE__ */ jsxs(
1947
- Box,
1948
- {
1949
- style: {
1950
- border: "2px solid rgba(128, 128, 128, 0.2)",
1951
- borderRadius: "6px",
1952
- overflow: "hidden",
1953
- background: "#1e1e1e",
1954
- height: "700px",
1955
- display: "flex",
1956
- flexDirection: "column"
1957
- },
1958
- children: [
1959
- /* @__PURE__ */ jsx(
1960
- Box,
1961
- {
1962
- padding: 2,
1963
- background: "neutral700",
1964
- style: { borderBottom: "1px solid #333", flexShrink: 0 },
1965
- children: /* @__PURE__ */ jsx(Typography, { variant: "omega", style: { color: "#888", fontSize: "11px", fontFamily: "monospace" }, children: formatMessage({ id: getTrad("settings.email.html.filename") }) })
1966
- }
1967
- ),
1968
- /* @__PURE__ */ jsx(
1969
- "textarea",
1970
- {
1971
- value: settings.message_html,
1972
- onChange: (e) => updateSetting("message_html", e.target.value),
1973
- style: {
1974
- fontFamily: 'Monaco, Consolas, "Courier New", monospace',
1975
- height: "100%",
1976
- fontSize: "14px",
1977
- lineHeight: "1.8",
1978
- background: "#1e1e1e",
1979
- color: "#d4d4d4",
1980
- border: "none",
1981
- padding: "20px",
1982
- resize: "none",
1983
- width: "100%",
1984
- boxSizing: "border-box",
1985
- outline: "none",
1986
- margin: 0,
1987
- display: "block",
1988
- overflow: "auto"
1989
- },
1990
- placeholder: formatMessage({ id: getTrad("settings.email.html.placeholder") })
1991
- }
1992
- )
1993
- ]
1994
- }
1995
- ),
1996
- /* @__PURE__ */ jsxs(Flex, { gap: 2, style: { marginTop: "12px" }, wrap: "wrap", children: [
1997
- /* @__PURE__ */ jsx(
1998
- Button,
1999
- {
2000
- variant: "secondary",
2001
- size: "S",
2002
- onClick: () => {
2003
- navigator.clipboard.writeText(settings.message_html);
2004
- toggleNotification({ type: "success", message: formatMessage({ id: getTrad("settings.email.html.copy") }) + "!" });
2005
- },
2006
- children: formatMessage({ id: getTrad("settings.email.html.copy") })
2007
- }
2008
- ),
2009
- /* @__PURE__ */ jsx(
2010
- Button,
2011
- {
2012
- variant: "tertiary",
2013
- size: "S",
2014
- onClick: () => {
2015
- const lines = settings.message_html.split("\n").length;
2016
- const chars = settings.message_html.length;
2017
- toggleNotification({
2018
- type: "info",
2019
- message: formatMessage({ id: getTrad("settings.email.html.stats") }, { lines, chars })
2020
- });
2021
- },
2022
- children: formatMessage({ id: getTrad("settings.email.html.info") })
2023
- }
2024
- )
2025
- ] })
2026
- ]
2027
- }
2028
- ) }),
2029
- /* @__PURE__ */ jsx(Grid.Item, { col: 12, children: /* @__PURE__ */ jsxs(
2030
- Box,
2031
- {
2032
- background: "neutral0",
2033
- padding: 6,
2034
- style: { borderRadius: theme.borderRadius.lg, border: "2px solid rgba(128, 128, 128, 0.2)", width: "100%" },
2035
- children: [
2036
- /* @__PURE__ */ jsxs(Flex, { justifyContent: "space-between", alignItems: "center", style: { marginBottom: "16px" }, children: [
2037
- /* @__PURE__ */ jsxs(Flex, { alignItems: "center", gap: 2, children: [
2038
- /* @__PURE__ */ jsx(Typography, { variant: "delta", fontWeight: "bold", style: { fontSize: "18px" }, children: formatMessage({ id: getTrad("settings.email.text.title") }) }),
2039
- /* @__PURE__ */ jsx(Badge, { variant: "secondary", children: formatMessage({ id: getTrad("settings.email.text.badge") }) })
2040
- ] }),
2041
- /* @__PURE__ */ jsx(
2042
- Button,
2043
- {
2044
- variant: "tertiary",
2045
- size: "S",
2046
- onClick: () => {
2047
- const defaultTemplate = `${language === "de" ? "Hallo" : "Hello"},
2048
-
2049
- ${language === "de" ? "Klicke auf den folgenden Link, um dich anzumelden" : "Click the following link to sign in"}:
2050
-
2051
- <%= URL %>?loginToken=<%= CODE %>
2052
-
2053
- ${language === "de" ? "Der Link läuft in 1 Stunde ab." : "The link expires in 1 hour."}`;
2054
- updateSetting("message_text", defaultTemplate);
2055
- toggleNotification({ type: "success", message: formatMessage({ id: getTrad("settings.email.text.defaultLoaded") }) });
2056
- },
2057
- children: formatMessage({ id: getTrad("settings.email.text.loadDefault") })
2058
- }
2059
- )
2060
- ] }),
2061
- /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral600", style: { marginBottom: "16px", display: "block", fontSize: "14px" }, children: formatMessage({ id: getTrad("settings.email.text.description") }) }),
2062
- /* @__PURE__ */ jsxs(
2063
- Box,
2064
- {
2065
- style: {
2066
- border: "2px solid rgba(128, 128, 128, 0.2)",
2067
- borderRadius: "6px",
2068
- overflow: "hidden",
2069
- background: "var(--colors-neutral100, #f5f5f5)",
2070
- height: "500px",
2071
- display: "flex",
2072
- flexDirection: "column"
2073
- },
2074
- children: [
2075
- /* @__PURE__ */ jsx(
2076
- Box,
2077
- {
2078
- padding: 2,
2079
- background: "neutral200",
2080
- style: { borderBottom: "1px solid rgba(128, 128, 128, 0.2)", flexShrink: 0 },
2081
- children: /* @__PURE__ */ jsx(Typography, { variant: "omega", style: { color: "#666", fontSize: "11px", fontFamily: "monospace" }, children: formatMessage({ id: getTrad("settings.email.text.filename") }) })
2082
- }
2083
- ),
2084
- /* @__PURE__ */ jsx(
2085
- "textarea",
2086
- {
2087
- value: settings.message_text,
2088
- onChange: (e) => updateSetting("message_text", e.target.value),
2089
- style: {
2090
- fontFamily: 'Monaco, Consolas, "Courier New", monospace',
2091
- height: "100%",
2092
- fontSize: "14px",
2093
- lineHeight: "1.8",
2094
- background: "var(--colors-neutral100, #f5f5f5)",
2095
- color: "var(--colors-neutral800, #1f2937)",
2096
- border: "none",
2097
- padding: "20px",
2098
- resize: "none",
2099
- width: "100%",
2100
- boxSizing: "border-box",
2101
- outline: "none",
2102
- margin: 0,
2103
- display: "block",
2104
- overflow: "auto"
2105
- },
2106
- placeholder: formatMessage({ id: getTrad("settings.email.text.placeholder") })
2107
- }
2108
- )
2109
- ]
2110
- }
2111
- ),
2112
- /* @__PURE__ */ jsx(Flex, { gap: 2, style: { marginTop: "12px" }, wrap: "wrap", children: /* @__PURE__ */ jsx(
2113
- Button,
2114
- {
2115
- variant: "secondary",
2116
- size: "S",
2117
- onClick: () => {
2118
- navigator.clipboard.writeText(settings.message_text);
2119
- toggleNotification({ type: "success", message: formatMessage({ id: getTrad("settings.email.text.copy") }) + "!" });
2120
- },
2121
- children: formatMessage({ id: getTrad("settings.email.text.copy") })
2122
- }
2123
- ) })
2124
- ]
2125
- }
2126
- ) })
2127
- ] })
2128
- ] })
2129
- ] }) })
2130
- ] }),
2131
- /* @__PURE__ */ jsxs(Accordion.Item, { value: "advanced", children: [
2132
- /* @__PURE__ */ jsx(Accordion.Header, { children: /* @__PURE__ */ jsx(
2133
- Accordion.Trigger,
2134
- {
2135
- icon: Code,
2136
- description: formatMessage({ id: getTrad("settings.section.advanced.description") }),
2137
- children: formatMessage({ id: getTrad("settings.section.advanced") })
2138
- }
2139
- ) }),
2140
- /* @__PURE__ */ jsx(Accordion.Content, { children: /* @__PURE__ */ jsxs(Box, { padding: 6, children: [
2141
- /* @__PURE__ */ jsx(Typography, { variant: "sigma", fontWeight: "bold", style: { marginBottom: "8px", display: "block", color: "var(--colors-neutral700)" }, children: formatMessage({ id: getTrad("settings.advanced.title") }) }),
2142
- /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral600", style: { marginBottom: "20px", display: "block", fontSize: "12px" }, children: formatMessage({ id: getTrad("settings.advanced.subtitle") }) }),
2143
- /* @__PURE__ */ jsx(Grid.Root, { gap: 6, children: /* @__PURE__ */ jsx(Grid.Item, { col: 12, children: /* @__PURE__ */ jsx(ToggleCard, { $active: settings.allow_magic_links_on_public_registration, $statusLabel: settings.allow_magic_links_on_public_registration ? statusActive : statusInactive, children: /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: 3, children: [
2144
- /* @__PURE__ */ jsx(Flex, { justifyContent: "center", alignItems: "center", style: { marginBottom: "8px" }, children: /* @__PURE__ */ jsx(
2145
- Switch,
2146
- {
2147
- checked: settings.allow_magic_links_on_public_registration,
2148
- onCheckedChange: (checked) => updateSetting("allow_magic_links_on_public_registration", checked),
2149
- size: "L"
2150
- }
2151
- ) }),
2152
- /* @__PURE__ */ jsxs(Box, { children: [
2153
- /* @__PURE__ */ jsx(Typography, { variant: "pi", fontWeight: "bold", style: { fontSize: "14px", marginBottom: "6px", display: "block", textAlign: "center" }, children: formatMessage({ id: getTrad("settings.advanced.publicRegistration.title") }) }),
2154
- /* @__PURE__ */ jsx(Typography, { variant: "omega", textColor: "neutral600", style: { fontSize: "12px", lineHeight: "1.4", textAlign: "center" }, children: formatMessage({ id: getTrad("settings.advanced.publicRegistration.description") }) })
2155
- ] })
2156
- ] }) }) }) })
2157
- ] }) })
2158
- ] }),
2159
- /* @__PURE__ */ jsxs(Accordion.Item, { value: "mfa", children: [
2160
- /* @__PURE__ */ jsx(Accordion.Header, { children: /* @__PURE__ */ jsx(
2161
- Accordion.Trigger,
2162
- {
2163
- icon: Shield,
2164
- description: "Multi-Factor Authentication & Login Modes (Advanced)",
2165
- children: "MFA & Login Modes"
2166
- }
2167
- ) }),
2168
- /* @__PURE__ */ jsx(Accordion.Content, { children: /* @__PURE__ */ jsxs(Box, { padding: 6, children: [
2169
- /* @__PURE__ */ jsxs(
2170
- Box,
2171
- {
2172
- background: "neutral100",
2173
- padding: 4,
2174
- style: {
2175
- borderRadius: theme.borderRadius.md,
2176
- marginBottom: "24px",
2177
- border: "2px solid rgba(128, 128, 128, 0.2)"
2178
- },
2179
- children: [
2180
- /* @__PURE__ */ jsxs(Flex, { alignItems: "center", gap: 2, style: { marginBottom: "8px" }, children: [
2181
- /* @__PURE__ */ jsx(Shield, { width: "20px", height: "20px", style: { color: "#16A34A" } }),
2182
- /* @__PURE__ */ jsx(Typography, { variant: "pi", fontWeight: "bold", style: { fontSize: "14px" }, children: "All authentication modes are available" })
2183
- ] }),
2184
- /* @__PURE__ */ jsxs(Typography, { variant: "pi", textColor: "neutral600", style: { fontSize: "12px", lineHeight: "1.5" }, children: [
2185
- "💡 ",
2186
- /* @__PURE__ */ jsx("strong", { children: "Wähle deinen Login-Modus:" }),
2187
- " Magic Link (schnell), Email OTP (sicherer) oder TOTP Authenticator (höchste Sicherheit)"
2188
- ] })
2189
- ]
2190
- }
2191
- ),
2192
- /* @__PURE__ */ jsx(Typography, { variant: "delta", fontWeight: "bold", style: { marginBottom: "16px", display: "block", color: "var(--colors-neutral800)" }, children: "Choose Authentication Mode" }),
2193
- /* @__PURE__ */ jsxs(Grid.Root, { gap: 4, style: { marginBottom: "24px" }, children: [
2194
- /* @__PURE__ */ jsx(Grid.Item, { col: 4, s: 12, style: { display: "flex" }, children: /* @__PURE__ */ jsxs(
2195
- ToggleCard,
2196
- {
2197
- $active: !settings.otp_enabled && !settings.mfa_require_totp && !settings.totp_as_primary_auth || settings.otp_enabled && !["premium", "advanced", "enterprise"].includes(licenseInfo?.tier) || settings.mfa_require_totp && !["advanced", "enterprise"].includes(licenseInfo?.tier),
2198
- $statusLabel: !settings.otp_enabled && !settings.mfa_require_totp && !settings.totp_as_primary_auth || settings.otp_enabled && !["premium", "advanced", "enterprise"].includes(licenseInfo?.tier) || settings.mfa_require_totp && !["advanced", "enterprise"].includes(licenseInfo?.tier) ? "ACTIVE" : "OFF",
2199
- onClick: () => {
2200
- updateSetting("otp_enabled", false);
2201
- updateSetting("mfa_require_totp", false);
2202
- updateSetting("totp_as_primary_auth", false);
2203
- },
2204
- style: { cursor: "pointer", minHeight: "160px", width: "100%", display: "flex", flexDirection: "column", justifyContent: "space-between" },
2205
- children: [
2206
- /* @__PURE__ */ jsx(IconWrapper, { $bgColor: "rgba(2, 132, 199, 0.12)", $iconColor: "var(--colors-primary600, #0284C7)", children: /* @__PURE__ */ jsx(Link, {}) }),
2207
- /* @__PURE__ */ jsxs(Box, { children: [
2208
- /* @__PURE__ */ jsx(Typography, { variant: "pi", fontWeight: "bold", style: { marginBottom: "8px", display: "block" }, children: "Magic Link Only" }),
2209
- /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral600", style: { fontSize: "11px", marginBottom: "12px" }, children: "Ein-Klick-Login per E-Mail. Schnell und benutzerfreundlich." }),
2210
- /* @__PURE__ */ jsxs(Typography, { variant: "pi", style: { fontSize: "10px", color: "var(--colors-primary600, #0284C7)", display: "block", marginBottom: "8px" }, children: [
2211
- "✓ Keine Passwörter",
2212
- /* @__PURE__ */ jsx("br", {}),
2213
- "✓ Schneller Login",
2214
- /* @__PURE__ */ jsx("br", {}),
2215
- "✓ Immer verfügbar"
2216
- ] })
2217
- ] }),
2218
- /* @__PURE__ */ jsx(Badge, { style: {
2219
- marginTop: "8px",
2220
- backgroundColor: "var(--colors-primary600, #0284C7)",
2221
- color: "white",
2222
- fontWeight: "600",
2223
- fontSize: "11px",
2224
- padding: "4px 10px"
2225
- }, children: "Free" }),
2226
- !(!settings.otp_enabled && !settings.mfa_require_totp && !settings.totp_as_primary_auth) && /* @__PURE__ */ jsx(
2227
- Button,
2228
- {
2229
- variant: "secondary",
2230
- startIcon: /* @__PURE__ */ jsx(Check, {}),
2231
- onClick: async (e) => {
2232
- e.stopPropagation();
2233
- try {
2234
- const newSettings = {
2235
- ...settings,
2236
- otp_enabled: false,
2237
- mfa_require_totp: false,
2238
- totp_as_primary_auth: false
2239
- };
2240
- await put("/magic-link/settings", newSettings);
2241
- setSettings(newSettings);
2242
- toggleNotification({
2243
- type: "success",
2244
- message: "✅ Modus geändert: Magic Link Only"
2245
- });
2246
- } catch (error) {
2247
- console.error("Error saving mode:", error);
2248
- toggleNotification({
2249
- type: "danger",
2250
- message: "❌ Fehler beim Speichern"
2251
- });
2252
- }
2253
- },
2254
- style: { marginTop: "12px", width: "100%" },
2255
- children: "Aktivieren"
2256
- }
2257
- )
2258
- ]
2259
- }
2260
- ) }),
2261
- /* @__PURE__ */ jsx(Grid.Item, { col: 4, s: 12, style: { display: "flex", position: "relative" }, children: /* @__PURE__ */ jsxs(
2262
- ToggleCard,
2263
- {
2264
- $active: settings.otp_enabled && !settings.mfa_require_totp && ["premium", "advanced", "enterprise"].includes(licenseInfo?.tier),
2265
- $statusLabel: settings.otp_enabled && !settings.mfa_require_totp && ["premium", "advanced", "enterprise"].includes(licenseInfo?.tier) ? "ACTIVE" : !["premium", "advanced", "enterprise"].includes(licenseInfo?.tier) ? "🔒 LOCKED" : "OFF",
2266
- onClick: () => {
2267
- updateSetting("otp_enabled", true);
2268
- updateSetting("mfa_require_totp", false);
2269
- updateSetting("totp_as_primary_auth", false);
2270
- },
2271
- style: {
2272
- cursor: !["premium", "advanced", "enterprise"].includes(licenseInfo?.tier) ? "not-allowed" : "pointer",
2273
- minHeight: "160px",
2274
- width: "100%",
2275
- display: "flex",
2276
- flexDirection: "column",
2277
- justifyContent: "space-between",
2278
- opacity: !["premium", "advanced", "enterprise"].includes(licenseInfo?.tier) ? 0.6 : 1,
2279
- position: "relative"
2280
- },
2281
- children: [
2282
- /* @__PURE__ */ jsx(IconWrapper, { $bgColor: "rgba(124, 58, 237, 0.1)", $iconColor: "#7C3AED", children: /* @__PURE__ */ jsx(Mail, {}) }),
2283
- /* @__PURE__ */ jsxs(Box, { children: [
2284
- /* @__PURE__ */ jsx(Typography, { variant: "pi", fontWeight: "bold", style: { marginBottom: "8px", display: "block" }, children: "Magic Link + Email OTP" }),
2285
- /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral600", style: { fontSize: "11px", marginBottom: "12px" }, children: "Extra Sicherheit: 6-stelliger Code nach dem Klicken des Magic Links." }),
2286
- /* @__PURE__ */ jsxs(Typography, { variant: "pi", style: { fontSize: "10px", color: "#7C3AED", display: "block", marginBottom: "8px" }, children: [
2287
- "✓ Email-Code Verifikation",
2288
- /* @__PURE__ */ jsx("br", {}),
2289
- "✓ Konfigurierbare Code-Länge",
2290
- /* @__PURE__ */ jsx("br", {}),
2291
- "✓ Ablaufzeit einstellbar"
2292
- ] })
2293
- ] }),
2294
- /* @__PURE__ */ jsx(Badge, { style: {
2295
- marginTop: "8px",
2296
- backgroundColor: "#5B21B6",
2297
- color: "#FAF5FF",
2298
- fontWeight: "600",
2299
- fontSize: "11px",
2300
- padding: "4px 10px",
2301
- border: "1px solid #4C1D95"
2302
- }, children: "Premium" }),
2303
- ["premium", "advanced", "enterprise"].includes(licenseInfo?.tier) && !(settings.otp_enabled && !settings.mfa_require_totp) && /* @__PURE__ */ jsx(
2304
- Button,
2305
- {
2306
- variant: "secondary",
2307
- startIcon: /* @__PURE__ */ jsx(Check, {}),
2308
- onClick: async (e) => {
2309
- e.stopPropagation();
2310
- try {
2311
- const newSettings = {
2312
- ...settings,
2313
- otp_enabled: true,
2314
- mfa_require_totp: false,
2315
- totp_as_primary_auth: false
2316
- };
2317
- await put("/magic-link/settings", newSettings);
2318
- setSettings(newSettings);
2319
- toggleNotification({
2320
- type: "success",
2321
- message: "✅ Modus geändert: Magic Link + Email OTP"
2322
- });
2323
- } catch (error) {
2324
- console.error("Error saving mode:", error);
2325
- toggleNotification({
2326
- type: "danger",
2327
- message: "❌ Fehler beim Speichern"
2328
- });
2329
- }
2330
- },
2331
- style: { marginTop: "12px", width: "100%" },
2332
- children: "Aktivieren"
2333
- }
2334
- )
2335
- ]
2336
- }
2337
- ) }),
2338
- /* @__PURE__ */ jsx(Grid.Item, { col: 4, s: 12, style: { display: "flex", position: "relative" }, children: /* @__PURE__ */ jsxs(
2339
- ToggleCard,
2340
- {
2341
- $active: settings.mfa_require_totp && ["advanced", "enterprise"].includes(licenseInfo?.tier),
2342
- $statusLabel: settings.mfa_require_totp && ["advanced", "enterprise"].includes(licenseInfo?.tier) ? "ACTIVE" : !["advanced", "enterprise"].includes(licenseInfo?.tier) ? "🔒 LOCKED" : "OFF",
2343
- onClick: () => {
2344
- updateSetting("otp_enabled", false);
2345
- updateSetting("mfa_require_totp", true);
2346
- updateSetting("totp_as_primary_auth", false);
2347
- },
2348
- style: {
2349
- cursor: !["advanced", "enterprise"].includes(licenseInfo?.tier) ? "not-allowed" : "pointer",
2350
- minHeight: "160px",
2351
- width: "100%",
2352
- display: "flex",
2353
- flexDirection: "column",
2354
- justifyContent: "space-between",
2355
- opacity: !["advanced", "enterprise"].includes(licenseInfo?.tier) ? 0.6 : 1,
2356
- position: "relative"
2357
- },
2358
- children: [
2359
- /* @__PURE__ */ jsx(IconWrapper, { $bgColor: "rgba(217, 119, 6, 0.1)", $iconColor: "#D97706", children: /* @__PURE__ */ jsx(Lock, {}) }),
2360
- /* @__PURE__ */ jsxs(Box, { children: [
2361
- /* @__PURE__ */ jsx(Typography, { variant: "pi", fontWeight: "bold", style: { marginBottom: "8px", display: "block" }, children: "Magic Link + TOTP (MFA)" }),
2362
- /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral600", style: { fontSize: "11px", marginBottom: "12px" }, children: "Höchste Sicherheit: Magic Link + Authenticator App (Google Authenticator, Authy)." }),
2363
- /* @__PURE__ */ jsxs(Typography, { variant: "pi", style: { fontSize: "10px", color: "#D97706", display: "block", marginBottom: "8px" }, children: [
2364
- "✓ TOTP Authenticator App",
2365
- /* @__PURE__ */ jsx("br", {}),
2366
- "✓ QR-Code Setup",
2367
- /* @__PURE__ */ jsx("br", {}),
2368
- "✓ 30s Code-Rotation"
2369
- ] })
2370
- ] }),
2371
- /* @__PURE__ */ jsx(Badge, { style: {
2372
- marginTop: "8px",
2373
- backgroundColor: "#92400E",
2374
- color: "#FEFCE8",
2375
- fontWeight: "600",
2376
- fontSize: "11px",
2377
- padding: "4px 10px",
2378
- border: "1px solid #78350F"
2379
- }, children: "Advanced" }),
2380
- ["advanced", "enterprise"].includes(licenseInfo?.tier) && !settings.mfa_require_totp && /* @__PURE__ */ jsx(
2381
- Button,
2382
- {
2383
- variant: "secondary",
2384
- startIcon: /* @__PURE__ */ jsx(Check, {}),
2385
- onClick: async (e) => {
2386
- e.stopPropagation();
2387
- try {
2388
- const newSettings = {
2389
- ...settings,
2390
- otp_enabled: false,
2391
- mfa_require_totp: true,
2392
- totp_as_primary_auth: false
2393
- };
2394
- await put("/magic-link/settings", newSettings);
2395
- setSettings(newSettings);
2396
- toggleNotification({
2397
- type: "success",
2398
- message: "✅ Modus geändert: Magic Link + TOTP (MFA)"
2399
- });
2400
- } catch (error) {
2401
- console.error("Error saving mode:", error);
2402
- toggleNotification({
2403
- type: "danger",
2404
- message: "❌ Fehler beim Speichern"
2405
- });
2406
- }
2407
- },
2408
- style: { marginTop: "12px", width: "100%" },
2409
- children: "Aktivieren"
2410
- }
2411
- )
2412
- ]
2413
- }
2414
- ) })
2415
- ] }),
2416
- /* @__PURE__ */ jsx(Divider, { style: { marginBottom: "24px" } }),
2417
- settings.otp_enabled && !settings.mfa_require_totp && ["premium", "advanced", "enterprise"].includes(licenseInfo?.tier) && /* @__PURE__ */ jsxs(Fragment, { children: [
2418
- /* @__PURE__ */ jsxs(
2419
- Box,
2420
- {
2421
- background: "primary100",
2422
- padding: 4,
2423
- style: {
2424
- borderRadius: theme.borderRadius.md,
2425
- marginBottom: "24px",
2426
- border: "1px solid rgba(14, 165, 233, 0.3)"
2427
- },
2428
- children: [
2429
- /* @__PURE__ */ jsxs(Flex, { alignItems: "center", gap: 2, style: { marginBottom: "8px" }, children: [
2430
- /* @__PURE__ */ jsx(Mail, { width: "18px", height: "18px", style: { color: "var(--colors-primary600, #075985)" } }),
2431
- /* @__PURE__ */ jsx(Typography, { variant: "pi", fontWeight: "bold", style: { color: "var(--colors-primary600, #075985)" }, children: "Email OTP Einstellungen" })
2432
- ] }),
2433
- /* @__PURE__ */ jsx(Typography, { variant: "pi", style: { fontSize: "12px", color: "var(--colors-primary600, #075985)", lineHeight: "1.6" }, children: "Konfiguriere hier, wie der OTP-Code per E-Mail verschickt wird. Benutzer erhalten nach dem Klick auf den Magic Link einen zusätzlichen Verifikationscode per E-Mail." })
2434
- ]
2435
- }
2436
- ),
2437
- /* @__PURE__ */ jsx(Typography, { variant: "sigma", fontWeight: "bold", style: { marginBottom: "16px", display: "block", color: "var(--colors-neutral700)" }, children: "Code-Einstellungen" }),
2438
- /* @__PURE__ */ jsxs(Grid.Root, { gap: 6, style: { marginBottom: "24px" }, children: [
2439
- /* @__PURE__ */ jsx(Grid.Item, { col: 6, s: 12, children: /* @__PURE__ */ jsxs(Box, { children: [
2440
- /* @__PURE__ */ jsx(Typography, { variant: "pi", fontWeight: "bold", style: { marginBottom: "8px", display: "block" }, children: "📧 Versandmethode" }),
2441
- /* @__PURE__ */ jsxs(
2442
- SingleSelect,
2443
- {
2444
- value: settings.otp_type || "email",
2445
- onChange: (value) => updateSetting("otp_type", value),
2446
- placeholder: "Wähle Versandmethode",
2447
- children: [
2448
- /* @__PURE__ */ jsx(SingleSelectOption, { value: "email", children: "E-Mail OTP (Premium)" }),
2449
- /* @__PURE__ */ jsx(SingleSelectOption, { value: "sms", children: "SMS OTP (Advanced)" }),
2450
- /* @__PURE__ */ jsx(SingleSelectOption, { value: "totp", children: "Authenticator App (Advanced)" })
2451
- ]
2452
- }
2453
- ),
2454
- /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral600", style: { fontSize: "11px", marginTop: "6px" }, children: "Wie sollen Benutzer den Verifikationscode erhalten?" })
2455
- ] }) }),
2456
- /* @__PURE__ */ jsx(Grid.Item, { col: 3, s: 12, children: /* @__PURE__ */ jsxs(Box, { children: [
2457
- /* @__PURE__ */ jsx(Typography, { variant: "pi", fontWeight: "bold", style: { marginBottom: "8px", display: "block" }, children: "🔢 Code-Länge" }),
2458
- /* @__PURE__ */ jsx(
2459
- NumberInput,
2460
- {
2461
- value: settings.otp_length || 6,
2462
- onValueChange: (value) => updateSetting("otp_length", value),
2463
- placeholder: "6",
2464
- min: 4,
2465
- max: 8
2466
- }
2467
- ),
2468
- /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral600", style: { fontSize: "11px", marginTop: "6px" }, children: "Anzahl der Ziffern (4-8). Standard: 6 Ziffern" })
2469
- ] }) }),
2470
- /* @__PURE__ */ jsx(Grid.Item, { col: 3, s: 12, children: /* @__PURE__ */ jsxs(Box, { children: [
2471
- /* @__PURE__ */ jsx(Typography, { variant: "pi", fontWeight: "bold", style: { marginBottom: "8px", display: "block" }, children: "⏱️ Gültigkeit (Sekunden)" }),
2472
- /* @__PURE__ */ jsx(
2473
- NumberInput,
2474
- {
2475
- value: settings.otp_expiry || 300,
2476
- onValueChange: (value) => updateSetting("otp_expiry", value),
2477
- placeholder: "300"
2478
- }
2479
- ),
2480
- /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral600", style: { fontSize: "11px", marginTop: "6px" }, children: "Wie lange ist der Code gültig? Standard: 300s (5 Min)" })
2481
- ] }) })
2482
- ] }),
2483
- /* @__PURE__ */ jsxs(Grid.Root, { gap: 6, style: { marginBottom: "24px" }, children: [
2484
- /* @__PURE__ */ jsx(Grid.Item, { col: 6, s: 12, children: /* @__PURE__ */ jsxs(Box, { children: [
2485
- /* @__PURE__ */ jsx(Typography, { variant: "pi", fontWeight: "bold", style: { marginBottom: "8px", display: "block" }, children: "⚠️ Max. Fehlversuche" }),
2486
- /* @__PURE__ */ jsx(
2487
- NumberInput,
2488
- {
2489
- value: settings.otp_max_attempts || 3,
2490
- onValueChange: (value) => updateSetting("otp_max_attempts", value),
2491
- placeholder: "3"
2492
- }
2493
- ),
2494
- /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral600", style: { fontSize: "11px", marginTop: "6px" }, children: "Nach wie vielen Fehlversuchen wird der Code ungültig? Standard: 3" })
2495
- ] }) }),
2496
- /* @__PURE__ */ jsx(Grid.Item, { col: 6, s: 12, children: /* @__PURE__ */ jsxs(Box, { children: [
2497
- /* @__PURE__ */ jsx(Typography, { variant: "pi", fontWeight: "bold", style: { marginBottom: "8px", display: "block" }, children: "🔄 Wartezeit für neuen Code" }),
2498
- /* @__PURE__ */ jsx(
2499
- NumberInput,
2500
- {
2501
- value: settings.otp_resend_cooldown || 60,
2502
- onValueChange: (value) => updateSetting("otp_resend_cooldown", value),
2503
- placeholder: "60"
2504
- }
2505
- ),
2506
- /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral600", style: { fontSize: "11px", marginTop: "6px" }, children: "Wie lange muss der Benutzer warten, bevor ein neuer Code angefordert werden kann? Standard: 60s" })
2507
- ] }) })
2508
- ] }),
2509
- /* @__PURE__ */ jsx(
2510
- Box,
2511
- {
2512
- background: "success100",
2513
- padding: 4,
2514
- style: { borderRadius: theme.borderRadius.md, border: "1px solid rgba(34, 197, 94, 0.3)", marginBottom: "24px" },
2515
- children: /* @__PURE__ */ jsxs(Flex, { gap: 2, alignItems: "flex-start", style: { marginBottom: "12px" }, children: [
2516
- /* @__PURE__ */ jsx(CheckCircle, { width: "16px", height: "16px", style: { color: "var(--colors-success600, #15803D)", flexShrink: 0, marginTop: "2px" } }),
2517
- /* @__PURE__ */ jsxs(Box, { children: [
2518
- /* @__PURE__ */ jsx(Typography, { variant: "pi", fontWeight: "bold", style: { fontSize: "13px", color: "var(--colors-success600, #15803D)", marginBottom: "6px", display: "block" }, children: "So funktioniert's:" }),
2519
- /* @__PURE__ */ jsxs(Typography, { variant: "pi", style: { fontSize: "12px", color: "var(--colors-success600, #15803D)", lineHeight: "1.6" }, children: [
2520
- "1. Benutzer klickt auf Magic Link in der E-Mail",
2521
- /* @__PURE__ */ jsx("br", {}),
2522
- "2. Wird zu OTP-Verifikationsseite weitergeleitet",
2523
- /* @__PURE__ */ jsx("br", {}),
2524
- "3. Gibt den ",
2525
- settings.otp_length || 6,
2526
- "-stelligen Code ein, der an ",
2527
- settings.otp_type === "sms" ? "sein Telefon" : "seine E-Mail",
2528
- " gesendet wurde",
2529
- /* @__PURE__ */ jsx("br", {}),
2530
- "4. Nach erfolgreicher Verifikation ist der Benutzer eingeloggt"
2531
- ] })
2532
- ] })
2533
- ] })
2534
- }
2535
- ),
2536
- /* @__PURE__ */ jsx(Divider, { style: { marginBottom: "24px" } })
2537
- ] }),
2538
- /* @__PURE__ */ jsx(Box, { background: "neutral100", padding: 5, style: { borderRadius: theme.borderRadius.md, marginBottom: "24px" }, children: /* @__PURE__ */ jsxs(Flex, { alignItems: "flex-start", gap: 4, children: [
2539
- /* @__PURE__ */ jsxs(Box, { flex: "1", children: [
2540
- /* @__PURE__ */ jsxs(Flex, { alignItems: "center", gap: 2, style: { marginBottom: "8px" }, children: [
2541
- /* @__PURE__ */ jsx(Lightning, { width: "16px", height: "16px", style: { color: "#D97706" } }),
2542
- /* @__PURE__ */ jsx(Typography, { variant: "pi", fontWeight: "bold", children: "Enable TOTP-Only Login" }),
2543
- /* @__PURE__ */ jsx(Badge, { style: {
2544
- backgroundColor: "#92400E",
2545
- color: "#FEFCE8",
2546
- fontWeight: "600",
2547
- fontSize: "11px",
2548
- padding: "3px 8px",
2549
- border: "1px solid #78350F"
2550
- }, children: "Advanced" })
2551
- ] }),
2552
- /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral600", style: { fontSize: "11px", marginBottom: "12px" }, children: "Allow users to login with Email + TOTP code directly, without waiting for magic link email." }),
2553
- /* @__PURE__ */ jsxs(Flex, { gap: 2, alignItems: "flex-start", children: [
2554
- /* @__PURE__ */ jsx(Lightning, { width: "14px", height: "14px", style: { color: "var(--colors-warning600, #A16207)", flexShrink: 0, marginTop: "2px" } }),
2555
- /* @__PURE__ */ jsxs(Typography, { variant: "pi", style: { fontSize: "11px", color: "var(--colors-warning600, #A16207)" }, children: [
2556
- /* @__PURE__ */ jsx("strong", { children: "Fast login:" }),
2557
- " Users open authenticator app, enter code → instant login (no email needed)"
2558
- ] })
2559
- ] })
2560
- ] }),
2561
- /* @__PURE__ */ jsx(GreenToggle, { $isActive: settings.totp_as_primary_auth, children: /* @__PURE__ */ jsx(
2562
- Switch,
2563
- {
2564
- checked: settings.totp_as_primary_auth || false,
2565
- onCheckedChange: (checked) => {
2566
- updateSetting("totp_as_primary_auth", checked);
2567
- }
2568
- }
2569
- ) })
2570
- ] }) }),
2571
- (settings.mfa_require_totp || settings.totp_as_primary_auth) && /* @__PURE__ */ jsxs(Fragment, { children: [
2572
- /* @__PURE__ */ jsx(Divider, { style: { marginBottom: "24px" } }),
2573
- /* @__PURE__ */ jsx(Typography, { variant: "sigma", fontWeight: "bold", style: { marginBottom: "16px", display: "block", color: "var(--colors-neutral700)" }, children: "TOTP Configuration" }),
2574
- /* @__PURE__ */ jsxs(Grid.Root, { gap: 6, children: [
2575
- /* @__PURE__ */ jsx(Grid.Item, { col: 6, s: 12, children: /* @__PURE__ */ jsxs(Box, { children: [
2576
- /* @__PURE__ */ jsx(Typography, { variant: "pi", fontWeight: "bold", style: { marginBottom: "8px", display: "block" }, children: "Issuer Name" }),
2577
- /* @__PURE__ */ jsx(
2578
- TextInput,
2579
- {
2580
- value: settings.totp_issuer || "Magic Link",
2581
- onChange: (e) => updateSetting("totp_issuer", e.target.value),
2582
- placeholder: "Magic Link"
2583
- }
2584
- ),
2585
- /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral600", style: { fontSize: "11px", marginTop: "6px" }, children: 'Displayed in authenticator apps (e.g., "MyApp")' })
2586
- ] }) }),
2587
- /* @__PURE__ */ jsx(Grid.Item, { col: 3, s: 12, children: /* @__PURE__ */ jsxs(Box, { children: [
2588
- /* @__PURE__ */ jsx(Typography, { variant: "pi", fontWeight: "bold", style: { marginBottom: "8px", display: "block" }, children: "Code Digits" }),
2589
- /* @__PURE__ */ jsxs(
2590
- SingleSelect,
2591
- {
2592
- value: settings.totp_digits?.toString() || "6",
2593
- onChange: (value) => updateSetting("totp_digits", parseInt(value)),
2594
- children: [
2595
- /* @__PURE__ */ jsx(SingleSelectOption, { value: "6", children: "6 digits" }),
2596
- /* @__PURE__ */ jsx(SingleSelectOption, { value: "8", children: "8 digits" })
2597
- ]
2598
- }
2599
- )
2600
- ] }) }),
2601
- /* @__PURE__ */ jsx(Grid.Item, { col: 3, s: 12, children: /* @__PURE__ */ jsxs(Box, { children: [
2602
- /* @__PURE__ */ jsx(Typography, { variant: "pi", fontWeight: "bold", style: { marginBottom: "8px", display: "block" }, children: "Time Period (s)" }),
2603
- /* @__PURE__ */ jsx(
2604
- NumberInput,
2605
- {
2606
- value: settings.totp_period || 30,
2607
- onValueChange: (value) => updateSetting("totp_period", value),
2608
- placeholder: "30"
2609
- }
2610
- ),
2611
- /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral600", style: { fontSize: "11px", marginTop: "6px" }, children: "Default: 30 seconds" })
2612
- ] }) })
2613
- ] }),
2614
- /* @__PURE__ */ jsx(
2615
- Box,
2616
- {
2617
- background: "success100",
2618
- padding: 4,
2619
- style: { borderRadius: theme.borderRadius.md, border: "1px solid rgba(34, 197, 94, 0.3)", marginTop: "16px" },
2620
- children: /* @__PURE__ */ jsxs(Flex, { gap: 2, alignItems: "flex-start", children: [
2621
- /* @__PURE__ */ jsx(Key, { width: "14px", height: "14px", style: { color: "var(--colors-success600, #15803D)", flexShrink: 0, marginTop: "2px" } }),
2622
- /* @__PURE__ */ jsxs(Typography, { variant: "pi", style: { fontSize: "12px", color: "var(--colors-success600, #15803D)" }, children: [
2623
- /* @__PURE__ */ jsx("strong", { children: "How it works:" }),
2624
- " Users scan QR code with Google Authenticator, Authy, or any TOTP app. They'll get a new 6-digit code every 30 seconds."
2625
- ] })
2626
- ] })
2627
- }
2628
- )
2629
- ] }),
2630
- /* @__PURE__ */ jsx(Divider, { style: { marginTop: "24px", marginBottom: "24px" } }),
2631
- /* @__PURE__ */ jsxs(
2632
- Box,
2633
- {
2634
- background: "primary100",
2635
- padding: 4,
2636
- style: { borderRadius: theme.borderRadius.md, border: "2px solid rgba(14, 165, 233, 0.3)" },
2637
- children: [
2638
- /* @__PURE__ */ jsxs(Flex, { gap: 2, alignItems: "center", style: { marginBottom: "8px" }, children: [
2639
- /* @__PURE__ */ jsx(CheckCircle, { width: "16px", height: "16px", style: { color: "var(--colors-primary600, #075985)" } }),
2640
- /* @__PURE__ */ jsx(Typography, { variant: "pi", fontWeight: "bold", style: { color: "var(--colors-primary600, #075985)" }, children: "Current Configuration:" })
2641
- ] }),
2642
- !settings.otp_enabled && !settings.mfa_require_totp && !settings.totp_as_primary_auth && /* @__PURE__ */ jsxs(Flex, { gap: 2, alignItems: "flex-start", children: [
2643
- /* @__PURE__ */ jsx(Link, { width: "14px", height: "14px", style: { color: "var(--colors-neutral700)", flexShrink: 0, marginTop: "2px" } }),
2644
- /* @__PURE__ */ jsx(Typography, { variant: "pi", style: { fontSize: "12px", color: "var(--colors-neutral700)" }, children: "Users login with Magic Link only (one-click email login)" })
2645
- ] }),
2646
- settings.otp_enabled && !settings.mfa_require_totp && /* @__PURE__ */ jsxs(Flex, { gap: 2, alignItems: "flex-start", children: [
2647
- /* @__PURE__ */ jsx(Mail, { width: "14px", height: "14px", style: { color: "var(--colors-neutral700)", flexShrink: 0, marginTop: "2px" } }),
2648
- /* @__PURE__ */ jsx(Typography, { variant: "pi", style: { fontSize: "12px", color: "var(--colors-neutral700)" }, children: "Users click Magic Link → Enter 6-digit code from email" })
2649
- ] }),
2650
- settings.mfa_require_totp && /* @__PURE__ */ jsxs(Flex, { gap: 2, alignItems: "flex-start", children: [
2651
- /* @__PURE__ */ jsx(Lock, { width: "14px", height: "14px", style: { color: "var(--colors-neutral700)", flexShrink: 0, marginTop: "2px" } }),
2652
- /* @__PURE__ */ jsx(Typography, { variant: "pi", style: { fontSize: "12px", color: "var(--colors-neutral700)" }, children: "Users click Magic Link → Enter code from authenticator app (MFA)" })
2653
- ] }),
2654
- settings.totp_as_primary_auth && /* @__PURE__ */ jsxs(Flex, { gap: 2, alignItems: "flex-start", style: { marginTop: settings.mfa_require_totp ? "8px" : "0" }, children: [
2655
- /* @__PURE__ */ jsx(Lightning, { width: "14px", height: "14px", style: { color: "var(--colors-neutral700)", flexShrink: 0, marginTop: "2px" } }),
2656
- /* @__PURE__ */ jsx(Typography, { variant: "pi", style: { fontSize: "12px", color: "var(--colors-neutral700)" }, children: "+ TOTP-only login enabled (users can skip email and login with code directly)" })
2657
- ] })
2658
- ]
2659
- }
2660
- )
2661
- ] }) })
2662
- ] }),
2663
- /* @__PURE__ */ jsxs(Accordion.Item, { value: "ratelimit", children: [
2664
- /* @__PURE__ */ jsx(Accordion.Header, { children: /* @__PURE__ */ jsx(
2665
- Accordion.Trigger,
2666
- {
2667
- icon: Shield,
2668
- description: formatMessage({ id: getTrad("settings.section.rateLimit.description") }),
2669
- children: formatMessage({ id: getTrad("settings.section.rateLimit") })
2670
- }
2671
- ) }),
2672
- /* @__PURE__ */ jsx(Accordion.Content, { children: /* @__PURE__ */ jsxs(Box, { padding: 6, children: [
2673
- /* @__PURE__ */ jsxs(Box, { background: "neutral100", padding: 5, style: { borderRadius: theme.borderRadius.md, marginBottom: "24px" }, children: [
2674
- /* @__PURE__ */ jsx(Typography, { variant: "sigma", fontWeight: "bold", style: { marginBottom: "8px", display: "block", textAlign: "center", color: "var(--colors-neutral700)" }, children: formatMessage({ id: getTrad("settings.rateLimit.title") }) }),
2675
- /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral600", style: { marginBottom: "20px", display: "block", textAlign: "center", fontSize: "12px" }, children: formatMessage({ id: getTrad("settings.rateLimit.subtitle") }) }),
2676
- /* @__PURE__ */ jsx(Grid.Root, { gap: 4, children: /* @__PURE__ */ jsx(Grid.Item, { col: 12, children: /* @__PURE__ */ jsx(ToggleCard, { $active: settings.rate_limit_enabled, $statusLabel: settings.rate_limit_enabled ? statusActive : statusInactive, children: /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: 3, children: [
2677
- /* @__PURE__ */ jsx(Flex, { justifyContent: "center", alignItems: "center", style: { marginBottom: "8px" }, children: /* @__PURE__ */ jsx(
2678
- Switch,
2679
- {
2680
- checked: settings.rate_limit_enabled,
2681
- onCheckedChange: (checked) => updateSetting("rate_limit_enabled", checked),
2682
- size: "L"
2683
- }
2684
- ) }),
2685
- /* @__PURE__ */ jsxs(Box, { children: [
2686
- /* @__PURE__ */ jsx(Typography, { variant: "pi", fontWeight: "bold", style: { fontSize: "14px", marginBottom: "6px", display: "block", textAlign: "center" }, children: formatMessage({ id: getTrad("settings.rateLimit.enable.title") }) }),
2687
- /* @__PURE__ */ jsx(Typography, { variant: "omega", textColor: "neutral600", style: { fontSize: "12px", lineHeight: "1.4", textAlign: "center" }, children: formatMessage({ id: getTrad("settings.rateLimit.enable.description") }) })
2688
- ] })
2689
- ] }) }) }) })
2690
- ] }),
2691
- /* @__PURE__ */ jsx(Typography, { variant: "sigma", fontWeight: "bold", style: { marginBottom: "16px", display: "block", color: "var(--colors-neutral700)" }, children: formatMessage({ id: getTrad("settings.rateLimit.config.title") }) }),
2692
- /* @__PURE__ */ jsxs(Grid.Root, { gap: 6, style: { marginBottom: "32px" }, children: [
2693
- /* @__PURE__ */ jsx(Grid.Item, { col: 6, s: 12, children: /* @__PURE__ */ jsxs(Box, { children: [
2694
- /* @__PURE__ */ jsx(Typography, { variant: "pi", fontWeight: "bold", style: { marginBottom: "8px", display: "block" }, children: formatMessage({ id: getTrad("settings.rateLimit.maxAttempts.label") }) }),
2695
- /* @__PURE__ */ jsx(
2696
- NumberInput,
2697
- {
2698
- name: "rate_limit_max_attempts",
2699
- hint: formatMessage({ id: getTrad("settings.rateLimit.maxAttempts.hint") }),
2700
- value: settings.rate_limit_max_attempts,
2701
- onValueChange: (val) => updateSetting("rate_limit_max_attempts", val),
2702
- min: 1,
2703
- max: 100
2704
- }
2705
- )
2706
- ] }) }),
2707
- /* @__PURE__ */ jsx(Grid.Item, { col: 6, s: 12, children: /* @__PURE__ */ jsxs(Box, { children: [
2708
- /* @__PURE__ */ jsx(Typography, { variant: "pi", fontWeight: "bold", style: { marginBottom: "8px", display: "block" }, children: formatMessage({ id: getTrad("settings.rateLimit.windowMinutes.label") }) }),
2709
- /* @__PURE__ */ jsx(
2710
- NumberInput,
2711
- {
2712
- name: "rate_limit_window_minutes",
2713
- hint: formatMessage({ id: getTrad("settings.rateLimit.windowMinutes.hint") }),
2714
- value: settings.rate_limit_window_minutes,
2715
- onValueChange: (val) => updateSetting("rate_limit_window_minutes", val),
2716
- min: 1,
2717
- max: 1440
2718
- }
2719
- )
2720
- ] }) })
2721
- ] }),
2722
- rateLimitStats && /* @__PURE__ */ jsxs(Fragment, { children: [
2723
- /* @__PURE__ */ jsx(Divider, { style: { marginBottom: "24px" } }),
2724
- /* @__PURE__ */ jsx(Typography, { variant: "sigma", fontWeight: "bold", style: { marginBottom: "16px", display: "block", color: "var(--colors-neutral700)" }, children: formatMessage({ id: getTrad("settings.rateLimit.stats.title") }) }),
2725
- /* @__PURE__ */ jsxs(Flex, { gap: 4, wrap: "wrap", justifyContent: "center", style: { marginBottom: "24px" }, children: [
2726
- /* @__PURE__ */ jsxs(Box, { padding: 4, background: "neutral100", style: { borderRadius: "8px", textAlign: "center", minWidth: "140px", flex: "1" }, children: [
2727
- /* @__PURE__ */ jsx(Typography, { variant: "beta", style: { color: "var(--colors-primary600, #0284C7)", fontWeight: "700" }, children: rateLimitStats.totalEntries || 0 }),
2728
- /* @__PURE__ */ jsx(Typography, { variant: "omega", textColor: "neutral600", style: { fontSize: "11px", marginTop: "4px", display: "block" }, children: formatMessage({ id: getTrad("settings.rateLimit.stats.total") }) })
2729
- ] }),
2730
- /* @__PURE__ */ jsxs(Box, { padding: 4, background: "danger100", style: { borderRadius: "8px", textAlign: "center", minWidth: "140px", flex: "1" }, children: [
2731
- /* @__PURE__ */ jsx(Typography, { variant: "beta", style: { color: "var(--colors-danger600, #DC2626)", fontWeight: "700" }, children: rateLimitStats.blocked || 0 }),
2732
- /* @__PURE__ */ jsx(Typography, { variant: "omega", textColor: "neutral600", style: { fontSize: "11px", marginTop: "4px", display: "block" }, children: formatMessage({ id: getTrad("settings.rateLimit.stats.blocked") }) })
2733
- ] }),
2734
- /* @__PURE__ */ jsxs(Box, { padding: 4, background: "primary100", style: { borderRadius: "8px", textAlign: "center", minWidth: "140px", flex: "1" }, children: [
2735
- /* @__PURE__ */ jsx(Typography, { variant: "beta", style: { color: "var(--colors-primary600, #0284C7)", fontWeight: "700" }, children: rateLimitStats.ipLimits || 0 }),
2736
- /* @__PURE__ */ jsx(Typography, { variant: "omega", textColor: "neutral600", style: { fontSize: "11px", marginTop: "4px", display: "block" }, children: formatMessage({ id: getTrad("settings.rateLimit.stats.ipLimits") }) })
2737
- ] }),
2738
- /* @__PURE__ */ jsxs(Box, { padding: 4, background: "success100", style: { borderRadius: "8px", textAlign: "center", minWidth: "140px", flex: "1" }, children: [
2739
- /* @__PURE__ */ jsx(Typography, { variant: "beta", style: { color: "var(--colors-success600, #16A34A)", fontWeight: "700" }, children: rateLimitStats.emailLimits || 0 }),
2740
- /* @__PURE__ */ jsx(Typography, { variant: "omega", textColor: "neutral600", style: { fontSize: "11px", marginTop: "4px", display: "block" }, children: formatMessage({ id: getTrad("settings.rateLimit.stats.emailLimits") }) })
2741
- ] })
2742
- ] }),
2743
- /* @__PURE__ */ jsxs(Flex, { gap: 3, justifyContent: "center", children: [
2744
- /* @__PURE__ */ jsx(
2745
- Button,
2746
- {
2747
- onClick: handleRateLimitCleanup,
2748
- variant: "secondary",
2749
- size: "M",
2750
- children: formatMessage({ id: getTrad("settings.rateLimit.cleanup") })
2751
- }
2752
- ),
2753
- /* @__PURE__ */ jsx(
2754
- Button,
2755
- {
2756
- onClick: handleRateLimitReset,
2757
- variant: "danger",
2758
- size: "M",
2759
- children: formatMessage({ id: getTrad("settings.rateLimit.reset") })
2760
- }
2761
- )
2762
- ] })
2763
- ] })
2764
- ] }) })
2765
- ] }),
2766
- /* @__PURE__ */ jsxs(Accordion.Item, { value: "compatibility", children: [
2767
- /* @__PURE__ */ jsx(Accordion.Header, { children: /* @__PURE__ */ jsx(
2768
- Accordion.Trigger,
2769
- {
2770
- icon: Link,
2771
- description: formatMessage({ id: getTrad("settings.section.compatibility.description") }),
2772
- children: formatMessage({ id: getTrad("settings.section.compatibility") })
2773
- }
2774
- ) }),
2775
- /* @__PURE__ */ jsx(Accordion.Content, { children: /* @__PURE__ */ jsxs(Box, { padding: 6, children: [
2776
- /* @__PURE__ */ jsx(Typography, { variant: "sigma", fontWeight: "bold", style: { marginBottom: "8px", display: "block", color: "var(--colors-neutral700)" }, children: formatMessage({ id: getTrad("settings.compatibility.title") }) }),
2777
- /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral600", style: { marginBottom: "20px", display: "block", fontSize: "12px" }, children: formatMessage({ id: getTrad("settings.compatibility.subtitle") }) }),
2778
- /* @__PURE__ */ jsx(
2779
- Box,
2780
- {
2781
- background: "primary100",
2782
- padding: 4,
2783
- style: {
2784
- borderRadius: theme.borderRadius.md,
2785
- marginBottom: "24px",
2786
- border: "2px solid rgba(14, 165, 233, 0.3)"
2787
- },
2788
- children: /* @__PURE__ */ jsxs(Flex, { alignItems: "flex-start", gap: 3, children: [
2789
- /* @__PURE__ */ jsx(Link, { width: "20px", height: "20px", style: { color: "var(--colors-primary600, #0284C7)", flexShrink: 0, marginTop: "2px" } }),
2790
- /* @__PURE__ */ jsxs(Box, { children: [
2791
- /* @__PURE__ */ jsx(Typography, { variant: "pi", fontWeight: "bold", style: { marginBottom: "6px", display: "block" }, children: formatMessage({ id: getTrad("settings.compatibility.info.title") }) }),
2792
- /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral600", style: { fontSize: "12px", lineHeight: "1.5" }, children: formatMessage({ id: getTrad("settings.compatibility.info.description") }) })
2793
- ] })
2794
- ] })
2795
- }
2796
- ),
2797
- /* @__PURE__ */ jsxs(Grid.Root, { gap: 6, children: [
2798
- /* @__PURE__ */ jsx(Grid.Item, { col: 6, s: 12, children: /* @__PURE__ */ jsx(ToggleCard, { $active: settings.passwordlessCompatibility, $statusLabel: settings.passwordlessCompatibility ? statusActive : statusInactive, children: /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: 3, children: [
2799
- /* @__PURE__ */ jsx(Flex, { justifyContent: "center", alignItems: "center", style: { marginBottom: "8px" }, children: /* @__PURE__ */ jsx(
2800
- Switch,
2801
- {
2802
- checked: settings.passwordlessCompatibility,
2803
- onCheckedChange: (checked) => updateSetting("passwordlessCompatibility", checked),
2804
- size: "L"
2805
- }
2806
- ) }),
2807
- /* @__PURE__ */ jsxs(Box, { children: [
2808
- /* @__PURE__ */ jsx(Typography, { variant: "pi", fontWeight: "bold", style: { fontSize: "14px", marginBottom: "6px", display: "block", textAlign: "center" }, children: formatMessage({ id: getTrad("settings.compatibility.passwordless.title") }) }),
2809
- /* @__PURE__ */ jsx(Typography, { variant: "omega", textColor: "neutral600", style: { fontSize: "12px", lineHeight: "1.4", textAlign: "center" }, children: formatMessage({ id: getTrad("settings.compatibility.passwordless.description") }) })
2810
- ] }),
2811
- settings.passwordlessCompatibility && /* @__PURE__ */ jsx(
2812
- Box,
2813
- {
2814
- background: "success100",
2815
- padding: 3,
2816
- style: {
2817
- borderRadius: theme.borderRadius.md,
2818
- marginTop: "8px",
2819
- border: "1px solid rgba(34, 197, 94, 0.3)"
2820
- },
2821
- children: /* @__PURE__ */ jsxs(Typography, { variant: "pi", style: { fontSize: "11px", fontFamily: "monospace" }, children: [
2822
- "POST /api/passwordless/send-link",
2823
- /* @__PURE__ */ jsx("br", {}),
2824
- "GET /api/passwordless/login"
2825
- ] })
2826
- }
2827
- )
2828
- ] }) }) }),
2829
- /* @__PURE__ */ jsx(Grid.Item, { col: 6, s: 12, children: /* @__PURE__ */ jsx(ToggleCard, { $active: settings.emailDesignerCompatibility, $statusLabel: settings.emailDesignerCompatibility ? statusActive : statusInactive, children: /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: 3, children: [
2830
- /* @__PURE__ */ jsx(Flex, { justifyContent: "center", alignItems: "center", style: { marginBottom: "8px" }, children: /* @__PURE__ */ jsx(
2831
- Switch,
2832
- {
2833
- checked: settings.emailDesignerCompatibility,
2834
- onCheckedChange: (checked) => updateSetting("emailDesignerCompatibility", checked),
2835
- size: "L"
2836
- }
2837
- ) }),
2838
- /* @__PURE__ */ jsxs(Box, { children: [
2839
- /* @__PURE__ */ jsx(Typography, { variant: "pi", fontWeight: "bold", style: { fontSize: "14px", marginBottom: "6px", display: "block", textAlign: "center" }, children: formatMessage({ id: getTrad("settings.compatibility.emailDesigner.title") }) }),
2840
- /* @__PURE__ */ jsx(Typography, { variant: "omega", textColor: "neutral600", style: { fontSize: "12px", lineHeight: "1.4", textAlign: "center" }, children: formatMessage({ id: getTrad("settings.compatibility.emailDesigner.description") }) })
2841
- ] }),
2842
- settings.emailDesignerCompatibility && /* @__PURE__ */ jsx(
2843
- Box,
2844
- {
2845
- background: "success100",
2846
- padding: 3,
2847
- style: {
2848
- borderRadius: theme.borderRadius.md,
2849
- marginTop: "8px",
2850
- border: "1px solid rgba(34, 197, 94, 0.3)"
2851
- },
2852
- children: /* @__PURE__ */ jsxs(Typography, { variant: "pi", style: { fontSize: "11px" }, children: [
2853
- "✓ Email Designer 5 Integration",
2854
- /* @__PURE__ */ jsx("br", {}),
2855
- "✓ sendTemplatedEmail() Support"
2856
- ] })
2857
- }
2858
- )
2859
- ] }) }) })
2860
- ] }),
2861
- /* @__PURE__ */ jsx(
2862
- Box,
2863
- {
2864
- background: "warning100",
2865
- padding: 4,
2866
- style: {
2867
- borderRadius: theme.borderRadius.md,
2868
- marginTop: "24px",
2869
- border: "2px solid rgba(234, 179, 8, 0.4)"
2870
- },
2871
- children: /* @__PURE__ */ jsxs(Flex, { alignItems: "flex-start", gap: 3, children: [
2872
- /* @__PURE__ */ jsx(Code, { width: "20px", height: "20px", style: { color: "var(--colors-warning600, #D97706)", flexShrink: 0, marginTop: "2px" } }),
2873
- /* @__PURE__ */ jsxs(Box, { children: [
2874
- /* @__PURE__ */ jsx(Typography, { variant: "pi", fontWeight: "bold", style: { marginBottom: "6px", display: "block" }, children: formatMessage({ id: getTrad("settings.compatibility.migration.title") }) }),
2875
- /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral600", style: { fontSize: "12px", lineHeight: "1.5" }, children: formatMessage({ id: getTrad("settings.compatibility.migration.description") }) })
2876
- ] })
2877
- ] })
2878
- }
2879
- )
2880
- ] }) })
2881
- ] })
2882
- ] }),
2883
- /* @__PURE__ */ jsx(
2884
- Box,
2885
- {
2886
- background: "success50",
2887
- padding: 5,
2888
- style: { borderRadius: theme.borderRadius.lg, marginTop: "32px", border: "2px solid rgba(34, 197, 94, 0.3)" },
2889
- children: /* @__PURE__ */ jsxs(Flex, { gap: 3, alignItems: "center", justifyContent: "center", children: [
2890
- /* @__PURE__ */ jsx(Check, { style: { width: "24px", height: "24px", color: "var(--colors-success600, #16A34A)" } }),
2891
- /* @__PURE__ */ jsxs(Box, { children: [
2892
- /* @__PURE__ */ jsx(Typography, { variant: "pi", fontWeight: "bold", style: { marginBottom: "4px", display: "block" }, children: formatMessage({ id: getTrad("settings.footer.quickhelp") }) }),
2893
- /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral700", style: { fontSize: "13px" }, children: /* @__PURE__ */ jsx("strong", { children: formatMessage({ id: getTrad("settings.footer.reminder") }) }) })
2894
- ] })
2895
- ] })
2896
- }
2897
- )
2898
- ] })
2899
- ] });
2900
- };
2901
- const SettingsWithLanguage = () => /* @__PURE__ */ jsx(LicenseGuard, { children: /* @__PURE__ */ jsx(LanguageProvider, { children: /* @__PURE__ */ jsx(SettingsModern, {}) }) });
2902
- export {
2903
- SettingsWithLanguage as default
2904
- };