strapi-plugin-magic-mail 2.9.2 → 2.10.1

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 (11) hide show
  1. package/CHANGELOG.md +410 -0
  2. package/LICENSE +0 -7
  3. package/README.md +41 -0
  4. package/dist/_chunks/{App-BSZzEkaa.js → App-2Bg4LxwL.js} +259 -139
  5. package/dist/_chunks/{App-BZQTPVdT.mjs → App-CAtJIwNW.mjs} +259 -139
  6. package/dist/admin/index.js +1 -1
  7. package/dist/admin/index.mjs +1 -1
  8. package/dist/server/index.js +9970 -1752
  9. package/dist/server/index.mjs +9970 -1752
  10. package/package.json +16 -10
  11. package/COPYRIGHT_NOTICE.txt +0 -13
package/dist/_chunks/{App-BSZzEkaa.js → App-2Bg4LxwL.js} RENAMED
@@ -220,96 +220,147 @@ const StepLabel$1 = styled__default.default(designSystem.Typography)`
220
220
  text-align: center;
221
221
  transition: all 0.3s ease;
222
222
  `;
223
+ const ProviderCategoryHeader = styled__default.default(designSystem.Box)`
224
+ display: flex;
225
+ align-items: center;
226
+ gap: 12px;
227
+ margin: 0 0 16px;
228
+ animation: ${fadeIn$6} 0.4s ease;
229
+
230
+ &::after {
231
+ content: '';
232
+ flex: 1;
233
+ height: 1px;
234
+ background: linear-gradient(90deg, ${colors$1.border}, transparent);
235
+ }
236
+ `;
237
+ const ProviderCategoryLabel = styled__default.default(designSystem.Typography)`
238
+ font-size: 12px;
239
+ font-weight: 600;
240
+ letter-spacing: 0.08em;
241
+ text-transform: uppercase;
242
+ color: ${colors$1.textLight};
243
+ `;
244
+ const ProviderCategoryHint = styled__default.default.span`
245
+ font-size: 11px;
246
+ font-weight: 500;
247
+ padding: 3px 10px;
248
+ border-radius: 999px;
249
+ background: ${colors$1.primaryLight};
250
+ color: ${colors$1.primary};
251
+ letter-spacing: 0.02em;
252
+ text-transform: none;
253
+ `;
223
254
  const ProvidersGrid = styled__default.default(designSystem.Box)`
224
255
  display: grid;
225
- grid-template-columns: repeat(2, 1fr);
226
- gap: 20px;
227
- margin-bottom: 24px;
256
+ grid-template-columns: repeat(3, 1fr);
257
+ gap: 16px;
258
+ margin: 0 auto 28px;
228
259
  animation: ${slideIn} 0.5s ease;
229
- max-width: 800px;
230
- margin-left: auto;
231
- margin-right: auto;
260
+ max-width: 960px;
261
+
262
+ @media (max-width: 960px) {
263
+ grid-template-columns: repeat(2, 1fr);
264
+ }
265
+ @media (max-width: 600px) {
266
+ grid-template-columns: 1fr;
267
+ }
232
268
  `;
233
269
  const ProviderCard = styled__default.default(designSystem.Box)`
234
- background: ${(props) => props.$selected ? colors$1.successLight : props.theme.colors.neutral0};
235
- border: 2px solid ${(props) => props.$selected ? colors$1.success : colors$1.border};
236
- border-radius: 12px;
237
- padding: 24px;
270
+ background: ${(props) => props.$selected ? `linear-gradient(180deg, ${colors$1.successLight}, rgba(92, 177, 118, 0.04))` : "var(--colors-neutral100, rgba(255,255,255,0.02))"};
271
+ border: 1.5px solid ${(props) => props.$selected ? colors$1.success : colors$1.border};
272
+ border-radius: 14px;
273
+ padding: 22px 20px 20px;
238
274
  cursor: pointer;
239
- transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
240
- text-align: center;
241
- aspect-ratio: 1;
242
- min-height: 180px;
275
+ transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s, border-color 0.2s, background 0.2s;
243
276
  display: flex;
244
277
  flex-direction: column;
245
- align-items: center;
246
- justify-content: center;
247
- gap: 12px;
278
+ align-items: flex-start;
279
+ gap: 14px;
248
280
  position: relative;
249
281
  overflow: hidden;
250
-
282
+ min-height: 170px;
283
+
251
284
  &::before {
252
285
  content: '';
253
286
  position: absolute;
254
- top: 0;
255
- left: 0;
256
- right: 0;
257
- bottom: 0;
258
- background: linear-gradient(135deg, transparent, rgba(73, 69, 255, 0.05));
287
+ inset: 0;
288
+ background: linear-gradient(135deg, transparent 60%, rgba(73, 69, 255, 0.06));
259
289
  opacity: 0;
260
- transition: opacity 0.3s;
290
+ transition: opacity 0.25s;
291
+ pointer-events: none;
261
292
  }
262
-
293
+
263
294
  &:hover {
264
- transform: translateY(-4px);
265
- box-shadow: 0 8px 24px rgba(73, 69, 255, 0.12);
295
+ transform: translateY(-3px);
296
+ box-shadow: 0 10px 28px rgba(73, 69, 255, 0.18);
266
297
  border-color: ${(props) => props.$selected ? colors$1.success : colors$1.primary};
267
-
298
+
268
299
  &::before {
269
300
  opacity: 1;
270
301
  }
271
302
  }
272
-
273
- ${(props) => props.$selected && `
303
+
304
+ &:focus-visible {
305
+ outline: 2px solid ${colors$1.primary};
306
+ outline-offset: 2px;
307
+ }
308
+
309
+ ${(props) => props.$selected && styled.css`
310
+ box-shadow: 0 0 0 1px ${colors$1.success}, 0 10px 28px rgba(92, 177, 118, 0.18);
311
+
274
312
  &::after {
275
313
  content: '✓';
276
314
  position: absolute;
277
- top: 8px;
278
- right: 8px;
315
+ top: 12px;
316
+ right: 12px;
279
317
  width: 24px;
280
318
  height: 24px;
281
319
  background: ${colors$1.success};
282
- color: white;
320
+ color: #fff;
283
321
  border-radius: 50%;
284
322
  display: flex;
285
323
  align-items: center;
286
324
  justify-content: center;
287
- font-size: 14px;
288
- font-weight: bold;
325
+ font-size: 13px;
326
+ font-weight: 700;
327
+ box-shadow: 0 2px 6px rgba(92, 177, 118, 0.35);
289
328
  }
290
329
  `}
291
330
  `;
292
331
  const ProviderIcon = styled__default.default.div`
293
- width: 56px;
294
- height: 56px;
332
+ width: 48px;
333
+ height: 48px;
295
334
  border-radius: ${(props) => props.$round ? "50%" : "12px"};
296
- background: ${(props) => props.$bgColor || colors$1.primaryLight};
335
+ /* Dark-mode-friendly: mix the accent colour onto an opaque surface
336
+ instead of using a semi-transparent wash. Semi-transparent colours
337
+ disappeared against the plugin's dark modal background. */
338
+ background: ${(props) => props.$bgColor || "rgba(73, 69, 255, 0.2)"};
297
339
  display: flex;
298
340
  align-items: center;
299
341
  justify-content: center;
300
- font-size: ${(props) => props.$fontSize || "24px"};
301
- font-weight: bold;
342
+ font-size: ${(props) => props.$fontSize || "22px"};
343
+ font-weight: 700;
302
344
  color: ${(props) => props.$color || colors$1.primary};
303
- box-shadow: 0 4px 12px ${(props) => props.$shadowColor || "rgba(73, 69, 255, 0.15)"};
345
+ box-shadow: 0 4px 14px ${(props) => props.$shadowColor || "rgba(73, 69, 255, 0.25)"};
346
+ flex-shrink: 0;
347
+ `;
348
+ const ProviderTextBlock = styled__default.default(designSystem.Box)`
349
+ display: flex;
350
+ flex-direction: column;
351
+ gap: 4px;
352
+ margin-top: auto;
304
353
  `;
305
354
  const ProviderName = styled__default.default(designSystem.Typography)`
306
355
  font-weight: 600;
307
- font-size: 15px;
356
+ font-size: 16px;
357
+ line-height: 1.25;
308
358
  color: ${colors$1.text};
309
359
  margin: 0;
310
360
  `;
311
- styled__default.default(designSystem.Typography)`
312
- font-size: 12px;
361
+ const ProviderTagline = styled__default.default(designSystem.Typography)`
362
+ font-size: 12.5px;
363
+ line-height: 1.4;
313
364
  color: ${colors$1.textLight};
314
365
  margin: 0;
315
366
  `;
@@ -875,101 +926,170 @@ const AddAccountModal = ({ isOpen, onClose, onAccountAdded, editAccount = null }
875
926
  },
876
927
  step
877
928
  )) }),
878
- currentStep === 1 && /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { children: /* @__PURE__ */ jsxRuntime.jsxs(ProvidersGrid, { children: [
879
- /* @__PURE__ */ jsxRuntime.jsxs(
880
- ProviderCard,
881
- {
882
- $selected: provider === "gmail-oauth",
883
- onClick: () => setProvider("gmail-oauth"),
884
- children: [
885
- /* @__PURE__ */ jsxRuntime.jsx(
886
- ProviderIcon,
887
- {
888
- $round: true,
889
- $bgColor: "#4285F433",
890
- $color: "#4285F4",
891
- $shadowColor: "rgba(66, 133, 244, 0.2)",
892
- children: "G"
893
- }
894
- ),
895
- /* @__PURE__ */ jsxRuntime.jsx(ProviderName, { children: "Gmail OAuth" })
896
- ]
897
- }
898
- ),
899
- /* @__PURE__ */ jsxRuntime.jsxs(
900
- ProviderCard,
901
- {
902
- $selected: provider === "microsoft-oauth",
903
- onClick: () => setProvider("microsoft-oauth"),
904
- children: [
905
- /* @__PURE__ */ jsxRuntime.jsx(
906
- ProviderIcon,
907
- {
908
- $round: true,
909
- $bgColor: "#00A4EF33",
910
- $color: "#00A4EF",
911
- $shadowColor: "rgba(0, 164, 239, 0.2)",
912
- children: "M"
913
- }
914
- ),
915
- /* @__PURE__ */ jsxRuntime.jsx(ProviderName, { children: "Microsoft OAuth" })
916
- ]
917
- }
918
- ),
919
- /* @__PURE__ */ jsxRuntime.jsxs(
920
- ProviderCard,
921
- {
922
- $selected: provider === "yahoo-oauth",
923
- onClick: () => setProvider("yahoo-oauth"),
924
- children: [
925
- /* @__PURE__ */ jsxRuntime.jsx(
926
- ProviderIcon,
927
- {
928
- $round: true,
929
- $bgColor: "#6001D233",
930
- $color: "#6001D2",
931
- $shadowColor: "rgba(96, 1, 210, 0.2)",
932
- children: "Y"
933
- }
934
- ),
935
- /* @__PURE__ */ jsxRuntime.jsx(ProviderName, { children: "Yahoo Mail OAuth" })
936
- ]
937
- }
938
- ),
939
- /* @__PURE__ */ jsxRuntime.jsxs(
940
- ProviderCard,
941
- {
942
- $selected: provider === "smtp",
943
- onClick: () => setProvider("smtp"),
944
- children: [
945
- /* @__PURE__ */ jsxRuntime.jsx(ProviderIcon, { children: /* @__PURE__ */ jsxRuntime.jsx(icons.Server, { style: { width: 28, height: 28 } }) }),
946
- /* @__PURE__ */ jsxRuntime.jsx(ProviderName, { children: "SMTP" })
947
- ]
948
- }
949
- ),
950
- /* @__PURE__ */ jsxRuntime.jsxs(
951
- ProviderCard,
952
- {
953
- $selected: provider === "sendgrid",
954
- onClick: () => setProvider("sendgrid"),
955
- children: [
956
- /* @__PURE__ */ jsxRuntime.jsx(ProviderIcon, { $bgColor: "#1E90FF22", $color: "#1E90FF", $shadowColor: "rgba(30, 144, 255, 0.2)", children: /* @__PURE__ */ jsxRuntime.jsx(icons.Cloud, { style: { width: 28, height: 28 } }) }),
957
- /* @__PURE__ */ jsxRuntime.jsx(ProviderName, { children: "SendGrid" })
958
- ]
959
- }
960
- ),
961
- /* @__PURE__ */ jsxRuntime.jsxs(
962
- ProviderCard,
963
- {
964
- $selected: provider === "mailgun",
965
- onClick: () => setProvider("mailgun"),
966
- children: [
967
- /* @__PURE__ */ jsxRuntime.jsx(ProviderIcon, { $bgColor: "#FF6B6B22", $color: "#FF6B6B", $shadowColor: "rgba(255, 107, 107, 0.2)", children: /* @__PURE__ */ jsxRuntime.jsx(icons.Mail, { style: { width: 28, height: 28 } }) }),
968
- /* @__PURE__ */ jsxRuntime.jsx(ProviderName, { children: "Mailgun" })
969
- ]
970
- }
971
- )
972
- ] }) }),
929
+ currentStep === 1 && /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { children: [
930
+ /* @__PURE__ */ jsxRuntime.jsxs(ProviderCategoryHeader, { children: [
931
+ /* @__PURE__ */ jsxRuntime.jsx(ProviderCategoryLabel, { children: "OAuth Providers" }),
932
+ /* @__PURE__ */ jsxRuntime.jsx(ProviderCategoryHint, { children: "Recommended" })
933
+ ] }),
934
+ /* @__PURE__ */ jsxRuntime.jsxs(ProvidersGrid, { children: [
935
+ /* @__PURE__ */ jsxRuntime.jsxs(
936
+ ProviderCard,
937
+ {
938
+ $selected: provider === "gmail-oauth",
939
+ onClick: () => setProvider("gmail-oauth"),
940
+ role: "button",
941
+ tabIndex: 0,
942
+ onKeyDown: (e) => (e.key === "Enter" || e.key === " ") && setProvider("gmail-oauth"),
943
+ children: [
944
+ /* @__PURE__ */ jsxRuntime.jsx(
945
+ ProviderIcon,
946
+ {
947
+ $round: true,
948
+ $bgColor: "rgba(66, 133, 244, 0.22)",
949
+ $color: "#4285F4",
950
+ $shadowColor: "rgba(66, 133, 244, 0.3)",
951
+ children: "G"
952
+ }
953
+ ),
954
+ /* @__PURE__ */ jsxRuntime.jsxs(ProviderTextBlock, { children: [
955
+ /* @__PURE__ */ jsxRuntime.jsx(ProviderName, { children: "Gmail" }),
956
+ /* @__PURE__ */ jsxRuntime.jsx(ProviderTagline, { children: "Google Workspace & personal accounts · 1-click OAuth" })
957
+ ] })
958
+ ]
959
+ }
960
+ ),
961
+ /* @__PURE__ */ jsxRuntime.jsxs(
962
+ ProviderCard,
963
+ {
964
+ $selected: provider === "microsoft-oauth",
965
+ onClick: () => setProvider("microsoft-oauth"),
966
+ role: "button",
967
+ tabIndex: 0,
968
+ onKeyDown: (e) => (e.key === "Enter" || e.key === " ") && setProvider("microsoft-oauth"),
969
+ children: [
970
+ /* @__PURE__ */ jsxRuntime.jsx(
971
+ ProviderIcon,
972
+ {
973
+ $round: true,
974
+ $bgColor: "rgba(0, 164, 239, 0.22)",
975
+ $color: "#00A4EF",
976
+ $shadowColor: "rgba(0, 164, 239, 0.3)",
977
+ children: "M"
978
+ }
979
+ ),
980
+ /* @__PURE__ */ jsxRuntime.jsxs(ProviderTextBlock, { children: [
981
+ /* @__PURE__ */ jsxRuntime.jsx(ProviderName, { children: "Microsoft 365" }),
982
+ /* @__PURE__ */ jsxRuntime.jsx(ProviderTagline, { children: "Outlook · Exchange · Azure AD · 1-click OAuth" })
983
+ ] })
984
+ ]
985
+ }
986
+ ),
987
+ /* @__PURE__ */ jsxRuntime.jsxs(
988
+ ProviderCard,
989
+ {
990
+ $selected: provider === "yahoo-oauth",
991
+ onClick: () => setProvider("yahoo-oauth"),
992
+ role: "button",
993
+ tabIndex: 0,
994
+ onKeyDown: (e) => (e.key === "Enter" || e.key === " ") && setProvider("yahoo-oauth"),
995
+ children: [
996
+ /* @__PURE__ */ jsxRuntime.jsx(
997
+ ProviderIcon,
998
+ {
999
+ $round: true,
1000
+ $bgColor: "rgba(96, 1, 210, 0.22)",
1001
+ $color: "#9C6BF0",
1002
+ $shadowColor: "rgba(96, 1, 210, 0.3)",
1003
+ children: "Y"
1004
+ }
1005
+ ),
1006
+ /* @__PURE__ */ jsxRuntime.jsxs(ProviderTextBlock, { children: [
1007
+ /* @__PURE__ */ jsxRuntime.jsx(ProviderName, { children: "Yahoo Mail" }),
1008
+ /* @__PURE__ */ jsxRuntime.jsx(ProviderTagline, { children: "Yahoo & AOL accounts · 1-click OAuth" })
1009
+ ] })
1010
+ ]
1011
+ }
1012
+ )
1013
+ ] }),
1014
+ /* @__PURE__ */ jsxRuntime.jsx(ProviderCategoryHeader, { children: /* @__PURE__ */ jsxRuntime.jsx(ProviderCategoryLabel, { children: "Custom & Transactional APIs" }) }),
1015
+ /* @__PURE__ */ jsxRuntime.jsxs(ProvidersGrid, { children: [
1016
+ /* @__PURE__ */ jsxRuntime.jsxs(
1017
+ ProviderCard,
1018
+ {
1019
+ $selected: provider === "smtp",
1020
+ onClick: () => setProvider("smtp"),
1021
+ role: "button",
1022
+ tabIndex: 0,
1023
+ onKeyDown: (e) => (e.key === "Enter" || e.key === " ") && setProvider("smtp"),
1024
+ children: [
1025
+ /* @__PURE__ */ jsxRuntime.jsx(
1026
+ ProviderIcon,
1027
+ {
1028
+ $bgColor: "rgba(73, 69, 255, 0.22)",
1029
+ $color: "#7B78FF",
1030
+ $shadowColor: "rgba(73, 69, 255, 0.3)",
1031
+ children: /* @__PURE__ */ jsxRuntime.jsx(icons.Server, { style: { width: 26, height: 26 } })
1032
+ }
1033
+ ),
1034
+ /* @__PURE__ */ jsxRuntime.jsxs(ProviderTextBlock, { children: [
1035
+ /* @__PURE__ */ jsxRuntime.jsx(ProviderName, { children: "SMTP" }),
1036
+ /* @__PURE__ */ jsxRuntime.jsx(ProviderTagline, { children: "Any SMTP server · full control over host, port & auth" })
1037
+ ] })
1038
+ ]
1039
+ }
1040
+ ),
1041
+ /* @__PURE__ */ jsxRuntime.jsxs(
1042
+ ProviderCard,
1043
+ {
1044
+ $selected: provider === "sendgrid",
1045
+ onClick: () => setProvider("sendgrid"),
1046
+ role: "button",
1047
+ tabIndex: 0,
1048
+ onKeyDown: (e) => (e.key === "Enter" || e.key === " ") && setProvider("sendgrid"),
1049
+ children: [
1050
+ /* @__PURE__ */ jsxRuntime.jsx(
1051
+ ProviderIcon,
1052
+ {
1053
+ $bgColor: "rgba(30, 144, 255, 0.22)",
1054
+ $color: "#4FA8FF",
1055
+ $shadowColor: "rgba(30, 144, 255, 0.3)",
1056
+ children: /* @__PURE__ */ jsxRuntime.jsx(icons.Cloud, { style: { width: 26, height: 26 } })
1057
+ }
1058
+ ),
1059
+ /* @__PURE__ */ jsxRuntime.jsxs(ProviderTextBlock, { children: [
1060
+ /* @__PURE__ */ jsxRuntime.jsx(ProviderName, { children: "SendGrid" }),
1061
+ /* @__PURE__ */ jsxRuntime.jsx(ProviderTagline, { children: "Transactional API · high deliverability · analytics" })
1062
+ ] })
1063
+ ]
1064
+ }
1065
+ ),
1066
+ /* @__PURE__ */ jsxRuntime.jsxs(
1067
+ ProviderCard,
1068
+ {
1069
+ $selected: provider === "mailgun",
1070
+ onClick: () => setProvider("mailgun"),
1071
+ role: "button",
1072
+ tabIndex: 0,
1073
+ onKeyDown: (e) => (e.key === "Enter" || e.key === " ") && setProvider("mailgun"),
1074
+ children: [
1075
+ /* @__PURE__ */ jsxRuntime.jsx(
1076
+ ProviderIcon,
1077
+ {
1078
+ $bgColor: "rgba(255, 107, 107, 0.22)",
1079
+ $color: "#FF8A8A",
1080
+ $shadowColor: "rgba(255, 107, 107, 0.3)",
1081
+ children: /* @__PURE__ */ jsxRuntime.jsx(icons.Mail, { style: { width: 26, height: 26 } })
1082
+ }
1083
+ ),
1084
+ /* @__PURE__ */ jsxRuntime.jsxs(ProviderTextBlock, { children: [
1085
+ /* @__PURE__ */ jsxRuntime.jsx(ProviderName, { children: "Mailgun" }),
1086
+ /* @__PURE__ */ jsxRuntime.jsx(ProviderTagline, { children: "Developer-first API · EU/US regions · routes & webhooks" })
1087
+ ] })
1088
+ ]
1089
+ }
1090
+ )
1091
+ ] })
1092
+ ] }),
973
1093
  currentStep === 2 && /* @__PURE__ */ jsxRuntime.jsx(FormSection, { children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", gap: 4, style: { width: "100%" }, children: [
974
1094
  /* @__PURE__ */ jsxRuntime.jsx(FullWidthField, { children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Field.Root, { required: true, children: [
975
1095
  /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Label, { children: "Account Name" }),