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