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